hookehuyr

fix 细节样式修改

/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-04 16:51:13
* @LastEditTime: 2024-11-29 14:06:03
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -37,7 +37,7 @@ export default [{
name: '解决方案',
component: () => import('@/views/solution/index'),
meta: {
title: '海格电气',
title: '解决方案 | Hager China',
tag: 'solution'
},
children: []
......@@ -46,7 +46,7 @@ export default [{
name: '解决方案详情',
component: () => import('@/views/solution/detail'),
meta: {
title: '海格电气',
title: '解决方案 | Hager China',
tag: 'solution'
},
children: []
......@@ -55,7 +55,7 @@ export default [{
name: '成功案例',
component: () => import('@/views/solution/case'),
meta: {
title: '海格电气',
title: '解决方案 | Hager China',
tag: 'solution'
},
children: []
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-29 11:26:32
* @LastEditTime: 2024-12-02 09:56:26
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -20,13 +20,13 @@
<el-col :span="12" style="height: 25rem;">
<el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
<el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
<el-image @click="onClickImg(item)" style="width: 100%; height: 100%;" fit="fill" :src="item"></el-image>
<el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="12" class="brief-introduction">
<div class="intro-box">
<p style="margin: 2rem 0;" v-html="case_info.category_description"></p>
<p v-html="case_info.category_description"></p>
<!-- <i class="el-icon-right"></i> -->
</div>
</el-col>
......@@ -36,7 +36,7 @@
<div style="height: 25rem; margin-top: 2rem;">
<el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
<el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
<el-image @click="onClickImg(item)" style="width: 100%; height: 100%;" fit="fill" :src="item"></el-image>
<el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
</el-carousel-item>
</el-carousel>
</div>
......@@ -297,12 +297,19 @@ export default {
.brief-introduction {
background-color: #FFF;
height: 25rem;
display: flex;
align-items: center;
&.xs {
height: auto;
}
.intro-box {
padding: 3rem;
padding-top: 0;
padding: 0 3rem;
overflow: auto;
height: 25rem;
box-sizing:border-box;
display: flex;
// align-items: center;
margin-top: 2rem;
&.xs {
padding: 2rem;
}
......
......@@ -115,8 +115,8 @@ export default {
},
activeIndex: 0,
reach_end: false,
solution_box_height: '10rem',
solution_mini_height: '10rem',
solution_box_height: '25rem',
solution_mini_height: '25rem',
}
},
async mounted () {
......@@ -126,8 +126,8 @@ export default {
}
this.$nextTick(() => {
// 高度监听
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.3 + 'px';
this.solution_mini_height = $(window).outerWidth() * 0.55 + 'px';
// this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.255 + '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');
......@@ -141,8 +141,8 @@ export default {
methods: {
handleHeightResize () {
// 高度监听
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.3 + 'px';
this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
// this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.255 + 'px';
// this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
// 动态计算图片高度
let img_width = $('.card-image').outerWidth();
$('.card-image').css('height', img_width * 0.7 + 'px');
......