feat:学员小组管理

This commit is contained in:
岳佳鑫
2022-10-17 18:28:58 +08:00
parent 01d53d2f44
commit b1f7d5fc34

View File

@@ -340,7 +340,55 @@
</div>
<div style="display: flex; height: 20px"></div>
</a-tab-pane>
<a-tab-pane key="3" tab="学员">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="学员">
<div class="split"></div>
<div class="content3">
<a-tabs v-model:activeKey="activeKey1">
<a-tab-pane key="8" tab="学员管理">学员管理</a-tab-pane>
<a-tab-pane key="9" tab="小组管理" force-render>
<div class="group">
<div class="groupleft">
<div class="groupname">小组名称</div>
<a-input v-model:value="value" placeholder="请输入小组名称" />
</div>
<div class="groupright">
<div class="btn1">
<img src="../../assets/images/courseManage/add0.png"/>
<span class="btn1text">搜索</span>
</div>
<div class="btn2">
<img src="../../assets/images/courseManage/reset1.png"/>
<span class="btn2text">重置</span>
</div>
</div>
</div>
<div class="second2">
<div class="btn1">
<img src="../../assets/images/courseManage/search0.png"/>
<span class="btn1text">创建小组</span>
</div>
<div class="btn2">
<img src="../../assets/images/courseManage/reset1.png"/>
<span class="btn2text">随机分组</span>
</div>
</div>
<div class="groupmain">
<div class="groupbox">
<div style="width: 90%">
<div class="grouptitle">
<div class="goodgruop">好好学习小组</div>
<div class="">...</div>
</div>
</div>
</div>
<div class="groupbox">
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
</a-tab-pane>
<a-tab-pane key="4" tab="公告">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="5" tab="项目积分">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="6" tab="排行榜">Content of Tab Pane 3</a-tab-pane>
@@ -414,7 +462,8 @@ export default {
checked: false,
checked1: true,
checked2: false,
activeKey: '1',
activeKey: '3',
activeKey1: '9',
});
const showModal = () => {
state.pubproject = true;
@@ -1059,5 +1108,127 @@ export default {
}
}
}
.content3 {
margin-top: 20px;
.ant-tabs-tab-btn {
font-size: 18px;
font-weight: 700;
}
.group {
display: flex;
justify-content: space-between;
.groupleft {
display: flex;
align-items: center;
margin-left: 32px;
.groupname {
color: #000000;
font-size: 14px;
}
.ant-input {
height: 40px;
}
}
.groupright {
display: flex;
.btn1 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
border: 1px solid #409EFF;
border-radius: 8px;
background: #409EFF;
cursor: pointer;
.btn1text {
color: #FFFFFF;
margin-left: 5px;
font-size: 14px;
}
}
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 32px;
border: 1px solid #409EFF;
border-radius: 8px;
cursor: pointer;
background: #FFFFFF;
.btn2text {
color: #409EFF;
margin-left: 5px;
font-size: 14px;
}
}
}
}
.second2 {
display: flex;
margin: 30px 0 0 32px;
.btn1 {
width: 130px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
border: 1px solid #409EFF;
border-radius: 8px;
background: #409EFF;
cursor: pointer;
.btn1text {
color: #FFFFFF;
margin-left: 5px;
font-size: 14px;
}
}
.btn2 {
width: 130px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 32px;
border: 1px solid #409EFF;
border-radius: 8px;
cursor: pointer;
background: #FFFFFF;
.btn2text {
color: #409EFF;
margin-left: 5px;
font-size: 14px;
}
}
}
.groupmain {
display: flex;
margin-left: 32px;
.groupbox {
width: 264px;
height: 181px;
display: flex;
justify-content: center;
border: 1px solid #E9E9E9;
box-shadow: 1px 1px 18px 1px rgba(0, 0, 0, 0.0500);
margin-top: 16px;
margin-right: 20px;
.grouptitle {
display: flex;
justify-content: space-betwwen;
border-bottom: 1px solid rgba(232, 232, 232, 1);
.goodgruop {
color: rgba(0, 0, 0, 0.8500);
font-size: 16px;
line-height: 36px;
}
}
}
}
}
}
</style>