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

style:获取规则样式修改

Browse Source
This commit is contained in:
zhangyc
2022-10-25 15:32:24 +08:00
parent c84a615a88
commit 6e6e753ba4
1 changed files with 84 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/drawers/ProjectScore.vue
View File

@@ -129,26 +129,43 @@
<a-tab-pane key="3" tab="获取规则">
<div class="projectscore">
<div class="pjc_body">
<div class="pjcb_header">
<span>规则</span>
<div class="btns">
<div class="edit_btn1">
<div class="btnText">取消</div>
</div>
<div class="edit_btn2">
<div class="btnText">确定</div>
</div>
<div class="groupright">
<div class="spandiv"><span class="spantext">规则</span></div>
<div v-if="edit" class="btns">
<div class="btn1" @click="edit=!edit">
<img src="../../assets/images/projectadd/edit1.png" />
<span class="btn1text">编辑</span>
</div>
</div>
<div v-else class="btns">
<div class="btn1" @click="edit=!edit">
<span class="btn1text">保存</span>
</div>
</div>
</div>
<div class="pjcb_content">
<div v-if="edit" class="pjcb_content">
<div class="content content1">
<span>当前设计下，学员可以获得 10 积分</span>
<span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
</div>
<div class="content content2">
<span>完成【必修/选修】获得 5 积分</span>
<span>完成【必修/选修】获得 </span><span class="scoretext">{{score1}} </span><span>积分</span>
</div>
<div class="content content3">
<span>优秀学员可获得 5 积分</span>
<span>优秀学员可获得 </span><span class="scoretext">{{score2}}</span><span>积分</span>
</div>
</div>
<div v-else class="pjcb_content">
<div class="content content1">
<span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
</div>
<div class="content content2">
<span>完成【必修/选修】获得 </span><span ><a-input v-model:value="score1" :bordered="false" @change="getScore"/> </span><span>积分</span>
</div>
<div class="content content3">
<span>优秀学员可获得 </span><span ><a-input v-model:value="score2" :bordered="false" /></span><span>积分</span>
</div>
</div>
</div>
@@ -326,6 +343,10 @@ export default {
tableDataTotal: 30,
stuValue: false,
Svisible:false,
score1:5,
score2:5,
edit:true,
});
@@ -351,12 +372,18 @@ export default {
state.tabledataStu = datas;
};
getTableData();
return {
...toRefs(state),
};
},
computed: {
// 计算属性的 getter
scoresum: function () {
return Number(this.score1)+Number(this.score2);
}
}
};
</script>
<style lang="scss">
@@ -572,60 +599,70 @@ export default {
.pjc_body {
margin-left: 34px;
margin-right: 34px;
.pjcb_header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 24px auto;
.btns {
.spandiv{
position: relative;
/* height: 100%; */
width: 40px;
.spantext{
position: absolute;
left: 0;
bottom: 0px;
}
}
.groupright {
display: flex;
.edit_btn1 {
justify-content: space-between;
.btn1 {
width: 100px;
// padding: 0px 26px 0px 26px;
height: 38px;
margin-left: 15px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 16px;
border: 1px solid #409eff;
border-radius: 8px;
background: #409eff;
cursor: pointer;
background-color: rgb(255, 255, 255);
.btnText {
font-size: 14px;
font-weight: 400;
color: rgb(64, 158, 255);
line-height: 36px;
.btn1text {
color: #ffffff;
margin-left: 5px;
font-size: 14px;
}
}
.edit_btn2 {
.btn2 {
width: 100px;
// padding: 0px 26px 0px 26px;
height: 38px;
margin-left: 15px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 32px;
border: 1px solid #409eff;
border-radius: 8px;
cursor: pointer;
background-color: rgb(64, 158, 255);
.btnText {
font-size: 14px;
font-weight: 400;
color: rgb(255, 255, 255);
line-height: 36px;
background: #ffffff;
.btn2text {
color: #409eff;
margin-left: 5px;
font-size: 14px;
}
}
}
}
.pjcb_content {
border: 1px solid #409eff;
padding: 32px;
margin-top: 10px;
.ant-input{
width: 46px;
font-size: 16px;
color: #409eff;
}
.scoretext{
color: #409eff;
font-size: 16px;
margin-left: 3px;
margin-right: 4px;
}
.pjcb_content :last-child {
margin-bottom: 0px;
}