Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5682b3c8 1 parent c250d7aa

完善产品详情页样式和功能

Inline Side-by-side
Showing 3 changed files with 133 additions and 73 deletions
/*
* @Date: 2024-08-26 10:12:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-26 16:31:40
* @LastEditTime: 2024-09-30 15:31:44
* @FilePath: /hager/src/main.js
* @Description: 文件描述
*/
......@@ -11,7 +11,7 @@ import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，用于在某些条件下隐藏元素
// import '@/styles/element-ui/element-variables.scss' // 自定义主题, 不需要展示屏蔽
// import { Button, Row, Col, } from 'element-ui';
......
<!--
* @Date: 2024-09-29 14:26:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 10:06:55
* @LastEditTime: 2024-09-30 15:33:16
* @FilePath: /hager/src/views/product/detail.vue
* @Description: 文件描述
-->
......@@ -18,15 +18,15 @@
</div>
</hager-box>
<hager-box class="box-n">
<el-row :gutter="10">
<el-row :gutter="10" style="margin-bottom: 3rem;">
<el-col :span="10">
<hager-carousel></hager-carousel>
</el-col>
<el-col :span="14">
<div>
<div style="font-size: 2rem; font-weight: bold;">HW+系列空气断路器</div>
<div style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
<ul style="padding: 0 1rem;">
<div class="product-detail-info">
<div class="product-title" style="">HW+系列空气断路器</div>
<div class="product-sub" style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
<ul class="product-info-list">
<li>实现谐波测量，实时监测电能质量；</li>
<li>图文显示多电量参数，系统状态一目了然；</li>
<li>支持Modbus远程通讯协议，无线蓝牙连接等多种通讯方式，全方位提升客户的数字化体验。</li>
......@@ -38,26 +38,11 @@
<hager-box class="box-2n">
<hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
<div class="product-advantage" style="">
<div class="item">
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
</div>
<div class="item">
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
</div>
<div class="item">
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<div class="item" v-for="(item, index) in 3" :key="index">
<el-row :gutter="0" v-for="(item, index) in 5" :key="index">
<el-col :span="6">极致的分断能力：</el-col>
<el-col :span="18">标配独立的故障指示触点、远程复位、ZSI保护功能</el-col>
</el-row>
</div>
</div>
</hager-box>
......@@ -66,24 +51,25 @@
<div class="product-info">
<div class="info-control">
<div class="control-left">
<div class="button active" style="margin-right: 1rem;">产品样本</div>
<div class="button" style="margin-right: 1rem;">技术参数</div>
<div class="button" style="margin-right: 1rem;">产品说明书</div>
<div class="button" style="margin-right: 1rem;">安装教程</div>
<div :class="['button', is_active === 0 ? 'active' : '']" @click="onClick(0)">产品样本</div>
<div :class="['button', is_active === 1 ? 'active' : '']" @click="onClick(1)">技术参数</div>
<div :class="['button', is_active === 2 ? 'active' : '']" @click="onClick(2)">产品说明书</div>
<div :class="['button', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
</div>
<div>
<div class="button">下载选中</div>
<div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">下载选中</div>
</div>
</div>
<div>
<div class="info-list">
<div class="info-list" v-for="(item, index) in download_list" :key="index">
<div class="info-list-title">
<i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;Hw+系列空气断路器&nbsp;&nbsp;17.77MB
<i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;{{ item.size }}
</div>
<div class="info-list-control">
<span>预览</span>&nbsp;
<span>直接下载</span>&nbsp;
<i class="el-icon-folder-checked"></i>
<span>预览</span>
<span>直接下载</span>
<i v-if="item.checked" @click="item.checked = !item.checked" class="el-icon-folder-checked download-checked"></i>
<i v-else @click="item.checked = !item.checked" class="el-icon-folder download-unchecked"></i>
</div>
</div>
</div>
......@@ -97,20 +83,59 @@ import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerCarousel from '@/components/hagerCarousel';
import hagerH1 from '@/components/common/hagerH1.vue';
import { MessageBox, Message } from 'element-ui';
export default {
components: { hagerBox, hagerCarousel, hagerH1 },
mixins: [mixin.init],
data () {
return {
is_active: 0,
download_list: [{
id: '123',
name: '产品样本',
size: '123MB',
checked: false
}, {
id: '123',
name: '产品样本',
size: '123MB',
checked: false
}]
}
},
computed: {
is_download_checked () {
return this.download_list.filter(item => item.checked).length > 0;
}
},
mounted () {
},
methods: {
onClick (n) {
this.is_active = n;
},
goToDownload () {
if (this.is_download_checked) {
MessageBox.prompt('请输入发送邮箱', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
Message({
type: 'success',
message: '你的邮箱是: ' + value
});
}).catch(() => {
Message({
type: 'info',
message: '取消输入'
});
});
}
}
}
}
</script>
......@@ -125,6 +150,24 @@ export default {
background-color: #f1f1f1;
padding: 2rem 0;
}
.product-detail-info {
.product-title {
font-size: 2rem;
font-weight: bold;
color: @secondary-color;
}
.product-sub {
margin: 1rem 0 2rem;
color: @text-color;
}
.product-info-list {
padding: 0 1rem;
li {
line-height: 2;
font-size: 0.9rem;
}
}
}
.product-advantage {
margin-top: 1rem;
display: flex;
......@@ -136,9 +179,7 @@ export default {
padding-top: 1rem;
background-color: #f0f0f0;
border-top: 4px solid @primary-color;
p {
line-height: 2;
}
line-height: 2;
}
}
.product-info {
......@@ -155,6 +196,7 @@ export default {
background-color: #f3f3f3;
padding: 1rem 2.2rem;
border-radius: 5px;
margin-right: 1rem;
&:hover {
cursor: pointer;
}
......@@ -168,19 +210,36 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
padding-top: 2rem;
color: #6b6b6b;
.info-list-title {
display: flex; align-items: center;
}
.info-list-control {
display: flex;
justify-content: center;
align-items: center;
span {
margin-right: 1rem;
&:hover {
cursor: pointer;
color: @primary-color;
text-decoration: underline;
}
}
.download-checked {
font-size: 1.5rem;
color: @primary-color;
&:hover {
cursor: pointer;
}
}
.download-unchecked {
font-size: 1.5rem;
&:hover {
cursor: pointer;
}
}
}
}
}
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 14:00:01
* @LastEditTime: 2024-09-30 14:09:02
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -99,16 +99,30 @@ export default {
margin-bottom: 0.5rem;
}
}
}
.el-collapse {
border-top: 0;
}
.el-collapse-item {
.el-collapse-item__header {
font-size: 0.9rem;
.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.p-item {
.product-item {
width: calc(33.33% - 1rem);
}
.product-item-img {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 8px;
}
.product-item-title {
text-align: center;
margin-top: 0.75rem;
color: @secondary-color;
&:hover {
cursor: pointer;
text-decoration: underline;
......@@ -116,31 +130,18 @@ export default {
}
}
.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.product-item {
width: calc(33.33% - 1rem);
.el-collapse {
border-top: 0;
}
.product-item-img {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 8px;
.el-collapse-item {
.el-collapse-item__header {
font-size: 0.9rem;
}
.product-item-title {
text-align: center;
margin-top: 0.75rem;
color: @secondary-color;
.p-item {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
</style>
......