Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
464de834 1 parent 1f49d108

联系人页面渲染方式调整

Inline Side-by-side
Showing 1 changed file with 268 additions and 4 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-18 09:31:05 2 * @Date: 2024-10-18 09:31:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-22 14:44:21 4 + * @LastEditTime: 2024-10-24 13:54:25
5 * @FilePath: /hager/src/views/concat.vue 5 * @FilePath: /hager/src/views/concat.vue
6 * @Description: 联系我们 6 * @Description: 联系我们
7 --> 7 -->
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 </div> 33 </div>
34 <div class="img xs"></div> 34 <div class="img xs"></div>
35 </div> 35 </div>
36 - <div> 36 + <!-- <div>
37 <div :class="['concat-area', is_xs ? 'xs' : '']">全 国</div> 37 <div :class="['concat-area', is_xs ? 'xs' : '']">全 国</div>
38 <el-row v-if="!is_xs" :gutter="0"> 38 <el-row v-if="!is_xs" :gutter="0">
39 <el-col :span="12"> 39 <el-col :span="12">
...@@ -411,6 +411,34 @@ ...@@ -411,6 +411,34 @@
411 <el-col :span="8" class="number outer"><span class="inner xs">13637700633</span></el-col> 411 <el-col :span="8" class="number outer"><span class="inner xs">13637700633</span></el-col>
412 </el-row> 412 </el-row>
413 </div> 413 </div>
414 + </div> -->
415 + <div v-if="!is_xs" v-for="(item, index) in concat_list" :key="index">
416 + <div :class="['concat-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
417 + <div>
418 + <el-row v-for="(concat, idx) in item.list" :key="idx" :gutter="0" style="border-bottom: 1px solid #DADADA;">
419 + <el-col :span="12" v-for="(x, i) in concat" :key="i" :style="{borderRight: i%2 === 0 ? '1px solid #DADADA' : '', padding: '1.5rem 0'}">
420 + <el-row :gutter="0">
421 + <el-col :span="13" class="title"><span class="inner">{{ x.area }}</span></el-col>
422 + <el-col :span="3" class="name outer"><p class="inner">{{ x.name }}</p></el-col>
423 + <el-col :span="8" class="number outer">
424 + <p v-for="(tel, index) in x.tel" :key="index" class="inner">{{ tel }}</p>
425 + </el-col>
426 + </el-row>
427 + </el-col>
428 + </el-row>
429 + </div>
430 + </div>
431 + <div v-if="is_xs" v-for="(item, index) in mini_concat_list" :key="index">
432 + <div :class="['concat-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
433 + <div class="xs-box" v-for="(items, idx) in item.list" :key="idx">
434 + <el-row :gutter="0" :style="{borderBottom: idx === item.list.length - 1 ? '' : '1px solid #DADADA', padding: '1.5rem 0'}">
435 + <el-col :span="13" class="title"><p class="inner xs">{{ items.area }}</p></el-col>
436 + <el-col :span="3" class="name outer"><p class="inner xs">{{ items.name }}</p></el-col>
437 + <el-col :span="8" class="number outer">
438 + <p class="inner xs" v-for="(tel, index) in items.tel">{{ tel }}</p>
439 + </el-col>
440 + </el-row>
441 + </div>
414 </div> 442 </div>
415 </hager-box> 443 </hager-box>
416 </div> 444 </div>
...@@ -425,14 +453,250 @@ export default { ...@@ -425,14 +453,250 @@ export default {
425 mixins: [mixin.init], 453 mixins: [mixin.init],
426 data () { 454 data () {
427 return { 455 return {
428 - 456 + concat_list: [{
457 + area: '全 国',
458 + list: [{
459 + area: 'LSM/智能化产品事业部',
460 + name: '贺先生',
461 + tel: ['13817300169']
462 + }, {
463 + area: '发电行业',
464 + name: '许先生',
465 + tel: ['13910422245']
466 + }]
467 + }, {
468 + area: '华 东',
469 + list: [{
470 + area: '合肥',
471 + name: '丁先生',
472 + tel: ['15155181380']
473 + }, {
474 + area: '南京 苏北 无锡 苏州',
475 + name: '葛先生',
476 + tel: ['18662188718']
477 + }, {
478 + area: '上海',
479 + name: '侯女士',
480 + tel: ['18621185022']
481 + }, {
482 + area: '杭州',
483 + name: '谢先生',
484 + tel: ['18657575776']
485 + }, {
486 + area: '宁波',
487 + name: '李女士',
488 + tel: ['13819421866']
489 + }]
490 + }, {
491 + area: '华 南',
492 + list: [{
493 + area: '广州 佛山 顺德 茂名 湛江 韶关 海南',
494 + name: '座机',
495 + tel: ['020-31650557']
496 + }, {
497 + area: '深圳 惠州',
498 + name: '座机',
499 + tel: ['0755-82559248', '020-31650557']
500 + }, {
501 + area: '珠海 东莞 中山',
502 + name: '王先生',
503 + tel: ['15900247733']
504 + }, {
505 + area: '汕头 汕尾 潮州',
506 + name: '陈先生',
507 + tel: ['15817966395']
508 + }, {
509 + area: '福建省',
510 + name: '林先生',
511 + tel: ['18650180767']
512 + }]
513 + }, {
514 + area: '北 区',
515 + list: [{
516 + area: '北京',
517 + name: '座机',
518 + tel: ['010-84535251', '010-84535112']
519 + }, {
520 + area: '京津 内蒙',
521 + name: '孙先生',
522 + tel: ['13911009923']
523 + }, {
524 + area: '辽宁',
525 + name: '马先生',
526 + tel: ['18940112000']
527 + }, {
528 + area: '吉林 黑龙江',
529 + name: '郭女士',
530 + tel: ['13394492511']
531 + }, {
532 + area: '河北 山西',
533 + name: '明女士',
534 + tel: ['13832171806']
535 + }, {
536 + area: '济南 烟台',
537 + name: '张先生',
538 + tel: ['13608967713']
539 + }, {
540 + area: '青岛',
541 + name: '岳先生',
542 + tel: ['13608965895']
543 + }]
544 + }, {
545 + area: '华 中',
546 + list: [{
547 + area: '湖北',
548 + name: '余先生',
549 + tel: ['13607118550']
550 + }, {
551 + area: '13607118550',
552 + name: '祝先生',
553 + tel: ['13507421625']
554 + }, {
555 + area: '河南',
556 + name: '座机',
557 + tel: ['0731-84416348']
558 + }]
559 + }, {
560 + area: '西 南',
561 + list: [{
562 + area: '四川 重庆 贵州 云南 西藏',
563 + name: '梁先生',
564 + tel: ['13637700633']
565 + }]
566 + }],
567 + mini_concat_list: [{
568 + area: '全 国',
569 + list: [{
570 + area: 'LSM/智能化产品事业部',
571 + name: '贺先生',
572 + tel: ['13817300169']
573 + }, {
574 + area: '发电行业',
575 + name: '许先生',
576 + tel: ['13910422245']
577 + }]
578 + }, {
579 + area: '华 东',
580 + list: [{
581 + area: '合肥',
582 + name: '丁先生',
583 + tel: ['15155181380']
584 + }, {
585 + area: '南京 苏北 无锡 苏州',
586 + name: '葛先生',
587 + tel: ['18662188718']
588 + }, {
589 + area: '上海',
590 + name: '侯女士',
591 + tel: ['18621185022']
592 + }, {
593 + area: '杭州',
594 + name: '谢先生',
595 + tel: ['18657575776']
596 + }, {
597 + area: '宁波',
598 + name: '李女士',
599 + tel: ['13819421866']
600 + }]
601 + }, {
602 + area: '华 南',
603 + list: [{
604 + area: '广州 佛山 顺德 茂名 湛江 韶关 海南',
605 + name: '座机',
606 + tel: ['020-31650557']
607 + }, {
608 + area: '深圳 惠州',
609 + name: '座机',
610 + tel: ['0755-82559248', '020-31650557']
611 + }, {
612 + area: '珠海 东莞 中山',
613 + name: '王先生',
614 + tel: ['15900247733']
615 + }, {
616 + area: '汕头 汕尾 潮州',
617 + name: '陈先生',
618 + tel: ['15817966395']
619 + }, {
620 + area: '福建省',
621 + name: '林先生',
622 + tel: ['18650180767']
623 + }]
624 + }, {
625 + area: '北 区',
626 + list: [{
627 + area: '北京',
628 + name: '座机',
629 + tel: ['010-84535251', '010-84535112']
630 + }, {
631 + area: '京津 内蒙',
632 + name: '孙先生',
633 + tel: ['13911009923']
634 + }, {
635 + area: '辽宁',
636 + name: '马先生',
637 + tel: ['18940112000']
638 + }, {
639 + area: '吉林 黑龙江',
640 + name: '郭女士',
641 + tel: ['13394492511']
642 + }, {
643 + area: '河北 山西',
644 + name: '明女士',
645 + tel: ['13832171806']
646 + }, {
647 + area: '济南 烟台',
648 + name: '张先生',
649 + tel: ['13608967713']
650 + }, {
651 + area: '青岛',
652 + name: '岳先生',
653 + tel: ['13608965895']
654 + }]
655 + }, {
656 + area: '华 中',
657 + list: [{
658 + area: '湖北',
659 + name: '余先生',
660 + tel: ['13607118550']
661 + }, {
662 + area: '13607118550',
663 + name: '祝先生',
664 + tel: ['13507421625']
665 + }, {
666 + area: '河南',
667 + name: '座机',
668 + tel: ['0731-84416348']
669 + }]
670 + }, {
671 + area: '西 南',
672 + list: [{
673 + area: '四川 重庆 贵州 云南 西藏',
674 + name: '梁先生',
675 + tel: ['13637700633']
676 + }]
677 + }],
429 } 678 }
430 }, 679 },
431 mounted () { 680 mounted () {
432 - 681 + this.concat_list.forEach(item => {
682 + item.list = this.splitListIntoPairs(item.list);
683 + });
433 }, 684 },
434 methods: { 685 methods: {
686 + splitListIntoPairs (list) {
687 + let result = [];
435 688
689 + if (list.length >= 2) {
690 + for (let i = 0; i < list.length; i += 2) {
691 + // 每次取2个元素组成一个子数组
692 + result.push(list.slice(i, i + 2));
693 + }
694 + } else {
695 + result = [list];
696 + }
697 +
698 + return result;
699 + }
436 } 700 }
437 } 701 }
438 </script> 702 </script>
......