feat:随机小组-创建小组

src/components/drawers/AddGroup.vue

@@ -0,0 +1,218 @@
+<template>
+  <a-drawer
+    :visible="Avisible"
+    class="drawerStyle addgroup"
+    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="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">小组名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请输入小组名称"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px; margin-left: 15px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">小组长:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请输入小组长"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+  
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "AddGroup",
+  props: {
+    Avisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({});
+    const closeDrawer = () => {
+      ctx.emit("update:Avisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      // change,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.addgroup {
+  .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;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+        display: flex;
+        flex-direction: column;
+        //align-items: center;
+        .name {
+          //width: 78%;
+          // background-color: lightcoral;
+          display: flex;
+          //justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            //width: 81%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 384px;
+              height: 40px;
+            }
+          }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      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>

src/components/drawers/SubsetManage.vue

@@ -43,10 +43,9 @@
           />
           <div class="delete">删除</div>
         </div>
-        </div>
+        </div>       
-        
       </div>
-      <div class="addgroup">
+      <div class="addgroup" @click="showAddGroup">
         <img src="../../assets/images/courseManage/add0.png"/>
         <span class="grot">创建小组</span>
       </div>
@@ -57,12 +56,16 @@
       </div>
     </div>
   </a-drawer>
+  <!-- 创建小组抽屉 -->
+  <add-group v-model:Avisible="Avisible" />
 </template>
 
 <script>
 import { reactive, toRefs } from "vue";
+import AddGroup from "./AddGroup.vue";
 export default {
   name: "SubsetManage",
+  components: { AddGroup },
   props: {
     Svisible: {
       type: Boolean,
@@ -70,7 +73,9 @@ export default {
     },
   },
   setup(props, ctx) {
-    const state = reactive({});
+    const state = reactive({
+      Avisible: false,
+    });
     const closeDrawer = () => {
       ctx.emit("update:Svisible", false);
     };
@@ -83,11 +88,15 @@ export default {
       state.Svisible = true;
     };
 
+    const showAddGroup = () => {
+      state.Avisible = true;
+    };
     return {
       ...toRefs(state),
       afterVisibleChange,
       showDrawer,
       closeDrawer,
+      showAddGroup,
       // change,
     };
   },