效果预览修改

src/views/codeRule/PreviewResult.vue

@@ -2,7 +2,7 @@
   <el-dialog
     title="效果预览"
     :visible.sync="visible"
-    width="80%"
+    width="60%"
     append-to-body
   >
     <div class="title-container">
@@ -36,27 +36,25 @@
            <div class="title-container">
                     <span>技术指标</span>
             </div>
-                <div class="tech-content">
+        <div class="tech-content">
           <div class="tech-item">
-            <span class="tech-label">粉煤灰</span>
-            <el-input v-model="techValue1" class="tech-input">
-              <template slot="append">≤4.0</template>
-            </el-input>
+            <div class="tech-label">筛选结果</div>
+            <div class="tech-val"><=4.0</div>
           </div>
 
-          <div class="tech-item">
-            <span class="tech-label">水泥试验报告单</span>
-            <el-input v-model="techValue2" class="tech-input" disabled>
-              <template slot="append">不溶物_技术标准</template>
-            </el-input>
+          <div class="tech-item-list">
+            <div class="tech-item-1">
+                <div  class="tech-label">表单名称</div>
+                <div class="tech-val">水泥试务报告单</div>
+            </div>
+             <div class="tech-item-1">
+                <div class="tech-label">回显位置</div>
+                <div  class="tech-val">水泥试务报告单</div>
+            </div>
+           
           </div>
 
-          <div class="tech-item">
-            <span class="tech-label">水泥试验报告单#1</span>
-            <el-input v-model="techValue3" class="tech-input" disabled>
-              <template slot="append">不溶物_技术标准</template>
-            </el-input>
-          </div>
+        
         </div>
       </div>
     </div>
@@ -122,7 +120,7 @@ export default {
     }
 
     .info-select {
-      width: 400px
+      width: 300px
     }
   }
 
@@ -133,17 +131,25 @@ export default {
       margin-bottom: 20px;
       color: #303133;
     }
-
+     .tech-label {
+        
+          color:rgba(130, 130, 130, 1);
+        }
+        .tech-val{
+            color: black;
+            font-family: SourceHanSansSC;
+        }
     .tech-content {
       .tech-item {
         display: flex;
         align-items: center;
         margin-bottom: 15px;
+        justify-content: space-between;
+        border: 1px solid rgb(187, 187, 187);
+        border-radius: 5px;
+        padding: 10px;
 
-        .tech-label {
-          width: 120px;
-          color: #606266;
-        }
+   
 
         .tech-input {
           width: 300px;
@@ -153,6 +159,27 @@ export default {
             color: #909399;
             min-width: 120px;
           }
+        }
+      }
+      .tech-item-list{
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+        background-color: #f5f7fa;
+         border: 1px solid rgb(187, 187, 187);
+        border-radius: 5px;
+        padding: 8px;
+        max-height: 300px;
+        overflow-y: auto;
+        .tech-item-1 {
+          display: flex;
+          justify-content: space-between;
+         align-items: center;
+         line-height: 30px;
+        
+        
+
+        
         }
       }
     }