feat:修改单选框不能取消问题 部分弹窗退出清除状态

This commit is contained in:
dongwug
2022-10-21 15:45:09 +08:00
10 changed files with 649 additions and 430 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 862 B

View File

@@ -266,6 +266,7 @@ textarea {
//抽屉-------------------------------------------------------- //抽屉--------------------------------------------------------
.drawerStyle { .drawerStyle {
// transform: translateX(0px) !important;
.ant-drawer-content-wrapper { .ant-drawer-content-wrapper {
max-width: 1050px; max-width: 1050px;

View File

@@ -220,9 +220,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "-", cur: "-",
jin: "-", jin: "-",
time: "缺勤", time: "缺勤",
state: "异常", state: "异常",
signIn: false, //签到
signOut: false, //签退
leave: false, //请假
}, },
{ {
key: 2, key: 2,
@@ -231,8 +233,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "2022-10-31 23:12", cur: "2022-10-31 23:12",
jin: "-", jin: "-",
time: "签到", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 3, key: 3,
@@ -241,8 +246,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "2022-10-31 23:12", cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "迟到",
state: "常", state: "常",
signIn: false, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 4, key: 4,
@@ -251,8 +259,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "2022-10-31 23:12", cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "退",
state: "常", state: "常",
signIn: true, //签到
signOut: false, //签退
leave: false, //请假
}, },
{ {
key: 5, key: 5,
@@ -263,6 +274,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 6, key: 6,
@@ -273,6 +287,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
name: "张三", name: "张三",
@@ -282,6 +299,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 8, key: 8,
@@ -292,6 +312,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "请假", time: "请假",
state: "正常", state: "正常",
signIn: false, //签到
signOut: false, //签退
leave: true, //请假
}, },
], ],
options: [ options: [
@@ -328,6 +351,43 @@ export default {
state.selectedRowKeys = selectedRowKeys; state.selectedRowKeys = selectedRowKeys;
}; };
const getTableData = () => {
let arr = state.tableData;
arr.map((value) => {
// console.log("value", value);
value.opacation = (
<div class="opa">
<a-checkbox
checked={value.signIn}
onChange={(e) => {
console.log("点击签到", e);
}}
>
签到
</a-checkbox>
<a-checkbox
checked={value.signOut}
onChange={(e) => {
console.log("点击签退", e);
}}
>
签退
</a-checkbox>
<a-checkbox
checked={value.leave}
onChange={(e) => {
console.log("点击请假", e);
}}
>
请假
</a-checkbox>
</div>
);
});
state.tableData = arr;
};
getTableData();
const tableDataFunc = () => { const tableDataFunc = () => {
const columns = [ const columns = [
{ {
@@ -402,16 +462,16 @@ export default {
className: "h", className: "h",
dataIndex: "opacation", dataIndex: "opacation",
key: "opacation", key: "opacation",
width: 210, width: 130,
align: "center", align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽 // scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => { // customRender: () => {
return ( // return (
<div class="opa"> // <div class="opa">
<a-checkbox-group /> // <a-checkbox-group />
</div> // </div>
); // );
}, // },
}, },
]; ];
return columns; return columns;
@@ -429,7 +489,7 @@ export default {
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
.me { .me {
.ant-modal-body { .ant-modal-body {
padding: 0px; padding: 0px;
@@ -731,4 +791,4 @@ export default {
} }
} }
} }
</style> </style>

View File

@@ -2,7 +2,7 @@
<a-drawer <a-drawer
:visible="addfaceteachVisible" :visible="addfaceteachVisible"
class="drawerStyle addfaceteachDrawer" class="drawerStyle addfaceteachDrawer"
width="80%" width="90%"
title="添加面授" title="添加面授"
placement="right" placement="right"
@after-visible-change="afterVisibleChange" @after-visible-change="afterVisibleChange"
@@ -116,7 +116,7 @@
v-model:value="inputV3" v-model:value="inputV3"
style="width: 384px; height: 32px" style="width: 384px; height: 32px"
/> />
<span style="margin-left: 5px">分钟</span> <span style="margin-left: 5px; width: 30px">分钟</span>
</div> </div>
</div> </div>
<div class="main_item"> <div class="main_item">
@@ -142,24 +142,37 @@
<span style="margin-right: 3px">考勤设置</span> <span style="margin-right: 3px">考勤设置</span>
</div> </div>
<div class="kqszbox"> <div class="kqszbox">
<div class="qdqtbox"><div class="qdbtn"><div class="btntext">签到</div></div></div> <div class="qdqtbox">
<div class="qdbtn"><div class="btntext">签到</div></div>
</div>
<div class="setbox"> <div class="setbox">
<div class="timerbox"> <div class="timerbox">
<span>开始前</span> <span>开始前</span>
<a-input style="width: 88px; height: 32px" :v-model:value="inputV5"></a-input> <a-input
style="width: 88px; height: 32px"
:v-model:value="inputV5"
></a-input>
<span style="color: #999999; margin-left: 8px">分钟</span> <span style="color: #999999; margin-left: 8px">分钟</span>
</div> </div>
<div class="timerbox"> <div class="timerbox">
<span>开始后</span> <span>开始后</span>
<a-input style="width: 88px; height: 32px" :v-model:value="inputV6"></a-input> <a-input
style="width: 88px; height: 32px"
:v-model:value="inputV6"
></a-input>
<span style="color: #999999; margin-left: 8px">分钟</span> <span style="color: #999999; margin-left: 8px">分钟</span>
</div> </div>
</div> </div>
<div class="qdqtbox"><div class="qtbtn"><div class="btntext">签退</div></div></div> <div class="qdqtbox">
<div class="qtbtn"><div class="btntext">签退</div></div>
</div>
<div class="setbox"> <div class="setbox">
<div class="timerbox"> <div class="timerbox">
<span>结束前</span> <span>结束前</span>
<a-input style="width: 88px; height: 32px" :v-model:value="inputV7"></a-input> <a-input
style="width: 88px; height: 32px"
:v-model:value="inputV7"
></a-input>
<span style="color: #999999; margin-left: 8px" <span style="color: #999999; margin-left: 8px"
>分钟提前签退则记为早退</span >分钟提前签退则记为早退</span
> >
@@ -373,6 +386,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.main_left { .main_left {
height: 1080px;
padding-right: 30px; padding-right: 30px;
flex: 1; flex: 1;
border-right: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
@@ -424,7 +438,7 @@ export default {
.qtbtn { .qtbtn {
width: 75px; width: 75px;
height: 24px; height: 24px;
background: rgba(56,139,225,0.16); background: rgba(56, 139, 225, 0.16);
border-radius: 2px; border-radius: 2px;
border: 1px solid #387df7; border: 1px solid #387df7;
display: flex; display: flex;

View File

@@ -16,38 +16,38 @@
/> />
</div> </div>
<div class="main"> <div class="main">
<div class="name"> <div class="name">
<div class="star" style="margin-top: -4px"> <div class="star" style="margin-top: -4px">
<img <img
style="width: 10px; height: 10px" style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png" 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="name"> <div class="inname">小组名称:</div>
<div class="star" style="margin-top: -4px"> <div class="in">
<img <a-input
style="width: 10px; height: 10px; margin-left: 15px" v-model:value="value"
src="../../assets/images/basicinfo/asterisk.png" placeholder="请输入小组名称"
/> style="border-radius: 8px; height: 40px"
</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>
<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>
<div class="btnn"> <div class="btnn">
<button class="btn1">取消</button> <button class="btn1">取消</button>
@@ -55,7 +55,6 @@
</div> </div>
</div> </div>
</a-drawer> </a-drawer>
</template> </template>
<script> <script>
@@ -88,7 +87,7 @@ export default {
}; };
</script> </script>
<style scoped lang="scss" > <style scoped lang="scss">
.addgroup { .addgroup {
.ant-drawer-content-wrapper { .ant-drawer-content-wrapper {
// max-width: 1000px; // max-width: 1000px;
@@ -122,67 +121,67 @@ export default {
} }
} }
.main { .main {
display: flex;
flex-direction: column;
//align-items: center;
.name {
//width: 78%;
// background-color: lightcoral;
display: flex; display: flex;
flex-direction: column; //justify-content: right;
//align-items: center; margin-top: 32px;
.name { align-items: center;
//width: 78%; height: 40px;
// background-color: lightcoral; // border: 1px solid black;
display: flex;
//justify-content: right;
margin-top: 32px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname { .inname {
color: #000000; color: #000000;
font-size: 14px; font-size: 14px;
margin-left: 7px; margin-left: 7px;
}
.in {
margin-left: 14px;
//width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 384px;
height: 40px;
}
}
} }
.pubtn { .in {
display: flex; margin-left: 14px;
justify-content: center; //width: 81%;
margin-top: 25px; .ant-input {
//margin-bottom: 29px; border-radius: 5px;
.pubtn1 { // height: 120%;
width: 100px; width: 384px;
height: 40px; 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;
} }
} }
} }
.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 { .btnn {
height: 72px; height: 72px;
width: 100%; width: 100%;
@@ -215,4 +214,4 @@ export default {
} }
} }
} }
</style> </style>

View File

@@ -224,9 +224,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "-", cur: "-",
jin: "-", jin: "-",
time: "缺勤", time: "缺勤",
state: "异常", state: "异常",
signIn: false, //签到
signOut: false, //签退
leave: false, //请假
}, },
{ {
key: 2, key: 2,
@@ -235,8 +237,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "2022-10-31 23:12", cur: "2022-10-31 23:12",
jin: "-", jin: "-",
time: "签到", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 3, key: 3,
@@ -245,8 +250,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "2022-10-31 23:12", cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "迟到",
state: "常", state: "常",
signIn: false, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 4, key: 4,
@@ -255,8 +263,11 @@ export default {
gang: "产品经理", gang: "产品经理",
cur: "2022-10-31 23:12", cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "退",
state: "常", state: "常",
signIn: true, //签到
signOut: false, //签退
leave: false, //请假
}, },
{ {
key: 5, key: 5,
@@ -267,6 +278,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 6, key: 6,
@@ -277,6 +291,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
name: "张三", name: "张三",
@@ -286,6 +303,9 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "签到/签退", time: "签到/签退",
state: "正常", state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
}, },
{ {
key: 8, key: 8,
@@ -296,22 +316,26 @@ export default {
jin: "2022-10-31 23:12", jin: "2022-10-31 23:12",
time: "请假", time: "请假",
state: "正常", state: "正常",
signIn: false, //签到
signOut: false, //签退
leave: true, //请假
}, },
], ],
options: [ tableOptions: [
{ {
label: "Apple", label: "签到",
value: "Apple", value: "1",
}, },
{ {
label: "Pear", label: "签退",
value: "Pear", value: "2",
}, },
{ {
label: "Orange", label: "请假",
value: "Orange", value: "3",
}, },
], ],
// selectOption: [],
}); });
const selectProjectName = (value, index) => { const selectProjectName = (value, index) => {
console.log("value", value, index); console.log("value", value, index);
@@ -332,6 +356,42 @@ export default {
state.selectedRowKeys = selectedRowKeys; state.selectedRowKeys = selectedRowKeys;
}; };
const getTableData = () => {
let arr = state.tableData;
arr.map((value) => {
// console.log("value", value);
value.opacation = (
<div class="opa">
<a-checkbox
checked={value.signIn}
onChange={(e) => {
console.log("点击签到", e);
}}
>
签到
</a-checkbox>
<a-checkbox
checked={value.signOut}
onChange={(e) => {
console.log("点击签退", e);
}}
>
签退
</a-checkbox>
<a-checkbox
checked={value.leave}
onChange={(e) => {
console.log("点击请假", e);
}}
>
请假
</a-checkbox>
</div>
);
});
state.tableData = arr;
};
getTableData();
const tableDataFunc = () => { const tableDataFunc = () => {
const columns = [ const columns = [
{ {
@@ -406,16 +466,25 @@ export default {
className: "h", className: "h",
dataIndex: "opacation", dataIndex: "opacation",
key: "opacation", key: "opacation",
width: 210, width: 130,
align: "center", align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽 // scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
return ( // customRender: () => {
<div class="opa"> // return (
<a-checkbox-group /> // <div class="opa">
</div> // <a-checkbox-group
); // // value={state.selectOption}
}, // name="checkboxgroup"
// options={state.tableOptions}
// onChange={(e) => {
// console.log("eee", e);
// // state.selectOption = e;
// }}
// />
// </div>
// );
// },
}, },
]; ];
return columns; return columns;
@@ -428,12 +497,13 @@ export default {
onSelectChange, onSelectChange,
showEntryScore, showEntryScore,
tableDataFunc, tableDataFunc,
getTableData,
}; };
}, },
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
.me { .me {
.ant-modal-body { .ant-modal-body {
padding: 0px; padding: 0px;
@@ -678,7 +748,14 @@ export default {
background: #f6f9fd; background: #f6f9fd;
} }
.opa { .opa {
background-color: #bfa; background-color: rgba(255, 255, 255, 0);
.ant-checkbox + span {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
line-height: 22px;
margin-top: 5px;
}
} }
} }
// .tab { // .tab {
@@ -735,4 +812,4 @@ export default {
} }
} }
} }
</style> </style>

View File

@@ -33,7 +33,7 @@
<!-- 导入学员上传 --> <!-- 导入学员上传 -->
<!-- 导入学员上传有状态-正在上传 --> <!-- 导入学员上传有状态-正在上传 -->
<div class="alreadybox"> <div class="alreadybox">
<div class="alimg"></div> <div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div> <div class="upproject">京东方商业模型.xls</div>
<div class="uping">正在上传</div> <div class="uping">正在上传</div>
<div class="progress"> <div class="progress">
@@ -48,7 +48,7 @@
<div class="uploadstate">上传失败</div> <div class="uploadstate">上传失败</div>
<!-- 导入学员上传有状态-上传失败 --> <!-- 导入学员上传有状态-上传失败 -->
<div class="alreadybox"> <div class="alreadybox">
<div class="alimg"></div> <div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div> <div class="upproject">京东方商业模型.xls</div>
<div class="uping" style="color: #FF7474">上传失败</div> <div class="uping" style="color: #FF7474">上传失败</div>
<div class="progress"> <div class="progress">
@@ -64,7 +64,7 @@
<div class="uploadstate" style="margin-top: 74px">上传成功</div> <div class="uploadstate" style="margin-top: 74px">上传成功</div>
<!-- 导入学员上传有状态-上传成功 --> <!-- 导入学员上传有状态-上传成功 -->
<div class="alreadybox"> <div class="alreadybox">
<div class="alimg"></div> <div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div> <div class="upproject">京东方商业模型.xls</div>
<div class="uping" style="color: #35AE69">上传成功</div> <div class="uping" style="color: #35AE69">上传成功</div>
<div class="progress"> <div class="progress">
@@ -221,12 +221,12 @@ export default {
cursor: pointer; cursor: pointer;
} }
.alimg { .alimg {
width: 28px; width: 32px;
height: 32px; height: 34px;
position: absolute; position: absolute;
top: 66px; top: 66px;
left: 24px; left: 24px;
background: green; //background: green;
} }
.upproject { .upproject {
position: absolute; position: absolute;

View File

@@ -98,7 +98,7 @@
<div class="namee">受众名称</div> <div class="namee">受众名称</div>
<a-select <a-select
v-model:value="value" v-model:value="value"
style="width: 264px; border-radius: 8px" style="width: 264px;border-radius: 8px"
placeholder="请输入组织名称" placeholder="请输入组织名称"
:options="organizeList1" :options="organizeList1"
/> />
@@ -168,12 +168,30 @@
</div> </div>
</div> </div>
<div class="selecteds"> <div class="selecteds">
<div class="chose">李明</div> <div class="chose">
<div class="chose"></div> 李明
<div class="chose">李二明</div> <div class="ch"></div>
<div class="chose">李明</div> </div>
<div class="chose">李大明</div> <div class="chose">
<div class="chose"></div>
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -448,20 +466,17 @@ export default {
}; };
</script> </script>
<style scoped lang="scss" > <style lang="scss" >
.stuadd { .stuadd {
.ant-pagination-options { // .ant-drawer-content-wrapper {
margin-top: 10px !important; // // max-width: 1000px;
} // .ant-drawer-header {
.ant-drawer-content-wrapper { // display: none !important;
// max-width: 1000px; // }
.ant-drawer-header { // .ant-drawer-body {
display: none !important; // padding: 0;
} // }
.ant-drawer-body { // }
padding: 0;
}
}
.drawerMain { .drawerMain {
min-width: 600px; min-width: 600px;
margin: 0px 32px 0px 32px; margin: 0px 32px 0px 32px;
@@ -485,225 +500,281 @@ export default {
} }
} }
.main { .main {
display: flex; display: flex;
height: 80%; height: 80%;
.left { .left {
width: 65%; // overflow-y: auto;
height: 100%; width: 65%;
border-right: 1px solid rgba(233, 233, 233, 1); height: 100%;
.tabs { border-right: 1px solid rgba(233, 233, 233, 1);
margin-right: 33px; .tabs {
.tab1 { margin-right: 33px;
display: flex; .tab1 {
flex-wrap: wrap;
justify-content: space-between;
.nameinp {
display: flex;
align-items: center;
margin-top: 10px;
.namee {
color: rgba(0, 0, 0, 0.8500);
font-size: 14px;
}
}
.btns {
display: flex;
margin-top: 10px;
.btn1 {
width: 100px;
height: 40px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 14px;
background: #409EFF;
border-radius: 8px;
border: 1px solid #409EFF;
cursor: pointer;
.wz {
margin-left: 10px;
}
}
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #409EFF;
font-size: 14px;
background: #FFFFFF;
border-radius: 8px;
cursor: pointer;
border: 1px solid #409EFF;
.wz {
margin-left: 10px;
}
}
}
}
.line {
width: 100%;
height: 40px;
background-color: #e9f6fe;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
border: 1px solid #c3e6fc;
.inline {
width: 95%;
height: 100%;
display: flex;
justify-content: space-between;
// background-color: #bfa;
.left1 {
height: 100%;
display: flex;
align-items: center;
.img {
width: 14px;
height: 15px;
background-image: url(../../assets/images/leveladd/gan.png);
background-size: 100% 100%;
}
.text {
color: #999ba3;
}
.text2 {
color: #4ea6ff;
margin-left: 5px;
margin-right: 5px;
}
.text3 {
color: #999ba3;
margin-left: 20px;
}
}
.right1 {
font-size: 14px;
font-weight: 400;
color: #387df7;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
}
}
.tabb {
.ant-table-thead > tr > th {
background-color: rgba(240, 246, 252, 1);
color: rgba(0, 0, 0, 0.85);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f6fc;
color: rgba(0, 0, 0, 0.65);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: rgba(250, 250, 250, 1);
}
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// position: absolute;
// bottom: 20px;
}
}
.tab2 {
display: flex;
align-items: center;
.organize {
color: rgba(0, 0, 0, 0.8500);
font-size: 14px;
}
.ant-cascader {
width: 264px;
height: 40px;
border-radius: 8px;
.ant-select-selector{
height: 100%;
}
.ant-select-selection-search-input {
height: 40px;
}
}
}
}
}
.right {
width: 35%;
.onerow {
display: flex;
justify-content: space-between;
align-items: center;
.already {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 32px;
}
.clbox {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 104px;
height: 32px;
border-radius: 4px;
background: #409EFF;
.colose {
width: 16px;
height: 16px;
border-radius: 8px;
background: #FFFFFF;
position: relative;
}
.allclear {
color: rgba(255, 255, 255, 1);
font-size: 14px;
}
}
}
.selecteds {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 32px; justify-content: space-between;
.chose { .nameinp {
width: 64px;
height: 24px;
margin-top: 25px;
margin-right: 25px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 10px;
.namee {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
}
.ant-select {
height: 40px;
}
.ant-select-selector {
height: 100%;
border-radius: 8px;
}
.ant-select-selection-search-input {
height: 40px;
}
}
.btns {
display: flex;
margin-top: 10px;
.btn1 {
width: 100px;
height: 40px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
background: #409eff;
border-radius: 8px;
border: 1px solid #409eff;
cursor: pointer;
.wz {
margin-left: 10px;
}
}
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #409eff;
font-size: 14px;
background: #ffffff;
border-radius: 8px;
cursor: pointer;
border: 1px solid #409eff;
.wz {
margin-left: 10px;
}
}
}
}
.line {
width: 100%;
height: 40px;
background-color: #e9f6fe;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
border: 1px solid #c3e6fc;
.inline {
width: 95%;
height: 100%;
display: flex;
justify-content: space-between;
// background-color: #bfa;
.left1 {
height: 100%;
display: flex;
align-items: center;
.img {
width: 14px;
height: 15px;
background-image: url(../../assets/images/leveladd/gan.png);
background-size: 100% 100%;
}
.text {
color: #999ba3;
}
.text2 {
color: #4ea6ff;
margin-left: 5px;
margin-right: 5px;
}
.text3 {
color: #999ba3;
margin-left: 20px;
}
}
.right1 {
font-size: 14px;
font-weight: 400;
color: #387df7;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
}
}
.tabb {
.ant-table-thead > tr > th {
background-color: rgba(240, 246, 252, 1);
color: rgba(0, 0, 0, 0.85);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f6fc;
color: rgba(0, 0, 0, 0.65);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: rgba(250, 250, 250, 1);
}
.ant-table-selection-column {
padding: 0 !important;
}
// table tr td.ant-table-selection-column {
// text-align: right;
// }
// .ant-checkbox-wrapper {
// align-items: center;
// margin-top: -2px;
// }
.pa {
// left: 0;
margin-top: 5px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center; justify-content: center;
border-radius: 2px; // position: absolute;
border: 1px solid rgba(56, 139, 225, 1); // bottom: 20px;
color: rgba(56, 139, 225, 1); .ant-pagination-prev {
font-size: 12px; margin-top: 10px;
}
.ant-pagination-next {
margin-top: 10px;
}
.ant-pagination-item {
margin-top: 10px;
}
.ant-pagination-options {
margin-top: 10px;
}
}
}
.tab2 {
display: flex;
align-items: center;
margin-top: 10px;
.organize {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
}
.ant-select {
border-radius: 8px !important;
}
.ant-cascader {
width: 264px;
height: 40px;
border-radius: 8px !important;
.ant-select-selector {
height: 100%;
border-radius: 8px;
}
.ant-select-selection-search-input {
height: 40px;
}
} }
} }
} }
}
.right {
width: 35%;
.onerow {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 40px;
flex-wrap: wrap;
.already {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 32px;
white-space: nowrap;
// margin-bottom: 20px;
}
.clbox {
margin-left: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 104px;
height: 32px;
border-radius: 4px;
background: #409eff;
.colose {
width: 18px;
height: 18px;
// border-radius: 8px;
// background: #ffffff;
// position: relative;
background-image: url(../../assets/images/basicinfo/ch.png);
background-size: 100%;
margin-right: 4px;
}
.allclear {
color: rgba(255, 255, 255, 1);
font-size: 14px;
}
}
}
.selecteds {
display: flex;
flex-wrap: wrap;
margin-left: 32px;
.chose {
width: 64px;
height: 24px;
margin-top: 25px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
.ch {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
cursor: pointer;
}
}
}
}
} }
.btnn { .btnn {
height: 72px; height: 72px;

View File

@@ -18,35 +18,34 @@
<div class="main"> <div class="main">
<div class="groupl">小组</div> <div class="groupl">小组</div>
<div> <div>
<div class="groupin"> <div class="groupin">
<a-input <a-input
v-model:value="value" v-model:value="value"
placeholder="好好学习小组" placeholder="好好学习小组"
style="border-radius: 8px; height: 40px" style="border-radius: 8px; height: 40px"
/> />
<div class="delete">删除</div> <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="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>
<div class="addgroup" @click="showAddGroup"> <div class="addgroup" @click="showAddGroup">
<img src="../../assets/images/courseManage/add0.png"/> <img src="../../assets/images/courseManage/add0.png" />
<span class="grot">创建小组</span> <span class="grot">创建小组</span>
</div> </div>
<div class="zhu">随机分组不对小组长生效</div> <div class="zhu">随机分组不对小组长生效</div>
@@ -103,7 +102,7 @@ export default {
}; };
</script> </script>
<style scoped lang="scss" > <style scoped lang="scss">
.subset { .subset {
.ant-drawer-content-wrapper { .ant-drawer-content-wrapper {
// max-width: 1000px; // max-width: 1000px;
@@ -140,46 +139,45 @@ export default {
display: flex; display: flex;
.groupin { .groupin {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 32px; margin-top: 32px;
.ant-input { .ant-input {
border-radius: 5px; border-radius: 5px;
// height: 120%; // height: 120%;
width: 384px; width: 384px;
height: 40px; height: 40px;
} }
.delete { .delete {
color: rgba(56, 125, 247, 1); color: rgba(56, 125, 247, 1);
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
} }
} }
.groupl { .groupl {
color: rgba(0, 0, 0, 0.8500); color: rgba(0, 0, 0, 0.85);
font-size: 16px; font-size: 16px;
margin-top: 36px; margin-top: 36px;
} }
} }
.addgroup { .addgroup {
width: 130px; width: 130px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
//margin-right: 16px; //margin-right: 16px;
margin-top: 32px; margin-top: 32px;
border: 1px solid #409eff; border: 1px solid #409eff;
border-radius: 8px; border-radius: 8px;
background: #409eff; background: #409eff;
cursor: pointer; cursor: pointer;
.grot { .grot {
color: #ffffff; color: #ffffff;
margin-left: 5px; margin-left: 5px;
font-size: 14px; font-size: 14px;
}
} }
}
.zhu { .zhu {
margin-top: 24px; margin-top: 24px;
color: rgba(153, 153, 153, 1); color: rgba(153, 153, 153, 1);
@@ -217,4 +215,4 @@ export default {
} }
} }
} }
</style> </style>

View File

@@ -1213,7 +1213,7 @@
<!-- 学员-创建小组弹窗 --> <!-- 学员-创建小组弹窗 -->
</div> </div>
</template> </template>
<script> <script>
import { reactive, toRefs } from "vue"; import { reactive, toRefs } from "vue";
import TimeManage from "../../components/drawers/TimeManage"; import TimeManage from "../../components/drawers/TimeManage";
import FaceManage from "../../components/drawers/FaceManage"; import FaceManage from "../../components/drawers/FaceManage";
@@ -3122,4 +3122,3 @@ export default {
} }
} }
</style> </style>