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