mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-07 01:46:43 +08:00
feat:创建小组
This commit is contained in:
岳佳鑫
@@ -363,7 +363,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="second2">
|
||||
<div class="btn1">
|
||||
<div class="btn1" @click="showModal2">
|
||||
<img src="../../assets/images/courseManage/search0.png"/>
|
||||
<span class="btn1text">创建小组</span>
|
||||
</div>
|
||||
@@ -377,7 +377,22 @@
|
||||
<div style="width: 90%">
|
||||
<div class="grouptitle">
|
||||
<div class="goodgruop">好好学习小组</div>
|
||||
<div>...</div>
|
||||
<div class="more">
|
||||
<span style="color: rgba(0, 0, 0, 0.4500); cursor: pointer">. . .</span>
|
||||
<div class="moreItems">
|
||||
<div class="sammo">编辑</div>
|
||||
<div class="sammo">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leader">组长：小李</div>
|
||||
<div class="grocenter">
|
||||
<div class="leader1">进度</div>
|
||||
<a-progress :percent="55" />
|
||||
</div>
|
||||
<div class="grofooter">
|
||||
<div class="ftext">组员名单 ></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -399,7 +414,7 @@
|
||||
<time-manage v-model:Tvisible="visible" />
|
||||
<!-- 面授管理抽屉 -->
|
||||
<face-manage v-model:Fvisible="FaceVisivle" />
|
||||
<!-- 项目发布弹窗 -->
|
||||
<!-- 概览（无数据）-项目发布弹窗 -->
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:visible="pubproject"
|
||||
@@ -453,7 +468,105 @@
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 项目发布弹窗 -->
|
||||
<!-- 概览（无数据）-项目发布弹窗 -->
|
||||
<!-- 学员-创建小组弹窗 -->
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:visible="stugroup"
|
||||
:title="null"
|
||||
@ok="closeModal2"
|
||||
:footer="null"
|
||||
:closable="false"
|
||||
wrapClassName="doublepro"
|
||||
width="624px"
|
||||
height="476px"
|
||||
>
|
||||
<div class="modalHeader"
|
||||
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
|
||||
>
|
||||
<div class="headerLeft" style="margin-left: 32px">
|
||||
<span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
|
||||
</div>
|
||||
<div style="cursor: pointer;margin-right:32px" @click="closeModal2">
|
||||
<img
|
||||
style="width: 22px; height: 22px"
|
||||
src="../../assets/images/basicinfo/close22.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modalMain">
|
||||
<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"
|
||||
show-count :maxlength="30"
|
||||
placeholder="请输入项目名称"
|
||||
style="border-radius: 8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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-select
|
||||
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"
|
||||
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"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="inname">资源归属:</div>
|
||||
<div class="in">
|
||||
<a-input
|
||||
v-model:value="value"
|
||||
style="border-radius: 8px;height: 40px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pubtn">
|
||||
<a-button class="pubtn1" @click="closeModal2">取消</a-button>
|
||||
<a-button class="pubtn2" @click="closeModal2">确定</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 学员-创建小组弹窗 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -466,8 +579,9 @@ export default {
|
||||
setup(){
|
||||
const state = reactive({
|
||||
visible: false, //时间管理
|
||||
FaceVisivle: true, //面授管理
|
||||
FaceVisivle: false, //面授管理
|
||||
pubproject: false,
|
||||
stugroup: false,
|
||||
checked: false,
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
@@ -480,6 +594,12 @@ export default {
|
||||
const closeModal = () => {
|
||||
state.pubproject = false;
|
||||
};
|
||||
const showModal2 = () => {
|
||||
state.stugroup = true;
|
||||
};
|
||||
const closeModal2 = () => {
|
||||
state.stugroup = false;
|
||||
};
|
||||
//新增
|
||||
const showTime = () => {
|
||||
console.log("点击管理");
|
||||
@@ -494,7 +614,8 @@ export default {
|
||||
return {
|
||||
...toRefs(state),
|
||||
showModal,
|
||||
closeModal,
|
||||
closeModal,showModal2,
|
||||
closeModal2,
|
||||
showTime,
|
||||
showFace,
|
||||
};
|
||||
@@ -624,6 +745,88 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.doublepro {
|
||||
.ant-modal {
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
.modalMain {
|
||||
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: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.ant-select {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.ant-select-selector {
|
||||
border-radius: 8px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.taskpage {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -1144,10 +1347,14 @@ export default {
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
.groupname {
|
||||
height: 22px;
|
||||
width: 70px;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ant-input {
|
||||
border-radius: 8px;
|
||||
width: 264px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
@@ -1241,10 +1448,100 @@ export default {
|
||||
margin-right: 20px;
|
||||
.grouptitle {
|
||||
display: flex;
|
||||
justify-content: space-betwwen;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
border-bottom: 1px solid rgba(232, 232, 232, 1);
|
||||
.goodgruop {
|
||||
|
||||
color: rgba(0, 0, 0, 0.8500);
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.more {
|
||||
position: relative;
|
||||
//margin-right: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.moreItems {
|
||||
width: 76px;
|
||||
height: 80px;
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
|
||||
// border-radius: 3px;
|
||||
border: 0px solid #dcdcdc;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
top: 30px;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
.sammo {
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sammo:hover {
|
||||
color: #4ea6ff;
|
||||
}
|
||||
}
|
||||
.moreItems:hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1240px) {
|
||||
.line {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.img1 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.img2 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.return {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pub {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.more {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.more:hover .moreArrow {
|
||||
background-image: url("../../assets/images/navtop/up.png");
|
||||
}
|
||||
.more:hover .moreItems {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.leader {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-size: 14px;
|
||||
margin-top: 16px;
|
||||
//margin-left: 24px;
|
||||
}
|
||||
.grocenter {
|
||||
display: flex;
|
||||
margin-top: 14px;
|
||||
.leader1 {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-size: 14px;
|
||||
width: 51px;
|
||||
}
|
||||
.ant-progress-outer {
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
.grofooter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
.ftext {
|
||||
color: rgba(56, 139, 225, 1);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user