<template>
|
<div class="act_add">
|
<v-header :title="(add ? '新增' : '编辑') + '活动'"></v-header>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="form"
|
label-width="160px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="活动名称:" prop="title">
|
<el-input
|
class="input-width"
|
placeholder="请输入活动名称"
|
size="small"
|
v-model.trim="form.title"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="活动地点:" prop="address" required>
|
<el-input
|
class="input-width"
|
placeholder="请选择活动地点"
|
size="small"
|
type="textarea"
|
resize="none"
|
:rows="3"
|
v-model="form.address"
|
maxlength="50"
|
@focus="mapCheck"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="报名时间:" required>
|
<el-form-item prop="signtime">
|
<el-date-picker
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
v-model="signtime"
|
class="input-width"
|
@focus="handleCloseMap"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item label="活动时间:" required>
|
<el-form-item prop="activetime">
|
<el-date-picker
|
class="input-width"
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
v-model="activetime"
|
@focus="handleCloseMap"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<span class="fc-999 mr-l-10"
|
>活动时长x小时，超过30分钟不足1小时的按1小时计算</span
|
>
|
</el-form-item>
|
|
<el-form-item label="活动人数:" required>
|
<el-form-item prop="peopleNumber">
|
<el-input
|
class="input-width2"
|
placeholder="请输入大于0的数字"
|
size="small"
|
:disabled="ispeopleNumber == 1"
|
v-model.trim="form.peopleNumber"
|
></el-input>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
class="mr-l-10"
|
v-model="ispeopleNumber"
|
@change="ispeopleNumberC"
|
>不限</el-checkbox
|
>
|
</el-form-item>
|
</el-form-item>
|
|
<template>
|
<el-form-item label="奖励金汇币:" prop="award">
|
<el-input-number
|
class="input-width2"
|
v-model="form.award"
|
:min="1"
|
label=""
|
></el-input-number>
|
</el-form-item>
|
</template>
|
<div class="fl-fw">
|
<el-form-item label="负责人电话:">
|
<el-input
|
class="input-width"
|
placeholder="请输入联系人电话"
|
size="small"
|
v-model.trim.number="form.phone"
|
maxlength="11"
|
></el-input>
|
</el-form-item>
|
</div>
|
|
<el-form-item label="活动封面:" required>
|
<Updatecover
|
:width="520"
|
:height="308"
|
:cover="form.coverImgUrl"
|
@updateBackImg="updateBackImg"
|
@listCheck="listCheck"
|
/>
|
</el-form-item>
|
|
<el-form-item label="活动详情:" required>
|
<!-- <editor-bar
|
v-model="content"
|
:isClear="isClear"
|
@change="change"
|
></editor-bar> -->
|
|
<quill-editor
|
@editorContext="change"
|
:contentText="content"
|
></quill-editor>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button
|
size="small"
|
type="primary"
|
@click="send(2, 'form')"
|
v-if="add"
|
>发布</el-button
|
>
|
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</el-form-item>
|
</el-form>
|
<el-dialog
|
title="选择封面"
|
:visible.sync="dialogVisible"
|
:before-close="handleClose"
|
append-to-body
|
class="fm"
|
width="54%"
|
>
|
<div class="fl-f">
|
<el-tabs
|
tab-position="left"
|
style="width: 125px"
|
v-model="tabsName"
|
@tab-click="tabCheckHandle"
|
>
|
<el-tab-pane label="上传"></el-tab-pane>
|
<el-tab-pane label="节日"></el-tab-pane>
|
<el-tab-pane label="党建"></el-tab-pane>
|
<el-tab-pane label="疫苗"></el-tab-pane>
|
<el-tab-pane label="天气预报"></el-tab-pane>
|
<el-tab-pane label="灾害预警"></el-tab-pane>
|
<el-tab-pane label="志愿者"></el-tab-pane>
|
</el-tabs>
|
<div class="fl-fw" style="width: 100%">
|
<el-upload
|
v-if="tabsName == '0'"
|
class="mr-r-10"
|
action
|
:http-request="uploadFileHandle"
|
:before-upload="beforeAvatarUploadImg"
|
:show-file-list="false"
|
>
|
<div class="update-img">
|
<i class="el-icon-plus fz-15"></i>
|
</div>
|
</el-upload>
|
<div
|
class="img-list-item mr-r-10"
|
v-for="(item, index) in checkImgList"
|
:key="index"
|
>
|
<img
|
v-if="item.type"
|
class="check-img"
|
src="../../../../assets/image/check-img.png"
|
@click="checkImgHandle(index)"
|
/>
|
<img
|
v-else
|
class="check-img"
|
src="../../../../assets/image/no-check.png"
|
@click="checkImgHandle(index)"
|
/>
|
<el-image
|
class="img-shwo-item"
|
:style="{
|
border: item.type ? '1px solid red' : '1px solid #fff'
|
}"
|
:src="item.uploadPicture"
|
@click="checkImgHandle(index)"
|
fit="coverImgUrl"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="storeListConfirm">确 定</el-button>
|
</div>
|
<!-- 裁剪图片 -->
|
<el-dialog
|
title="图片裁剪"
|
:visible.sync="dialogVisiblecoverImgUrl"
|
:before-close="handleClosecoverImgUrl"
|
:close-on-click-modal="false"
|
append-to-body
|
>
|
<div class="cropper-content">
|
<div class="cropper" style="text-align: center">
|
<vueCropper
|
ref="cropper"
|
:img="option.img"
|
:outputSize="option.size"
|
:outputType="option.outputType"
|
:info="true"
|
:full="option.full"
|
:canMove="option.canMove"
|
:canMoveBox="option.canMoveBox"
|
:autoCropWidth="500"
|
:autoCropHeight="296"
|
:original="option.original"
|
:autoCrop="option.autoCrop"
|
:fixedBox="option.fixedBox"
|
:fixed="option.fixed"
|
:fixedNumber="[500, 296]"
|
></vueCropper>
|
</div>
|
</div>
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleClosecoverImgUrl">取 消</el-button>
|
<el-button type="primary" :loading="btnLoading" @click="finishCofirm"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
</el-dialog>
|
<el-dialog
|
title="设置活动地址"
|
:visible.sync="dialogVisibleMap"
|
:before-close="handleCloseMap"
|
append-to-body
|
>
|
<MapBox ref="mapContent" @setLocation="setLocation" />
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleCloseMap">取 消</el-button>
|
<el-button type="primary" @click="mapComfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
|
import Updatecover from "../../../../components/upload/updateCover.vue";
|
import MapBox from "../../../../components/map/map.vue";
|
import { PHONE } from "../../../../utils/validation";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: 0 }
|
},
|
components: { EditorBar, Updatecover, MapBox, QuillEditor },
|
data() {
|
var validatoraattendPeople = (rule, value, callback) => {
|
if (!value && this.ispeopleNumber !== 1) {
|
return callback(new Error("请输入参与上限人数"));
|
}
|
var regNumber = /^\+?[1-9][0-9]*$/;
|
if (regNumber.test(value) == false && this.ispeopleNumber !== 1) {
|
return callback(new Error("请输入大于0的整数"));
|
} else {
|
callback();
|
}
|
};
|
|
return {
|
tabsName: "0",
|
btnLoading: false,
|
win: true,
|
item: [],
|
inputNumber: [], //人数区间提示
|
startnum1: false,
|
endnum1: false,
|
startnum2: false,
|
endnum2: false,
|
leader: [], // 活动负责人
|
leaderId: "", // 活动负责人Id
|
form: {
|
title: "", // 活动名字
|
address: "", // 活动地址
|
participantMin: 0, // 参与人数
|
peopleNumber: "", // 参与人数
|
applyStartTime: "", // 报名时间
|
applyEndTime: "", // 报名时间
|
activityStartTime: "", // 活动时间
|
activityEndTime: "", // 活动时间
|
coverImgUrl: "", // 封面
|
content: "", // 活动内容
|
status: "", // 状态
|
phone: "", // 联系人电话
|
lat: 0,
|
lng: 0
|
},
|
radioList: [],
|
inputType: "",
|
ispeopleNumber: "",
|
islimit: "",
|
isrange: "",
|
isvolunteerMax: "",
|
rules: {
|
title: [
|
{
|
required: true,
|
message: "请输入活动名称",
|
trigger: "blur"
|
}
|
],
|
|
address: [
|
{
|
required: true,
|
message: "请输入活动地点",
|
trigger: "blur"
|
}
|
],
|
|
peopleNumber: [
|
{
|
validator: validatoraattendPeople,
|
trigger: "blur"
|
}
|
],
|
phone: [
|
{
|
required: true,
|
validator: PHONE,
|
trigger: "blur"
|
}
|
]
|
},
|
min: { a: 0, b: 0 },
|
max: { a: 0, b: 0 },
|
activetime: [],
|
signtime: [],
|
content: "",
|
isC: false,
|
isCr: false,
|
minmax: false,
|
isClear: false,
|
detail: "",
|
aattendPeople: "",
|
tagsList: [
|
{
|
label: "全部居民",
|
value: 1
|
},
|
{
|
label: "低保户",
|
value: 2
|
}
|
],
|
dialogVisible: false,
|
dialogVisiblecoverImgUrl: false,
|
dialogVisibleMap: false,
|
option: {
|
img: "",
|
outputSize: 1, // 剪切后的图片质量（0.1-1）
|
full: true, // 输出原图比例截图 props名full
|
outputType: "png",
|
canMove: false,
|
original: false,
|
canMoveBox: true,
|
autoCrop: true,
|
fixedBox: false,
|
fixed: true,
|
maxImgSize: 3000 // 图片最大像素
|
}, // 截图配置
|
positionData: {},
|
checkImgList: [],
|
listCheckImg: "",
|
newdata: {}
|
};
|
},
|
computed: {
|
pickerOptions() {
|
return {
|
disabledDate(time) {
|
// return time.getTime() < Date.now();
|
let date = new Date(new Date().toLocaleDateString()).getTime();
|
return time.getTime() < date;
|
}
|
};
|
},
|
pickerOptions2() {
|
let e = this.form.applyEndTime;
|
let end = 0;
|
if (e) {
|
end = new Date(e.replace(/-/g, "/")).getTime();
|
}
|
return {
|
disabledDate(time) {
|
let date = new Date(new Date().toLocaleDateString()).getTime();
|
return time.getTime() < date;
|
}
|
};
|
}
|
},
|
watch: {
|
minmax(n) {
|
this.max.a = n ? -1 : 0;
|
},
|
isCr(n) {
|
this.max.b = n ? -1 : 0;
|
},
|
aid(n) {
|
// 编辑 获取数据
|
if (!this.add) {
|
this.getData(n);
|
}
|
},
|
// 选择负责人
|
leaderId(n) {
|
let v = this.leader.filter(k => {
|
return k.managerId === n;
|
});
|
if (v && v[0]) {
|
this.form.sponsorId = n;
|
this.form.sponsorName = v[0].name;
|
} else {
|
this.form.sponsorName = "";
|
this.form.sponsorId = "";
|
}
|
},
|
// 时间
|
time: {
|
handler(n) {
|
if (n.a && n.a.length && n.a[1]) {
|
// this.form.applyStartTime = 'n.a[0]';
|
this.form.applyEndTime = n.a[1];
|
}
|
if (n.b && n.b.length && n.b[1]) {
|
console.log(n.b);
|
this.form.activityStartTime = n.b[0];
|
this.form.activityEndTime = n.b[1];
|
}
|
},
|
deep: true
|
},
|
win(n) {
|
if (n) {
|
this.form.comActActPrizeVOList = this.item = [];
|
this.form.prizeRemark = "";
|
this.form.rewardDesc = "";
|
}
|
},
|
isC(n) {
|
if (n) {
|
this.max.b = this.min.b = this.form.participantMin = this.form.peopleNumber = 0;
|
}
|
}
|
},
|
methods: {
|
tagsHandle(val) {
|
this.form.aattendPeople = val ? val.join(",") : "";
|
},
|
getactivity() {
|
this.$api.get("communityactivity/activity/type/list", { type: 2 }, e => {
|
this.radioList = e.map(d => {
|
return {
|
label: d.name,
|
value: d.id
|
};
|
});
|
});
|
},
|
addtype() {
|
if (this.inputType) {
|
// var num = this.radioList ? this.radioList[this.radioList.length-1].value : 1;
|
let newlist = {
|
id: "",
|
name: this.inputType,
|
type: 2
|
};
|
this.$api.post("communityactivity/activity/type/add", newlist, e => {
|
this.inputType = "";
|
this.getactivity();
|
});
|
}
|
},
|
islimitClick(val) {
|
if (val) {
|
this.form.limit = -1;
|
} else {
|
this.form.limit = "";
|
}
|
},
|
isvolunteerMaxC(val) {
|
if (val) {
|
this.form.volunteerMax = -1;
|
} else {
|
this.form.volunteerMax = "";
|
}
|
},
|
ispeopleNumberC(val) {
|
if (val) {
|
this.form.peopleNumber = -1;
|
} else {
|
this.form.peopleNumber = "";
|
}
|
},
|
israngeC(val) {
|
if (val) {
|
this.form.range = -1;
|
} else {
|
this.form.range = "";
|
}
|
},
|
|
checkImgHandle(i) {
|
this.checkImgList[i].type = !this.checkImgList[i].type;
|
this.checkImgList.forEach((im, ix) => {
|
if (ix !== i) {
|
im.type = false;
|
}
|
});
|
if (this.checkImgList[i].type) {
|
this.listCheckImg = this.checkImgList[i].uploadPicture;
|
} else {
|
this.listCheckImg = "";
|
}
|
},
|
storeListConfirm() {
|
this.form.coverImgUrl = this.listCheckImg;
|
this.tabsName = "0";
|
this.dialogVisible = false;
|
},
|
mapCheck() {
|
this.dialogVisibleMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapContent.getLocation({
|
val: this.form.address,
|
l: this.form.lat,
|
r: this.form.lng
|
});
|
});
|
},
|
mapComfirm() {
|
if (this.positionData.addr) {
|
this.form.address = this.positionData.addr;
|
this.form.lat = this.positionData.lat;
|
this.form.lng = this.positionData.lng;
|
}
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
setLocation(data) {
|
this.positionData = data;
|
},
|
handleCloseMap() {
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
tabCheckHandle() {
|
this.checkImgList = [];
|
switch (this.tabsName) {
|
case "0": {
|
this.listCheck();
|
break;
|
}
|
case "1": {
|
this.listSysCheck(2);
|
break;
|
}
|
case "2": {
|
this.listSysCheck(1);
|
break;
|
}
|
case "3": {
|
this.listSysCheck(4);
|
break;
|
}
|
case "4": {
|
this.listSysCheck(3);
|
break;
|
}
|
case "5": {
|
this.listSysCheck(5);
|
break;
|
}
|
case "6": {
|
this.listSysCheck(6);
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
dataURLtoFile(dataurl, filename) {
|
var arr = dataurl.split(","),
|
mime = arr[0].match(/:(.*?);/)[1],
|
bstr = atob(arr[1]),
|
n = bstr.length,
|
u8arr = new Uint8Array(n);
|
while (n--) {
|
u8arr[n] = bstr.charCodeAt(n);
|
}
|
return new File([u8arr], filename, { type: mime });
|
},
|
finishCofirm() {
|
this.$refs.cropper.getCropData(obj => {
|
const timer = new Date().getTime();
|
const urldata = this.dataURLtoFile(obj, timer + ".png");
|
let formData = new FormData();
|
formData.append("file", urldata);
|
this.btnLoading = true;
|
this.$api.post("communitypartybuilding/uploadimage", formData, e => {
|
this.btnLoading = false;
|
this.form.coverImgUrl = e;
|
this.dialogVisible = false;
|
this.dialogVisiblecoverImgUrl = false;
|
});
|
});
|
},
|
updateBackImg(val) {
|
this.form.coverImgUrl = val;
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.tabsName = "0";
|
},
|
handleClosecoverImgUrl() {
|
this.dialogVisiblecoverImgUrl = false;
|
},
|
uploadFileHandle(f) {
|
this.dialogVisiblecoverImgUrl = true;
|
this.option.img = URL.createObjectURL(f.file);
|
},
|
beforeAvatarUploadImg(file) {
|
const imgType = ["image/png", "image/jpeg", "video/mp4"];
|
if (imgType.indexOf(file.type) === -1) {
|
showToast("只能上传 png jpeg jpg 格式图片或者视频文件!", "error");
|
return false;
|
} else {
|
return true;
|
}
|
},
|
listCheck() {
|
this.dialogVisible = true;
|
this.$api.get("communityactivity/picture/getList", {}, arr => {
|
arr.forEach(item => {
|
item.type = false;
|
});
|
this.checkImgList = arr;
|
});
|
},
|
listSysCheck(t) {
|
this.$api.get(
|
"communityactivity/sysPicture/getList",
|
{ type: t },
|
arr => {
|
arr.forEach(item => {
|
item.type = false;
|
});
|
this.checkImgList = arr;
|
}
|
);
|
},
|
start1() {
|
this.startnum1 = true;
|
},
|
start2() {
|
this.startnum2 = true;
|
},
|
end1() {
|
this.endnum1 = true;
|
},
|
end2() {
|
this.endnum2 = true;
|
},
|
nBlur() {
|
this.endnum1 = false;
|
this.endnum2 = false;
|
this.startnum1 = false;
|
this.startnum2 = false;
|
this.minmax = +this.max.a === -1;
|
this.isCr = +this.max.b === -1;
|
},
|
// 取消
|
reset() {
|
for (let k in this.form) {
|
this.form[k] = "";
|
}
|
this.form.participantMin = this.form.volunteerMin = 0;
|
this.win = { a: 0, b: 0 };
|
this.max = { a: 0, b: 0 };
|
this.time = { a: ["", ""], b: ["", ""] };
|
this.content = "";
|
this.leaderId = "";
|
this.item = [];
|
},
|
// 获取数据-编辑
|
getData(id) {
|
this.$api.get("Jinhui/experienceGetDetails", { id }, e => {
|
this.form.title = e.title;
|
this.form.address = e.address;
|
this.form.phone = e.phone;
|
this.form.id = e.id;
|
this.form.lat = e.lat;
|
this.form.lng = e.lng;
|
this.form.participantMin = e.participantMin;
|
this.form.activityType = e.activityType;
|
|
if (e.peopleNumber == -1) {
|
this.ispeopleNumber = 1;
|
} else {
|
this.form.peopleNumber = e.peopleNumber;
|
}
|
|
(this.signtime = [e.applyStartTime, e.applyEndTime]),
|
(this.activetime = [e.activityStartTime, e.activityEndTime]),
|
(this.form.award = e.award);
|
this.form.applyEndTime = e.applyEndTime;
|
this.form.activityStartTime = e.activityStartTime;
|
this.form.activityEndTime = e.activityEndTime;
|
|
this.form.coverImgUrl = e.coverImgUrl;
|
this.content = this.form.content = e.content;
|
this.form.status = e.status;
|
});
|
},
|
// 封面
|
onUploadImage(v) {
|
this.form.coverImgUrl = v;
|
},
|
// 奖品封面
|
onUploadItemImage(v, j) {
|
this.item[j].pic = v;
|
this.item[j].r++;
|
},
|
//编辑富文本
|
change(val) {
|
this.form.content = val;
|
},
|
|
// 保存
|
send(v, f) {
|
this.$refs[f].validate(valid => {
|
if (valid) {
|
if (!this.signtime.length) {
|
return demo.toast("请选择报名时间");
|
}
|
if (!this.activetime.length) {
|
return demo.toast("请选择活动时间");
|
}
|
if (this.signtime[1] > this.activetime[1]) {
|
return demo.toast("活动结束时间不能早于报名结束时间");
|
}
|
if (this.signtime[0] > this.activetime[0]) {
|
return demo.toast("活动开始时间不能早于报名开始时间");
|
}
|
if (!this.form.coverImgUrl) {
|
return demo.toast("请上传活动封面");
|
}
|
if (!this.form.content) {
|
return demo.toast("请输入活动详情");
|
}
|
|
(this.form.applyStartTime = this.signtime[0]),
|
(this.form.applyEndTime = this.signtime[1]),
|
(this.form.activityStartTime = this.activetime[0]),
|
(this.form.activityEndTime = this.activetime[1]);
|
if (this.isrange == 1) {
|
this.form.range = -1;
|
}
|
if (this.ispeopleNumber == 1) {
|
this.form.peopleNumber = -1;
|
}
|
|
//保存发布
|
if (v == 2) {
|
this.form.status = 2;
|
this.$api.post("Jinhui/experienceAddData", this.form, e => {
|
demo.toast((this.add ? "添加" : "编辑") + "活动成功");
|
this.reset();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
} else {
|
}
|
});
|
},
|
// 获取人员标签
|
getPersonTags() {
|
this.$api.get("communityactivity/userTags/getList", {}, e => {
|
this.tagsList = e;
|
});
|
}
|
},
|
mounted() {
|
// this.getPersonTags();
|
// 当前活动负责人使用了缓存 [可接入接口 搜索]
|
this.$api.leader(e => {
|
this.leader = e;
|
});
|
this.getactivity();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.fm {
|
/deep/.el-dialog {
|
height: 50%;
|
overflow: auto;
|
}
|
}
|
.number-title {
|
// height: 10px;
|
// font-size: 14px;
|
// padding-top: 10px;
|
// color: #a5a8af;
|
}
|
.act_add {
|
overflow-y: auto;
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
.up {
|
margin-top: 8px;
|
}
|
.sec {
|
.label {
|
width: 120px;
|
}
|
article {
|
width: calc(~"100% - 120px");
|
max-width: 300px;
|
&.more {
|
max-width: 100%;
|
}
|
.label {
|
text-align: left;
|
}
|
.item {
|
display: flex;
|
flex-wrap: wrap;
|
article {
|
margin: 0 10px 10px 0;
|
width: 140px;
|
box-sizing: border-box;
|
padding: 5px 20px 5px 0;
|
text-align: center;
|
.avatar {
|
margin: 0 auto 5px;
|
}
|
.el-input {
|
margin-bottom: 5px;
|
}
|
}
|
.btn {
|
display: flex;
|
justify-content: space-between;
|
width: 120px;
|
.add,
|
.del {
|
width: 40px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
font-size: 28px;
|
font-weight: 700;
|
display: block;
|
border-radius: 50%;
|
border: 1px solid #ccc;
|
color: #666;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
}
|
.update-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 260px;
|
height: 154px;
|
border: 1px dashed #999;
|
}
|
.fz-15 {
|
font-size: 30px;
|
}
|
.img-shwo-item {
|
cursor: pointer;
|
width: 260px;
|
height: 154px;
|
}
|
.img-list-item {
|
margin-bottom: 10px;
|
width: 260px;
|
height: 154px;
|
position: relative;
|
border: 1px dashed #fff;
|
}
|
.check-img {
|
cursor: pointer;
|
z-index: 999;
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 20px;
|
height: 20px;
|
}
|
.fl-f {
|
display: flex;
|
}
|
.fl-fw {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.mr-r-10 {
|
margin-right: 10px;
|
}
|
.cropper-content .cropper {
|
width: auto;
|
height: 500px !important;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
.input-width {
|
width: 300px;
|
}
|
.input-width2 {
|
width: 200px;
|
}
|
.input-width-url {
|
width: 450px;
|
}
|
</style>
|
