联系我们自适应调整

hookehuyr
Commit 30fe48f2f7a04c9079743707dd4d0c3cac546988 30fe48f2 1 parent b088fbb3
Showing 1 changed file with 208 additions and 22 deletions
src/views/concat.vue
--- a/src/views/concat.vue
View file @30fe48f
+++ b/src/views/concat.vue
View file @30fe48f
 <!--
  * @Date: 2024-10-18 09:31:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 17:35:11
+ * @LastEditTime: 2024-10-22 14:44:21
  * @FilePath: /hager/src/views/concat.vue
  * @Description: 联系我们
 -->
 <template>
   <div class="hager-concat-page">
-    <div class="top-img"></div>
+    <div :class="['top-img', is_xs ? 'xs' : '']"></div>
-    <hager-box style="margin: 3rem 0;">
+    <hager-box class="box-wrapper xs">
-      <el-row :gutter="0" style="margin-bottom: 1rem;">
+      <el-row v-if="!is_xs" :gutter="0" style="margin-bottom: 1rem;">
         <el-col :span="16">
           <div class="img"></div>
         </el-col>
@@ -23,9 +23,19 @@
           </div>
         </el-col>
       </el-row>
+      <div v-else>
+        <div class="headquarter-wrapper xs">
+          <div class="info xs">
+            <div class="title">中国总部</div>
+            <div class="name" style="margin: 1rem;">座机</div>
+            <div class="number">021-66986600</div>
+          </div>
+        </div>
+        <div class="img xs"></div>
+      </div>
       <div>
-        <div class="concat-area">全 国</div>
+        <div :class="['concat-area', is_xs ? 'xs' : '']">全 国</div>
-        <el-row :gutter="0">
+        <el-row v-if="!is_xs" :gutter="0">
           <el-col :span="12">
             <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
               <el-col :span="13" class="title"><span class="inner">LSM/智能化产品事业部</span></el-col>
@@ -41,7 +51,20 @@
             </el-row>
           </el-col>
         </el-row>
-        <div class="concat-area">华 东</div>
+        <div v-else class="xs-box">
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">LSM/智能化产品事业部</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">贺先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13817300169</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">发电行业</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">许先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13910422245</span></el-col>
+          </el-row>
+        </div>
+        <div :class="['concat-area', is_xs ? 'xs' : '']">华 东</div>
+        <div v-if="!is_xs">
           <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
             <el-col :span="12">
               <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
@@ -90,7 +113,36 @@
               </el-row>
             </el-col>
           </el-row>
-        <div class="concat-area">华 南</div>
+        </div>
+        <div v-else class="xs-box">
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">合肥</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">丁先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">15155181380</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">南京 苏北 无锡 苏州</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">葛先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">18662188718</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">上海</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">侯女士</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">18621185022</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">杭州</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">谢先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">18657575776</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">宁波</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">李女士</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13819421866</span></el-col>
+          </el-row>
+        </div>
+        <div :class="['concat-area', is_xs ? 'xs' : '']">华 南</div>
+        <div v-if="!is_xs">
           <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
             <el-col :span="12">
               <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
@@ -142,7 +194,39 @@
               </el-row>
             </el-col>
           </el-row>
-        <div class="concat-area">北 区</div>
+        </div>
+        <div v-else class="xs-box">
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><p class="inner xs">广州 佛山 顺德 茂名 湛江 韶关 海南</p></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">座机</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">020-31650557</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
+            <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner xs">深圳 惠州</span></el-col>
+            <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner xs">座机</p></el-col>
+            <el-col :span="8" class="number outer" style="margin-top: 1rem;">
+              <p class="inner xs">0755-82559248</p>
+              <p class="inner xs">020-31650557</p>
+            </el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">珠海 东莞 中山</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">王先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">15900247733</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">汕头 汕尾 潮州</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">陈先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">15817966395</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">福建省</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">林先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">18650180767</span></el-col>
+          </el-row>
+        </div>
+        <div :class="['concat-area', is_xs ? 'xs' : '']">北 区</div>
+        <div v-if="!is_xs">
           <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
             <el-col :span="12" style="border-right: 1px solid #DADADA;">
               <el-row :gutter="0">
@@ -210,7 +294,49 @@
               </el-row>
             </el-col>
           </el-row>
-        <div class="concat-area">华 中</div>
+        </div>
+        <div v-else class="xs-box">
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
+            <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner xs">北京</span></el-col>
+            <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner xs">座机</p></el-col>
+            <el-col :span="8" class="number outer" style="margin-top: 1rem;">
+              <p class="inner xs">010-84535251</p>
+              <p class="inner xs">010-84535112</p>
+            </el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><p class="inner xs">京津 内蒙</p></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">孙先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13911009923</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">辽宁</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">马先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">18940112000</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">吉林 黑龙江</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">郭女士</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13394492511</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">河北 山西</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">明女士</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13832171806</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">济南 烟台</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">张先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13608967713</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">青岛</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">岳先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13608965895</span></el-col>
+          </el-row>
+        </div>
+        <div :class="['concat-area', is_xs ? 'xs' : '']">华 中</div>
+        <div v-if="!is_xs">
           <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
             <el-col :span="12">
               <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
@@ -243,8 +369,26 @@
               </el-row>
             </el-col>
           </el-row>
-        <div class="concat-area">西 南</div>
+        </div>
-        <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
+        <div v-else class="xs-box">
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">湖北</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">余先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13607118550</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">湖南</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">祝先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13507421625</span></el-col>
+          </el-row>
+          <el-row :gutter="0" style="padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">河南</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">座机</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">0731-84416348</span></el-col>
+          </el-row>
+        </div>
+        <div :class="['concat-area', is_xs ? 'xs' : '']">西 南</div>
+        <el-row v-if="!is_xs" :gutter="0" style="border-bottom: 1px solid #DADADA;">
           <el-col :span="12">
             <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
               <el-col :span="13" class="title"><span class="inner">四川 重庆 贵州 云南 西藏</span></el-col>
@@ -260,6 +404,13 @@
             </el-row>
           </el-col>
         </el-row>
+        <div v-else class="xs-box">
+          <el-row :gutter="0" style="padding: 1.5rem 0;">
+            <el-col :span="13" class="title"><span class="inner xs">四川 重庆 贵州 云南 西藏</span></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">梁先生</p></el-col>
+            <el-col :span="8" class="number outer"><span class="inner xs">13637700633</span></el-col>
+          </el-row>
+        </div>
       </div>
     </hager-box>
   </div>
@@ -289,20 +440,21 @@ export default {
 <style lang="less" scoped>
   .hager-concat-page {
     .top-img {
-      height: 23rem;
+      height: 22rem;
       background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner05.png);
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
+      &.xs {
+        height: 12rem;
+      }
     }
-    .img {
+    .box-wrapper {
-      width: 100%;
+      margin: 3rem 0;
-      height: 25rem;
+      &.xs {
-      background-image: url(https://cdn.ipadbiz.cn/hager/img/concat/l01.png);
+        margin: 1rem 0;
-      background-size: cover;
+      }
-      background-position: center;
-      background-repeat: no-repeat;
     }
     .headquarter-wrapper {
@@ -311,11 +463,18 @@ export default {
       justify-content: center;
       height: 25rem;
       background-color: #F7F7F7;
+      &.xs {
+        height: auto;
+        padding: 2rem 0;
+      }
       .info {
         display: flex;
         flex-direction: column;
         font-size: 1.5rem;
         text-align: center;
+        &.xs {
+          font-size: 1.25rem;
+        }
       }
     }
@@ -323,9 +482,10 @@ export default {
       color: @secondary-color;
       font-weight: bold;
       .inner {
-        // margin-left: 1.5rem;
-        // text-indent: 1.5rem;
         padding-left: 1.5rem;
+        &.xs {
+          padding-left: 0.5rem;
+        }
       }
     }
@@ -337,6 +497,9 @@ export default {
       }
       .inner {
         text-align: center;
+        &.xs {
+          text-align: center;
+        }
       }
     }
@@ -348,6 +511,21 @@ export default {
       }
       .inner {
         margin-right: 1.5rem;
+        &.xs {
+          margin-right: 0.5rem;
+        }
+      }
+    }
+
+    .img {
+      width: 100%;
+      height: 25rem;
+      background-image: url(https://cdn.ipadbiz.cn/hager/img/concat/l01.png);
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      &.xs {
+        height: 12rem;
       }
     }
@@ -355,6 +533,14 @@ export default {
       background-color: #E3F1F7;
       padding: 1rem 1.5rem;
       font-weight: bold;
+      &.xs {
+        margin-top: 1rem;
+        padding-left: 1rem;
+      }
+    }
+
+    .xs-box {
+      font-size: 0.85rem;
     }
   }
 </style>