添加标题

src/views/IM/diagnosis-admin/operation.vue

 <template>
   <div class="operation">
-    <el-alert
-      :closable="false"
-      title="注：去掉勾选后，系统将自动不分配给该人员，请谨慎操作"
-      type="info"
-    >
-    </el-alert>
-    <div class="checkbox-container">
-      <el-checkbox-group v-model="checklist" @change="changefuc"  size="medium">
-        <div class="checkbox-content">
-          <div class="checkbox-item" v-for="(item, index) in adminList" :key="index">
-          <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
-        </div>
-        </div>
+    <div class="operation-title">医助管理</div>
 
-      </el-checkbox-group>
-
-    </div>
-    <div class="bottom-button">
-      <el-button @click="cancel">取消</el-button>
-      <el-button @click="sumbitmatch" type="primary">确定</el-button>
+    <div class="operation-content">
+      <el-alert
+        :closable="false"
+        title="注：去掉勾选后，系统将自动不分配给该人员，请谨慎操作"
+        type="info"
+      >
+      </el-alert>
+      <div class="checkbox-container">
+        <el-checkbox-group
+          v-model="checklist"
+          @change="changefuc"
+          size="medium"
+        >
+          <div class="checkbox-content">
+            <div
+              class="checkbox-item"
+              v-for="(item, index) in adminList"
+              :key="index"
+            >
+              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+      <div class="bottom-button">
+        <el-button @click="cancel">取消</el-button>
+        <el-button @click="sumbitmatch" type="primary">确定</el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -35,33 +45,32 @@ export default {
   },
   mounted() {
     this.getCheckList();
-    this.getAdminList()
-
+    this.getAdminList();
   },
   methods: {
-    cancel(){
-        this.$confirm('取消后将不保存本次操作内容', '确认取消吗?',{
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-            this.getCheckList()
-        })
+    cancel() {
+      this.$confirm("取消后将不保存本次操作内容", "确认取消吗?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.getCheckList();
+      });
     },
-    changefuc(){
+    changefuc() {
       // console.log("checklist",this.checklist)
     },
 
-    sumbitmatch(){
-     let url= SET_MATCH_URL
-     let params={
-       bizType:1,
-       userIds:this.checklist
-     }
-      this.POST(url,params)
+    sumbitmatch() {
+      let url = SET_MATCH_URL;
+      let params = {
+        bizType: 1,
+        userIds: this.checklist,
+      };
+      this.POST(url, params)
         .then((res) => {
           if (res.code == "000000") {
-            this.$message.success('保存成功');
+            this.$message.success("保存成功");
           }
         })
         .catch((err) => {
@@ -75,7 +84,7 @@ export default {
       this.GET(url)
         .then((res) => {
           if (res.code == "000000") {
-            this.checklist=res.data
+            this.checklist = res.data;
           }
         })
         .catch((err) => {
@@ -101,25 +110,34 @@ export default {
 .operation {
   min-height: 80%;
   padding: 20px;
-  background: #ffffff;
-  .checkbox-container {
-    margin-top: 20px;
-    .checkbox-content{
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex-wrap: wrap;
-      .checkbox-item{
-        width: 200px;
-      margin-bottom: 10px;
-    }
-    }
 
+  .operation-title {
+    background: #ffffff;
+    padding: 20px;
+    margin-bottom: 20px;
   }
-  .bottom-button{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .operation-content {
+     padding: 20px;
+    background: #ffffff;
+
+    .checkbox-container {
+      margin-top: 20px;
+      .checkbox-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .checkbox-item {
+          width: 200px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+    .bottom-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
 </style>