|
|
@@ -0,0 +1,690 @@
|
|
|
+<template>
|
|
|
+ <div class="base-container">
|
|
|
+ <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-header">
|
|
|
+ <div class="btn" @click="goBack">
|
|
|
+ <img src="@/assets/images/common/back-icon.png" alt="" />
|
|
|
+ 返回
|
|
|
+ </div>
|
|
|
+ <div class="tabs-group">
|
|
|
+ <div class="tabs-item" v-for="item in 5" :key="item">农事名称0{{item}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-body">
|
|
|
+ <div class="content-left">
|
|
|
+ <chart-box class="left-cont" name="农事成效" color="yellow">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-item">
|
|
|
+ <div class="box-title">基本信息</div>
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="info-l">
|
|
|
+ <img class="farm-img" src="@/assets/img/gallery/farm-img.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="info-r">
|
|
|
+ <div class="farm-name">荔博园</div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-name">农事名称：</div>
|
|
|
+ <div class="info-value">
|
|
|
+ {{ workItem.farmWorkName }} ({{ workItem.executeDate }})
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-name">农事目的：</div>
|
|
|
+ <div class="info-value">{{ workItem.purpose }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-name">肥药处方：</div>
|
|
|
+ <div class="info-value">
|
|
|
+ <div class="rescription">
|
|
|
+ <span
|
|
|
+ v-for="(
|
|
|
+ fertilizer, fertilizerI
|
|
|
+ ) in workItem.pesticideFertilizerList"
|
|
|
+ :key="fertilizerI"
|
|
|
+ >
|
|
|
+ {{ fertilizer.ratio ? fertilizer.ratio + "倍" : "" }}
|
|
|
+ {{ fertilizer.name }}
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ fertilizerI !==
|
|
|
+ workItem.pesticideFertilizerList.length - 1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ +
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-item">
|
|
|
+ <div class="box-title">主体信息</div>
|
|
|
+ <div class="subject-box">
|
|
|
+ <div class="subject-item">
|
|
|
+ <img class="subject-img" src="@/assets/img/gallery/capital.png" alt="" />
|
|
|
+ <div class="subject-tag">
|
|
|
+ 大禹农资
|
|
|
+ <el-icon class="right-icon" size="14"><ArrowRightBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="subject-item">
|
|
|
+ <img class="subject-img" src="@/assets/img/gallery/capital.png" alt="" />
|
|
|
+ <div class="subject-tag">
|
|
|
+ 北极农服
|
|
|
+ <el-icon class="right-icon" size="14"><ArrowRightBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="subject-item">
|
|
|
+ <img class="subject-img" src="@/assets/img/gallery/capital.png" alt="" />
|
|
|
+ <div class="subject-tag">
|
|
|
+ 韦帮稳
|
|
|
+ <el-icon class="right-icon" size="14"><ArrowRightBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-item">
|
|
|
+ <div class="box-title">复核成效</div>
|
|
|
+ <div class="result-text">
|
|
|
+ 通过精准农业技术的应用，作物产量实现了两位数的增长，<span>病虫害</span>的发生率大幅下降，<span>土壤肥力</span>的提升通过精准农业技术的应用，<span>作物产量</span>实现了两位数的增长，<span>病虫害</span>的发生率大幅下降，<span>土壤肥力</span>的提升
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="button defalut-btn">联系专家</div>
|
|
|
+ <div class="button" @click="handleOk">加入标准体系</div>
|
|
|
+ </div>
|
|
|
+ </chart-box>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="box-item box-none">
|
|
|
+ <div class="box-title border-none">复核图片</div>
|
|
|
+ <div class="img-list">
|
|
|
+ <div class="img-item">
|
|
|
+ <!-- 图片列表 -->
|
|
|
+ <AlbumCarousel
|
|
|
+ temp="执行前"
|
|
|
+ :key="1"
|
|
|
+ :farmId="766"
|
|
|
+ :sampleId="110725"
|
|
|
+ :lock="false"
|
|
|
+ :farmWork="{ beforeExecuteDate: '2025-02-20', executeDate: '2025-02-25' }"
|
|
|
+ ></AlbumCarousel>
|
|
|
+ </div>
|
|
|
+ <div class="img-item">
|
|
|
+ <AlbumCarousel
|
|
|
+ temp="执行前"
|
|
|
+ :key="2"
|
|
|
+ :farmId="766"
|
|
|
+ :sampleId="110725"
|
|
|
+ :lock="false"
|
|
|
+ :farmWork="{ beforeExecuteDate: '2025-02-15', executeDate: '2025-02-20' }"
|
|
|
+ ></AlbumCarousel>
|
|
|
+ </div>
|
|
|
+ <div class="img-item">
|
|
|
+ <AlbumCarousel
|
|
|
+ temp="执行后"
|
|
|
+ :key="3"
|
|
|
+ :farmId="766"
|
|
|
+ :sampleId="110725"
|
|
|
+ :lock="false"
|
|
|
+ :farmWork="{ beforeExecuteDate: '2025-02-10', executeDate: '2025-02-15' }"
|
|
|
+ ></AlbumCarousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-item box-none">
|
|
|
+ <div class="box-title border-none">用户评价</div>
|
|
|
+ <div class="box-evaluate">
|
|
|
+ <div class="comment" v-for="item in 3" :key="item">
|
|
|
+ <div class="user-info">
|
|
|
+ <el-avatar
|
|
|
+ class="avatar"
|
|
|
+ :size="40"
|
|
|
+ src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
|
|
+ />
|
|
|
+ <div class="user-name">翰有月</div>
|
|
|
+ </div>
|
|
|
+ <div class="rate">
|
|
|
+ <div class="rate-item">
|
|
|
+ <span class="name">农资</span>
|
|
|
+ <el-rate v-model="value" size="small" />
|
|
|
+ </div>
|
|
|
+ <div class="rate-item">
|
|
|
+ <span class="name">农服</span>
|
|
|
+ <el-rate v-model="value" size="small" />
|
|
|
+ </div>
|
|
|
+ <div class="rate-item">
|
|
|
+ <span class="name">专家</span>
|
|
|
+ <el-rate v-model="value" size="small" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-text class="text" line-clamp="2" size="16px">
|
|
|
+ 这里是用户的评级内容，有点长，省略100个字。这里是用户的评级内容，有点长，省略100个字。这里是用户的评级内容，有点长，省略100个字。这里是用户的评级内容，有点长，省略100个字。
|
|
|
+ </el-text>
|
|
|
+ <span class="date">2025.1.20</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import fnHeader from "@/components/fnHeader.vue";
|
|
|
+import AlbumCarousel from "@/views/home/album/album_compoents/albumCarousel";
|
|
|
+import chartBox from "@/components/chartBox.vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import { useStore } from "vuex";
|
|
|
+let store = useStore();
|
|
|
+
|
|
|
+const workItem = {
|
|
|
+ id: "214936",
|
|
|
+ serviceRegion: "广州市从化区荔枝博览园",
|
|
|
+ orderId: "685852811698638848",
|
|
|
+ area: 593,
|
|
|
+ expert: 81653,
|
|
|
+ orderStatus: 0,
|
|
|
+ farmId: 766,
|
|
|
+ regionId: null,
|
|
|
+ speciesId: "1",
|
|
|
+ speciesName: "荔枝",
|
|
|
+ agriculturalId: 1,
|
|
|
+ farmWorkId: "15",
|
|
|
+ farmWorkLibId: "15",
|
|
|
+ farmWorkLibName: "膨果营养",
|
|
|
+ farmWorkName: "膨果营养",
|
|
|
+ expertIcon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/75e8fb25a1418291e648d35acf1ca41.png",
|
|
|
+ expertName: "韦老师",
|
|
|
+ icon: 1,
|
|
|
+ indexChart: [
|
|
|
+ {
|
|
|
+ date: "5/1",
|
|
|
+ name: "",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "5/5",
|
|
|
+ name: "",
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "5/11",
|
|
|
+ name: "",
|
|
|
+ value: 14,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "5/15",
|
|
|
+ name: "",
|
|
|
+ value: 24,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ indexName: "",
|
|
|
+ beforeExecuteDate: null,
|
|
|
+ executeDate: "2025-05-05",
|
|
|
+ indexJson:
|
|
|
+ '[{"date":"5/1","value":3.0},{"date":"5/5","value":4.0},{"date":"5/11","value":14.0},{"date":"5/15","value":24.0}]',
|
|
|
+ code: "GF-PG",
|
|
|
+ expertPrescription: "",
|
|
|
+ condition: "单树膨果率5%",
|
|
|
+ solarName: "5月上旬",
|
|
|
+ reCheck: 0,
|
|
|
+ executeBlueZones: [],
|
|
|
+ menu: 1,
|
|
|
+ num: null,
|
|
|
+ purpose: "施足营养，促进膨果转色",
|
|
|
+ farmWorkType: 2,
|
|
|
+ farmWorkTypeName: "营养",
|
|
|
+ type: 1,
|
|
|
+ execute: 3,
|
|
|
+ updateDate0: null,
|
|
|
+ updateDate1: null,
|
|
|
+ updateDate2: null,
|
|
|
+ updateDate3: null,
|
|
|
+ updateDate4: null,
|
|
|
+ updateDate5: null,
|
|
|
+ serviceMain: "大荔农业",
|
|
|
+ executeMain: "大荔农业",
|
|
|
+ weatherWarningMsg: "荔枝普遍处于花穗期，近期温度较过去一周快速下降，有花穗生长停滞风险\r\n",
|
|
|
+ userEvaluation: null,
|
|
|
+ users: [
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ orderId: null,
|
|
|
+ serviceType: null,
|
|
|
+ userType: 1,
|
|
|
+ userId: 81669,
|
|
|
+ joinStatus: null,
|
|
|
+ icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/23.png",
|
|
|
+ userName: "用户81669",
|
|
|
+ area: "",
|
|
|
+ point: "POINT(113.52575791849408 23.830400966597722)",
|
|
|
+ farmName: "农场1011",
|
|
|
+ selected: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ orderId: null,
|
|
|
+ serviceType: null,
|
|
|
+ userType: 1,
|
|
|
+ userId: 81653,
|
|
|
+ joinStatus: null,
|
|
|
+ icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/75e8fb25a1418291e648d35acf1ca41.png",
|
|
|
+ userName: "韦老师",
|
|
|
+ area: "5.51",
|
|
|
+ point: "POINT(113.68851269297058 23.786884947916857)",
|
|
|
+ farmName: "farm_01",
|
|
|
+ selected: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ orderId: null,
|
|
|
+ serviceType: 1,
|
|
|
+ userType: 2,
|
|
|
+ userId: 81881,
|
|
|
+ joinStatus: null,
|
|
|
+ icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/lz_logo.png",
|
|
|
+ userName: "飞鸟种植助手",
|
|
|
+ area: "",
|
|
|
+ point: "POINT(113.30139794715421 23.511158355652277)",
|
|
|
+ farmName: "农场11-523",
|
|
|
+ selected: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ orderId: null,
|
|
|
+ serviceType: null,
|
|
|
+ userType: 1,
|
|
|
+ userId: 81663,
|
|
|
+ joinStatus: null,
|
|
|
+ icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/bbs/icon/8.png",
|
|
|
+ userName: "用户81663",
|
|
|
+ area: "6.35",
|
|
|
+ point: "POINT(114.37672046161343 23.45379334952031)",
|
|
|
+ farmName: "农场11",
|
|
|
+ selected: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ prescriptionList: [
|
|
|
+ {
|
|
|
+ name: "营养",
|
|
|
+ pesticideFertilizerList: [
|
|
|
+ {
|
|
|
+ defaultDroneRatio: null,
|
|
|
+ defaultName: "高钾复合肥",
|
|
|
+ defaultRatio: null,
|
|
|
+ id: null,
|
|
|
+ muPrice: null,
|
|
|
+ muUsage: null,
|
|
|
+ muUsage2: null,
|
|
|
+ ratio: null,
|
|
|
+ ratio2: null,
|
|
|
+ remark: "",
|
|
|
+ usageMode: "根部施",
|
|
|
+ usageModeList: [],
|
|
|
+ orderId: null,
|
|
|
+ pesticideFertilizerCode: "",
|
|
|
+ pesticideFertilizerId: "35",
|
|
|
+ pesticideFertilizerName: "高钾复合肥",
|
|
|
+ brand: "",
|
|
|
+ typeName: "",
|
|
|
+ price: null,
|
|
|
+ unit: "",
|
|
|
+ executeStyle: null,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ usageMode: "根部施",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pesticideFertilizerList: [
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ name: "高钾复合肥 1kg/棵",
|
|
|
+ pesticideFertilizerCode: "35",
|
|
|
+ ratio: null,
|
|
|
+ count: null,
|
|
|
+ typeName: "营养",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pesticideFertilizers: [
|
|
|
+ {
|
|
|
+ defaultDroneRatio: null,
|
|
|
+ defaultName: "高钾复合肥",
|
|
|
+ defaultRatio: null,
|
|
|
+ id: "685852812344561664",
|
|
|
+ muPrice: null,
|
|
|
+ muUsage: null,
|
|
|
+ muUsage2: null,
|
|
|
+ ratio: null,
|
|
|
+ ratio2: null,
|
|
|
+ remark: "",
|
|
|
+ usageMode: "根部施",
|
|
|
+ usageModeList: ["根部施"],
|
|
|
+ orderId: "685852811698638848",
|
|
|
+ pesticideFertilizerCode: "",
|
|
|
+ pesticideFertilizerId: "35",
|
|
|
+ pesticideFertilizerName: "高钾复合肥 1kg/棵",
|
|
|
+ brand: "",
|
|
|
+ typeName: "营养",
|
|
|
+ price: null,
|
|
|
+ unit: "kg",
|
|
|
+ executeStyle: null,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+const value = ref(4);
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+});
|
|
|
+
|
|
|
+const getList = () => {
|
|
|
+ console.log("000");
|
|
|
+};
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ router.go(-1);
|
|
|
+};
|
|
|
+
|
|
|
+//确定/下发农事
|
|
|
+const handleOk = () => {};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.base-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 1;
|
|
|
+ background: #000;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 74px);
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .box-item {
|
|
|
+ background: rgba(255, 255, 255, 0.04);
|
|
|
+ border: 1px solid #444444;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ &.box-none {
|
|
|
+ border: none;
|
|
|
+ background: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .box-title {
|
|
|
+ font-size: 20px;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+ padding: 0 0 12px 13px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ &.border-none {
|
|
|
+ padding-bottom: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 6px;
|
|
|
+ width: 3px;
|
|
|
+ height: 16px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-item + .box-item {
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.78);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 9px;
|
|
|
+ width: 104px;
|
|
|
+ margin-right: 48px;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-group{
|
|
|
+ width: calc(100% - 104px - 48px);
|
|
|
+ display: flex;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #cecece;
|
|
|
+ border-bottom: 1px solid #444444;
|
|
|
+ .tabs-item{
|
|
|
+ padding: 0 14px 14px 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .tabs-item + .tabs-item{
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-body {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px - 24px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content-left {
|
|
|
+ width: 473px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 58px);
|
|
|
+ padding: 16px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-cont {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .info-box {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 5px;
|
|
|
+ align-items: center;
|
|
|
+ .info-l {
|
|
|
+ .farm-img {
|
|
|
+ width: 100px;
|
|
|
+ width: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ object-fit: scale-down;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-r {
|
|
|
+ padding-left: 12px;
|
|
|
+ }
|
|
|
+ .farm-name {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ }
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ font-size: 15px;
|
|
|
+ .info-name {
|
|
|
+ color: #727272;
|
|
|
+ flex: none;
|
|
|
+ }
|
|
|
+ .info-value {
|
|
|
+ color: #cecece;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-item + .info-item {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subject-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .subject-item {
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 33%;
|
|
|
+ .subject-img {
|
|
|
+ width: 67px;
|
|
|
+ height: 67px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ }
|
|
|
+ .subject-tag {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 2px 8px 3px 8px;
|
|
|
+ background: #ffd489;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: -5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subject-item + .subject-item {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .result-text {
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 22px;
|
|
|
+ span {
|
|
|
+ color: #ffd489;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-right {
|
|
|
+ width: calc(100% - 473px - 18px);
|
|
|
+ margin-left: 18px;
|
|
|
+ height: 100%;
|
|
|
+ background: #191919;
|
|
|
+ border: 0.6px solid #444444;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ .img-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .img-item {
|
|
|
+ width: 32.5%;
|
|
|
+ .carousel-container {
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-item + .img-item {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-evaluate {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .comment {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .user-name {
|
|
|
+ font-weight: 500;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rate {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ ::v-deep {
|
|
|
+ .el-rate {
|
|
|
+ --el-rate-icon-margin: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rate-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 4px 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ .name {
|
|
|
+ margin-right: 2px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #727272;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .comment + .comment {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ width: 100%;
|
|
|
+ height: 58px;
|
|
|
+ border-top: 0.5px solid #555555;
|
|
|
+ background: rgba(255, 255, 255, 0.04);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 8px 58px;
|
|
|
+ background: #ffd489;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #000;
|
|
|
+ margin-right: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .defalut-btn {
|
|
|
+ color: #ffd489;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 8px 20px;
|
|
|
+ background: none;
|
|
|
+ border: 1px solid #ffd489;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi