|
|
@@ -32,8 +32,8 @@
|
|
|
<div class="base-data">
|
|
|
<div class="base-item" v-for="item in photoBaseData" :key="item.label">
|
|
|
<template v-if="item.value">
|
|
|
- <span class="label">{{ item.label }}</span>
|
|
|
- <div class="value">{{ item.value }}</div>
|
|
|
+ <span class="label">{{ item.label }}</span>
|
|
|
+ <div class="value">{{ item.value }}</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -58,10 +58,10 @@
|
|
|
@click="toggleAcitve(item.name)"
|
|
|
:class="{ active: activeOuput === item.name }"
|
|
|
>
|
|
|
- <template v-if="item.value">
|
|
|
- <div class="item-name">{{ item.name }}</div>
|
|
|
- <div class="item-val">{{ item.value }}</div>
|
|
|
- </template>
|
|
|
+ <template v-if="item.value">
|
|
|
+ <div class="item-name">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.value }}</div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -69,20 +69,63 @@
|
|
|
<div class="overview-file">
|
|
|
<div class="box-title">质量详情</div>
|
|
|
<div class="box-wrap">
|
|
|
- <div
|
|
|
+ <div
|
|
|
class="box-item"
|
|
|
v-for="(item, index) in qualityBox"
|
|
|
:key="index"
|
|
|
@click="toggleAcitve(item.name)"
|
|
|
:class="{ active: activeOuput === item.name }"
|
|
|
>
|
|
|
- <template v-if="item.value">
|
|
|
- <div class="item-name">{{ item.name }}</div>
|
|
|
- <div class="item-val">{{ item.value }}</div>
|
|
|
- </template>
|
|
|
+ <template v-if="item.value">
|
|
|
+ <div class="item-name">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.value }}</div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-popover placement="top-end" :width="350" trigger="click" effect="dark">
|
|
|
+ <template #reference>
|
|
|
+ <div class="feedback-btn">意见反馈</div>
|
|
|
+ </template>
|
|
|
+ <div class="feedback-cont">
|
|
|
+ <div class="tips">请选择您发现的实际情况：</div>
|
|
|
+ <div class="tab-group" v-for="(item, index) in tabList" :key="index">
|
|
|
+ <div class="tab-title">
|
|
|
+ <div class="text">
|
|
|
+ <div class="line"></div>
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="toggle" @click="handleToogle(index)" v-if="item.list.length > 3">
|
|
|
+ <span>{{ item.toggle ? "展开更多" : "收起" }}</span>
|
|
|
+ <el-icon v-show="item.toggle"><ArrowDown /></el-icon>
|
|
|
+ <el-icon v-show="!item.toggle"><ArrowUp /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-list" :style="{ height: item.toggle ? '46px' : '93px' }">
|
|
|
+ <div
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: ele.active }"
|
|
|
+ v-for="(ele, idx) in item.list"
|
|
|
+ @click="handleActiveFeed(index, idx)"
|
|
|
+ :key="idx"
|
|
|
+ >
|
|
|
+ {{ ele.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ class="feedback-input"
|
|
|
+ :autosize="{ maxRows: 3 }"
|
|
|
+ type="textarea"
|
|
|
+ v-model="remarkVal"
|
|
|
+ size="large"
|
|
|
+ placeholder="备注：请写下具体内容吧～"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="feedback-btn" @click="handleSubmit">提交反馈</div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -94,12 +137,13 @@ import "./cacheImg.js";
|
|
|
import AlbumCarouselItem from "./albumCarouselItem";
|
|
|
import { dateFormat } from "@/utils/date_util.js";
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
|
|
|
const lock = ref(false);
|
|
|
const farmId = ref(766);
|
|
|
const nameRef = ref("");
|
|
|
|
|
|
-const isLoadingImg = ref(true)
|
|
|
+const isLoadingImg = ref(true);
|
|
|
const images = ref(null);
|
|
|
const dialogVisible = ref(false);
|
|
|
// 获取当前日期
|
|
|
@@ -112,14 +156,83 @@ startDate.setMonth(currentDate.getMonth() - 1);
|
|
|
const formattedStartDate = dateFormat(startDate, "YY-mm-dd");
|
|
|
const formattedEndDate = dateFormat(currentDate, "YY-mm-dd");
|
|
|
|
|
|
-eventBus.on("change:watermark",function(name){
|
|
|
- nameRef.value = name
|
|
|
-})
|
|
|
+eventBus.on("change:watermark", function (name) {
|
|
|
+ nameRef.value = name;
|
|
|
+});
|
|
|
|
|
|
const outputBox = ref([]);
|
|
|
const qualityBox = ref([]);
|
|
|
const photoBaseData = ref([]);
|
|
|
|
|
|
+const remarkVal = ref("");
|
|
|
+const input = ref("");
|
|
|
+const tabList = ref([
|
|
|
+ {
|
|
|
+ title: "病害",
|
|
|
+ toggle: true,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: "叶瘿蚊",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "卷叶蛾",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "毛毡病",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "炭疽病",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "蒂蛀虫",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "虫害",
|
|
|
+ toggle: true,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: "蝽象",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "其它",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "物候期",
|
|
|
+ toggle: true,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: "蝽象",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "其它",
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]);
|
|
|
+const handleToogle = (index) => {
|
|
|
+ tabList.value[index].toggle = !tabList.value[index].toggle;
|
|
|
+};
|
|
|
+const handleActiveFeed = (index, idx) => {
|
|
|
+ tabList.value[index].list[idx].active = !tabList.value[index].list[idx].active;
|
|
|
+};
|
|
|
+const handleSubmit = () => {
|
|
|
+ ElMessage.success("感谢您的反馈");
|
|
|
+ input.value = "";
|
|
|
+ showFeedback.value = false;
|
|
|
+};
|
|
|
|
|
|
function resetData() {
|
|
|
outputBox.value = [
|
|
|
@@ -152,35 +265,35 @@ function resetData() {
|
|
|
];
|
|
|
}
|
|
|
|
|
|
-const showTag = ref(false)
|
|
|
-eventBus.on("click:point",function({farmId,sampleId, data}){
|
|
|
- sampleId = data.id;
|
|
|
- getSampleFiles(data.geoHashSample);
|
|
|
- photoBaseData.value[0].value = data.pz;
|
|
|
- isLoadingImg.value = true
|
|
|
- let startDate = new Date(currentDate);
|
|
|
- startDate.setFullYear(currentDate.getFullYear() - 2);
|
|
|
+const showTag = ref(false);
|
|
|
+eventBus.on("click:point", function ({ farmId, sampleId, data }) {
|
|
|
+ sampleId = data.id;
|
|
|
+ getSampleFiles(data.geoHashSample);
|
|
|
+ photoBaseData.value[0].value = data.pz;
|
|
|
+ isLoadingImg.value = true;
|
|
|
+ let startDate = new Date(currentDate);
|
|
|
+ startDate.setFullYear(currentDate.getFullYear() - 2);
|
|
|
|
|
|
-// 格式化日期
|
|
|
- let params = {sampleId,farmId,startDate:dateFormat(startDate, "YY-mm-dd")}
|
|
|
- VE_API.miniimage.list(params).then(res => {
|
|
|
- if(res.code === 0){
|
|
|
- dialogVisible.value = true
|
|
|
- images.value = res.data
|
|
|
- isLoadingImg.value = false
|
|
|
- }
|
|
|
- })
|
|
|
- showTag.value = data.nonghu == 1 ? true : false
|
|
|
-// photoBaseData.value[0].value = data.pz;
|
|
|
-// photoBaseData.value[1].value = data?.sgbmj ? data?.sgbmj + "平方米" : "--";
|
|
|
-// photoBaseData.value[2].value = data?.zzts ? data.zzts + "" : "--";
|
|
|
-// photoBaseData.value[3].value = data?.sl ? data?.sl + "年" : "--";
|
|
|
-// outputBox.value[0].value = data?.cl ? (data.cl + "斤") : "--";
|
|
|
-// outputBox.value[1].value = data?.spgl? (data.spgl + "%") : "--";
|
|
|
-// qualityBox.value[0].value = data?.tfl? (data.tfl + "%") : "--";
|
|
|
-// qualityBox.value[1].value = data?.tgl? (data.tgl + "%") : "--";
|
|
|
-// qualityBox.value[2].value = data?.dxtj? (data.dxtj + "%") : "--";
|
|
|
-})
|
|
|
+ // 格式化日期
|
|
|
+ let params = { sampleId, farmId, startDate: dateFormat(startDate, "YY-mm-dd") };
|
|
|
+ VE_API.miniimage.list(params).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ images.value = res.data;
|
|
|
+ isLoadingImg.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ showTag.value = data.nonghu == 1 ? true : false;
|
|
|
+ // photoBaseData.value[0].value = data.pz;
|
|
|
+ // photoBaseData.value[1].value = data?.sgbmj ? data?.sgbmj + "平方米" : "--";
|
|
|
+ // photoBaseData.value[2].value = data?.zzts ? data.zzts + "" : "--";
|
|
|
+ // photoBaseData.value[3].value = data?.sl ? data?.sl + "年" : "--";
|
|
|
+ // outputBox.value[0].value = data?.cl ? (data.cl + "斤") : "--";
|
|
|
+ // outputBox.value[1].value = data?.spgl? (data.spgl + "%") : "--";
|
|
|
+ // qualityBox.value[0].value = data?.tfl? (data.tfl + "%") : "--";
|
|
|
+ // qualityBox.value[1].value = data?.tgl? (data.tgl + "%") : "--";
|
|
|
+ // qualityBox.value[2].value = data?.dxtj? (data.dxtj + "%") : "--";
|
|
|
+});
|
|
|
|
|
|
eventBus.off("albumCarousel", toggleActiveImg);
|
|
|
eventBus.on("albumCarousel", toggleActiveImg);
|
|
|
@@ -191,65 +304,68 @@ function toggleActiveImg(index) {
|
|
|
}
|
|
|
|
|
|
const getSampleFiles = (geoHash) => {
|
|
|
- resetData()
|
|
|
+ resetData();
|
|
|
const farmId = sessionStorage.getItem("farmId");
|
|
|
- VE_API.mini_farm.getSampleFiles({ geoHashSample: geoHash,farmId }).then(({data,extData}) => {
|
|
|
+ VE_API.mini_farm.getSampleFiles({ geoHashSample: geoHash, farmId }).then(({ data, extData }) => {
|
|
|
photoBaseData.value[0].value = data.meta_info.type_id;
|
|
|
let i = 1;
|
|
|
- for(let key of Object.keys(data.meta_info)){
|
|
|
- let dict = extData.find((item) => item.field == key)
|
|
|
- if(dict){
|
|
|
- photoBaseData.value[i].label = dict.label
|
|
|
- if(dict.field === "crown"){
|
|
|
- photoBaseData.value[i].value = data.meta_info[dict.field]
|
|
|
- let pj = Math.sqrt(photoBaseData.value[i].value * 1.2).toFixed(1);
|
|
|
- photoBaseData.value[i].value = photoBaseData.value[i].value.toFixed(1) + dict.unit + "(蓬径"+pj+"米)";
|
|
|
- }else{
|
|
|
- photoBaseData.value[i].value = data.meta_info[dict.field] + dict.unit
|
|
|
+ for (let key of Object.keys(data.meta_info)) {
|
|
|
+ let dict = extData.find((item) => item.field == key);
|
|
|
+ if (dict) {
|
|
|
+ photoBaseData.value[i].label = dict.label;
|
|
|
+ if (dict.field === "crown") {
|
|
|
+ photoBaseData.value[i].value = data.meta_info[dict.field];
|
|
|
+ let pj = Math.sqrt(photoBaseData.value[i].value * 1.2).toFixed(1);
|
|
|
+ photoBaseData.value[i].value =
|
|
|
+ photoBaseData.value[i].value.toFixed(1) + dict.unit + "(蓬径" + pj + "米)";
|
|
|
+ } else {
|
|
|
+ photoBaseData.value[i].value = data.meta_info[dict.field] + dict.unit;
|
|
|
+ }
|
|
|
+ i++;
|
|
|
}
|
|
|
- i++;
|
|
|
- }
|
|
|
}
|
|
|
i = 0;
|
|
|
- for(let key of Object.keys(data.production_info)){
|
|
|
- let dict = extData.find((item) => item.field == key)
|
|
|
- if(dict){
|
|
|
- outputBox.value[i].name = dict.label
|
|
|
- if(dict.label === "产量估计"){
|
|
|
- data.production_info[dict.field] = data.production_info[dict.field] < 50 ? (data.production_info[dict.field] * 3).toFixed(0) : data.production_info[dict.field]
|
|
|
+ for (let key of Object.keys(data.production_info)) {
|
|
|
+ let dict = extData.find((item) => item.field == key);
|
|
|
+ if (dict) {
|
|
|
+ outputBox.value[i].name = dict.label;
|
|
|
+ if (dict.label === "产量估计") {
|
|
|
+ data.production_info[dict.field] =
|
|
|
+ data.production_info[dict.field] < 50
|
|
|
+ ? (data.production_info[dict.field] * 3).toFixed(0)
|
|
|
+ : data.production_info[dict.field];
|
|
|
+ }
|
|
|
+ outputBox.value[i].value = data.production_info[dict.field] + dict.unit;
|
|
|
+ i++;
|
|
|
}
|
|
|
- outputBox.value[i].value = data.production_info[dict.field] + dict.unit
|
|
|
- i++;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
i = 0;
|
|
|
- for(let key of Object.keys(data.ecology_info)){
|
|
|
- let dict = extData.find((item) => item.field == key)
|
|
|
- if(dict){
|
|
|
- qualityBox.value[i].name = dict.label
|
|
|
- qualityBox.value[i].value = data.ecology_info[dict.field] + dict.unit
|
|
|
- i++;
|
|
|
- }
|
|
|
+ for (let key of Object.keys(data.ecology_info)) {
|
|
|
+ let dict = extData.find((item) => item.field == key);
|
|
|
+ if (dict) {
|
|
|
+ qualityBox.value[i].name = dict.label;
|
|
|
+ qualityBox.value[i].value = data.ecology_info[dict.field] + dict.unit;
|
|
|
+ i++;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- photoList.value[0].key = data.meta_info.dp_alert_info.key
|
|
|
- photoList.value[0].statement = data.meta_info.dp_alert_info.statement
|
|
|
- photoList.value[1].key = data.meta_info.grow_alert_info.key
|
|
|
- photoList.value[1].statement = data.meta_info.grow_alert_info.statement
|
|
|
- photoList.value[2].key = data.meta_info.nutrition_info.key
|
|
|
- photoList.value[2].statement = data.meta_info.nutrition_info.statement
|
|
|
- photoList.value[3].key = data.meta_info.prescription_info.key
|
|
|
- photoList.value[3].statement = data.meta_info.prescription_info.statement
|
|
|
+ photoList.value[0].key = data.meta_info.dp_alert_info.key;
|
|
|
+ photoList.value[0].statement = data.meta_info.dp_alert_info.statement;
|
|
|
+ photoList.value[1].key = data.meta_info.grow_alert_info.key;
|
|
|
+ photoList.value[1].statement = data.meta_info.grow_alert_info.statement;
|
|
|
+ photoList.value[2].key = data.meta_info.nutrition_info.key;
|
|
|
+ photoList.value[2].statement = data.meta_info.nutrition_info.statement;
|
|
|
+ photoList.value[3].key = data.meta_info.prescription_info.key;
|
|
|
+ photoList.value[3].statement = data.meta_info.prescription_info.statement;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-
|
|
|
const photoList = ref([
|
|
|
- {key: "病虫", statement: "--"},
|
|
|
- {key: "异常", statement: "--"},
|
|
|
- {key: "营养", statement: "--"},
|
|
|
- {key: "农事", statement: "--"},
|
|
|
+ { key: "病虫", statement: "--" },
|
|
|
+ { key: "异常", statement: "--" },
|
|
|
+ { key: "营养", statement: "--" },
|
|
|
+ { key: "农事", statement: "--" },
|
|
|
]);
|
|
|
|
|
|
const activeOuput = ref(null);
|
|
|
@@ -258,28 +374,26 @@ const activeOuput = ref(null);
|
|
|
function toggleAcitve(name) {
|
|
|
activeOuput.value = name;
|
|
|
if (name.indexOf("开花") > -1) {
|
|
|
- eventBus.emit("change:watermark", "开花目标框")
|
|
|
+ eventBus.emit("change:watermark", "开花目标框");
|
|
|
} else if (name.indexOf("花穗") > -1) {
|
|
|
- eventBus.emit("change:watermark", "花穗目标框")
|
|
|
+ eventBus.emit("change:watermark", "花穗目标框");
|
|
|
} else if (name.indexOf("雄花") > -1) {
|
|
|
- eventBus.emit("change:watermark", "雄花目标框")
|
|
|
+ eventBus.emit("change:watermark", "雄花目标框");
|
|
|
} else if (name.indexOf("枝条数") > -1) {
|
|
|
- eventBus.emit("change:watermark", "")
|
|
|
+ eventBus.emit("change:watermark", "");
|
|
|
} else {
|
|
|
- eventBus.emit("change:watermark", "")
|
|
|
+ eventBus.emit("change:watermark", "");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function closeDialog() {
|
|
|
- activeOuput.value = null
|
|
|
- eventBus.emit("change:watermark", "")
|
|
|
- eventBus.emit("resetImgIndex")
|
|
|
+ activeOuput.value = null;
|
|
|
+ eventBus.emit("change:watermark", "");
|
|
|
+ eventBus.emit("resetImgIndex");
|
|
|
}
|
|
|
|
|
|
// 质量详情
|
|
|
-function toggleQualityAcitve() {
|
|
|
-
|
|
|
-}
|
|
|
+function toggleQualityAcitve() {}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -301,7 +415,7 @@ function toggleQualityAcitve() {
|
|
|
align-items: center;
|
|
|
|
|
|
.tag {
|
|
|
- border: 1px solid #FFD489;
|
|
|
+ border: 1px solid #ffd489;
|
|
|
border-radius: 4px;
|
|
|
font-size: 12px;
|
|
|
display: inline-block;
|
|
|
@@ -314,11 +428,11 @@ function toggleQualityAcitve() {
|
|
|
}
|
|
|
}
|
|
|
.overview-file {
|
|
|
- padding-top: 20px;
|
|
|
+ padding-top: 12px;
|
|
|
.box-title {
|
|
|
font-size: 16px;
|
|
|
padding-left: 13px;
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -392,12 +506,21 @@ function toggleQualityAcitve() {
|
|
|
}
|
|
|
}
|
|
|
.overview-file + .overview-file {
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .feedback-btn {
|
|
|
+ margin: 16px auto 10px auto;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 5px 26px;
|
|
|
+ width: fit-content;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.box-wrap {
|
|
|
display: flex;
|
|
|
.box-item {
|
|
|
- min-width: 140px;
|
|
|
+ min-width: 110px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -438,4 +561,97 @@ function toggleQualityAcitve() {
|
|
|
.picture-preview-wrap {
|
|
|
background: none;
|
|
|
}
|
|
|
+
|
|
|
+.feedback-cont {
|
|
|
+ background: #303030;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 4px 0px;
|
|
|
+ color: #ffffff;
|
|
|
+ .tips {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .tab-group {
|
|
|
+ margin-top: 12px;
|
|
|
+ .tab-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .text {
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .line {
|
|
|
+ width: 3px;
|
|
|
+ height: 12px;
|
|
|
+ background: #999999;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .toggle {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 8px;
|
|
|
+ height: 46px;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s;
|
|
|
+ .tab-item {
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(233, 233, 233, 0.1);
|
|
|
+ font-size: 14px;
|
|
|
+ height: 37px;
|
|
|
+ line-height: 37px;
|
|
|
+ width: 31%;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &.active {
|
|
|
+ background: #ffd489;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-item + .tab-item {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .tab-item:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .tab-item:first-child {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 1px solid rgba(180, 180, 180, 0.3);
|
|
|
+ }
|
|
|
+ .feedback-input {
|
|
|
+ padding: 10px 0;
|
|
|
+ .el-input__wrapper, .el-textarea__inner {
|
|
|
+ box-shadow: 0 0 0 1px #cacaca inset;
|
|
|
+ background: none;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .feedback-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px;
|
|
|
+ background-image: linear-gradient(140deg, #ffd887, #ed9e1e);
|
|
|
+ border-radius: 25px;
|
|
|
+ color: #fff;
|
|
|
+ width: 66%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px auto 0 auto;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
