联系人页面渲染方式调整

 <!--
  * @Date: 2024-10-18 09:31:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 14:44:21
+ * @LastEditTime: 2024-10-24 13:54:25
  * @FilePath: /hager/src/views/concat.vue
  * @Description: 联系我们
 -->
@@ -33,7 +33,7 @@
         </div>
         <div class="img xs"></div>
       </div>
-      <div>
+      <!-- <div>
         <div :class="['concat-area', is_xs ? 'xs' : '']">全 国</div>
         <el-row v-if="!is_xs" :gutter="0">
           <el-col :span="12">
@@ -411,6 +411,34 @@
             <el-col :span="8" class="number outer"><span class="inner xs">13637700633</span></el-col>
           </el-row>
         </div>
+      </div> -->
+      <div v-if="!is_xs" v-for="(item, index) in concat_list" :key="index">
+        <div :class="['concat-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
+        <div>
+          <el-row v-for="(concat, idx) in item.list" :key="idx" :gutter="0" style="border-bottom: 1px solid #DADADA;">
+            <el-col :span="12" v-for="(x, i) in concat" :key="i" :style="{borderRight: i%2 === 0 ? '1px solid #DADADA' : '', padding: '1.5rem 0'}">
+              <el-row :gutter="0">
+                <el-col :span="13" class="title"><span class="inner">{{ x.area }}</span></el-col>
+                <el-col :span="3" class="name outer"><p class="inner">{{ x.name }}</p></el-col>
+                <el-col :span="8" class="number outer">
+                  <p v-for="(tel, index) in x.tel" :key="index" class="inner">{{ tel }}</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div v-if="is_xs" v-for="(item, index) in mini_concat_list" :key="index">
+        <div :class="['concat-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
+        <div class="xs-box" v-for="(items, idx) in item.list" :key="idx">
+          <el-row :gutter="0" :style="{borderBottom: idx === item.list.length - 1 ? '' : '1px solid #DADADA', padding: '1.5rem 0'}">
+            <el-col :span="13" class="title"><p class="inner xs">{{ items.area }}</p></el-col>
+            <el-col :span="3" class="name outer"><p class="inner xs">{{ items.name }}</p></el-col>
+            <el-col :span="8" class="number outer">
+              <p class="inner xs" v-for="(tel, index) in items.tel">{{ tel }}</p>
+            </el-col>
+          </el-row>
+        </div>
       </div>
     </hager-box>
   </div>
@@ -425,14 +453,250 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-
+      concat_list: [{
+        area: '全 国',
+        list: [{
+          area: 'LSM/智能化产品事业部',
+          name: '贺先生',
+          tel: ['13817300169']
+        }, {
+          area: '发电行业',
+          name: '许先生',
+          tel: ['13910422245']
+        }]
+      }, {
+        area: '华 东',
+        list: [{
+          area: '合肥',
+          name: '丁先生',
+          tel: ['15155181380']
+        }, {
+          area: '南京 苏北 无锡 苏州',
+          name: '葛先生',
+          tel: ['18662188718']
+        }, {
+          area: '上海',
+          name: '侯女士',
+          tel: ['18621185022']
+        }, {
+          area: '杭州',
+          name: '谢先生',
+          tel: ['18657575776']
+        }, {
+          area: '宁波',
+          name: '李女士',
+          tel: ['13819421866']
+        }]
+      }, {
+        area: '华 南',
+        list: [{
+          area: '广州 佛山 顺德 茂名 湛江 韶关 海南',
+          name: '座机',
+          tel: ['020-31650557']
+        }, {
+          area: '深圳 惠州',
+          name: '座机',
+          tel: ['0755-82559248', '020-31650557']
+        }, {
+          area: '珠海 东莞 中山',
+          name: '王先生',
+          tel: ['15900247733']
+        }, {
+          area: '汕头 汕尾 潮州',
+          name: '陈先生',
+          tel: ['15817966395']
+        }, {
+          area: '福建省',
+          name: '林先生',
+          tel: ['18650180767']
+        }]
+      }, {
+        area: '北 区',
+        list: [{
+          area: '北京',
+          name: '座机',
+          tel: ['010-84535251', '010-84535112']
+        }, {
+          area: '京津 内蒙',
+          name: '孙先生',
+          tel: ['13911009923']
+        }, {
+          area: '辽宁',
+          name: '马先生',
+          tel: ['18940112000']
+        }, {
+          area: '吉林 黑龙江',
+          name: '郭女士',
+          tel: ['13394492511']
+        }, {
+          area: '河北 山西',
+          name: '明女士',
+          tel: ['13832171806']
+        }, {
+          area: '济南 烟台',
+          name: '张先生',
+          tel: ['13608967713']
+        }, {
+          area: '青岛',
+          name: '岳先生',
+          tel: ['13608965895']
+        }]
+      }, {
+        area: '华 中',
+        list: [{
+          area: '湖北',
+          name: '余先生',
+          tel: ['13607118550']
+        }, {
+          area: '13607118550',
+          name: '祝先生',
+          tel: ['13507421625']
+        }, {
+          area: '河南',
+          name: '座机',
+          tel: ['0731-84416348']
+        }]
+      }, {
+        area: '西 南',
+        list: [{
+          area: '四川 重庆 贵州 云南 西藏',
+          name: '梁先生',
+          tel: ['13637700633']
+        }]
+      }],
+      mini_concat_list: [{
+        area: '全 国',
+        list: [{
+          area: 'LSM/智能化产品事业部',
+          name: '贺先生',
+          tel: ['13817300169']
+        }, {
+          area: '发电行业',
+          name: '许先生',
+          tel: ['13910422245']
+        }]
+      }, {
+        area: '华 东',
+        list: [{
+          area: '合肥',
+          name: '丁先生',
+          tel: ['15155181380']
+        }, {
+          area: '南京 苏北 无锡 苏州',
+          name: '葛先生',
+          tel: ['18662188718']
+        }, {
+          area: '上海',
+          name: '侯女士',
+          tel: ['18621185022']
+        }, {
+          area: '杭州',
+          name: '谢先生',
+          tel: ['18657575776']
+        }, {
+          area: '宁波',
+          name: '李女士',
+          tel: ['13819421866']
+        }]
+      }, {
+        area: '华 南',
+        list: [{
+          area: '广州 佛山 顺德 茂名 湛江 韶关 海南',
+          name: '座机',
+          tel: ['020-31650557']
+        }, {
+          area: '深圳 惠州',
+          name: '座机',
+          tel: ['0755-82559248', '020-31650557']
+        }, {
+          area: '珠海 东莞 中山',
+          name: '王先生',
+          tel: ['15900247733']
+        }, {
+          area: '汕头 汕尾 潮州',
+          name: '陈先生',
+          tel: ['15817966395']
+        }, {
+          area: '福建省',
+          name: '林先生',
+          tel: ['18650180767']
+        }]
+      }, {
+        area: '北 区',
+        list: [{
+          area: '北京',
+          name: '座机',
+          tel: ['010-84535251', '010-84535112']
+        }, {
+          area: '京津 内蒙',
+          name: '孙先生',
+          tel: ['13911009923']
+        }, {
+          area: '辽宁',
+          name: '马先生',
+          tel: ['18940112000']
+        }, {
+          area: '吉林 黑龙江',
+          name: '郭女士',
+          tel: ['13394492511']
+        }, {
+          area: '河北 山西',
+          name: '明女士',
+          tel: ['13832171806']
+        }, {
+          area: '济南 烟台',
+          name: '张先生',
+          tel: ['13608967713']
+        }, {
+          area: '青岛',
+          name: '岳先生',
+          tel: ['13608965895']
+        }]
+      }, {
+        area: '华 中',
+        list: [{
+          area: '湖北',
+          name: '余先生',
+          tel: ['13607118550']
+        }, {
+          area: '13607118550',
+          name: '祝先生',
+          tel: ['13507421625']
+        }, {
+          area: '河南',
+          name: '座机',
+          tel: ['0731-84416348']
+        }]
+      }, {
+        area: '西 南',
+        list: [{
+          area: '四川 重庆 贵州 云南 西藏',
+          name: '梁先生',
+          tel: ['13637700633']
+        }]
+      }],
     }
   },
   mounted () {
-
+    this.concat_list.forEach(item => {
+      item.list = this.splitListIntoPairs(item.list);
+    });
   },
   methods: {
+    splitListIntoPairs (list) {
+      let result = [];
 
+      if (list.length >= 2) {
+        for (let i = 0; i < list.length; i += 2) {
+          // 每次取2个元素组成一个子数组
+          result.push(list.slice(i, i + 2));
+        }
+      } else {
+        result = [list];
+      }
+
+      return result;
+    }
   }
 }
 </script>