<template>
|
<div>
|
<div class="content">
|
<div class="breadcrumb">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>
|
<span class="location">当前位置：</span>
|
</el-breadcrumb-item>
|
<el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
|
<el-breadcrumb-item :to="{ path: '/product' }">产品中心</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div>
|
<el-card class="box-card">
|
<p class="pro_t1">{{ title }}</p>
|
<p class="pro_t2">产品型号：</p>
|
<p class="pro_t3">{{ title }}</p>
|
<p class="pro_t2">产品描述：</p>
|
<p class="pro_t3">{{ itemConfig.describe }}</p>
|
<p class="pro_t2">产品特点：</p>
|
<p class="pro_t3">{{ itemConfig.characteristic }}</p>
|
<p class="pro_t4">
|
<span class="icon_p"></span>
|
<span class="tel_t">咨询热线：</span>
|
<span class="tel_n">0512--36871300</span>
|
</p>
|
</el-card>
|
</div>
|
<div class="productInfor">
|
<div class="productInforBox">
|
<el-tabs type="border-card">
|
<el-tab-pane label="产品概述">
|
<p v-for="(val, index) in itemConfig.overview" :key="index" style="line-height: 1.5">
|
{{ val }}
|
</p>
|
</el-tab-pane>
|
<el-tab-pane label="技术参数">
|
<img
|
v-if="parameterConfig.type === 'image'"
|
:src="require(`${parameterConfig.src}`)"
|
alt=""
|
/>
|
<p v-else v-html="parameterConfig.content"></p>
|
</el-tab-pane>
|
<el-tab-pane label="功能特点">
|
<div
|
v-for="(val, index) in itemConfig.useInfor"
|
:key="index"
|
class="productInfor_useInfor"
|
>
|
<p>{{ val.name }}</p>
|
<p v-html="val.content" style="line-height: 1.5"></p>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import require from '@/utils/require'
|
import { ArrowRight } from '@element-plus/icons-vue'
|
import { ElTabs, ElTabPane } from 'element-plus'
|
import productDetailData from '@/utils/productDetailData.json'
|
import { onMounted, reactive, ref } from 'vue'
|
import { useRoute } from 'vue-router'
|
import _ from 'lodash'
|
const route = useRoute()
|
let title = ref('')
|
let name = ref('')
|
let itemConfig: any = ref({})
|
let parameterConfig: any = ref({})
|
let configData = reactive(productDetailData.data)
|
|
onMounted(() => {
|
title.value = route.query.title as string
|
name.value = route.query.name as string
|
itemConfig.value = _.find(configData, { name: name.value }) as Object
|
parameterConfig.value = itemConfig.value.parameter
|
console.log('111', itemConfig.value.parameter.src)
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.content {
|
width: 1270px;
|
padding-right: 15px;
|
padding-left: 15px;
|
margin-right: auto;
|
margin-left: auto;
|
}
|
.breadcrumb {
|
margin: 30px 0;
|
}
|
.location {
|
color: #666;
|
/* /* line-height: 60px; */
|
padding-left: 25px;
|
background: url(../assets//image/location.jpg) left center no-repeat;
|
}
|
.box-card {
|
padding: 30px;
|
}
|
.pro_t1 {
|
color: #333;
|
font-size: 22px;
|
font-weight: bold;
|
padding-bottom: 20px;
|
border-bottom: 1px dashed #e6e6e6;
|
margin: 0 0 10px;
|
}
|
.pro_t2 {
|
margin: 0 0 10px;
|
color: #333;
|
font-size: 12px;
|
margin-top: 15px;
|
}
|
.pro_t3 {
|
margin: 0 0 10px;
|
line-height: 20px;
|
color: #555;
|
font-size: 12px;
|
margin-bottom: 0;
|
}
|
.pro_t4 {
|
margin-top: 15px;
|
}
|
.icon_p {
|
vertical-align: middle;
|
display: inline-block;
|
background: url(../assets/image/phonemin.png) center no-repeat;
|
width: 30px;
|
height: 30px;
|
margin: 0 10px;
|
}
|
.tel_t {
|
font-size: 12px;
|
color: #333;
|
}
|
.tel_n {
|
color: #ff575a;
|
font-style: italic;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
.productInfor {
|
margin: 30px 0 50px 0;
|
}
|
.productInforBox {
|
img {
|
width: 100%;
|
}
|
.productInfor_useInfor {
|
p {
|
margin-bottom: 10px;
|
&:first-child {
|
font-weight: bold;
|
}
|
&:last-child {
|
line-height: 1.5;
|
}
|
}
|
}
|
}
|
.productInfor_nav {
|
li {
|
display: inline-block;
|
padding: 10px 15px;
|
border-right: 1px dashed #ddd;
|
line-height: 1.42857143;
|
cursor: pointer;
|
&:hover {
|
color: #ff575a;
|
}
|
}
|
}
|
.productInfor_content {
|
margin-top: 10px;
|
}
|
|
::v-deep.el-tabs--border-card > .el-tabs__header {
|
background-color: #fff !important;
|
}
|
::v-deep .el-tabs__item {
|
color: #1b242f !important;
|
font-size: 16px;
|
border-right: 1px dashed #ddd !important;
|
}
|
|
/**悬浮 */
|
::v-deep .el-tabs__item:hover {
|
color: #ff575a !important;
|
cursor: pointer;
|
opacity: 1;
|
}
|
|
/**选中 */
|
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
border-top: 3px solid #ff575a !important;
|
color: #ff575a !important;
|
opacity: 1;
|
}
|
</style>
|
