feat:补齐确定面授课和全部弹窗样式

This commit is contained in:
dongwug
2022-10-14 18:35:48 +08:00
parent f0377fccfc
commit 60ea2d833e
3 changed files with 296 additions and 310 deletions

View File

@@ -1 +1,166 @@
<!-- 模板库页面 -->
<template>
<div class="templatelibrary">
<div class="tmpl">
<div class="tmpl_header">
<div class="tmplh_inp">
<div class="inpbox">
<div class="inpbox1">
<span>模版名称</span>
<a-input
v-model:value="value1"
style="
width: 270px;
height: 40px;
border-radius: 8px;
margin-right: 14px;
"
placeholder="请输入项目名称"
/>
</div>
<div class="inpbox1">
<span>创建时间</span>
<a-date-picker
v-model="selectTime"
type="date"
placeholder="创建时间"
style="width: 270px; margin-right: 14px"
/>
</div>
</div>
</div>
<div class="tmplh_btn">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText btnText1">搜索</div>
</div>
<div class="btn btn2">
<div class="search"></div>
<div class="btnText btnText2">重置</div>
</div>
</div>
</div>
<div class="tmpl_body">
<div class="tmpl_tabbox">
<!-- <a-table
:columns="columns1"
:data-source="tableData1"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@expand="expandTable"
:pagination="false"
/> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "TemplateLibrary",
// import { reactive, defineComponent, ref } from "vue";
// export default defineComponent({
// setup() {
// const state = reactive({
// })
// }
// })
}
</script>
<style lang="scss">
.templatelibrary{
width: 100%;
.tmpl{
width:100%;
.tmpl_header{
display:flex;
justify-content: space-between;
margin: 32px;
.tmplh_inp{
.inpbox{
display: flex;
.inpbox1{
display:flex;
justify-content: center;
align-items: center;
margin-right: 24px;
}
}
}
.tmplh_btn{
display: flex;
margin-left: 38px;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
.btnText1{
color: rgb(255, 255, 255);
}
.btnText2{
color: rgba(64, 158, 255, 1);
}
}
.btn1 {
background: #409EFF;
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
background: #FFFFFF;
border: 1px solid #388BE1;
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn1:hover {
background: rgb(255, 255, 255);
border: 1px solid #388BE1;
.search {
background-image: url("../../assets/images/courseManage/search1.png");
}
.btnText {
color: rgba(64, 158, 255, 1);
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.tmpl_body{
.tmpl_tabbox{
}
}
}
}
</style>