style:增加抽屉样式

2025-12-17 23:06:47 +08:00 · 2022-10-09 16:17:48 +08:00
parent 16ac68ceb0 5619b58be4
commit f46fa52f90
15 changed files with 1381 additions and 665 deletions
--- a/src/views/system/SystemManage.vue
+++ b/src/views/system/SystemManage.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="systemManage">
+    <div
+      style="
+        width: 130px;
+        height: 40px;
+        background: #388be1;
+        border-radius: 8px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      "
+      @click="showDrawer"
+    >
+      添加投票
+    </div>
+    <div>
+      <a-drawer
+        v-model:visible="visible"
+        class="drawerStyle"
+        style="color: red"
+        width="70%"
+        title="添加投票"
+        placement="right"
+        @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="vote">
+            <div style="font-size: 20px">*</div>
+            <div>投票名称：</div>
+            <div>
+              <a-input v-model:value="value" placeholder="请输入投票名称" />
+            </div>
+          </div>
+          <!-- 投票名称 -->
+        </div>
+      </a-drawer>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+
+export default {
+  name: "SystemManage",
+  setup() {
+    const state = reactive({
+      visible: true,
+    });
+
+    const afterVisibleChange = (bool) => {
+      console.log("visible", bool);
+    };
+
+    const showDrawer = () => {
+      state.visible = true;
+    };
+    const closeDrawer = () => {
+      state.visible = false;
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawer,
+      closeDrawer,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.systemManage {
+  width: 100%;
+}
+.drawerStyle {
+  .ant-drawer-content-wrapper {
+    max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .vote {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>