|
|
@@ -46,7 +46,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="last-photo" v-show="showlastPhoto && (lastPhoto as any)?.file_path" v-key="(lastPhoto as any)?.file_path">
|
|
|
+ <div class="last-photo" v-show="showlastPhoto && (lastPhoto as any)?.file_path" v-bind:key="(lastPhoto as any)?.file_path">
|
|
|
<el-button class="close-btn" type="danger" icon="Close" circle @click="closeLastPhoto" />
|
|
|
<el-image :src="getFilePath((lastPhoto as any)?.file_path || '')" fit="contain" ></el-image>
|
|
|
</div>
|
|
|
@@ -89,12 +89,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="history-item-right">
|
|
|
- <el-dropdown :disabled="runLoading || takePictureLoading" trigger="click">
|
|
|
+ <el-dropdown :disabled="runLoading || takePictureLoading" trigger="click">
|
|
|
<el-button :disabled="runLoading || takePictureLoading" size="small" plain>{{ $t('photoShot.advancedGenerate') }}</el-button>
|
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
|
<el-dropdown-item
|
|
|
- v-for="menuItem in generate.children"
|
|
|
+ v-for="menuItem in generateMenu.children"
|
|
|
@click.native="onGenerateCLick(menuItem, item)">{{ menuItem.name }}</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
@@ -111,62 +111,180 @@
|
|
|
class="history-item_image"
|
|
|
v-loading="!image.PhotoRecord.image_path && runAction.goods_art_no == item.goods_art_no"
|
|
|
>
|
|
|
- <span class="tag" v-if="!image.PhotoRecord.image_path">{{ image.action_name }}</span>
|
|
|
- <el-image
|
|
|
- v-if="image.PhotoRecord.image_path"
|
|
|
- :src="thumbnailMap[image.PhotoRecord.image_path] || getFilePath(image.PhotoRecord.image_path)"
|
|
|
- :preview-src-list="getPreviewImageList(item)"
|
|
|
- hide-on-click-modal
|
|
|
- :initial-index="getPreviewIndex(item, index)"
|
|
|
- class="preview-image"
|
|
|
- fit="contain"
|
|
|
- :preview-teleported="true"
|
|
|
- lazy
|
|
|
- >
|
|
|
- <template #placeholder>
|
|
|
- <span class="tag">{{ image.action_name }}</span>
|
|
|
- </template>
|
|
|
- <template #error>
|
|
|
- <div class="image-slot">
|
|
|
+ <div class="el-image_view">
|
|
|
+ <el-image
|
|
|
+ v-if="image.PhotoRecord.image_path"
|
|
|
+ :src="thumbnailMap[image.PhotoRecord.image_path] || getFilePath(image.PhotoRecord.image_path)"
|
|
|
+ :preview-src-list="getPreviewImageList(item)"
|
|
|
+ hide-on-click-modal
|
|
|
+ :initial-index="getPreviewIndex(item, index)"
|
|
|
+ class="preview-image"
|
|
|
+ fit="contain"
|
|
|
+ :preview-teleported="true"
|
|
|
+ lazy
|
|
|
+ >
|
|
|
+ <template #placeholder>
|
|
|
<span class="tag">{{ image.action_name }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-image>
|
|
|
- <div v-else class="image-placeholder">
|
|
|
- <span class="tag">{{ image.action_name }}</span>
|
|
|
+ </template>
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <span class="tag">{{ image.action_name }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <el-button v-if="image.action_name && !runLoading && !takePictureLoading" :disabled="runLoading || takePictureLoading" class="reset-button" @click="reTakePicture(image.PhotoRecord)" v-log="{ describe: { action: 'retake single image', goods_art_no: image.PhotoRecord.goods_art_no, action_name: image.action_name } }">{{ $t('photoShot.retakeSingle') }}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="footer-controls">
|
|
|
+ <div class="footer-left">
|
|
|
+ <el-checkbox
|
|
|
+ :model-value="isSelectAll"
|
|
|
+ :indeterminate="isIndeterminate"
|
|
|
+ @change="toggleSelectAll"
|
|
|
+ class="select-all-checkbox"
|
|
|
+ >
|
|
|
+ {{ $t('common.selectAll') }}
|
|
|
+ </el-checkbox>
|
|
|
+ <span class="image-count-text">
|
|
|
+ {{ $t('photoShot.selectedCount', { selected: selectedImageCount, total: totalImageCount }) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="footer-right">
|
|
|
+ <div class="pagination-container" style="padding: 10px 0; text-align: center;">
|
|
|
+ <el-pagination
|
|
|
+ :page-count="totalPages"
|
|
|
+ :current-page="currentPage"
|
|
|
+ @current-change="(page) => getPhotoRecords({ page })"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ :disabled="selectedGoods.size === 0 || runLoading || takePictureLoading"
|
|
|
+ @click="deleteSelected"
|
|
|
+ v-log="{ describe: { action: 'delete selected goods' } }"
|
|
|
+ >
|
|
|
+ {{ $t('photoShot.delete') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ :disabled="!goodsList.length || runLoading || takePictureLoading"
|
|
|
+ @click="handleDeleteAll"
|
|
|
+ style="color: #FF4C00"
|
|
|
+ v-log="{ describe: { action: 'delete all goods' } }"
|
|
|
+ >
|
|
|
+ {{ $t('photoShot.deleteAll') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :disabled="!goodsList.length || runLoading || takePictureLoading"
|
|
|
+ @click="openPhotographyDetail()"
|
|
|
+ v-log="{ describe: { action: 'start generate' } }"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/processImage.vue/sc.png" />
|
|
|
+ {{ $t('photoShot.startGenerate') }}
|
|
|
+ <img src="@/assets/images/processImage.vue/go.png" class="go"/>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
|
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
import RemoteControl from '@/views/RemoteControl/index.vue'
|
|
|
import headerBar from '@/components/header-bar/index.vue'
|
|
|
import hardwareCheck from '@/components/check/index.vue'
|
|
|
import usePhotography from './mixin/usePhotography'
|
|
|
+import generateMenu from '@/utils/menus/generate'
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
const {
|
|
|
loading, runLoading, takePictureLoading, goodsList, pageSize, currentPage,
|
|
|
- totalPages, goods_art_no_tpl, goods_art_no, runAction, lastPhoto,
|
|
|
- showlastPhoto, goodsArtNo, searchGoodsArtNo, menu, generate,
|
|
|
- getTime, getFilePath, getPhotoRecords, delGoods, importDirs, deleteAllGoods,
|
|
|
- reTakePictureNos, onRemoteControl, initEventListeners, cleanupEventListeners,
|
|
|
+ totalPages, goods_art_no, runAction, lastPhoto,
|
|
|
+ showlastPhoto, goodsArtNo, searchGoodsArtNo, menu,
|
|
|
+ getTime, getFilePath, getPhotoRecords, delGoods, del, deleteAllGoods,
|
|
|
+ reTakePicture, reTakePictureNos, onRemoteControl, initEventListeners, cleanupEventListeners,
|
|
|
+ openPhotographyDetail, onGenerateCLick,
|
|
|
} = usePhotography()
|
|
|
|
|
|
const containerRef = ref<HTMLElement | null>(null)
|
|
|
const selectedGoods = ref<Set<string>>(new Set())
|
|
|
const thumbnailMap = ref<Record<string, string>>({})
|
|
|
|
|
|
+// 全选状态
|
|
|
+const isSelectAll = computed(() => {
|
|
|
+ return goodsList.value.length > 0 && selectedGoods.value.size === goodsList.value.length
|
|
|
+})
|
|
|
+
|
|
|
+// 是否半选状态
|
|
|
+const isIndeterminate = computed(() => {
|
|
|
+ return selectedGoods.value.size > 0 && selectedGoods.value.size < goodsList.value.length
|
|
|
+})
|
|
|
+
|
|
|
+// 计算已选择的图片数量
|
|
|
+const selectedImageCount = computed(() => {
|
|
|
+ let count = 0
|
|
|
+ goodsList.value.forEach((item: any) => {
|
|
|
+ if (selectedGoods.value.has(item.goods_art_no)) {
|
|
|
+ count += item.items?.length || 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return count
|
|
|
+})
|
|
|
+
|
|
|
+// 计算总图片数量
|
|
|
+const totalImageCount = computed(() => {
|
|
|
+ let count = 0
|
|
|
+ goodsList.value.forEach((item: any) => {
|
|
|
+ count += item.items?.length || 0
|
|
|
+ })
|
|
|
+ return count
|
|
|
+})
|
|
|
+
|
|
|
+// 全选/取消全选
|
|
|
+const toggleSelectAll = () => {
|
|
|
+ if (isSelectAll.value) {
|
|
|
+ selectedGoods.value.clear()
|
|
|
+ } else {
|
|
|
+ goodsList.value.forEach((item: any) => {
|
|
|
+ selectedGoods.value.add(item.goods_art_no)
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除选中的货号
|
|
|
+const deleteSelected = async () => {
|
|
|
+ if (selectedGoods.value.size === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm(
|
|
|
+ t('message.confirmDeleteSelected', { count: selectedGoods.value.size }),
|
|
|
+ t('common.tips'),
|
|
|
+ {
|
|
|
+ confirmButtonText: t('common.confirm'),
|
|
|
+ cancelButtonText: t('common.cancel'),
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ const goodsArtNos = Array.from(selectedGoods.value)
|
|
|
+ await del({ goods_art_nos: goodsArtNos })
|
|
|
+ selectedGoods.value.clear()
|
|
|
+ } catch (e) {
|
|
|
+ // 用户取消
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const toggleGoods = (goodsArtNo: string) => {
|
|
|
if (selectedGoods.value.has(goodsArtNo)) {
|
|
|
selectedGoods.value.delete(goodsArtNo)
|
|
|
@@ -228,29 +346,528 @@ onBeforeUnmount(() => {
|
|
|
top: 100px !important;
|
|
|
height: calc(100vh - 170px) !important;
|
|
|
transform: translate(0px, 0px) !important;
|
|
|
- .el-image { width: 100%; height: 100%; display: block; .el-image__inner { width: 100%; height: 100%; display: block; } }
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .el-image__inner {
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.photography-page { position: relative; }
|
|
|
-.main-container { position: relative; display: flex; }
|
|
|
-.history-section { width: 100%; min-height: calc(100vh - 30px); display: flex; flex-direction: column; padding: 20px; }
|
|
|
-.history-warp { flex: 1; }
|
|
|
-.history-item { background: #FFFFFF; box-shadow: 0px 2px 4px 0px rgba(23,33,71,0.1); border-radius: 10px; border: 1px solid #D9DEE6; margin-bottom: 20px; }
|
|
|
-.history-item-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
|
|
|
-.history-item-left { display: flex; align-items: center; gap: 12px; }
|
|
|
-.goods-art-no { font-weight: 600; font-size: 16px; color: #333; }
|
|
|
-.history-item-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #8C92A7; }
|
|
|
-.history-item-right { display: flex; align-items: center; gap: 8px; }
|
|
|
-.history-item-images { display: flex; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
|
|
|
-.history-item_image { width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: #f5f5f5; display: flex; align-items: center; justify-content: center; position: relative; }
|
|
|
-.preview-image { width: 120px; height: 120px; }
|
|
|
-.image-placeholder { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; }
|
|
|
-.tag { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.5); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
|
|
|
-.image-count { display: flex; align-items: center; gap: 4px; }
|
|
|
-.last-photo { position: fixed; top: 50px; right: 20px; z-index: 9999; width: 300px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 8px; }
|
|
|
-.close-btn { position: absolute; top: 8px; right: 8px; z-index: 1; }
|
|
|
-::v-deep .el-checkbox__input { transform: scale(1.4); }
|
|
|
-.search-bar { margin-bottom: 15px; display: flex; justify-content: flex-start; }
|
|
|
+.photography-page {
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ position: relative;
|
|
|
+ .main-container {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ .content-wrapper {
|
|
|
+ flex-grow: 1;
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 510px;
|
|
|
+ padding: 0 50px;
|
|
|
+ height: calc(100vh - 30px);
|
|
|
+ margin: auto;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ border-right:1px solid rgba(0,0,0,.1);
|
|
|
+
|
|
|
+ .step-section {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-number {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ border-radius: 50%;
|
|
|
+ height: 32px;
|
|
|
+ margin-top: 51px;
|
|
|
+ width: 32px;
|
|
|
+
|
|
|
+ .text_22 {
|
|
|
+ width: 6px;
|
|
|
+ height: 22px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: NaN;
|
|
|
+ text-align: right;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 22px;
|
|
|
+ margin: 5px 0 0 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-one {
|
|
|
+ width: 350px;
|
|
|
+ height: auto;
|
|
|
+ margin: 55px 0 0 5px;
|
|
|
+
|
|
|
+ .step-header {
|
|
|
+ width: 391px;
|
|
|
+ height: 24px;
|
|
|
+ margin-left: 3px;
|
|
|
+
|
|
|
+ .step-title {
|
|
|
+ width: 160px;
|
|
|
+ height: 24px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-divider {
|
|
|
+ width: 191px;
|
|
|
+ height: 1px;
|
|
|
+ margin: 13px 0 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-content {
|
|
|
+ width: 350px;
|
|
|
+
|
|
|
+ .input-container {
|
|
|
+ width: calc(100% - 20px );
|
|
|
+ height: 36px;
|
|
|
+ margin: 10px 10px 0;
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ :deep(.el-input__inner){
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .auto-method {
|
|
|
+ width: 253px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 28px 0 0 14px;
|
|
|
+
|
|
|
+ .text-method-tag {
|
|
|
+ background-color: rgba(0, 174, 30, 1);
|
|
|
+ height: 24px;
|
|
|
+ width: 65px;
|
|
|
+
|
|
|
+ .text_4 {
|
|
|
+ width: 56px;
|
|
|
+ height: 20px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 20px;
|
|
|
+ margin: 2px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .method-description {
|
|
|
+ width: 182px;
|
|
|
+ height: 20px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(71, 71, 71, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-two {
|
|
|
+ width: 350px;
|
|
|
+ height: auto;
|
|
|
+ margin: 55px 0 0 5px;
|
|
|
+
|
|
|
+ .step-title {
|
|
|
+ width: 350px;
|
|
|
+ height: 24px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shooting-container {
|
|
|
+ width: 353px;
|
|
|
+ height: auto;
|
|
|
+
|
|
|
+
|
|
|
+ .remote-control-wrap {
|
|
|
+ width: 353px;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shooting-tips {
|
|
|
+ width: 325px;
|
|
|
+ height: 40px;
|
|
|
+ margin: 12px 0 0 15px;
|
|
|
+
|
|
|
+ .info-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-text {
|
|
|
+ width: 302px;
|
|
|
+ height: 40px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(255, 76, 0, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: NaN;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.history-section {
|
|
|
+ width: calc(100vw - 510px);
|
|
|
+ height: calc(100vh - 30px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background:#F5F6F7;
|
|
|
+
|
|
|
+ .search-bar {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-checkbox__input {
|
|
|
+ transform: scale(1.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .history-warp {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .history-item {
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(23,33,71,0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #D9DEE6;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .history-item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ background: linear-gradient( 90deg, #F4ECFF 0%, #DFEDFF 100%);
|
|
|
+ border-radius: 10px 10px 0px 0px;
|
|
|
+
|
|
|
+ .history-item-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .goods-checkbox {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-art-no {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-item-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ ::v-deep {
|
|
|
+ .el-button { height: 30px; line-height: 30px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-item-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-time {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-count {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-item-images {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-item_image_wrap {
|
|
|
+ padding-bottom: 0;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .history-item_image {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ aspect-ratio: 1;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #D9DEE6;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ color: #bbb;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -10px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ :deep(.el-image__inner) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-placeholder {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #F7F7F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-slot {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #F7F7F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ transform: scale(1.02);
|
|
|
+ box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-loading-parent--relative{
|
|
|
+ ::v-deep {
|
|
|
+ .el-loading-mask { display: none}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .el-image_view {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .reset-button {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ left:50%;
|
|
|
+ top:50%;
|
|
|
+ padding: 0px;
|
|
|
+ margin-left:-20px;
|
|
|
+ margin-top:-10px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ background: rgba(0,0,0,0.6);
|
|
|
+ border-radius: 12px;
|
|
|
+ display: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .reset-button {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p:first-of-type {
|
|
|
+ ::v-deep {
|
|
|
+ .el-loading-mask { display: block !important;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-controls {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0px 20px;
|
|
|
+ border-top: 1px solid #D9DEE6;
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 50px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: fixed;
|
|
|
+ bottom:0;
|
|
|
+ left: 510px;
|
|
|
+ right: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ z-index: 100;
|
|
|
+ img {
|
|
|
+ height: 12px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ .go {
|
|
|
+ height: 12px;
|
|
|
+ opacity: .8;
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ .el-button {
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .select-all-checkbox {
|
|
|
+ margin-right: 0;
|
|
|
+ ::v-deep {
|
|
|
+ .el-checkbox__label {
|
|
|
+
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-count-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+.last-photo{
|
|
|
+ position: fixed;
|
|
|
+ padding: 10px;
|
|
|
+ box-shadow: 0 0 5px rgb(0 0 0 / 50%);
|
|
|
+ left: 510px;
|
|
|
+ top: 30px;
|
|
|
+ bottom: 0px;
|
|
|
+ right: 10px;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: rgba(0,0,0,.5);
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 1001;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ ::v-deep(.el-icon) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .el-image__inner {
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
