|
|
@@ -1,70 +1,75 @@
|
|
|
<template>
|
|
|
<div class="record-page" ref="containerRef">
|
|
|
- <div class="page-l">
|
|
|
- <el-affix :offset="42">
|
|
|
- <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
- <el-anchor-link
|
|
|
- v-for="(item, index) in farmWorkList"
|
|
|
- :key="index"
|
|
|
- :href="'#part' + index"
|
|
|
- :title="item.farmWorkLibName"
|
|
|
- >
|
|
|
- <div class="menu-item">
|
|
|
- <img
|
|
|
- class="menu-icon"
|
|
|
- :src="require('@/assets/images/records/icon-' + (index+1) + '.png')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span>{{ item.farmWorkLibName }}</span>
|
|
|
- </div>
|
|
|
- </el-anchor-link>
|
|
|
- </el-anchor>
|
|
|
- </el-affix>
|
|
|
+ <div class="tips">
|
|
|
+ <el-icon class="icon" size="24" color="#2199F8"><WarningFilled /></el-icon>
|
|
|
+ <div>飞鸟提醒 您有 <span>1张</span> 农事照片未上传！农事将激活不了！用户将收不到农事消息哦~</div>
|
|
|
</div>
|
|
|
- <div class="page-r">
|
|
|
- <div v-for="(card, cardI) in farmWorkList" :key="cardI" class="done-card">
|
|
|
- <div class="id-positon" :id="'part' + cardI"></div>
|
|
|
- <div class="card-wrap">
|
|
|
- <!-- :class="{
|
|
|
- noCarousel: card.execute !== 0 && card.execute !== 2,
|
|
|
- done: card.execute === 4 || card.execute === 5,
|
|
|
- }" -->
|
|
|
- <div class="card-content">
|
|
|
- <!-- :class="{
|
|
|
- push: card.execute === 3,
|
|
|
- hasBg: (card.execute === 0 || card.execute === 2) && !card.hasBg,
|
|
|
- }" -->
|
|
|
- <div class="card-top">
|
|
|
- <div class="card-title serve-title">
|
|
|
- <div class="title-name">{{ card.farmWorkLibName }}</div>
|
|
|
+ <div class="page-content">
|
|
|
+ <div class="page-l">
|
|
|
+ <el-affix :offset="120">
|
|
|
+ <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
+ <el-anchor-link
|
|
|
+ v-for="(item, index) in farmWorkList"
|
|
|
+ :key="index"
|
|
|
+ :href="'#part' + index"
|
|
|
+ :title="item.farmWorkLibName"
|
|
|
+ >
|
|
|
+ <div class="menu-item">
|
|
|
+ <img
|
|
|
+ class="menu-icon"
|
|
|
+ :src="require('@/assets/images/records/icon-' + (index + 1) + '.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>{{ item.farmWorkLibName }}</span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div class="card-desc">
|
|
|
- <span class="desc-title">物候进程：</span>
|
|
|
- {{ card.whjc }}
|
|
|
- </div>
|
|
|
- <div class="card-desc">
|
|
|
- <span class="desc-title">执行时间：</span>
|
|
|
- {{ card.executeDate }}
|
|
|
- </div>
|
|
|
- <div class="card-desc">
|
|
|
- <span class="desc-title">生态理念：</span>
|
|
|
- {{ card.stln }}
|
|
|
+ </el-anchor-link>
|
|
|
+ </el-anchor>
|
|
|
+ </el-affix>
|
|
|
+ </div>
|
|
|
+ <div class="page-r">
|
|
|
+ <div v-for="(card, cardI) in farmWorkList" :key="cardI" class="done-card">
|
|
|
+ <div class="id-positon" :id="'part' + cardI"></div>
|
|
|
+ <div class="card-wrap">
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-top">
|
|
|
+ <div class="card-title serve-title">
|
|
|
+ <div class="title-name">
|
|
|
+ <span>{{ card.farmWorkLibName }}</span>
|
|
|
+ <div class="edit-btn" @click="handleEdit">
|
|
|
+ <el-icon><Edit /></el-icon>
|
|
|
+ <span>编辑</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-desc condition-wrap">
|
|
|
- <div class="desc-title">农事目的：</div>
|
|
|
- <div>
|
|
|
- {{ card.targetText }}
|
|
|
+ <div>
|
|
|
+ <div class="card-desc">
|
|
|
+ <span class="desc-title">物候进程：</span>
|
|
|
+ {{ card.whjc }}
|
|
|
+ </div>
|
|
|
+ <div class="card-desc">
|
|
|
+ <span class="desc-title">执行时间：</span>
|
|
|
+ {{ card.executeDate }}
|
|
|
+ </div>
|
|
|
+ <div class="card-desc">
|
|
|
+ <span class="desc-title">生态理念：</span>
|
|
|
+ {{ card.stln }}
|
|
|
+ </div>
|
|
|
+ <div class="card-desc condition-wrap">
|
|
|
+ <div class="desc-title">农事目的：</div>
|
|
|
+ <div>
|
|
|
+ {{ card.targetText }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-imgs" v-if="card?.images">
|
|
|
+ <img-swipe :key="cardI" :imgsData="card.images"></img-swipe>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="card-imgs" v-if="card?.images">
|
|
|
- <img-swipe :key="cardI" :imgsData="card.images"></img-swipe>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="card-link">
|
|
|
- <!-- <img class="expert-img" :src="card.expertPic||require('@/assets/img/guard_tree/logo.png')" /> -->
|
|
|
- <div class="expert-name">
|
|
|
- {{ card.expertName }}
|
|
|
+ <div class="card-link">
|
|
|
+ <img class="expert-img" :src="card.expertPic" />
|
|
|
+ <img class="expert-icon" src="@/assets/images/home/expert-icon.png" alt="" />
|
|
|
+ <div class="expert-name">
|
|
|
+ {{ card.expertName }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -73,12 +78,95 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 编辑弹窗 -->
|
|
|
+ <el-dialog v-model="dialogVisible" title="编辑农事" align-center width="50%" :before-close="handleClose">
|
|
|
+ <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="90px">
|
|
|
+ <el-form-item label="农场名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="生态理念" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农事目的" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="指导专家" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="执行时间" prop="time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="ruleForm.time"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农事照片" prop="photo">
|
|
|
+ <upload></upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="resetForm(ruleFormRef)">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm(ruleFormRef)"> 确认修改 </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from "vue";
|
|
|
-// import imgSwipe from "./imgSwipe.vue";
|
|
|
+import { onMounted, reactive, ref } from "vue";
|
|
|
+import imgSwipe from "./imgSwipe.vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
+import upload from "@/components/common/upload.vue";
|
|
|
+import eventBus from "@/api/eventBus";
|
|
|
+
|
|
|
+const disabledDate = (time) => {
|
|
|
+ return time.getTime() > Date.now();
|
|
|
+};
|
|
|
+
|
|
|
+const ruleFormRef = ref(null);
|
|
|
+const ruleForm = reactive({
|
|
|
+ name: "柏桥村",
|
|
|
+ time: new Date(),
|
|
|
+ photo:[]
|
|
|
+});
|
|
|
+
|
|
|
+function uploadCallback(e){
|
|
|
+ ruleForm.photo = e
|
|
|
+}
|
|
|
+
|
|
|
+const submitForm = async (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log("submit!");
|
|
|
+ resetForm(formEl);
|
|
|
+ } else {
|
|
|
+ console.log("error submit!", fields);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ eventBus.emit("upload:reset");
|
|
|
+ dialogVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const rules = reactive({
|
|
|
+ time: { required: true, message: "请选择日期", trigger: "blur" },
|
|
|
+ photo: { required: true, message: "请上传照片", trigger: "blur" },
|
|
|
+});
|
|
|
+
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const handleEdit = () => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+};
|
|
|
+const handleClose = () => {
|
|
|
+ resetForm(ruleFormRef.value);
|
|
|
+};
|
|
|
|
|
|
const route = useRoute();
|
|
|
const containerRef = ref(null);
|
|
|
@@ -93,15 +181,17 @@ const handleClick = (e) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const farmId = ref(null)
|
|
|
+const farmId = ref(null);
|
|
|
onMounted(() => {
|
|
|
- getData()
|
|
|
-})
|
|
|
+ getData();
|
|
|
+ eventBus.off('upload:change',uploadCallback)
|
|
|
+ eventBus.on('upload:change',uploadCallback)
|
|
|
+});
|
|
|
|
|
|
function getData() {
|
|
|
- VE_API.home.getFarmBuyAutoList({farmId:766}).then(({data}) => {
|
|
|
- farmWorkList.value = data
|
|
|
- })
|
|
|
+ VE_API.home.getFarmBuyAutoList({ farmId: 766 }).then(({ data }) => {
|
|
|
+ farmWorkList.value = data;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
const farmWorkList = ref([]);
|
|
|
@@ -113,15 +203,32 @@ const farmWorkList = ref([]);
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
overflow: auto;
|
|
|
- display: flex;
|
|
|
- background: #F5F7FB;
|
|
|
+ .tips {
|
|
|
+ color: #000;
|
|
|
+ border: 1px solid rgba(33, 153, 248, 0.74);
|
|
|
+ padding: 12px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .icon {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
::v-deep {
|
|
|
- .header {
|
|
|
- position: fixed;
|
|
|
- }
|
|
|
.el-affix {
|
|
|
- width: fit-content;
|
|
|
+ background: #f2f2f4;
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ width: 90px !important;
|
|
|
+ & > div {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.el-anchor.el-anchor--vertical .el-anchor__list {
|
|
|
padding-left: 0;
|
|
|
@@ -151,286 +258,326 @@ const farmWorkList = ref([]);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .page-l {
|
|
|
+ .page-content {
|
|
|
+ padding-top: 10px;
|
|
|
height: 100%;
|
|
|
- width: 90px;
|
|
|
- background: #f2f3f5;
|
|
|
- .menu-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
- padding-left: 10px;
|
|
|
- .menu-icon {
|
|
|
- width: 14px;
|
|
|
- padding-right: 4px;
|
|
|
+ display: flex;
|
|
|
+ .page-l {
|
|
|
+ height: 100%;
|
|
|
+ width: 90px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 0 10px 10px 0;
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: start;
|
|
|
+ padding-left: 10px;
|
|
|
+ .menu-icon {
|
|
|
+ width: 14px;
|
|
|
+ padding-right: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .page-r {
|
|
|
- width: calc(100% - 90px - 22px);
|
|
|
- height: 100%;
|
|
|
- margin: 0 12px 10px 10px;
|
|
|
- .done-card {
|
|
|
- margin-bottom: 10px;
|
|
|
- .id-positon {
|
|
|
- position: relative;
|
|
|
- top: -44px;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- .card-wrap {
|
|
|
- padding-bottom: 30px;
|
|
|
+ .page-r {
|
|
|
+ width: calc(100% - 90px - 20px);
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 10px 10px 10px;
|
|
|
+ .done-card {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .id-positon {
|
|
|
+ position: relative;
|
|
|
+ top: -44px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ .card-wrap {
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .card-content {
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 0 8px 8px 8px;
|
|
|
- // border: 1px solid #2199f8;
|
|
|
- &.push {
|
|
|
- padding: 0 8px 12px 8px;
|
|
|
- }
|
|
|
- &.hasBg {
|
|
|
- padding: 0 8px 12px 8px;
|
|
|
+ .card-content {
|
|
|
background: #fff;
|
|
|
- border: 1px solid rgba(102, 102, 102, 0.38);
|
|
|
- .card-top {
|
|
|
- border-bottom: none;
|
|
|
- padding-bottom: 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 0 8px 8px 8px;
|
|
|
+ // border: 1px solid #2199f8;
|
|
|
+ &.push {
|
|
|
+ padding: 0 8px 12px 8px;
|
|
|
}
|
|
|
- }
|
|
|
- .card-top {
|
|
|
- position: relative;
|
|
|
- &.noChart {
|
|
|
- border-bottom: 0;
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
- .card-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 8px;
|
|
|
- .serve-btn {
|
|
|
- padding: 3px 10px;
|
|
|
- background: #2199f8;
|
|
|
- border-radius: 22px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .title-name {
|
|
|
- color: #000000;
|
|
|
- font-size: 16px;
|
|
|
- padding-right: 8px;
|
|
|
- font-weight: 600;
|
|
|
+ &.hasBg {
|
|
|
+ padding: 0 8px 12px 8px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid rgba(102, 102, 102, 0.38);
|
|
|
+ .card-top {
|
|
|
+ border-bottom: none;
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
+ }
|
|
|
+ .card-top {
|
|
|
+ position: relative;
|
|
|
+ &.noChart {
|
|
|
+ border-bottom: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
|
-
|
|
|
- .status-tag {
|
|
|
- color: #f3a302;
|
|
|
- font-size: 12px;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 2px;
|
|
|
- background: rgba(243, 163, 2, 0.2);
|
|
|
- margin-right: 10px;
|
|
|
- &.blue {
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.2);
|
|
|
+ .card-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ .serve-btn {
|
|
|
+ padding: 3px 10px;
|
|
|
+ background: #2199f8;
|
|
|
+ border-radius: 22px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- &.good-wrap {
|
|
|
- margin-left: 4px;
|
|
|
+ .title-name {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-right: 8px;
|
|
|
+ font-weight: 600;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .good {
|
|
|
- margin-left: 3px;
|
|
|
- width: 13px;
|
|
|
+ .edit-btn {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ font-weight: 400;
|
|
|
+ background: #2199f8;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- &.standard {
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.2);
|
|
|
- }
|
|
|
- &.advice {
|
|
|
- color: rgba(252, 167, 3, 0.9);
|
|
|
- background: rgba(255, 220, 104, 0.38);
|
|
|
- }
|
|
|
- &.warning {
|
|
|
- color: #ff4221;
|
|
|
- background: rgba(255, 175, 160, 0.24);
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
}
|
|
|
- }
|
|
|
- &.serve-title {
|
|
|
- padding: 12px 0 8px 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- .add-btn {
|
|
|
- position: absolute;
|
|
|
- right: -9px;
|
|
|
- top: -1px;
|
|
|
- background: #2199f8;
|
|
|
- color: #fff;
|
|
|
+
|
|
|
+ .status-tag {
|
|
|
+ color: #f3a302;
|
|
|
font-size: 12px;
|
|
|
- border-radius: 0 8px 0 8px;
|
|
|
padding: 2px 6px;
|
|
|
- &.unactive {
|
|
|
- background: #c3c3c3;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: rgba(243, 163, 2, 0.2);
|
|
|
+ margin-right: 10px;
|
|
|
+ &.blue {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
+ }
|
|
|
+ &.good-wrap {
|
|
|
+ margin-left: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .good {
|
|
|
+ margin-left: 3px;
|
|
|
+ width: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.standard {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
}
|
|
|
- &.recheck {
|
|
|
- background: #f3c11d;
|
|
|
+ &.advice {
|
|
|
+ color: rgba(252, 167, 3, 0.9);
|
|
|
+ background: rgba(255, 220, 104, 0.38);
|
|
|
+ }
|
|
|
+ &.warning {
|
|
|
+ color: #ff4221;
|
|
|
+ background: rgba(255, 175, 160, 0.24);
|
|
|
}
|
|
|
}
|
|
|
- .tag {
|
|
|
+ &.serve-title {
|
|
|
+ padding: 12px 0 8px 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- color: #ff7000;
|
|
|
- font-size: 10px;
|
|
|
- .desc {
|
|
|
- position: relative;
|
|
|
- left: -4px;
|
|
|
+ position: relative;
|
|
|
+ .add-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: -9px;
|
|
|
+ top: -1px;
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 0 8px 0 8px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ &.unactive {
|
|
|
+ background: #c3c3c3;
|
|
|
+ }
|
|
|
+ &.recheck {
|
|
|
+ background: #f3c11d;
|
|
|
+ }
|
|
|
}
|
|
|
- .photo-grid {
|
|
|
+ .tag {
|
|
|
display: flex;
|
|
|
- .photo {
|
|
|
+ align-items: center;
|
|
|
+ color: #ff7000;
|
|
|
+ font-size: 10px;
|
|
|
+ .desc {
|
|
|
position: relative;
|
|
|
- img {
|
|
|
- width: 18px; /* 示例宽度，你可以根据需要调整 */
|
|
|
- height: 18px;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 50%;
|
|
|
- display: block; /* 去除图片底部的空白间隙 */
|
|
|
+ left: -4px;
|
|
|
+ }
|
|
|
+ .photo-grid {
|
|
|
+ display: flex;
|
|
|
+ .photo {
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 18px; /* 示例宽度，你可以根据需要调整 */
|
|
|
+ height: 18px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block; /* 去除图片底部的空白间隙 */
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .card-desc {
|
|
|
- color: #666666;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 18.2px;
|
|
|
- &.van-ellipsis {
|
|
|
- max-width: 142px;
|
|
|
- }
|
|
|
- &.last-desc {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .desc-title {
|
|
|
- color: #b6b6b6;
|
|
|
- }
|
|
|
- &.condition-wrap {
|
|
|
- display: flex;
|
|
|
+ .card-desc {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18.2px;
|
|
|
+ &.van-ellipsis {
|
|
|
+ max-width: 142px;
|
|
|
+ }
|
|
|
+ &.last-desc {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
.desc-title {
|
|
|
- flex: none;
|
|
|
+ color: #b6b6b6;
|
|
|
}
|
|
|
- }
|
|
|
- .rescription-wrap {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .detail-text {
|
|
|
+ &.condition-wrap {
|
|
|
+ display: flex;
|
|
|
+ .desc-title {
|
|
|
+ flex: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rescription-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .detail-text {
|
|
|
+ color: #2199f8;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rescription {
|
|
|
+ max-width: 170px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .expert-link {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
color: #2199f8;
|
|
|
- padding-left: 6px;
|
|
|
+ .icon {
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .rescription {
|
|
|
- max-width: 170px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ .step-box {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 15px;
|
|
|
}
|
|
|
- .expert-link {
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- color: #2199f8;
|
|
|
- .icon {
|
|
|
- padding-left: 4px;
|
|
|
+ .card-tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #f5bc00;
|
|
|
+ padding: 3px;
|
|
|
+ background: rgba(243, 193, 29, 0.13);
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 8px 0;
|
|
|
+ &.check {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ padding: 5px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ .icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .step-box {
|
|
|
- position: absolute;
|
|
|
- right: 0px;
|
|
|
- top: 15px;
|
|
|
- }
|
|
|
- .card-tips {
|
|
|
- font-size: 12px;
|
|
|
- color: #f5bc00;
|
|
|
- padding: 3px;
|
|
|
- background: rgba(243, 193, 29, 0.13);
|
|
|
- border-radius: 5px;
|
|
|
- text-align: center;
|
|
|
- margin: 8px 0;
|
|
|
- &.check {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- padding: 5px;
|
|
|
- margin-bottom: 0;
|
|
|
- .icon {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 15px;
|
|
|
+ .card-tips-btn {
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .card-tips-btn {
|
|
|
- .text {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- span {
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #2199f8;
|
|
|
}
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 5px;
|
|
|
- background: #2199f8;
|
|
|
- }
|
|
|
- .card-imgs {
|
|
|
- padding: 10px 0 4px 0;
|
|
|
- }
|
|
|
- .tree-img {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- .card-link {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #2199f8;
|
|
|
- font-size: 12px;
|
|
|
- position: absolute;
|
|
|
- right: 6px;
|
|
|
- top: 10px;
|
|
|
- .expert-name {
|
|
|
- background: #d3e8ff;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 2px 6px 3px 10px;
|
|
|
- margin-top: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .card-imgs {
|
|
|
+ padding: 10px 0 4px 0;
|
|
|
}
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
+ .tree-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
object-fit: cover;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
- .icon {
|
|
|
- padding-right: 2px;
|
|
|
+ .card-link {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 12px;
|
|
|
+ position: absolute;
|
|
|
+ right: 6px;
|
|
|
+ top: 10px;
|
|
|
+ .expert-name {
|
|
|
+ background: #d3e8ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 2px 6px 3px 10px;
|
|
|
+ margin-top: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .expert-img {
|
|
|
+ width: 43px;
|
|
|
+ height: 43px;
|
|
|
+ border-radius: 50%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .expert-icon {
|
|
|
+ width: 21px;
|
|
|
+ height: 21px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ padding-right: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+::v-deep {
|
|
|
+ .el-date-editor.el-input,
|
|
|
+ .el-date-editor.el-input__wrapper {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
</style>
|
wangsisi
