✨ feat: 产品介绍页面新增头部banner显示

hookehuyr
Commit 38686915c4cdc92427749c4298a7db665b74d735 38686915 1 parent 7a95351a
Showing 1 changed file with 49 additions and 6 deletions
src/views/product/index.vue
--- a/src/views/product/index.vue
View file @3868691
+++ b/src/views/product/index.vue
View file @3868691
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-07 14:51:28
+ * @LastEditTime: 2024-11-11 09:28:03
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="product-index">
-    <hager-box>
+    <hager-box v-if="!is_search">
-      <div v-if="!is_search" style="margin-top: 1.5rem;">
+      <div style="margin-top: 1.5rem;">
         <el-breadcrumb v-if="!is_all_cate" separator="/">
           <el-breadcrumb-item :to="{ path: allPath }">所有产品</el-breadcrumb-item>
           <el-breadcrumb-item v-if="parent_name" :to="{ path: productPath }">{{ parent_name }}</el-breadcrumb-item>
@@ -18,8 +18,28 @@
           <el-breadcrumb-item>所有产品</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
+    </hager-box>
-      <hager-h1 v-else :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
+    <hager-box v-if="!is_xs && !is_search" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: `url('https://cdn.ipadbiz.cn/hager/img/product/banner-l@2x.png'), url(${banner})`, marginTop: '1rem' }">
+      <div class="banner-text-wrapper" style="margin-top: 5%;">
+        <div class="text">
+          <p class="title" style="margin-bottom: 0; color: white; font-size: 2.2vw;">{{ category_name }}</p>
+          <p class="sub" style="color: white; font-size: 2.2vw;">{{ category_name_en }}</p>
+          <div style="margin-top: 1rem; font-weight: normal; font-size: 1.15vw; color: white; width: 50%;">
+            <p v-html="category_description"></p>
+          </div>
+        </div>
+      </div>
+    </hager-box>
+    <hager-box>
+      <div v-if="!is_xs">
+        <hager-h1 v-if="is_search" :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
+      </div>
+      <div v-else>
+        <hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
+        <hager-h1 v-else :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
+      </div>
+    </hager-box>
+    <hager-box>
       <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
         <el-col :span="6">
           <div class="product-nav-wrapper">
@@ -79,6 +99,8 @@ export default {
       parent_name: '',
       category_name: '所有产品',
       category_name_en: 'All Products',
+      category_description: '',
+      banner: '',
       cate_list: [],
       product_list: [],
       no_product_img: 'https://cdn.ipadbiz.cn/hager/img/no-product-img.png',
@@ -137,7 +159,9 @@ export default {
       this.$nextTick(() => {
         // 动态计算图片高度
         let img_width = $('.product-item-img img').outerWidth();
-         $('.product-item-img img').css('height', img_width * 1 + 'px')
+        $('.product-item-img img').css('height', img_width * 1 + 'px');
+        let banner_width = $('.top-img').outerWidth();
+        $('.top-img').css('height', banner_width * 0.21 + 'px');
       })
     },
     handleChange(val) {
@@ -158,6 +182,8 @@ export default {
         let info = data[0];
         this.category_name = '所有产品';
         this.category_name_en = 'All Products';
+        this.category_description = '';
+        this.banner = 'https://cdn.ipadbiz.cn/hager/img/product/banner-r@2x.png';
         this.product_list = info.list;
         this.search_keyword = '';
@@ -174,6 +200,8 @@ export default {
         this.parent_name = info.parent_name;
         this.category_name = info.category_name;
         this.category_name_en = info.category_name_en;
+        this.category_description = info.category_description;
+        this.banner = info.banner;
         this.product_list = info.list;
         this.search_keyword = '';
@@ -257,6 +285,21 @@ export default {
       }
     }
+    .top-img {
+      background-size: 50% 100%; /* 每张背景图各占 50% 的宽度，100% 的高度 */
+      background-position: left, right; /* 第一张图在左侧，第二张图在右侧 */
+      background-repeat: no-repeat; /* 避免背景图重复 */
+      position: relative;
+      width: 100%;
+      height: 25rem; /* 或根据需要指定高度 */
+      &.xs {
+        height: 12rem;
+      }
+      .top-center {
+        position: absolute;
+        transform: translateY(50%); /* 垂直与水平居中 */
+      }
+    }
     .product-list {
       display: flex;