feat: 开发手机端热销、推荐

boyang
1 parent 70a1f94e
Showing 3 changed files with 114 additions and 1 deletions
components/ProductDetail.vue
pages/index.vue
pages/products/index.vue
@@ -505,7 +505,7 @@ const props = defineProps&lt;{
 }>();
 const info = props.info;
 let { data: resData } = await useAsyncData(
-  "detail",
+  "list",
   () =>
     $fetch("/shop/product/list", {
       method: "GET",
@@ -798,6 +798,17 @@ th {
     padding: 0;
   }
 }
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
 .image-row {
   display: flex;
   height: 245px;
@@ -818,6 +829,14 @@ th {
     width: 200px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
 @media screen and (min-width: 1537px) {
   .image-row img {
     width: 240px;
@@ -830,6 +849,12 @@ th {
     height: 140px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-row img {
+    width: 160px;
+    height: 160px;
+  }
+}
 @media screen and (min-width: 1537px) {
   .image-name {
     display: block;
@@ -852,6 +877,17 @@ th {
     margin-left: 10px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 20px;
+  }
+}
 button .recommendButton {
   margin: 0 0px;
@@ -459,6 +459,13 @@ const hotLength = computed(() =&gt;
     width: 80%;
   }
 }
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 0px;
+    width: 95%;
+  }
+}
 .active {
   background-color: #1086e8;
@@ -493,6 +500,16 @@ const hotLength = computed(() =&gt;
     width: 80%;
   }
 }
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    margin: 10px auto 30px;
+    width: 90%;
+  }
+}
 .image-row {
   display: flex;
   height: 305px;
@@ -509,6 +526,12 @@ const hotLength = computed(() =&gt;
     height: 245px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-row {
+    display: flex;
+    height: 220px;
+  }
+}
 @media screen and (min-width: 1537px) {
   .imageTotal {
     display: inline-block;
@@ -537,6 +560,13 @@ const hotLength = computed(() =&gt;
     height: 140px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-row img {
+    width: 160px;
+    height: 160px;
+    margin-left: 10px;
+  }
+}
 @media screen and (min-width: 1537px) {
   .image-name {
     display: block;
@@ -559,6 +589,17 @@ const hotLength = computed(() =&gt;
     margin-left: 10px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 5px;
+  }
+}
 button .recommendButton {
   margin: 0 0px;
   cursor: pointer;
@@ -533,6 +533,17 @@ const hotLength = computed(() =&gt;
     padding: 0;
   }
 }
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
 .image-row {
   display: flex;
   height: 245px;
@@ -553,6 +564,14 @@ const hotLength = computed(() =&gt;
     width: 200px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
 @media screen and (min-width: 1537px) {
   .image-row img {
     width: 240px;
@@ -565,6 +584,12 @@ const hotLength = computed(() =&gt;
     height: 140px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-row img {
+    width: 160px;
+    height: 160px;
+  }
+}
 @media screen and (min-width: 1537px) {
   .image-name {
     display: block;
@@ -587,6 +612,17 @@ const hotLength = computed(() =&gt;
     margin-left: 10px;
   }
 }
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 10px;
+  }
+}
 button .recommendButton {
   margin: 0 0px;