Merge branch 'dev' of http://192.168.0.115:3000/bill/traffic-laser into dev

src/views/tables/ask.vue

@@ -2,6 +2,19 @@
 <template>
   <!-- <iframe style="width:100%;height: 100%;" src="./static/html/FG.html" frameborder="0"></iframe> -->
   <div class="ask-content">
+    <div class="num-box">
+      <span>第</span>
+      <div class="input-box" contenteditable></div>
+      <span style="margin-right: 30px">页</span> <span>共</span>
+      <div class="input-box" contenteditable></div>
+      <span>页</span>
+    </div>
+    <div class="num-box" style="padding-right: 114px">
+      <span>第</span>
+      <div class="input-box" contenteditable></div>
+      <span>次</span>
+    </div>
+
     <h2 class="title">询问/<span class="through">讯问</span>笔录</h2>
     <div class="container">
       <div class="line">
@@ -62,8 +75,8 @@
         <span> ）。</span>
       </div>
       <div class="more-line">
-        <!-- <div class="write-lines" id="test" contenteditable></div> -->
-        <textarea name="" id="test" cols="30" rows="5"></textarea>
+        <textarea v-if="!downMode" v-model="text" name=""></textarea>
+        <div class="downMode">{{ text }}</div>
         <div class="more-line-box">
           <div class="item"></div>
           <div class="item"></div>
@@ -76,18 +89,25 @@
     </div>
     <div class="bottom-name">
       <span>被询问人:</span>
+      <div style="flex: 1" contenteditable></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
-const getRows = () => {
-  let r = document.getElementById('test').rows;
-  console.error(r);
-};
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps } from 'vue';
+const props = defineProps({
+  downMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+const text = ref('');
 </script>
 <style lang="scss" scoped>
+div[contenteditable] {
+  outline: none;
+}
 .through {
   text-decoration: line-through;
 }
@@ -101,7 +121,21 @@ const getRows = () => {
   overflow: auto;
   font-family: SimSun-Regular, SimSun;
   box-sizing: border-box;
+  .num-box {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 10px;
 
+    .input-box {
+      width: 64px;
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #000;
+      text-align: center;
+      margin: 0 5px;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 78px;
@@ -111,6 +145,7 @@ const getRows = () => {
     height: 40px;
     line-height: 40px;
     margin: 28px auto 0;
+    display: flex;
   }
   .container {
     text-align: center;
@@ -176,6 +211,19 @@ const getRows = () => {
         top: 0;
         left: 0;
         z-index: 2;
+        white-space: pre-line;
+        text-align: justify;
+      }
+      .downMode {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        text-align: left;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        white-space: pre-line;
+        text-align: justify;
       }
       .more-line-box {
         width: 100%;

src/views/tables/explorate.vue

@@ -11,7 +11,7 @@
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(i, index) in eleList">
           <div class="warpper" :class="{ downMode }" :id="`layoutRef${index}`">
-            <component :is="i"></component>
+            <component :downMode="downMode" :is="i"></component>
           </div>
         </div>
       </div>