qa-prevention-xgf-app/safetyEnvirSubPackages/pages/inspected/detail.vue

<template>
  <view class="content">
    <view class="card">
      <u-cell-group :border="false">
        <u-cell>
          <view slot="title" class="title">检查标题：</view>
          <view slot="value" class="value">
            <view>{{ form.INSPECTION_SUBJECT }}现场检查记录</view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">被检查单位：</view>
          <view slot="value" class="value">
            <view>{{ form.INSPECTED_DEPARTMENT_NAMES || '1' }}</view>
          </view>
        </u-cell>
        <u-cell v-if="!form.INSPECTED_DEPARTMENT_NAME">
          <view slot="title" class="title">被检查单位现场负责人：</view>
          <view slot="value" class="value">
            <view> {{ form.INSPECTED_SITEUSER_NAME }} </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">检查场所：</view>
          <view slot="value" class="value">
            <view> {{ form.INSPECTION_PLACE }} </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">检查类型：</view>
          <view slot="value" class="value">
            <view> {{ form.INSPECTION_TYPE_NAME }} </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">检查开始时间：</view>
          <view slot="value" class="value">
            <view> {{ form.INSPECTION_TIME_START }} </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">检查结束时间：</view>
          <view slot="value" class="value">
            <view> {{ form.INSPECTION_TIME_END }} </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">记录填写时间：</view>
          <view slot="value" class="value">
            <view>{{ form.CREATTIME }}</view>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="card" style="margin-top: 20upx;">
      <view class="title check">检查情况：</view>
      <view v-show="form.situationList && form.situationList.length > 0" class="ace-content">
        <view class="add_pard_item" v-for="(item, index) of form.situationList" :key="'SITUATION' + index">
          <view class="cu-form-textarea">
            <textarea style="height: 140upx;" disabled v-model="item.SITUATION"></textarea>
          </view>
        </view>
      </view>
    </view>

    <view class="card" style="margin-top: 20upx;">
      <view class="title check">检查人员：</view>
      <view v-if="form.inspectorList && form.inspectorList.length > 0">
        <view v-for="(item, index) of form.inspectorList" :key="'INSPECTOR' + index" class="add_pard_item">
          <view class="cu-form-group">
            <view class="title" style="height: auto;">
              <view>{{ index + 1 }}.检查人员单位：</view>
            </view>
            <text>{{ item.INSPECTION_DEPARTMENT_NAME }}</text>
          </view>
          <view class="cu-form-group">
            <view class="title">{{ index + 1 }}.检查人员：</view>
            <text>
              {{ item.INSPECTION_USER_NAME }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <view class="card" style="margin-top: 20upx;">
      <view class="title check">发现问题：</view>
      <view style="padding: 20upx">
        <uni-table border stripe emptyText="暂无更多数据">
          <uni-tr>
            <uni-th align="center" style="font-weight: bold;width: 100upx">序号</uni-th>
            <uni-th align="center" style="font-weight: bold">隐患部位</uni-th>
            <uni-th align="center" style="font-weight: bold">隐患描述</uni-th>
            <uni-th align="center" style="font-weight: bold;width: 180upx">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in form.hiddenList" :key="item.HIDDEN_ID">
            <uni-td>{{ index + 1 }}</uni-td>
            <uni-td>{{ item.HIDDENPART_NAME ? item.HIDDENPART_NAME : item.HIDDENPART }}</uni-td>
            <uni-td>{{ item.HIDDENDESCR }}</uni-td>
            <uni-td style="text-align: center;">
              <icon type="info" size="26" @tap="showHidden(item, index)" />
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>

    <view class="card" style="margin-top: 20upx;">
      <view class="title check">检查人员核实结果：</view>
      <view v-for="item in form.inspectorList" :key="item.INSPECTION_INSPECTOR_ID"
        style="border-top: 1px solid #eee; padding-top: 10px;">
        <view class="cu-form-textarea">
          <view style="margin-left: 24upx;">检查人意见:</view>
          <textarea style="margin: 24upx 0 0 24upx; height: 140upx;" v-model="item.INSPECTION_USER_OPINION" disabled
            placeholder="请输入作业负责人意见"></textarea>
        </view>
        <view class="cu-form-group">
          <view class="title">检查人签字：</view>
          <view>
            <view>
              <image :src="$store.state.filePath + '/' + item.INSPECTION_USER_SIGN_IMG"
                style="width: 180upx;height: 100upx">
              </image>
            </view>
            <view style="text-align: center">{{ item.INSPECTION_USER_SIGN_TIME }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="card" style="margin-top: 20upx;">
      <view class="cu-form-group">
        <view class="title">被检查单位现场负责人意见：</view>
        <radio-group @change="changeRadioGroup($event)">
          <label class="radio">
            <radio value="3" :checked="inspectedForm.INSPECTION_STATUS === '3'" />同意
          </label>
          <label v-if="form.hiddenList && form.hiddenList.length > 0" class="radio">
            <radio value="-2" :checked="inspectedForm.INSPECTION_STATUS === '-2'" />申辩
          </label>
        </radio-group>
      </view>
      <view class="cu-form-textarea" v-show="inspectedForm.INSPECTION_STATUS === '-2'">
        <view class="cu-form-title text-hui">申辩说明</view>
        <textarea maxlength="-1" v-model="inspectedForm.INSPECTED_EXPLAIN" placeholder="检查人意见（有异议时必填）"></textarea>
      </view>
      <view class="cu-form-group" style="border: none;">
        <view class="title">签字</view>
        <view><u-button class="bg-green shadow" @tap="modalShow = true" data-target="Modal">手写签字</u-button></view>
      </view>
      <view style="margin-left: 30upx;" v-show="signImgList && signImgList.length > 0">
        <view class="action">
          签字照片
        </view>
      </view>
      <view v-show="signImgList && signImgList.length > 0">
        <view v-for="(item, index) in signImgList" :key="index" @tap="ViewImage" data-type="1"
          :data-url="signImgList[index].filePath">
          <u--image width="330upx" height="170upx" :src="signImgList[index].filePath" mode="aspectFill" />
          <view class="cu-tag" @tap.stop="delImg" data-type="0" :data-index="index">
            <text class='cuIcon-close'></text>
          </view>
        </view>
      </view>
      <view class="cu-modal" :class="{ 'show': modalShow }">
        <sign @confirm="subCanvas" @cancel="modalShow = false" :signShow="true" />
      </view>
    </view>

    <view class="bottom-btn-group">
      <view v-if="forbidEdit" style="width: 80%;">
        <u-button class="bg-blue" @click="goSubmit" :throttleTime="1400">提交</u-button>
      </view>
      <view v-if="!forbidEdit" style="width: 80%;">
        <u-button class="bg-green" @click="goback">返回</u-button>
      </view>
    </view>
    <view class="padding flex flex-direction"></view>

    <uni-drawer ref="showHiddenWindow" mode="right" :mask-click="true" @change="change($event, 'showHiddenWindow')">
      <scroll-view scroll-y="true" style="height: 93vh;">
        <view class="de-drawer">
          <view class="cu-bar bg-white pad">
            <view>
              隐患照片
            </view>
            <view>
              {{ hiddenForm.hiddenImgs.length }}/4
            </view>
          </view>
          <view class="cu-form-group">
            <view class="grid-square">
              <view class="box-img" v-for="item in hiddenForm.hiddenImgs" :key="item.IMGFILES_ID">
                <!-- 这里因为还未接入到网络接口,因此没有详细的图片url路径地址,选用模拟数据的图片url做临时展示 -->
                <!-- <u--image :showLoading="true" :src="$store.state.filePath + item.FILEPATH" mode="aspectFill"></u--image> -->
                <u--image :showLoading="true" :src="item.FILEPATH" mode="aspectFill" width="160upx" height="160upx"
                  style="border-radius: 12upx;" @click="viewImage(item.FILEPATH)" />
              </view>
            </view>
          </view>

          <view class="cu-bar bg-white pad">
            <view>
              隐患视频
            </view>
            <view>
              {{ hiddenForm.hiddenVideos.length }}/1
            </view>
          </view>
          <view class="cu-form-group" style="margin-bottom: 16upx;">
            <view class="grid-square">
              <view class="box-img" v-for="item in hiddenForm.hiddenVideos" data-type="0" :data-url="item.FILEPATH"
                :key="item.IMGFILES_ID"
                style="background-color: #8a8a8a; display: flex; align-items: center; justify-content: center;"
                @tap="playVideo">
                <u--image src="../../../static/video.png" mode="aspectFill"
                  :data-src="$store.state.filePath + item.FILEPATH" width="40upx" height="40upx" />
              </view>
            </view>
          </view>
          <u-line />
          <view class="cu-form-textarea">
            <view class="cu-bar bg-white pad">隐患描述</view>
            <textarea maxlength="-1" style="margin-left: 30upx; height: 140upx;" :disabled="true"
              v-model="hiddenForm.HIDDENDESCR" placeholder="请对隐患进行详细描述(必填项)"></textarea>
          </view>
          <u-line style="margin-top: 16upx;" />
          <view class="flex-between">
            <view class="cu-bar bg-white pad">隐患部位</view>
            <text class="text-color">{{ hiddenForm.HIDDENPART_NAME ? hiddenForm.HIDDENPART_NAME : hiddenForm.HIDDENPART
              }}</text>
          </view>
          <u-line />
          <view class="cu-form-textarea">
            <view class="cu-bar bg-white pad">隐患位置描述</view>
            <textarea maxlength="-1" style="margin-left: 30upx; height: 140upx;" :disabled="true"
              v-model="hiddenForm.POSITIONDESC" placeholder="隐患位置描述进行详细描述(必填项)"></textarea>
          </view>
          <u-line />
          <view class="flex-between">
            <view class="cu-bar bg-white pad">隐患级别</view>
            <text class="text-color">{{ hiddenForm.HIDDENLEVEL_NAME }}</text>
          </view>
          <u-line />
          <view class="flex-between">
            <view class="cu-bar bg-white pad">隐患类型</view>
            <text class="text-color">{{ hiddenForm.HIDDENTYPE_NAME }}</text>
          </view>
          <u-line />
          <view class="flex-between">
            <view class="cu-bar bg-white pad">是否相关方</view>
            <text class="text-color">{{ hiddenForm.ISRELEVANT == '1' ? '是' : '否' }}</text>
          </view>
          <u-line />
          <view class="flex-between">
            <view class="cu-bar bg-white pad">隐患发现时间</view>
            <text class="text-color">{{ hiddenForm.DISCOVERYTIME }}</text>
          </view>
          <u-line />
          <view class="flex-between">
            <view class="cu-bar bg-white pad">隐患上报位置</view>
          </view>
          <u-line />
          <view class="flex-between" style="border-bottom: 2upx solid #eee;"
            v-if="hiddenForm.LONGITUDE && hiddenForm.LONGITUDE !== 'undefined'">
            <view class="cu-bar bg-white pad">经度</view>
            <text class="text-color">{{ hiddenForm.LONGITUDE }}</text>
          </view>
          <view class="flex-between" style="border-bottom: 2upx solid #eee;"
            v-if="hiddenForm.LATITUDE && hiddenForm.LATITUDE !== 'undefined'">
            <view class="cu-bar bg-white pad">纬度</view>
            <text class="text-color">{{ hiddenForm.LATITUDE }}</text>
          </view>
          <view class="flex-between">
            <view class="cu-bar bg-white pad">隐患发现人</view>
            <text class="text-color">
              {{ hiddenForm.CREATOR_NAME }}
            </text>
          </view>

          <view class="de-drawer-bottom">
            <u-button type="primary" text="返回" @click="cancelHidden" />
          </view>
        </view>
      </scroll-view>
    </uni-drawer>

    <view class="cu-modal box-video-modal" :class="{ 'show': modalShowVideo }" v-if="modalShowVideo">
      <view class="box-video-container">
        <view class="box-video-title">
          <view class="text-center">播放视频</view>
          <view class="right-close" @tap="modalShowVideo = false">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <video class="video-source" :src="videoSrc" :autoplay="true" />
        <view class="vide-btn-close">
          <u-button type="primary" style="width: 50%; border-radius: 12upx;" color="#39b54a" text="关闭"
            @click="modalShowVideo = false" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatDate } from '@/utils/tools';
import { getInspectedItemGoShow } from '../../api';
import sign from '@/components/sign/sign.vue';
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import { inspectedFormData } from '@/Mock/safetyEnvirData';

export default {
  components: { sign, uniDrawer },

  data() {
    return {
      msg: 'add',
      /** 禁止修改 */
      forbidEdit: true,
      /** 签字照片的图片列表 */
      signImgList: [],
      /** 当天日期 */
      todayDate: '',
      /** 手写签字的弹框 */
      modalShow: false,
      /** 隐患责任人下拉数据 */
      creatorList: [],
      /** 隐患添加窗口显隐态, 默认为关闭状态 */
      showHiddenWindow: false,
      /** 视频播放弹框态 */
      modalShowVideo: false,
      /** 视频播放路径地址 */
      videoSrc: '',
      form: {
        /** 检查ID */
        INSPECTION_ID: '',
        /** 现场检查记录 */
        INSPECTION_SUBJECT: '',
        /** 被检查单位 */
        INSPECTED_DEPARTMENT_ID: '',
        INSPECTED_DEPARTMENT_NAME: '',
        /** 被检查单位现场负责人 */
        INSPECTED_DEPARTMENT_NAMES: '',
        /** 检查场所 */
        INSPECTION_PLACE: '',
        /** 检查类型 */
        INSPECTION_TYPE_NAME: '',
        /** 检查开始时间 */
        INSPECTION_TIME_START: '',
        /** 检查结束时间 */
        INSPECTION_TIME_END: '',
        /** 记录填写时间 */
        CREATTIME: '',
        /** 检查情况 */
        situationList: [],
        /** 检查人员 */
        inspectorList: [],
        /** 发现问题 */
        hiddenList: [],
        /** 检查人员核实结果 */
        inspectorList: []
      },
      inspectedForm: {
        /** 安全环保检查人员主键ID */
        INSPECTION_EXPLAIN_ID: '',
        /** 被检查单位现场负责人意见 */
        INSPECTION_STATUS: '3',
        /** 安全环保检查ID */
        INSPECTION_ID: '',
        /** 申辩内容 */
        INSPECTED_EXPLAIN: '',
        /** 申辩附件名称 */
        INSPECTED_EXPLAIN_FILENAME: '',
        /** 被检查单位现场负责人签字 */
        INSPECTED_SITEUSER_SIGN_IMG: '',
        /** 被检查单位现场负责人签字的时间 */
        INSPECTED_SITEUSER_SIGN_TIME: ''
      },
      // 隐患表单状态
      hiddenForm: {
        /** 隐患ID */
        HIDDEN_ID: '',
        /** 隐患描述 */
        HIDDENDESCR: '',
        /** 隐患部位 */
        HIDDENPART: '',
        /** 隐患名称 */
        HIDDENPART_NAME: '',
        /** 隐患级别 */
        HIDDENLEVEL: '',
        /** 隐患级别的回显名称文案 */
        HIDDENLEVEL_NAME: '',
        /** 隐患类型 1 */
        HIDDENTYPE: '',
        /** 隐患类型 1 的回显文案 */
        HIDDENTYPE_NAME: '',
        /** 隐患类型 2 */
        HIDDENTYPE2: '',
        /** 隐患类型 2 的回显文案 */
        HIDDENTYPE2_NAME: '',
        /** 隐患位置经度 */
        LONGITUDE: '',
        /** 隐患位置纬度 */
        LATITUDE: '',
        /** 隐患发现时间 */
        DISCOVERYTIME: '',
        /** 隐患发现部门（隐患责任人部门） */
        HIDDENFINDDEPT: '',
        /** 隐患发现部门（隐患责任人部门）的回显文案 */
        HIDDENFINDDEPT_NAME: '',
        /** 发现人（隐患责任人） */
        CREATOR: '',
        /** 发现人（隐患责任人）索引 */
        CREATOR_INDEX: '',
        /** 发现人（隐患责任人）回显文案 */
        CREATOR_NAME: '',
        /** 隐患来源 */
        SOURCE: '5',
        /** 隐患位置描述 */
        POSITIONDESC: '',
        /** 是否为相关方 */
        ISRELEVANT: '',
        /** 隐患图片 */
        hiddenImgs: [],
        /** 隐患视频 */
        hiddenVideos: []
      },
    }
  },
  onLoad(options) {
    this.form.INSPECTION_ID = options.INSPECTION_ID;
    this.todayDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
    this.msg = "edit";
    this.fnGetData();
  },
  methods: {
    /**
     * 读取详情数据
     */
    async fnGetData() {
      var _this = this;
      uni.showLoading({
        title: '请稍候'
      })
      try {
        _this.form = inspectedFormData;
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
        // const responseData = await getInspectedItemGoShow({
        //   INSPECTION_ID: _this.form.INSPECTION_ID,
        // })
        // if (responseData.data.result === 'success') {
        //   uni.hideLoading();
        //   // _this.form = res.data.pd;
        //   for (let i = 0; i < _this.form.inspectorList.length; i++) {
        //     _this.inspectorList.push([])
        //     _this.getUserList('inspectorList', _this.form.inspectorList[i].INSPECTION_DEPARTMENT_ID, i)
        //   }
        //   if (Number(_this.form.INSPECTION_STATUS) < 1) {
        //     _this.forbidEdit = false;
        //   }
        // } else if ("exception" == data.result) {
        //   uni.hideLoading();
        //   uni.showToast({
        //     title: '错误',
        //     duration: 2000
        //   });
        // }
      } catch (err) {
        uni.hideLoading();
        uni.showToast({
          title: '错误',
          duration: 2000
        });
      }
    },
    /** 
     * 完成手写签字事件处理
     */
    subCanvas(e) {
      this.signImgList.splice(0, this.signImgList.length);
      this.signImgList.push(e);
      this.$set(this.inspectedForm, 'INSPECTED_SITEUSER_SIGN_TIME', formatDate(new Date(), 'yyyy-MM-dd hh:mm'))
      this.modalShow = false;
    },
    /** 
     * 删除手写签名的图片
     */
    delImg(e) {
      var _this = this;
      let i = e.currentTarget.dataset.index
      uni.showModal({
        title: '秦港-双基双控',
        content: '确定要删除这张图片吗？',
        cancelColor: "#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            _this.signImgList.splice(i, 1)
          }
        }
      })
    },
    /**
     * 显示隐患信息弹窗弹出
     */
    showHidden(item, index) {
      this.resetHidden();
      this.creatorList = [];
      this.form.inspectorList.forEach(item => {
        this.creatorList.push({
          USER_ID: item.INSPECTED_USER_ID,
          NAME: item.INSPECTION_USER_NAME
        })
      });
      this.hiddenForm = item;
      this.$refs['showHiddenWindow'].open()
      this.showHiddenWindow = true;
    },
    /**
     * 取消添加隐患信息弹窗
     */
    cancelHidden() {
      this.$refs['showHiddenWindow'].close();
      this.showHiddenWindow = false;
    },
    /** 
     * 抽屉状态发生变化触发
     */
    change(e, type) {
      this[type] = e;
    },
    /**
     * 图片预览处理
     */
    viewImage(url) {
      let files = [];
      for (var i = 0; i < this.hiddenForm.hiddenImgs.length; i++) {
        files.push(this.hiddenForm.hiddenImgs[i].FILEPATH);
        // files.push(this.$store.state.filePath + this.hiddenForm.hiddenImgs[i].FILEPATH); // 文件预览地址因未接入网络接口,因此使用 mock 数据的绝对 url 进行压栈
      }
      uni.previewImage({
        urls: files,
        current: this.$store.state.filePath + url
      });
    },
    /**
     * 播放视频处理
     */
    playVideo(evt) {
      this.videoSrc = evt.currentTarget.dataset.url;
      this.modalShowVideo = true;
    },
    /**
     * 提交逻辑处理
     */
    goSubmit() { },
    /**
     * 返回逻辑处理
     */
    goback() {
      let pages = getCurrentPages();	// 获取当前页面栈
      let prePage = pages[pages.length - 2];	// 上二级页面
      // prePage.$vm.initflag = true;    // A 页面 init方法 为true
      uni.navigateBack({ delta: 1 });
      uni.hideLoading();
    },
    /**
     * 重置隐患键入表单
     */
    resetHidden() {
      this.hiddenForm = {
        HIDDEN_ID: '',
        HIDDENDESCR: '',
        HIDDENPART: '',
        HIDDENPART_NAME: '',
        HIDDENLEVEL: '',
        HIDDENLEVEL_NAME: '',
        HIDDENTYPE: '',
        HIDDENTYPE_NAME: '',
        HIDDENTYPE2: '',
        HIDDENTYPE2_NAME: '',
        LONGITUDE: '',
        LATITUDE: '',
        DISCOVERYTIME: '',
        HIDDENFINDDEPT: '',
        HIDDENFINDDEPT_NAME: '',
        CREATOR: '',
        CREATOR_INDEX: '',
        CREATOR_NAME: '',
        SOURCE: '5',
        hiddenImgs: [],
        hiddenVideos: []
      }
    },
  }
}
</script>

<style scoped lang="scss">
.title {
  min-width: 200upx;
  width: max-content;
  font-weight: bold;
  color: #000000;
  font-size: 28upx;
}

.value {
  color: #808080;
  font-size: 28upx
}

.check {
  padding-left: 30upx;
  padding-bottom: 24upx;
}

.ace-content {
  padding: 20upx;
  border-top: 2upx solid #F1F1F1;
}

.cu-form-textarea uni-textarea {
  color: #808080;
}

.add_pard_item {
  border: 2upx dashed #dfdfdf;
  margin: 0 30upx;
  margin-top: 30upx;
  position: relative
}

.cu-form-group {
  background-color: #ffffff;
  padding: 2upx 30upx;
  display: flex;
  align-items: center;
  min-height: 100upx;
  justify-content: space-between
}

.cu-form-group+.cu-form-group {
  border-top: 2upx solid #eee;
}

.bg-blue,
.bg-green {
  color: #ffffff;
  border-radius: 14upx;
}

// 绿色背景颜色定制
.bg-green {
  background-color: #39b54a;
}

// 蓝色背景颜色定制
.bg-blue {
  background-color: #0081ff;
}

.shadow {
  box-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
}

.padding {
  padding: 30upx;
}

.flex-direction {
  flex-direction: column;
}

.flex {
  display: flex;
}

.cu-tag {
  background: rgba(0, 0, 0, .5);
  color: #ffffff;
  font-size: 24upx;
  vertical-align: middle;
  position: relative;
  right: -280upx;
  top: -174upx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0upx 16upx;
  width: 50upx;
  height: 40upx;
  border-bottom-left-radius: 10upx;
  font-family: Helvetica Neue, Helvetica, sans-serif;
  white-space: nowrap;
}

.grid.grid-square .cu-tag {
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: 6upx;
  padding: 6upx 12upx;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.cu-tag[class*="line-"]::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1upx solid currentColor;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

.cu-tag.radius[class*="line"]::after {
  border-radius: 12upx;
}

.cu-tag.round[class*="line"]::after {
  border-radius: 1000upx;
}

.cu-tag[class*="line-"]::after {
  border-radius: 0;
}

.cu-tag+.cu-tag {
  margin-left: 10upx;
}

.cu-tag.sm {
  font-size: 20upx;
  padding: 0upx 12upx;
  height: 32upx;
}

.cuIcon-close:before {
  font-family: "cuIcon";
  content: "\e646";
}

.bottom-btn-group {
  margin-top: 20upx;
  padding: 26upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

// ======================================
//       隐患表单的右侧弹窗内部样式定制
// ======================================
.de-drawer {
  box-sizing: border-box;
  padding: 0 0;
  font-size: 30upx;
}

.bg-white {
  background-color: #ffffff;
  color: #666666;
}

.cu-bar {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 100upx;
}

.pad {
  padding: 0 30upx;
}

.text-color {
  margin-right: 16upx;
  color: #808080;
}

.grid-square {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 24upx;
  flex: 1;

  .box-img {
    border: 1px solid #eee;
    width: 160upx;
    height: 160upx;
    overflow: hidden;
    object-fit: cover;
    border-radius: 12upx;
  }
}

.box-video-modal {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;


  .box-video-container {
    box-sizing: border-box;
    width: 646upx;
    height: 746upx;
    background-color: #fff;
    color: #000;
    border-radius: 20upx;

    .box-video-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80upx;

      .text-center {
        transform: translateX(28upx);
        flex: 1;
      }

      .text-red {
        margin-right: 24upx;
        color: red;
      }

      .right-close {
        z-index: 999;
      }
    }

    .video-source {
      margin-top: 24upx;
    }

    .vide-btn-close {
      width: 100%;
      display: flex;
      height: 160upx;
      justify-content: center;
      align-items: center;
    }
  }
}

.de-drawer-bottom {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 80upx;
}
</style>