first page

src/views/login/index.vue

@@ -8,14 +8,21 @@
         <div class="nav-desc">
           <div v-for="item in bannerList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
             <span v-if="item.order !== 1">{{ item.name }}</span>
-            <el-dropdown v-else trigger="click" style="margin-right: 0;">
+            <el-dropdown v-else trigger="click" style="margin-right: 0;" placement="bottom-start">
               <span class="el-dropdown-link">
                 产品服务<i class="el-icon-arrow-down el-icon--right" />
               </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="1">长银e融</el-dropdown-item>
-                <el-dropdown-item command="2">长银e贸</el-dropdown-item>
-                <el-dropdown-item command="3">长银钱包</el-dropdown-item>
+              <el-dropdown-menu slot="dropdown" class="product-list">
+                <el-dropdown-item command="1">
+                  <div class="dropdown-item-title">跨境电商贸易</div>
+                  <div class="dropdown-item-desc">应收账款服务，助力全球贸易，为您的跨国业务保驾护航!</div>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </el-dropdown-item>
+                <el-dropdown-item command="2">
+                  <div class="dropdown-item-title">一般出口贸易</div>
+                  <div class="dropdown-item-desc">应收账款服务，助力全球贸易，为您的跨国业务保驾护航!</div>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
@@ -63,7 +70,7 @@
               <privacy-protocal />
             </template>
             <template v-else>
-              <img src="../../assets/login/leftLogo.png" alt="">
+              <img src="../../assets/login/login-bac.jpg" alt="">
             </template>
           </div>
         </div>
@@ -199,35 +206,35 @@ export default {
         //   isActice: false,
         //   order: 1,
         //   path: '/login/qualificationsHonors'
+        // },/
+        // {
+        //   name: '产品服务',
+        //   isActice: false,
+        //   order: 1,
+        //   path: ''
         // },
-        {
-          name: '产品服务',
-          isActice: false,
-          order: 1,
-          path: ''
-        },
         {
           name: '外贸工具',
           isActice: false,
-          order: 2,
+          order: 1,
           path: '/login/tradeTool'
         },
         {
           name: '关于我们',
           isActice: false,
-          order: 3,
+          order: 2,
           path: '/login/aboutUs'
         },
         {
           name: '联系我们',
           isActice: false,
-          order: 4,
+          order: 3,
           path: '/login/contactUs'
         },
         {
           name: '立即注册',
           isActice: false,
-          order: 5,
+          order: 4,
           path: '/login/register'
         }
       ],
@@ -248,7 +255,6 @@ export default {
   watch: {
     $route: {
       handler(val, v) {
-        console.log(val, v)
         let findIdx = -1
         this.isMobile()
         if (this.isMobileTerminal) {
@@ -518,7 +524,8 @@ export default {
         img {
           width: 100%;
           height: 100%;
-
+          border-top-left-radius: 10px;
+          border-bottom-left-radius: 10px;
         }
       }
     }
@@ -772,4 +779,46 @@ export default {
     margin: -20px;
     margin-top: -60px;
   }
+
+.product-list {
+  width: 30vw;
+  background-color: #131820ED;
+  border-width: 0;
+  padding-top: 15px;
+  border-radius: 0.5vw;
+  ::v-deep .popper__arrow::after {
+    border-bottom-color: #131820ED !important;
+  }
+  .dropdown-item-title {
+    font-size: 0.75vw;
+    color: #FFFFFF;
+    line-height: 1.1vw;
+    margin-bottom: 5px;
+  }
+  .dropdown-item-desc {
+    font-size: 0.6vw;
+    color: #999999;
+    line-height: 0.9vw;
+  }
+  ::v-deep .el-dropdown-menu__item {
+    height: 3.5vw;
+    position: relative;
+    line-height: 1.1vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  ::v-deep .el-dropdown-menu__item:hover {
+    background-color: transparent;
+    color: none;
+  }
+  .el-icon-arrow-right {
+    position: absolute;
+    right: 1.5vw;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.9vw;
+    color: #999999;
+  }
+}
 </style>