首页

src/layout/components/nav.vue

@@ -67,7 +67,7 @@ onMounted(async () => {
   try {
     // 根据当前路由路径获取分类数据
     let path = route.path;
-    if (path != '/indexMro' && path != '/indexFuli') {
+    if (path != '/indexMro' && path != '/indexFuli' && path != '/indexData') {
       path = '/index';
     }
     classifyList.value = await categoryStoreStore.fetchCategories(path);
@@ -79,7 +79,7 @@ onMounted(async () => {
 //移入分类
 const openClassify = () => {
   const path = route.path;
-  if (path != '/indexMro' && path != '/indexFuli' && path != '/index') {
+  if (path != '/indexMro' && path != '/indexFuli' && path != '/index' && path != '/indexData') {
     classifyOpen.value = true;
   }
 };

src/layout/components/search.vue

@@ -2,7 +2,8 @@
   <!-- 搜索组件 -->
   <div class="search-bos" :style="{ 'background': meta.workbench ? '#F4F4F4' : '#ffffff' }">
     <div class="search-content">
-      <img class="logo" src="@/assets/images/head.png" alt="" @click="onPath('/')" />
+      <img class="logo" :class="route.path == '/indexData' ? 'logo1' : ''" src="@/assets/images/head.png" alt="" @click="onPath('/')" />
+      <img v-if="route.path == '/indexData'" class="logo2" src="@/assets/images/head2.png" alt="" @click="onPath('/')" />
       <div class="search-box">
         <div class="search-div flex-row-start">
           <div class="search-input flex-row-center">
@@ -51,6 +52,7 @@ const toplabel = ref<any>([]);
 meta.value = route.meta;
 
 watch(route, () => {
+  console.log(route, '88');
   meta.value = route.meta;
 });
 
@@ -83,6 +85,20 @@ getSearchTitle({}).then((res) => {
     cursor: pointer;
   }
 
+  .logo1 {
+    width: 185px;
+    height: 90px;
+    margin-right: 20px;
+    margin-top: 5px;
+  }
+
+  .logo2 {
+    width: 185px;
+    height: 90px;
+    margin-top: 20px;
+    margin-right: 30px;
+  }
+
   .search-box {
     flex: 1;
     height: 88px;

src/views/home/index-data.vue

@@ -32,17 +32,12 @@
       </div>
       <div class="head-bos">
         <div class="carousel">
-          <el-carousel trigger="click" height="407px">
+          <el-carousel trigger="click" height="530px">
             <el-carousel-item v-for="item in carouselList" :key="item">
               <img :src="item.imageUrl" alt="" />
             </el-carousel-item>
           </el-carousel>
         </div>
-        <div class="head-box">
-          <div v-for="(item, index) in AdList" :key="index" class="head-item" @click="onPath('/plan?id=' + item.id)">
-            <img :src="item.imageUrl" alt="" />
-          </div>
-        </div>
       </div>
       <!-- 右边 -->
       <div class="head-right">
@@ -93,6 +88,15 @@
             <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onlogout()">退出</el-button>
           </div>
         </div> -->
+        <div class="interests">
+          <div class="interests-title">企业会员权益</div>
+          <div class="interests-bos">
+            <div v-for="(item, index) in interestsList" :key="index" class="interests-item flex-column-center">
+              <img :src="item.imageUrl" alt="" />
+              <div>{{ item.title }}</div>
+            </div>
+          </div>
+        </div>
         <div class="real-time">
           <div class="real-title flex-row-between">
             <div class="real1">优易资讯</div>
@@ -103,17 +107,24 @@
               </el-icon> -->
             </div>
           </div>
-          <template v-for="(item, index) in realList" :key="index">
-            <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
-          </template>
+          <div class="real-box">
+            <template v-for="(item, index) in realList" :key="index">
+              <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
+            </template>
+          </div>
         </div>
-        <div class="interests">
-          <div class="interests-title">企业会员权益</div>
-          <div class="interests-bos">
-            <div v-for="(item, index) in interestsList" :key="index" class="interests-item flex-column-center">
-              <img :src="item.imageUrl" alt="" />
-              <div>{{ item.title }}</div>
-            </div>
+      </div>
+    </div>
+    <div class="nav-bos">
+      <div v-for="(item, index) in navList" :key="index" class="nav-list" @click="onPath(item.url)">
+        <div class="nav-image"></div>
+        <div class="flex-row-between">
+          <div>
+            <div class="name1">{{ item.name1 }}</div>
+            <div class="name2">{{ item.name2 }}</div>
+          </div>
+          <div class="nav-more flex-row-center">
+            <el-icon><ArrowRight /></el-icon>
           </div>
         </div>
       </div>
@@ -236,6 +247,13 @@ const recommendList = ref<any>([]);
 const homeList = ref<any>([]);
 const router = useRouter();
 
+const navList = ref<any>([
+  { name1: '采购日历', name2: '提前制定和管理月度采购计划', url: '/enterprise/purchaseHistory' },
+  { name1: '自助开票', name2: '灵活自助开票 换开管票服务', url: '/enterprise/invoiceManage' },
+  { name1: '下载中心', name2: '批量订单打印', url: '/order/orderManage' },
+  { name1: '批量下单', name2: '智能识别多商品多地址一键下单', url: '/cart' }
+]);
+
 //当前客户下的站点地址
 getSiteAddress({}).then((res) => {
   if (res.code == 200) {
@@ -343,6 +361,7 @@ const onInfo = (res: any) => {
   router.push('/shop/info?id=' + res.id);
 };
 import { useUserStore } from '@/store/modules/user';
+import { url } from 'inspector';
 const onlogout = () => {
   useUserStore()
     .logout()
@@ -364,6 +383,7 @@ const onlogout = () => {
     display: flex;
     gap: 0px 10px;
     margin-top: 10px;
+    background-color: #ffffff;
 
     .classify {
       width: 234px;
@@ -485,59 +505,14 @@ const onlogout = () => {
 
       .carousel {
         width: 100%;
-        height: 407px;
+        height: 100%;
         background: #ffffff;
+        padding: 5px 0;
 
         img {
           width: 100%;
-          height: 407px;
-        }
-      }
-
-      .head-box {
-        width: 100%;
-        height: 122px;
-        margin-top: 10px;
-        display: flex;
-        gap: 0 10px;
-
-        .head-item {
-          flex: 1;
-          background-color: #ffffff;
-          height: 122px;
-          display: flex;
-          // padding-left: 20px;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 5px;
-          overflow: hidden;
-
-          img {
-            width: 100%;
-            height: 100%;
-            // width: 84px;
-            // height: 84px;
-            // margin-right: 10px;
-            // border-radius: 10px;
-          }
-
-          .head-title {
-            .head1 {
-              font-weight: 550;
-              font-size: 22px;
-              color: #101828;
-            }
-
-            .head2 {
-              width: 76px;
-              height: 21px;
-              border-radius: 34px;
-              border: 1px solid #000000;
-              font-size: 12px;
-              color: #000000;
-              margin-top: 6px;
-            }
-          }
+          height: 530px;
+          border-radius: 10px;
         }
       }
     }
@@ -549,6 +524,7 @@ const onlogout = () => {
       background: #ffffff;
       display: flex;
       flex-direction: column;
+      padding-bottom: 10px;
 
       .login-bos {
         width: calc(100% - 20px);
@@ -670,27 +646,19 @@ const onlogout = () => {
         height: 227px;
         border-bottom: 1px solid #e5e7eb;
         margin: 0 10px;
-        padding-top: 15px;
+        background: linear-gradient(0deg, #ffece8 0%, #ffffff 100%);
+        border-radius: 6px 6px 6px 6px;
+        border-top: 1px solid #ff0036;
+        padding: 10px;
 
         .real-title {
           position: relative;
-          margin-bottom: 12px;
-
-          &::after {
-            content: '';
-            top: 3px;
-            left: 0;
-            position: absolute;
-            width: 4px;
-            height: 14px;
-            background: var(--el-color-primary);
-          }
+          margin-bottom: 5px;
 
           .real1 {
             font-weight: 600;
             font-size: 14px;
-            color: #1d2129;
-            padding-left: 15px;
+            color: #f53f3f;
           }
 
           .real2 {
@@ -699,13 +667,24 @@ const onlogout = () => {
             cursor: pointer;
           }
         }
+        .real-box {
+          width: 100%;
+          background-color: #ffffff;
+          padding: 0 10px;
+          border-radius: 3px;
+        }
 
         .real-list {
-          width: 100%;
+          width: calc(100% - 20px);
           font-size: 12px;
           color: #1d2129;
-          margin-bottom: 12px;
           cursor: pointer;
+          height: 34px;
+          line-height: 34px;
+          border-bottom: 1px solid #f2f3f5;
+          &:last-child {
+            border-bottom: none;
+          }
 
           &:hover {
             color: var(--el-color-primary);
@@ -1101,5 +1080,44 @@ const onlogout = () => {
       }
     }
   }
+
+  .nav-bos {
+    width: 1200px;
+    display: flex;
+    gap: 0 10px;
+    .nav-list {
+      margin-top: 20px;
+      width: 292.5px;
+      height: 150px;
+      background: #ffffff;
+      border-radius: 10px 10px 10px 10px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      cursor: pointer;
+      .nav-image {
+        width: 50px;
+        height: 50px;
+        background: #ffeeea;
+        border-radius: 6px 6px 6px 6px;
+      }
+      .name1 {
+        font-size: 15px;
+        margin-bottom: 5px;
+        color: #101828;
+      }
+      .name2 {
+        font-size: 13px;
+        color: #6a7282;
+      }
+      .nav-more {
+        width: 20px;
+        height: 20px;
+        border-radius: 20px;
+        border: 1px solid #3d3e3f;
+      }
+    }
+  }
 }
 </style>