|
|
@@ -0,0 +1,621 @@
|
|
|
+<template>
|
|
|
+ <div v-if="active" class="register-edit">
|
|
|
+ <nav-bar :go="go"></nav-bar>
|
|
|
+ <div class="page-container">
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <div class="card" v-if="taskInfo">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell :title="taskInfo.taskName">
|
|
|
+ <template #right-icon>
|
|
|
+ <span :style="{ color: getState(getDictLabel(taskInfo.status, 'safety_check_status')) }">
|
|
|
+ {{ getDictLabel(taskInfo.status, 'safety_check_status') }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell title="日期时间" :value="formatTime(taskInfo.planStartTime,taskInfo.planEndTime)" />
|
|
|
+ <van-cell title="受检机构" :value="taskInfo.beCheckedOrgName" />
|
|
|
+ <van-cell v-if="!enable" title="检查组成员" :value="taskInfo.checkTeam || '无'" />
|
|
|
+ <van-field
|
|
|
+ v-else
|
|
|
+ v-model="taskInfo.checkTeam"
|
|
|
+ label="检查组成员"
|
|
|
+ rows="2"
|
|
|
+ maxlength="100"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ <!-- 检查项目 -->
|
|
|
+ <fieldset class="fieldset" :disabled="!enable">
|
|
|
+ <div class="card">
|
|
|
+ <p class="legend">检查项目 <span v-if="enable" @click="addCheck">添加检查内容</span></p>
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <van-search v-model="itemName" class="van-hairline--top" placeholder="请输入检查项名称" />
|
|
|
+ <van-collapse v-model="activeNames" v-for="v in resultList" :key="v.itemId">
|
|
|
+ <van-collapse-item :title="v.itemName" :name="v.itemName">
|
|
|
+ <div v-for="(item, index) in v.pointList" :key="item.pointId" class="collapse-box" :class="{'van-hairline--bottom':item.status}">
|
|
|
+ <van-cell :border="Boolean(item.status)">
|
|
|
+ <template #title>
|
|
|
+ <pre>{{ item.pointName }}</pre>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <span v-if="item.nfcList && item.nfcList.length">
|
|
|
+ <span style="color:#009240;">{{ getNfcState(item.nfcList) }}</span>/<span >{{item.nfcList.length}}</span>
|
|
|
+ </span>
|
|
|
+ <img
|
|
|
+ v-if="enable && item.nfcList && item.nfcList.length"
|
|
|
+ :src="require('../../../assets/svg/NFC.svg')"
|
|
|
+ class="nfc-icon"
|
|
|
+ @click="clickNFC(item.nfcList)"
|
|
|
+ />
|
|
|
+ <van-switch
|
|
|
+ v-if="enable"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ v-model="item.status"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ inactive-color="#4fc08d"
|
|
|
+ active-color="#ee0a24"
|
|
|
+ @change="switchChange(item)"
|
|
|
+ size="20"
|
|
|
+ />
|
|
|
+ <span v-else>
|
|
|
+ <van-tag v-if="item.status" type="warning">隐患</van-tag>
|
|
|
+ <van-tag v-else type="success">正常</van-tag>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell-group v-show="item.status" :border="false">
|
|
|
+ <van-cell v-if="item.nfcList && item.nfcList.length > 0" :border="false">
|
|
|
+ <div
|
|
|
+ v-if="img.img"
|
|
|
+ class="nfc-img"
|
|
|
+ v-for="(img, i) in item.nfcList"
|
|
|
+ :key="img.img"
|
|
|
+ @click="preViewNFC(i)"
|
|
|
+ >
|
|
|
+ <img :src="imgUrl(img.img)" alt="" />
|
|
|
+ <span>{{ img.checkName }}</span>
|
|
|
+ </div>
|
|
|
+ </van-cell>
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ :maxlength="255"
|
|
|
+ v-model="item.remark"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ label="情况描述"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入(255字以内)"
|
|
|
+ />
|
|
|
+ <select-cell
|
|
|
+ required
|
|
|
+ :disabled="!enable"
|
|
|
+ is-row
|
|
|
+ title="整改期限"
|
|
|
+ v-model="item.rectificationDeadline"
|
|
|
+ :data-list="dateList"
|
|
|
+ />
|
|
|
+ <div class="upload-box">
|
|
|
+ <uploader v-if="enable" :maxCount="5" v-model="item.imgData" />
|
|
|
+ <van-cell v-else-if="item.imgData">
|
|
|
+ <div
|
|
|
+ class="nfc-img"
|
|
|
+ v-for="(v, i) in item.imgData"
|
|
|
+ :key="v.imgPath"
|
|
|
+ @click="clickWarnImage(item.imgData, i)"
|
|
|
+ >
|
|
|
+ <img :src="imgUrl(v.imgPath)" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- <img class="nfc-img" v-for="v in item.imgData" :src="imgUrl(v.imgPath)" alt="" :key="v.id">-->
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </div>
|
|
|
+ </fieldset>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div v-if="enable" class="flex-box">
|
|
|
+ <van-button type="default" plain @click="accredit" v-show="showGrantBtn">授权</van-button>
|
|
|
+ <van-button type="info" plain hairline @click="saveData">保存</van-button>
|
|
|
+ <van-button type="info" @click="submitData">提交</van-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <van-image-preview v-model="showPreView" :images="preViewImages.images" :startPosition="preViewImages.startPosition">-->
|
|
|
+ <!-- <template v-slot:index>第{{ index }}页</template>-->
|
|
|
+ <!-- </van-image-preview>-->
|
|
|
+
|
|
|
+ <!-- nfc弹窗 -->
|
|
|
+ <nfc-popup v-if="enable" ref="NfcPopup" @checkNFC="checkNFC" @change="changeNfcImg"></nfc-popup>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加检查内容 -->
|
|
|
+ <AddCheck v-else @goBack="goBack" @addItem="addItem" :orgType="taskInfo.beCheckOrgType"></AddCheck>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import NavBar from '@/components/NavBar'
|
|
|
+import SelectCell from '@/components/selectCell'
|
|
|
+import DateCell from '@/components/dateCell'
|
|
|
+import Uploader from '@/components/upload/gxuploader'
|
|
|
+import NfcPopup from '@/components/nfcPopup/more'
|
|
|
+import AddCheck from './addCheck'
|
|
|
+import { registerDetail, registerSubmit } from './api'
|
|
|
+import { imgUrl } from '@/utils'
|
|
|
+import { ImagePreview } from 'vant'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'securityDetail',
|
|
|
+ components: { NavBar, SelectCell, DateCell, Uploader, NfcPopup, AddCheck },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: null,
|
|
|
+ activeNames: ['1'],
|
|
|
+ //基本信息
|
|
|
+ taskInfo: [],
|
|
|
+ //选中的nfc列表
|
|
|
+ NFCList: [],
|
|
|
+ //区域下检查内容列表
|
|
|
+ checkList: [],
|
|
|
+ //检查内容具体项列表
|
|
|
+ checkItemList: [],
|
|
|
+ //nfc扫描数量
|
|
|
+ NFCNum: 0,
|
|
|
+ //所有检查项数量
|
|
|
+ allCheckNum: 0,
|
|
|
+ //区域下检查项数量
|
|
|
+ checkNum: 0,
|
|
|
+ //nfc图片
|
|
|
+ nfcImage: [],
|
|
|
+ enable: false,
|
|
|
+ stateList: [],
|
|
|
+ dayList: [],
|
|
|
+ itemName:null,
|
|
|
+ preViewImages: {
|
|
|
+ images: [],
|
|
|
+ startPosition: 0
|
|
|
+ },
|
|
|
+ dicts: ['safety_check_status', 'rectification_deadline'],
|
|
|
+ showPreView: false,
|
|
|
+ selected: null,
|
|
|
+ active: true,
|
|
|
+ dateList:[],
|
|
|
+ go: {
|
|
|
+ type: 'replace',
|
|
|
+ path: '/securityCheckRegister'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['dictionary',"roleList",'orgId']),
|
|
|
+ showGrantBtn(){
|
|
|
+ let userRoleIds = this.roleList.map((r) => r.roleId);
|
|
|
+ let taskRoleIds = this.taskInfo.checkRoles
|
|
|
+ ? this.taskInfo.checkRoles.map((r) => r.id)
|
|
|
+ : [];
|
|
|
+ return (
|
|
|
+ this.taskInfo.status != 3 &&
|
|
|
+ this.taskInfo.planType==3 &&
|
|
|
+ this.taskInfo.checkOrgId == this.orgId &&
|
|
|
+ userRoleIds.find((ur) => taskRoleIds.includes(ur))
|
|
|
+ );
|
|
|
+ },
|
|
|
+ resultList(){
|
|
|
+ if (!this.itemName) {
|
|
|
+ return this.checkList;
|
|
|
+ }
|
|
|
+ // 使用传入的值来过滤数据
|
|
|
+ const filteredData = this.checkList.map(item => ({
|
|
|
+ ...item,
|
|
|
+ pointList:
|
|
|
+ item.pointList.filter(point =>
|
|
|
+ (point.itemName.includes(this.itemName) || point.pointName.includes(this.itemName))
|
|
|
+ )
|
|
|
+ })).filter(item => item.pointList.length > 0);
|
|
|
+ return filteredData;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.id = this.$route.query.id
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.openCameraCallBack = null
|
|
|
+ window.openNFCScanCallBack = null
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //长度校验
|
|
|
+ validator(val) {
|
|
|
+ let len = val.length;
|
|
|
+ if( len > 5) {
|
|
|
+ this.$toast.fail('问题情况输入长度不能超过200');
|
|
|
+ return true
|
|
|
+ }else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取NFC已扫描数据
|
|
|
+ getNfcState(arr){
|
|
|
+ arr = arr || [];
|
|
|
+ let nums = arr.filter(v=>{return v.status === 1});
|
|
|
+ return nums.length;
|
|
|
+ },
|
|
|
+ //调用nfc
|
|
|
+ checkNFC(){
|
|
|
+ //设置nfc调用后的回调
|
|
|
+ window.openNFCScanCallBack = this.openNFCScanCallBack;
|
|
|
+
|
|
|
+ //设置loading弹窗
|
|
|
+ this.$toast.loading({
|
|
|
+ duration: 0, // 持续展示 toast
|
|
|
+ position: 'top',
|
|
|
+ forbidClick: true,
|
|
|
+ message: '请靠近NFC标签，进行扫描！',
|
|
|
+ });
|
|
|
+
|
|
|
+ let second = 30;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ second--;
|
|
|
+ if(!second){
|
|
|
+ this.$toast.clear();
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.$toast.fail({
|
|
|
+ message: '未扫描到任何信息！',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ //挂载nfc
|
|
|
+ this.useNFC();
|
|
|
+ },
|
|
|
+ //调用nfc后的回调
|
|
|
+ openNFCScanCallBack(nfcStr){
|
|
|
+ //alert(JSON.stringify(nfcStr))
|
|
|
+ clearInterval(this.timer);
|
|
|
+ let nfcCode = '';
|
|
|
+ try{
|
|
|
+ let nfc = JSON.parse(nfcStr);
|
|
|
+ nfcCode = nfc.content;
|
|
|
+ }catch (e) {
|
|
|
+ nfcCode = nfcStr.content;
|
|
|
+ }
|
|
|
+ // let nfc = JSON.parse(nfcStr);
|
|
|
+ // let nfcCode = nfc.content;
|
|
|
+ //alert(nfcCode)
|
|
|
+ this.checkNfcFilter(nfcCode);
|
|
|
+ },
|
|
|
+ //验证nfc数据
|
|
|
+ checkNfcFilter(nfcCode){
|
|
|
+ //let areaId = null;
|
|
|
+ let checkOk = false;
|
|
|
+ //alert(JSON.stringify(this.NFCList,'NFCList'));
|
|
|
+ this.NFCList.forEach(v => {
|
|
|
+ if(v.nfcCode === nfcCode){
|
|
|
+ if(v.status === 1){
|
|
|
+ this.$toast.fail('NFC点位：' + v.nfcName + '已扫描，请勿重复扫描！');
|
|
|
+ throw new Error('NFC点位：' + v.nfcName + '已扫描，请勿重复扫描！');
|
|
|
+ }
|
|
|
+ v.status = 1;
|
|
|
+ v.scanMethod = 0;
|
|
|
+ this.$toast('NFC点位：' + v.nfcName + '扫描成功！');
|
|
|
+ checkOk = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if(!checkOk){
|
|
|
+ this.$toast.fail( "扫描结果不在本次检查范围内！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //是否显示nfc图标
|
|
|
+ nfcState(item){
|
|
|
+ if(item.nfcList && item.nfcList.length > 0){
|
|
|
+ return item.nfcList.some(v=>{
|
|
|
+ return v.status === 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+
|
|
|
+ //格式化时间范围
|
|
|
+ formatTime(start,end,format){
|
|
|
+ format = format || 'YYYY-MM-DD'
|
|
|
+ return `${this.dayjs(start).format(format)} ~ ${this.dayjs(end).format(format)}`;
|
|
|
+ },
|
|
|
+ //插入检查项
|
|
|
+ addItem(val) {
|
|
|
+ console.log(val, 'list')
|
|
|
+ if (!val) return
|
|
|
+ let str = JSON.parse(JSON.stringify(val))
|
|
|
+ str.forEach(valItem => {
|
|
|
+ console.log(this.checkList, 'checkList')
|
|
|
+ // 查找是否有与 valItem.itemId 相同的项
|
|
|
+ const existingItem = this.checkList.find(checkItem => checkItem.itemId === valItem.itemId)
|
|
|
+ if (existingItem) {
|
|
|
+ // // 如果存在相同 itemId 的项，查找 pointList 是否有与 valItem.pointId 相同的项
|
|
|
+ const existingPoint = existingItem.pointList.find(pointItem => pointItem.pointId === valItem.id)
|
|
|
+ if (!existingPoint) {
|
|
|
+ console.log(existingItem, 'point添加成功')
|
|
|
+ this.$nextTick(() => {
|
|
|
+ valItem.isAdd = 1;
|
|
|
+ existingItem.pointList.push(valItem)
|
|
|
+ this.active = true
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$toast(existingPoint.pointName + '已添加')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log(valItem, 'item添加成功')
|
|
|
+ this.checkList.push({
|
|
|
+ isAdd:1,
|
|
|
+ itemId: valItem.itemId,
|
|
|
+ itemName: valItem.itemName,
|
|
|
+ pointList: [valItem]
|
|
|
+ })
|
|
|
+ this.active = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ this.active = true
|
|
|
+ },
|
|
|
+ getState(state) {
|
|
|
+ switch (state){
|
|
|
+ case '待检查':
|
|
|
+ return '#008cd6';
|
|
|
+ case '进行中':
|
|
|
+ return '#bc9f71';
|
|
|
+ case '已完成':
|
|
|
+ return '#009240';
|
|
|
+ case '已逾期':
|
|
|
+ return '#D7000F';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addCheck() {
|
|
|
+ this.active = false
|
|
|
+ },
|
|
|
+ clickWarnImage(arr, i) {
|
|
|
+ this.preViewImages.images = arr.map(v => imgUrl(v.imgPath))
|
|
|
+ this.preViewImages.startPosition = i
|
|
|
+ ImagePreview(this.preViewImages)
|
|
|
+ },
|
|
|
+ preViewNFC(i) {
|
|
|
+ this.preViewImages.images = this.nfcImage.map(v => imgUrl(v.img))
|
|
|
+ this.preViewImages.startPosition = i
|
|
|
+ ImagePreview(this.preViewImages)
|
|
|
+ },
|
|
|
+ getDicts(s) {
|
|
|
+ return this.stateList.find(v => s == v.dictValue).dictLabel
|
|
|
+ },
|
|
|
+ //初始化数据
|
|
|
+ getData() {
|
|
|
+ let taskId = this.$route.query.id;
|
|
|
+ registerDetail(taskId).then(res => {
|
|
|
+ console.log(res, 'res')
|
|
|
+ this.taskInfo = res.data;
|
|
|
+ this.enable = this.taskInfo.status === 1 || this.taskInfo.status === 2; //是否可编辑
|
|
|
+ this.checkList = res.data.checkList;
|
|
|
+ this.dateList = this.getDictItem('rectification_deadline');
|
|
|
+ //设置默认展开项
|
|
|
+ this.activeNames = this.checkList.map(v => v.itemName);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //保存数据
|
|
|
+ saveData() {
|
|
|
+ //验证必填项
|
|
|
+ // let pointData = []
|
|
|
+ // this.checkList.forEach(v => {
|
|
|
+ // v.pointList.forEach(item => {
|
|
|
+ // pointData.push(item)
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // let arr = pointData.filter(v => {
|
|
|
+ // if (v.status === 1) {
|
|
|
+ // return !v.remark || !v.rectificationDeadline
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ //if (arr.length) return this.$toast(`${arr[0].itemName}:该信息不完整请填写`)
|
|
|
+ this.taskInfo.isSubmit = 0;
|
|
|
+ registerSubmit(this.taskInfo).then(res => {
|
|
|
+ this.$toast('保存成功')
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/securityCheckRegister'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //提交数据
|
|
|
+ submitData() {
|
|
|
+ //验证必填项
|
|
|
+ let pointData = this.checkList.flatMap(v => v.pointList);
|
|
|
+ let allNfcList = pointData.flatMap(v=>v.nfcList);
|
|
|
+ let result = allNfcList.some(v=>v.status != 1);
|
|
|
+ //some函数的用法
|
|
|
+ if(result){
|
|
|
+ this.$toast('请先扫描NFC标签');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let arr = pointData.filter(v => {
|
|
|
+ if (v.status === 1) {
|
|
|
+ return !v.remark || !v.rectificationDeadline
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (arr.length) return this.$toast(`${arr[0].itemName}:该信息不完整请填写`);
|
|
|
+ this.taskInfo.isSubmit = 1;
|
|
|
+ registerSubmit(this.taskInfo).then(res => {
|
|
|
+ this.$toast('提交成功')
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/securityCheckRegister'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //授权
|
|
|
+ accredit() {
|
|
|
+ let { checkOrgId, ymdDate, planId, beCheckedOrgId, id } = this.taskInfo
|
|
|
+ console.log(checkOrgId, 'checkOrgId')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/addWorker',
|
|
|
+ query: {
|
|
|
+ orgId: checkOrgId,
|
|
|
+ ymdDate,
|
|
|
+ planId,
|
|
|
+ beCheckedOrgId,
|
|
|
+ taskId: id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //点击NFC图标
|
|
|
+ clickNFC(arr) {
|
|
|
+ this.NFCList = arr;
|
|
|
+ console.log(this.NFCList,'NFCList')
|
|
|
+ this.$refs.NfcPopup.show(arr);
|
|
|
+ },
|
|
|
+ //清空数据
|
|
|
+ clearData() {
|
|
|
+ this.areaList = []
|
|
|
+ this.taskInfo = []
|
|
|
+ this.selectArea = []
|
|
|
+ this.NFCList = []
|
|
|
+ this.checkList = []
|
|
|
+ this.checkItemList = []
|
|
|
+ this.NFCNum = 0
|
|
|
+ this.enable = false
|
|
|
+ },
|
|
|
+ //切换开关时添加操作时间
|
|
|
+ switchChange(item) {
|
|
|
+ console.log(item, '666')
|
|
|
+ //item.resTime = formatDate(new Date());
|
|
|
+ },
|
|
|
+ //添加图片时的回调
|
|
|
+ changeNfcImg(imgItem) {
|
|
|
+ console.log(imgItem, this.NFCList, 'imgItem')
|
|
|
+ this.NFCList.forEach(v => {
|
|
|
+ if (v.nfcCode === imgItem.nfcCode) {
|
|
|
+ v.img = imgItem.url
|
|
|
+ v.status = 1
|
|
|
+ v.scanMethod = 1
|
|
|
+ this.nfcImage.push(v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.NFCList, this.nfcImage, 'nfcObj')
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.register-edit {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .page-container {
|
|
|
+ height: calc(100vh - 220px);
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .flex-box {
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ > span {
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ >button{
|
|
|
+ flex:.45;
|
|
|
+ margin:0 10px;
|
|
|
+ /* min-width: 30%;
|
|
|
+ max-width: 50%; */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ font-size: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > span {
|
|
|
+ color: orange;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: 0 10px 10px #eaeaea;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collapse-box{
|
|
|
+ -padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .check-area {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ margin: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ color: #aaa;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 2px 6px #ddd;
|
|
|
+ }
|
|
|
+ .nfc-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .custom-title {
|
|
|
+ align-self: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .upload-box {
|
|
|
+ padding: 30px;
|
|
|
+ }
|
|
|
+ .warning-msg {
|
|
|
+ color: orange;
|
|
|
+ text-align: center;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #1989fa;
|
|
|
+ }
|
|
|
+ .nfc-img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ margin: 0 10px;
|
|
|
+ position: relative;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ position: absolute;
|
|
|
+ padding: 0 10px;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ color: #eaeaea;
|
|
|
+ font-size: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yinbangyuan