ETA_1.0.1 UI修改

src/views/system_manage/outlinkList.vue

@@ -2,12 +2,16 @@
   <div id="out-link-list" class="out-link-list">
     <div v-if="outlinkData && outlinkData.length>0" class="outlink-box">
       <div class="outlink-item" v-for="item in outlinkData" :key="item.Id" @click="gotoOutlink(item)">
-        <img src="~@/assets/img/icons/card.png">
-        <span>{{ item.Title }}</span>
+        <img src="~@/assets/img/eta_base_config/outlink.png">
+        <div class="outlink-item-text-zone">
+          <span>{{ item.Title }}</span>
+          <span>{{ item.Url }}</span>
+        </div>
       </div>
     </div>
     <div class="no-outlink" v-else>
-      <tableNoData text="暂无数据" size="mini"/>
+      <img src="~@/assets/img/data_m/nodata.png"/>
+      <span>暂无数据</span>
     </div>
 
   </div>
@@ -48,42 +52,63 @@ import {outlinkConfigInterence} from "@/api/modules/etaBaseConfigApi.js"
     background-color: white;
     border: solid 1px #DCDFE6;
     box-sizing: border-box;
-    padding: 42px;
+    padding: 30px;
     .outlink-box{
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: flex-start;
-      margin-right: -68px;
+      margin-right: -30px;
       .outlink-item{
         display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 142px;
-        width: 194px;
-        border:solid 1px #409EFF;
-        border-radius: 10px;
+        align-items: flex-start;
+        height: 100px;
+        width: 250px;
+        border-radius: 8px;
         box-sizing: border-box;
-        padding: 20px;
+        padding: 30px 40px 30px 13px;
+        border: solid 2px #0052D9;
         cursor: pointer;
-        margin-right: 68px;
-        margin-bottom: 68px;
+        margin: 0 30px 30px 0;
+        background-color: #F2F3FF;
         img{
-          height: 32px;
-          width: 32px;
+          height: 55px;
+          margin-top: -6px;
+          width: 55px;
         }
-        span{
-          color: #000000;
-          font-size: 18px;
-          white-space: nowrap;
+        .outlink-item-text-zone{
           overflow: hidden;
           text-overflow: ellipsis;
-          margin-left: 8px;
+          span{
+            font-size: 16px;
+            font-weight: bold;
+            color: #333;
+            white-space: nowrap;
+            &:last-child{
+              font-size: 12px;
+              color: #999999;
+              font-weight: 400;
+              display: block;
+              margin-top: 4px;
+            }
+          }
         }
       }
     }
     .no-outlink{
-      margin-top: 200px;
+      margin: 70px auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 260px;
+      img{
+        width: 260px;
+      }
+      span{
+       font-size: 16px;
+       color: #999999; 
+      }
     }
   }
 </style>

src/views/system_manage/outlinkListConfig.vue

@@ -22,7 +22,7 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="{ row }">
           <span class="table-button" @click="editOutlink(row)">编辑</span>
-          <span class="table-button" style="color: #FF0000;" @click="deleteOutlink(row)">删除</span>
+          <span class="table-button" style="color: #C54322;" @click="deleteOutlink(row)">删除</span>
         </template>
       </el-table-column>
       <div slot="empty" style="line-height: 44px; margin: 60px 0; color: #999">
@@ -43,7 +43,7 @@
     :title="dialogTitle"
     :close-on-click-modal="false"
     center @close="resetForm">
-      <div style="display: flex;align-items: center;justify-content: center;">
+      <div class="form-box">
         <el-form
         :model="outlinkForm"
         ref="outlinkFormRef"
@@ -54,7 +54,7 @@
           <el-form-item prop="Url" label="页面链接" :rules="{required:true,message:'URL不能为空',trigger:'blur'}">
               <el-input v-model="outlinkForm.Url" placeholder="请输入URL" style="width: 295px;"></el-input>
           </el-form-item>
-          <div style="text-align:center;margin-bottom:35px;margin-top:40px">
+          <div class="form-box-buttons-zone">
             <el-button style="width: 120px;height: 40px;" @click="addOutlinkShow=false">取消</el-button>
             <el-button type="primary" @click="addOutlinkSave" style="margin-left:30px;width: 120px;height: 40px;">确定</el-button>
           </div>
@@ -169,11 +169,22 @@ import mPage from '@/components/mPage.vue';
     .table-button{
       font-size: 14px;
       cursor: pointer;
-      color: #409eff;
+      color: #0052D9;
       margin-right: 8px;
       &:last-child{
         margin-right: 0;
       }
     }
   }
+  .form-box{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top: 30px;
+      .form-box-buttons-zone{
+        text-align:center;
+        margin-bottom:35px;
+        margin-top:120px;
+      }
+    }
 </style>