|
|
@@ -1,154 +1,166 @@
|
|
|
<template>
|
|
|
- <custom-header name="农情互动" bgColor="#f2f4f5"></custom-header>
|
|
|
- <div class="interaction-list" ref="interactionListRef">
|
|
|
- <!-- <div class="tips-text">由于系统审核，您照片拍摄位置与农场相差超 3 公里，请在农场现场使用水印相机重新拍摄上传，谢谢配合</div> -->
|
|
|
- <div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
|
|
|
- :class="{ 'uploaded-item': item.questionStatus !== 3 }">
|
|
|
- <!-- 标题区域 -->
|
|
|
- <div class="item-header-wrapper" :class="{ 'has-status': item.questionStatus !== 3 }">
|
|
|
- <div class="item-header">
|
|
|
- <div class="header-wrapper">
|
|
|
- <div class="title title-block">{{ item.varietyName }}</div>
|
|
|
- <div class="title title-block">{{ item.interactionTypeName }}</div>
|
|
|
+ <custom-header :isClose="showClose" name="农情互动" bgColor="#f2f4f5"></custom-header>
|
|
|
+ <div class="interaction-list-wrapper">
|
|
|
+ <div class="interaction-card" v-if="showClose">
|
|
|
+ <img v-if="listData[0]?.coverUrl" :src="listData[0]?.coverUrl" alt="">
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-title">互动主题：{{ listData[0]?.subjectName }}</div>
|
|
|
+ <div class="card-desc" v-if="listData[0]?.subjectRemark && listData[0]?.subjectRemark !== ''">{{ listData[0].subjectRemark }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="interaction-list" ref="interactionListRef">
|
|
|
+ <!-- <div class="tips-text">由于系统审核，您照片拍摄位置与农场相差超 3 公里，请在农场现场使用水印相机重新拍摄上传，谢谢配合</div> -->
|
|
|
+ <div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
|
|
|
+ :class="{ 'uploaded-item': item.questionStatus !== 3 }">
|
|
|
+ <!-- 标题区域 -->
|
|
|
+ <div class="item-header-wrapper" :class="{ 'has-status': item.questionStatus !== 3 }">
|
|
|
+ <div class="item-header">
|
|
|
+ <div class="header-wrapper">
|
|
|
+ <div class="title title-block">{{ item.varietyName }}</div>
|
|
|
+ <div class="title title-block">{{ item.interactionTypeName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="status title-block" :class="['urgent-' + item.urgent]" v-if="item.questionStatus === 3">
|
|
|
+ {{
|
|
|
+ urgentType[item.urgent] }}</div>
|
|
|
+ <!-- <div class="location-error">
|
|
|
+ <el-icon size="16"><InfoFilled /></el-icon>
|
|
|
+ <span>提交有误</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="upload-status" v-show="item.questionStatus !== 3">
|
|
|
+ <el-icon class="status-icon">
|
|
|
+ <SuccessFilled />
|
|
|
+ </el-icon>
|
|
|
+ <span class="status-text">提交成功</span>
|
|
|
</div>
|
|
|
- <div class="status title-block" :class="['urgent-' + item.urgent]" v-if="item.questionStatus === 3">{{
|
|
|
- urgentType[item.urgent] }}</div>
|
|
|
- <!-- <div class="location-error">
|
|
|
- <el-icon size="16"><InfoFilled /></el-icon>
|
|
|
- <span>提交有误</span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="upload-status" v-show="item.questionStatus !== 3">
|
|
|
- <el-icon class="status-icon">
|
|
|
- <SuccessFilled />
|
|
|
- </el-icon>
|
|
|
- <span class="status-text">提交成功</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 未上传状态内容 -->
|
|
|
- <div class="uploaded-content" v-show="item.questionStatus === 3 || item.expanded">
|
|
|
- <div class="content-wrapper">
|
|
|
- <span>{{ item.remark }}</span>
|
|
|
- <text-ellipsis class="item-desc" rows="0" :content="item.reason" expand-text="展开"
|
|
|
- collapse-text="收起" />
|
|
|
- <div class="tip-box">如果不确定是否发生，直接上传照片即可</div>
|
|
|
- <div class="example-wrapper">
|
|
|
- <div class="example-header">
|
|
|
- <div>示例照片</div>
|
|
|
- <div class="more" v-if="item.exampleImageWithAnnotations.length > 3"
|
|
|
- @click="openMorePopup(item)">查看更多</div>
|
|
|
- </div>
|
|
|
- <div class="example-list" v-if="item.exampleImageWithAnnotations.length > 0">
|
|
|
- <div class="image-item-wrapper"
|
|
|
- v-for="(example, exIndex) in item.exampleImageWithAnnotations"
|
|
|
- :key="example.exampleImageUrl" @click="showExample(item, exIndex)">
|
|
|
- <img class="image-item" :src="example.exampleImageUrl" alt="" />
|
|
|
+ <!-- 未上传状态内容 -->
|
|
|
+ <div class="uploaded-content" v-show="item.questionStatus === 3 || item.expanded">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <span>{{ item.remark }}</span>
|
|
|
+ <text-ellipsis class="item-desc" rows="0" :content="item.reason" expand-text="展开"
|
|
|
+ collapse-text="收起" />
|
|
|
+ <div class="tip-box">如果不确定是否发生，直接上传照片即可</div>
|
|
|
+ <div class="example-wrapper">
|
|
|
+ <div class="example-header">
|
|
|
+ <div>示例照片</div>
|
|
|
+ <div class="more" v-if="item.exampleImageWithAnnotations.length > 3"
|
|
|
+ @click="openMorePopup(item)">查看更多</div>
|
|
|
+ </div>
|
|
|
+ <div class="example-list" v-if="item.exampleImageWithAnnotations.length > 0">
|
|
|
+ <div class="image-item-wrapper"
|
|
|
+ v-for="(example, exIndex) in item.exampleImageWithAnnotations"
|
|
|
+ :key="example.exampleImageUrl" @click="showExample(item, exIndex)">
|
|
|
+ <img class="image-item" :src="example.exampleImageUrl" alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <text-ellipsis class="patrol-suggestion" rows="2" :content="'巡园建议：' + item.patrolSuggestion">
|
|
|
+ <template #action="{ expanded }"><span class="action-text">{{ expanded ? '收起' : '展开'
|
|
|
+ }}</span></template>
|
|
|
+ </text-ellipsis>
|
|
|
</div>
|
|
|
- <text-ellipsis class="patrol-suggestion" rows="2" :content="'巡园建议：' + item.patrolSuggestion">
|
|
|
- <template #action="{ expanded }"><span class="action-text">{{ expanded ? '收起' : '展开'
|
|
|
- }}</span></template>
|
|
|
- </text-ellipsis>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 展开状态内容 -->
|
|
|
- <div class="expanded-content" v-show="item.imagePaths.length > 0">
|
|
|
- <!-- 原因说明 -->
|
|
|
- <div class="reason-text">上传照片（{{ item.imagePaths.length }}张）</div>
|
|
|
- <!-- 图片展示 -->
|
|
|
- <div class="uploaded-images">
|
|
|
- <div class="uploaded-img-wrap" v-for="(image, imgIndex) in item.imagePaths" :key="image"
|
|
|
- @click="showExample(item, imgIndex, { hideLabel: true })">
|
|
|
- <img class="uploaded-img" :src="base_img_url2 + image" alt="" />
|
|
|
- <span v-show="item.questionStatus === 3" class="uploaded-img-remove"
|
|
|
- @click.stop="removeUploadedImage(item, imgIndex)">×</span>
|
|
|
+ <!-- 展开状态内容 -->
|
|
|
+ <div class="expanded-content" v-show="item.imagePaths.length > 0">
|
|
|
+ <!-- 原因说明 -->
|
|
|
+ <div class="reason-text">上传照片（{{ item.imagePaths.length }}张）</div>
|
|
|
+ <!-- 图片展示 -->
|
|
|
+ <div class="uploaded-images">
|
|
|
+ <div class="uploaded-img-wrap" v-for="(image, imgIndex) in item.imagePaths" :key="image"
|
|
|
+ @click="showExample(item, imgIndex, { hideLabel: true })">
|
|
|
+ <img class="uploaded-img" :src="base_img_url2 + image" alt="" />
|
|
|
+ <span v-show="item.questionStatus === 3" class="uploaded-img-remove"
|
|
|
+ @click.stop="removeUploadedImage(item, imgIndex)">×</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <uploader v-show="item.questionStatus === 3" class="upload-wrap continue-upload-btn"
|
|
|
+ @click="handleUploadClick(item)" multiple :max-count="10" :after-read="afterReadUpload">
|
|
|
+ <div class="upload-btn">
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <span>继续上传照片</span>
|
|
|
+ </div>
|
|
|
+ </uploader>
|
|
|
</div>
|
|
|
- <uploader v-show="item.questionStatus === 3" class="upload-wrap continue-upload-btn"
|
|
|
- @click="handleUploadClick(item)" multiple :max-count="10" :after-read="afterReadUpload">
|
|
|
+
|
|
|
+ <!-- 上传按钮 -->
|
|
|
+ <uploader v-if="item.imagePaths.length === 0 && item.questionStatus === 3"
|
|
|
+ @click="handleUploadClick(item)" class="upload-wrap" multiple :max-count="10"
|
|
|
+ :after-read="afterReadUpload">
|
|
|
<div class="upload-btn">
|
|
|
<el-icon>
|
|
|
<Plus />
|
|
|
</el-icon>
|
|
|
- <span>继续上传照片</span>
|
|
|
+ <span>点击上传照片</span>
|
|
|
</div>
|
|
|
</uploader>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 上传按钮 -->
|
|
|
- <uploader v-if="item.imagePaths.length === 0 && item.questionStatus === 3"
|
|
|
- @click="handleUploadClick(item)" class="upload-wrap" multiple :max-count="10"
|
|
|
- :after-read="afterReadUpload">
|
|
|
- <div class="upload-btn">
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- <span>点击上传照片</span>
|
|
|
- </div>
|
|
|
- </uploader>
|
|
|
-
|
|
|
- <div class="question-wrapper" v-if="item.imagePaths.length">
|
|
|
- <div class="question-cont">
|
|
|
- <div class="question-text"
|
|
|
- v-for="(q, qIdx) in (item.questionList || [item.question].filter(Boolean))" :key="qIdx">
|
|
|
- <span class="text-title">{{ q }}</span>
|
|
|
- <el-input v-model="item.answerValues[qIdx]" :disabled="item.questionStatus !== 3"
|
|
|
- type="number" style="width: 70px">
|
|
|
- <template #suffix>
|
|
|
- <span class="text-unit">{{ item.indicators[qIdx]?.unit ?? item.indicators[0]?.unit
|
|
|
- ?? '%' }}</span>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
+ <div class="question-wrapper" v-if="item.imagePaths.length">
|
|
|
+ <div class="question-cont">
|
|
|
+ <div class="question-text"
|
|
|
+ v-for="(q, qIdx) in (item.questionList || [item.question].filter(Boolean))" :key="qIdx">
|
|
|
+ <span class="text-title">{{ q }}</span>
|
|
|
+ <el-input v-model="item.answerValues[qIdx]" :disabled="item.questionStatus !== 3"
|
|
|
+ type="number" style="width: 70px">
|
|
|
+ <template #suffix>
|
|
|
+ <span class="text-unit">{{ item.indicators[qIdx]?.unit ?? item.indicators[0]?.unit
|
|
|
+ ?? '%' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="draw-region-btn" v-if="item.interactionTypeId != 1 && item.questionStatus === 3"
|
|
|
+ @click="handleDrawRegion(item)">
|
|
|
+ 编辑发生区域</div>
|
|
|
+ <div class="draw-region-btn" v-if="item.rangeWkt && item.questionStatus !== 3"
|
|
|
+ @click="handleViewRegion(item)">
|
|
|
+ 查看发生区域</div>
|
|
|
</div>
|
|
|
- <div class="draw-region-btn" v-if="item.interactionTypeId != 1 && item.questionStatus === 3"
|
|
|
- @click="handleDrawRegion(item)">
|
|
|
- 编辑发生区域</div>
|
|
|
- <div class="draw-region-btn" v-if="item.rangeWkt && item.questionStatus !== 3"
|
|
|
- @click="handleViewRegion(item)">
|
|
|
- 查看发生区域</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 输入框 -->
|
|
|
- <div class="input-wrapper">
|
|
|
- <el-input v-model="item.replyText" :disabled="item.questionStatus !== 3" placeholder="请输入您咨询的问题"
|
|
|
- clearable />
|
|
|
- </div>
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <div class="input-wrapper">
|
|
|
+ <el-input v-model="item.replyText" :disabled="item.questionStatus !== 3" placeholder="请输入您咨询的问题"
|
|
|
+ clearable />
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 按钮区域 -->
|
|
|
- <div class="button-group" v-show="item.questionStatus === 3">
|
|
|
- <div class="btn-not-reached" @click="handleConfirm(item, false)">{{ item.cancelButtonName }}</div>
|
|
|
- <div class="btn-default" :class="{ 'btn-confirm': item.imagePaths.length > 0 }"
|
|
|
- @click="handleConfirm(item, true)">
|
|
|
- 确认提交
|
|
|
+ <!-- 按钮区域 -->
|
|
|
+ <div class="button-group" v-show="item.questionStatus === 3">
|
|
|
+ <div class="btn-not-reached" @click="handleConfirm(item, false)">{{ item.cancelButtonName }}</div>
|
|
|
+ <div class="btn-default" :class="{ 'btn-confirm': item.imagePaths.length > 0 }"
|
|
|
+ @click="handleConfirm(item, true)">
|
|
|
+ 确认提交
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="invite-btn" v-if="item.imagePaths.length === 0 && item.questionStatus === 3">邀请农情互动</div>
|
|
|
- </div>
|
|
|
+ <div class="invite-btn" v-if="item.imagePaths.length === 0 && item.questionStatus === 3 && !showClose"
|
|
|
+ @click="handleInvite(item)">
|
|
|
+ 邀请农情互动</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 比例信息（已上传状态显示） -->
|
|
|
- <div class="proportion-info" v-show="item.questionStatus !== 3"
|
|
|
- :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }">
|
|
|
- <template v-if="!item.expanded">
|
|
|
- <span class="proportion-text">{{(item.questionList && item.questionList.length
|
|
|
- ? item.questionList.map((q, i) => q + '：' + (item.answerValues[i] ?? '') +
|
|
|
- (item.indicators[i]?.unit
|
|
|
- ?? item.indicators[0]?.unit ?? '%')).join('')
|
|
|
- : item.question + '：' + (item.answerValues[0] ?? '') + (item.indicators[0]?.unit ?? '%'))
|
|
|
- }}</span>
|
|
|
- </template>
|
|
|
- <div class="toggle-btn" @click="toggleExpand(item)">
|
|
|
- <span>{{ item.expanded ? "收起" : "展开" }}</span>
|
|
|
- <el-icon :class="{ rotate: !item.expanded }">
|
|
|
- <CaretTop />
|
|
|
- </el-icon>
|
|
|
+ <!-- 比例信息（已上传状态显示） -->
|
|
|
+ <div class="proportion-info" v-show="item.questionStatus !== 3"
|
|
|
+ :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }">
|
|
|
+ <template v-if="!item.expanded">
|
|
|
+ <span class="proportion-text">{{(item.questionList && item.questionList.length
|
|
|
+ ? item.questionList.map((q, i) => q + '：' + (item.answerValues[i] ?? '') +
|
|
|
+ (item.indicators[i]?.unit
|
|
|
+ ?? item.indicators[0]?.unit ?? '%')).join('')
|
|
|
+ : item.question + '：' + (item.answerValues[0] ?? '') + (item.indicators[0]?.unit ?? '%'))
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ <div class="toggle-btn" @click="toggleExpand(item)">
|
|
|
+ <span>{{ item.expanded ? "收起" : "展开" }}</span>
|
|
|
+ <el-icon :class="{ rotate: !item.expanded }">
|
|
|
+ <CaretTop />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
|
|
|
</div>
|
|
|
- <div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="custom-bottom-fixed-btns" :class="{ 'center-btn': false }">
|
|
|
@@ -158,7 +170,7 @@
|
|
|
</div> -->
|
|
|
|
|
|
<!-- 农场信息完善弹窗 -->
|
|
|
- <farm-info-popup :oldUser="oldUser" :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
|
|
|
+ <farm-info-popup :oldUser="oldUser" :expertMiniUserId="route.query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
|
|
|
<!-- 无人机/飞行航线咨询弹窗 -->
|
|
|
<drone-consult-popup v-model:show="showDroneConsultPopup" @copy="onCopyWechatId" />
|
|
|
|
|
|
@@ -218,6 +230,7 @@ import { useRouter, useRoute } from "vue-router";
|
|
|
import { base_img_url2 } from "@/api/config";
|
|
|
import DrawRegionMap from "./map/drawRegionMap.js";
|
|
|
import UploadFile from "@/utils/upliadFile";
|
|
|
+import wx from "weixin-js-sdk";
|
|
|
import { getFileExt } from "@/utils/util";
|
|
|
import MorePopup from "./components/morePopup.vue";
|
|
|
import UploadTips from "@/components/popup/uploadTips.vue";
|
|
|
@@ -238,8 +251,8 @@ const handleShowDroneConsultPopup = () => {
|
|
|
const showFarmInfoPopup = ref(false);
|
|
|
const loading = ref(false);
|
|
|
const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
const listData = ref([]);
|
|
|
-const query = ref(useRoute().query);
|
|
|
const morePopupRef = ref(null);
|
|
|
//照片上传进度
|
|
|
const showUploadProgressPopup = ref(false);
|
|
|
@@ -479,7 +492,7 @@ const showExample = (item, index, options = {}) => {
|
|
|
const loadData = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
- const { data } = await VE_API.home.listTriggeredByFarm({ farmId: query.value.farmId, regionId: query.value.regionId, interactionTypeId: query.value.interactionTypeId })
|
|
|
+ const { data } = await VE_API.home.listTriggeredByFarm({ farmId: miniData.value.farmId, regionId: miniData.value.regionId, interactionTypeId: miniData.value.interactionTypeId })
|
|
|
listData.value = data.map(item => {
|
|
|
// question 按 || 切割成数组，用于循环渲染
|
|
|
const questionStr = item.question != null ? String(item.question) : '';
|
|
|
@@ -536,7 +549,7 @@ const handleConfirm = async (item, isConfirm) => {
|
|
|
}
|
|
|
}
|
|
|
const parmas = {
|
|
|
- farmId: query.value.farmId,
|
|
|
+ farmId: miniData.value.farmId,
|
|
|
imagePaths: item.imagePaths.concat(uploadData.value),
|
|
|
isUploadPhoto: item.imagePaths.concat(uploadData.value).length > 0 ? true : false,
|
|
|
rangeWkt: sessionStorage.getItem("drawRegionPolygonData") || '',
|
|
|
@@ -578,7 +591,7 @@ const handleConfirmUpload = async () => {
|
|
|
const answerVals = (item.answerValues || []).slice(0, len);
|
|
|
const parmas = {
|
|
|
interactionId: item.id,
|
|
|
- farmId: query.value.farmId,
|
|
|
+ farmId: miniData.value.farmId,
|
|
|
imagePaths: uploadData.value,
|
|
|
rangeWkt: sessionStorage.getItem("drawRegionPolygonData") || '',
|
|
|
replyText: item.replyText,
|
|
|
@@ -608,6 +621,26 @@ const handleViewRegion = (item) => {
|
|
|
router.push(`/draw_region?viewOnly=1&rangeWkt=${encodeURIComponent(item.rangeWkt)}&updatedTime=${item.updatedTime.slice(0, 10)}`);
|
|
|
}
|
|
|
|
|
|
+const showClose = ref(false);
|
|
|
+
|
|
|
+const handleInvite = (item) => {
|
|
|
+ const query = {
|
|
|
+ askInfo: { title: "农情互动", content: "是否分享该农情互动给好友" },
|
|
|
+ shareText: "邀请您农情互动，精准匹配种植方案",
|
|
|
+ targetUrl: `interaction_list`,
|
|
|
+ paramsPage: JSON.stringify({
|
|
|
+ farmId: miniData.value.farmId,
|
|
|
+ regionId: item.regionId,
|
|
|
+ interactionTypeId: item.interactionTypeId,
|
|
|
+ showClose: true
|
|
|
+ }),
|
|
|
+ imageUrl: 'https://birdseye-img.sysuimars.com/feiniaomini/1.png',
|
|
|
+ };
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
const handleDrawRegion = (item) => {
|
|
|
if (sessionStorage.getItem("drawRegionInteractionId") != item.id) {
|
|
|
sessionStorage.removeItem("drawRegionPolygonData");
|
|
|
@@ -663,8 +696,16 @@ const onCopyWechatId = () => {
|
|
|
};
|
|
|
|
|
|
const oldUser = ref(false);
|
|
|
+const miniData = ref({});
|
|
|
// 页面从勾画页返回时，如果组件被 keep-alive 缓存，则会触发 onActivated，在此再做一次回显
|
|
|
onActivated(() => {
|
|
|
+ if(route.query.miniJson) {
|
|
|
+ const data = JSON.parse(route.query.miniJson);
|
|
|
+ miniData.value = JSON.parse(data.paramsPage);
|
|
|
+ }else{
|
|
|
+ miniData.value = route.query;
|
|
|
+ }
|
|
|
+ showClose.value = miniData.value?.showClose ? true : false;
|
|
|
if (!localStorage.getItem('showUploadTipsPopup')) {
|
|
|
showUploadTipsPopup.value = true;
|
|
|
setTimeout(() => {
|
|
|
@@ -689,7 +730,7 @@ onActivated(() => {
|
|
|
}, 0);
|
|
|
}
|
|
|
}
|
|
|
- oldUser.value = query.value.oldUser && Boolean(query.value.oldUser);
|
|
|
+ oldUser.value = route.query.oldUser && Boolean(route.query.oldUser);
|
|
|
if (oldUser.value) {
|
|
|
showFarmInfoPopup.value = true;
|
|
|
}
|
|
|
@@ -708,392 +749,421 @@ const handleSubmitAll = () => {
|
|
|
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
-.interaction-list {
|
|
|
+.interaction-list-wrapper{
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 40px);
|
|
|
background: #f2f4f5;
|
|
|
padding: 12px;
|
|
|
box-sizing: border-box;
|
|
|
overflow-y: auto;
|
|
|
-
|
|
|
- .tips-text {
|
|
|
- color: #FA7406;
|
|
|
- padding: 5px 10px;
|
|
|
- border: 1px solid #FA7406;
|
|
|
- border-radius: 5px;
|
|
|
- margin-bottom: 10px;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .list-item {
|
|
|
+ .interaction-card{
|
|
|
background: #ffffff;
|
|
|
border-radius: 6px;
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ffffff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 145px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .card-content{
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 8px;
|
|
|
+ .card-title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .card-desc{
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .interaction-list {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- &.uploaded-item {
|
|
|
- border: 1px solid #2199f8;
|
|
|
+ .tips-text {
|
|
|
+ color: #FA7406;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border: 1px solid #FA7406;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
|
|
|
- .item-header-wrapper {
|
|
|
- .item-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .header-wrapper {
|
|
|
+ .list-item {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+
|
|
|
+ &.uploaded-item {
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-header-wrapper {
|
|
|
+ .item-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 5px;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .title-block {
|
|
|
- font-size: 16px;
|
|
|
- color: #6f6f6f;
|
|
|
- font-family: "PangMenZhengDao";
|
|
|
- width: fit-content;
|
|
|
- background: rgba(143, 143, 143, 0.1);
|
|
|
- padding: 5px 10px;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .status {
|
|
|
- color: #999999;
|
|
|
- background: #F1F1F1;
|
|
|
+ .header-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
|
|
|
- &.urgent-0 {
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
+ .title-block {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #6f6f6f;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ width: fit-content;
|
|
|
+ background: rgba(143, 143, 143, 0.1);
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
- &.urgent-1 {
|
|
|
- color: #FF953D;
|
|
|
- background: rgba(255, 149, 61, 0.1);
|
|
|
+ .status {
|
|
|
+ color: #999999;
|
|
|
+ background: #F1F1F1;
|
|
|
+
|
|
|
+ &.urgent-0 {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.urgent-1 {
|
|
|
+ color: #FF953D;
|
|
|
+ background: rgba(255, 149, 61, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.urgent-2 {
|
|
|
+ color: #EE4646;
|
|
|
+ background: rgba(238, 70, 70, 0.1);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &.urgent-2 {
|
|
|
- color: #EE4646;
|
|
|
- background: rgba(238, 70, 70, 0.1);
|
|
|
+ .location-error {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: "Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif";
|
|
|
+ color: #FA7406;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .location-error {
|
|
|
+ .upload-status {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- font-family: "Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif";
|
|
|
- color: #FA7406;
|
|
|
gap: 4px;
|
|
|
- font-size: 14px;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-left: 10px;
|
|
|
|
|
|
- .upload-status {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- margin-left: 10px;
|
|
|
+ .status-icon {
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
|
|
|
- .status-icon {
|
|
|
- color: #2199f8;
|
|
|
- font-size: 17px;
|
|
|
+ .status-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .status-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #2199f8;
|
|
|
+ &.has-status {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-header {
|
|
|
+ div {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.has-status {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .expanded-content {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 0.5px solid #2199F8;
|
|
|
+ margin-top: 12px;
|
|
|
|
|
|
- .item-header {
|
|
|
- div {
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
+ .uploaded-images {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .uploaded-img-wrap {
|
|
|
+ position: relative;
|
|
|
+ width: calc((100vw - 68px) / 4);
|
|
|
+ height: calc((100vw - 68px) / 4);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .expanded-content {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- padding: 10px;
|
|
|
- border: 0.5px solid #2199F8;
|
|
|
- margin-top: 12px;
|
|
|
+ .uploaded-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
|
|
|
- .uploaded-images {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 8px;
|
|
|
-
|
|
|
- .uploaded-img-wrap {
|
|
|
- position: relative;
|
|
|
- width: calc((100vw - 68px) / 4);
|
|
|
- height: calc((100vw - 68px) / 4);
|
|
|
+ .uploaded-img-remove {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .uploaded-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .continue-upload-btn {
|
|
|
+ border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
border-radius: 4px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .uploaded-img-remove {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
- border-radius: 50%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .continue-upload-btn {
|
|
|
- border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
- border-radius: 4px;
|
|
|
- background: #FFFFFF;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .uploaded-content {
|
|
|
- .content-wrapper {
|
|
|
- border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 10px;
|
|
|
- margin-top: 12px;
|
|
|
-
|
|
|
- .item-desc {
|
|
|
- color: #3C3C3C;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .tip-box {
|
|
|
- font-size: 12px;
|
|
|
- color: #2199F8;
|
|
|
- padding: 3px 5px;
|
|
|
+ .uploaded-content {
|
|
|
+ .content-wrapper {
|
|
|
+ border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 4px;
|
|
|
- margin-bottom: 10px;
|
|
|
- background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, rgba(221, 221, 221, 0) 100%);
|
|
|
- }
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: 12px;
|
|
|
|
|
|
- .example-wrapper {
|
|
|
- .example-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 8px;
|
|
|
- color: #BEB9B9;
|
|
|
+ .item-desc {
|
|
|
+ color: #3C3C3C;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
- .more {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .tip-box {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #2199F8;
|
|
|
+ padding: 3px 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, rgba(221, 221, 221, 0) 100%);
|
|
|
}
|
|
|
|
|
|
- .example-list {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .image-item-wrapper {
|
|
|
- position: relative;
|
|
|
- margin-right: 6px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '示例';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background: rgba(0, 0, 0, 0.7);
|
|
|
- color: #F2F4F5;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 8px 0 2px 0;
|
|
|
- font-size: 10px;
|
|
|
- z-index: 1;
|
|
|
+ .example-wrapper {
|
|
|
+ .example-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: #BEB9B9;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .image-item {
|
|
|
- width: calc((100vw - 68px) / 4);
|
|
|
- height: calc((100vw - 68px) / 4);
|
|
|
- border-radius: 8px;
|
|
|
- object-fit: cover;
|
|
|
+ .example-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .image-item-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 6px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '示例';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ color: #F2F4F5;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 8px 0 2px 0;
|
|
|
+ font-size: 10px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ width: calc((100vw - 68px) / 4);
|
|
|
+ height: calc((100vw - 68px) / 4);
|
|
|
+ border-radius: 8px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .patrol-suggestion {
|
|
|
- color: rgba(60, 60, 60, 0.4);
|
|
|
- margin-top: 10px;
|
|
|
+ .patrol-suggestion {
|
|
|
+ color: rgba(60, 60, 60, 0.4);
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
- .action-text {
|
|
|
- color: #727272;
|
|
|
+ .action-text {
|
|
|
+ color: #727272;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .upload-wrap {
|
|
|
- width: 100%;
|
|
|
- margin-top: 12px;
|
|
|
+ .upload-wrap {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .van-uploader__input-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep {
|
|
|
- .van-uploader__input-wrapper {
|
|
|
+ .upload-btn {
|
|
|
width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: #0B84E4;
|
|
|
+ padding: 6px;
|
|
|
+ border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .upload-btn {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- color: #0B84E4;
|
|
|
- padding: 6px;
|
|
|
- border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
+ .input-wrapper {
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .btn-not-reached,
|
|
|
+ .btn-default {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
+ padding: 6px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .input-wrapper {
|
|
|
- margin: 12px 0;
|
|
|
- }
|
|
|
+ .btn-not-reached {
|
|
|
+ max-width: fit-content;
|
|
|
+ background: #fff;
|
|
|
+ color: #585858;
|
|
|
+ border: 1px solid rgba(88, 88, 88, 0.2);
|
|
|
+ }
|
|
|
|
|
|
- .button-group {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
+ .btn-default {
|
|
|
+ background: #F1F1F1;
|
|
|
+ color: #999999;
|
|
|
+ border: 1px solid #F1F1F1;
|
|
|
+ }
|
|
|
|
|
|
- .btn-not-reached,
|
|
|
- .btn-default {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 6px;
|
|
|
+ .btn-confirm {
|
|
|
+ background: #2199f8;
|
|
|
+ color: #ffffff;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .btn-not-reached {
|
|
|
- max-width: fit-content;
|
|
|
- background: #fff;
|
|
|
- color: #585858;
|
|
|
- border: 1px solid rgba(88, 88, 88, 0.2);
|
|
|
+ .invite-btn {
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid rgba(33, 153, 248, 0.2);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
}
|
|
|
|
|
|
- .btn-default {
|
|
|
- background: #F1F1F1;
|
|
|
- color: #999999;
|
|
|
- border: 1px solid #F1F1F1;
|
|
|
- }
|
|
|
+ .proportion-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
|
|
|
- .btn-confirm {
|
|
|
- background: #2199f8;
|
|
|
- color: #ffffff;
|
|
|
- border: 1px solid #2199f8;
|
|
|
+ .proportion-text {
|
|
|
+ color: #969696;
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toggle-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 2px;
|
|
|
+ color: #8D8D8D;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 25px;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ .rotate {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .invite-btn {
|
|
|
- color: #2199f8;
|
|
|
- border: 1px solid rgba(33, 153, 248, 0.2);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 5px;
|
|
|
- text-align: center;
|
|
|
+ .list-item+.list-item {
|
|
|
margin-top: 12px;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
}
|
|
|
|
|
|
- .proportion-info {
|
|
|
+ .empty-data {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px 0;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-wrapper {
|
|
|
display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 12px;
|
|
|
-
|
|
|
- .proportion-text {
|
|
|
- color: #969696;
|
|
|
- font-size: 14px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- flex: 1;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .toggle-btn {
|
|
|
+ gap: 10px;
|
|
|
+ margin: 12px 0 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .question-text {
|
|
|
+ background: #ffffff;
|
|
|
+ color: #6f6f6f;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 2px;
|
|
|
- color: #8D8D8D;
|
|
|
- padding: 2px 10px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
- font-size: 12px;
|
|
|
- border-radius: 25px;
|
|
|
- background: #FFFFFF;
|
|
|
-
|
|
|
- .rotate {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .list-item+.list-item {
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .empty-data {
|
|
|
- text-align: center;
|
|
|
- padding: 40px 0;
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .question-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 10px;
|
|
|
- margin: 12px 0 6px;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .question-text {
|
|
|
- background: #ffffff;
|
|
|
- color: #6f6f6f;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .text-title {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .text-title {
|
|
|
- margin-right: 5px;
|
|
|
+ .text-unit {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .text-unit {
|
|
|
- margin-left: 4px;
|
|
|
+ .question-text+.question-text {
|
|
|
+ margin-top: 6px;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .question-text+.question-text {
|
|
|
- margin-top: 6px;
|
|
|
- }
|
|
|
|
|
|
- .draw-region-btn {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 6px 10px;
|
|
|
- color: #2199f8;
|
|
|
+ .draw-region-btn {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px 10px;
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
wangsisi