关于研发自适应样式调整

hookehuyr
Commit fb8d760cd95d763f3dba4d8c7ccedf72ba890446 fb8d760c 1 parent 4f0557d7
Showing 1 changed file with 128 additions and 6 deletions
src/views/about/product.vue
--- a/src/views/about/product.vue
View file @fb8d760
+++ b/src/views/about/product.vue
View file @fb8d760
 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 16:13:30
+ * @LastEditTime: 2024-10-22 11:26:47
  * @FilePath: /hager/src/views/about/product.vue
  * @Description: 文件描述
 -->
@@ -15,7 +15,7 @@
         </el-breadcrumb>
       </div>
     </hager-box>
-    <hager-box>
+    <hager-box v-if="!is_xs">
       <el-row style="margin: 3rem 0 1rem;">
         <el-col :span="8">
           <div class="about-box">
@@ -35,7 +35,21 @@
         </el-col>
       </el-row>
     </hager-box>
-    <hager-box class="box-n">
+    <div v-else style="margin-top: 1rem;">
+      <div class="about-img xs"></div>
+      <div class="about-box xs">
+        <div>
+          <!-- <div class="title">
+            <p class="c">生产研发</p>
+            <p class="e">Production and R&D</p>
+          </div> -->
+          <div class="introduce" v-clamp="6">
+            <p>为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。</p>
+          </div>
+          </div>
+      </div>
+    </div>
+    <hager-box v-if="!is_xs" class="box-n">
       <el-row>
         <el-col :span="12">
           <div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x.png)' }"></div>
@@ -87,7 +101,41 @@
         </el-col>
       </el-row>
     </hager-box>
-    <hager-box style="margin-top: 2rem;">
+    <div v-else class="box-2n" style="padding: 1rem;">
+      <div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x.png)' }"></div>
+      <div class="about-box xs" style="background-color: #FFF; margin-bottom: 1rem;">
+        <div class="title" style="">
+          <p class="c xs">追求卓越的匠心品质</p>
+          <p class="e xs">Originality Quality</p>
+        </div>
+        <div class="introduce" style="line-height: 2;">
+          <p style="margin-bottom: 1rem;">从模具到外壳，到主要塑料、金属和电子部件，95%的产品元器件均由海格电气自主生产；先进的生产工艺及100%高于国际的自动化全检，在缩短产品交货周期的同时，确保每一个产品均符合海格品质。</p>
+          <p>符合CNAS17025国家标准的惠州工厂实验室总面积达600平方米，测试能力满足IEC、GB、BS、AS标准的所有标准要求。</p>
+        </div>
+      </div>
+      <div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g16@2x.png)' }"></div>
+      <div class="about-box xs" style="background-color: #FFF; height: auto; margin-bottom: 1rem;">
+        <div class="title">
+          <p class="c xs">专注为你的匠心服务</p>
+          <p class="e xs">Creative Service</p>
+        </div>
+        <div class="introduce" style="line-height: 2;">
+          <p style="margin-bottom: 1rem;">位于惠州工厂的亚太定制化中心，传承德国百年匠心的开关面板定制服务，为酒店、住宅等行业提供涵盖颜色定制、UV打印、质感选择、激光雕刻等开关面板定制化服务及工序检测，让客户在激烈竞争中实现差异化与个性化。</p>
+          <p>产品预设与东莞工厂配电箱增值服务全面满足客户需求，柔性生产线和灵活生产解决方案帮助客户应对紧急交付需求。海格中国工厂RFID射频标签技术及质量追踪系统可随时了解订单生产状态，确保交货速度。广泛应用在塑壳、漏保等制造环节中的二维码技术自动调取产品工艺参数，为客户实现快速换型生产。 </p>
+        </div>
+      </div>
+      <div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x.png)' }"></div>
+      <div class="about-box xs" style="background-color: #FFF;">
+        <div class="title">
+          <p class="c xs">绿色制造的匠心承诺</p>
+          <p class="e xs">Ingenuity Commitment</p>
+        </div>
+        <div class="introduce" style="line-height: 2;">
+          <p>秉持着可持续发展观的友好生产制造理念，海格电气全球工厂严格执行ISO14001生产标准及RoHS，杜绝在生产过程中使用环境有害材料，并在容易被忽视的包装、运输环节中充分践行对环保的承诺。</p>
+        </div>
+      </div>
+    </div>
+    <hager-box v-if="!is_xs" style="margin-top: 2rem;">
       <div class="product-sum">
         <el-row :gutter="10">
           <el-col :span="6" class="box">
@@ -121,7 +169,41 @@
         </el-row>
       </div>
     </hager-box>
-    <hager-box style="margin: 2rem 0;">
+    <div v-else class="product-sum xs">
+      <el-row :gutter="0">
+        <el-col :span="12" class="box">
+          <div>
+            <img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E4%B8%93%E5%88%A9@2x.png" alt="">
+          </div>
+          <div class="num">3,000</div>
+          <div class="text">研发员工有效专利</div>
+        </el-col>
+        <el-col :span="12" class="box">
+          <div>
+            <img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E5%91%98%E5%B7%A5@2x.png" alt="">
+          </div>
+          <div class="num">800</div>
+          <div class="text">研发员工</div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="0">
+        <el-col :span="12" class="box">
+          <div>
+            <img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E6%97%B6%E9%97%B4@2x-1.png" alt="">
+          </div>
+          <div class="num">3,0000</div>
+          <div class="text">培训时长<br/>（面对面以及网络培训）</div>
+        </el-col>
+        <el-col :span="12" class="box">
+          <div>
+            <img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E7%A0%94%E5%8F%91@2x.png" alt="">
+          </div>
+          <div class="num">>6%</div>
+          <div class="text">销售额投入研发</div>
+        </el-col>
+      </el-row>
+    </div>
+    <hager-box v-if="!is_xs" style="margin: 2rem 0;">
       <el-row style="margin: 2rem 0;background-color: #F7F7F7;">
         <el-col :span="12">
           <div class="about-box big">
@@ -144,6 +226,23 @@
         </el-col>
       </el-row>
     </hager-box>
+    <div v-else style="padding: 1rem;">
+      <div class="about-box xs">
+        <div>
+          <div class="title">
+            <p class="c xs">我们就在身边</p>
+            <p class="e xs">We Are Right Here</p>
+          </div>
+          <div class="introduce big">
+            <p>由厂家技术人员做现场服务</p>
+            <p>产品交付速度迅速</p>
+            <p><span>32</span>个城市办事处在你身边</p>
+            <p><span>7X24</span>小时实时在线为你服务</p>
+          </div>
+          </div>
+      </div>
+      <div class="about-img big"></div>
+    </div>
   </div>
 </template>
@@ -200,6 +299,10 @@ export default {
         background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g18@2x.png);
         background-size: cover;
       }
+      &.xs {
+        background-position: center;
+        height: 18rem;
+      }
     }
     .about-box {
       background-color: #F7F7F7;
@@ -207,6 +310,14 @@ export default {
       padding: 2rem;
       height: 30rem; /* 让 .about-box 撑满父容器 */
       box-sizing: border-box;
+      &.xs {
+        height: auto;
+      }
+      &.xs {
+        height: auto;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+      }
       &.big {
         height: 35rem;
         padding-left: 6rem;
@@ -216,10 +327,16 @@ export default {
         .c {
           font-size: 2rem;
           color: @secondary-color;
+          &.xs {
+            font-size: 1.5rem;
+          }
         }
         .e {
           font-size: 1.5rem;
           color: @primary-color;
+          &.xs {
+            font-size: 1.1rem;
+          }
         }
       }
       .introduce {
@@ -242,7 +359,12 @@ export default {
       background-position: center;
       height: 12rem;
       color: #FFF;
-      // margin-bottom: 2rem;
+      &.xs {
+        background-color: @secondary-color;
+        background-image: none;
+        height: auto;
+        padding-bottom: 2rem;
+      }
       .box {
         text-align: center;
         padding-top: 2.5rem;