hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-12 12:26:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:随机小组抽屉

Browse Source
This commit is contained in:
岳佳鑫
2022-10-19 10:46:37 +08:00
parent dbf651e716
commit 81c7b6b43a
2 changed files with 112 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/drawers/SubsetManage.vue
View File

@@ -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%;

24
src/views/projectcenter/TaskPage.vue
View File

@@ -75,11 +75,7 @@
<div
class="taskbox"
style="
background: linear-gradient(
180deg,
rgba(221, 234, 255, 1),
rgba(240, 248, 254, 1)
);
background: linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1));
"
>
<div class="leftt">
@@ -100,11 +96,7 @@
class="taskbox"
@click="showModal"
style="
background: linear-gradient(
180deg,
rgba(229, 246, 236, 1),
rgba(238, 249, 243, 1)
);
background: linear-gradient( 180deg,rgba(229, 246, 236, 1),rgba(238, 249, 243, 1));
"
>
<div class="leftt">
@@ -852,11 +844,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
background: linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2) 100%);
"
>
<div class="headerLeft" style="margin-left: 32px">
@@ -932,11 +920,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
background: linear-gradient(0deg,rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100% );
"
>
<div class="headerLeft" style="margin-left: 32px">