suixy
/
portal_website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(productCenter): 新增产品详情页面

Browse Source 
- 在路由中添加 productCenter/detail3 路由
- 创建 detail3.vue 组件作为新的产品详情页面
- 在产品中心首页添加新产品的列表项
master
zangch@mesnac.com 4 months ago
parent 551d75a216
commit 82073493ed
3 changed files with 503 additions and 0 deletions
Show Stats Download Patch File Download Diff File

3
src/router/index.js
Unescape Escape View File

@ -35,6 +35,9 @@ export default new Router({
},
{
path: 'productCenter/detail2', component: () => import('@/views/productCenter/detail2.vue'),
},
{
path: 'productCenter/detail3', component: () => import('@/views/productCenter/detail3.vue'),
},
{
path: 'index', component: () => import('@/views/index/index.vue'),

499
src/views/productCenter/detail3.vue
Unescape Escape View File

@ -0,0 +1,499 @@
<template>
<div>
<div class="banner">
<el-image
style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
:src="data.banner"
fit="contain"></el-image>
<el-image
style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
:src="data.banner1"
fit="contain"></el-image>
<div class="bannerInfo">{{ data.bannerTitle }}</div>
<div class="bannerValue">{{ data.bannerValue }}</div>
</div>
<div class="product-container">
<!-- 左侧大图 + 缩略图 -->
<div class="product-left">
<!-- 大图 -->
<div class="main-img">
<el-image :src="activeImg" fit="contain"></el-image>
</div>
<!-- 缩略图 -->
<div class="thumb-list">
<div
v-for="(img, index) in data.imgList"
:key="index"
class="thumb-item"
:class="{ active: activeIndex === index }"
@mouseenter="changeImg(index)"
>
<el-image :src="img" fit="cover"></el-image>
</div>
</div>
</div>
<!-- 右侧文字 -->
<div class="product-right">
<h2 class="title">产品特点</h2>
<ul class="features">
<li v-for="(item, i) in data.features" :key="i">
<i class="el-icon-circle-check"></i> {{ item }}
</li>
</ul>
</div>
</div>
<div class="param-container" style="padding: 5vw 10vw;background-color: #0001">
<h2 class="title1" style="line-height: 40px">产品参数</h2>
<div class="paramsTable" v-for="(param, index) in data.params" :key="index">
<div class="th">
<div class="th1">{{ param.title }}</div>
<div class="th2">参数值</div>
</div>
<div class="td">
<div v-for="(item, idx) in param.list" :key="idx">
<div class="td1">{{ item.name }}</div>
<div class="td2">{{ item.value }}</div>
</div>
</div>
</div>
</div>
<ContactUs class="contactUs"/>
<Copyright class="copyright"/>
</div>
</template>
<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {selectMenuTree} from "@/api/productCenter";
export default {
name: 'ProductCenter',
components: {
ContactUs,
Copyright,
},
data() {
return {
activeIndex: 0,
data:{
banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
banner1:'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png',
bannerTitle: 'HW-RFR-050-B-003-1204S',
bannerValue: '体积小，三防性能优，远距稳定识别。',
imgList: [
"http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png",
"http://1.13.177.47:9665/statics/2025/08/25/66_20250825200238A186.png",
"http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E9%AB%98%E6%80%A7%E8%83%BD%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E8%BF%9C%E8%B7%9D%E7%A6%BB%E8%AF%86%E5%88%AB%E3%80%82_20250822101411A021.png",
],
features: [
"HW-RFR-050-B-XX高频读写器的尺寸为39.8*72*13mm,其可以固定在设计尺寸小的位置。",
"高频读写器具备IP67的防护等级，可满足恶劣的工业环境的应用。",
"HW-RFR-050高频读写器可以稳定识别距离为0—45mm，最大识别距离为65mm—70mm，根据标签的选型以及天线尺寸有所变化。",
],
params:[
{
title:'RFID特性',
list:[
{ name: "射频协议", value: "符合ISO/IEC 15693协议" },
{ name: "工作频率", value: "13.56MHz±7KHz" },
{ name: "识别距离", value: "<=50mm[不同标签类型，读写距离有差异。]" },
{ name: "盘点速度", value: "20ms/次" },
]
},
{
title:'电气特性',
list:[
{ name: "输入电压", value: "12~24VDC" },
{ name: "发射功率", value: "0.2W" },
{ name: "最大功率", value: "1W" },
{ name: "通讯协议", value: "Modbus RTU" },
{ name: "通讯接口", value: "RS485（M12-5针-B型-公头航空头）" },
{ name: "搭配网关支持通讯协议", value: "·Profinet、·EtherNet/IP、·EtherCAT、·CCLinkIE、·ModbusTCP" },
]
},
{
title:'物理特性',
list:[
{ name: "尺寸", value: "40（W）*72（L）*13（H）mm" },
{ name: "外壳材质", value: "ABS+PC" },
{ name: "安装环境", value: "安装需要1cm厚的无金属缓冲区，如垫一块10mm厚pom板" },
{ name: "尾部出线长度", value: "300mm" },
]
},
{
title:'工作环境',
list:[
{ name: "工作温度", value: "-10℃~ +65℃" },
{ name: "防护等级", value: "IP67" },
{ name: "一致性认证", value: "CE、Rohs" },
{ name: "功能显示", value: "通讯正常：Link指示灯常亮。 有通讯数据：Mod指示灯闪烁。" },
]
},
]
}
}
},
computed: {
activeImg() {
return this.data.imgList[this.activeIndex];
},
},
mounted() {
this.getData()
},
watch: {
'$route'() {
this.getData()
}
},
methods: {
changeImg(index) {
this.activeIndex = index;
},
getData() {
selectMenuTree().then(e => {
console.log(e)
})
},
toDetail(id){
this.$router.push('/productCenter/detail?id='+id)
}
}
}
</script>
<style lang="less" scoped>
@import "~@/style.less";
.banner {
width: 100%;
height: 35.5vw;
position: relative;
.bannerInfo {
position: absolute;
top: 35%;
left: 19%;
width: 40%;
text-align: left;
font-size: 2.5vw;
color: #000;
font-weight: 700;
line-height: 3vw;
letter-spacing: 2px;
word-break: break-all;
}
.bannerValue {
position: absolute;
top: calc(35% + 3vw);
left: 19%;
width: 40%;
text-align: left;
font-size: 1vw;
color: #000;
font-weight: 500;
line-height: 2vw;
word-break: break-all;
}
.bannerBtn {
position: absolute;
top: 58%;
left: 19%;
width: 11.5vw;
font-size: 1.2vw;
line-height: 2vw;
letter-spacing: 2px;
}
.tabs {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
backdrop-filter: saturate(50%) blur(4px);
.content {
width: 62%;
position: relative;
left: 50%;
bottom: 0;
transform: translateX(-50%);
.tab {
display: inline-block;
width: 50%;
line-height: 6.2vw;
font-size: 1.6vw;
letter-spacing: 3px;
}
.tab.active {
color: @standard-color;
width: calc(50% - 3px);
border: 1px solid #fff;
box-shadow: 0 0 3px #0002;
}
}
}
}
.tabs {
text-align: left;
margin-top: 2.3vw;
/deep/ .el-tabs__header {
margin: 0 10vw 15px;
}
/deep/ .el-tabs__content {
padding: 0 10vw;
background-color: fade(@standard-color, 10);
}
/deep/ .el-tabs__nav-wrap::after {
display: none;
}
/deep/ .el-tabs__item {
letter-spacing: 3px;
padding: 0 2vw;
height: 2.9vw;
font-size: 1.6vw;
}
/deep/ .el-tabs__item {
line-height: 2.9vw;
}
/deep/ .el-tabs__item.is-active {
font-weight: 600;
color: @standard-color;
}
/deep/ .el-tabs__active-bar {
height: 4px;
background-color: @standard-color;
}
.content {
padding: 2.2vw 0;
display: inline-block;
width: 47%;
cursor: pointer;
&:nth-child(2n){
margin-left: 5%;
}
&:hover{
.itemTitle {
color: #5c8eff;
}
.img-wrap {
.image{
transform: scale(1.2);
}
}
}
.custom-card {
width: 100%;
padding: 16px;
border-radius: 16px;
display: inline-block;
}
.itemTitle {
font-size: 26px;
font-weight: 600;
margin: 0;
text-align: center;
transition: all 0.5s ease;
}
.description {
font-size: 14px;
color: #666;
margin: 0;
margin-top: 12px;
line-height: 1.6;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制两行 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.btn-wrap {
display: flex;
justify-content: center;
}
.more-btn {
margin-top: 12px;
background-color: transparent;
border: 1px solid #dcdfe6;
border-radius: 20px;
padding: 6px 16px;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
gap: 4px;
}
.more-btn:hover {
border-color: #409eff;
color: #409eff;
background-color: rgba(64, 158, 255, 0.05);
}
.icon {
font-size: 16px;
margin-left: 4px;
}
.img-wrap {
margin-top: 12px;
overflow: hidden;
.image{
transition: transform 0.5s ease;
}
}
}
}
.contactUs {
width: 100%;
background-color: #2e445c;
}
.copyright {
width: 100%;
background-color: #1d3348;
}
.product-container {
padding: 5vw 10vw;
display: flex;
gap: 40px;
}
.product-left {
width: 400px;
}
.main-img {
width: 100%;
height: 300px;
border: 1px solid #eee;
display: flex;
justify-content: center;
align-items: center;
}
.thumb-list {
margin-top: 16px;
display: flex;
gap: 10px;
}
.thumb-item {
width: 80px;
height: 60px;
border: 2px solid transparent;
cursor: pointer;
}
.thumb-item.active {
border-color: #409eff;
}
.thumb-item .el-image {
width: 100%;
height: 100%;
}
.product-right {
flex: 1;
}
.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 12px;
}
.features {
list-style: none;
padding: 0;
margin: 0;
}
.features li {
font-size: 14px;
margin-bottom: 10px;
color: #333;
display: flex;
align-items: center;
line-height: 24px;
}
.features i {
color: #409eff;
margin-right: 6px;
}
.paramsTable{
.th{
background-color: #DBDFE7;
line-height: 3vw;
font-size: 1.3vw;
font-weight: 700;
text-align: left;
.th1{
width: calc(30% - 2vw - 2px);
display: inline-block;
padding-left: 2vw;
border-right: 1px solid #0001
}
.th2{
width: calc(70% - 2vw - 2px);
display: inline-block;
padding-left: 2vw;
}
}
.td{
line-height: 3vw;
font-size: 0.9vw;
text-align: left;
.td1{
background-color: #F2F4F8;
width: calc(30% - 2vw - 2px);
display: inline-block;
padding-left: 2vw;
border: 1px solid #0001
}
.td2{
background-color: #EEEEEE;
width: calc(70% - 2vw - 2px);
display: inline-block;
padding-left: 2vw;
border: 1px solid #0001
}
}
}
</style>

1
src/views/productCenter/index.vue
Unescape Escape View File

@ -138,6 +138,7 @@ export default {
list: [
{
name: 'HW-RFR-050-B-003-B1204S',
id: '3',
//value:'介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1',
icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png'
},

Write Preview
Loading…
Cancel
Save