教师端1期需求ui优化

src/components/SimpleMessageBox/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-dialog class="simple-message-box" :title="title" :visible.sync="visible" :show-close="false" append-to-body>
+      <div class="message-box-content"><svg-icon style="margin-right: 5px;font-size:16px"
+          icon-class="jingti"></svg-icon>{{message}}</div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="cancel" @click="cancel">{{cancelButtonText}}</el-button>
+        <el-button class="confirm" type="primary" @click="confirm">{{confirmButtonText}}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "SimpleMessageBox",
+  data() {
+    return {
+      visible: false,
+      title: "",
+      message: "",
+      confirmButtonText: "确 认",
+      cancelButtonText: "取 消",
+      handleConfirm: null,
+      handleCancel: null,
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    cancel() {
+      this.visible = false;
+      this.handleCancel();
+    },
+    confirm() {
+      this.visible = false;
+      this.handleConfirm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.simple-message-box {
+  ::v-deep .el-dialog {
+    border-radius: 12px;
+  }
+  ::v-deep .el-dialog__title {
+    font-size: 16px;
+    color: #000000;
+  }
+  .message-box-content {
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    align-items: center;
+    color: #000000;
+  }
+  .cancel {
+    width: 120px;
+    height: 40px;
+    background: rgba(#4284f7,0.1);
+    border-radius: 8px;
+    margin-right: 8px;
+    border: none;
+    span {
+      font-weight: bold;
+      font-size: 14px;
+      color: #4284f7;
+      line-height: 40px;
+      text-align: center;
+    }
+  }
+  .confirm {
+    width: 120px;
+    height: 40px;
+    background: #4284f7;
+    border-radius: 8px;
+
+    span {
+      font-weight: bold;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 40px;
+    }
+  }
+}
+</style>