Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
30fe48f2 1 parent b088fbb3

联系我们自适应调整

Inline Side-by-side
Showing 1 changed file with 208 additions and 22 deletions
<!--
* @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>
<hager-box style="margin: 3rem 0;">
<el-row :gutter="0" style="margin-bottom: 1rem;">
<div :class="['top-img', is_xs ? 'xs' : '']"></div>
<hager-box class="box-wrapper xs">
<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>
<el-row :gutter="0">
<div :class="['concat-area', is_xs ? 'xs' : '']">全 国</div>
<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>
<el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
</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">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 {
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;
.box-wrapper {
margin: 3rem 0;
&.xs {
margin: 1rem 0;
}
}
.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>
......