Merge branch 'master' of http://8.136.199.33:3000/eta_front/eta_front

src/views/system_manage/outlinkList.vue

@@ -1,7 +1,8 @@
 <template>
   <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)">
+      <div class="outlink-item" :class="'outlink'+(index%4)" v-for="(item,index) in outlinkData" :key="item.Id" @click="gotoOutlink(item)"
+      >
         <img src="~@/assets/img/eta_base_config/outlink.png">
         <div class="outlink-item-text-zone">
           <span>{{ item.Title }}</span>
@@ -23,7 +24,8 @@ import {outlinkConfigInterence} from "@/api/modules/etaBaseConfigApi.js"
     name:"outlinkList",
     data() {
       return {
-        outlinkData:[]
+        outlinkData:[],
+        colors:['#E3EAFD','#FBEBD5','#DEF4D8','#DEF2FC']
       }
     },
     created(){
@@ -79,10 +81,10 @@ import {outlinkConfigInterence} from "@/api/modules/etaBaseConfigApi.js"
         border-radius: 8px;
         box-sizing: border-box;
         padding: 30px 40px 30px 13px;
-        border: solid 2px #0052D9;
+        // border: solid 2px #0052D9;
         cursor: pointer;
         margin: 0 30px 30px 0;
-        background-color: #F2F3FF;
+        // background-color: #F2F3FF;
         img{
           height: 55px;
           margin-top: -6px;
@@ -96,9 +98,10 @@ import {outlinkConfigInterence} from "@/api/modules/etaBaseConfigApi.js"
             font-weight: bold;
             color: #333;
             white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
             &:last-child{
               font-size: 12px;
-              color: #999999;
               font-weight: 400;
               display: block;
               margin-top: 4px;
@@ -106,15 +109,45 @@ import {outlinkConfigInterence} from "@/api/modules/etaBaseConfigApi.js"
           }
         }
         &:hover{
-          background-color: #0052D9;
-          .outlink-item-text-zone{
-            span{
-              color: #ffffff;
-              &:last-child{
-                color: rgba($color: #ffffff, $alpha: 0.65);
-              }
-            }
-          }
+          // box-shadow: 6px 7px 11px 0px rgba($color: #646464, $alpha: 0.1);
+          // box-shadow: 6px 7px 11px 0px #64646417;
+          // background-color: #0052D9;
+          // .outlink-item-text-zone{
+          //   span{
+          //     color: #ffffff;
+          //     &:last-child{
+          //       color: rgba($color: #ffffff, $alpha: 0.65);
+          //     }
+          //   }
+          // }
+        }
+      }
+      .outlink0{
+        background-color: #E3EAFD;
+        border: 2px solid #E3EAFD;
+        &:hover{
+          border: 2px solid #436FF6;
+        }
+      }
+      .outlink1{
+        background-color: #FBEBD5;
+        border: 2px solid #FBEBD5;
+        &:hover{
+          border: 2px solid #EF8E34;
+        }
+      }
+      .outlink2{
+        background-color: #DEF4D8;
+        border: 2px solid #DEF4D8;
+        &:hover{
+          border: 2px solid #65C444;
+        }
+      }
+      .outlink3{
+        background-color: #DEF2FC;
+        border: 2px solid #DEF2FC;
+        &:hover{
+          border: 2px solid #479DD2;
         }
       }
     }