fix 兼容性调整

hookehuyr
Commit de09507739a97eed05fb5f386f36d6fa97742924 de095077 1 parent 7dfd93db
Showing 4 changed files with 126 additions and 49 deletions
index.html
src/components/common/hagerHeader.vue
src/views/index.vue
src/views/solution/index.vue
--- a/index.html
View file @de09507
+++ b/index.html
View file @de09507
-<!--
- * @Date: 2024-09-26 13:36:06
- * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-15 10:18:01
- * @FilePath: /hager/index.html
- * @Description: 文件描述
--->
 <!doctype html>
 <html lang="en">
   <head>
--- a/src/components/common/hagerHeader.vue
View file @de09507
+++ b/src/components/common/hagerHeader.vue
View file @de09507
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-12 15:16:42
+ * @LastEditTime: 2024-10-15 11:01:58
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-header">
-    <div class="header-top"></div>
+    <div v-if="choose_country" class="location-banner">
+      <div>You are localised in the following country : </div>
+      <div></div>
+    </div>
+    <!-- <div class="header-top hidden-xs-only"></div> -->
     <el-row class="hidden-xs-only" style="background-color: #fff;">
       <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
       <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
@@ -259,20 +263,34 @@ export default {
       is_active: '',
       p_index: 0,
       show_menu: false,
+      margin_top: 0,
+      choose_country: false, // 主动选择了国家地区
     }
   },
   mounted () {
+    //
+    let margin_top = 5; // 默认高度
+    let once_header_height = 5; // 选择国家地区高度
+    // let hidden_header_height = 2; // 可隐藏高度s
+    if (this.choose_country) { // 没有点击国家地区
+      margin_top += once_header_height;
+    }
+    $('.wrapper').css('marginTop', margin_top + 'rem');
+    // 监听屏幕滚动
+    // $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
+    // window.addEventListener('scroll', (evt) => {
+    //   if ($(window).scrollTop()) {
+    //     $('.header-top').css('height', 0);
+    //     $('.wrapper').css('marginTop', margin_top - hidden_header_height + 'rem');
+    //   } else {
+    //     $('.header-top').css('height', '2rem');
+    //     $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
+    //   }
+    // });
+    //
     this.product_info = this.product_menu[0]['info'];
     // 修改数据结构显示
     this.product_info.product = this.splitProductList(this.product_info.product);
-    // 监听屏幕滚动
-    window.addEventListener('scroll', (evt) => {
-      if ($(window).scrollTop()) {
-        $('.header-top').css('height', 0);
-      } else {
-        $('.header-top').css('height', '2rem');
-      }
-    })
   },
   watch: {
     '$route' (to, from) {
@@ -382,6 +400,13 @@ export default {
     left: 0;
     right: 0;
     z-index: 9;
+    .location-banner {
+      display: flex;
+      background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), #00477e;
+      width: 100%;
+      height: 5rem;
+      color: white;
+    }
     .header-top {
       display: flex;
       background-color: #00477e;
--- a/src/views/index.vue
View file @de09507
+++ b/src/views/index.vue
View file @de09507
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 17:28:51
+ * @LastEditTime: 2024-10-15 11:49:38
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -49,13 +49,17 @@
     <hager-box class="box-2n" @screen-width="handleScreenWidth">
       <hager-h1 title="解决方案" sub="Solution"></hager-h1>
       <div v-if="!is_xs" class="hager-solution">
-        <div
+        <el-row :gutter="15">
-          @click="goToSolution(item)"
+          <el-col :span="6" v-for="(item, index) in solution_list" :key="index">
-          class="solution-item"
+            <div
-          :style="{ backgroundImage: 'url('+item.src+')' }"
+              @click="goToSolution(item)"
-          v-for="(item, index) in solution_list" :key="index">
+              class="solution-item"
-          <p>{{ item.title }}</p>
+              :style="{ backgroundImage: 'url('+item.src+')' }"
-        </div>
+              >
+              <p>{{ item.title }}</p>
+            </div>
+          </el-col>
+        </el-row>
       </div>
       <div v-else>
         <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSolutionSlideChange">
@@ -76,16 +80,20 @@
     <hager-box class="box-n">
       <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
       <div v-if="!is_xs" class="hager-product-center">
-        <div @click ="goToProduct(item)" v-for="(item, index) in product_list" :key="index" class="product-item">
+        <el-row :gutter="15">
-          <el-image style="height: 14rem;" :src="item.src" fit="cover"></el-image>
+          <el-col :span="6" v-for="(item, index) in product_list" :key="index">
-          <p style="margin-top: 1rem;">{{ item.title }}</p>
+            <div @click ="goToProduct(item)" class="product-item">
-        </div>
+              <div class="img" :style="{ backgroundImage: 'url('+item.src+')' }"></div>
+              <p style="margin-top: 1rem;">{{ item.title }}</p>
+            </div>
+          </el-col>
+        </el-row>
       </div>
       <div v-else>
         <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
           <swiper-slide v-for="(item, index) in product_list" :key="index">
             <div @click="goToProduct(item)" class="product-item xs">
-              <el-image style="height: 8rem; margin: 1rem; margin-bottom: 0;" :src="item.src" fit="cover"></el-image>
+              <div class="img" :style="{ height: '8rem', margin: '1rem', backgroundImage: 'url('+item.src+')' }"></div>
               <p style="margin: 0.5rem;">{{ item.title }}</p>
             </div>
           </swiper-slide>
@@ -385,15 +393,6 @@ export default {
   }
   .hager-solution {
     margin-top: 2rem;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
-    gap: 1.5rem; /* 每个项目之间的间距 */
-    &.xs {
-      display: flex;
-      overflow: hidden; /* 超出部分隐藏 */
-      width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
-      gap: 1rem;
-    }
   }
   .solution-item {
     position: relative;
@@ -478,11 +477,9 @@ export default {
         font-weight: bold;
         font-size: 1.35rem;
         color: @secondary-color;
-        display: -webkit-box;        /* 结合其他属性进行多行文本处理 */
+        white-space: nowrap;        /* 不换行 */
-        -webkit-line-clamp: 1;       /* 设置显示的行数 */
+        overflow: hidden;           /* 隐藏超出部分 */
-        -webkit-box-orient: vertical; /* 垂直排列 */
+        text-overflow: ellipsis;    /* 用省略号表示被截断的部分 */
-        overflow: hidden;            /* 超出部分隐藏 */
-        text-overflow: ellipsis;     /* 使用省略号替代超出的文本 */
       }
       .news-item-sub {
         color: @primary-color;
@@ -500,9 +497,9 @@ export default {
   .hager-product-center {
     margin-top: 2rem;
-    display: grid;
+    // display: grid;
-    grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
+    // grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
-    gap: 1.5rem; /* 每个项目之间的间距 */
+    // gap: 1.5rem; /* 每个项目之间的间距 */
     // &.xs {
     //   display: flex;
     //   overflow: hidden; /* 超出部分隐藏 */
@@ -527,9 +524,15 @@ export default {
       // flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
       // padding: 0 20px;
       // box-sizing: border-box;
-      padding: 0;
       margin-top: 1rem;
-      padding-bottom: 0.25rem;
+      // padding-bottom: 0.25rem;
+      padding: 0.1rem;
+    }
+    .img {
+      height: 14rem;
+      background-size: cover;      /* 相当于 object-fit: cover */
+      background-position: center; /* 让图片居中 */
+      background-repeat: no-repeat;
     }
   }
--- a/src/views/solution/index.vue
View file @de09507
+++ b/src/views/solution/index.vue
View file @de09507
@@ -39,6 +39,62 @@
         </div>
       </div>
     </hager-box>
+    <hager-box v-if="!is_xs" class="box-2n">
+      <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
+      <div style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;">
+        <div>
+          <div>快速</div>
+          <div>
+            <p>7x24小时全天实时在线</p>
+            <p>全国32个城市办事处</p>
+            <p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
+          </div>
+        </div>
+        <div>
+          <div>专业</div>
+          <div>
+            <p>全由海格技术人员组成，提供专业技术服务
+            拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
+          </div>
+        </div>
+        <div>
+          <div>增值</div>
+          <div>
+            <p>为客户提供定制化服务，充分满足客户需求
+            针对客户需求提供过保产品保养及维修服务
+            针对现有产品（改造/升级/退市及一定使用
+            年限）提出替换/升级方案并实施完成</p>
+          </div>
+        </div>
+      </div>
+    </hager-box>
+    <div v-else style="padding: 1rem;">
+      <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
+      <div>
+        <div>快速</div>
+        <div>
+          <p>7x24小时全天实时在线</p>
+          <p>全国32个城市办事处</p>
+          <p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
+        </div>
+      </div>
+      <div>
+        <div>专业</div>
+        <div>
+          <p>全由海格技术人员组成，提供专业技术服务
+          拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
+        </div>
+      </div>
+      <div>
+        <div>增值</div>
+        <div>
+          <p>为客户提供定制化服务，充分满足客户需求
+          针对客户需求提供过保产品保养及维修服务
+          针对现有产品（改造/升级/退市及一定使用
+          年限）提出替换/升级方案并实施完成</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>