Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b7865e90 1 parent a085c873

🐞 fix: 修复解决方案图片显示高度优化

Inline Side-by-side
Showing 1 changed file with 11 additions and 6 deletions
1 <template> 1 <template>
2 <div class="hager-solution-index"> 2 <div class="hager-solution-index">
3 - <hager-box :style="{backgroundColor: '#F5F6FB', height: solution_box_height }"> 3 + <hager-box :style="{backgroundColor: '#F5F6FB', height: !is_xs ? solution_box_height : solution_mini_height }">
4 - <div class="hager-solution-top"> 4 + <div v-if="!is_xs" class="hager-solution-top">
5 - <el-row v-if="!is_xs" :gutter="20" style="display: flex;"> 5 + <el-row :gutter="20" style="display: flex;">
6 <el-col :span="8"> 6 <el-col :span="8">
7 <div class="banner-text-wrapper"> 7 <div class="banner-text-wrapper">
8 <div class="text"> 8 <div class="text">
9 <span class="title">解决方案</span>&nbsp;<span class="sub">Solution</span> 9 <span class="title">解决方案</span>&nbsp;<span class="sub">Solution</span>
10 </div> 10 </div>
11 - <div class="text-sub"> 11 + <div class="text-sub" style="font-size: 1.2rem;">
12 海格电气用丰富的行业知识和应用经验，<br/>为多个行业提供智能低压配电解决方案和智能楼宇解决方案。 12 海格电气用丰富的行业知识和应用经验，<br/>为多个行业提供智能低压配电解决方案和智能楼宇解决方案。
13 </div> 13 </div>
14 </div> 14 </div>
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
17 <img :style="{ height: solution_box_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png"> 17 <img :style="{ height: solution_box_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
18 </el-col> 18 </el-col>
19 </el-row> 19 </el-row>
20 - <img v-else :style="{ height: solution_mini_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
21 </div> 20 </div>
21 + <img v-else :style="{ height: solution_mini_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
22 </hager-box> 22 </hager-box>
23 <hager-box class="box-n"> 23 <hager-box class="box-n">
24 <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0 1rem;"></hager-h1> 24 <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0 1rem;"></hager-h1>
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
127 this.$nextTick(() => { 127 this.$nextTick(() => {
128 // 高度监听 128 // 高度监听
129 this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px'; 129 this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
130 - this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px'; 130 + this.solution_mini_height = $(window).outerWidth() * 0.55 + 'px';
131 // 动态计算图片高度 131 // 动态计算图片高度
132 let img_width = $('.card-image').outerWidth(); 132 let img_width = $('.card-image').outerWidth();
133 $('.card-image').css('height', img_width * 0.7 + 'px'); 133 $('.card-image').css('height', img_width * 0.7 + 'px');
...@@ -253,6 +253,11 @@ export default { ...@@ -253,6 +253,11 @@ export default {
253 color: @secondary-color; 253 color: @secondary-color;
254 margin-bottom: 10px; 254 margin-bottom: 10px;
255 font-weight: bold; 255 font-weight: bold;
256 + span {
257 + white-space: nowrap; /* 不换行 */
258 + overflow: hidden; /* 隐藏超出部分 */
259 + text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
260 + }
256 } 261 }
257 .card-sub { 262 .card-sub {
258 font-size: 0.85rem; 263 font-size: 0.85rem;
......