github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-30 14:31:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 上传样式调整

Browse Source
This commit is contained in:
From-wh 2023-06-27 19:03:10 +08:00
parent e9c9ea189e
commit 85dc465ff1
1 changed files with 72 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
template/admin/src/pages/app/upload/index.vue
View File

@ -1,19 +1,24 @@
<template>
<div class="main" v-loading="loading">
<div v-if="uploading">
<div class="img-list">
<div class="img-list" :class="{ 'none-card': imgList.length }">
<el-upload
ref="upload"
:action="fileUrl"
list-type="picture-card"
:on-change="fileChange"
:on-error="fileError"
:before-upload="beforeUpload"
:file-list="imgList"
:auto-upload="false"
:multiple="true"
:limit="limit"
accept="image/*"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="default" class="upload-card" v-if="!imgList.length">
<i class="el-icon-plus"></i>
<p class="text">点击选择图片</p>
</div>
<div slot="file" slot-scope="{ file }">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<i class="el-icon-error btndel" @click="handleRemove(file)" />
@ -22,10 +27,13 @@
</div>
<div class="footer">
<div>共{{ imgList.length }}/{{ limit }}张，{{ (allSize / 1000000).toFixed(2) }} M</div>
<div v-if="imgList.length">共{{ imgList.length }}/{{ limit }}张，{{ (allSize / 1000000).toFixed(2) }} M</div>
<div v-else></div>
<div class="upload-btn">
<div v-if="imgList.length < limit" class="btn" @click="selectImgs">选择图片</div>
<div class="btn upload" @click="submitUpload">确认上传</div>
<div v-if="imgList.length < limit" class="btn" @click="selectImgs">
{{ imgList.length ? '继续选择' : '选择图片' }}
</div>
<div class="btn upload" :class="{ 'no-pic': !imgList.length }" @click="submitUpload">确认上传</div>
</div>
</div>
</div>
@ -131,7 +139,11 @@ export default {
fileError(err, file, fileList) {
console.log(err, file, fileList);
},
beforeUpload(file) {
console.log(file);
},
async fileChange(file, fileList) {
console.log(file);
if (file.size >= 2097152) {
await this.comImg(file.raw).then((res) => {
fileList.map((e) => {
@ -184,27 +196,49 @@ export default {
padding: 10px;
overflow: scroll;
height: calc(100vh - 50px);
background-color: #fff;
}
/deep/ .el-upload--picture-card,
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 113px;
height: 113px;
line-height: 113px;
overflow: inherit;
margin: 5px;
// width: 113px;
// height: 113px;
// line-height: 113px;
// overflow: inherit;
margin: 1% 1% 0px 1%;
width: 31.3%;
height: 31.3%;
padding-top: 31.3%;
aspect-ratio: 1 / 1;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item > div {
// position: relative;
width: 100%;
height: 100%;
}
/deep/ .el-upload--picture-card {
width: 100%;
height: 100%;
display: flex;
height: 146px;
justify-content: center;
align-items: center;
background: #f9f9f9;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item img {
width: 111px;
height: 111px;
width: 100%;
height: 100%;
border-radius: 6px;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.btndel {
position: absolute;
z-index: 1;
font-size: 18px;
right: 0px;
top: 0px;
right: -1px;
top: -1px;
color: #282828;
opacity: 0.5;
}
@ -217,6 +251,9 @@ export default {
padding-left: 100px;
flex-wrap: wrap;
}
.none-card /deep/ .el-upload--picture-card {
display: none !important;
}
.footer {
padding: 0 10px 0 15px;
position: fixed;
@ -250,6 +287,26 @@ export default {
color: #fff;
margin-left: 10px;
}
.upload.no-pic {
background: #e93323;
opacity: 0.3;
}
}
.upload-card {
display: flex;
flex-direction: column;
line-height: 16px;
.el-icon-plus {
font-size: 28px;
font-weight: bold;
color: #bbbbbb;
}
.text {
font-size: 13px;
font-weight: 400;
color: #999999;
margin-top: 18px;
}
}
.upload-success {
display: flex;