Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b2cd90f7 1 parent 067a6680

把解决方案修改内容修改成正式

Inline Side-by-side
Showing 2 changed files with 62 additions and 60 deletions
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-01-02 11:25:24
* @LastEditTime: 2025-01-02 17:35:20
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-solution-detail">
<hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }">
<div class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">{{ case_info.category_name }}</p>
<p class="sub">{{ case_info.category_name_en }}</p>
</div>
<hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"></hager-box>
<hager-box>
<hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en" style="margin: 3vw 0 1rem; text-align: center;"></hager-h1>
<div class="intro-box" style="text-align: center;">
<p v-html="category_description"></p>
</div>
</hager-box>
<hager-box v-if="case_list.length > 1">
......@@ -23,36 +22,20 @@
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-n">
<el-row :gutter="0">
<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.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 v-html="category_description"></p>
</div>
</el-col>
</el-row>
<hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 0;"></hager-h1>
<div style="display: flex; justify-content:space-between; align-items: center;">
<div @click="onClickImg(item.value)" v-for="(item, index) in case_img" :key="index" class="carousel-img-test" :style="{backgroundImage: 'url(' + item.value + ')'}"></div>
</div>
</hager-box>
<div v-else>
<hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 1rem;"></hager-h1>
<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.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
<el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="contain" :src="item.value"></el-image>
</el-carousel-item>
</el-carousel>
</div>
<div class="brief-introduction xs">
<div class="intro-box xs">
<hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en"></hager-h1>
<div style="margin: 2rem 0;" v-html="category_description"></div>
<!-- <i class="el-icon-right"></i> -->
</div>
</div>
</div>
<hager-box class="box-2n">
<hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
......@@ -67,9 +50,6 @@
<i class="el-icon-right pc"></i>
</div>
</div>
<!-- <div style="display: flex; justify-content: center; margin-top: 2rem;">
<hager-more></hager-more>
</div> -->
</div>
<div v-else>
<swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
......@@ -229,10 +209,11 @@ export default {
this.case_info = data;
this.case_banner = data.file?.banner ? data.file?.banner[0].value : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
this.case_list = data.list;
this.category_description = data.category_description;
this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0;
this.current_id = this.case_list[this.current_index]['id'];
this.success_data_list = this.case_list[this.current_index].list ?? [];
this.category_description = this.case_list[this.current_index].category_description ?? '';
// this.category_description = this.case_list[this.current_index].category_description ?? '';
this.case_img = this.case_list[this.current_index].file?.img ? this.case_list[this.current_index].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
this.product_list = this.case_list[this.current_index].product ?? [];
}
......@@ -294,7 +275,7 @@ export default {
this.current_index = idx;
this.current_id = this.case_list[idx]['id'];
this.success_data_list = this.case_list[idx].list ?? [];
this.category_description = this.case_list[idx].category_description ?? '';
// this.category_description = this.case_list[idx].category_description ?? '';
this.case_img = this.case_list[idx].file?.img ? this.case_list[idx].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
this.product_list = this.case_list[idx].product ?? [];
this.activeSuccessIndex = 0
......@@ -331,6 +312,18 @@ export default {
}
}
.carousel-img {
background-color: white;
&:hover {
cursor: zoom-in;
}
}
.carousel-img-test{
width: 49%;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-size: contain;
background-repeat: no-repeat;
height: 25vw;
&:hover {
cursor: zoom-in;
}
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-01-02 11:25:39
* @FilePath: /hager/src/views/solution/detail_test.vue
* @LastEditTime: 2025-01-02 11:25:24
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-solution-detail">
<hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"></hager-box>
<hager-box>
<hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en" style="margin: 3vw 0 1rem; text-align: center;"></hager-h1>
<div class="intro-box" style="text-align: center;">
<p v-html="category_description"></p>
<hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }">
<div class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">{{ case_info.category_name }}</p>
<p class="sub">{{ case_info.category_name_en }}</p>
</div>
</div>
</hager-box>
<hager-box v-if="case_list.length > 1">
......@@ -22,13 +23,22 @@
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-n">
<hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 0;"></hager-h1>
<div style="display: flex; justify-content:space-between; align-items: center;">
<div @click="onClickImg(item.value)" v-for="(item, index) in case_img" :key="index" class="carousel-img-test" :style="{backgroundImage: 'url(' + item.value + ')'}"></div>
</div>
<el-row :gutter="0">
<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.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 v-html="category_description"></p>
</div>
</el-col>
</el-row>
</hager-box>
<div v-else>
<hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 1rem;"></hager-h1>
<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">
......@@ -36,6 +46,13 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="brief-introduction xs">
<div class="intro-box xs">
<hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en"></hager-h1>
<div style="margin: 2rem 0;" v-html="category_description"></div>
<!-- <i class="el-icon-right"></i> -->
</div>
</div>
</div>
<hager-box class="box-2n">
<hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
......@@ -50,6 +67,9 @@
<i class="el-icon-right pc"></i>
</div>
</div>
<!-- <div style="display: flex; justify-content: center; margin-top: 2rem;">
<hager-more></hager-more>
</div> -->
</div>
<div v-else>
<swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
......@@ -209,11 +229,10 @@ export default {
this.case_info = data;
this.case_banner = data.file?.banner ? data.file?.banner[0].value : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
this.case_list = data.list;
this.category_description = data.category_description;
this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0;
this.current_id = this.case_list[this.current_index]['id'];
this.success_data_list = this.case_list[this.current_index].list ?? [];
// this.category_description = this.case_list[this.current_index].category_description ?? '';
this.category_description = this.case_list[this.current_index].category_description ?? '';
this.case_img = this.case_list[this.current_index].file?.img ? this.case_list[this.current_index].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
this.product_list = this.case_list[this.current_index].product ?? [];
}
......@@ -275,7 +294,7 @@ export default {
this.current_index = idx;
this.current_id = this.case_list[idx]['id'];
this.success_data_list = this.case_list[idx].list ?? [];
// this.category_description = this.case_list[idx].category_description ?? '';
this.category_description = this.case_list[idx].category_description ?? '';
this.case_img = this.case_list[idx].file?.img ? this.case_list[idx].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
this.product_list = this.case_list[idx].product ?? [];
this.activeSuccessIndex = 0
......@@ -290,7 +309,7 @@ export default {
})
// 记录点击的分类ID，用于返回定位到该分类
this.$router.push({
path: `/solution/detail_test/${this.$route.params.id}/${this.current_index}/${Date.now()}`,
path: `/solution/detail/${this.$route.params.id}/${this.current_index}/${Date.now()}`,
});
}
}
......@@ -316,16 +335,6 @@ export default {
cursor: zoom-in;
}
}
.carousel-img-test{
width: 49%;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-size: cover;
height: 25vw;
&:hover {
cursor: zoom-in;
}
}
.brief-introduction {
background-color: #FFF;
height: 25rem;
......