zc

src/views/comprehensive/message/noticeconfig/index.vue

@@ -1,103 +1,128 @@
 <template>
   <div class="app-container noticeconfig">
-    <el-form :model="form" ref="form" :inline="true" label-width="120px">
-      <div class="top-title-box">
+    <div class="title-box">
+      <div class="title-min-box">
+        <p>检查通知</p>
+        <p></p>
+      </div>
+      <div class="title-min-box">
         <p>预案通知</p>
-        <p class="inquire-button-one" @click="upData" v-if="form.id" v-hasPermi="['laboratory:noticeconfig:edit']">保存</p>
-        <p class="inquire-button-one" @click="upData" v-if="!form.id" v-hasPermi="['laboratory:noticeconfig:add']">提交</p>
+        <p></p>
       </div>
-      <el-form-item label="广播通知" prop="riskRadio" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入广播通知内容"
-          v-model="form.riskRadio">
-        </el-input>
-      </el-form-item>
-      <el-form-item label="语音播报" prop="riskVoice" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入语音播报内容"
-          v-model="form.riskVoice">
-        </el-input>
-      </el-form-item>
-      <el-form-item label="电话通知" prop="riskPhone" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入电话通知内容"
-          v-model="form.riskPhone">
-        </el-input>
-      </el-form-item>
-      <el-form-item label="短信提示" prop="riskMessage" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入短信提示内容"
-          v-model="form.riskMessage">
-        </el-input>
-      </el-form-item>
-      <div class="top-title-box">
+      <div class="title-min-box">
         <p>疏散通知</p>
+        <p></p>
       </div>
-      <el-form-item label="广播通知" prop="exitRadio" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入广播通知内容"
-          v-model="form.exitRadio">
-        </el-input>
-      </el-form-item>
-      <el-form-item label="语音播报" prop="exitVoice" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入语音播报内容"
-          v-model="form.exitVoice">
-        </el-input>
-      </el-form-item>
-      <el-form-item label="电话通知" prop="exitPhone" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入电话通知内容"
-          v-model="form.exitPhone">
-        </el-input>
-      </el-form-item>
-      <el-form-item label="短信提示" prop="exitMessage" class="form-item-box">
-        <el-input
-          style="width:350px;"
-          type="textarea"
-          maxlength="50"
-          :rows="3"
-          resize="none"
-          placeholder="请输入短信提示内容"
-          v-model="form.exitMessage">
-        </el-input>
-      </el-form-item>
-    </el-form>
+    </div>
+    <div class="content-box scrollbar-box">
+      <el-form :model="form" ref="form" :inline="true" label-width="120px">
+        <div class="top-title-box">
+          <p>预案通知</p>
+          <p class="inquire-button-one" @click="upData" v-if="form.id" v-hasPermi="['laboratory:noticeconfig:edit']">
+            保存</p>
+          <p class="inquire-button-one" @click="upData" v-if="!form.id" v-hasPermi="['laboratory:noticeconfig:add']">
+            提交</p>
+        </div>
+        <el-form-item label="广播通知" prop="riskRadio" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入广播通知内容"
+            v-model="form.riskRadio">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="语音播报" prop="riskVoice" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入语音播报内容"
+            v-model="form.riskVoice">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="电话通知" prop="riskPhone" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入电话通知内容"
+            v-model="form.riskPhone">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="短信提示" prop="riskMessage" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入短信提示内容"
+            v-model="form.riskMessage">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-form :model="form" ref="form" :inline="true" label-width="120px">
+        <div class="top-title-box">
+          <p>疏散通知</p>
+        </div>
+        <el-form-item label="广播通知" prop="exitRadio" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入广播通知内容"
+            v-model="form.exitRadio">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="语音播报" prop="exitVoice" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入语音播报内容"
+            v-model="form.exitVoice">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="电话通知" prop="exitPhone" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入电话通知内容"
+            v-model="form.exitPhone">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="短信提示" prop="exitMessage" class="form-item-box">
+          <el-input
+            style="width:350px;"
+            type="textarea"
+            maxlength="50"
+            :rows="3"
+            resize="none"
+            placeholder="请输入短信提示内容"
+            v-model="form.exitMessage">
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="button-box">
+      <p class="null-p"></p>
+      <p class="inquire-button-one button-p" @click="upData" v-if="!form.id" v-hasPermi="['laboratory:noticeconfig:add']">提交</p>
+      <p class="null-p"></p>
+    </div>
   </div>
 </template>
 
@@ -278,12 +303,60 @@ export default {
 <style scoped lang="scss">
   .noticeconfig{
     display: flex !important;
+    flex:1;
     flex-direction: column;
     overflow: hidden;
-    padding:0 20px 20px!important;
     *{
       margin:0;
     }
+    .title-box{
+      height:80px;
+      border-bottom:1px solid #dedede;
+      overflow-x:scroll;
+      overflow-y:hidden;
+      white-space: nowrap;
+      .title-min-box{
+        display: inline-block;
+        overflow: hidden;
+        height:158px;
+        width:158px;
+        p:nth-child(1){
+
+        }
+        p:nth-child(2){
+
+        }
+      }
+    }
+    .title-box::-webkit-scrollbar{
+      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 4px;
+    }
+    .title-box::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #CBCDD1;
+    }
+    .title-box::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
+      border-radius: 0;
+      background: rgba(255,255,255,0);
+    }
+    .content-box{
+      flex:1;
+      padding:0 20px;
+    }
+    .button-box{
+      display: flex;
+      height:80px;
+      .button-p{
+        width:80px;
+        height:40px;
+        margin:20px 0;
+      }
+      .null-p{
+        flex:1;
+      }
+    }
     .top-title-box{
       display: flex;
       height:80px;