Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1132c04d 1 parent 6a250d65

新增联系我们页面

Inline Side-by-side
Showing 3 changed files with 374 additions and 5 deletions
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 12:27:11
* @LastEditTime: 2024-10-18 09:34:29
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -57,10 +57,10 @@
<span @mouseenter="onClickProduct">产品中心</span>
</div>
<div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
<div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
<div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
<div :class="[is_active === 'news' ? 'active' : '', 'item']" @click="goTo('/news')">新闻中心</div>
<div :class="[is_active === 'recruit' ? 'active' : '', 'item']" @click="goTo('/recruit')">招聘信息</div>
<div :class="[is_active === 'about' ? 'active' : '', 'item']" @click="goTo('/about')">关于海格</div>
<div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
<div :class="[is_active === 'concat' ? 'active' : '', 'item']" @click="goTo('/concat')">联系我们</div>
<div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
</div>
</el-col>
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 09:22:48
* @LastEditTime: 2024-10-18 09:32:58
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -113,4 +113,13 @@ export default [{
tag: 'about'
},
children: []
}, {
path: '/concat',
name: '联系我们',
component: () => import('@/views/concat'),
meta: {
title: '海格电器',
tag: 'concat'
},
children: []
}]
......
<!--
* @Date: 2024-10-18 09:31:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 11:42:37
* @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>