<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="活动优惠券列表" name="first">
				<div style="display: inline-block;margin: 3px;">
					<div style="position: relative;display: inline-block;">
						<span>券包名称：</span>
						<el-input style="width: 200px;" @keydown.enter.native="refresh" placeholder="请输入券包名称"
							v-model="couponIssueNameT">
						</el-input>&nbsp;&nbsp;
					</div>
				</div>
				<div style="display: inline-block;">
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">查询
					</el-button>
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document"
						:disabled="!isAuth('couponissue:add')" @click="amend()">添加
					</el-button>
				</div>
				<el-table v-loading="tableDataLoading" :data="tableData.list">
					<el-table-column prop="couponIssueId" fixed="left" label="编号" width="80">
					</el-table-column>
					<el-table-column prop="classify" label="券包类型" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.classify==1">活动优惠券</span>
							<span v-if="scope.row.classify==2">售卖优惠券</span>
						</template>
					</el-table-column>
					<el-table-column prop="couponIssueName" label="券包名称" width="150">
					</el-table-column>
					<el-table-column prop="couponIssueImage" label="券包图片">
						<template slot-scope="scope">
							<img v-if="scope.row.couponIssueImage" :src="scope.row.couponIssueImage" alt="" width="40"
								height="40">
						</template>
					</el-table-column>
					<el-table-column prop="price" label="券包价值">
					</el-table-column>
					<el-table-column label="是否限量">
						<template slot-scope="scope">
							<div v-if="scope.row.isLimit==1">限量</div>
							<div v-if="scope.row.isLimit==2">不限量</div>
						</template>
					</el-table-column>
					<el-table-column prop="couponNum" label="库存劵包">
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<span style="color: #3E8EF7;" v-if="scope.row.status == 1">开启</span>
							<span v-if="scope.row.status == 2">关闭</span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="150">
					</el-table-column>
					<el-table-column label="操作" width="150" fixed="right">
						<template slot-scope="scope">
							<el-button size="mini" type="primary"
								@click="listBtn(scope.row)" style="margin: 3px;">优惠券列表
							</el-button>
							<el-button size="mini" type="primary" :disabled="!isAuth('couponissue:update')"
								@click="amend(scope.row)" style="margin: 3px;">修改
							</el-button>
							<el-button size="mini" type="danger" :disabled="!isAuth('couponissue:delete')"
								@click="shopdeletes(scope.row)" style="margin: 3px;">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:page-sizes="[10, 20, 30, 50, 100]" :page-size="size" :current-page="page"
						layout="total,sizes, prev, pager, next" :total="tableData.totalCount">
					</el-pagination>
				</div>
			</el-tab-pane>

			<el-tab-pane label="售卖优惠券列表" name="putong">
				<div style="display: inline-block;margin: 3px;">
					<div style="position: relative;display: inline-block;">
						<span>券包名称：</span>
						<el-input style="width: 200px;" @keydown.enter.native="refresh" placeholder="请输入券包名称"
							v-model="couponIssueNameT">
						</el-input>&nbsp;&nbsp;
					</div>
				</div>
				<div style="display: inline-block;">
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">查询
					</el-button>
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document"
						:disabled="!isAuth('couponissue:add')" @click="amend()">添加
					</el-button>
				</div>
				<el-table v-loading="tableDataLoading" :data="tableData.list">
					<el-table-column prop="couponIssueId" fixed="left" label="编号" width="80">
					</el-table-column>
					<el-table-column prop="classify" label="券包类型" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.classify==1">活动优惠券</span>
							<span v-if="scope.row.classify==2">售卖优惠券</span>
						</template>
					</el-table-column>
					<el-table-column prop="couponIssueName" label="券包名称" width="150">
					</el-table-column>
					<el-table-column prop="couponIssueImage" label="券包图片">
						<template slot-scope="scope">
							<img v-if="scope.row.couponIssueImage" :src="scope.row.couponIssueImage" alt="" width="40"
								height="40">
						</template>
					</el-table-column>
					<el-table-column prop="couponIssueImage" label="主页图">
						<template slot-scope="scope">
							<img v-if="scope.row.couponIssueImage" :src="scope.row.couponIssueImage" alt="" width="40"
								height="40">
						</template>
					</el-table-column>

					<el-table-column prop="payNotice" label="购买须知" width="300">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{scope.row.payNotice}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="originalPrice" label="券包原价">
					</el-table-column>
					<el-table-column prop="price" label="券包价格">
					</el-table-column>
					<el-table-column label="是否限量">
						<template slot-scope="scope">
							<div v-if="scope.row.isLimit==1">限量</div>
							<div v-if="scope.row.isLimit==2">不限量</div>
						</template>
					</el-table-column>
					<el-table-column prop="couponNum" label="库存劵包">
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<span style="color: #3E8EF7;" v-if="scope.row.status == 1">开启</span>
							<span v-if="scope.row.status == 2">关闭</span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="150">
					</el-table-column>
					<el-table-column label="操作" width="150" fixed="right">
						<template slot-scope="scope">
							<el-button size="mini" type="primary"
								@click="listBtn(scope.row)" style="margin: 3px;">优惠券列表
							</el-button>
							<el-button size="mini" type="primary" :disabled="!isAuth('couponissue:update')"
								@click="amend(scope.row)" style="margin: 3px;">修改
							</el-button>
							<el-button size="mini" type="danger" :disabled="!isAuth('couponissue:delete')"
								@click="shopdeletes(scope.row)" style="margin: 3px;">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:page-sizes="[10, 20, 30, 50, 100]" :page-size="size" :current-page="page"
						layout="total,sizes, prev, pager, next" :total="tableData.totalCount">
					</el-pagination>
				</div>
			</el-tab-pane>
			<!-- 修改 -->
			<el-dialog :title="titles" :visible.sync="dialogFormVisible" center width="80%">
				<el-form :model="form">
					<el-form-item label="券包名称：" :label-width="formLabelWidth">
						<el-input v-model="form.couponIssueName" style="width:65%;" placeholder="请输入券包名称"></el-input>
					</el-form-item>
					<el-form-item label="券包图片：" :label-width="formLabelWidth">
						<div
							style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;display: inline-block;">
							<el-upload class="avatar-uploader" v-model="form.couponIssueImage"
								:action="uploadUrl" :show-file-list="false"
								:on-success="handleAvatarSuccess2">
								<img v-if="form.couponIssueImage" :src="form.couponIssueImage" class="avatar"
									style="width: 148px;height: 148px;" />
								<i v-else class="el-icon-plus avatar-uploader-icon"
									style="font-size: 28px;color: #8c939d"></i>
							</el-upload>
						</div>
					</el-form-item>
					<el-form-item label="主页图：" :label-width="formLabelWidth" v-if="classify==2">
						<div
							style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;display: inline-block;">
							<el-upload class="avatar-uploader" v-model="form.couponContentImage"
								:action="uploadUrl" :show-file-list="false"
								:on-success="handleUploadSuccess">
								<img v-if="form.couponContentImage" :src="form.couponContentImage" class="avatar"
									style="width: 148px;height: 148px;" />
								<i v-else class="el-icon-plus avatar-uploader-icon"
									style="font-size: 28px;color: #8c939d"></i>
							</el-upload>
						</div>
						<!-- <div class="imgs" v-for="(item,index) in couponContentImage" :key="index">
							<img width="100%" class="images" height="100%" :src="item" alt="">
							<span class="dels">
								<i class="el-icon-delete" @click="clear(index)"></i>
							</span>
						</div>

						<div class="imgs" style="">
							<el-upload :action="uploadUrl"
								list-type="picture-card" :show-file-list="false" :on-success="handleUploadSuccess"
								:on-progress="onprogress1">
								<el-progress v-if="percentage1>0 && percentage1<100" type="circle"
									:percentage="percentage1"></el-progress>
								<i v-else class="el-icon-plus"></i>
							</el-upload>
						</div> -->
					</el-form-item>
					<el-form-item label="选择优惠券：" :label-width="formLabelWidth">
						<el-tag :key="tag" v-for="(tag,index) in couponIdList" closable :disable-transitions="false"
							@close="couponIdClose(tag,index)">
							{{tag}}
						</el-tag>
						<el-button class="button-new-tag" size="small" @click="couponIdBtn(couponIds)">添加</el-button>
					</el-form-item>
					<el-form-item label="券包原价价格：" :label-width="formLabelWidth"  v-if="classify==2">
						<el-input v-model="form.originalPrice" style="width:65%;" placeholder="请输入券包原价价格"></el-input>
					</el-form-item>

					<el-form-item label="券包价格/价值：" :label-width="formLabelWidth">
						<el-input v-model="form.price" style="width:65%;" placeholder="请输入券包价格/价值"></el-input>
					</el-form-item>


					<el-form-item label="状态：" :label-width="formLabelWidth">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="2">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="限量：" :label-width="formLabelWidth">
						<el-radio-group v-model="form.isLimit">
							<el-radio :label="1">限量</el-radio>
							<el-radio :label="2">不限量</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="库存劵包：" :label-width="formLabelWidth">
						<el-input v-model="form.couponNum" style="width:65%;" placeholder="请输入库存劵包"></el-input>
					</el-form-item>
					<el-form-item label="购买须知：" :label-width="formLabelWidth"  v-if="classify==2">
						<quill-editor ref="myTextEditor" v-model="form.payNotice"
							:options="quillOption"
							style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;">
						</quill-editor>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 优惠券列表 -->
			<el-dialog title="优惠券列表" :visible.sync="dialogFormVisible4" center width="70%">

				<el-table v-loading="tableDataLoadingY" :data="tableDataYhq.list">
					<el-table-column prop="couponId" label="编号" width="80" fixed="left">
					</el-table-column>
					<el-table-column prop="couponName" label="优惠券名称" fixed="left">
					</el-table-column>
					<el-table-column prop="couponPicture" label="优惠券图片">
						<template slot-scope="scope">
							<img v-if="scope.row.couponPicture" :src="scope.row.couponPicture" alt="" width="40"
								height="40">
						</template>
					</el-table-column>
					<el-table-column prop="money" label="优惠券面值" width="100">
					</el-table-column>
					<el-table-column prop="minMoney" label="优惠券最低消费" width="150">
					</el-table-column>
					<el-table-column prop="endDate" label="优惠券有效期限(天)" width="150">
					</el-table-column>
					<el-table-column label="操作" width="150" fixed="right">
						<template slot-scope="scope">
							<el-button style="margin-left:15px;" size="mini" type="primary" icon="document"
								@click="changeFun(scope.row)">确定</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChangeY" @current-change="handleCurrentChangeY"
						:page-sizes="[10, 20, 30, 50, 100]" :page-size="size1" :current-page="page1"
						layout="total,sizes, prev, pager, next" :total="tableDataYhq.totalCount">
					</el-pagination>
				</div>
			</el-dialog>
			<!-- 优惠券列表 -->
			<el-dialog title="优惠券列表" :visible.sync="dialogFormVisible5" center width="70%">
				<el-table v-loading="tableDataLoadingY" :data="tableDataList">
					<el-table-column prop="couponId" label="编号" width="80" fixed="left">
					</el-table-column>
					<el-table-column prop="couponName" label="优惠券名称" fixed="left">
					</el-table-column>
					<el-table-column prop="couponPicture" label="优惠券图片">
						<template slot-scope="scope">
							<img v-if="scope.row.couponPicture" :src="scope.row.couponPicture" alt="" width="40"
								height="40">
						</template>
					</el-table-column>
					<el-table-column prop="money" label="优惠券面值" width="100">
					</el-table-column>
					<el-table-column prop="minMoney" label="优惠券最低消费" width="150">
					</el-table-column>
					<el-table-column prop="endDate" label="优惠券有效期限(天)" width="150">
					</el-table-column>
				</el-table>
			</el-dialog>
		</el-tabs>
	</div>
</template>

<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import quillConfig from '../locality/quill-config.js'
	import { serverPaths } from '@/utils/enumData'
	export default {
		name: 'news',
		components: {
			quillEditor
		},
		data() {
			return {
				uploadUrl: serverPaths.uploadUrl,
				size: 10,
				page: 1,
				form: {
					couponIds: '',
					couponIssueId: '',
					couponIssueName: '',
					createTime: '',
					couponIssueImage: '',
					isLimit: '',
					couponNum: '',
					price: '',
					payNotice:'',
					originalPrice:'',
					startTime: '',
					status: '',
					type: '',
					couponContentImage:'',
				},
				formLabelWidth: '200px',
				tableDataLoading: false,
				dialogFormVisible: false,
				tableData: [],
				activeName: 'first',
				classify: 1,
				couponIssueNameT: '',
				statusT: 0,
				couponIds: [],
				couponIdList: [],
				dialogFormVisible4: false,
				dialogFormVisible5: false,
				tableDataLoadingY: false,
				tableDataYhq: {},
				size1: 10,
				page1: 1,
				titles: '添加',
				tableDataList:[],
				couponContentImage: [], //轮播图
				percentage1: 0,
				originalPrice:'',
				quillOption: quillConfig,


			}
		},

		methods: {
			handleSizeChange(val) {
				this.size = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			handleSizeChangeY(val) {
				this.size1 = val;
				this.dataSelectYhq()
			},
			handleCurrentChangeY(val) {
				this.page1 = val;
				this.dataSelectYhq()
			},
			handleClick(tab, event) {
				this.limit = 10
				this.page = 1
				if (tab._props.label == '活动优惠券列表') {
					this.classify = 1
					this.dataSelect()
				}
				if (tab._props.label == '售卖优惠券列表') {
					this.classify = 2
					this.dataSelect()
				}

			},
			// 刷新
			refresh() {
				this.dataSelect()
			},
			// 删除优惠券
			shopdeletes(row) {
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('couponIssue/deleteCouponIssueById'),
						method: 'post',
						params: this.$http.adornParams({
							'couponIssueId': row.couponIssueId
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dataSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'error',
								duration: 1500,
								onClose: () => {
									this.dataSelect()
								}
							})
						}
					})
				}).catch(() => {})
			},
			// 修改
			amend(row) {
				this.dialogFormVisible = true
				this.couponIds = []
				this.couponIdList = []
				if (row) {
					this.titles = '修改'
					if (row.couponList.length > 0) {
						for (var i in row.couponList) {
							this.couponIds.push(row.couponList[i].couponId)
							this.couponIdList.push(row.couponList[i].couponName)
						}
					}
					this.form.couponIds = row.couponIds
					this.form.couponIssueId = row.couponIssueId
					this.form.couponIssueName = row.couponIssueName
					this.form.createTime = row.createTime
					this.form.couponIssueImage = row.couponIssueImage
					this.form.isLimit = row.isLimit
					this.form.couponNum = row.couponNum
					this.form.price = row.price
					this.form.payNotice = row.payNotice
					this.form.originalPrice = row.originalPrice
					this.form.startTime = row.startTime
					this.form.status = row.status
					this.form.createTime = row.createTime
						this.form.couponContentImage = row.couponContentImage


				} else {
					this.titles = '添加'
					this.form.couponId = ''
					this.form.couponIssueId = ''
					this.form.couponIssueName = ''
					this.form.createTime = ''
					this.form.couponIssueImage = ''
					this.form.isLimit = ''
					this.form.couponNum = ''
					this.form.price = ''
					this.form.payNotice = ''
					this.form.originalPrice = ''
					this.form.startTime = ''
					this.form.status = ''
					this.form.createTime = ''
					this.couponIdList = []
					this.couponIds = []
					this.form.couponContentImage = ''
				}

			},
			handleAvatarSuccess2(file, fileList) {
				this.form.couponIssueImage = file.data
			},
			// 删除
			clear(index) {
				this.couponContentImage.splice(index, 1);
			},
			//上传成功
			handleUploadSuccess(file, fileList) {
				this.form.couponContentImage = file.data
				// this.couponContentImage.push(file.data)
			},
			onprogress1(event, file, fileList) {
				console.log('详情图上传进度', parseInt(event.percent))
				this.percentage1 = parseInt(event.percent)
			},
			// 修改
			amendNoticeTo() {
				if (this.form.couponIssueName == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入券包名称',
						type: 'warning'
					});
					return
				}
				if (this.form.couponIssueImage == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传券包图片',
						type: 'warning'
					});
					return
				}
				if (this.couponIds.length == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择优惠券',
						type: 'warning'
					});
					return
				}
				if (this.form.price === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入券包价格/价值',
						type: 'warning'
					});
					return
				}
				if (this.form.status == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择状态',
						type: 'warning'
					});
					return
				}
				if (this.form.isLimit == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择是否限量',
						type: 'warning'
					});
					return
				}
				if(this.form.isLimit == 1){
					if (this.form.couponNum == '') {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: '请输入库存劵包',
							type: 'warning'
						});
						return
					}
				}
				if(this.classify==2){
					if (this.form.originalPrice == '') {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: '请输入券包原价',
							type: 'warning'
						});
						return
					}
					if (this.form.payNotice == '') {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: '请输入购买须知',
							type: 'warning'
						});
						return
					}
					if (this.form.couponContentImage == '') {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: '请上传主页图',
							type: 'warning'
						});
						return
					}
				}

				if (this.titles == '添加') {
					var url = 'couponIssue/insertCouponIssue'
				} else {
					var url = 'couponIssue/updateCouponIssue'
				}

				this.$http({
					url: this.$http.adornUrl(url),
					method: 'post',
					data: this.$http.adornData({
						'classify': this.classify,
						'couponIds': this.couponIds.toString(),
						'couponIssueId': this.form.couponIssueId,
						'couponIssueName': this.form.couponIssueName,
						'couponIssueImage': this.form.couponIssueImage,
						'couponNum': this.form.couponNum,
						'price': this.form.price,
						'isLimit': this.form.isLimit,
						'status': this.form.status,
						'originalPrice':this.form.originalPrice,
						'payNotice':this.form.payNotice,
						'couponContentImage':this.form.couponContentImage,
					})
				}).then(({
					data
				}) => {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
						}
					})
					this.dialogFormVisible = false
				})
			},
			//获取已发布优惠券数据
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('couponIssue/selectCouponIssueList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.size,
						'classify': this.classify,
						'couponIssueName': this.couponIssueNameT,
						'status': this.statusT
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
				})
			},
			// 打开优惠券列表
			couponIdBtn(rows) {
				this.dataSelectYhq()
				this.dialogFormVisible4 = true
			},
			//获取优惠券数据
			dataSelectYhq() {
				this.tableDataLoadingY = true
				this.$http({
					url: this.$http.adornUrl('admin/coupon/seleteAllCoupon'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page1,
						'limit': this.size1
					})
				}).then(({
					data
				}) => {
					this.tableDataLoadingY = false
					let returnData = data.data;
					this.tableDataYhq = returnData
				})
			},
			// 删除优惠券
			couponIdClose(ietm, index) {
				console.log('index', index, 'ietm', ietm, this.couponIdList.length)
				if (this.couponIdList.length < 2) {
					this.$message({
						title: '提示',
						type: 'error',
						duration: 1800,
						message: '最少需要选中一张优惠券',
						type: 'warning'
					});
					return
				} else {
					this.couponIdList.splice(index, 1)
					this.couponIds.splice(index, 1)
				}
			},
			// 批量开启
			closes2(id) {
				this.dialogFormVisible4 = false
			},
			// 多选券
			changeFun(row) {
				this.couponIds.push(row.couponId)
				this.couponIdList.push(row.couponName)
				this.dialogFormVisible4 = false
			},
			// 优惠券列表
			listBtn(row){
				this.tableDataList = row.couponList
				this.dialogFormVisible5 = true
			}
		},
		mounted() {
			this.dataSelect()
		}
	};
</script>

<style scoped="scoped">
	.divhove {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: default;
		text-align: center;
		padding-top: 50%;
		border-radius: 6px;
		background-color: rgba(0, 0, 0, .5);
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
	}

	.el-tag--medium {
		margin-right: 10px;
	}

	.divhove:hover {
		opacity: 0.8;
	}
	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}
	.el-upload--picture-card{
		vertical-align:baseline!important;
	}
</style>
