feat:随机小组抽屉

src/components/drawers/SubsetManage.vue

@@ -1,9 +1,9 @@
 <template>
   <a-drawer
     :visible="Svisible"
-    class="drawerStyle"
+    class="drawerStyle subset"
     placement="right"
-    width="40%"
+    width="70%"
     @after-visible-change="afterVisibleChange"
   >
     <div class="drawerMain">
@@ -16,8 +16,41 @@
         />
       </div>
       <div class="main">
+        <div class="groupl">小组：</div>
+        <div>
+          <div class="groupin">         
+          <a-input
+                v-model:value="value"
+                placeholder="好好学习小组"
+                style="border-radius: 8px; height: 40px"
+          />
+          <div class="delete">删除</div>
+        </div>
+        <div class="groupin">          
+          <a-input
+                v-model:value="value"
+                placeholder="全能小组"
+                style="border-radius: 8px; height: 40px"
+          />
+          <div class="delete">删除</div>
+        </div>
+        <div class="groupin">
+
+          <a-input
+                v-model:value="value"
+                placeholder="宇宙第一最强小组"
+                style="border-radius: 8px; height: 40px"
+          />
+          <div class="delete">删除</div>
+        </div>
+        </div>
         
       </div>
+      <div class="addgroup">
+        <img src="../../assets/images/courseManage/add0.png"/>
+        <span class="grot">创建小组</span>
+      </div>
+      <div class="zhu">注：随机分组不对小组长生效</div>
       <div class="btnn">
         <button class="btn1">取消</button>
         <button class="btn2">确定</button>
@@ -27,6 +60,7 @@
 </template>
 
 <script>
+import { reactive, toRefs } from "vue";
 export default {
   name: "SubsetManage",
   props: {
@@ -35,11 +69,33 @@ export default {
       default: false,
     },
   },
+  setup(props, ctx) {
+    const state = reactive({});
+    const closeDrawer = () => {
+      ctx.emit("update:Svisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    const showDrawer = () => {
+      state.Svisible = true;
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawer,
+      closeDrawer,
+      // change,
+    };
+  },
 };
 </script>
 
 <style scoped lang="scss" >
-.drawerStyle {
+.subset {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;
     .ant-drawer-header {
@@ -71,7 +127,55 @@ export default {
         // margin-left: 24px;
       }
     }
-
+    .main {
+      display: flex;
+      .groupin {
+        display: flex;
+        align-items: center;  
+        margin-top: 32px;
+        .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 384px;
+              height: 40px;
+        }
+        .delete {
+          color: rgba(56, 125, 247, 1);
+          font-size: 14px;
+          margin-left: 10px;
+          cursor: pointer;
+        }     
+      }
+      .groupl {
+          color: rgba(0, 0, 0, 0.8500);
+          font-size: 16px;
+          margin-top: 36px;
+      }
+    }
+    .addgroup {
+        width: 130px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        //margin-right: 16px;
+        margin-top: 32px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        background: #409eff;
+        cursor: pointer;
+        .grot {
+          color: #ffffff;
+          margin-left: 5px;
+          font-size: 14px;
+          
+        }
+      }
+    .zhu {
+      margin-top: 24px;
+      color: rgba(153, 153, 153, 1);
+      font-size: 14px;
+    }
     .btnn {
       height: 72px;
       width: 100%;