feat: 开发手机端期刊推荐

boyang
1 parent c9c99346
Showing 1 changed file with 51 additions and 24 deletions
components/MobileProductDetail.vue
@@ -206,8 +206,10 @@
       <v-tabs
         class="tabs"
         v-model="tab"
-        bg-color="#fff"
-        slider-color="#1d89e4"
+        style="margin-top: 25px; margin-bottom: 20px"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
         selected-class="active"
       >
         <v-tab :value="1">Product Details</v-tab>
@@ -263,8 +265,9 @@
       <v-tabs
         class="tabs"
         v-model="tabProduct"
-        bg-color="#fff"
-        slider-color="#1d89e4"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
         selected-class="active"
         style="margin-bottom: 20px"
       >
@@ -397,20 +400,39 @@
         <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
       </v-window>
     </div>
-    <!-- <div class="tw-pb-[64px] ma-4 rounded-lg">
+    <div class="tw-pb-[64px] ma-4 rounded-lg">
       <v-tabs
         class="tabs"
         v-model="tabJournal"
-        bg-color="#fff"
-        slider-color="#1d89e4"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
         selected-class="active"
       >
         <v-tab :value="1">JOURNAL RECOMMENDATION</v-tab>
       </v-tabs>
-      <v-window v-model="tab">
-        <v-window-item key="1" :value="1"> </v-window-item>
+      <v-window v-model="tabJournal">
+        <v-window-item key="1" :value="1">
+          <v-list>
+            <v-list-item
+              v-for="item in info.journals"
+              :key="item.id"
+              @click="navigateToUrl(item.link)"
+              @mouseenter="hoveredItem = item.id"
+              @mouseleave="hoveredItem = null"
+            >
+              <v-list-item-title>
+                <span
+                  :class="['title', { 'full-title': hoveredItem === item.id }]"
+                >
+                  {{ item.title }}
+                </span>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-window-item>
       </v-window>
-    </div> -->
+    </div>
     <!-- Basic use -->
     <div class="social-share-container">
       <SocialShare
@@ -457,9 +479,9 @@ const info = props.info;
 // onMounted(() => {
 //   dialogStore.updateDialog(true)
 // })
-const tab = ref(0);
-const tabProduct = ref(0);
-const tabJournal = ref(0);
+const tab = ref();
+const tabProduct = ref();
+const tabJournal = ref();
 const slide = ref(0);
 const router = useRouter();
 const href1 = ref("/products");
@@ -481,7 +503,11 @@ const currentIndexHot = ref(1);
 const total = ref(3);
 const hotTotal = ref(10);
 const isOrNotMobile = isMobile();
+const hoveredItem = ref(null);
+const navigateToUrl = (url) => {
+  window.open(url); // 在新标签页中打开链接
+};
 const loadProducts = async () => {
   const pageSize = 4;
   loading.value = true;
@@ -502,8 +528,8 @@ const loadProducts = async () =&gt; {
     }
   );
   total.value = resData.value.data.total;
-  if (total.value > 30) {
-    total.value = 30;
+  if (total.value > 50) {
+    total.value = 50;
   }
   recommendList.value = resData.value.data.records;
   maxPageRe.value = resData.value.data.pages;
@@ -724,21 +750,22 @@ const hotLength = computed(() =&gt;
 </script>
 <style lang="scss" scoped>
-.tabs {
-  border-bottom: 2px solid #cbd9e4;
-}
-
-.active {
-  background-color: #fff;
-}
 // .tabs {
-//   border-bottom: 2px solid #1f88e5;
+//   border-bottom: 2px solid #cbd9e4;
 // }
 // .active {
-//   background-color: #1086e8;
+//   background-color: #fff;
 // }
+.tabs {
+  border-bottom: 2px solid #1f88e5;
+}
+
+.active {
+  background-color: #1086e8;
+}
+
 .tw-sticky {
   position: sticky;
 }