<template>
|
<div class="detail">
|
<div class="contentBox">
|
<div class="headerBox">
|
<div class="contentBox container">
|
<div class="headerTitle">中药饮片在线学习与机器视觉识别平台</div>
|
<div class="headerNav">
|
<div
|
class="navItem"
|
v-for="(item, index) in navigatorList"
|
:class="{ active: index === 1 }"
|
:key="index"
|
@click="navigatorTo(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="backBtn" @click="$router.go(-1)">{{ "< 返回列表" }}</div>
|
|
<div style="display: flex; justify-content: space-between">
|
<div class="detailContentBox">
|
<div class="cardTitle">
|
<div class="cardTitleText">
|
<div>{{ detailInfo.name }}</div>
|
<div class="shadowText">01</div>
|
</div>
|
<div class="subTitle">{{ detailInfo.Tibetan }}</div>
|
</div>
|
<div
|
style="display: flex; justify-content: space-between; width: 100%"
|
>
|
<div class="detailInfoBox">
|
<div>
|
<div class="arrowBox">
|
<div class="bookmark"></div>
|
<div class="arrow"></div>
|
<div class="pngArrow">
|
<img
|
class="arrowImg"
|
src="@/assets/images/yinpian/home/arrow.png"
|
alt=""
|
/>
|
</div>
|
<div class="pointBox">来源</div>
|
</div>
|
<div class="infoText">
|
{{ detailInfo.base }}
|
</div>
|
</div>
|
<div class="infoItem">
|
<div class="arrowBox">
|
<div class="bookmark"></div>
|
<div class="arrow"></div>
|
<div class="pngArrow">
|
<img
|
class="arrowImg"
|
src="@/assets/images/yinpian/home/arrow.png"
|
alt=""
|
/>
|
</div>
|
<div class="pointBox">产地</div>
|
</div>
|
<div class="infoText">
|
{{ detailInfo.origin }}
|
</div>
|
</div>
|
<div class="infoItem">
|
<div class="arrowBox">
|
<div class="bookmark"></div>
|
<div class="arrow"></div>
|
<div class="pngArrow">
|
<img
|
class="arrowImg"
|
src="@/assets/images/yinpian/home/arrow.png"
|
alt=""
|
/>
|
</div>
|
<div class="pointBox">性状</div>
|
</div>
|
<div class="infoText" v-html="detailInfo.trait"></div>
|
</div>
|
<div class="infoItem">
|
<div class="arrowBox">
|
<div class="bookmark2"></div>
|
<div class="arrow"></div>
|
<div class="pngArrow">
|
<img
|
class="arrowImg2"
|
src="@/assets/images/yinpian/home/arrow.png"
|
alt=""
|
/>
|
</div>
|
<div class="pointBox">药性与功能主治</div>
|
</div>
|
<div
|
class="infoText"
|
v-html="detailInfo.DrugPropertiesAndMainIndications"
|
></div>
|
</div>
|
<div class="infoItem">
|
<div class="arrowBox">
|
<div class="bookmark" style="width: 100px"></div>
|
<div class="arrow"></div>
|
<div class="pngArrow">
|
<img
|
class="arrowImg"
|
src="@/assets/images/yinpian/home/arrow.png"
|
alt=""
|
style="left: -116px"
|
/>
|
</div>
|
<div class="pointBox">藏医应用</div>
|
</div>
|
<div
|
class="infoText"
|
v-html="detailInfo.TibetanMedicineApplication"
|
></div>
|
</div>
|
<div class="sourceInfo">
|
<span>
|
来源：《{{ productInfo.name }}》
|
{{ productInfo.editor }}
|
</span>
|
<span>ISBN:{{ productInfo.isbn }}</span>
|
<span
|
>出版日期：{{
|
moment(productInfo.publicDate).format("YYYY-MM-DD")
|
}}</span
|
>
|
</div>
|
</div>
|
<div class="imgInfo">
|
<div class="imgborder" style="margin-top: 0px">
|
<div class="imgBox">
|
<img
|
class="autoImg"
|
src="@/assets/images/yinpian/home/微信图片_20250806153448_3.png"
|
alt=""
|
/>
|
</div>
|
</div>
|
<div class="imgborder">
|
<div class="imgBox">
|
<img
|
class="autoImg"
|
style="border-radius: 10px"
|
src="@/assets/images/yinpian/home/微信图片_20250806153448_3.png"
|
alt=""
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
detailInfo: {},
|
navigatorList: [
|
{
|
name: "首页",
|
path: "/home",
|
},
|
{
|
name: "中药饮片数据库",
|
path: "/home",
|
},
|
{
|
name: "中药饮片学习系统",
|
path: "/home",
|
},
|
{
|
name: "饮片视觉识别系统",
|
path: "/home",
|
},
|
{
|
name: "关于我们",
|
path: "/home",
|
},
|
],
|
};
|
},
|
|
created() {
|
console.log(this.$route.query);
|
this.getProductDetail();
|
},
|
methods: {
|
navigatorTo(item) {
|
console.log(item);
|
if (item.name == "首页") {
|
this.$router.push("/home");
|
} else {
|
this.$message({
|
message: "建设中...",
|
type: "warning",
|
});
|
}
|
},
|
getProductDetail() {
|
this.MG.store
|
.getProductDetail({
|
path: "*",
|
queryType: "*",
|
productId: this.$route.query.name,
|
cmsPath: this.$route.query.id,
|
itemFields: {
|
DrugPropertiesAndMainIndications: [],
|
Tibetan: [],
|
TibetanMedicineApplication: [],
|
trait: [],
|
base: [],
|
editor: [],
|
isbn: [],
|
origin: [],
|
publicDate: [],
|
},
|
fields: {
|
editor: [],
|
isbn: [],
|
publicDate: [],
|
},
|
})
|
.then((resp) => {
|
this.detailInfo = resp.datas.cmsDatas[0].datas[0];
|
this.detailInfo.trait = this.detailInfo.trait.replace(
|
/<p>/g,
|
"<p style=' line-height:20px'>"
|
);
|
this.detailInfo.DrugPropertiesAndMainIndications = this.detailInfo.DrugPropertiesAndMainIndications.replace(
|
/<p>/g,
|
"<p style=' line-height:20px'>"
|
);
|
this.detailInfo.TibetanMedicineApplication = this.detailInfo.TibetanMedicineApplication.replace(
|
/<p>/g,
|
"<p style=' line-height:20px'>"
|
);
|
this.productInfo = resp.datas;
|
console.log(resp);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.detail {
|
padding-bottom: 100px;
|
background-color: #f1f0da;
|
background-image: url("@/assets/images/yinpian/home/home_bg.png");
|
}
|
.headerBox {
|
width: 100%;
|
height: 76px;
|
border-bottom: 1px solid rgba(56, 91, 83, 0.22);
|
line-height: 76px;
|
}
|
|
.container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.headerTitle {
|
font-size: 24px;
|
font-weight: 600;
|
color: #01644c;
|
}
|
.headerNav {
|
display: flex;
|
.navItem {
|
margin-left: 40px;
|
font-size: 16px;
|
cursor: pointer;
|
font-weight: 700;
|
}
|
}
|
}
|
.active {
|
color: #01644c;
|
}
|
.backBtn {
|
margin-top: 20px;
|
font-size: 16px;
|
cursor: pointer;
|
color: #6c827d;
|
}
|
.detailContentBox {
|
margin-top: 20px;
|
width: 100%;
|
min-height: 500px;
|
background-color: rgba(255, 255, 255, 0.68);
|
border-radius: 10px 10px 10px 10px;
|
border: 1px solid #01644c;
|
padding: 20px 0px;
|
}
|
.cardTitle {
|
display: flex;
|
.cardTitleText {
|
padding: 12px 40px;
|
color: #fff;
|
background-color: #01644c;
|
font-size: 24px;
|
display: flex;
|
position: relative;
|
.shadowText {
|
font-size: 36px;
|
position: absolute;
|
right: 12px;
|
bottom: 8px;
|
opacity: 0.2;
|
}
|
}
|
.subTitle {
|
font-size: 24px;
|
margin-left: 5px;
|
line-height: 48px;
|
color: #026044;
|
}
|
}
|
|
.arrowBox {
|
display: flex;
|
position: relative;
|
}
|
.bookmark {
|
width: 60px;
|
height: 0;
|
border-top: 12px solid transparent;
|
border-bottom: 12px solid transparent;
|
border-left: 12px solid #fff;
|
background-color: #01644c;
|
position: relative;
|
text-align: right;
|
line-height: -40px;
|
}
|
|
.bookmark2 {
|
width: 140px;
|
height: 0;
|
border-top: 12px solid transparent;
|
border-bottom: 12px solid transparent;
|
border-left: 12px solid #fff;
|
background-color: #01644c;
|
position: relative;
|
text-align: right;
|
line-height: -40px;
|
}
|
|
.arrow {
|
width: 0;
|
height: 0;
|
border-top: 12px solid transparent;
|
border-bottom: 12px solid transparent;
|
border-left: 12px solid #01644c;
|
}
|
.detailInfoBox {
|
margin-top: 50px;
|
padding: 20px 30px;
|
width: 50%;
|
}
|
.pngArrow {
|
position: relative;
|
}
|
.arrowImg {
|
position: absolute;
|
top: 1px;
|
left: -76px;
|
width: 22px;
|
height: 22px;
|
}
|
.arrowImg2 {
|
position: absolute;
|
top: 1px;
|
left: -156px;
|
width: 22px;
|
height: 22px;
|
}
|
.pointBox {
|
position: absolute;
|
top: 3px;
|
left: 38px;
|
font-size: 16px;
|
color: #fff;
|
}
|
.infoText {
|
margin-top: 20px;
|
p {
|
line-height: 24px;
|
}
|
}
|
.infoItem {
|
margin-top: 30px;
|
}
|
.sourceInfo {
|
margin-top: 30px;
|
display: flex;
|
justify-content: space-between;
|
color: #6c827d;
|
font-size: 14px;
|
}
|
.imgInfo {
|
width: 40%;
|
}
|
.imgBox {
|
position: relative;
|
width: 332px;
|
height: 264px;
|
}
|
.imgborder {
|
padding: 10px;
|
width: 332px;
|
margin-top: 30px;
|
border: #1a6854 1px solid;
|
border-radius: 10px;
|
}
|
</style>
|
|
<style scoped>
|
p {
|
line-height: 16px !important;
|
}
|
</style>
|
