|
|
@@ -0,0 +1,550 @@
|
|
|
+<template>
|
|
|
+ <van-popup v-model:show="show" destroy-on-close position="bottom" style="height:100%;border-radius: 0;background-color: #f4f8fa;">
|
|
|
+ <div class="popup-header">
|
|
|
+ <div class="btn-text1" @click="onCancel">取消</div>
|
|
|
+ <div class="btn-text2" @click="onConfirm">确定</div>
|
|
|
+ </div>
|
|
|
+ <div class="title-box">请选择您的应急（三防）责任类别</div>
|
|
|
+ <div class="select-container">
|
|
|
+ <div v-for="(item, index) in selectOptions" :key="index" class="select-box">
|
|
|
+ <div class="item" @click="item.open = !item.open">
|
|
|
+ <van-checkbox v-model="item.checked" :indeterminate="item.isIndeterminate" disabled class="custom-checkbox">
|
|
|
+ <div class="label-box">
|
|
|
+ <i :class="'icon ' + item.icon" />
|
|
|
+ <span>{{item.label}}</span>
|
|
|
+ </div>
|
|
|
+ </van-checkbox>
|
|
|
+ <i :class="item.open ? 'icon-up' : 'icon-down'" />
|
|
|
+ </div>
|
|
|
+ <div v-show="item.open" class="item2-box">
|
|
|
+ <van-checkbox-group v-model="selectData[item.key].data" @change="checkBoxChange(item)">
|
|
|
+ <div v-for="(item2, index2) in item.list" :key="index2" class="item2">
|
|
|
+ <div class="select-item">
|
|
|
+ <van-checkbox :name="item2.value">{{ item2.label }}</van-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-checkbox-group>
|
|
|
+ <div v-if="item.label === '成员单位'" class="text-box">
|
|
|
+ <div class="text1">请填写单位名称</div>
|
|
|
+ <div class="filed-box">
|
|
|
+ <van-field v-model="selectData.memberUnit.name" placeholder="如：茂名供电局" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.label === '重点部门'" class="text-box">
|
|
|
+ <div class="text1">请填写单位名称</div>
|
|
|
+ <div class="filed-box">
|
|
|
+ <van-field v-model="selectData.keyDepartment.name" placeholder="如：茂名市中心小学" />
|
|
|
+ </div>
|
|
|
+ <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
|
|
|
+ <div class="tag-box">
|
|
|
+ <div :class="selectData.keyDepartment.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '1')">主要负责人</div>
|
|
|
+ <div :class="selectData.keyDepartment.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '2')">分管负责人</div>
|
|
|
+ <div :class="selectData.keyDepartment.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '3')">具体负责人</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.label === '水利部门'" class="text-box">
|
|
|
+ <div class="text1">请填写单位名称</div>
|
|
|
+ <div class="filed-box">
|
|
|
+ <van-field v-model="selectData.waterResourcesDepartment.name" placeholder="如：北江大堤" />
|
|
|
+ </div>
|
|
|
+ <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
|
|
|
+ <div class="tag-box">
|
|
|
+ <div :class="selectData.waterResourcesDepartment.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '1')">管理单位责任人</div>
|
|
|
+ <div :class="selectData.waterResourcesDepartment.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '2')">行政责任人</div>
|
|
|
+ <div :class="selectData.waterResourcesDepartment.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '3')">技术责任人</div>
|
|
|
+ <div :class="selectData.waterResourcesDepartment.tagData.includes('4') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '4')">巡查责任人</div>
|
|
|
+ <div :class="selectData.waterResourcesDepartment.tagData.includes('5') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '5')">其他</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.label === '抢救队伍'" class="text-box">
|
|
|
+ <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
|
|
|
+ <div class="tag-box">
|
|
|
+ <div :class="selectData.rescueTeam.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '1')">主要负责人</div>
|
|
|
+ <div :class="selectData.rescueTeam.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '2')">分管负责人</div>
|
|
|
+ <div :class="selectData.rescueTeam.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '3')">具体联系人</div>
|
|
|
+ <div :class="selectData.rescueTeam.tagData.includes('4') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '4')">抢险队员</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.label === '地质灾害'" class="text-box">
|
|
|
+ <div class="text1">请填写隐患点名称</div>
|
|
|
+ <div class="filed-box">
|
|
|
+ <van-field v-model="selectData.geologicalDisaster.name" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.label === '其他'" class="text-box">
|
|
|
+ <div class="text1">请填写具体类型</div>
|
|
|
+ <div class="filed-box">
|
|
|
+ <van-field v-model="selectData.other.name" placeholder="请填写责任类型、如：重点单位等" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: Boolean
|
|
|
+});
|
|
|
+
|
|
|
+const emits = defineEmits(['update:modelValue','confirm']);
|
|
|
+let show = computed({
|
|
|
+ get() {
|
|
|
+ return props.modelValue;
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ emits('update:modelValue', value);
|
|
|
+ }
|
|
|
+})
|
|
|
+const selectOptions = ref([
|
|
|
+ {
|
|
|
+ label: '党委政府',
|
|
|
+ value: '党委政府',
|
|
|
+ key: 'government',
|
|
|
+ icon: 'icon1',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '主要负责人', value: '主要负责人' },
|
|
|
+ { label: '分管负责人', value: '分管负责人' },
|
|
|
+ { label: '包片负责人', value: '包片负责人' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '三防指挥部',
|
|
|
+ value: '三防指挥部',
|
|
|
+ key: 'headquarters',
|
|
|
+ icon: 'icon2',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '总指挥', value: '总指挥' },
|
|
|
+ { label: '副总指挥', value: '副总指挥' },
|
|
|
+ { label: '秘书长', value: '秘书长' },
|
|
|
+ { label: '副秘书长', value: '副秘书长' },
|
|
|
+ { label: '成员', value: '成员' },
|
|
|
+ { label: '成员单位内设对口机构负责人', value: '成员单位内设对口机构负责人' },
|
|
|
+ { label: '成员单位的联络员', value: '成员单位的联络员' },
|
|
|
+ { label: '工作督导组成员', value: '工作督导组成员' },
|
|
|
+ { label: '三防专家组成员', value: '三防专家组成员' },
|
|
|
+ { label: '北江大堤前线抗洪指挥部总指挥', value: '北江大堤前线抗洪指挥部总指挥' },
|
|
|
+ { label: '北江大堤前线抗洪指挥部副总指挥', value: '北江大堤前线抗洪指挥部副总指挥' },
|
|
|
+ { label: '北江大堤前线抗洪指挥部成员', value: '北江大堤前线抗洪指挥部成员' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '应急部门',
|
|
|
+ value: '应急部门',
|
|
|
+ key: 'emergencyDepartment',
|
|
|
+ icon: 'icon3',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '领导', value: '领导' },
|
|
|
+ { label: '机关处室', value: '机关处室' },
|
|
|
+ { label: '直属单位', value: '直属单位' },
|
|
|
+ { label: '其他', value: '其他' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '成员单位',
|
|
|
+ value: '成员单位',
|
|
|
+ key: 'memberUnit',
|
|
|
+ icon: 'icon4',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '领导成员', value: '领导成员' },
|
|
|
+ { label: '对口处室主要负责人', value: '对口处室主要负责人' },
|
|
|
+ { label: '对口处室分管负责人', value: '对口处室分管负责人' },
|
|
|
+ { label: '联系人', value: '联系人' },
|
|
|
+ { label: '其他', value: '其他' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '重点部门',
|
|
|
+ value: '重点部门',
|
|
|
+ key: 'keyDepartment',
|
|
|
+ icon: 'icon5',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '学校', value: '学校' },
|
|
|
+ { label: '在建基建工程', value: '在建基建工程' },
|
|
|
+ { label: '养老院', value: '养老院' },
|
|
|
+ { label: '石油、化工、核电等高危行业', value: '石油、化工、核电等高危行业' },
|
|
|
+ { label: '企业', value: '企业' },
|
|
|
+ { label: '农场', value: '农场' },
|
|
|
+ { label: '林场', value: '林场' },
|
|
|
+ { label: '矿场', value: '矿场' },
|
|
|
+ { label: '养殖场', value: '养殖场' },
|
|
|
+ { label: '旅游景区', value: '旅游景区' },
|
|
|
+ { label: '其他', value: '其他' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '行政村',
|
|
|
+ value: '行政村',
|
|
|
+ key: 'administrativeVillage',
|
|
|
+ icon: 'icon6',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '党支部书记', value: '党支部书记' },
|
|
|
+ { label: '村居委主任', value: '村居委主任' },
|
|
|
+ { label: '村居委其他负责人', value: '村居委其他负责人' },
|
|
|
+ { label: '村民居委组长', value: '村民居委组长' },
|
|
|
+ { label: '简易雨量水位计观测人员', value: '简易雨量水位计观测人员' },
|
|
|
+ { label: '鸣锣和手摇报警器负责人', value: '鸣锣和手摇报警器负责人' },
|
|
|
+ { label: '小型水利设施管理人员', value: '小型水利设施管理人员' },
|
|
|
+ { label: '巡查抢险队员', value: '巡查抢险队员' },
|
|
|
+ { label: '灾害信息员', value: '灾害信息员' },
|
|
|
+ { label: '其他', value: '其他' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '水利部门',
|
|
|
+ value: '水利部门',
|
|
|
+ key: 'waterResourcesDepartment',
|
|
|
+ icon: 'icon7',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '省管水利工程', value: '省管水利工程' },
|
|
|
+ { label: '大型水库', value: '大型水库' },
|
|
|
+ { label: '中型水库', value: '中型水库' },
|
|
|
+ { label: '小一型水库', value: '小一型水库' },
|
|
|
+ { label: '广东省十大堤围', value: '广东省十大堤围' },
|
|
|
+ { label: '万亩以上提围', value: '万亩以上提围' },
|
|
|
+ { label: '其他', value: '其他' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '受威胁转移',
|
|
|
+ value: '受威胁转移',
|
|
|
+ key: 'threatenedTransfer',
|
|
|
+ icon: 'icon8',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '山洪地质灾害隐患点群众', value: '山洪地质灾害隐患点群众' },
|
|
|
+ { label: '独居老人', value: '独居老人' },
|
|
|
+ { label: '留守儿童', value: '留守儿童' },
|
|
|
+ { label: '低洼易涝区域群众', value: '低洼易涝区域群众' },
|
|
|
+ { label: '泥砖房、危房、工棚居住人员', value: '泥砖房、危房、工棚居住人员' },
|
|
|
+ { label: '海上养殖、作业人员', value: '海上养殖、作业人员' },
|
|
|
+ { label: '出海渔船', value: '出海渔船' },
|
|
|
+ { label: '外来务工人员', value: '外来务工人员' },
|
|
|
+ { label: '出租屋', value: '出租屋' },
|
|
|
+ { label: '其他', value: '其他' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '抢救队伍',
|
|
|
+ value: '抢救队伍',
|
|
|
+ key: 'rescueTeam',
|
|
|
+ icon: 'icon9',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '飞行队', value: '飞行队' },
|
|
|
+ { label: '工程抢险', value: '独居老人' },
|
|
|
+ { label: '海上救助单位', value: '海上救助单位' },
|
|
|
+ { label: '军队、武警', value: '军队、武警' },
|
|
|
+ { label: '消防', value: '消防' },
|
|
|
+ { label: '潜水队伍', value: '潜水队伍' },
|
|
|
+ { label: '轻舟队伍', value: '轻舟队伍' },
|
|
|
+ { label: '水文应急监测队伍', value: '水文应急监测队伍' },
|
|
|
+ { label: '物资仓库', value: '物资仓库' },
|
|
|
+ { label: '其他', value: '其他' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '地质灾害',
|
|
|
+ value: '地质灾害',
|
|
|
+ key: 'geologicalDisaster',
|
|
|
+ icon: 'icon10',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '主要负责人', value: '主要负责人' },
|
|
|
+ { label: '监测人', value: '监测人' },
|
|
|
+ { label: '其他', value: '其他' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '其他',
|
|
|
+ value: '其他',
|
|
|
+ key: 'other',
|
|
|
+ icon: 'icon11',
|
|
|
+ open: false,
|
|
|
+ checked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ list: [
|
|
|
+ { label: '主要负责人', value: '主要负责人' },
|
|
|
+ { label: '分管负责人', value: '分管负责人' },
|
|
|
+ { label: '具体联系人', value: '具体联系人' },
|
|
|
+ { label: '其他', value: '其他' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]);
|
|
|
+const selectData = ref({
|
|
|
+ government: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ headquarters: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ emergencyDepartment: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ memberUnit: {
|
|
|
+ name: '',
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ keyDepartment: {
|
|
|
+ name: '',
|
|
|
+ tagData: [],
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ administrativeVillage: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ waterResourcesDepartment: {
|
|
|
+ name: '',
|
|
|
+ tagData: [],
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ threatenedTransfer: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ rescueTeam: {
|
|
|
+ tagData: [],
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ geologicalDisaster: {
|
|
|
+ name: '',
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ other: {
|
|
|
+ name: '',
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+})
|
|
|
+// 子项选中变化
|
|
|
+const checkBoxChange = (data) => {
|
|
|
+ let checked = selectData.value[data.key] && selectData.value[data.key].data && data.list.length === selectData.value[data.key].data.length;
|
|
|
+ data.isIndeterminate = !checked && selectData.value[data.key].data.length > 0;
|
|
|
+ data.checked = checked;
|
|
|
+};
|
|
|
+
|
|
|
+const handleClickTag = (key, value) => {
|
|
|
+ let index = selectData.value[key].tagData.findIndex(item => item === value);
|
|
|
+ if (index > -1) {
|
|
|
+ selectData.value[key].tagData.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ selectData.value[key].tagData.push(value);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const onCancel = () => {
|
|
|
+ emits('update:modelValue', false)
|
|
|
+}
|
|
|
+const onConfirm = () => {
|
|
|
+ onCancel();
|
|
|
+ emits('confirm')
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.popup-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ .btn-text1 {
|
|
|
+ padding: 0 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #969799;
|
|
|
+ }
|
|
|
+ .btn-text2 {
|
|
|
+ padding: 0 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1989fa;
|
|
|
+ }
|
|
|
+}
|
|
|
+.title-box {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ padding: 0 16px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #323233;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.select-container {
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.select-box {
|
|
|
+ margin-top: 6px;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ .label-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #323233;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item2-box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 10px 0 36px;
|
|
|
+ .item2 {
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 15px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+.icon1 {
|
|
|
+ width: 16px;
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon2 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon3 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon4 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon4.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon5 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon5.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon6 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon6.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon7 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon7.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon8 {
|
|
|
+ width: 16px;
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon8.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon9 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon9.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon10 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon10.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon11 {
|
|
|
+ background: url('@/assets/images/threePreventionResponsiblePerson/icon11.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.icon-down {
|
|
|
+ background: url('@/assets/images/down.png') no-repeat;
|
|
|
+}
|
|
|
+.icon-up {
|
|
|
+ background: url('@/assets/images/up.png') no-repeat;
|
|
|
+}
|
|
|
+.icon-down,
|
|
|
+.icon-up {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.custom-checkbox {
|
|
|
+ cursor: default;
|
|
|
+ :deep(.van-checkbox__icon--disabled) {
|
|
|
+ .van-icon {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.van-checkbox__icon--indeterminate) {
|
|
|
+ .van-icon {
|
|
|
+ border-color: #1989fa !important;
|
|
|
+ background-color: #1989fa !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.van-checkbox__icon--checked) {
|
|
|
+ .van-icon {
|
|
|
+ color: #ffffff;
|
|
|
+ border-color: #1989fa !important;
|
|
|
+ background-color: #1989fa !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.text-box {
|
|
|
+ padding-bottom: 8px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ color: #323233;
|
|
|
+ }
|
|
|
+ .filed-box {
|
|
|
+ padding: 5px 8px;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tag-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ .tag {
|
|
|
+ margin-right: 5px;
|
|
|
+ padding: 3px 8px;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #323233;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .tag-active {
|
|
|
+ background-color: #1989fa;
|
|
|
+ border: 1px solid #1989fa;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
