concat.vue 15.7 KB
<!--
 * @Date: 2024-10-18 09:31:05
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-18 17:35:11
 * @FilePath: /hager/src/views/concat.vue
 * @Description: 联系我们
-->
<template>
  <div class="hager-concat-page">
    <div class="top-img"></div>
    <hager-box style="margin: 3rem 0;">
      <el-row :gutter="0" style="margin-bottom: 1rem;">
        <el-col :span="16">
          <div class="img"></div>
        </el-col>
        <el-col :span="8">
          <div class="headquarter-wrapper">
            <div class="info">
              <div class="title">中国总部</div>
              <div class="name" style="margin: 1rem;">座机</div>
              <div class="number">021-66986600</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div>
        <div class="concat-area">全 国</div>
        <el-row :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>
              <el-col :span="3" class="name outer"><p class="inner">贺先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13817300169</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">发电行业</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">许先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13910422245</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="concat-area">华 东</div>
        <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;">
              <el-col :span="13" class="title"><span class="inner">合肥</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">丁先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">15155181380</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">南京 苏北 无锡 苏州</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">葛先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">18662188718</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <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;">
              <el-col :span="13" class="title"><span class="inner">上海</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">侯女士</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">18621185022</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">杭州</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">谢先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">18657575776</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :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">宁波</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">李女士</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13819421866</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title">&nbsp;</el-col>
              <el-col :span="3" class="name outer">&nbsp;</el-col>
              <el-col :span="8" class="number outer">&nbsp;</el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="concat-area">华 南</div>
        <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;">
              <el-col :span="13" class="title"><p class="inner">广州 佛山 顺德 茂名 湛江 韶关 海南</p></el-col>
              <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">020-31650557</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0">
              <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">深圳 惠州</span></el-col>
              <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col>
              <el-col :span="8" class="number outer" style="margin-top: 1rem;">
                <p class="inner">0755-82559248</p>
                <p class="inner">020-31650557</p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <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;">
              <el-col :span="13" class="title"><span class="inner">珠海 东莞 中山</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">王先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">15900247733</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">汕头 汕尾 潮州</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">陈先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">15817966395</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :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">福建省</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">林先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">18650180767</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title">&nbsp;</el-col>
              <el-col :span="3" class="name outer">&nbsp;</el-col>
              <el-col :span="8" class="number outer">&nbsp;</el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="concat-area">北 区</div>
        <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
          <el-col :span="12" style="border-right: 1px solid #DADADA;">
            <el-row :gutter="0">
              <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">北京</span></el-col>
              <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col>
              <el-col :span="8" class="number outer" style="margin-top: 1rem;">
                <p class="inner">010-84535251</p>
                <p class="inner">010-84535112</p>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><p class="inner">京津 内蒙</p></el-col>
              <el-col :span="3" class="name outer"><p class="inner">孙先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13911009923</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <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;">
              <el-col :span="13" class="title"><span class="inner">辽宁</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">马先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">18940112000</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">吉林 黑龙江</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">郭女士</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13394492511</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <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;">
              <el-col :span="13" class="title"><span class="inner">河北 山西</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">明女士</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13832171806</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">济南 烟台</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">张先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13608967713</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :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">青岛</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">岳先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13608965895</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title">&nbsp;</el-col>
              <el-col :span="3" class="name outer">&nbsp;</el-col>
              <el-col :span="8" class="number outer">&nbsp;</el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="concat-area">华 中</div>
        <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;">
              <el-col :span="13" class="title"><span class="inner">湖北</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">余先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13607118550</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">湖南</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">祝先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13507421625</span></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :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">河南</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">0731-84416348</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title">&nbsp;</el-col>
              <el-col :span="3" class="name outer">&nbsp;</el-col>
              <el-col :span="8" class="number outer">&nbsp;</el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="concat-area">西 南</div>
        <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;">
              <el-col :span="13" class="title"><span class="inner">四川 重庆 贵州 云南 西藏</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">梁先生</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">13637700633</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0" style="padding: 1.5rem 0;">
              <el-col :span="13" class="title"><span class="inner">&nbsp;</span></el-col>
              <el-col :span="3" class="name outer"><p class="inner">&nbsp;</p></el-col>
              <el-col :span="8" class="number outer"><span class="inner">&nbsp;</span></el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
  .hager-concat-page {
    .top-img {
      height: 23rem;
      background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner05.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .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;
    }

    .headquarter-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 25rem;
      background-color: #F7F7F7;
      .info {
        display: flex;
        flex-direction: column;
        font-size: 1.5rem;
        text-align: center;
      }
    }

    .title {
      color: @secondary-color;
      font-weight: bold;
      .inner {
        // margin-left: 1.5rem;
        // text-indent: 1.5rem;
        padding-left: 1.5rem;
      }
    }

    .name {
      color: @primary-color;
      font-weight: bold;
      &.outer {
        text-align: right;
      }
      .inner {
        text-align: center;
      }
    }

    .number {
      color: #F56400;
      font-weight: bold;
      &.outer {
        text-align: right;
      }
      .inner {
        margin-right: 1.5rem;
      }
    }

    .concat-area {
      background-color: #E3F1F7;
      padding: 1rem 1.5rem;
      font-weight: bold;
    }
  }
</style>