Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a2f64af5 1 parent cc835e24

✨ feat: 产品中心详情自适应

Inline Side-by-side
Showing 2 changed files with 62 additions and 15 deletions
<!--
* @Date: 2024-09-29 14:26:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 15:33:16
* @LastEditTime: 2024-10-11 16:17:21
* @FilePath: /hager/src/views/product/detail.vue
* @Description: 文件描述
-->
<template>
<div class="product-detail">
<hager-box>
<div>
<div v-if="!is_xs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>所有产品</el-breadcrumb-item>
<el-breadcrumb-item>配电产品</el-breadcrumb-item>
......@@ -18,7 +18,7 @@
</div>
</hager-box>
<hager-box class="box-n">
<el-row :gutter="10" style="margin-bottom: 3rem;">
<el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;">
<el-col :span="10">
<hager-carousel></hager-carousel>
</el-col>
......@@ -34,11 +34,25 @@
</div>
</el-col>
</el-row>
<div v-else>
<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>
</ul>
</div>
<div v-for="(item, index) in images" :key="index" class="product-item-img">
<el-image style="height: 14rem;" :src="item" fit="cover"></el-image>
</div>
</div>
</hager-box>
<hager-box class="box-2n">
<hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
<div class="product-advantage" style="">
<div class="item" v-for="(item, index) in 3" :key="index">
<div :class="['product-advantage', is_xs ? 'xs' : '']">
<div :class="['item', is_xs ? 'xs' : '']" 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>
......@@ -50,13 +64,13 @@
<hager-h1 title="产品资料" sub="Product Information"></hager-h1>
<div class="product-info">
<div class="info-control">
<div class="control-left">
<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 class="control-left xs">
<div :class="['button xs', is_active === 0 ? 'active' : '']" @click="onClick(0)">产品样本</div>
<div :class="['button xs', is_active === 1 ? 'active' : '']" @click="onClick(1)">技术参数</div>
<div :class="['button xs', is_active === 2 ? 'active' : '']" @click="onClick(2)">产品说明书</div>
<div :class="['button xs', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
</div>
<div>
<div v-if="!is_xs">
<div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">下载选中</div>
</div>
</div>
......@@ -101,7 +115,12 @@ export default {
name: '产品样本',
size: '123MB',
checked: false
}]
}],
images: [
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
]
}
},
computed: {
......@@ -180,6 +199,12 @@ export default {
background-color: #f0f0f0;
border-top: 4px solid @primary-color;
line-height: 2;
&.xs {
padding-bottom: 1rem;
}
}
&.xs {
display: block;
}
}
.product-info {
......@@ -191,12 +216,19 @@ export default {
.control-left {
display: flex;
flex: 1 0 0;
&.xs {
display: flex;
flex-wrap: nowrap; /* 禁止换行 */
overflow-x: auto; /* 启用横向滚动 */
-webkit-overflow-scrolling: touch; /* 使滚动更平滑，适用于移动端 */
}
}
.button {
background-color: #f3f3f3;
padding: 1rem 2.2rem;
border-radius: 5px;
margin-right: 1rem;
text-align: center;
&:hover {
cursor: pointer;
}
......@@ -204,6 +236,11 @@ export default {
background-color: @primary-color;
color: #fff;
}
&.xs {
flex: 0 0 auto; /* 子元素保持固定大小 */
width: 5rem; /* 可以根据需要设置宽度 */
margin-right: 10px; /* 子元素之间的间距 */
}
}
}
.info-list {
......@@ -243,5 +280,15 @@ export default {
}
}
}
.product-item-img {
height: auto;
padding: 1.5rem;
text-align: center;
color: #333;
border-radius: 8px;
background-color: #f3f3f3;
margin-bottom: 1rem;
}
}
</style>
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-11 15:19:35
* @LastEditTime: 2024-10-11 15:25:43
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -34,7 +34,7 @@
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p class="product-item-title">acb hw 空气断路器</p>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
......@@ -45,7 +45,7 @@
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p class="product-item-title">acb hw 空气断路器</p>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
......