From 59e49eda5a3379165e20edc5a8f3762e0d1068a6 Mon Sep 17 00:00:00 2001
From: dengj <209192278@qq.com>
Date: Tue, 12 Dec 2023 17:26:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E7=AB=99=E7=82=B9?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/site/index.vue | 198 +++++++++++++++++++++++++++++++++++----
 1 file changed, 179 insertions(+), 19 deletions(-)

diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index 92cdb9d..b787e0f 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -10,7 +10,7 @@
         <div class="all-btn">
           全选
         </div>
-        <div class="all-btn">
+        <div class="all-btn del-btn">
           删除
         </div>
       </div>
@@ -42,42 +42,69 @@
             </div>
           </div>
         </div>
-        <div class="edit-btn">
+        <div class="edit-btn" @click="isVisited=true">
           <div class="edit-icon"></div>
-          <div @click="isVisited=true">站点编辑</div>
+          <div>站点编辑</div>
         </div>
       </div>
-      <div class="site-box add-box">
+      <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：iu78686</span>
-        <span>站点管理员id：j98h0</span>
+        <span>站点id：{{ siteId }}</span>
+        <span>站点管理员id：{{ siteManageId }}</span>
       </div>
-      <el-form :model="form">
+      <el-form :model="form" :label-position="right" label-width="116px">
         <el-form-item label="站点地址">
-          <el-input v-model="form.address"/>
+          <el-input v-model="form.address" placeholder="请输入站点地址"/>
         </el-form-item>
         <el-form-item label="站点名称">
-          <el-input v-model="form.name"/>
+          <el-input v-model="form.name" placeholder="请输入站点名称"/>
         </el-form-item>
-        <el-form-item label="站点	描述">
-          <el-input v-model="form.desc" type="textarea"/>
+        <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"/>
+          <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,
@@ -86,6 +113,8 @@ const siteList = ref([
     implementationLength: 10
   }
 ])
+const siteId = ref('iu78686')
+const siteManageId = ref('j98h0')
 const isClick = ref(false);
 const isVisited = ref(false);
 const form = ref({
@@ -103,18 +132,85 @@ const handleClickSite = () => {
 .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: 50px 60px;
+  padding: 30px 40px;
   box-sizing: border-box;
+  margin: 588px auto 0 auto;
 
   .el-dialog__header {
     padding: 0;
@@ -157,6 +253,13 @@ const handleClickSite = () => {
     .all-del-btn {
       display: flex;
 
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
       .all-btn {
         cursor: pointer;
         padding-left: 56px;
@@ -178,20 +281,19 @@ const handleClickSite = () => {
 
   .box-content {
     display: flex;
-    margin-top: 142px;
-    padding-left: 67px;
+    flex-wrap: wrap;
+    padding-left: 70px;
 
     .add-box {
+      cursor: pointer;
       font-weight: bold;
       color: #60DDDE;
       font-size: 32px;
       display: flex;
       flex-direction: column;
-      //justify-content: center;
       align-items: center;
 
       .add-icon {
-        cursor: pointer;
         margin-top: 160px;
         margin-bottom: 107px;
         width: 320px;
@@ -201,7 +303,8 @@ const handleClickSite = () => {
     }
 
     .site-box {
-      margin-right: 119px;
+      margin-top: 122px;
+      margin-right: 122px;
       padding: 31px 43px;
       width: 1158px;
       height: 718px;
@@ -339,14 +442,15 @@ const handleClickSite = () => {
       }
 
       .edit-btn {
+        width: 174px;
         cursor: pointer;
         margin-top: 147px;
         display: flex;
-        justify-content: center;
         align-items: center;
         font-size: 32px;
         color: #60DDDE;
         line-height: 42px;
+        margin-left: 492px;
 
         .edit-icon {
           width: 30px;
@@ -359,6 +463,62 @@ const handleClickSite = () => {
 
 
   }
+
+  .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>