|
|
@@ -2,14 +2,15 @@
|
|
|
<custom-header name="农情互动" bgColor="#f2f4f5"></custom-header>
|
|
|
<div class="interaction-list">
|
|
|
<div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
|
|
|
- :class="{ 'uploaded-item': item.isConfirmed != null }">
|
|
|
+ :class="{ 'uploaded-item': item.questionStatus !== 3 }">
|
|
|
<!-- 标题区域 -->
|
|
|
- <div class="item-header-wrapper" :class="{ 'has-status': item.isConfirmed != null }">
|
|
|
+ <div class="item-header-wrapper" :class="{ 'has-status': item.questionStatus !== 3 }">
|
|
|
<div class="item-header">
|
|
|
<div class="title">{{ item.interactionTypeName }}</div>
|
|
|
- <div class="status" v-if="item.isConfirmed == null">紧急</div>
|
|
|
+ <div class="status" :class="['urgent-' + item.urgent]" v-if="item.questionStatus === 3">{{
|
|
|
+ urgentType[item.urgent] }}</div>
|
|
|
</div>
|
|
|
- <div class="upload-status" v-show="item.isConfirmed != null">
|
|
|
+ <div class="upload-status" v-show="item.questionStatus !== 3">
|
|
|
<el-icon class="status-icon">
|
|
|
<SuccessFilled />
|
|
|
</el-icon>
|
|
|
@@ -18,7 +19,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 未上传状态内容 -->
|
|
|
- <div class="uploaded-content" v-show="item.isConfirmed == null || item.expanded">
|
|
|
+ <div class="uploaded-content" v-show="item.questionStatus === 3 || item.expanded">
|
|
|
<div class="content-wrapper">
|
|
|
<text-ellipsis class="item-desc" rows="2" :content="item.reason" expand-text="展开"
|
|
|
collapse-text="收起" />
|
|
|
@@ -26,7 +27,8 @@
|
|
|
<div class="example-wrapper">
|
|
|
<div class="example-header">
|
|
|
<div>示例照片</div>
|
|
|
- <div class="more" @click="openMorePopup(item.exampleImagesJson)">查看更多</div>
|
|
|
+ <div class="more" v-if="item.exampleImagesJson.length > 3"
|
|
|
+ @click="openMorePopup(item.exampleImagesJson)">查看更多</div>
|
|
|
</div>
|
|
|
<div class="example-list" v-if="item.exampleImagesJson.length > 0">
|
|
|
<div class="image-item-wrapper" v-for="(example, exIndex) in item.exampleImagesJson"
|
|
|
@@ -42,17 +44,20 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 展开状态内容 -->
|
|
|
- <div class="expanded-content"
|
|
|
- v-show="item.imagePaths.length > 0">
|
|
|
+ <div class="expanded-content" v-show="item.imagePaths.length > 0">
|
|
|
<!-- 原因说明 -->
|
|
|
- <div class="reason-text">上传照片（{{ item.exampleImagesJson.length }}张）</div>
|
|
|
+ <div class="reason-text">上传照片（{{ item.imagePaths.length }}张）</div>
|
|
|
<!-- 图片展示 -->
|
|
|
<div class="uploaded-images">
|
|
|
- <img class="uploaded-img" v-for="image in item.imagePaths" :key="image"
|
|
|
- :src="base_img_url2 + image" alt="" />
|
|
|
+ <div class="uploaded-img-wrap" v-for="(image, imgIndex) in item.imagePaths" :key="image"
|
|
|
+ @click="showExample(item.imagePaths.map(p => base_img_url2 + p), 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 class="upload-wrap continue-upload-btn" multiple :max-count="10"
|
|
|
- :after-read="afterReadUpload">
|
|
|
+ <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 />
|
|
|
@@ -63,8 +68,9 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 上传按钮 -->
|
|
|
- <uploader v-if="item.imagePaths.length === 0" @click="handleUploadClick(item)" class="upload-wrap" multiple :max-count="10"
|
|
|
- :after-read="afterReadUpload" v-show="item.isConfirmed == null">
|
|
|
+ <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 />
|
|
|
@@ -73,38 +79,44 @@
|
|
|
</div>
|
|
|
</uploader>
|
|
|
|
|
|
- <div class="question-wrapper">
|
|
|
+ <div class="question-wrapper" v-if="item.imagePaths.length">
|
|
|
<div class="question-text">
|
|
|
<span class="text-title">{{ item.question }}</span>
|
|
|
- <el-input v-model="item.triggerValue" type="number" style="width: 80px">
|
|
|
+ <el-input v-model="item.answerValues[0]" :disabled="item.questionStatus !== 3" type="number"
|
|
|
+ style="width: 70px">
|
|
|
<template #suffix>
|
|
|
- <span class="text-unit">%</span>
|
|
|
+ <span class="text-unit">{{ item.indicators[0]?.unit || '%' }}</span>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
- <!-- <div class="draw-region-btn" @click="handleDrawRegion(item)">查看发生区域</div> -->
|
|
|
+ <div class="draw-region-btn" v-if="item.interactionTypeId != 1 && item.questionStatus === 3"
|
|
|
+ @click="handleDrawRegion(item)">
|
|
|
+ 编辑发生区域</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 输入框 -->
|
|
|
<div class="input-wrapper">
|
|
|
- <el-input v-model="item.replyText" placeholder="请输入您咨询的问题" clearable />
|
|
|
+ <el-input v-model="item.replyText" :disabled="item.questionStatus !== 3" placeholder="请输入您咨询的问题"
|
|
|
+ clearable />
|
|
|
</div>
|
|
|
|
|
|
<!-- 按钮区域 -->
|
|
|
- <div class="button-group" v-show="item.isConfirmed == null">
|
|
|
- <div class="btn-not-reached" @click="handleNotReached(item)">{{ item.cancelButtonName }}</div>
|
|
|
- <div class="btn-default" :class="{ 'btn-confirm': item.imagePaths.length > 0 }" @click="handleConfirm(item)">确认提交</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>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 比例信息（已上传状态显示） -->
|
|
|
- <div class="proportion-info" :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }"
|
|
|
- v-show="item.isConfirmed != null">
|
|
|
+ <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" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{
|
|
|
- item.replyText
|
|
|
- }}%</span>
|
|
|
- <span class="proportion-text" v-else>暂无数据</span>
|
|
|
+ <span class="proportion-text">{{ item.question }}{{
|
|
|
+ item.answerValues[0] || 0
|
|
|
+ }}{{ item.indicators[0]?.unit || '%' }}</span>
|
|
|
</template>
|
|
|
<div class="toggle-btn" @click="toggleExpand(item)">
|
|
|
<span>{{ item.expanded ? "收起" : "展开" }}</span>
|
|
|
@@ -130,18 +142,13 @@
|
|
|
|
|
|
<!-- 示例照片轮播组件 -->
|
|
|
<example-popup v-model:show="showExamplePopup" :images="exampleList" :start-index="exampleStartIndex"
|
|
|
- title="蒂蛀虫示例图" />
|
|
|
+ title="蒂蛀虫示例图" :show-title-and-tips="exampleShowTitleAndTips" />
|
|
|
<!-- 照片上传进度 -->
|
|
|
<popup v-model:show="showUploadProgressPopup" round class="upload-progress-popup">
|
|
|
- <div class="upload-progress-title">
|
|
|
- <span>照片上传进度</span>
|
|
|
- <el-progress
|
|
|
- class="upload-progress"
|
|
|
- :percentage="uploadPercentage"
|
|
|
- :stroke-width="10"
|
|
|
- :format="format"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div class="upload-progress-title">
|
|
|
+ <span>照片上传进度</span>
|
|
|
+ <el-progress class="upload-progress" :percentage="uploadPercentage" :stroke-width="10" :format="format" />
|
|
|
+ </div>
|
|
|
<div class="upload-box">
|
|
|
<!-- 把已经上传成功的图片传给 upload 组件做回显，同时保持原有上传事件不变 -->
|
|
|
<upload :maxCount="10" :initImgArr="initImgArr" @handleUpload="handleUploadSuccess">
|
|
|
@@ -152,16 +159,18 @@
|
|
|
<span class="label-text">{{ currentItem.question }}</span>
|
|
|
<el-input class="label-input" v-model="answerValue" placeholder="请输入" type="number">
|
|
|
<template #suffix>
|
|
|
- <span class="unit">%</span>
|
|
|
+ <span class="unit">{{ currentItem.indicators[0]?.unit || '%' }}</span>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<el-input class="input-item" v-model="currentItem.replyText" placeholder="请输入您咨询的问题" clearable />
|
|
|
</div>
|
|
|
- <div class="region-tips">勾画新发生区域，精准匹配专属农事方案</div>
|
|
|
- <div class="region-map" ref="mapContainer" @click="handleDrawRegion">
|
|
|
- <div class="region-map-text">点击勾画新发生区域</div>
|
|
|
- </div>
|
|
|
+ <template v-if="currentItem.interactionTypeId != 1">
|
|
|
+ <div class="region-tips">勾画新发生区域，精准匹配专属农事方案</div>
|
|
|
+ <div class="region-map" ref="mapContainer" @click="handleDrawRegion">
|
|
|
+ <div class="region-map-text">点击勾画新发生区域</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<div class="confirm-btn" @click="handleConfirmUpload">确认上传</div>
|
|
|
</popup>
|
|
|
|
|
|
@@ -172,7 +181,7 @@
|
|
|
请点击查看" buttonText="查看报告" @confirm="handleBtn" :zIndex="9999" />
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, onActivated, computed } from "vue";
|
|
|
+import { ref, onMounted, onActivated, computed, onDeactivated } from "vue";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import { Uploader, Popup, TextEllipsis } from "vant";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
@@ -244,12 +253,23 @@ const renderRegionFromSession = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+//
|
|
|
+const urgentType = {
|
|
|
+ "0": "普通",
|
|
|
+ "1": "紧急",
|
|
|
+ "2": "非常紧急",
|
|
|
+ null: "未设置",
|
|
|
+}
|
|
|
+
|
|
|
const uploadFileObj = new UploadFile();
|
|
|
const initImgArr = ref([]);
|
|
|
const miniUserId = localStorage.getItem("MINI_USER_ID");
|
|
|
//弹窗问题
|
|
|
const afterReadUpload = async (data) => {
|
|
|
- initImgArr.value = [];
|
|
|
+ // 继续上传：回显已有图片再追加新图；首次上传：直接清空，只显示本次新传
|
|
|
+ initImgArr.value = (currentItem.value?.imagePaths?.length > 0)
|
|
|
+ ? [...currentItem.value.imagePaths]
|
|
|
+ : [];
|
|
|
// 本次上传的总数 = 选择的文件数量（固定，用于做进度的“总数”）
|
|
|
if (!Array.isArray(data)) {
|
|
|
data = [data];
|
|
|
@@ -258,7 +278,6 @@ const afterReadUpload = async (data) => {
|
|
|
uploadedSuccessCount.value = 0;
|
|
|
drawRegionMap.clearLayer && drawRegionMap.clearLayer();
|
|
|
sessionStorage.removeItem("drawRegionPolygonData");
|
|
|
- answerValue.value = '';
|
|
|
|
|
|
for (let file of data) {
|
|
|
// 将文件上传至服务器
|
|
|
@@ -281,9 +300,10 @@ const afterReadUpload = async (data) => {
|
|
|
ElMessage.error('图片上传失败，请稍后再试！')
|
|
|
}
|
|
|
}
|
|
|
+ showUploadProgressPopup.value = true;
|
|
|
+
|
|
|
// 所有文件上传结束后再打开进度弹窗，此时 imgArr 已包含全部图片
|
|
|
- if (initImgArr.value.length > 0) {
|
|
|
- showUploadProgressPopup.value = true;
|
|
|
+ if (initImgArr.value.length > 0 && currentItem.value.interactionTypeId != 1) {
|
|
|
setTimeout(() => {
|
|
|
// 只在第一次时初始化地图，后续复用已有实例
|
|
|
if (!drawRegionMap.kmap) {
|
|
|
@@ -304,18 +324,22 @@ const afterReadUpload = async (data) => {
|
|
|
const currentItem = ref(null);
|
|
|
const handleUploadClick = (item) => {
|
|
|
currentItem.value = item;
|
|
|
+ answerValue.value = item.answerValues[0] || '';
|
|
|
};
|
|
|
// 示例照片轮播
|
|
|
const showExamplePopup = ref(false);
|
|
|
const exampleList = ref([]);
|
|
|
const exampleStartIndex = ref(0);
|
|
|
-const showExample = (list, index) => {
|
|
|
+const exampleShowTitleAndTips = ref(true);
|
|
|
+const showExample = (list, index, options = {}) => {
|
|
|
exampleList.value = list || [];
|
|
|
exampleStartIndex.value = index || 0;
|
|
|
+ exampleShowTitleAndTips.value = options.hideLabel !== true;
|
|
|
showExamplePopup.value = true;
|
|
|
};
|
|
|
|
|
|
// 加载数据
|
|
|
+/* */
|
|
|
const loadData = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
@@ -354,60 +378,42 @@ const refreshList = async () => {
|
|
|
await loadData();
|
|
|
};
|
|
|
|
|
|
-// 暂未到达进程
|
|
|
-const handleNotReached = async (item) => {
|
|
|
+// 删除已上传的图片
|
|
|
+const removeUploadedImage = (item, imgIndex) => {
|
|
|
+ item.imagePaths.splice(imgIndex, 1);
|
|
|
+};
|
|
|
+
|
|
|
+// 确认上传 / 暂未到达进程
|
|
|
+const handleConfirm = async (item, isConfirm) => {
|
|
|
+ if (isConfirm) {
|
|
|
+ if (item.answerValues[0] === '' || item.answerValues[0] === null || item.answerValues[0] === undefined) {
|
|
|
+ ElMessage.warning("请输入当前果园比例");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (item.imagePaths.length === 0 && uploadData.value.length === 0) {
|
|
|
+ ElMessage.warning("请上传图片");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
const parmas = {
|
|
|
- isConfirmed: false,
|
|
|
farmId: localStorage.getItem("selectedFarmId"),
|
|
|
- imagePaths: uploadData.value,
|
|
|
- isUploadPhoto: uploadData.value.length > 0 ? true : false,
|
|
|
- rangeWkt: '',
|
|
|
+ imagePaths: item.imagePaths.concat(uploadData.value),
|
|
|
+ isUploadPhoto: item.imagePaths.concat(uploadData.value).length > 0 ? true : false,
|
|
|
+ rangeWkt: sessionStorage.getItem("drawRegionPolygonData") || '',
|
|
|
interactionId: item.id,
|
|
|
- replyText: item.replyText
|
|
|
+ replyText: item.replyText,
|
|
|
+ answerValues: item.answerValues
|
|
|
}
|
|
|
const { code, msg } = await VE_API.home.uploadAnswer(parmas);
|
|
|
if (code === 0) {
|
|
|
- ElMessage.success("回答成功");
|
|
|
+ ElMessage.success("上传成功");
|
|
|
// 清空上传数据
|
|
|
uploadData.value = [];
|
|
|
// 刷新列表
|
|
|
await refreshList();
|
|
|
} else {
|
|
|
- ElMessage.error(msg || '回答失败');
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 确认上传
|
|
|
-const handleConfirm = async (item) => {
|
|
|
- if (item.triggerValue.length === 0) {
|
|
|
- ElMessage.warning("请输入当前果园比例");
|
|
|
- return;
|
|
|
- }
|
|
|
- if (item.imagePaths.length === 0 && uploadData.value.length === 0) {
|
|
|
- ElMessage.warning("请上传图片");
|
|
|
- return;
|
|
|
- }
|
|
|
- const parmas = {
|
|
|
- isConfirmed: true,
|
|
|
- farmId: localStorage.getItem("selectedFarmId"),
|
|
|
- imagePaths: item.imagePaths.concat(uploadData.value),
|
|
|
- isUploadPhoto: item.imagePaths.concat(uploadData.value).length > 0 ? true : false,
|
|
|
- rangeWkt: sessionStorage.getItem("drawRegionPolygonData"),
|
|
|
- interactionId: item.id,
|
|
|
- replyText: item.replyText,
|
|
|
- answerValues: [item.triggerValue]
|
|
|
+ ElMessage.error(msg || '上传失败');
|
|
|
}
|
|
|
- console.log("上传数据", parmas);
|
|
|
- // const { code, msg } = await VE_API.home.uploadAnswer(parmas);
|
|
|
- // if (code === 0) {
|
|
|
- // ElMessage.success("上传成功");
|
|
|
- // // 清空上传数据
|
|
|
- // uploadData.value = [];
|
|
|
- // // 刷新列表
|
|
|
- // await refreshList();
|
|
|
- // } else {
|
|
|
- // ElMessage.error(msg || '上传失败');
|
|
|
- // }
|
|
|
};
|
|
|
|
|
|
const handleConfirmUpload = async () => {
|
|
|
@@ -421,7 +427,6 @@ const handleConfirmUpload = async () => {
|
|
|
ElMessage.warning("请输入占比数值");
|
|
|
return;
|
|
|
}
|
|
|
- console.log("上传数据", sessionStorage.getItem("drawRegionPolygonData"));
|
|
|
const parmas = {
|
|
|
interactionId: currentItem.value.id,
|
|
|
farmId: localStorage.getItem("selectedFarmId"),
|
|
|
@@ -450,18 +455,34 @@ const toggleExpand = (item) => {
|
|
|
};
|
|
|
|
|
|
const handleDrawRegion = (item) => {
|
|
|
- console.log("勾画发生区域", item);
|
|
|
const polygonData = sessionStorage.getItem("drawRegionPolygonData");
|
|
|
- if (polygonData) {
|
|
|
- router.push(`/draw_region?polygonData=${polygonData}`);
|
|
|
+ if (item.rangeWkt && item.rangeWkt.length > 10) {
|
|
|
+ if (polygonData) {
|
|
|
+ router.push(`/draw_region?polygonData=${polygonData}`);
|
|
|
+ } else {
|
|
|
+ router.push(`/draw_region?polygonData=${item.rangeWkt}`);
|
|
|
+ }
|
|
|
} else {
|
|
|
- router.push(`/draw_region`);
|
|
|
+ if (polygonData) {
|
|
|
+ router.push(`/draw_region?polygonData=${polygonData}`);
|
|
|
+ } else {
|
|
|
+ router.push(`/draw_region`);
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
};
|
|
|
|
|
|
+onDeactivated(() => {
|
|
|
+ sessionStorage.removeItem("drawRegionPolygonData");
|
|
|
+});
|
|
|
+
|
|
|
const uploadData = ref([]);
|
|
|
const handleUploadSuccess = (data) => {
|
|
|
uploadData.value = data.imgArr;
|
|
|
+ // 同步进度条：删除/增加图片时，总数和已上传数跟随当前列表变化
|
|
|
+ const len = (data.imgArr && data.imgArr.length) || 0;
|
|
|
+ totalUploadCount.value = len;
|
|
|
+ uploadedSuccessCount.value = len;
|
|
|
};
|
|
|
|
|
|
const openMorePopup = (images) => {
|
|
|
@@ -538,8 +559,23 @@ const handleSubmitAll = () => {
|
|
|
}
|
|
|
|
|
|
.status {
|
|
|
- color: #FF953D;
|
|
|
- background: rgba(255, 149, 61, 0.1);
|
|
|
+ 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);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -587,18 +623,40 @@ const handleSubmitAll = () => {
|
|
|
gap: 8px;
|
|
|
margin-top: 8px;
|
|
|
|
|
|
- .uploaded-img {
|
|
|
+ .uploaded-img-wrap {
|
|
|
+ position: relative;
|
|
|
width: calc((100vw - 68px) / 4);
|
|
|
height: calc((100vw - 68px) / 4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploaded-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
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%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.continue-upload-btn {
|
|
|
border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
border-radius: 4px;
|
|
|
background: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -639,6 +697,7 @@ const handleSubmitAll = () => {
|
|
|
.example-list {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.image-item-wrapper {
|
|
|
position: relative;
|
|
|
@@ -747,6 +806,11 @@ const handleSubmitAll = () => {
|
|
|
.proportion-text {
|
|
|
color: #969696;
|
|
|
font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.toggle-btn {
|
|
|
@@ -794,7 +858,7 @@ const handleSubmitAll = () => {
|
|
|
align-items: center;
|
|
|
|
|
|
.text-title {
|
|
|
- margin-right: 4px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
.text-unit {
|
|
|
@@ -834,8 +898,9 @@ const handleSubmitAll = () => {
|
|
|
|
|
|
.upload-progress {
|
|
|
width: 55%;
|
|
|
- ::v-deep{
|
|
|
- .el-progress__text{
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-progress__text {
|
|
|
min-width: fit-content;
|
|
|
}
|
|
|
}
|
|
|
@@ -854,7 +919,7 @@ const handleSubmitAll = () => {
|
|
|
gap: 6px;
|
|
|
|
|
|
.label-input {
|
|
|
- width: 140px;
|
|
|
+ width: 130px;
|
|
|
}
|
|
|
}
|
|
|
|
