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

feat(productCenter): 添加产品详情页面

Browse Source
master
zangch@mesnac.com 4 months ago
parent ee158e7068
commit b18e893c8e
1 changed files with 489 additions and 0 deletions
Show Stats Download Patch File Download Diff File

489
src/views/productCenter/detail2.vue
Unescape Escape View File

@ -0,0 +1,489 @@
<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/%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',
bannerTitle: 'HW-R145L-6系列',
bannerValue: '远距离，高增益，多接口，PoE宽电压直流供电，多路GPIO。',
imgList: [
"http://1.13.177.47:9665/statics/2025/08/25/7_20250825193701A183.png",
"http://1.13.177.47:9665/statics/2025/08/25/8_20250825193712A184.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: [
"紧凑型圆极化天线",
"卓越的防碰撞算法",
"PoE,宽电压直流供电",
"TCP soket通讯",
"优异的阅读距离",
],
params:[
{
title:'射频特性',
list:[
{ name: "射频协议", value: "ISO/IEC 18000-63 /EPC Gen2v2" },
{ name: "工作频段", value: "中国频段：920-925MHz其他国家频段（可定制）" },
{ name: "发射功率", value: "5-26dBm 可调，步进 1 dB，精度±1dB" },
{ name: "盘点速率", value: "100 tag/s" },
{ name: "天线增益", value: "6dBi" },
{ name: "天线驻波比", value: "≦1.3：1" },
{ name: "读卡距离", value: "读取TPALN9662标签,最大读距：8m（读距随标签型号不同而有所差异）" },
{ name: "供电电源", value: "12～24VDC(推荐 12V 标配适配器)\n或 802.3af POE供电" },
{ name: "整机峰值功率", value: "6W" },
{ name: "外形尺寸", value: "129mm*129mm*53 mm" },
{ name: "产品重量", value: "约520g" },
{ name: "外壳材料", value: "铝合金+PC" },
{ name: "外壳颜色", value: "白色、银色" },
{ name: "工作温度", value: "-25℃~60℃" },
{ name: "存储温度", value: "-40℃~85℃" },
{ name: "工作湿度", value: "5%~95%RH 无冷凝" },
{ name: "IP等级", value: "-" },
{ name: "通讯接口", value: "TCP/IP（ RJ-45）、RS232 和隔离RS485（M12-6 航空头，可定制）" },
{ name: "GPIO端口", value: "M12-12 航空接口，4输入、4 输出（兼容 5～24V 电平）光耦隔离，输出口低电平电流容限 Max.500mA" },
{ name: "声音指示", value: "1个蜂鸣器" },
{ name: "开发接口", value: "支持 C#、JAVA" },
]
},
]
}
}
},
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>
Write Preview
Loading…
Cancel
Save