提交

src/components/drawers/EntryScores.vue

@@ -0,0 +1,192 @@
+<template>
+  <a-drawer
+    :visible="Evisible"
+    class="drawerStyle EntryScores"
+    placement="right"
+    width="50%"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">录入成绩</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="main">
+        <div class="isGood">
+          <div class="sta"></div>
+          <div class="cj">成绩：</div>
+          <div class="ch">
+            <a-radio-group v-model:value="value">
+              <a-radio :value="1">合格</a-radio>
+              <a-radio :value="2">不合格</a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+        <div class="score">
+          <div class="sleft">
+            <div class="sta"></div>
+            <div class="cj">得分：</div>
+            <a-input
+              v-model:value="score"
+              style="
+                width: 270px;
+                height: 40px;
+                border-radius: 8px;
+                margin-left: 15px;
+              "
+              placeholder="请输入分数"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "EntryScores",
+  props: {
+    Evisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, ctx) {
+    const state = reactive({
+      value: 1, //成绩是否合格的单选
+      score: null, //录入的成绩
+    });
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const closeDrawer = () => {
+      ctx.emit("update:Evisible", false);
+    };
+    return {
+      ...toRefs(state),
+      selectProjectName,
+      closeDrawer,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// .drawerStyle {
+//   .ant-drawer-content-wrapper {
+//     // max-width: 1000px;
+//     .ant-drawer-header {
+//       display: none !important;
+//     }
+//     .ant-drawer-body {
+//       padding: 0;
+//     }
+//   }
+
+// }
+.EntryScores {
+  .drawerMain {
+    min-width: 400px;
+    margin: 0px 32px 0px 32px;
+    // overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+      width: 100%;
+      // height: 100%;
+      overflow-y: auto;
+      margin-bottom: 70px;
+      .sta {
+        width: 10px;
+        height: 10px;
+        background-image: url(../../assets/images/basicinfo/asterisk.png);
+        background-size: 100%;
+      }
+      .cj {
+        font-size: 16px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.85);
+        margin-left: 6px;
+      }
+      // background-color: #bfa;
+      // overflow-y: auto;
+      .isGood {
+        display: flex;
+        align-items: center;
+
+        .ch {
+          margin-top: 2.5px;
+          margin-left: 15px;
+        }
+      }
+      .score {
+        display: flex;
+        margin-top: 30px;
+        .sleft {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>