bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

冲突合并

This commit is contained in:
BianLzhaoMin 2024-11-27 16:56:38 +08:00
parent dcd1a9fd53 3e9ad09a28
commit a8a64b1056
4 changed files with 614 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components.d.ts vendored
View File

@ -8,10 +8,16 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
<<<<<<< HEAD
ElButton: typeof import('element-plus/es')['ElButton']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
=======
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
>>>>>>> 3e9ad09a2819e350266aaac04c776f0f461c9e79
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@ -19,20 +25,34 @@ declare module 'vue' {
ElDialog: typeof import('element-plus/es')['ElDialog']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
<<<<<<< HEAD
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
=======
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
>>>>>>> 3e9ad09a2819e350266aaac04c776f0f461c9e79
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
<<<<<<< HEAD
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
=======
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps']
>>>>>>> 3e9ad09a2819e350266aaac04c776f0f461c9e79
ElUpload: typeof import('element-plus/es')['ElUpload']
EquipCard: typeof import('./src/components/equipCard.vue')['default']
EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']

7
src/http/api/usercenter/seekorder.ts
View File

@ -5,4 +5,9 @@ import { get, post } from '../../index'
// 获取订单列表
export const getOrderListApi = (data: any) => {
return get('/material-mall/order/getOrderDetails', data)
}
}
//获取订单列表详情
export const getOrderListInfoApi = (data: any) => {
return get('/material-mall/order/getOrderDetailsById',data)
}

199
src/views/user/orderManagement/detail.vue
View File

@ -2,11 +2,12 @@
import { ref } from 'vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import { useRouter } from 'vue-router'
import { getOrderListApi } from 'http/api/usercenter/seekorder'
import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
const route = useRoute()
const cardList = ref<any>([])
/* 查询参数 */
const cardList = ref<any>({})
const orderStatusTemp = ref<Number>(0)
const idTemp = ref<string>('')
const titleStaus = ref<any>('')
// 获取数据列表
// const getList = async () => {
@ -15,9 +16,6 @@ const titleStaus = ref<any>('')
// tableData.value = res.rows
// total.value = res.total
// }
// onMounted(() => {
// getList()
// })
// 根据步骤的 Id 返回对应的标题
const getStepTitle = (stepId:number)=> {
@ -43,13 +41,26 @@ const getStepTitle = (stepId:number)=> {
const getId = ()=>{
orderStatusTemp.value = Number(route.query.orderStatusTemp)
idTemp.value = String(route.query.idTemp)
}
/** 查询列表 */
const getList = async () => {
let params = {
id: idTemp.value
}
const res: any = await getOrderListInfoApi(params)
cardList.value = res.data
}
onBeforeMount(()=>{
getId()
})
onMounted(() => {
getList()
})
const time = ref([])
@ -82,64 +93,154 @@ const time = ref([])
<el-step :title="getStepTitle(5)" :finish-status="orderStatusTemp.value >= 5 ? 'success' : ''"></el-step>
</el-steps>
</div>
<div class="section">
<el-header style="height:30px">租赁信息
</el-header>
<div style="height: 80px;">
<div
class="info"
style="margin-top: 5px; display: flex; flex-wrap: wrap;"
>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
<span>订单编号：{{cardList.code}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
<span>下单时间：{{cardList.orderTime}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
<span></span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
<span>出租单位：{{cardList.czcompanyName}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
<span>出租人：{{cardList.person}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
<span>出租人电话：{{cardList.personPhone}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
<span>承租单位：{{cardList.companyName}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
<span>承租人：{{cardList.nickName}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
<span>承租人电话：{{cardList.phoneNumber}}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
<span>租赁协议：</span>
</div>
</div>
</div>
<div class="cart-tbody" >
<el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j">
<el-col :span="9" class="goods-info">
<el-col :span="7">
<img :src="goods.url" alt="" />
</el-col>
<div class="goods-code">
<div style="font-size: 10px; font-weight: bold">{{ goods.deviceName }}</div>
<div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
<div>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
<div>数量：{{ goods.num }}{{ ' ' + '台' }}</div>
</div>
</el-col>
<el-col :span="2">
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
总费用
</div>
<div class="red-font">{{goods.costs}}</div>
</el-col>
<el-col :span="7">
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">租期</div>
<div style="color: black; font-weight: bold">
{{ goods.rentBeginTime }}
</div>
<div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</div>
<div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
</el-col>
<el-col :span="2">
<div v-if="goods.orderStatus=='0'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"未下单"}}</div>
<div v-if="goods.orderStatus=='1'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已下单"}}</div>
<div v-if="goods.orderStatus=='2'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待出库"}}</div>
<div v-if="goods.orderStatus=='3'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待收货"}}</div>
<div v-if="goods.orderStatus=='4'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"租赁中"}}</div>
<div v-if="goods.orderStatus=='5'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已退租"}}</div>
<div v-if="goods.orderStatus=='6'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已完成"}}</div>
</el-col>
<el-col :span="3">
<div>
<el-button
@click="handleViewOrder(j)"
type="text"
size="mini"
style="color: #blue; font-weight: bold"
>
出库
</el-button>
<el-button
@click="handleViewOrder(j)"
type="text"
size="mini"
style="color: #blue; font-weight: bold"
>
驳回
</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.step{
margin-left:80px;;
}
.section {
margin-top: 20px;
margin-bottom: 20px;
}
.container {
width: 800px;
margin: 0 auto;
padding: 10px;
background: #eeeff6;
// background: #eeeff6;
font-size: 14px;
.cart-title {
margin-top: 10px;
padding: 10px 0;
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
.step{
margin-left:80px;;
}
.cart-title div:first-child {
width: 5px;
height: 20px;
background-color: #4fabfe;
.section {
margin-top: 20px;
margin-bottom: 20px;
}
.cart-th {
margin: 15px 0;
div {
text-align: center;
}
}
.cart-tbody {
.cart-tbody {
background: #fff;
padding: 8px 12px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 20px;
.cart-user-info {
display: flex;
align-items: center;
font-size: 13px;
.code,
.orderTime {
.user-name,
.user-phone {
padding: 3px 18px;
border: 1px solid #ccc;
}
.czcompanyName {
.user-name {
margin-left: 20px;
border-right: none;
}
@ -149,7 +250,7 @@ const time = ref([])
margin: 15px 0;
display: flex;
align-items: center;
font-size: 13px;
div {
text-align: center;
}
@ -157,7 +258,6 @@ const time = ref([])
.goods-info {
display: flex;
align-content: center;
img {
width: 140px;
height: 80px;
@ -168,7 +268,6 @@ const time = ref([])
display: flex;
flex-direction: column;
justify-content: space-around;
div {
text-align: left;
}
@ -189,17 +288,5 @@ const time = ref([])
}
}
}
.protocol-handle {
background: #fff;
padding: 8px 12px;
margin: 10px;
font-size: 13px;
.checkbox-container a {
color: #ff4800;
text-decoration: underline;
}
}
}
</style>

447
src/views/user/orderManagement/index.vue
View File

@ -3,6 +3,13 @@ import { ref } from 'vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import { useRouter } from 'vue-router'
import { getOrderListApi } from 'http/api/usercenter/seekorder'
import uploadComponent from 'components/uploadComponent/index.vue'
import previewImg from './previewImg/index.vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'store/user'
const store = useStore()
import { mainStore } from 'store/main'
const store2 = mainStore()
/* 查询参数 */
const queryParams: any = ref({
deviceName: '',
@ -50,7 +57,7 @@ const getList = async () => {
const handleViewOrder=(index:Number,row:any)=>{
router.push({
name: 'orderManagementInfo' ,
query: { orderStatusTemp:Number(row.orderStatus) }
query: { orderStatusTemp:Number(row.orderStatus),idTemp:row.id }
})
}
@ -104,6 +111,163 @@ const clickConfirmReceipt = (row: any) => {
})
}
const settleinTitle = ref('')
/* 编辑 */
const isEditDisabled = ref(false)
// 装备入驻弹框显示隐藏
const dialogFormVisibleSettlein: any = ref(false)
const equipmentDeploymentParams: any = ref({
/* 设备名称 */
deviceName: '',
deviceTypeList: [],
deviceCount: 1,
unitName: '',
code: '',
brand: '',
typeId: '',
companyId: '',
productionDate: '',
dayLeasePrice: '',
person: '',
personPhone: '',
deviceWeight: '',
})
const mainFileList: any = ref([])//检测文件1
const detailsFileList: any = ref([])//检测文件2
//图片查看弹窗
const dialogVisible: any = ref(false)
const dialogImageUrl = ref('')
//上传
const upload: any = ref({
// 设置上传的请求头部
headers: { Authorization: "Bearer " + store2.token },
// 上传的地址
url: import.meta.env.VITE_API_URL + "/file/upload",
})
// 文件上传前处理-上传大小
const beforeUpload = (file: any) => {
if (file.size / 1024 / 1024 > 2) {
ElMessage({
type: 'error',
message: '上传文件大小不能超过2M!'
})
// this.$message.error({ message: `上传文件大小不能超过2M!`,});
return false;
}
}
// 文件上传失败
const uploadError = () => {
ElMessage({
type: 'error',
message: '上传文件失败!'
})
// this.$message.error({message: `上传文件失败!`});
}
// 文件上传成功处理
const handleFileSuccess = (response: any) => {
if (response.code == 200) {
let obj = {
// modelId:this.maId,
fileName: response.data.name.split("/")[4],
fileUrl: response.data.url
};
console.log(obj);
mainFileList.value.push(obj)
ElMessage({
type: 'success',
message: '上传成功！'
})
console.log(mainFileList.value)
}
}
// 文件上传成功处理
const handleFileSuccess2 = (response: any) => {
if (response.code == 200) {
let obj = {
// modelId:this.maId,
fileName: response.data.name.split("/")[4],
fileUrl: response.data.url
};
console.log(obj);
detailsFileList.value.push(obj)
ElMessage({
type: 'success',
message: '上传成功！'
})
console.log(detailsFileList.value)
}
}
//退租检修
const handleViewBack = () => {
settleinTitle.value = '退租检修'
isEditDisabled.value = true
equipmentDeploymentParams.value = {
/* 企业Id */
// ownCo: mainStore().userInfo.companyId,
/* 租赁范围 */
leaseScope: '',
/* 设备所在地 */
location: '',
/* 省 */
provinceId: '',
/* 市 */
cityId: '',
/* 区 */
areaId: '',
/* 设备所在地 省 */
addressEconomize: '',
/* 设备所在地 市 */
addressProvince: '',
/* 设备所在地 区 */
addressArea: '',
/* 设备类型 */
typeId: '',
/* 设备类型大类 */
deviceType: '',
/* 设备类型子类 */
deviceTypeSon: '',
/* 设备类型小类*/
deviceTypeSun: '',
/* 设备品牌 */
brand: '',
/* 设备型号 */
modelName: '',
/* 出场日期 */
productionDate: '',
/* 工作小时数 */
workingHours: '',
/* 整机序列号 */
serialNumber: '',
/* 月租金 */
monthLeasePrice: '',
/* 日租金 */
dayLeasePrice: '',
/* 是否提供机手 */
isOperator: '',
/* 机手月费用 */
jsMonthPrice: '',
/* 机手日费用 */
jsDayPrice: '',
/* 详细说明 */
description: '',
/* 设备主图片 */
picUrl: '',
/* 检测信息 ，保险信息*/
fileList: [],
/* 设备状态 */
maStatus: 15,
detectionList: [],
insureList: [],
picList: []
}
// 打开入驻弹框
dialogFormVisibleSettlein.value = true
}
</script>
<template>
@ -328,7 +492,7 @@ const clickConfirmReceipt = (row: any) => {
租赁协议
</el-button>
<el-button
@click="handleViewOrder(j)"
@click="handleViewBack(j)"
type="text"
size="mini"
style="color: #blue; font-weight: bold"
@ -353,10 +517,289 @@ const clickConfirmReceipt = (row: any) => {
:pageNumber="pageNumber"
:total="total"
/>
<!-- 退租检修弹框 -->
<el-dialog v-model="dialogFormVisibleSettlein" :title="settleinTitle"
width="60%" align-center :close-on-click-modal="false" >
<div style="height: 80px;">
<div
class="info"
style="margin-top: 5px;margin-bottom: 8px; display: flex; flex-wrap: wrap;"
>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 40px;">
<span>订单编号：10000212135656</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;">
<span>装备套数：2套</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;">
<span>退租时间：2024-10-10 10:00:00</span>
</div>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 12px;font-size: 16px;margin-left: 80px;">
<span>装备名称：挖掘机</span>
</div>
<div
class="info"
style="margin-top: 5px; display: flex; flex-wrap: wrap;"
>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;">
<span>装备编码：10000212135656</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;">
<span>型号：ZJO9777466</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;">
<span>数量：3</span>
</div>
</div>
</div>
<div class="title">
<span class="title-sign"></span>
<span class="title-text">外观检测</span>
</div>
<el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams"
>
<el-row>
<el-form-item label="是否合格：" prop="pass">
<el-select
v-model="equipmentDeploymentParams.pass"
placeholder="请选择是否合格"
clearable style="width: 350px">
<el-option label="是" value="0"></el-option>
<el-option label="否" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="费用：" prop="fy">
<el-input
v-model="equipmentDeploymentParams.fy"
placeholder="请输入设备数量"
clearable maxlength="20"
style="width: 350px;"
/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="备注：" prop="remark1">
<el-input
placeholder="请输入"
autocomplete="off"
style="width: 860px" maxlength="50"
v-model="equipmentDeploymentParams.remark1"
clearable />
</el-form-item>
</el-row>
</el-form>
<div class="uploadBox">
<div class="labelBox">
<div style="margin-left: 40px;">
<span style="font-size: 14px;">检验文件: </span>
</div>
<div style="margin-left: 20px;">
<el-upload ref="upload" :limit="6" :headers="upload.headers"
:action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg"
:on-success="handleFileSuccess" :auto-upload="true"
:before-upload="beforeUpload" :on-error="uploadError"
>
<el-button icon="el-icon-folder-add">上传文件</el-button>
</el-upload>
</div>
<div style="color: #999;font-size: 12px;margin-left: 20px;">支持格式：.jpg .png，单个文件大小不能超过2M</div>
</div>
<div class="imgsBox">
<div class="imgItem" v-for="(item,index) in mainFileList" :key="index">
<img class="picture-card" :src="item.fileUrl" alt="">
<div class="icon-list">
<span class="imgItem__icon hide" @click="handleDownload(item)">
<i class="el-icon-download"/>
</span>
<span class="imgItem__icon hide" @click="picturePreview(item)">
<i class="el-icon-zoom-in"/>
</span>
<span class="imgItem__icon hide" @click="handleRemove(mainFileList,index)">
<i class="el-icon-delete"/>
</span>
</div>
<p class="file-name">{{ item.fileName }}</p>
</div>
</div>
<div class="tipBox">
*注:图片排序为平台展示顺序，不得少于1张，不得多于6张
</div>
</div>
<div class="title">
<span class="title-sign"></span>
<span class="title-text">维修内容</span>
</div>
<el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams"
>
<el-row>
<el-form-item label="是否合格：" prop="pass2">
<el-select
v-model="equipmentDeploymentParams.pass2"
placeholder="请选择是否合格"
clearable style="width: 350px">
<el-option label="是" value="0"></el-option>
<el-option label="否" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="费用：" prop="fy2">
<el-input
v-model="equipmentDeploymentParams.fy2"
placeholder="请输入设备数量"
clearable maxlength="20"
style="width: 350px;"
/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="备注：" prop="remark2">
<el-input
placeholder="请输入"
autocomplete="off"
style="width: 860px" maxlength="50"
v-model="equipmentDeploymentParams.remark2"
clearable />
</el-form-item>
</el-row>
</el-form>
<div class="uploadBox">
<div class="labelBox">
<div style="margin-left: 40px;">
<span style="font-size: 14px;">检验文件: </span>
</div>
<div style="margin-left: 20px;">
<el-upload ref="upload2" :limit="6" :headers="upload.headers"
:action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg"
:on-success="handleFileSuccess2" :auto-upload="true"
:before-upload="beforeUpload" :on-error="uploadError"
>
<el-button icon="el-icon-folder-add">上传文件</el-button>
</el-upload>
</div>
<div style="color: #999;font-size: 12px;margin-left: 20px;">支持格式：.jpg .png，单个文件大小不能超过2M</div>
</div>
<div class="imgsBox">
<div class="imgItem" v-for="(item,index) in detailsFileList" :key="index">
<img class="picture-card" :src="item.fileUrl" alt="">
<div class="icon-list">
<span class="imgItem__icon hide" @click="handleDownload(item)">
<i class="el-icon-download"/>
</span>
<span class="imgItem__icon hide" @click="picturePreview(item)">
<i class="el-icon-zoom-in"/>
</span>
<span class="imgItem__icon hide" @click="handleRemove(detailsFileList,index)">
<i class="el-icon-delete"/>
</span>
</div>
<p class="file-name">{{ item.fileName }}</p>
</div>
</div>
<div class="tipBox">
*注:图片排序为平台展示顺序，不得少于1张，不得多于6张
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
<el-button @click="submitBtn" type="success">
保存
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.logo {
padding: 15px 0;
display: flex;
margin-left: 80px;
}
.title{
margin: 10px;
margin-left: 20px;
display: flex;
align-items: center;
}
.title-sign{
display: inline-block;
width: 4px;
height: 16px;
background: #409EFF;
margin-left: 45px;
}
.title-text{
font-weight: 700;
margin-left: 10px;
}
.uploadBox{
margin: 20px 40px;
}
.labelBox{
width: auto;
height: auto;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.imgsBox{
width: auto;
height: auto;
display: flex;
align-items: center;
margin-bottom: 30px;
margin-left: 20px;
.imgItem{
width: 160px;
height: 160px;
margin-right: 40px;
border: 1px dashed #bbb;
position: relative;
.picture-card{
width: 160px;
height: 160px;
}
.icon-list{
width: 60px;height: 20px;
position: absolute;
top: 70px;
left: 40px;
display: flex;
align-items: center;
}
.imgItem__icon{
margin: 0 5px;
}
.file-name{
font-size: 10px;
}
}
.hide{
display: none;
}
.imgItem:hover .hide{
display: block;
}
}
.tipBox{
color: red;
font-size: 12px;
margin-left: 20px;
}
.container {
width: 800px;
margin: 0 auto;