From 375513370cc01fcd976987d07797249600b0bb3e Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 07 八月 2025 17:15:09 +0800
Subject: [PATCH] 'first'
---
src/views/home/detail.vue | 430 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 430 insertions(+), 0 deletions(-)
diff --git a/src/views/home/detail.vue b/src/views/home/detail.vue
new file mode 100644
index 0000000..e365343
--- /dev/null
+++ b/src/views/home/detail.vue
@@ -0,0 +1,430 @@
+<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>
--
Gitblit v1.9.1