style:材料分屏后材料信息样式的修改

 <!--
 <!--
  * @Description:
  * @Description:
  * @Autor: renchao
  * @Autor: renchao
- * @LastEditTime: 2023-10-12 09:49:08
+ * @LastEditTime: 2023-10-13 15:02:59
 -->
 -->
 <template>
 <template>
   <div class="rlPopup">
   <div class="rlPopup">
@@ -346,7 +346,7 @@
   // 查看大图
   // 查看大图
   .rlPopup {
   .rlPopup {
     position: relative;
     position: relative;
-    width: 100%;
+    width: 80%;
     text-align: center;
     text-align: center;
     height: 100%;
     height: 100%;
 
 
@@ -402,7 +402,7 @@
       &-button {
       &-button {
         display: flex;
         display: flex;
         justify-content: center;
         justify-content: center;
-
+        flex-wrap: wrap;
         .fileUpdate {
         .fileUpdate {
           margin: 0 10px;
           margin: 0 10px;
         }
         }

@@ -5,55 +5,53 @@
 -->
 -->
 <template>
 <template>
   <div class="clxx">
   <div class="clxx">
-    <div class="right">
-      <!-- 材料预览 -->
-      <div class="clyl-box">
-        <div class="menu-tree">
-          <el-button
-            type="primary"
-            native-type="submit"
-            @click="viewDetail"
-            style="width: 100%; margin-top: 10px">申请材料目录</el-button>
-          <div class="item">
-            材料目录({{ tableData.length }})
-            <div class="tableList">
-              <div
-                style="
+    <!-- 材料预览 -->
+    <div class="clyl-box">
+      <div class="menu-tree">
+        <el-button
+          type="primary"
+          native-type="submit"
+          @click="viewDetail"
+          style="width: 100%; margin-top: 10px">申请材料目录</el-button>
+        <div class="item">
+          材料目录({{ tableData.length }})
+          <div class="tableList">
+            <div
+              style="
                   text-align: center;
                   text-align: center;
                   line-height: 20px;
                   line-height: 20px;
                   color: black;
                   color: black;
                   font-size: 14px;
                   font-size: 14px;
                 "
                 "
-                v-if="tableData.length == 0">
-                暂无数据
-              </div>
-              <div
-                v-for="(item, index) in tableData"
-                :key="item.bsmSj"
-                :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
-                @click="treeClick(item, index)">
-                <span v-if="item.isrequired == 1" class="required">必选</span>
-                <span class="item_name">{{ item.sjmc }}</span>
-                <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
-              </div>
+              v-if="tableData.length == 0">
+              暂无数据
+            </div>
+            <div
+              v-for="(item, index) in tableData"
+              :key="item.bsmSj"
+              :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
+              @click="treeClick(item, index)">
+              <span v-if="item.isrequired == 1" class="required">必选</span>
+              <span class="item_name">{{ item.sjmc }}</span>
+              <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
             </div>
             </div>
           </div>
           </div>
-          <el-button
-            type="primary"
-            native-type="submit"
-            style="width: 100%"
-            @click="handleAdd()"
-            v-if="ableOperation">新增</el-button>
         </div>
         </div>
-        <image-preview
-          ref="imageRef"
-          v-if="tableData.length > 0"
-          :previewImg="previewImg"
-          :ableOperation="ableOperation"
-          @updateList="updateList"
-          @nextPriview="nextPriview"
-          @prevPriview="prevPriview" />
+        <el-button
+          type="primary"
+          native-type="submit"
+          style="width: 100%"
+          @click="handleAdd()"
+          v-if="ableOperation">新增</el-button>
       </div>
       </div>
+      <image-preview
+        ref="imageRef"
+        v-if="tableData.length > 0"
+        :previewImg="previewImg"
+        :ableOperation="ableOperation"
+        @updateList="updateList"
+        @nextPriview="nextPriview"
+        @prevPriview="prevPriview" />
     </div>
     </div>
     <clxxAddDialog v-model="isDialog" />
     <clxxAddDialog v-model="isDialog" />
   </div>
   </div>
@@ -382,93 +380,88 @@
       }
       }
     }
     }
 
 
-    .right {
+    .clmlmx-box {
+      margin: 0 auto;
+
+      .title {
+        text-align: center;
+        height: 60px;
+        line-height: 60px;
+        border: 1px solid #dfe6ec;
+        font-size: 20px;
+        background: #81d3f81a;
+        margin-bottom: -1px;
+      }
+    }
+
+    .clyl-box {
       width: 100%;
       width: 100%;
       height: 100%;
       height: 100%;
+      display: flex;
+      .tableList {
+        margin-top: 10px;
+      }
+      .menu-tree {
+        width: 20%;
+        min-width: 160px;
+        height: 100%;
+        font-size: 14px;
+        border-right: 1px dotted #d9d9d9;
+        padding: 0 15px;
 
 
-      .clmlmx-box {
-        margin: 0 auto;
-
-        .title {
+        .item {
+          line-height: 30px;
+          padding-top: 5px;
+          border-bottom: 1px solid #e8e8e8;
+          font-size: 16px;
           text-align: center;
           text-align: center;
-          height: 60px;
-          line-height: 60px;
-          border: 1px solid #dfe6ec;
-          font-size: 20px;
-          background: #81d3f81a;
-          margin-bottom: -1px;
-        }
-      }
+          color: $light-blue;
 
 
-      .clyl-box {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        .tableList {
-          margin-top: 10px;
-        }
-        .menu-tree {
-          width: 20%;
-          min-width: 160px;
-          height: 100%;
-          font-size: 14px;
-          border-right: 1px dotted #d9d9d9;
-          padding: 0 15px;
+          .itemIcon {
+            float: right;
+            line-height: 60px;
+            cursor: pointer;
+          }
 
 
-          .item {
-            line-height: 30px;
-            padding-top: 5px;
+          .child {
+            line-height: 32px;
             border-bottom: 1px solid #e8e8e8;
             border-bottom: 1px solid #e8e8e8;
-            font-size: 16px;
-            text-align: center;
+            padding-left: 10px;
+            color: #6b6b6b;
+            cursor: pointer;
+            box-sizing: border-box;
+            border-radius: 6px;
+            line-height: 20px;
+            transition: all 0.3s;
+            padding: 8px 0;
+            overflow: hidden;
+            display: flex;
+            justify-content: space-between;
+          }
+          .item_name {
+            flex: 1;
+            font-size: 14px;
+            display: flex;
+            justify-content: center;
+          }
+          .child:hover {
             color: $light-blue;
             color: $light-blue;
+            transform: scale(1.1);
+          }
 
 
-            .itemIcon {
-              float: right;
-              line-height: 60px;
-              cursor: pointer;
-            }
-
-            .child {
-              line-height: 32px;
-              border-bottom: 1px solid #e8e8e8;
-              padding-left: 10px;
-              color: #6b6b6b;
-              cursor: pointer;
-              box-sizing: border-box;
-              border-radius: 6px;
-              line-height: 20px;
-              transition: all 0.3s;
-              padding: 8px 0;
-              overflow: hidden;
-              display: flex;
-              justify-content: space-between;
-            }
-            .item_name {
-              flex: 1;
-              font-size: 14px;
-              display: flex;
-              justify-content: center;
-            }
-            .child:hover {
-              color: $light-blue;
-              transform: scale(1.1);
-            }
-
-            .checked {
-              border: 1px solid $light-blue;
-              color: $light-blue;
-            }
+          .checked {
+            border: 1px solid $light-blue;
+            color: $light-blue;
           }
           }
         }
         }
+      }
 
 
-        .clyl-img {
-          width: 75%;
-          height: 100%;
-          background: #f3f4f7;
-          margin: 0 auto;
-          position: relative;
-        }
+      .clyl-img {
+        width: 75%;
+        height: 100%;
+        background: #f3f4f7;
+        margin: 0 auto;
+        position: relative;
       }
       }
     }
     }
   }
   }