修改首页

src/components/custom/custom-form.vue

@@ -32,7 +32,7 @@
             </template>
             <template v-else-if="item.type === 'selectMany'">
               <el-tooltip effect="dark" content="可输入文本搜索选项" placement="top-start">
-                <el-select filterable clearable multiple collapse-tags v-model="form[item.model]" :type="item.type" :placeholder="getField('selectplaceholder', item)" v-bind="item.options" @change="dataChange(item.model)" style="width: 100%">
+                <el-select filterable clearable multiple v-model="form[item.model]" :type="item.type" :placeholder="getField('selectplaceholder', item)" v-bind="item.options" @change="dataChange(item.model)" style="width: 100%">
                   <slot :name="item.model" v-bind="{ item }"></slot>
                 </el-select>
               </el-tooltip>

src/components/custom/custom-layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="c-layout">
     <div class="header">
-      <div class="header_1">
+      <div class="header_1 w_1700">
         <div class="left">
           <el-image class="image" :src="logo" fit="fill" />
         </div>
@@ -37,8 +37,9 @@
       </div>
       <div class="header_3">
         <el-col :span="24" class="list">
-          <div class="text" v-for="(item, index) in data" @click="selectMenu(item.route)" :class="[item.hover == '1' ? 'menuTrue' : '']" :key="index">
+          <div class="text" v-for="(item, index) in data" @click="selectMenu(item.route)" :class="[item.hover == '1' ? 'menuTrue' : '']" :key="index" @mouseover="handleMouseOver(index)" @mouseout="handleMousOut(index)">
             <div class="title">{{ item.title }}</div>
+            <div class="link"></div>
           </div>
         </el-col>
         <el-col :span="24" class="info">
@@ -143,7 +144,7 @@ const toSubscribe = () => {
   const subscribes = { [`/exchange/userEx/${userid}`]: dealMsg }
   mqClient.value = initClient(subscribes)
 }
-const dealMsg = (data) => {
+const dealMsg = () => {
   searchMessage()
 }
 
@@ -194,6 +195,20 @@ const search = async () => {
     }
   }
 }
+const handleMouseOver = (index) => {
+  data.value[index].hover = true
+  info.value = data.value[index]
+}
+const handleMousOut = (index) => {
+  data.value[index].hover = false
+  const arr = data.value.every((i) => i.hover === false)
+  if (arr) {
+    for (const val of data.value) {
+      if (route.name === val.route) val.hover = true
+      else val.hover = false
+    }
+  }
+}
 const toLink = (item) => {
   window.open(item.href, '_blank') // 在新标签页中打开URL
 }
@@ -257,8 +272,6 @@ const toOut = () => {
       align-items: center;
       justify-content: space-between;
       padding: 10px 0;
-      width: 1700px;
-      margin: 0 auto;
       .right {
         display: flex;
         font-size: $global-font-size-18;
@@ -290,17 +303,17 @@ const toOut = () => {
       }
     }
     .header_3 {
-      height: 70px;
+      height: 74px;
       background: linear-gradient(to bottom, #009fff, #0077ff);
 
       .list {
         height: 100%;
-        width: 1700px;
+        max-width: 1700px;
         margin: 0 auto;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: $global-font-size-24;
+        font-size: $global-font-size-26;
         color: #ffffff;
         .text {
           width: 10%;
@@ -320,11 +333,11 @@ const toOut = () => {
         .info_1 {
           z-index: 100;
           position: absolute;
-          left: 449px;
-          top: 143px;
+          left: 448px;
+          top: 147px;
           cursor: default;
           width: 170px;
-          background: linear-gradient(90deg, #1e79ef, #4585ed);
+          background: #0077ff;
 
           .children {
             padding: 10px;
@@ -343,12 +356,18 @@ const toOut = () => {
         }
       }
       .menuTrue {
-        background: #0165e7;
-        height: 75px;
-        line-height: 75px;
-        border-radius: 3px;
-        margin-top: -3px;
-        z-index: 100;
+        position: relative;
+        flex-direction: column;
+        align-items: center;
+        font-weight: bold;
+        .link {
+          position: absolute;
+          top: 40px;
+          width: 60px;
+          height: 5px;
+          background: #ffffff;
+          border-radius: 5px;
+        }
       }
     }
   }
@@ -360,72 +379,69 @@ const toOut = () => {
     }
   }
   .main {
-    min-height: 58.5vh;
+    min-height: 50vh;
   }
   .footer {
     font-family: PingFangSC-Regular;
-    padding: 10px 0;
+    padding: 25px 0;
     background: linear-gradient(to bottom, #009fff, #0077ff);
     box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
     color: $global-color-fff;
     font-size: $global-font-size-18;
-    .w_1700 {
-      width: 1700px;
-      margin: 10px auto;
-      .foot_1 {
-        display: flex;
-        .foot_left {
-          width: 50%;
-          .foot_content {
-            margin: 40px 0 10px 0;
-            display: flex;
-            align-items: center;
-            .content_right {
-              margin: 0 0 0 30px;
-              .title {
-                cursor: default;
-                margin: 8px 0 0 0;
-              }
-              .title:first-child {
-                margin: 0;
-              }
+    .foot_1 {
+      display: flex;
+      .foot_left {
+        width: 50%;
+        .foot_content {
+          margin: 40px 0 10px 0;
+          display: flex;
+          align-items: center;
+          .content_right {
+            margin: 0 0 0 30px;
+            .title {
+              cursor: default;
+              margin: 8px 0 0 0;
+            }
+            .title:first-child {
+              margin: 0;
             }
           }
         }
-        .foot_right {
-          width: 50%;
-          .right_1 {
-            font-size: $global-font-size-21;
-            margin: 0 0 40px 0;
-          }
-          .right_2 {
-            display: flex;
-            justify-content: space-between;
-            .list_1 {
-              .title {
-                font-size: $global-font-size-21;
-                background: #fff;
-                width: 113px;
-                height: 33px;
-                line-height: 33px;
-                border-radius: 16px;
-                margin: 0 0 10px 0;
-                color: #0078ff;
-                text-align: center;
-                font-family: PingFangSC-Semibold;
-              }
-            }
-            .list_2 {
-              font-size: $global-font-size-18;
-              margin: 15px 0 0 15px;
+      }
+      .foot_right {
+        width: 50%;
+        .right_1 {
+          font-size: $global-font-size-21;
+          margin: 0 0 40px 0;
+        }
+        .right_2 {
+          display: flex;
+          justify-content: space-between;
+          .list_1 {
+            .title {
+              font-size: $global-font-size-21;
+              background: #fff;
+              width: 113px;
+              height: 33px;
+              line-height: 33px;
+              border-radius: 16px;
+              margin: 0 0 10px 0;
+              color: #0078ff;
+              text-align: center;
+              font-family: PingFangSC-Semibold;
             }
           }
+          .list_2 {
+            font-size: $global-font-size-18;
+            margin: 15px 0 0 15px;
+            cursor: default;
+          }
         }
       }
-      .foot_2 {
-        text-align: center;
-        padding: 10px 0 0 0;
-      }
+    }
+    .foot_2 {
+      text-align: center;
+      padding: 10px 0 0 0;
     }
 
     .foot {
@@ -469,6 +485,7 @@ const toOut = () => {
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: center;
+                cursor: default;
                 div {
                   margin: 0 5px 5px 0;
                   cursor: default;

src/views/one/page.vue

@@ -13,7 +13,10 @@
           <div class="right_left">
             <span class="tab" :class="[item.value == active ? 'active' : '']" v-for="(item, index) in newList" :key="index" @click="toActive(item)">{{ item.label }}</span>
           </div>
-          <div class="right_right" @click="toMore(0)">查看更多</div>
+          <div class="right_right">
+            <div class="more_title" @click="toMore(0)">查看更多</div>
+            <el-icon size="24"><ArrowRight /></el-icon>
+          </div>
         </div>
         <div class="right_2">
           <vue3-seamless-scroll :list="list" :hover="true" :step="0.5" :limit-scroll-num="3" :wheel="true" :isWatch="true">
@@ -98,7 +101,7 @@
         </div>
       </div>
       <div class="more">
-        <div class="more_title" @click="toMore(2)">查看更多</div>
+        <div class="more_title" @click="toMore(1)">查看更多</div>
         <el-icon size="24"><ArrowRight /></el-icon>
       </div>
       <div class="join">
@@ -271,7 +274,7 @@ watch(
   }
   .one {
     max-width: 1700px;
-    margin: 20px auto 0;
+    margin: 30px auto 0;
     height: 680px;
     display: flex;
     justify-content: space-between;
@@ -289,43 +292,28 @@ watch(
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin: 0 0 10px 0;
+
         .right_left {
-          font-size: $global-font-size-20;
+          font-size: $global-font-size-28;
           .tab {
-            margin: 0 15px 0 0;
+            margin: 0 30px 0 0;
             cursor: pointer;
           }
           .active {
-            color: #006cff;
-            position: relative;
-          }
-          .active::after {
-            position: absolute;
-            bottom: -15px;
-            left: 50%;
-            margin-left: -10px;
-            width: 14px;
-            height: 8px;
-            background: url(/images/icon-downarw.png) no-repeat;
-            content: '';
+            font-size: 40px;
           }
         }
         .right_right {
-          font-size: 16px;
-          padding: 5px 10px;
-          color: #fff;
-          background-color: #006cff;
-          border-radius: 40px;
+          display: flex;
+          align-items: center;
+          font-size: 24px;
           cursor: default;
         }
-        .right_right:hover {
-          background-color: #475b86;
-        }
       }
       .right_2 {
         height: 630px;
         overflow: hidden;
-        margin: 30px 0 0 0;
         .list {
           display: flex;
           border-bottom: 1px solid #979797;