补充查看页面

src/views/common/pdfvVew.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="header_body">
+			<header-nav
+				:slefBack="true"
+				@goBack="goBack"
+			>
+			</header-nav>
+      </div>
+  <div class="m-pdf">
+    <div id="pdf-content"></div>
+  </div>
+</template>
+<script >
+import Pdfh5 from "pdfh5";
+import "pdfh5/css/pdfh5.css";
+export default {
+  name: "Pdfh5",
+  data() {
+    return {
+      pdfh5: null,
+      // 可引入网络文件或者本地文件
+      pdfUrl: "http://192.168.110.36:85/profile/upload/2024/03/29/40eb1a97ca27c3369370e90632d92db0.pdf", // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
+    };
+  },
+  mounted() {
+    console.log("pdf地址",this.$route.query.url)
+    this.pdfUrl = this.$route.query.url;
+    this.initPdf();
+  },
+  methods: {
+    initPdf() {
+      // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
+      // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
+      this.pdfh5 = new Pdfh5("#pdf-content", {
+        pdfurl: this.pdfUrl,
+        goto: 1,
+        // 设置每一页pdf上的水印
+        
+      });
+      this.pdfh5.scrollEnable(true); // 允许pdf滚动
+      // 监听pdf准备开始渲染，此时可以拿到pdf总页数
+      this.pdfh5.on("ready", function () {
+        console.log("总页数:" + this.totalNum);
+      });
+      // 监听pdf加载完成事件，加载失败、渲染成功都会触发
+      this.pdfh5.on("complete", (status, msg, time) => {
+        console.log("状态:" + status + "，信息:" + msg + "，耗时:" + time + "毫秒");
+      });
+    },
+  },
+  // 返回
+ goBack(){
+  console.log(11111)
+	this.$router.go(-1)
+}
+};
+</script>
+<style scoped>
+  .m-pdf{
+    height: 100%;
+  }
+</style>
+
+

src/views/enforce/scanPageTest.vue

@@ -0,0 +1,138 @@
+<style scoped>
+.scan-area {
+  width: 100%;
+  height: 680px;
+}
+</style>
+
+<template>
+  <div class="scan-area">
+    <qrcode-stream @click="handleClick" :paused="scanPause" :track="paintOutLineAndCenterText" @error="handleError" @camera-on="onCameraOn">
+      <div v-if="!cameraReady">
+        loading...
+      </div>
+    </qrcode-stream>
+    <!-- <audio ref="audioRef" src="/src/assets/Di.mp3"></audio> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import Vconsole from "vconsole";
+import { QrcodeStream } from "vue-qrcode-reader";
+import {ref} from 'vue'
+const audioRef = ref(null);
+const errorInfo = ref('');
+const cameraReady = ref(false);
+const scanPause = ref(false);
+const reactAngles = ref<any>([]);
+const onCameraOn = function () {
+  cameraReady.value = true;
+  new Vconsole();
+}
+const handleError =  function (err) {
+    errorInfo.value = `[${err.name}]: `
+  if (err.name === 'NotAllowedError') {
+    errorInfo.value += '您需要授予相机访问权限'
+  } else if (err.name === 'NotFoundError') {
+    errorInfo.value = '此设备上没有检测到摄像头';
+  } else if (err.name === 'NotReadableError') {
+    errorInfo.value = '相机被占用'
+  } else if (err.name === 'NotSupportedError') {
+    errorInfo.value = 'secure context required (HTTPS, localhost)'
+  } else if (err.name === 'OverconstrainedError') {
+    errorInfo.value += ''
+  } else if (err.name === 'StreamApiNotSupportedError') {
+    errorInfo.value += 'Stream API is not supported in this browser'
+  } else if (err.name === 'InsecureContextError') {
+    errorInfo.value += 'Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
+  } else {
+    errorInfo.value += err.message
+  }
+  console.log(errorInfo.value);
+  errorInfo.value = '';
+}
+const created = () =>{
+  new Vconsole();
+}
+
+const paintOutLineAndCenterText = (detectedCodes, ctx) => {
+  // 暂停页面
+  scanPause.value = true;
+  // 播放语音
+  // audioRef.value.play();
+  // 画边框和文本
+  reactAngles.value.splice();
+  for (const detectedCode of detectedCodes) {
+    // 画边框
+    ctx.lineWidth = 1;
+    const [firstPoint, ...otherPoints] = detectedCode.cornerPoints
+    ctx.strokeStyle = 'red'
+    ctx.beginPath()
+    ctx.moveTo(firstPoint.x, firstPoint.y)
+    for (const { x, y } of otherPoints) {
+      ctx.lineTo(x, y)
+    }
+    ctx.lineTo(firstPoint.x, firstPoint.y)
+    ctx.closePath();
+    ctx.stroke();
+    // 画文字
+    const { boundingBox, rawValue } = detectedCode
+    const centerX = boundingBox.x + boundingBox.width / 2
+    const centerY = boundingBox.y + boundingBox.height / 2
+    const fontSize = Math.max(12, (50 * boundingBox.width) / ctx.canvas.width)
+    console.log(boundingBox.width, ctx.canvas.width)
+    ctx.lineWidth = 2;
+    ctx.font = `${fontSize}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.strokeStyle = '#35e5a7'
+    ctx.strokeText('>', centerX, centerY)
+    // 配置矩形内容
+    if (detectedCode.cornerPoints.length==4) {
+      reactAngles.value.push({
+        leftTop: {x: firstPoint.x, y:firstPoint.y},
+        rightTop: {x: otherPoints[0].x, y:otherPoints[0].y},
+        rightBottom: {x: otherPoints[1].x, y:otherPoints[1].y},
+        leftBottom: {x: otherPoints[2].x, y:otherPoints[2].y},
+        text: detectedCode.rawValue
+      });
+    }
+  }
+};
+// 获取事件的发生位置
+const getEventPosition = (ev) => {
+  var x, y;
+  if (ev.layerX || ev.layerX == 0) {
+    x = ev.layerX;
+    y = ev.layerY;
+  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
+    x = ev.offsetX;
+    y = ev.offsetY;
+  }
+  return {x: x, y: y};
+};
+
+const handleClick = function (event) {
+  // 1. 获取点击点的位置
+  var eventPosition = getEventPosition(event);
+  // 2. 判断在不在已有的矩形内部，在的话获取二维码解析的结果，并进行业务处理
+  var resolveText = handleClickRectAngle(eventPosition);
+  if (resolveText != undefined) {
+    alert(resolveText);
+  }
+  // 3. 业务处理完，如果决定跳转就跳转，不决定跳转的话就关闭暂停
+  scanPause.value = false;
+}
+
+// 判断一个点在不在某个矩形内部的算法，后面可以采取凸包算法，优化判断的实现，不过这里已经能实现了，没必要深究
+const handleClickRectAngle = function (eventPosition) {
+  for (let i = 0; i < reactAngles.value.length; i++) {
+    let reactAngle = reactAngles.value[i];
+    if ( ((eventPosition.x >= Math.min(reactAngle.leftTop.x, reactAngle.leftBottom.x)) && (eventPosition.x  <= Math.max(reactAngle.rightTop.x, reactAngle.rightBottom.x)))
+    && ((eventPosition.y >= Math.min(reactAngle.leftTop.y, reactAngle.rightTop.y)) && (eventPosition.y  <= Math.max(reactAngle.leftBottom.y, reactAngle.rightBottom.y)))
+    ) {
+      return reactAngle.text;
+    }
+  }
+  return undefined;
+}
+</script>

src/views/enforce/sign.vue

@@ -101,9 +101,9 @@
                     <van-field
                             v-model="submitData.enterpriseNumber"
                             required
-                            label="统一信用码"
+                            label="统一社会信用代码"
                             :rules="[{ required: true, message: '必填项' }]"
-                            placeholder="必填 纳税人识别号"
+                            placeholder="必填 统一社会信用代码"
                     />
                 </van-cell-group>
 

src/views/enterprise/enterpriseInspectionDetail.vue

@@ -0,0 +1,215 @@
+<template>
+	<div class="address_edit">
+		<!-- 导航栏 -->
+		<div class="header_body">
+			<header-nav :slefBack="true" @goBack="goBack" :titelText="`详情`"></header-nav>
+		</div>
+		<!-- 中间 -->
+		<div>
+<!--            <van-cell-group>-->
+        <van-form @failed="onFailed" @submit="submit">
+           <van-field
+            v-model="submitData.lawEnforcementCode"
+             label="登记编号"
+             readonly
+           />
+            <van-field
+              v-model="submitData.enterpriseName"
+              label="企业名称"
+              required
+              readonly
+              :rules="[{ required: true, message: '必填项' }]"
+            />
+            <van-field
+              v-model="submitData.linkMan"
+              label="企业联系人"
+              readonly
+            />
+            <van-field
+              v-model="submitData.linkTel"
+              label="联系人电话"
+              :rules="[{ validator, message: '请输入正确内容' }]"
+              readonly
+            />
+            <van-field
+              v-model="submitData.checkTime"
+              required
+              readonly
+              label="检查时间"
+              :rules="[{ required: true, message: '必填项' }]"
+              
+            />
+            <van-field
+              v-model="submitData.checkItem"
+              required
+              label="检查事项"
+              :rules="[{ required: true, message: '必填项' }]"
+              readonly
+            />
+            <van-field
+              v-model="submitData.checkRequire"
+              required
+              label="检查要求"
+              :rules="[{ required: true, message: '必填项' }]"
+              readonly
+            />
+            <van-field
+                v-model="submitData.lawEnforcement"
+                readonly
+                label="执法部门"
+                :rules="[{ required: true, message: '必填项' }]"
+                
+            />
+            <van-field
+                v-model="submitData.lawEnforcer"
+                readonly
+                label="执法人员"
+            />
+            <van-field
+                v-model="submitData.lawEnforcerTwo"
+                readonly
+                label="执法人员2"
+            />
+            <van-field
+              v-model="submitData.remark"
+              label="备注"
+              rows="2"
+              autosize
+              type="textarea"
+              maxlength="50"
+              placeholder="请输入备注"
+              show-word-limit
+              readonly
+            />
+        </van-form>
+<!--          </van-cell-group>-->
+        </div>
+
+<!--        <div class="warp_body">-->
+<!--            <van-action-bar>-->
+<!--                <van-action-bar-button color="#be99ff" text="保存"  @click="submit" />-->
+<!--            </van-action-bar>-->
+<!--        </div>-->
+
+        <van-popup v-model:show="data.showLawEnforcerFlag" position="bottom" :style="{ height: '30%' }" />
+
+        <van-popup v-model:show="data.showTimePicker" position="bottom" :style="{ height: '30%' }" >
+            <van-date-picker
+                    type="time"
+                    @confirm="onConfirm"
+                    @cancel="data.showTimePicker = false"
+            />
+        </van-popup>
+	</div>
+</template>
+
+<script setup name="register">
+
+import {getEnterpriseLawEnforcement} from '../../api/administrative'
+import { reactive, ref } from "vue";
+
+const router = useRouter();
+const route = useRoute();
+let queryaddressId = ref("");
+const data = reactive({
+    showLawEnforcerFlag:false,
+    showTimePicker:false,
+});
+//保存参数
+let submitData = reactive({
+    /** 登记编号 */
+    lawEnforcementCode:"",
+    /** 企业名称 */
+    enterpriseName:"",
+    /** 企业ID */
+    enterpriseId:"",
+    /** 企业联系人 */
+    linkMan:"",
+    /** 联系人电话 */
+    linkTel:"",
+    /** 检查时间 */
+    checkTime:"",
+    /** 检查事项 */
+    checkItem:"",
+    /** 检查要求 */
+    checkRequire:"",
+    /** 执法部门 */
+    lawEnforcement:"",
+    /** 执法部门ID */
+    lawEnforcementId:"",
+    /** 执法人员 */
+    lawEnforcer:"",
+    /** 执法人员ID */
+    lawEnforcerId:"",
+    /** 执法人员2 */
+    lawEnforcerTwo:"",
+    /** 执法人员ID2 */
+    lawEnforcerIdTwo:"",
+    /** 备注 */
+    remark:"",
+})
+
+const onConfirm = (time) => {
+    if(time != null) {
+        var times = time.selectedValues;
+        submitData.checkTime = times[0] +"-"+ times[1] +"-"+ times[2];
+    }
+    data.showTimePicker = false;
+};
+
+const validator = (val) => /^1[34578]\d{9}$/.test(val);
+
+const onFailed = (errorInfo) => {
+    console.log('failed', errorInfo);
+};
+
+// 返回
+const goBack = () => {
+	router.go(-1);
+};
+
+//初始化参数，获取扫码的企业统一信用编码
+onMounted(() =>{
+    getEnterpriseLawEnforcement(route?.query?.id,success =>{
+    //跳转企业二维码地址
+    if(success.success){
+        submitData.lawEnforcementCode = success.data.lawEnforcementCode;
+        submitData.lawEnforcement = success.data.lawEnforcement;
+        submitData.lawEnforcer = success.data.lawEnforcer;
+        submitData.lawEnforcerTwo = success.data.lawEnforcerTwo;
+        submitData.checkItem = success.data.checkItem;
+        submitData.checkRequire = success.data.checkRequire;
+        submitData.enterpriseName = success.data.enterpriseName;
+        submitData.linkMan = success.data.linkMan;
+        submitData.linkTel = success.data.linkTel;
+        submitData.checkTime = success.data.checkTime;
+        submitData.remark = success.data.remark;
+    }
+  },error=>{
+      console.log("登记失败")
+  })
+})
+
+</script>
+<style lang="less" scoped>
+.address_edit {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
+	background-color: #f4f4f4;
+}
+/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
+.van-popup.van-toast{
+    background: var(--van-toast-background) !important;
+    box-sizing: content-box !important;
+    /* 下面3条css,影响不大 */
+    transition: all var(--van-duration-fast) !important;
+    width: var(--van-toast-default-width) !important;
+    max-width: var(--van-toast-max-width) !important;
+}
+.van-popup.van-toast .van-toast__icon{
+    font-size: var(--van-toast-icon-size) !important;
+}
+
+</style>

src/views/enterprise/registrationDetail.vue

@@ -0,0 +1,399 @@
+<template>
+	<div class="address_edit">
+		<!-- 导航栏 -->
+		<div class="header_body">
+			<header-nav :slefBack="true" @goBack="goBack" :titelText="`执法信息详情`"></header-nav>
+		</div>
+		<!-- 中间 -->
+		<div class="warp_body">
+            <van-form @failed="onFailed" @submit="submit">
+                <van-cell-group>
+                    <div style="font-size:large" class="zf-name">执法信息</div>
+                    <van-field
+                      v-model="submitData.lawEnforcement"
+                      label="执法部门"
+                      readonly
+                    />
+                    <van-field
+                      v-model="submitData.lawEnforcer"
+                      label="执法人员1"
+                      readonly
+                    />
+                    <van-field
+                      v-model="submitData.lawEnforcerTwo"
+                      label="执法人员2"
+                      readonly
+                      placeholder="请选择"
+                      right-icon="add-o"
+                      @click="showPopup"
+                    />
+                    <van-field
+                      v-model="submitData.subsidiaryer"
+                      label="辅助人员"
+                      readonly
+                      placeholder="请选择"
+                      right-icon="add-o"
+                      @click="showPopup2"
+                    />
+                    <van-field
+                      v-model="submitData.lawEnforcementItem"
+                      required
+                      label="执法事项"
+                      :rules="[{ required: true, message: '必填项' }]"
+                      placeholder="必填 执法事项"
+                      readonly
+                    />
+                    <van-field
+                      v-model="submitData.lawEnforcementBasis"
+                      required
+                      label="执法依据"
+                      :rules="[{ required: true, message: '必填项' }]"
+                      placeholder="必填 执法依据"
+                      readonly
+                    />
+                    <van-field
+                      v-model="submitData.reslut"
+                      required
+                      label="执法结果"
+                      :rules="[{ required: true, message: '必填项' }]"
+                      readonly
+                    >
+                        <template #input>
+                            <div>
+                                <van-tag :color="data.good">合格</van-tag>
+                                <van-tag :color="data.bad" style="margin-left: 15px;">不合格</van-tag>
+                            </div>
+                        </template>
+                    </van-field>
+                    <van-field
+                      v-model="submitData.remark"
+                      label="备注"
+                      rows="2"
+                      autosize
+                      type="textarea"
+                      maxlength="50"
+                      placeholder="请输入备注"
+                      show-word-limit
+                      readonly
+                    />
+
+                    <van-divider class="divdsty" />
+
+                    <div class="file-upload">
+                        <!-- <div class="file-upload-center">
+                            <label>上传附件</label> <span>(不多于9张)</span>
+                        </div> -->
+                        <!-- <van-uploader v-model="submitData.fileListObj" accept="" class="file" multiple :max-size="500 * 1024" :after-read="uploadFiles" :before-delete="deleteFile">
+                            <template #preview-cover="{ file }">
+                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
+                            </template>
+                        </van-uploader> -->
+                        <div class="zoom">
+                            <img
+                            v-for="(item, index) in imgstr && imgstr.split(',')"
+                              class="img"
+                              :src="item"
+                              alt="预览图片"
+                              @click="imagePreview(index)"
+                            />
+                          </div>
+                    </div>
+                </van-cell-group>
+
+                <van-divider class="divdsty" />
+
+                <van-cell-group>
+                    <div style="padding-top:10px; font-size:large" class="qy-name">企业信息</div>
+                    <van-field
+                            v-model="submitData.enterpriseName"
+                            required
+                            label="企业名称"
+                            :rules="[{ required: true, message: '必填项' }]"
+                            placeholder="必填 企业名称"
+                            readonly
+                    />
+                    <van-field
+                            v-model="submitData.enterpriseNumber"
+                            required
+                            label="统一信用码"
+                            :rules="[{ required: true, message: '必填项' }]"
+                            placeholder="必填 纳税人识别号"
+                            readonly
+                    />
+                </van-cell-group>
+
+                <!-- <van-action-bar>
+                    <van-button round block color="#be99ff" type="info" native-type="submit">提交</van-button>
+                </van-action-bar> -->
+            </van-form>
+        </div>
+<!-- 
+        <Popup :visible="data.popupVisible" :content="data.popupContent" @close="closePopup" @reciveData="reciveData" />
+        <Popup :visible="data.popupVisible2" :content="data.popupContent2" @close="closePopup" @reciveData="reciveData2" /> -->
+	</div>
+</template>
+
+<script setup name="register">
+
+import { showSuccessToast,showImagePreview } from 'vant';
+import {queryEnforcementRegistrationById} from '../../api/enforce'
+import { reactive, ref } from "vue";
+import {uploadFile} from "../../util/fileUpload";
+//用户筛选弹窗
+// import Popup from './userFilter.vue';
+
+const { useMy } = $globalStore
+
+const router = useRouter();
+//路由参数
+const route = useRoute();
+const data = reactive({
+    showLawEnforcerFlag:false,
+    currentPage: 1,
+    good:"#7FFFD4",
+    bad:"#D3D3D3",
+    popupVisible: false,
+    popupContent: '',
+    popupVisible2: false,
+    popupContent2: '',
+});
+// 图片imagelist
+const imgstr = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg,https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
+const imgstrArr = imgstr.split(",");
+//保存参数
+const submitData = reactive({
+    //执法部门
+    lawEnforcement:"",
+    lawEnforcementId:"",
+    //执法人员1
+    lawEnforcer:"",
+    lawEnforcerId:"",
+    //执法人员2
+    lawEnforcerTwo: "",
+    lawEnforcerIdTwo: "",
+    //辅助人员
+    subsidiaryer: "",
+    subsidiaryerId: "",
+    //执法事项
+    lawEnforcementItem:"",
+    //执法依据
+    lawEnforcementBasis:"",
+    //执法结果
+    reslut:0,
+    //备注
+    remark:"",
+    //企业名称
+    enterpriseName:"",
+    //统一信用码
+    enterpriseNumber:"",
+    //后台保存图片列表
+    fileList:[],
+    //vant组件上传照片列表
+    fileListObj:[],
+})
+
+const tapGood = () => {
+    data.good = "#7FFFD4";
+    data.bad = "#D3D3D3";
+    submitData.reslut = 0;
+}
+const tapBad = () => {
+    data.good = "#D3D3D3";
+    data.bad = "#7FFFD4";
+    submitData.reslut = 1;
+}
+const imagePreview = (index) =>{
+  showImagePreview({
+    images:imgstrArr,
+    startPosition: index,
+});
+}
+//3a0096181c184e5aa56f70923680856d$6e74ceda1463c165fd43eeeadce4f7cd
+//初始化参数，获取扫码的企业统一信用编码
+onMounted(() =>{
+    //查询执法登记信息
+    queryEnforcementRegistrationById(route?.query?.id,success =>{
+        console.log(success.data);
+        submitData.enterpriseName = success.data.enterpriseName;
+        submitData.enterpriseNumber = success.data.enterpriseNumber;
+        submitData.lawEnforcement = success.data.lawEnforcement;
+        submitData.lawEnforcementId = success.data.lawEnforcementId;
+        submitData.lawEnforcementItem = success.data.lawEnforcementItem;
+        submitData.lawEnforcementBasis = success.data.lawEnforcementBasis;
+        submitData.lawEnforcerIdTwo = success.data.lawEnforcerIdTwo;
+        submitData.lawEnforcer = success.data.lawEnforcer;
+        submitData.remark = success.data.remark;
+        if(success.data.reslut == 0){
+          data.good = "#7FFFD4";
+          data.bad = "#D3D3D3";
+        }else{
+          data.good = "#D3D3D3";
+          data.bad = "#7FFFD4";
+        }
+    },error=>{
+
+    })
+})
+
+// 返回
+const goBack = () => {
+	router.go(-1);
+};
+
+
+
+const uploadFiles = (file) =>{
+    uploadFile(file,(res) =>{
+        console.log(res);
+        submitData.fileList.push(res.url)
+        console.log(submitData.fileList);
+    });
+
+}
+
+const deleteFile = (file,index) =>{
+    console.log(index);
+    submitData.fileListObj.filter((item, indexs) => {
+        if (index.index == indexs) {
+            submitData.fileListObj.splice(indexs, 1);//splice 删除
+        }
+    });
+    submitData.fileList.filter((item, indexs) => {
+        if (index.index == indexs) {
+            submitData.fileList.splice(indexs, 1);//splice 删除
+        }
+    });
+    console.log(submitData.fileList);
+    return true;
+}
+
+const submit = () =>{
+    addEnforcementRegistration(submitData,success =>{
+    //跳转首页
+    if(success.success){
+        showSuccessToast('登记成功');
+        router.push({ path: "/home" });
+    }
+  },error=>{
+      console.log("登记失败")
+  })
+}
+
+const showPopup = () =>{
+    data.popupVisible = true;
+}
+const showPopup2 = () =>{
+    data.popupVisible2 = true;
+}
+const closePopup = () =>{
+    data.popupVisible = false;
+    data.popupVisible2 = false;
+}
+const reciveData = (item) =>{
+    submitData.lawEnforcerTwo = item.userName;
+    submitData.lawEnforcerIdTwo = item.userId;
+}
+const reciveData2 = (item) =>{
+    submitData.subsidiaryer = item.userName;
+    submitData.subsidiaryerId = item.userId;
+}
+
+</script>
+
+<style lang="less" scoped>
+.address_edit {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background-color: #ebf3fb;
+}
+
+.warp_body {
+    margin: 0 3%;
+    padding-bottom: 3rem;
+    width: 94%;
+    height: 100%;
+    //border-radius: 0.25rem;
+    background-image: linear-gradient(to bottom, #ebf3fb, #fff);
+    overflow-y: auto;
+}
+
+.qy-name{
+    font-size: large;
+    margin-left: 5%;
+    height: 34px;
+    margin-top: 0%;
+    font-weight: 600;
+}
+.zf-name{
+    font-size: 15px;
+    height: 33px;
+    background-color: white;
+    padding-left: 4%;
+    padding-top: 2%;
+    font-weight: 600;
+}
+
+/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
+.van-popup.van-toast{
+    background: var(--van-toast-background) !important;
+    box-sizing: content-box !important;
+    /* 下面3条css,影响不大 */
+    transition: all var(--van-duration-fast) !important;
+    width: var(--van-toast-default-width) !important;
+    max-width: var(--van-toast-max-width) !important;
+}
+.van-popup.van-toast .van-toast__icon{
+    font-size: var(--van-toast-icon-size) !important;
+}
+
+.divdsty {
+    margin: auto;
+    width: 100%;
+    height: 0.25rem;
+    background-color: #f4f4f4;
+    border: 0;
+}
+.file-upload{
+    min-height: 4.5rem;
+    position: relative;
+}
+.file-upload-center{
+    position: absolute;
+    height: 20%;
+    top: 10%;
+    left: 2%;
+    font-size: 0.38rem;
+    span {
+        font-size: 0.32rem;
+        color: rgb(221, 229, 227);
+    }
+}
+.file{
+    position: absolute;
+    bottom: 10%;
+    left: 2%;
+}
+
+.preview-cover {
+    position: absolute;
+    bottom: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 4px;
+    color: #fff;
+    font-size: 0.32rem;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.3);
+}
+.zoom{
+    padding-top: 10px;
+    padding-left: 10px;
+    img{
+      width: 2rem;
+      height: 2rem;
+      padding-right: 10px
+    }
+}
+</style>