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 406 additions and 220 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-18 17:35:11 4 + * @LastEditTime: 2024-10-22 14:44:21
5 * @FilePath: /hager/src/views/concat.vue 5 * @FilePath: /hager/src/views/concat.vue
6 * @Description: 联系我们 6 * @Description: 联系我们
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-concat-page"> 9 <div class="hager-concat-page">
10 - <div class="top-img"></div> 10 + <div :class="['top-img', is_xs ? 'xs' : '']"></div>
11 - <hager-box style="margin: 3rem 0;"> 11 + <hager-box class="box-wrapper xs">
12 - <el-row :gutter="0" style="margin-bottom: 1rem;"> 12 + <el-row v-if="!is_xs" :gutter="0" style="margin-bottom: 1rem;">
13 <el-col :span="16"> 13 <el-col :span="16">
14 <div class="img"></div> 14 <div class="img"></div>
15 </el-col> 15 </el-col>
...@@ -23,9 +23,19 @@ ...@@ -23,9 +23,19 @@
23 </div> 23 </div>
24 </el-col> 24 </el-col>
25 </el-row> 25 </el-row>
26 + <div v-else>
27 + <div class="headquarter-wrapper xs">
28 + <div class="info xs">
29 + <div class="title">中国总部</div>
30 + <div class="name" style="margin: 1rem;">座机</div>
31 + <div class="number">021-66986600</div>
32 + </div>
33 + </div>
34 + <div class="img xs"></div>
35 + </div>
26 <div> 36 <div>
27 - <div class="concat-area">全 国</div> 37 + <div :class="['concat-area', is_xs ? 'xs' : '']">全 国</div>
28 - <el-row :gutter="0"> 38 + <el-row v-if="!is_xs" :gutter="0">
29 <el-col :span="12"> 39 <el-col :span="12">
30 <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 40 <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
31 <el-col :span="13" class="title"><span class="inner">LSM/智能化产品事业部</span></el-col> 41 <el-col :span="13" class="title"><span class="inner">LSM/智能化产品事业部</span></el-col>
...@@ -41,210 +51,344 @@ ...@@ -41,210 +51,344 @@
41 </el-row> 51 </el-row>
42 </el-col> 52 </el-col>
43 </el-row> 53 </el-row>
44 - <div class="concat-area">华 东</div> 54 + <div v-else class="xs-box">
45 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 55 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
46 - <el-col :span="12"> 56 + <el-col :span="13" class="title"><span class="inner xs">LSM/智能化产品事业部</span></el-col>
47 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 57 + <el-col :span="3" class="name outer"><p class="inner xs">贺先生</p></el-col>
48 - <el-col :span="13" class="title"><span class="inner">合肥</span></el-col> 58 + <el-col :span="8" class="number outer"><span class="inner xs">13817300169</span></el-col>
49 - <el-col :span="3" class="name outer"><p class="inner">丁先生</p></el-col> 59 + </el-row>
50 - <el-col :span="8" class="number outer"><span class="inner">15155181380</span></el-col> 60 + <el-row :gutter="0" style="padding: 1.5rem 0;">
51 - </el-row> 61 + <el-col :span="13" class="title"><span class="inner xs">发电行业</span></el-col>
52 - </el-col> 62 + <el-col :span="3" class="name outer"><p class="inner xs">许先生</p></el-col>
53 - <el-col :span="12"> 63 + <el-col :span="8" class="number outer"><span class="inner xs">13910422245</span></el-col>
54 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 64 + </el-row>
55 - <el-col :span="13" class="title"><span class="inner">南京 苏北 无锡 苏州</span></el-col> 65 + </div>
56 - <el-col :span="3" class="name outer"><p class="inner">葛先生</p></el-col> 66 + <div :class="['concat-area', is_xs ? 'xs' : '']">华 东</div>
57 - <el-col :span="8" class="number outer"><span class="inner">18662188718</span></el-col> 67 + <div v-if="!is_xs">
58 - </el-row> 68 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
59 - </el-col> 69 + <el-col :span="12">
60 - </el-row> 70 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
61 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 71 + <el-col :span="13" class="title"><span class="inner">合肥</span></el-col>
62 - <el-col :span="12"> 72 + <el-col :span="3" class="name outer"><p class="inner">丁先生</p></el-col>
63 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 73 + <el-col :span="8" class="number outer"><span class="inner">15155181380</span></el-col>
64 - <el-col :span="13" class="title"><span class="inner">上海</span></el-col> 74 + </el-row>
65 - <el-col :span="3" class="name outer"><p class="inner">侯女士</p></el-col> 75 + </el-col>
66 - <el-col :span="8" class="number outer"><span class="inner">18621185022</span></el-col> 76 + <el-col :span="12">
67 - </el-row> 77 + <el-row :gutter="0" style="padding: 1.5rem 0;">
68 - </el-col> 78 + <el-col :span="13" class="title"><span class="inner">南京 苏北 无锡 苏州</span></el-col>
69 - <el-col :span="12"> 79 + <el-col :span="3" class="name outer"><p class="inner">葛先生</p></el-col>
70 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 80 + <el-col :span="8" class="number outer"><span class="inner">18662188718</span></el-col>
71 - <el-col :span="13" class="title"><span class="inner">杭州</span></el-col> 81 + </el-row>
72 - <el-col :span="3" class="name outer"><p class="inner">谢先生</p></el-col> 82 + </el-col>
73 - <el-col :span="8" class="number outer"><span class="inner">18657575776</span></el-col> 83 + </el-row>
74 - </el-row> 84 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
75 - </el-col> 85 + <el-col :span="12">
76 - </el-row> 86 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
77 - <el-row :gutter="0"> 87 + <el-col :span="13" class="title"><span class="inner">上海</span></el-col>
78 - <el-col :span="12"> 88 + <el-col :span="3" class="name outer"><p class="inner">侯女士</p></el-col>
79 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 89 + <el-col :span="8" class="number outer"><span class="inner">18621185022</span></el-col>
80 - <el-col :span="13" class="title"><span class="inner">宁波</span></el-col> 90 + </el-row>
81 - <el-col :span="3" class="name outer"><p class="inner">李女士</p></el-col> 91 + </el-col>
82 - <el-col :span="8" class="number outer"><span class="inner">13819421866</span></el-col> 92 + <el-col :span="12">
83 - </el-row> 93 + <el-row :gutter="0" style="padding: 1.5rem 0;">
84 - </el-col> 94 + <el-col :span="13" class="title"><span class="inner">杭州</span></el-col>
85 - <el-col :span="12"> 95 + <el-col :span="3" class="name outer"><p class="inner">谢先生</p></el-col>
86 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 96 + <el-col :span="8" class="number outer"><span class="inner">18657575776</span></el-col>
87 - <el-col :span="13" class="title">&nbsp;</el-col> 97 + </el-row>
88 - <el-col :span="3" class="name outer">&nbsp;</el-col> 98 + </el-col>
89 - <el-col :span="8" class="number outer">&nbsp;</el-col> 99 + </el-row>
90 - </el-row> 100 + <el-row :gutter="0">
91 - </el-col> 101 + <el-col :span="12">
92 - </el-row> 102 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
93 - <div class="concat-area">华 南</div> 103 + <el-col :span="13" class="title"><span class="inner">宁波</span></el-col>
94 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 104 + <el-col :span="3" class="name outer"><p class="inner">李女士</p></el-col>
95 - <el-col :span="12"> 105 + <el-col :span="8" class="number outer"><span class="inner">13819421866</span></el-col>
96 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 106 + </el-row>
97 - <el-col :span="13" class="title"><p class="inner">广州 佛山 顺德 茂名 湛江 韶关 海南</p></el-col> 107 + </el-col>
98 - <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col> 108 + <el-col :span="12">
99 - <el-col :span="8" class="number outer"><span class="inner">020-31650557</span></el-col> 109 + <el-row :gutter="0" style="padding: 1.5rem 0;">
100 - </el-row> 110 + <el-col :span="13" class="title">&nbsp;</el-col>
101 - </el-col> 111 + <el-col :span="3" class="name outer">&nbsp;</el-col>
102 - <el-col :span="12"> 112 + <el-col :span="8" class="number outer">&nbsp;</el-col>
103 - <el-row :gutter="0"> 113 + </el-row>
104 - <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">深圳 惠州</span></el-col> 114 + </el-col>
105 - <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col> 115 + </el-row>
106 - <el-col :span="8" class="number outer" style="margin-top: 1rem;"> 116 + </div>
107 - <p class="inner">0755-82559248</p> 117 + <div v-else class="xs-box">
108 - <p class="inner">020-31650557</p> 118 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
109 - </el-col> 119 + <el-col :span="13" class="title"><span class="inner xs">合肥</span></el-col>
110 - </el-row> 120 + <el-col :span="3" class="name outer"><p class="inner xs">丁先生</p></el-col>
111 - </el-col> 121 + <el-col :span="8" class="number outer"><span class="inner xs">15155181380</span></el-col>
112 - </el-row> 122 + </el-row>
113 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 123 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
114 - <el-col :span="12"> 124 + <el-col :span="13" class="title"><span class="inner xs">南京 苏北 无锡 苏州</span></el-col>
115 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 125 + <el-col :span="3" class="name outer"><p class="inner xs">葛先生</p></el-col>
116 - <el-col :span="13" class="title"><span class="inner">珠海 东莞 中山</span></el-col> 126 + <el-col :span="8" class="number outer"><span class="inner xs">18662188718</span></el-col>
117 - <el-col :span="3" class="name outer"><p class="inner">王先生</p></el-col> 127 + </el-row>
118 - <el-col :span="8" class="number outer"><span class="inner">15900247733</span></el-col> 128 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
119 - </el-row> 129 + <el-col :span="13" class="title"><span class="inner xs">上海</span></el-col>
120 - </el-col> 130 + <el-col :span="3" class="name outer"><p class="inner xs">侯女士</p></el-col>
121 - <el-col :span="12"> 131 + <el-col :span="8" class="number outer"><span class="inner xs">18621185022</span></el-col>
122 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 132 + </el-row>
123 - <el-col :span="13" class="title"><span class="inner">汕头 汕尾 潮州</span></el-col> 133 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
124 - <el-col :span="3" class="name outer"><p class="inner">陈先生</p></el-col> 134 + <el-col :span="13" class="title"><span class="inner xs">杭州</span></el-col>
125 - <el-col :span="8" class="number outer"><span class="inner">15817966395</span></el-col> 135 + <el-col :span="3" class="name outer"><p class="inner xs">谢先生</p></el-col>
126 - </el-row> 136 + <el-col :span="8" class="number outer"><span class="inner xs">18657575776</span></el-col>
127 - </el-col> 137 + </el-row>
128 - </el-row> 138 + <el-row :gutter="0" style="padding: 1.5rem 0;">
129 - <el-row :gutter="0"> 139 + <el-col :span="13" class="title"><span class="inner xs">宁波</span></el-col>
130 - <el-col :span="12"> 140 + <el-col :span="3" class="name outer"><p class="inner xs">李女士</p></el-col>
131 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 141 + <el-col :span="8" class="number outer"><span class="inner xs">13819421866</span></el-col>
132 - <el-col :span="13" class="title"><span class="inner">福建省</span></el-col> 142 + </el-row>
133 - <el-col :span="3" class="name outer"><p class="inner">林先生</p></el-col> 143 + </div>
134 - <el-col :span="8" class="number outer"><span class="inner">18650180767</span></el-col> 144 + <div :class="['concat-area', is_xs ? 'xs' : '']">华 南</div>
135 - </el-row> 145 + <div v-if="!is_xs">
136 - </el-col> 146 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
137 - <el-col :span="12"> 147 + <el-col :span="12">
138 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 148 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
139 - <el-col :span="13" class="title">&nbsp;</el-col> 149 + <el-col :span="13" class="title"><p class="inner">广州 佛山 顺德 茂名 湛江 韶关 海南</p></el-col>
140 - <el-col :span="3" class="name outer">&nbsp;</el-col> 150 + <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col>
141 - <el-col :span="8" class="number outer">&nbsp;</el-col> 151 + <el-col :span="8" class="number outer"><span class="inner">020-31650557</span></el-col>
142 - </el-row> 152 + </el-row>
143 - </el-col> 153 + </el-col>
144 - </el-row> 154 + <el-col :span="12">
145 - <div class="concat-area">北 区</div> 155 + <el-row :gutter="0">
146 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 156 + <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">深圳 惠州</span></el-col>
147 - <el-col :span="12" style="border-right: 1px solid #DADADA;"> 157 + <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col>
148 - <el-row :gutter="0"> 158 + <el-col :span="8" class="number outer" style="margin-top: 1rem;">
149 - <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">北京</span></el-col> 159 + <p class="inner">0755-82559248</p>
150 - <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col> 160 + <p class="inner">020-31650557</p>
151 - <el-col :span="8" class="number outer" style="margin-top: 1rem;"> 161 + </el-col>
152 - <p class="inner">010-84535251</p> 162 + </el-row>
153 - <p class="inner">010-84535112</p> 163 + </el-col>
154 - </el-col> 164 + </el-row>
155 - </el-row> 165 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
156 - </el-col> 166 + <el-col :span="12">
157 - <el-col :span="12"> 167 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
158 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 168 + <el-col :span="13" class="title"><span class="inner">珠海 东莞 中山</span></el-col>
159 - <el-col :span="13" class="title"><p class="inner">京津 内蒙</p></el-col> 169 + <el-col :span="3" class="name outer"><p class="inner">王先生</p></el-col>
160 - <el-col :span="3" class="name outer"><p class="inner">孙先生</p></el-col> 170 + <el-col :span="8" class="number outer"><span class="inner">15900247733</span></el-col>
161 - <el-col :span="8" class="number outer"><span class="inner">13911009923</span></el-col> 171 + </el-row>
162 - </el-row> 172 + </el-col>
163 - </el-col> 173 + <el-col :span="12">
164 - </el-row> 174 + <el-row :gutter="0" style="padding: 1.5rem 0;">
165 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 175 + <el-col :span="13" class="title"><span class="inner">汕头 汕尾 潮州</span></el-col>
166 - <el-col :span="12"> 176 + <el-col :span="3" class="name outer"><p class="inner">陈先生</p></el-col>
167 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 177 + <el-col :span="8" class="number outer"><span class="inner">15817966395</span></el-col>
168 - <el-col :span="13" class="title"><span class="inner">辽宁</span></el-col> 178 + </el-row>
169 - <el-col :span="3" class="name outer"><p class="inner">马先生</p></el-col> 179 + </el-col>
170 - <el-col :span="8" class="number outer"><span class="inner">18940112000</span></el-col> 180 + </el-row>
171 - </el-row> 181 + <el-row :gutter="0">
172 - </el-col> 182 + <el-col :span="12">
173 - <el-col :span="12"> 183 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
174 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 184 + <el-col :span="13" class="title"><span class="inner">福建省</span></el-col>
175 - <el-col :span="13" class="title"><span class="inner">吉林 黑龙江</span></el-col> 185 + <el-col :span="3" class="name outer"><p class="inner">林先生</p></el-col>
176 - <el-col :span="3" class="name outer"><p class="inner">郭女士</p></el-col> 186 + <el-col :span="8" class="number outer"><span class="inner">18650180767</span></el-col>
177 - <el-col :span="8" class="number outer"><span class="inner">13394492511</span></el-col> 187 + </el-row>
178 - </el-row> 188 + </el-col>
179 - </el-col> 189 + <el-col :span="12">
180 - </el-row> 190 + <el-row :gutter="0" style="padding: 1.5rem 0;">
181 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 191 + <el-col :span="13" class="title">&nbsp;</el-col>
182 - <el-col :span="12"> 192 + <el-col :span="3" class="name outer">&nbsp;</el-col>
183 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 193 + <el-col :span="8" class="number outer">&nbsp;</el-col>
184 - <el-col :span="13" class="title"><span class="inner">河北 山西</span></el-col> 194 + </el-row>
185 - <el-col :span="3" class="name outer"><p class="inner">明女士</p></el-col> 195 + </el-col>
186 - <el-col :span="8" class="number outer"><span class="inner">13832171806</span></el-col> 196 + </el-row>
187 - </el-row> 197 + </div>
188 - </el-col> 198 + <div v-else class="xs-box">
189 - <el-col :span="12"> 199 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
190 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 200 + <el-col :span="13" class="title"><p class="inner xs">广州 佛山 顺德 茂名 湛江 韶关 海南</p></el-col>
191 - <el-col :span="13" class="title"><span class="inner">济南 烟台</span></el-col> 201 + <el-col :span="3" class="name outer"><p class="inner xs">座机</p></el-col>
192 - <el-col :span="3" class="name outer"><p class="inner">张先生</p></el-col> 202 + <el-col :span="8" class="number outer"><span class="inner xs">020-31650557</span></el-col>
193 - <el-col :span="8" class="number outer"><span class="inner">13608967713</span></el-col> 203 + </el-row>
194 - </el-row> 204 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
195 - </el-col> 205 + <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner xs">深圳 惠州</span></el-col>
196 - </el-row> 206 + <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner xs">座机</p></el-col>
197 - <el-row :gutter="0"> 207 + <el-col :span="8" class="number outer" style="margin-top: 1rem;">
198 - <el-col :span="12"> 208 + <p class="inner xs">0755-82559248</p>
199 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 209 + <p class="inner xs">020-31650557</p>
200 - <el-col :span="13" class="title"><span class="inner">青岛</span></el-col> 210 + </el-col>
201 - <el-col :span="3" class="name outer"><p class="inner">岳先生</p></el-col> 211 + </el-row>
202 - <el-col :span="8" class="number outer"><span class="inner">13608965895</span></el-col> 212 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
203 - </el-row> 213 + <el-col :span="13" class="title"><span class="inner xs">珠海 东莞 中山</span></el-col>
204 - </el-col> 214 + <el-col :span="3" class="name outer"><p class="inner xs">王先生</p></el-col>
205 - <el-col :span="12"> 215 + <el-col :span="8" class="number outer"><span class="inner xs">15900247733</span></el-col>
206 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 216 + </el-row>
207 - <el-col :span="13" class="title">&nbsp;</el-col> 217 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
208 - <el-col :span="3" class="name outer">&nbsp;</el-col> 218 + <el-col :span="13" class="title"><span class="inner xs">汕头 汕尾 潮州</span></el-col>
209 - <el-col :span="8" class="number outer">&nbsp;</el-col> 219 + <el-col :span="3" class="name outer"><p class="inner xs">陈先生</p></el-col>
210 - </el-row> 220 + <el-col :span="8" class="number outer"><span class="inner xs">15817966395</span></el-col>
211 - </el-col> 221 + </el-row>
212 - </el-row> 222 + <el-row :gutter="0" style="padding: 1.5rem 0;">
213 - <div class="concat-area">华 中</div> 223 + <el-col :span="13" class="title"><span class="inner xs">福建省</span></el-col>
214 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 224 + <el-col :span="3" class="name outer"><p class="inner xs">林先生</p></el-col>
215 - <el-col :span="12"> 225 + <el-col :span="8" class="number outer"><span class="inner xs">18650180767</span></el-col>
216 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 226 + </el-row>
217 - <el-col :span="13" class="title"><span class="inner">湖北</span></el-col> 227 + </div>
218 - <el-col :span="3" class="name outer"><p class="inner">余先生</p></el-col> 228 + <div :class="['concat-area', is_xs ? 'xs' : '']">北 区</div>
219 - <el-col :span="8" class="number outer"><span class="inner">13607118550</span></el-col> 229 + <div v-if="!is_xs">
220 - </el-row> 230 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
221 - </el-col> 231 + <el-col :span="12" style="border-right: 1px solid #DADADA;">
222 - <el-col :span="12"> 232 + <el-row :gutter="0">
223 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 233 + <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">北京</span></el-col>
224 - <el-col :span="13" class="title"><span class="inner">湖南</span></el-col> 234 + <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col>
225 - <el-col :span="3" class="name outer"><p class="inner">祝先生</p></el-col> 235 + <el-col :span="8" class="number outer" style="margin-top: 1rem;">
226 - <el-col :span="8" class="number outer"><span class="inner">13507421625</span></el-col> 236 + <p class="inner">010-84535251</p>
227 - </el-row> 237 + <p class="inner">010-84535112</p>
228 - </el-col> 238 + </el-col>
229 - </el-row> 239 + </el-row>
230 - <el-row :gutter="0"> 240 + </el-col>
231 - <el-col :span="12"> 241 + <el-col :span="12">
232 - <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 242 + <el-row :gutter="0" style="padding: 1.5rem 0;">
233 - <el-col :span="13" class="title"><span class="inner">河南</span></el-col> 243 + <el-col :span="13" class="title"><p class="inner">京津 内蒙</p></el-col>
234 - <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col> 244 + <el-col :span="3" class="name outer"><p class="inner">孙先生</p></el-col>
235 - <el-col :span="8" class="number outer"><span class="inner">0731-84416348</span></el-col> 245 + <el-col :span="8" class="number outer"><span class="inner">13911009923</span></el-col>
236 - </el-row> 246 + </el-row>
237 - </el-col> 247 + </el-col>
238 - <el-col :span="12"> 248 + </el-row>
239 - <el-row :gutter="0" style="padding: 1.5rem 0;"> 249 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
240 - <el-col :span="13" class="title">&nbsp;</el-col> 250 + <el-col :span="12">
241 - <el-col :span="3" class="name outer">&nbsp;</el-col> 251 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
242 - <el-col :span="8" class="number outer">&nbsp;</el-col> 252 + <el-col :span="13" class="title"><span class="inner">辽宁</span></el-col>
243 - </el-row> 253 + <el-col :span="3" class="name outer"><p class="inner">马先生</p></el-col>
244 - </el-col> 254 + <el-col :span="8" class="number outer"><span class="inner">18940112000</span></el-col>
245 - </el-row> 255 + </el-row>
246 - <div class="concat-area">西 南</div> 256 + </el-col>
247 - <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;"> 257 + <el-col :span="12">
258 + <el-row :gutter="0" style="padding: 1.5rem 0;">
259 + <el-col :span="13" class="title"><span class="inner">吉林 黑龙江</span></el-col>
260 + <el-col :span="3" class="name outer"><p class="inner">郭女士</p></el-col>
261 + <el-col :span="8" class="number outer"><span class="inner">13394492511</span></el-col>
262 + </el-row>
263 + </el-col>
264 + </el-row>
265 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
266 + <el-col :span="12">
267 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
268 + <el-col :span="13" class="title"><span class="inner">河北 山西</span></el-col>
269 + <el-col :span="3" class="name outer"><p class="inner">明女士</p></el-col>
270 + <el-col :span="8" class="number outer"><span class="inner">13832171806</span></el-col>
271 + </el-row>
272 + </el-col>
273 + <el-col :span="12">
274 + <el-row :gutter="0" style="padding: 1.5rem 0;">
275 + <el-col :span="13" class="title"><span class="inner">济南 烟台</span></el-col>
276 + <el-col :span="3" class="name outer"><p class="inner">张先生</p></el-col>
277 + <el-col :span="8" class="number outer"><span class="inner">13608967713</span></el-col>
278 + </el-row>
279 + </el-col>
280 + </el-row>
281 + <el-row :gutter="0">
282 + <el-col :span="12">
283 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
284 + <el-col :span="13" class="title"><span class="inner">青岛</span></el-col>
285 + <el-col :span="3" class="name outer"><p class="inner">岳先生</p></el-col>
286 + <el-col :span="8" class="number outer"><span class="inner">13608965895</span></el-col>
287 + </el-row>
288 + </el-col>
289 + <el-col :span="12">
290 + <el-row :gutter="0" style="padding: 1.5rem 0;">
291 + <el-col :span="13" class="title">&nbsp;</el-col>
292 + <el-col :span="3" class="name outer">&nbsp;</el-col>
293 + <el-col :span="8" class="number outer">&nbsp;</el-col>
294 + </el-row>
295 + </el-col>
296 + </el-row>
297 + </div>
298 + <div v-else class="xs-box">
299 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
300 + <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner xs">北京</span></el-col>
301 + <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner xs">座机</p></el-col>
302 + <el-col :span="8" class="number outer" style="margin-top: 1rem;">
303 + <p class="inner xs">010-84535251</p>
304 + <p class="inner xs">010-84535112</p>
305 + </el-col>
306 + </el-row>
307 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
308 + <el-col :span="13" class="title"><p class="inner xs">京津 内蒙</p></el-col>
309 + <el-col :span="3" class="name outer"><p class="inner xs">孙先生</p></el-col>
310 + <el-col :span="8" class="number outer"><span class="inner xs">13911009923</span></el-col>
311 + </el-row>
312 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
313 + <el-col :span="13" class="title"><span class="inner xs">辽宁</span></el-col>
314 + <el-col :span="3" class="name outer"><p class="inner xs">马先生</p></el-col>
315 + <el-col :span="8" class="number outer"><span class="inner xs">18940112000</span></el-col>
316 + </el-row>
317 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
318 + <el-col :span="13" class="title"><span class="inner xs">吉林 黑龙江</span></el-col>
319 + <el-col :span="3" class="name outer"><p class="inner xs">郭女士</p></el-col>
320 + <el-col :span="8" class="number outer"><span class="inner xs">13394492511</span></el-col>
321 + </el-row>
322 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
323 + <el-col :span="13" class="title"><span class="inner xs">河北 山西</span></el-col>
324 + <el-col :span="3" class="name outer"><p class="inner xs">明女士</p></el-col>
325 + <el-col :span="8" class="number outer"><span class="inner xs">13832171806</span></el-col>
326 + </el-row>
327 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
328 + <el-col :span="13" class="title"><span class="inner xs">济南 烟台</span></el-col>
329 + <el-col :span="3" class="name outer"><p class="inner xs">张先生</p></el-col>
330 + <el-col :span="8" class="number outer"><span class="inner xs">13608967713</span></el-col>
331 + </el-row>
332 + <el-row :gutter="0" style="padding: 1.5rem 0;">
333 + <el-col :span="13" class="title"><span class="inner xs">青岛</span></el-col>
334 + <el-col :span="3" class="name outer"><p class="inner xs">岳先生</p></el-col>
335 + <el-col :span="8" class="number outer"><span class="inner xs">13608965895</span></el-col>
336 + </el-row>
337 + </div>
338 + <div :class="['concat-area', is_xs ? 'xs' : '']">华 中</div>
339 + <div v-if="!is_xs">
340 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
341 + <el-col :span="12">
342 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
343 + <el-col :span="13" class="title"><span class="inner">湖北</span></el-col>
344 + <el-col :span="3" class="name outer"><p class="inner">余先生</p></el-col>
345 + <el-col :span="8" class="number outer"><span class="inner">13607118550</span></el-col>
346 + </el-row>
347 + </el-col>
348 + <el-col :span="12">
349 + <el-row :gutter="0" style="padding: 1.5rem 0;">
350 + <el-col :span="13" class="title"><span class="inner">湖南</span></el-col>
351 + <el-col :span="3" class="name outer"><p class="inner">祝先生</p></el-col>
352 + <el-col :span="8" class="number outer"><span class="inner">13507421625</span></el-col>
353 + </el-row>
354 + </el-col>
355 + </el-row>
356 + <el-row :gutter="0">
357 + <el-col :span="12">
358 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
359 + <el-col :span="13" class="title"><span class="inner">河南</span></el-col>
360 + <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col>
361 + <el-col :span="8" class="number outer"><span class="inner">0731-84416348</span></el-col>
362 + </el-row>
363 + </el-col>
364 + <el-col :span="12">
365 + <el-row :gutter="0" style="padding: 1.5rem 0;">
366 + <el-col :span="13" class="title">&nbsp;</el-col>
367 + <el-col :span="3" class="name outer">&nbsp;</el-col>
368 + <el-col :span="8" class="number outer">&nbsp;</el-col>
369 + </el-row>
370 + </el-col>
371 + </el-row>
372 + </div>
373 + <div v-else class="xs-box">
374 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA; padding: 1.5rem 0;">
375 + <el-col :span="13" class="title"><span class="inner xs">湖北</span></el-col>
376 + <el-col :span="3" class="name outer"><p class="inner xs">余先生</p></el-col>
377 + <el-col :span="8" class="number outer"><span class="inner xs">13607118550</span></el-col>
378 + </el-row>
379 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;padding: 1.5rem 0;">
380 + <el-col :span="13" class="title"><span class="inner xs">湖南</span></el-col>
381 + <el-col :span="3" class="name outer"><p class="inner xs">祝先生</p></el-col>
382 + <el-col :span="8" class="number outer"><span class="inner xs">13507421625</span></el-col>
383 + </el-row>
384 + <el-row :gutter="0" style="padding: 1.5rem 0;">
385 + <el-col :span="13" class="title"><span class="inner xs">河南</span></el-col>
386 + <el-col :span="3" class="name outer"><p class="inner xs">座机</p></el-col>
387 + <el-col :span="8" class="number outer"><span class="inner xs">0731-84416348</span></el-col>
388 + </el-row>
389 + </div>
390 + <div :class="['concat-area', is_xs ? 'xs' : '']">西 南</div>
391 + <el-row v-if="!is_xs" :gutter="0" style="border-bottom: 1px solid #DADADA;">
248 <el-col :span="12"> 392 <el-col :span="12">
249 <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;"> 393 <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
250 <el-col :span="13" class="title"><span class="inner">四川 重庆 贵州 云南 西藏</span></el-col> 394 <el-col :span="13" class="title"><span class="inner">四川 重庆 贵州 云南 西藏</span></el-col>
...@@ -260,6 +404,13 @@ ...@@ -260,6 +404,13 @@
260 </el-row> 404 </el-row>
261 </el-col> 405 </el-col>
262 </el-row> 406 </el-row>
407 + <div v-else class="xs-box">
408 + <el-row :gutter="0" style="padding: 1.5rem 0;">
409 + <el-col :span="13" class="title"><span class="inner xs">四川 重庆 贵州 云南 西藏</span></el-col>
410 + <el-col :span="3" class="name outer"><p class="inner xs">梁先生</p></el-col>
411 + <el-col :span="8" class="number outer"><span class="inner xs">13637700633</span></el-col>
412 + </el-row>
413 + </div>
263 </div> 414 </div>
264 </hager-box> 415 </hager-box>
265 </div> 416 </div>
...@@ -289,20 +440,21 @@ export default { ...@@ -289,20 +440,21 @@ export default {
289 <style lang="less" scoped> 440 <style lang="less" scoped>
290 .hager-concat-page { 441 .hager-concat-page {
291 .top-img { 442 .top-img {
292 - height: 23rem; 443 + height: 22rem;
293 background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner05.png); 444 background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner05.png);
294 background-size: cover; 445 background-size: cover;
295 background-position: center; 446 background-position: center;
296 background-repeat: no-repeat; 447 background-repeat: no-repeat;
448 + &.xs {
449 + height: 12rem;
450 + }
297 } 451 }
298 452
299 - .img { 453 + .box-wrapper {
300 - width: 100%; 454 + margin: 3rem 0;
301 - height: 25rem; 455 + &.xs {
302 - background-image: url(https://cdn.ipadbiz.cn/hager/img/concat/l01.png); 456 + margin: 1rem 0;
303 - background-size: cover; 457 + }
304 - background-position: center;
305 - background-repeat: no-repeat;
306 } 458 }
307 459
308 .headquarter-wrapper { 460 .headquarter-wrapper {
...@@ -311,11 +463,18 @@ export default { ...@@ -311,11 +463,18 @@ export default {
311 justify-content: center; 463 justify-content: center;
312 height: 25rem; 464 height: 25rem;
313 background-color: #F7F7F7; 465 background-color: #F7F7F7;
466 + &.xs {
467 + height: auto;
468 + padding: 2rem 0;
469 + }
314 .info { 470 .info {
315 display: flex; 471 display: flex;
316 flex-direction: column; 472 flex-direction: column;
317 font-size: 1.5rem; 473 font-size: 1.5rem;
318 text-align: center; 474 text-align: center;
475 + &.xs {
476 + font-size: 1.25rem;
477 + }
319 } 478 }
320 } 479 }
321 480
...@@ -323,9 +482,10 @@ export default { ...@@ -323,9 +482,10 @@ export default {
323 color: @secondary-color; 482 color: @secondary-color;
324 font-weight: bold; 483 font-weight: bold;
325 .inner { 484 .inner {
326 - // margin-left: 1.5rem;
327 - // text-indent: 1.5rem;
328 padding-left: 1.5rem; 485 padding-left: 1.5rem;
486 + &.xs {
487 + padding-left: 0.5rem;
488 + }
329 } 489 }
330 } 490 }
331 491
...@@ -337,6 +497,9 @@ export default { ...@@ -337,6 +497,9 @@ export default {
337 } 497 }
338 .inner { 498 .inner {
339 text-align: center; 499 text-align: center;
500 + &.xs {
501 + text-align: center;
502 + }
340 } 503 }
341 } 504 }
342 505
...@@ -348,6 +511,21 @@ export default { ...@@ -348,6 +511,21 @@ export default {
348 } 511 }
349 .inner { 512 .inner {
350 margin-right: 1.5rem; 513 margin-right: 1.5rem;
514 + &.xs {
515 + margin-right: 0.5rem;
516 + }
517 + }
518 + }
519 +
520 + .img {
521 + width: 100%;
522 + height: 25rem;
523 + background-image: url(https://cdn.ipadbiz.cn/hager/img/concat/l01.png);
524 + background-size: cover;
525 + background-position: center;
526 + background-repeat: no-repeat;
527 + &.xs {
528 + height: 12rem;
351 } 529 }
352 } 530 }
353 531
...@@ -355,6 +533,14 @@ export default { ...@@ -355,6 +533,14 @@ export default {
355 background-color: #E3F1F7; 533 background-color: #E3F1F7;
356 padding: 1rem 1.5rem; 534 padding: 1rem 1.5rem;
357 font-weight: bold; 535 font-weight: bold;
536 + &.xs {
537 + margin-top: 1rem;
538 + padding-left: 1rem;
539 + }
540 + }
541 +
542 + .xs-box {
543 + font-size: 0.85rem;
358 } 544 }
359 } 545 }
360 </style> 546 </style>
......