551 lines
12 KiB
Vue
551 lines
12 KiB
Vue
<template>
|
||
<div class="site-bgc">
|
||
<div class="box-top">
|
||
<div class="back-tunnel" @click="router.push('/')">
|
||
<div class="back-icon"></div>
|
||
<span>返回</span>
|
||
</div>
|
||
<div class="tunnel-title"></div>
|
||
<div class="all-del-btn">
|
||
<div class="all-btn">
|
||
全选
|
||
</div>
|
||
<div class="all-btn del-btn">
|
||
删除
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-content">
|
||
<div class="site-box" v-for="item in siteList">
|
||
<div class="top">
|
||
<span>站点名称：{{ item.siteName }}</span>
|
||
<div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
|
||
</div>
|
||
<div class="box-center">
|
||
<div class="left-img"></div>
|
||
<div class="right-tunnel">
|
||
<div>隧道数量：{{ item.num }}条</div>
|
||
<div>
|
||
<div class="tunnel">
|
||
<div>{{ item.sortTunnel }}</div>
|
||
<div class="tunnel-icon"></div>
|
||
<div>施工长度{{ item.constructionLength }}米</div>
|
||
<div>实现长度{{ item.implementationLength }}公里</div>
|
||
</div>
|
||
<div class="tunnel-add">
|
||
<div class="add-icon"></div>
|
||
</div>
|
||
</div>
|
||
<div class="more">
|
||
更多
|
||
<div class="icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="edit-btn" @click="isVisited=true">
|
||
<div class="edit-icon"></div>
|
||
<div>站点编辑</div>
|
||
</div>
|
||
</div>
|
||
<div class="site-box add-box" @click="isVisited=true">
|
||
<div class="add-icon"></div>
|
||
<div style="cursor: pointer">添加站点</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog v-model="isVisited" width="958px">
|
||
<div class="siteId">
|
||
<span>站点id：{{ siteId }}</span>
|
||
<span>站点管理员id：{{ siteManageId }}</span>
|
||
</div>
|
||
<el-form :model="form" :label-position="right" label-width="116px">
|
||
<el-form-item label="站点地址">
|
||
<el-input v-model="form.address" placeholder="请输入站点地址"/>
|
||
</el-form-item>
|
||
<el-form-item label="站点名称">
|
||
<el-input v-model="form.name" placeholder="请输入站点名称"/>
|
||
</el-form-item>
|
||
<el-form-item label="站点描述">
|
||
<el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入站点信息"/>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="form.remark" placeholder="请输入备注"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="btns">
|
||
<div class="cancel-btn" @click="isVisited=false">
|
||
取消
|
||
</div>
|
||
<div class="sure-btn">
|
||
确定
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<div class="pagination">
|
||
<span>首页</span>
|
||
<el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
|
||
<span>尾页</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const router = useRouter()
|
||
const siteList = ref([
|
||
{
|
||
siteName: '松江站',
|
||
num: 1,
|
||
sortTunnel: '一号隧道',
|
||
constructionLength: 500,
|
||
implementationLength: 10
|
||
},
|
||
{
|
||
siteName: '松江站',
|
||
num: 1,
|
||
sortTunnel: '一号隧道',
|
||
constructionLength: 500,
|
||
implementationLength: 10
|
||
},
|
||
{
|
||
siteName: '松江站',
|
||
num: 1,
|
||
sortTunnel: '一号隧道',
|
||
constructionLength: 500,
|
||
implementationLength: 10
|
||
},
|
||
{
|
||
siteName: '松江站',
|
||
num: 1,
|
||
sortTunnel: '一号隧道',
|
||
constructionLength: 500,
|
||
implementationLength: 10
|
||
},
|
||
{
|
||
siteName: '松江站',
|
||
num: 1,
|
||
sortTunnel: '一号隧道',
|
||
constructionLength: 500,
|
||
implementationLength: 10
|
||
},
|
||
])
|
||
const siteId = ref('iu78686')
|
||
const siteManageId = ref('j98h0')
|
||
const isClick = ref(false);
|
||
const isVisited = ref(false);
|
||
const form = ref({
|
||
address: '',
|
||
name: '',
|
||
desc: '',
|
||
remark: ''
|
||
});
|
||
const handleClickSite = () => {
|
||
isClick.value = !isClick.value
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.siteId {
|
||
font-size: 30px;
|
||
color: #FFFFFF;
|
||
margin-bottom: 48px;
|
||
|
||
> span:first-child {
|
||
margin-right: 70px;
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 80px;
|
||
|
||
.cancel-btn {
|
||
cursor: pointer;
|
||
width: 190px;
|
||
height: 60px;
|
||
border-radius: 11px;
|
||
border: 2px solid #08B7B8;
|
||
color: #08B7B8;
|
||
line-height: 60px;
|
||
padding-left: 67px;
|
||
font-size: 28px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sure-btn {
|
||
cursor: pointer;
|
||
width: 190px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
background: #08B7B8;
|
||
border-radius: 11px;
|
||
color: #FFFFFF;
|
||
font-size: 28px;
|
||
padding-left: 67px;
|
||
}
|
||
}
|
||
|
||
:deep(.el-form-item) {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
:deep(.el-form-item__label) {
|
||
font-size: 26px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
margin-right: 12px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
:deep(.el-input) {
|
||
height: 50px;
|
||
|
||
.el-input__wrapper {
|
||
background-color: transparent;
|
||
border: 1px solid #08B7B8;
|
||
|
||
.el-input__inner {
|
||
color: #fff;
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-textarea__inner) {
|
||
background-color: transparent;
|
||
border: 1px solid #08B7B8;
|
||
//min-height: 50px!important;
|
||
color: #fff;
|
||
font-size: 26px;
|
||
}
|
||
|
||
:deep(.el-dialog) {
|
||
border: 2px solid #05FEFF;
|
||
background: #0D6578;
|
||
border-radius: 20px;
|
||
padding: 30px 40px;
|
||
box-sizing: border-box;
|
||
margin: 588px auto 0 auto;
|
||
|
||
.el-dialog__header {
|
||
padding: 0;
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.site-bgc {
|
||
padding: 85px 0 0 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url('@/assets/images/site/zdgl_dbj.png');
|
||
|
||
.box-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.back-tunnel {
|
||
cursor: pointer;
|
||
margin: 0 0 0 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 168px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
border-radius: 11px;
|
||
border: 2px solid #08B7B8;
|
||
font-size: 28px;
|
||
color: #FFFFFF;
|
||
|
||
.back-icon {
|
||
margin-right: 20px;
|
||
margin-left: 33px;
|
||
width: 26px;
|
||
height: 26px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||
}
|
||
}
|
||
|
||
.all-del-btn {
|
||
display: flex;
|
||
|
||
.del-btn {
|
||
width: 168px;
|
||
height: 60px;
|
||
background: #08B7B8;
|
||
border-radius: 11px;
|
||
}
|
||
|
||
.all-btn {
|
||
cursor: pointer;
|
||
padding-left: 56px;
|
||
width: 168px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
border-radius: 11px;
|
||
border: 2px solid #08B7B8;
|
||
color: #FFFFFF;
|
||
font-size: 28px;
|
||
|
||
&:last-child {
|
||
margin-left: 40px;
|
||
margin-right: 70px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: 100px;
|
||
padding-right: 100px;
|
||
justify-content: space-between;
|
||
|
||
.add-box {
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
font-size: 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.add-icon {
|
||
margin-top: 160px;
|
||
margin-bottom: 107px;
|
||
width: 320px;
|
||
height: 320px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||
}
|
||
}
|
||
|
||
.site-box {
|
||
margin-top: 122px;
|
||
//margin-right: 122px;
|
||
padding: 40px 50px;
|
||
width: 1158px;
|
||
height: 718px;
|
||
background-image: url('@/assets/images/site/zdgl_bj.png');
|
||
//box-sizing: border-box;
|
||
position: relative;
|
||
|
||
&:nth-child(3) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 42px;
|
||
|
||
> div:last-child {
|
||
cursor: pointer;
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 2px solid #05FEFF;
|
||
border-radius: 25px;
|
||
position: relative;
|
||
|
||
.clickColor {
|
||
position: absolute;
|
||
top: 5.5px;
|
||
left: 5.5px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: #05FEFF;
|
||
border-radius: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-center {
|
||
display: flex;
|
||
|
||
.left-img {
|
||
margin-top: 50px;
|
||
margin-right: 60px;
|
||
width: 480px;
|
||
height: 350px;
|
||
background-image: url('@/assets/images/site/zdgl_zd.png');
|
||
}
|
||
|
||
.right-tunnel {
|
||
position: relative;
|
||
|
||
> div:first-child {
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
line-height: 42px;
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
display: flex;
|
||
margin-top: 29px;
|
||
|
||
.tunnel {
|
||
width: 256px;
|
||
height: 310px;
|
||
background: #3FBED1;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
//justify-content: center;
|
||
align-items: center;
|
||
color: #FFFFFF;
|
||
|
||
> div:first-child {
|
||
width: 112px;
|
||
height: 37px;
|
||
font-size: 28px;
|
||
line-height: 37px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
> div:nth-child(3) {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
> div:nth-child(3), > div:nth-child(4) {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.tunnel-icon {
|
||
width: 62px;
|
||
height: 64px;
|
||
background: #FFFFFF;
|
||
margin: 30px 0 40px 0;
|
||
}
|
||
}
|
||
|
||
.tunnel-add {
|
||
margin-left: 20px;
|
||
width: 256px;
|
||
height: 310px;
|
||
background: #1891A3;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.add-icon {
|
||
cursor: pointer;
|
||
width: 112px;
|
||
height: 112px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||
}
|
||
}
|
||
}
|
||
|
||
.more {
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 0;
|
||
font-weight: bold;
|
||
color: #35C5CC;
|
||
font-size: 28px;
|
||
|
||
.icon {
|
||
margin-left: 19px;
|
||
transform: rotate(180deg);
|
||
width: 26px;
|
||
height: 26px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-btn {
|
||
width: 174px;
|
||
cursor: pointer;
|
||
margin-top: 147px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32px;
|
||
color: #60DDDE;
|
||
line-height: 42px;
|
||
margin-left: 492px;
|
||
|
||
.edit-icon {
|
||
width: 30px;
|
||
height: 32px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 120px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #60DDDE;
|
||
font-size: 32px;
|
||
|
||
> span:first-child {
|
||
margin-right: 60px;
|
||
}
|
||
|
||
> span:last-child {
|
||
margin-left: 71px;
|
||
}
|
||
|
||
:deep(.btn-prev) {
|
||
background-color: transparent;
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
:deep(.btn-next) {
|
||
background-color: transparent;
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
:deep(.el-pager li.is-active ) {
|
||
width: 60px;
|
||
height: 60px;
|
||
background: #60DDDE;
|
||
border-radius: 50%;
|
||
color: #071F40;
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
}
|
||
|
||
:deep(.el-pager li) {
|
||
margin-left: 40px;
|
||
}
|
||
|
||
:deep(.el-pager li:not(.is-active) ) {
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 1px solid #60DDDE;
|
||
border-radius: 50%;
|
||
background-color: transparent;
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|