首页

ant-design-vue-jeecg/src/views/shopping/shopHome.vue

@@ -26,13 +26,17 @@
         </div>
         <div class="itemDiv d-flex">
           <div
-            class="item d-flex"
+            class="item"
             v-for="(item, index) in orderList"
             :key="index"
+
           >
-            <img :src="item.imgUrl" alt="" />
+            <router-link :to="item.url" class="d-flex">
-            <span class="title_3">{{ item.title }}</span>
+              <img :src="item.imgUrl" alt="" />
-            <span class="title_4">{{ item.desc }}</span>
+              <span class="title_3">{{ item.title }}</span>
+              <span class="title_4">{{ item.desc }}</span>
+            </router-link>
+
           </div>
         </div>
       </div>
@@ -216,24 +220,28 @@
         orderList: [
           {
             id: 1,
+            url:'/shopping/clothType',
             imgUrl: require("./assets/order01.png"),
             title: "服装类型",
             desc: "丰富款式 多样呈现",
           },
           {
             id: 2,
+            url:'/shopping/sirendingzhi',
             imgUrl: require("./assets/order02.png"),
             title: "私人订制",
             desc: "丰富款式 多样呈现",
           },
           {
             id: 3,
+            url:'/shopping/chengyi',
             imgUrl: require("./assets/order03.png"),
             title: "成衣推荐",
             desc: "丰富款式 多样呈现",
           },
           {
             id: 4,
+            url:'/shopping/news',
             imgUrl: require("./assets/order04.png"),
             title: "关于我们",
             desc: "丰富款式 多样呈现",
@@ -730,15 +738,16 @@
   .section2 .itemDiv {
     justify-content: space-around;
   }
-  .section2 .itemDiv .item {
+  .section2 .itemDiv .item a{
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 336px;
     height: 336px;
+    color: #333;
     transition: all 0.2s;
   }
-  .section2 .itemDiv .item:hover{
+  .section2 .itemDiv .item a:hover{
     background: #EEE6D9;
     border: 1px dashed #919190;
   }