From bb914b0cbf1f151eebc70e806df7e825786ab495 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 10 十二月 2021 18:47:39 +0800
Subject: [PATCH] 改

---
 src/pages/vindicate/index/App.vue |   72 +++++++++++++++++++++++++++++++-----
 1 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 7c9649d..aedbc6a 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="container" v-if="!showWelcome">
+  <div class="container vindicate" v-if="!showWelcome">
+
     <div class="container-left">
       <div
         class="left-card"
@@ -20,7 +21,7 @@
     <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
   </div>
 
-    <div class="welcome-page" v-else ref="curPage">
+    <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
     <div
       class="search-box"
       :class="showRecomand ? 'border-change' : ''"
@@ -60,6 +61,8 @@
         @click="openWelcome(i)"
         v-for="(item, i) in menuArr"
         :key="i"
+        @mousedown="mouseDownIndex = i"
+        :class="mouseDownIndex === i? 'nav-child-active':''"
       >
         <div class="child-info">
           <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
@@ -110,6 +113,8 @@
       full: 0,
       showWelcome:true,
       searchText:'',
+      showRecomand:false,
+      mouseDownIndex:''
     };
   },
   created() {
@@ -127,12 +132,13 @@
       // });
     }
      this.getLeftPer()
-     console.log(99999);
      window.addEventListener("message",(e)=>{
-     console.log(999);
      if(e.data.msg === 'changeColor') {
      document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
-       }       
+       } 
+      if (e.data.msg === '杩斿洖绯荤粺缁存姢') {
+    this.showWelcome = true
+      }     
      })
   },
   methods: {
@@ -198,7 +204,7 @@
     position: fixed;
     left: calc(50% - 166px);
     top: 50px;
-    background: rgba(255, 255, 255, 0.8);
+    opacity: 0.8;
 
     border: 2px solid #4e94ff;
     box-sizing: border-box;
@@ -231,6 +237,29 @@
         transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
         width: 100%;
         font-weight: bold;
+
+        &::-webkit-input-placeholder { /* WebKit browsers */
+        color: #828282;
+        font-weight: normal;
+        font-size: 14px;
+        }
+        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: #828282;
+        font-weight: normal;
+        font-size: 14px;
+        }
+        &::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: #828282;
+        font-weight: normal;
+        font-size: 14px;
+        }
+        &:-ms-input-placeholder { /* Internet Explorer 10+ */
+        color: #828282;
+        font-weight: normal;
+        font-size: 14px;
+
+      }
+
       }
       .el-input__suffix {
         display: flex;
@@ -253,6 +282,7 @@
     .search-res {
       max-height: 240px;
       overflow: auto;
+      background-color: rgba(255, 255, 255, 0.5);
       .res-bar {
         height: 40px;
         line-height: 40px;
@@ -283,12 +313,14 @@
     }
   }
   .nav-items {
+    max-width: 960px;
+    margin: 0 auto;
     .nav-child {
       box-sizing: border-box;
       background-color: rgba(251, 251, 255, 0.1);
       backdrop-filter: blur(4px);
       float: left;
-      width: 46%;
+      width: 442px;
       height: 190px;
       margin: 0 15px;
       margin-bottom: 30px;
@@ -297,6 +329,15 @@
       justify-content: center;
       align-items: center;
       cursor: pointer;
+      border: 2px solid #F2F2F7;
+
+      &:hover {
+        background: #F2F2F7;
+      }
+
+      &-active {
+        border: 2px solid #4E94FF;
+      }
 
       // box-shadow: 2px 2px 4px rgb(226, 226, 226);
       .child-info {
@@ -310,7 +351,7 @@
         img {
           width: 64px;
           margin: 0 auto;
-          margin-top: 65px;
+          margin-top: 61px;
           height: 50px;
         }
         .welcome-title {
@@ -337,16 +378,23 @@
   flex: 1;
   flex-basis: auto;
   box-sizing: border-box;
+  position: relative;
+
+  .back {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   .container-left {
     height: 100%;
     width: 244px;
     overflow: auto;
     box-sizing: border-box;
     flex-shrink: 0;
-    padding: 17px 10px 0 10px;
+    padding: 13px 10px 0 10px;
     box-sizing: border-box;
     background: #fff;
-    border-top:2px solid #E1E0E6 ;
     .left-card {
       position: relative;
       width: 224px;
@@ -399,6 +447,10 @@
   }
 
 }
+
+.vindicate {
+  border-top:2px solid #E1E0E6 ;
+}
 </style>
 
 

--
Gitblit v1.8.0