oil-station/fuintAdmin/src/views/EventMarketing/liJianMarketing/index.vue
DESKTOP-369JRHT\12997 abdad63b26 10.29
2024-10-29 15:35:48 +08:00

741 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-open">
<div class="cot-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
<div style="display: flex">
<div style="width: 50%">
<el-form-item label="活动名称" prop="activeName">
<el-input v-model="ruleForm.activeName"></el-input>
</el-form-item>
<el-form-item label="活动时间" prop="activeTimeType">
<div class="d-s">
<el-radio-group v-model="ruleForm.activeTimeType">
<el-radio :label="'0'">永久有效</el-radio>
<el-radio :label="'1'">自定义</el-radio>
</el-radio-group>
<el-date-picker
v-if="ruleForm.activeTimeType=='1'"
v-model="ruleForm.activeStartTime"
style="width: 160px"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
<span v-if="ruleForm.activeTimeType=='1'" style="margin: 0 5px">至</span>
<el-date-picker
v-if="ruleForm.activeTimeType=='1'"
v-model="ruleForm.activeEndTime"
style="width: 160px"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="优惠类型" prop="offerType">
<div class="d-s">
<el-radio-group v-model="ruleForm.offerType" @input="changeOfferType()">
<el-radio :label="'0'">立减优惠</el-radio>
<el-radio :label="'1'">折扣优惠</el-radio>
</el-radio-group>
</div>
<span style="color: grey;font-size: 12px">例如:立减优惠满100立减2元;折扣优惠满200享受95折</span>
</el-form-item>
<el-form-item label="活动类型" prop="activeType">
<div class="d-s">
<el-radio-group v-model="ruleForm.activeType">
<el-radio :label="'0'">固定优惠</el-radio>
<el-radio :label="'1'" v-if="ruleForm.offerType=='0'">随机满减</el-radio>
<el-radio :label="'2'" v-if="ruleForm.offerType=='0'">每满</el-radio>
</el-radio-group>
</div>
<div style="color: grey;font-size: 11px">
固定满减:订单满足规则时,只优惠一次且金额固定。如:满100元立减5元订单金额是210元则优惠减5元。
</div>
<div style="color: grey;font-size: 11px" v-if="ruleForm.offerType==0">
随机满减:订单满足规则时,只优惠一次且金额随机。如:满100元立减5-8元订单金额是210元则优惠在5-8元范围内随机生成。
</div>
<div style="color: grey;font-size: 11px" v-if="ruleForm.offerType==0">
每满:订单满足规则时,按规则优患多次。如:每满100元立减5元活动订单金额是210元则按每满优惠减10元。
</div>
</el-form-item>
<el-form-item label="适用会员等级" prop="levelId">
<el-select v-model="ruleForm.levelId" multiple clearable placeholder="请选择会员等级(多选)" style="width: 100%">
<el-option
v-for="(item,index) in userGradeList"
:label="item.name"
:value="item.id.toString()"
:key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="会员标签" prop="babelIds">
<el-select v-model="ruleForm.babelIds" multiple clearable placeholder="请选择会员标签(多选)" style="width: 100%">
<el-option
v-for="item in userLabelList"
:key="item.id+''"
:label="item.labelName"
:value="item.id+''"></el-option>
</el-select>
</el-form-item>
<el-form-item label="每人每天参与上限" prop="dayLimitNum">
<el-input v-model="ruleForm.dayLimitNum"></el-input>
<span style="color: grey;font-size: 12px">每个会员每天限制参与的次数0标识不限</span>
</el-form-item>
<el-form-item label="每人每月参与上限" prop="monthLimitNum">
<el-input v-model="ruleForm.monthLimitNum"></el-input>
<span style="color: grey;font-size: 12px">每个会员每月限制参与的次数0标识不限</span>
</el-form-item>
<el-form-item label="每人累计参与上限" prop="limitNum">
<el-input v-model="ruleForm.limitNum"></el-input>
<span style="color: grey;font-size: 12px">每个会员累计限制参与的次数0标识不限</span>
</el-form-item>
</div>
<div style="width: 50%">
<el-form-item label="适用时间段" prop="timeType">
<div style="width: 100px;margin-top: 10px">
<el-radio-group v-model="ruleForm.timeType">
<div style="display: flex; width: 500px;margin-bottom: 15px;">
<el-radio :label="'1'">每周</el-radio>
<el-checkbox-group v-model="weekDay" style="margin-left: 20px" :disabled="ruleForm.timeType!='1'">
<el-checkbox v-for="(item,index) in weekList" :key="index" :label="item"></el-checkbox>
</el-checkbox-group>
</div>
<el-radio :label="'2'">每月
<el-select :disabled="ruleForm.timeType!='2'" v-model="monthDay" placeholder="请选择每月固定日期" multiple
style="margin-left: 20px">
<el-option
v-for="item in 31"
:key="item+''"
:label="item+'日'"
:value="item+''">
</el-option>
</el-select>
</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-form-item label="时间段" prop="timeApplyStart" label-width="65px">
<el-time-picker
v-model="ruleForm.timeApplyStart"
format="HH:mm"
value-format="HH:mm"
placeholder="请选择开始时间点">
</el-time-picker>
<el-time-picker
v-model="ruleForm.timeApplyEnd"
format="HH:mm"
value-format="HH:mm"
placeholder="请选择结束时间点">
</el-time-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="适用油品油号" prop="applyOilType">
<div class="d-s">
<el-radio-group v-model="ruleForm.applyOilType">
<el-radio :label="'0'">不限</el-radio>
<el-radio :label="'1'">自定义</el-radio>
</el-radio-group>
<el-select v-if="ruleForm.applyOilType=='1'" v-model="ruleForm.applyOil" multiple clearable
placeholder="请选择油品油号(多选)">
<el-option v-for="(item,index) in oilNumberList" :key="index"
:label="getOilNamess(oilNameList,item.oilName)" :value="item.oilName"></el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="可使用支付方式" prop="paymentType">
<el-checkbox-group v-model="ruleForm.paymentType">
<el-checkbox
v-for="dict in dict.type.payment_type"
v-if="dict.value!='APPLET_CODE'"
:key="dict.value"
:label="dict.value"
:value="dict.value">{{ dict.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="活动方式" prop="activeManner">
<el-radio-group v-model="ruleForm.activeManner">
<div style="display: flex;font-size: 14px;margin: 10px 0;align-items: center">
<el-radio label="0" name="type">按订单金额</el-radio>
<img src="@/assets/images/tjb.png"
style="width: 20px;height: 20px;cursor: pointer;margin-left: 10px"
@click="addPoints(0)">
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 0">
<div v-for="(item,index) in orderList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.sub">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 1">
<div v-for="(item,index) in orderList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>随机优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.randomFront">
<template slot="append">元</template>
</el-input>
<span>至</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.randomAfter">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 2">
<div v-for="(item,index) in orderList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>订单金额每满</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.sub">
<template slot="append">元</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 1 && ruleForm.activeType == 0">
<div v-for="(item,index) in orderList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>享受折扣</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.enjoyDiscount">
<template slot="append">折</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div style="display: flex;font-size: 14px;margin: 15px 0;align-items: center">
<el-radio label="1" name="type">按加油升数</el-radio>
<img src="@/assets/images/tjb.png"
style="width: 20px;height: 20px;cursor: pointer;margin-left: 10px"
@click="addGrowthValues(1)">
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 0">
<div v-for="(item,index) in refuelList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px"
v-model="item.sub">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 1">
<div v-for="(item,index) in refuelList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>随机优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.randomFront">
<template slot="append">元</template>
</el-input>
<span>至</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.randomAfter">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 2">
<div v-for="(item,index) in refuelList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>加油升数每满</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px"
v-model="item.sub">
<template slot="append">元</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px"
v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 1 && ruleForm.activeType == 0">
<div v-for="(item,index) in refuelList" :key="index"
style="font-size: 14px;margin: 15px 0;display: flex;align-items: center">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>享受折扣</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.enjoyDiscount">
<template slot="append">折</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
</el-radio-group>
</el-form-item>
</div>
</div>
<el-form-item style="text-align: center">
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitRuleForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {listUserLabel} from "@/api/staff/user/userlabel";
import {listUserGrade} from "@/api/staff/user/usergrade";
import {getOilNameList, oilNumberList} from "@/api/order/oilnumgun";
import {addActiveSubPrice, editActiveSubPrice, getActiveSubPrice} from "@/api/EventMarketing/activeSubPrice";
export default {
name: "LiJianMarketing",
dicts: ['payment_type'],
props: ['activeId'],
data() {
return {
ruleForm: {
activeTimeType: '0',
paymentType: [],
activeManner: [],
offerType: '0',
activeType: '0',
timeType: '0',
applyOilType: '0',
},
userGradeList: [],
userLabelList: [],
oilNameList: [],
// 油号列表
oilNumberList: [],
activityTimeTypeList: ["永久有效", "自定义"],
tindex1: '0',
preferentialTypeList: ["立减优惠", "折扣优惠"],
tindex2: '0',
weekMonthTypeList: ["每周", "每月"],
tindex3: '0',
oilTypeList: ['不限', '自定义'],
tindex4: '0',
activityTypeList: ['固定满减', '随机满减', '每满'],
tindex5: '0',
weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
weekDay: [],
monthDay: [],
orderList: [{
activeManner: '0',
full: "",
sub: "",
randomFront: "",
randomAfter: "",
maxPreferential: "",
enjoyDiscount: "",
}],
refuelList: [{
activeManner: '0',
full: "",
sub: "",
randomFront: "",
randomAfter: "",
maxPreferential: "",
enjoyDiscount: "",
}],
// 表单校验
rules: {
timeType: [
{required: true, message: '适用时间段不能为空', trigger: 'blur'},
],
activeType: [
{required: true, message: '活动类型不能为空', trigger: 'blur'},
],
activeName: [
{required: true, message: '活动名称不能为空', trigger: 'blur'},
],
activeTimeType: [
{required: true, message: '活动时间不能为空', trigger: 'blur'},
],
offerType: [
{required: true, message: '优惠类型不能为空', trigger: 'blur'},
],
levelId: [
{required: true, message: '适用会员等级不能为空', trigger: 'blur'},
],
dayLimitNum: [
{required: true, message: '每人每天参与上限不能为空', trigger: 'blur'},
],
monthLimitNum: [
{required: true, message: '每人每月参与上限不能为空', trigger: 'blur'},
],
limitNum: [
{required: true, message: '每人累计参与上限不能为空', trigger: 'blur'},
],
applyOilType: [
{required: true, message: '适用油品油号不能为空', trigger: 'blur'},
],
paymentType: [
{required: true, message: '可使用支付方式不能为空', trigger: 'blur'},
],
activeManner: [
{required: true, message: '活动方式不能为空', trigger: 'blur'},
],
timeApplyStart: [
{
validator: (rule, value, callback) => {
if (!this.ruleForm.timeApplyStart || !this.ruleForm.timeApplyEnd) {
callback(new Error("请选择完整的时间段"));
} else {
callback();
}
},
trigger: "change"
}
]
}
}
},
created() {
if (this.activeId) {
// 查询信息
this.getInfo()
}
this.listUserGrade()
this.getUserLabelList()
this.getOilList()
},
methods: {
changeOfferType() {
this.ruleForm.activeType = '0'
console.log(this.ruleForm, 446)
},
getOilList() {
getOilNameList().then(response => {
this.oilNameList = response.data;
})
oilNumberList().then(response => {
this.oilNumberList = response.data.records;
})
},
getOilNamess(list, id) {
let name = ""
if (list != null && list != "") {
list.forEach(item => {
if (item.id == id) {
name = item.oilName;
}
})
}
return name;
},
// 会员等级
listUserGrade() {
listUserGrade({page: 1, pageSize: 1000}).then(res => {
if (res.code == 200) {
this.userGradeList = res.data.records
}
})
},
// 会员标签
getUserLabelList() {
listUserLabel({page: 1, pageSize: 10000}).then(res => {
this.userLabelList = res.data.records
})
},
getInfo() {
getActiveSubPrice(this.activeId).then(res => {
if (res.data) {
this.ruleForm = res.data
if (res.data.timeSlots) {
if (res.data.timeType == 1) {
this.weekDay = this.ruleForm.timeSlots.split(",")
} else if (res.data.timeType == 2) {
this.monthDay = this.ruleForm.timeSlots.split(",")
}
}
if (res.data.levelId) this.ruleForm.levelId = res.data.levelId.split(",")
if (res.data.babelIds) this.ruleForm.babelIds = res.data.babelIds.split(",")
if (res.data.applyOil) this.ruleForm.applyOil = res.data.applyOil.split(",")
if (res.data.paymentType) this.ruleForm.paymentType = res.data.paymentType.split(",")
if (res.data.activeManner) this.ruleForm.activeManner = res.data.activeManner.split(",")
if (res.data.orderList) this.orderList = this.ruleForm.orderList
if (res.data.refuelList) this.refuelList = this.ruleForm.refuelList
} else {
this.ruleForm = {
activeTimeType: '0',
paymentType: [],
activeManner: [],
offerType: '0',
activeType: '0',
timeType: '0',
applyOilType: '0',
}
this.tindex1 = 0
this.tindex2 = 0
this.tindex3 = 0
this.tindex4 = 0
this.tindex5 = 0
}
})
},
addPoints(activeManner) {
let data = {
activeManner: activeManner,
full: "",
sub: "",
randomFront: "",
randomAfter: "",
maxPreferential: "",
enjoyDiscount: "",
}
this.orderList.push(data)
},
deletePoints(index) {
this.orderList.splice(index, 1);
},
addGrowthValues(activeManner) {
let data = {
activeManner: activeManner,
full: "",
sub: "",
randomFront: "",
randomAfter: "",
maxPreferential: "",
enjoyDiscount: "",
}
this.refuelList.push(data)
},
deleteGrowthValues(index) {
this.refuelList.splice(index, 1);
},
Typeindex1(index) {
this.tindex1 = index
this.ruleForm.activeTimeType = index
},
Typeindex2(index) {
this.tindex2 = index
this.ruleForm.offerType = index
this.ruleForm.activeType = 0
if (index == 0) {
this.activityTypeList = ['固定满减', '随机满减', '每满']
} else {
this.activityTypeList = ['固定满减']
}
this.tindex5 = 0
this.orderList = []
this.refuelList = []
},
Typeindex3(index) {
this.tindex3 = index
this.ruleForm.timeType = index
},
Typeindex4(index) {
this.tindex4 = index
this.ruleForm.applyOilType = index
},
Typeindex5(index) {
this.tindex5 = index
this.ruleForm.activeType = index
},
submitRuleForm(formName) {
//活动方式为 订单金额
if (this.ruleForm.activeManner && this.ruleForm.activeManner.includes('0')) {
const list = this.orderList.some(item => {
if (item.full === '' || item.sub === '') {
this.$message.error("请填写订单相关活动规则,如不需要请删除");
return true; // 返回 true 表示停止循环
}
});
if (list) {
return true; //退出当前方法
}
}
//活动方式为 订单金额
if (this.ruleForm.activeManner && this.ruleForm.activeManner.includes('1')) {
const list = this.refuelList.some(item => {
if (item.full === '' || item.sub === '') {
this.$message.error("请填写加油相关活动规则,如不需要请删除");
return true; // 返回 true 表示停止循环
}
});
if (list) {
return true; //退出当前方法
}
}
if (this.tindex1 == 1) {
if (!this.ruleForm.activeStartTime || !this.ruleForm.activeEndTime) {
this.$message.error("请选择活动开始时间")
return
}
}
if (this.ruleForm.activeManner && this.ruleForm.activeManner.includes('0')) {
if (!this.orderList || this.orderList.length == 0) {
this.$message.error("请先添加活动方式规则")
return;
}
}
if (this.ruleForm.activeManner && this.ruleForm.activeManner.includes('1')) {
if (!this.refuelList || this.refuelList.length == 0) {
this.$message.error("请先添加活动方式规则")
return;
}
}
if (this.ruleForm.activeManner.length == 0) {
this.$message.warning("请选择活动方式");
return
}
if (this.ruleForm.activeManner && this.ruleForm.activeManner.includes('0')) {
//如果选订单则 清空加油活动
this.refuelList = []
}
if (this.ruleForm.activeManner && this.ruleForm.activeManner.includes('1')) {
//如果加油 则清空订单
this.orderList = []
}
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.ruleForm.timeType == 1) {
this.ruleForm.timeSlots = this.weekDay.toString()
} else if (this.ruleForm.timeType == 2) {
this.ruleForm.timeSlots = this.monthDay.toString()
}
if (this.ruleForm.levelId) this.ruleForm.levelId = this.ruleForm.levelId.toString()
if (this.ruleForm.babelIds) this.ruleForm.babelIds = this.ruleForm.babelIds.toString()
if (this.ruleForm.applyOil) this.ruleForm.applyOil = this.ruleForm.applyOil.toString()
if (this.ruleForm.paymentType) this.ruleForm.paymentType = this.ruleForm.paymentType.toString()
if (this.ruleForm.activeManner) this.ruleForm.activeManner = this.ruleForm.activeManner.toString()
if (this.orderList) this.ruleForm.orderList = this.orderList
if (this.refuelList) this.ruleForm.refuelList = this.refuelList
if (this.ruleForm.id) {
// 修改
editActiveSubPrice(this.ruleForm).then(res => {
this.$message.success("修改成功")
// this.getInfo()
this.$router.push({path: "/EventMarketing/center/index", query: {id: '3'}})
})
} else {
// 添加
addActiveSubPrice(this.ruleForm).then(res => {
if (res.data) {
this.$message.success("添加成功")
// this.getInfo()
this.$router.push({path: "/EventMarketing/center/index", query: {id: '3'}})
} else {
this.$message.error("添加失败")
}
})
}
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
// this.getInfo()
this.$router.push({path: "/EventMarketing/center/index", query: {activeId: this.activeId}})
},
}
}
</script>
<style lang="scss" scoped>
.cot-box {
width: 100%;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
padding: 15px;
margin: 0 auto;
height: 86vh;
}
.d-s {
display: flex;
align-items: center;
}
.icon-type {
display: flex;
align-items: center;
font-weight: 400;
font-size: 14px;
color: #999999;
margin-right: 20px;
cursor: pointer;
}
.acvtive {
color: #FF770F !important;
}
.app-open{
background: #f9f9f9;
box-sizing: border-box;
padding: 10px;
}
</style>