odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁 : 隧道管理界面

Browse Source
This commit is contained in:
dengj
2023-12-15 18:00:40 +08:00
parent 37b16633cf
commit 1168c9eb13
10 changed files with 777 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/views/site/index.vue
View File

@@ -32,32 +32,31 @@
<div>施工长度{{ item.constructionLength }}米</div>
<div>实现长度{{ item.implementationLength }}公里</div>
</div>
<div class="tunnel-add">
<div class="tunnel-add" @click="goToAddTunnel">
<div class="add-icon"></div>
</div>
</div>
<div class="more">
<div class="more" @click="router.push('/tunnel')">
更多
<div class="icon"></div>
</div>
</div>
</div>
<div class="edit-btn" @click="isVisited=true">
<div class="edit-btn" @click="handleEdit">
<div class="edit-icon"></div>
<div>站点编辑</div>
</div>
</div>
<div class="site-box add-box" @click="isVisited=true">
<div class="site-box add-box" @click="handleAdd">
<div class="add-icon"></div>
<div style="cursor: pointer">添加站点</div>
</div>
</div>
<el-dialog v-model="isVisited" width="958px">
<el-dialog v-model="isVisited" width="1958px">
<div class="siteId">
<span>站点id：{{ siteId }}</span>
<span>站点管理员id：{{ siteManageId }}</span>
<span>{{title}}</span>
</div>
<el-form :model="form" :label-position="right" label-width="116px">
<el-form :model="form" :label-position="right" label-width="168px">
<el-form-item label="站点地址">
<el-input v-model="form.address" placeholder="请输入站点地址"/>
</el-form-item>
@@ -65,7 +64,7 @@
<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-input v-model="form.desc" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }" placeholder="请输入站点信息"/>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="请输入备注"/>
@@ -111,24 +110,11 @@ const siteList = ref([
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 title=ref('新增站点')
const isClick = ref(false);
const isVisited = ref(false);
const form = ref({
@@ -140,17 +126,26 @@ const form = ref({
const handleClickSite = () => {
isClick.value = !isClick.value
}
const goToAddTunnel=()=>{
router.push('/tunnel')
}
const handleEdit=()=>{
title.value='编辑站点'
isVisited.value=true
}
const handleAdd=()=>{
title.value='新增站点'
isVisited.value=true
}
</script>
<style scoped lang="scss">
.siteId {
font-size: 30px;
display: flex;
justify-content: center;
margin: 0 0 60px 0;
font-size: 50px;
color: #FFFFFF;
margin-bottom: 48px;
> span:first-child {
margin-right: 70px;
}
}
.btns {
@@ -160,36 +155,49 @@ const handleClickSite = () => {
.cancel-btn {
cursor: pointer;
width: 190px;
height: 60px;
width: 220px;
height: 80px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #08B7B8;
line-height: 60px;
line-height: 80px;
padding-left: 67px;
font-size: 28px;
font-size: 38px;
box-sizing: border-box;
}
.sure-btn {
cursor: pointer;
width: 190px;
height: 60px;
line-height: 60px;
width: 220px;
height: 80px;
line-height: 80px;
background: #08B7B8;
border-radius: 11px;
color: #FFFFFF;
font-size: 28px;
font-size: 38px;
padding-left: 67px;
}
}
:deep(.el-dialog) {
border: 2px solid #05FEFF;
background: #0D6578;
border-radius: 20px;
padding: 30px 40px;
box-sizing: border-box;
margin: 458px auto 0 auto;
.el-dialog__header {
padding: 0;
display: none;
}
}
:deep(.el-form-item) {
margin-top: 40px;
}
:deep(.el-form-item__label) {
font-size: 26px;
font-size: 38px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
margin-right: 12px;
@@ -197,15 +205,16 @@ const handleClickSite = () => {
}
:deep(.el-input) {
height: 50px;
height: 75px;
.el-input__wrapper {
background-color: transparent;
border: 1px solid #08B7B8;
.el-input__inner {
height: auto;
color: #fff;
font-size: 26px;
font-size: 38px;
}
}
}
@@ -213,24 +222,10 @@ const handleClickSite = () => {
:deep(.el-textarea__inner) {
background-color: transparent;
border: 1px solid #08B7B8;
//min-height: 50px!important;
color: #fff;
font-size: 26px;
font-size: 38px;
}
: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;
@@ -247,19 +242,19 @@ const handleClickSite = () => {
margin: 0 0 0 70px;
display: flex;
align-items: center;
width: 168px;
height: 60px;
line-height: 60px;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
font-size: 28px;
font-size: 38px;
color: #FFFFFF;
.back-icon {
margin-right: 20px;
margin-left: 33px;
width: 26px;
height: 26px;
margin-left: 23px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
@@ -276,14 +271,14 @@ const handleClickSite = () => {
.all-btn {
cursor: pointer;
padding-left: 56px;
width: 168px;
height: 60px;
line-height: 60px;
padding-left: 53px;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #FFFFFF;
font-size: 28px;
font-size: 38px;
&:last-child {
margin-left: 40px;
@@ -304,7 +299,7 @@ const handleClickSite = () => {
cursor: pointer;
font-weight: bold;
color: #60DDDE;
font-size: 32px;
font-size: 38px;
display: flex;
flex-direction: column;
align-items: center;
@@ -322,8 +317,8 @@ const handleClickSite = () => {
margin-top: 122px;
//margin-right: 122px;
padding: 40px 50px;
width: 1158px;
height: 718px;
width: 1250px;
height: 750px;
background-image: url('@/assets/images/site/zdgl_bj.png');
//box-sizing: border-box;
position: relative;
@@ -335,25 +330,25 @@ const handleClickSite = () => {
.top {
display: flex;
justify-content: space-between;
font-size: 32px;
font-size: 45px;
font-weight: bold;
color: #FFFFFF;
line-height: 42px;
> div:last-child {
cursor: pointer;
width: 30px;
height: 30px;
width: 40px;
height: 40px;
border: 2px solid #05FEFF;
border-radius: 25px;
position: relative;
.clickColor {
position: absolute;
top: 5.5px;
left: 5.5px;
width: 16px;
height: 16px;
top: 7px;
left: 6.5px;
width: 25px;
height: 25px;
background-color: #05FEFF;
border-radius: 25px;
}
@@ -366,8 +361,8 @@ const handleClickSite = () => {
.left-img {
margin-top: 50px;
margin-right: 60px;
width: 480px;
height: 350px;
width: 500px;
height: 370px;
background-image: url('@/assets/images/site/zdgl_zd.png');
}
@@ -375,7 +370,7 @@ const handleClickSite = () => {
position: relative;
> div:first-child {
font-size: 32px;
font-size: 38px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 42px;
@@ -386,21 +381,18 @@ const handleClickSite = () => {
margin-top: 29px;
.tunnel {
width: 256px;
height: 310px;
width: 280px;
height: 350px;
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;
font-size: 32px;
margin-top: 20px;
}
@@ -409,21 +401,21 @@ const handleClickSite = () => {
}
> div:nth-child(3), > div:nth-child(4) {
font-size: 26px;
font-size: 32px;
}
.tunnel-icon {
width: 62px;
height: 64px;
width: 82px;
height: 84px;
background-image: url('@/assets/images/site/zdgl_icon_sd.png');
margin: 30px 0 40px 0;
margin: 30px 0 30px 0;
}
}
.tunnel-add {
margin-left: 20px;
width: 256px;
height: 310px;
width: 280px;
height: 350px;
background: #1891A3;
border-radius: 16px;
display: flex;
@@ -432,8 +424,8 @@ const handleClickSite = () => {
.add-icon {
cursor: pointer;
width: 112px;
height: 112px;
width: 122px;
height: 122px;
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
}
}
@@ -448,13 +440,13 @@ const handleClickSite = () => {
right: 0;
font-weight: bold;
color: #35C5CC;
font-size: 28px;
font-size: 38px;
.icon {
margin-left: 19px;
transform: rotate(180deg);
width: 26px;
height: 26px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
@@ -462,35 +454,34 @@ const handleClickSite = () => {
}
.edit-btn {
width: 174px;
cursor: pointer;
margin-top: 147px;
margin-top: 117px;
display: flex;
align-items: center;
font-size: 32px;
font-size: 40px;
color: #60DDDE;
line-height: 42px;
margin-left: 492px;
.edit-icon {
width: 30px;
height: 32px;
width: 42px;
height: 44px;
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
margin-right: 16px;
}
}
}
}
.pagination {
margin-top: 120px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
bottom: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #60DDDE;
font-size: 32px;
font-size: 38px;
font-weight: bold;
> span:first-child {
margin-right: 60px;
@@ -502,7 +493,7 @@ const handleClickSite = () => {
:deep(.btn-prev) {
background-color: transparent;
font-size: 32px;
font-size: 38px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #60DDDE;
@@ -511,7 +502,7 @@ const handleClickSite = () => {
:deep(.btn-next) {
background-color: transparent;
font-size: 32px;
font-size: 38px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #60DDDE;
@@ -519,12 +510,12 @@ const handleClickSite = () => {
}
:deep(.el-pager li.is-active ) {
width: 60px;
height: 60px;
width: 70px;
height: 70px;
background: #60DDDE;
border-radius: 50%;
color: #071F40;
font-size: 32px;
font-size: 38px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
}
@@ -534,12 +525,12 @@ const handleClickSite = () => {
}
:deep(.el-pager li:not(.is-active) ) {
width: 60px;
height: 60px;
width: 70px;
height: 70px;
border: 1px solid #60DDDE;
border-radius: 50%;
background-color: transparent;
font-size: 32px;
font-size: 38px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #60DDDE;