1082 lines
38 KiB
HTML
1082 lines
38 KiB
HTML
<template id="attachment-img" v-cloak>
|
|
<el-dialog title="选择图片" :visible.sync="dialogVisible" :close-on-click-modal="false" width="55%" @close='modalClose'
|
|
@opened="dialogOpened" class="attachmentImg">
|
|
<div flex="box:first" class="attachment_img_box">
|
|
<div class="attachment_img_left" v-loading="groupListLoading">
|
|
<el-menu class="group-menu" mode='vertical'>
|
|
<el-scrollbar style="height: 523px;width: 100%;">
|
|
<div class="goods-menu">
|
|
<el-menu-item index="all" @click="selected(0)">
|
|
<span>全部</span>
|
|
</el-menu-item>
|
|
<template v-for="(item, index) in groupItem">
|
|
<el-menu-item :index='item.id' @click="selected(item.id)">
|
|
<div flex="dir:left box:last" class="fenlei">
|
|
<i class="el-icon-circle-close gbfenlei" style="display: none"
|
|
@click='deleteType(item.id)'></i>
|
|
<div style="overflow: hidden;text-overflow: ellipsis;width: 100%">
|
|
<span>{{item.name}}</span>
|
|
</div>
|
|
</div>
|
|
</el-menu-item>
|
|
</template>
|
|
</div>
|
|
</el-scrollbar>
|
|
<el-popover placement="top" width="160" v-model="visible">
|
|
<el-input v-model="new_type_name" placeholder="请输入分组名称" size="mini"></el-input>
|
|
<div style="text-align: right; margin: 0;margin-top: 10px;">
|
|
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
|
|
<el-button type="primary" size="mini" @click="addNewAttType">确定</el-button>
|
|
</div>
|
|
<el-button slot="reference" style="margin-left: 22%;margin-top: 13px" size="small">
|
|
<i class="el-icon-circle-plus-outline"></i> 新建分组
|
|
</el-button>
|
|
</el-popover>
|
|
</el-menu>
|
|
</div>
|
|
<div flex="dir:top" class="attachment_img_right" v-loading="rightLoading">
|
|
<div class="selectBox">
|
|
<el-input placeholder="搜索图片名称" suffix-icon="el-icon-search" v-model="atta_name" size="small"
|
|
@keyup.enter.native="search(atta_name)" @input="search(atta_name)"
|
|
style="width: 30%;padding-left: 12px;"></el-input>
|
|
<div style="float: right;padding: 0 10px 0 0;">
|
|
<el-upload class="upload-demo" :action="UploadUrl()" :multiple="true" :limit="50"
|
|
:on-exceed="handleExceed" :file-list="fileList"
|
|
:on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload"
|
|
:data="uploadData" :on-progress="handProgress">
|
|
<el-button size="small" type="primary">
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
上传图片
|
|
</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<el-scrollbar class="scrollbar" style="height: 460px;">
|
|
<div class="app-attachment-list">
|
|
<template v-for="(item, index) in attachments">
|
|
<el-tooltip class="item" effect="dark" :content="item.name" placement="top"
|
|
:open-delay="1">
|
|
<div class="app-attachment-item" @click='selectedItem(index,item.url)'>
|
|
<div class="app-attachment-item-bj">
|
|
<div class="imgStyle">
|
|
<!-- <img class="app-attachment-img" :src="item.url"
|
|
style="width: 100%;height: 143px;border-radius: 5px;"> -->
|
|
<el-image
|
|
style="width: 100%; height: 143px;border-radius: 5px;"
|
|
:src="item.url"
|
|
fit="cover"></el-image>
|
|
<div class="mask" :style="getStyle2(index)">
|
|
<i class="el-icon-check center-icon pos-center"></i>
|
|
<p class="triangle"><i class="el-icon-check"></i></p>
|
|
</div>
|
|
</div>
|
|
<div class="app-attachment-name">{{item.name}}</div>
|
|
<i class="el-icon-error delete" @click='deleteItem(item.id)'></i>
|
|
</div>
|
|
</div>
|
|
</el-tooltip>
|
|
</template>
|
|
</div>
|
|
</el-scrollbar>
|
|
<div style="padding: 5px;text-align: right;margin-top:auto">
|
|
<el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize"
|
|
@current-change="current_change">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false" size='small'>取 消</el-button>
|
|
<el-button type="primary" @click="selectedItems()" size='small'>确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/config.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/qs.js" type="text/javascript" charset="utf-8"></script>
|
|
<script>
|
|
Vue.component('attachment-img', {
|
|
template: '#attachment-img',
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'img'
|
|
},
|
|
type2: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
op: {
|
|
type: String
|
|
},
|
|
},
|
|
// props: ['srcType'],
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
atta_name: '',
|
|
uploadParams: {
|
|
type_id: 0,
|
|
type: 1
|
|
},
|
|
category:0,//分类ID
|
|
keywords:'',
|
|
// type_id:'',//分类ID
|
|
total: 0,//默认数据总数
|
|
pagesize: 15,//每页的数据条数
|
|
currentPage: 1,//默认开始页面
|
|
dialogVisible: false, //是否显示模态框
|
|
groupItem: [], //分类组
|
|
attachments: [],
|
|
groupListLoading: true,
|
|
rightLoading: true,
|
|
new_type_name: '',
|
|
fileList: [],//文件列表
|
|
selectedArr: {},
|
|
attachmentList: '12',
|
|
// srcType:''
|
|
uploadData:{
|
|
key: "",
|
|
token: ""
|
|
},
|
|
// 七牛云上传储存区域的上传域名（华东、华北、华南、北美、东南亚）
|
|
upload_url: "",
|
|
// 七牛云返回储存图片的子域名
|
|
upload_addr: "",
|
|
file:{
|
|
Url:'',
|
|
path:'',
|
|
name:'',
|
|
size:0
|
|
},
|
|
att_type:'',
|
|
}
|
|
},
|
|
created() {
|
|
let that = this;
|
|
// that.init();
|
|
// console.log(111111,publishUrl)
|
|
},
|
|
methods: {
|
|
// getStyle(index) {
|
|
// let that = this;
|
|
// var currentPage = that.currentPage,
|
|
// s = that.selectedArr[that.type == 'img' ? 'danxuan' : 'item' + index + '' + currentPage]
|
|
// return s && s.page == currentPage && s.index == index ? 'border:1px solid #FF8000;background:#fff2e6' : ''
|
|
// },
|
|
getStyle2(index) {
|
|
let that = this;
|
|
var currentPage = that.currentPage,
|
|
s = that.selectedArr[that.type == 'img' ? 'danxuan' : 'item' + index + '' + currentPage]
|
|
return s && s.page == currentPage && s.index == index ? 'display:block' : ''
|
|
},
|
|
modalClose() {
|
|
let that = this;
|
|
that.selectedArr = {}
|
|
},
|
|
dialogOpened() {
|
|
this.getgroupItem();
|
|
this.getAttachment_List();
|
|
},
|
|
handProgress() {
|
|
let that = this;
|
|
that.rightLoading = true
|
|
// that.$message({
|
|
// message: '上传中，请稍等',
|
|
// type: 'success',
|
|
// duration:500,
|
|
// onClose:()=>{
|
|
// },
|
|
// })
|
|
},
|
|
//获取左边分组
|
|
getgroupItem() {
|
|
let that = this;
|
|
let appUrl = 'admin/file/get-category'
|
|
axios.get(publishUrl+fwqUrl+appUrl)
|
|
.then(function (res) {
|
|
if (res.data) {
|
|
that.groupItem = res.data.data
|
|
that.groupListLoading = false
|
|
that.visible = false
|
|
} else {
|
|
that.groupListLoading = false
|
|
}
|
|
})
|
|
// this.$api.get('admin/file/get-category', {"storeId": this.type2,}, res => {
|
|
// if (res.code == 1) {
|
|
// that.groupItem = res.data
|
|
// that.groupListLoading = false
|
|
// that.visible = false
|
|
// } else {
|
|
// that.groupListLoading = false
|
|
// }
|
|
// });
|
|
},
|
|
//获取图片列表
|
|
getAttachment_List() {
|
|
let that = this;
|
|
that.rightLoading = true
|
|
let appUrl = 'admin/file/get-picture'
|
|
axios.get(publishUrl+fwqUrl+appUrl + '?page=' + that.currentPage+ "&category=" + that.category+ "&keywords=" + that.keywords)
|
|
.then(function (res) {
|
|
if (res.data.data) {
|
|
that.attachments = res.data.data
|
|
that.total = +res.data.count
|
|
that.rightLoading = false
|
|
} else {
|
|
that.rightLoading = false
|
|
}
|
|
})
|
|
|
|
// let that = this;
|
|
// that.rightLoading = true
|
|
// this.$api.get('admin/file/get-picture', {
|
|
// "page": that.currentPage,
|
|
// "category": that.category,
|
|
// "keywords": that.keywords,
|
|
// "storeId": this.type2,
|
|
// }, res => {
|
|
// if (res.code == 1) {
|
|
// that.attachments = res.data
|
|
// that.total = res.count
|
|
// that.rightLoading = false
|
|
// } else {
|
|
// that.rightLoading = false
|
|
// }
|
|
// });
|
|
},
|
|
//新建分组
|
|
addNewAttType() {
|
|
let that = this;
|
|
that.groupListLoading = true
|
|
let appUrl = 'admin/file/save-category',
|
|
data = Qs.stringify({name: that.new_type_name});
|
|
axios.post(publishUrl+fwqUrl+appUrl,data)
|
|
.then(function (res) {
|
|
that.visible = false
|
|
that.$message({
|
|
message: res.data.message,
|
|
type: 'success',
|
|
duration: 500,
|
|
onClose: () => {
|
|
that.new_type_name = ''
|
|
that.getgroupItem()
|
|
},
|
|
})
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
// let that = this;
|
|
// that.groupListLoading = true
|
|
// this.$api.post('admin/file/save-category', {"storeId": this.type2, name: that.new_type_name}, res => {
|
|
// if (res.code == 1) {
|
|
// that.visible = false
|
|
// that.$message({
|
|
// message: res.msg,
|
|
// type: 'success',
|
|
// duration: 500,
|
|
// onClose: () => {
|
|
// that.new_type_name = ''
|
|
// that.getgroupItem()
|
|
// },
|
|
// })
|
|
// } else {
|
|
// that.visible = false
|
|
// that.$message.error(res.msg);
|
|
// }
|
|
// });
|
|
},
|
|
//删除分类
|
|
deleteType(id) {
|
|
let that = this;
|
|
that.groupListLoading = true
|
|
let appUrl = 'admin/file/del-picture-category'
|
|
axios.get(publishUrl+fwqUrl+appUrl + '?id=' + id)
|
|
.then(function (res) {
|
|
if (res.data.code=='1') {
|
|
that.visible = false
|
|
that.$message({
|
|
message: res.data.message,
|
|
type: 'success',
|
|
duration: 500,
|
|
onClose: () => {
|
|
that.getgroupItem()
|
|
},
|
|
})
|
|
}
|
|
else {
|
|
that.$message.error(res.data.message);
|
|
that.groupListLoading = false
|
|
}
|
|
})
|
|
|
|
// let that = this;
|
|
// that.groupListLoading = true
|
|
// this.$api.post('admin/file/del-picture-category', {"id": id,}, res => {
|
|
// if (res.code == 1) {
|
|
// that.visible = false
|
|
// that.$message({
|
|
// message: res.msg,
|
|
// type: 'success',
|
|
// duration: 500,
|
|
// onClose: () => {
|
|
// that.getgroupItem()
|
|
// },
|
|
// })
|
|
// } else {
|
|
// that.$message.error(res.msg);
|
|
// that.groupListLoading = false
|
|
// }
|
|
// });
|
|
},
|
|
search(atta_name) {
|
|
let that = this;
|
|
console.log(atta_name)
|
|
this.keywords = atta_name
|
|
// _this.init(keywords);
|
|
that.getAttachment_List();
|
|
},
|
|
//切换分页
|
|
current_change(currentPage) {
|
|
let that = this;
|
|
that.currentPage = currentPage;
|
|
that.getAttachment_List();
|
|
},
|
|
//删除图片
|
|
deleteItem(id) {
|
|
let that = this;
|
|
that.rightLoading = true
|
|
let appUrl = 'admin/file/del-picture'
|
|
axios.post(publishUrl+fwqUrl+appUrl,Qs.stringify({id:id}))
|
|
.then(function (res) {
|
|
that.$message({
|
|
message: res.data.message,
|
|
type: 'success',
|
|
duration: 500,
|
|
onClose: () => {
|
|
that.getAttachment_List()
|
|
},
|
|
})
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
// let that = this;
|
|
// that.rightLoading = true
|
|
// this.$api.post('admin/file/del-picture', {"id": id,}, res => {
|
|
// if (res.code == 1) {
|
|
// that.visible = false
|
|
// that.$message({
|
|
// message: res.msg,
|
|
// type: 'success',
|
|
// duration: 500,
|
|
// onClose: () => {
|
|
// that.getAttachment_List()
|
|
// },
|
|
// })
|
|
// } else {
|
|
// that.$message.error(res.msg);
|
|
// that.groupListLoading = false
|
|
// }
|
|
// });
|
|
},
|
|
UploadUrl: function () {
|
|
let backendPath = publishUrl
|
|
return backendPath+fwqUrl + "admin/file/get-category";
|
|
},
|
|
//上传前判断
|
|
beforeUpload: function (file) {
|
|
console.log('上传前判断', file)
|
|
// var date = new Date();
|
|
// filePath = 'yzd_edu/image/' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getTime() + this.getRandom(111111, 999999) + '.' + file.name.split(".")[1]
|
|
// this.uploadData.key = filePath
|
|
const isIMG =
|
|
file.type === 'image/jpg' ||
|
|
file.type === 'image/jpeg' ||
|
|
file.type === 'image/png' ||
|
|
file.type === 'image/gif' ||
|
|
file.type === 'image/x-icon'
|
|
const isLt = file.size / 1024 / 1024 < 50
|
|
if (!isIMG) {
|
|
this.$message.error("上传图片只支持jpg、jpeg、png、ico格式!");
|
|
return false;
|
|
}
|
|
if (!isLt) {
|
|
this.$message.error("文件大小不能超过 50MB!");
|
|
return false;
|
|
}
|
|
},
|
|
handleError: function (res) {
|
|
this.$message({
|
|
message: "上传失败",
|
|
duration: 2000,
|
|
type: "warning"
|
|
});
|
|
},
|
|
handleSuccess: function (res, file, fileList) {
|
|
// console.log('123',res)
|
|
// console.log('234',file)
|
|
console.log('345', fileList)
|
|
this.file = file
|
|
this.addAttachment();//保存到数据库
|
|
},
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
},
|
|
addAttachment() {
|
|
let that = this;
|
|
const formData = new FormData();
|
|
formData.append("file", this.file.raw);
|
|
formData.append("category", this.category);
|
|
formData.append("storeId", this.type2);
|
|
|
|
let appUrl = 'admin/file/upload'
|
|
axios.post(publishUrl+fwqUrl+appUrl, formData,{headers: {'Content-Type': 'multipart/form-data'}})
|
|
.then(function (res) {
|
|
that.getAttachment_List()//刷新列表
|
|
that.$message.success("上传成功");
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
// this.$api.post('admin/file/upload', formData, res => {
|
|
// if (res.code == 1) {
|
|
// that.getAttachment_List()//刷新列表
|
|
// that.$message.success("上传成功");
|
|
// } else {
|
|
// that.$message.error(res.msg);
|
|
// console.log(res.msg);
|
|
// }
|
|
// });
|
|
},
|
|
// getRandom(start, end, fixed = 0) {
|
|
// let differ = end - start
|
|
// let random = Math.random()
|
|
// return (start + differ * random).toFixed(fixed)
|
|
// },
|
|
selected(id) {
|
|
let that = this;
|
|
that.rightLoading = true
|
|
// that.uploadParams.type_id = id
|
|
that.currentPage = 1
|
|
that.category = id
|
|
that.getAttachment_List();
|
|
},
|
|
selectedItem(index, url) {
|
|
let that = this;
|
|
// console.log(index,url)
|
|
var istype = that.type == 'img', str = istype ? 'danxuan' : 'item' + index + '' + that.currentPage,
|
|
s = that.selectedArr[str]
|
|
if (s && s.index == index) {
|
|
that.$delete(that.selectedArr, str);
|
|
} else {
|
|
if (istype) {
|
|
that.$delete(that.selectedArr, str);
|
|
}
|
|
that.$set(that.selectedArr, str, {
|
|
page: that.currentPage,
|
|
index,
|
|
url
|
|
})
|
|
}
|
|
},
|
|
selectedItems() {
|
|
let that = this;
|
|
that = this;
|
|
var item = that.selectedArr, str = '', arr = []
|
|
for (const key in item) {
|
|
str += str ? ',' + item[key].url : item[key].url
|
|
arr.push(item[key].url)
|
|
}
|
|
// console.log(str,arr)
|
|
that.$emit('attachment', {
|
|
str,
|
|
arr
|
|
})
|
|
that.dialogVisible = false
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.el-loading-mask {
|
|
top: -15px;
|
|
left: -20px;
|
|
}
|
|
.el-dialog {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.el-dialog .goods-menu {
|
|
width: 160px;
|
|
}
|
|
|
|
.el-dialog .goods-menu li {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.el-dialog .el-dialog__title {
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.el-dialog .el-dialog__header {
|
|
padding: 10px 20px;
|
|
line-height: 1;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
|
|
.el-dialog .el-dialog__body {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.el-dialog .el-dialog__footer {
|
|
border-top: 1px solid #f2f2f2;
|
|
}
|
|
|
|
.el-dialog .el-button--primary {
|
|
color: #fff;
|
|
background-color: #2A75ED;;
|
|
border-color: #2A75ED;;
|
|
}
|
|
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background-color: #2A75ED;
|
|
color: #FFF;
|
|
}
|
|
|
|
.el-dialog .el-dialog__wrapper {
|
|
z-index: 2009 !important;
|
|
}
|
|
|
|
input[type=file] {
|
|
display: none;
|
|
}
|
|
|
|
.el-dialog .delete {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
font-size: 16px;
|
|
display: none;
|
|
}
|
|
|
|
.el-dialog .app-attachment-item {
|
|
outline: none;
|
|
}
|
|
|
|
.el-dialog .app-attachment-item:hover .delete {
|
|
display: block;
|
|
}
|
|
|
|
.el-dialog .el-upload-list {
|
|
position: absolute;
|
|
max-height: 355px;
|
|
/* overflow-y: auto; */
|
|
width: 252px;
|
|
background: #fff;
|
|
position: absolute;
|
|
z-index: 1;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
|
right: 0;
|
|
}
|
|
|
|
/* 图片上传 */
|
|
.el-dialog .data-image {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* 图片选择框 */
|
|
.el-dialog .attachment_img_box {
|
|
/*border: 1px solid rgb(227, 227, 227);*/
|
|
margin-bottom: 10px;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.el-dialog .attachment_img_left {
|
|
border-right: 1px solid #F2F2F2;
|
|
}
|
|
|
|
.el-dialog .group-menu {
|
|
border-right: none;
|
|
width: 165px;
|
|
}
|
|
|
|
.el-dialog .selectBox {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.el-dialog .app-attachment-list {
|
|
/*padding: 5px;*/
|
|
width: 100%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.el-dialog .app-attachment-list * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.el-dialog .app-attachment-list:after {
|
|
clear: both;
|
|
display: block;
|
|
content: " ";
|
|
}
|
|
|
|
.el-dialog .app-attachment-item {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
position: relative;
|
|
float: left;
|
|
width: 20%;
|
|
height: 176px;
|
|
padding-bottom: 20px;
|
|
/*margin: 7.5px;*/
|
|
text-align: center;
|
|
/*padding: 10px 10px 0;*/
|
|
}
|
|
|
|
.el-dialog .app-attachment-item-bj {
|
|
margin: 10px;
|
|
}
|
|
|
|
.el-dialog .imgStyle {
|
|
position: relative;
|
|
}
|
|
|
|
.el-dialog .imgStyle .mask {
|
|
display: none;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background: rgba(199, 194, 194, .7);
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.el-dialog .mask .center-icon {
|
|
font-size: 40px;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-dialog .mask .center-icon:before {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
.el-dialog .mask .pos-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.el-dialog .mask .triangle {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -26px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
background: #409eff !important;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.el-dialog .mask .triangle .el-icon-check:before {
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
transform: rotate(-67deg);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.el-dialog .mask .triangle i {
|
|
color: #fff;
|
|
}
|
|
|
|
.app-attachment-item.checked,
|
|
.app-attachment-item.selected {
|
|
box-shadow: 0 0 0 1px #1ed0ff;
|
|
background: #daf5ff;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.app-attachment-item.checked .app-attachment-active-icon,
|
|
.app-attachment-item.selected .app-attachment-active-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.app-attachment-item .app-attachment-img {
|
|
display: block;
|
|
}
|
|
|
|
.app-attachment-item .file-type-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
background: #666;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.el-dialog .scrollbar {
|
|
height: 100%;
|
|
}
|
|
|
|
.el-dialog .app-attachment-name {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/*margin-top: 5px;*/
|
|
overflow: hidden;
|
|
}
|
|
|
|
.el-dialog .el-upload-list {
|
|
display: none;
|
|
}
|
|
|
|
.el-dialog .el-menu-item.is-active {
|
|
/*border-color: transparent;*/
|
|
color: #409eff !important;
|
|
background: #c3e1fe !important;
|
|
}
|
|
|
|
.el-dialog .el-menu-item:focus, .el-dialog .el-menu-item:hover {
|
|
outline: 0;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.el-dialog .el-menu-item.is-active:focus, .el-dialog .el-menu-item.is-active:hover {
|
|
color: #409eff !important;
|
|
background: #c3e1fe !important;
|
|
}
|
|
|
|
.el-dialog .el-menu-item, .el-dialog .el-submenu__title {
|
|
width: 127px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.el-dialog .el-menu-item {
|
|
padding: 0;
|
|
}
|
|
|
|
.el-dialog .el-scrollbar__wrap {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.el-dialog .fenlei {
|
|
text-align: center;
|
|
}
|
|
|
|
.fenlei:hover .gbfenlei {
|
|
display: block !important;
|
|
}
|
|
|
|
.gbfenlei {
|
|
position: absolute;
|
|
top: -9px;
|
|
right: -13px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
color: #d7d7d7;
|
|
}
|
|
|
|
[flex] {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex
|
|
}
|
|
|
|
[flex] > * {
|
|
display: block
|
|
}
|
|
|
|
[flex] > [flex] {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex
|
|
}
|
|
|
|
[flex~="dir:left"] {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row
|
|
}
|
|
|
|
[flex~="dir:right"] {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: reverse;
|
|
-webkit-flex-direction: row-reverse;
|
|
-ms-flex-direction: row-reverse;
|
|
flex-direction: row-reverse;
|
|
-webkit-box-pack: end
|
|
}
|
|
|
|
[flex~="dir:top"] {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column
|
|
}
|
|
|
|
[flex~="dir:bottom"] {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: reverse;
|
|
-webkit-flex-direction: column-reverse;
|
|
-ms-flex-direction: column-reverse;
|
|
flex-direction: column-reverse;
|
|
-webkit-box-pack: end
|
|
}
|
|
|
|
[flex~="main:left"] {
|
|
-webkit-box-pack: start;
|
|
-webkit-justify-content: flex-start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start
|
|
}
|
|
|
|
[flex~="main:right"] {
|
|
-webkit-box-pack: end;
|
|
-webkit-justify-content: flex-end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end
|
|
}
|
|
|
|
[flex~="main:justify"] {
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between
|
|
}
|
|
|
|
[flex~="main:center"] {
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center
|
|
}
|
|
|
|
[flex~="cross:top"] {
|
|
-webkit-box-align: start;
|
|
-webkit-align-items: flex-start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start
|
|
}
|
|
|
|
[flex~="cross:bottom"] {
|
|
-webkit-box-align: end;
|
|
-webkit-align-items: flex-end;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end
|
|
}
|
|
|
|
[flex~="cross:center"] {
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center
|
|
}
|
|
|
|
[flex~="cross:baseline"] {
|
|
-webkit-box-align: baseline;
|
|
-webkit-align-items: baseline;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline
|
|
}
|
|
|
|
[flex~="cross:stretch"] {
|
|
-webkit-box-align: stretch;
|
|
-webkit-align-items: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch
|
|
}
|
|
|
|
[flex~="box:mean"] > *, [flex~="box:first"] > *, [flex~="box:last"] > *, [flex~="box:justify"] > * {
|
|
width: 0;
|
|
height: auto;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-webkit-flex-shrink: 1;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1
|
|
}
|
|
|
|
[flex~="box:first"] > :first-child, [flex~="box:last"] > :last-child, [flex~="box:justify"] > :first-child, [flex~="box:justify"] > :last-child {
|
|
width: auto;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex-grow: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
[flex~="dir:top"][flex~="box:mean"] > *, [flex~="dir:top"][flex~="box:first"] > *, [flex~="dir:top"][flex~="box:last"] > *, [flex~="dir:top"][flex~="box:justify"] > *, [flex~="dir:bottom"][flex~="box:mean"] > *, [flex~="dir:bottom"][flex~="box:first"] > *, [flex~="dir:bottom"][flex~="box:last"] > *, [flex~="dir:bottom"][flex~="box:justify"] > * {
|
|
width: auto;
|
|
height: 0;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-webkit-flex-shrink: 1;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1
|
|
}
|
|
|
|
[flex~="dir:top"][flex~="box:first"] > :first-child, [flex~="dir:top"][flex~="box:last"] > :last-child, [flex~="dir:top"][flex~="box:justify"] > :first-child, [flex~="dir:top"][flex~="box:justify"] > :last-child, [flex~="dir:bottom"][flex~="box:first"] > :first-child, [flex~="dir:bottom"][flex~="box:last"] > :last-child, [flex~="dir:bottom"][flex~="box:justify"] > :first-child [flex~="dir:bottom"][flex~="box:justify"] > :last-child {
|
|
height: auto;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex-grow: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
[flex-box="0"] {
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex-grow: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
[flex-box="1"] {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-webkit-flex-shrink: 1;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1
|
|
}
|
|
|
|
[flex-box="2"] {
|
|
-webkit-box-flex: 2;
|
|
-webkit-flex-grow: 2;
|
|
-ms-flex-positive: 2;
|
|
flex-grow: 2;
|
|
-webkit-flex-shrink: 2;
|
|
-ms-flex-negative: 2;
|
|
flex-shrink: 2
|
|
}
|
|
|
|
[flex-box="3"] {
|
|
-webkit-box-flex: 3;
|
|
-webkit-flex-grow: 3;
|
|
-ms-flex-positive: 3;
|
|
flex-grow: 3;
|
|
-webkit-flex-shrink: 3;
|
|
-ms-flex-negative: 3;
|
|
flex-shrink: 3
|
|
}
|
|
|
|
[flex-box="4"] {
|
|
-webkit-box-flex: 4;
|
|
-webkit-flex-grow: 4;
|
|
-ms-flex-positive: 4;
|
|
flex-grow: 4;
|
|
-webkit-flex-shrink: 4;
|
|
-ms-flex-negative: 4;
|
|
flex-shrink: 4
|
|
}
|
|
|
|
[flex-box="5"] {
|
|
-webkit-box-flex: 5;
|
|
-webkit-flex-grow: 5;
|
|
-ms-flex-positive: 5;
|
|
flex-grow: 5;
|
|
-webkit-flex-shrink: 5;
|
|
-ms-flex-negative: 5;
|
|
flex-shrink: 5
|
|
}
|
|
|
|
[flex-box="6"] {
|
|
-webkit-box-flex: 6;
|
|
-webkit-flex-grow: 6;
|
|
-ms-flex-positive: 6;
|
|
flex-grow: 6;
|
|
-webkit-flex-shrink: 6;
|
|
-ms-flex-negative: 6;
|
|
flex-shrink: 6
|
|
}
|
|
|
|
[flex-box="7"] {
|
|
-webkit-box-flex: 7;
|
|
-webkit-flex-grow: 7;
|
|
-ms-flex-positive: 7;
|
|
flex-grow: 7;
|
|
-webkit-flex-shrink: 7;
|
|
-ms-flex-negative: 7;
|
|
flex-shrink: 7
|
|
}
|
|
|
|
[flex-box="8"] {
|
|
-webkit-box-flex: 8;
|
|
-webkit-flex-grow: 8;
|
|
-ms-flex-positive: 8;
|
|
flex-grow: 8;
|
|
-webkit-flex-shrink: 8;
|
|
-ms-flex-negative: 8;
|
|
flex-shrink: 8
|
|
}
|
|
|
|
[flex-box="9"] {
|
|
-webkit-box-flex: 9;
|
|
-webkit-flex-grow: 9;
|
|
-ms-flex-positive: 9;
|
|
flex-grow: 9;
|
|
-webkit-flex-shrink: 9;
|
|
-ms-flex-negative: 9;
|
|
flex-shrink: 9
|
|
}
|
|
|
|
[flex-box="10"] {
|
|
-webkit-box-flex: 10;
|
|
-webkit-flex-grow: 10;
|
|
-ms-flex-positive: 10;
|
|
flex-grow: 10;
|
|
-webkit-flex-shrink: 10;
|
|
-ms-flex-negative: 10;
|
|
flex-shrink: 10
|
|
}
|
|
|
|
[flex~="wrap:nowrap"] {
|
|
flex-wrap: nowrap
|
|
}
|
|
|
|
[flex~="wrap:wrap"] {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
[flex~="wrap:wrap-reverse"] {
|
|
flex-wrap: wrap-reverse
|
|
}
|
|
</style> |