fix: 修改期刊推荐，prod2.sh-31/32

boyang
1 parent c9efefea
Showing 2 changed files with 80 additions and 36 deletions
components/ProductDetail.vue
deploy/prod2.sh
@@ -418,20 +418,34 @@
         >
           <v-tab value="one">Blog recommendation</v-tab>
         </v-tabs>
-        <!-- <v-list rounded>
-          <v-list-item-group v-model="selectedItem" color="primary">
-            <v-list-item
+<!--        <v-list lines="three">-->
+<!--          <v-list-item-->
+<!--              v-for="item in info.journals"-->
+<!--              :key="item.id"-->
+<!--              :subtitle="item.title"-->
+<!--              @click="navigateToUrl(item.link)"-->
+<!--              lines="three"-->
+<!--              style="font-size: 24px"-->
+<!--          ></v-list-item>-->
+<!--        </v-list>-->
+        <v-list>
+          <v-list-item
               v-for="item in info.journals"
               :key="item.id"
               @click="navigateToUrl(item.link)"
-            >
-              <v-list-item-content>
-                <v-list-item-title v-text="item.title"></v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-item-group>
-        </v-list> -->
-        <v-list rounded>
+              @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-list rounded>
           <v-list-item-group v-model="selectedItem" color="primary">
             <v-list-item
               v-for="item in info.journals"
@@ -439,32 +453,44 @@
               @click="navigateToUrl(item.link)"
             >
               <v-list-item-content>
-                <v-hover v-slot:default="{ isHovering, props }">
-                  <div v-bind="props">
-                    <v-list-item-title
-                      v-if="!isHovering"
-                      v-text="item.title"
-                      style="
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                      "
-                    ></v-list-item-title>
-                    <span v-if="isHovering" bottom style="color: #1e88e5">{{
-                      item.title
-                    }}</span>
-                    <!-- <v-tooltip v-if="isHovering" bottom>
-                      <template v-slot:activator="{ props: tooltipProps }">
-                        <span v-bind="tooltipProps">{{ item.title }}</span>
-                      </template>
-                      <span>{{ item.title }}</span>
-                    </v-tooltip> -->
-                  </div>
-                </v-hover>
+                <v-list-item-title v-text="item.title"></v-list-item-title>
               </v-list-item-content>
             </v-list-item>
           </v-list-item-group>
-        </v-list>
+        </v-list> -->
+<!--        <v-list rounded>-->
+<!--          <v-list-item-group v-model="selectedItem" color="primary">-->
+<!--            <v-list-item-->
+<!--              v-for="item in info.journals"-->
+<!--              :key="item.id"-->
+<!--              @click="navigateToUrl(item.link)"-->
+<!--            >-->
+<!--              <v-list-item-content>-->
+<!--                <v-hover v-slot:default="{ isHovering, props }">-->
+<!--                  <div v-bind="props">-->
+<!--                    <v-list-item-title-->
+<!--                      v-text="item.title"-->
+<!--                      style="-->
+<!--                        overflow: hidden;-->
+<!--                        text-overflow: ellipsis;-->
+<!--                        white-space: nowrap;-->
+<!--                      "-->
+<!--                    ></v-list-item-title>-->
+<!--                    <span v-if="isHovering" bottom style="color: #1e88e5">{{-->
+<!--                      item.title-->
+<!--                    }}</span>-->
+<!--                     <v-tooltip v-if="isHovering" bottom>-->
+<!--                      <template v-slot:activator="{ props: tooltipProps }">-->
+<!--                        <span v-bind="tooltipProps">{{ item.title }}</span>-->
+<!--                      </template>-->
+<!--                      <span>{{ item.title }}</span>-->
+<!--                    </v-tooltip>-->
+<!--                  </div>-->
+<!--                </v-hover>-->
+<!--              </v-list-item-content>-->
+<!--            </v-list-item>-->
+<!--          </v-list-item-group>-->
+<!--        </v-list>-->
       </div>
     </div>
     <div class="social-share-container">
@@ -518,6 +544,7 @@ const dialogStore = useDialogStore();
 const href1 = ref("/products");
 const href2 = ref("/products");
 const idHref = ref("/products");
+const hoveredItem = ref(null);
 const itemsss = [
   {
     name: "Item #1",
@@ -843,4 +870,21 @@ button .recommendButton {
   font-size: 1rem;
   font-weight: bold;
 }
+
+.title {
+  font-size: 15px; /* 设置字体大小为24px */
+  color: black;    /* 设置字体颜色为黑色 */
+  display: -webkit-box; /* 使用盒模型显示多行文本 */
+  -webkit-line-clamp: 2; /* 限制为两行 */
+  -webkit-box-orient: vertical; /* 盒子方向为垂直 */
+  overflow: hidden;   /* 超过部分隐藏 */
+  transition: max-height 0.3s ease; /* 过渡效果 */
+}
+
+.full-title {
+  display: block; /* 当悬浮时显示为块级元素 */
+  color: #1e88e5;
+  white-space: normal; /* 允许换行 */
+  overflow: visible;   /* 显示全部内容 */
+}
 </style>
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.30"
-TAG="1.0.31"
+LAST_TAG="1.0.31"
+TAG="1.0.32"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"