mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-13 04:46:46 +08:00
feat：完成关卡的创建关卡弹窗 完成查看页面 修改学员管理下拉框
This commit is contained in:
songwc
@@ -5,7 +5,7 @@
|
||||
<div class="tit" style="margin-left: 18px">关卡</div>
|
||||
<div class="btn btn3" style="margin-left: 19px">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">添加关卡</div>
|
||||
<div class="btnText" @click="showModal">添加关卡</div>
|
||||
</div>
|
||||
<div class="maincon" style="background-color: #fff">
|
||||
<div class="item" v-for="item in level" :key="item.id">
|
||||
@@ -24,6 +24,52 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="modal"
|
||||
centered="true"
|
||||
:footer="null"
|
||||
:closable="clos"
|
||||
>
|
||||
<div class="header">
|
||||
<div class="headmain">
|
||||
<div class="add">添加关卡</div>
|
||||
<div class="img" style="cursor: pointer" @click="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="inma">
|
||||
<div class="name">
|
||||
<div class="fir">关卡名称：</div>
|
||||
<div class="input">
|
||||
<a-input
|
||||
style="width: 100%"
|
||||
v-model:value="value1"
|
||||
:maxlength="20"
|
||||
placeholder="请输入关卡名称"
|
||||
/>
|
||||
</div>
|
||||
<div class="co">{{ value1.length }}/20</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="fir">关卡说明：</div>
|
||||
<div class="input">
|
||||
<a-textarea
|
||||
style="width: 100%"
|
||||
v-model:value="value2"
|
||||
:maxlength="100"
|
||||
placeholder="请输入关卡说明"
|
||||
:rows="5"
|
||||
/>
|
||||
</div>
|
||||
<div class="co1">{{ value2.length }}/100</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button class="btn1">取消</button>
|
||||
<button class="btn2">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="right">
|
||||
<div class="addhead">
|
||||
<div class="filt">
|
||||
@@ -587,6 +633,10 @@ export default {
|
||||
tableDataTotal: 100,
|
||||
pageSize: 10,
|
||||
visible: false,
|
||||
modal: false,
|
||||
clos: false,
|
||||
value1: "",
|
||||
value2: "",
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
const selectProjectName = (value, index) => {
|
||||
@@ -596,7 +646,13 @@ export default {
|
||||
console.log("value", value, index);
|
||||
};
|
||||
const showDrawer = () => {
|
||||
state.visible = !state.visible;
|
||||
state.visible = true;
|
||||
};
|
||||
const showModal = () => {
|
||||
state.modal = true;
|
||||
};
|
||||
const closeModal = () => {
|
||||
state.modal = false;
|
||||
};
|
||||
const afterVisibleChange = (bool) => {
|
||||
console.log("visible", bool);
|
||||
@@ -746,6 +802,8 @@ export default {
|
||||
selectProjectName2,
|
||||
tableDataFunc,
|
||||
showDrawer,
|
||||
showModal,
|
||||
closeModal,
|
||||
afterVisibleChange,
|
||||
drawercolumns,
|
||||
onSelectChange,
|
||||
@@ -761,7 +819,141 @@ export default {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.ant-modal {
|
||||
width: 624px !important;
|
||||
height: 388px !important;
|
||||
.ant-modal-content {
|
||||
width: 624px !important;
|
||||
height: 388px !important;
|
||||
border-radius: 4px !important;
|
||||
.ant-modal-body {
|
||||
// background-color: blue;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.header {
|
||||
width: 624px;
|
||||
height: 68px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(78, 166, 255, 0.2) 0%,
|
||||
rgba(78, 166, 255, 0) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.headmain {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.add {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../assets/images/basicinfo/close22.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
height: calc(100% - 68px);
|
||||
// background-color: #bfa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.inma {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
// background-color: lightblue;
|
||||
.name {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
.fir {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
white-space: nowrap;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.input {
|
||||
width: 100%;
|
||||
.ant-input {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #c7cbd2;
|
||||
&::placeholder {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
.ant-textarea {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #c7cbd2;
|
||||
&::placeholder {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.co {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 4px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #c7cbd2;
|
||||
}
|
||||
.co1 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 8px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #c7cbd2;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #387df7;
|
||||
font-size: 14px;
|
||||
color: #387df7;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.btn2 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: #388be1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawerStyle {
|
||||
.ant-drawer-content-wrapper {
|
||||
// max-width: 1000px;
|
||||
|
||||
Reference in New Issue
Block a user