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

style:增加滚动条样式

Browse Source
This commit is contained in:
李晓鸽
2022-10-25 11:36:37 +08:00
parent 7ed5222366 7b605d4261
commit 2245d2cf4c
25 changed files with 5413 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

515
src/views/projectcenter/TemplateLibrary.vue
View File

@@ -1,56 +1,56 @@
<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 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="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 class="inpbox1">
<span>创建时间：</span>
<a-date-picker
v-model="selectTime"
type="date"
placeholder="创建时间"
style="width: 270px; margin-right: 14px"
/>
</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 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>
@@ -59,10 +59,9 @@
import { reactive, defineComponent, toRefs } from "vue";
const columns1 = [
{
title: "模版名称",
width: '20%',
width: "20%",
dataIndex: "name",
key: "name",
ellipsis: true,
@@ -70,7 +69,7 @@ const columns1 = [
},
{
title: "状态",
width: '15%',
width: "15%",
dataIndex: "status",
key: "status",
align: "center",
@@ -78,21 +77,21 @@ const columns1 = [
{
title: "创建人",
width: '18%',
width: "18%",
dataIndex: "creator",
key: "creator",
align: "center",
},
{
title: "最近学习时间",
width: '25%',
width: "25%",
dataIndex: "stutime",
key: "stutime",
align: "center",
},
{
title: "操作",
width: '22%',
width: "22%",
className: "h",
dataIndex: "operation",
key: "operation",
@@ -101,216 +100,218 @@ const columns1 = [
];
export default defineComponent({
name: "TemplateLibrary",
setup() {
const state = reactive({
tableData1: [
{
key: "1",
name: "管理者进阶-腾飞班Z1",
status: "已发布",
creator: "李部长",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
{
key: "2",
name: "管理者进阶-腾飞班Z2",
status: "已发布",
creator: "毛继禹",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
{
key: "3",
name: "管理者进阶-腾飞班Z3",
status: "已发布",
creator: "毛继禹",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
{
key: "4",
name: "管理者进阶-腾飞班Z4",
status: "未发布",
creator: "毛继禹",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
],
});
const getTableDate1 = () => {
let data = state.tableData1;
data.map((value) => {
{
//单层项目
value.operation = (
<div class="operation" style="justify-content: flex-end;">
<div class="nSelect">
{value.status === "已发布" ? (
<div class="nselect">
<div class="ops2">
<router-link to="/libraryadd">
<div class="jc">查看</div>
</router-link>
</div>
<div class="ops3">
<div class="jc">撤回</div>
</div>
</div>
) : (
<div></div>
)}
{value.status === "未发布" ? (
<div class="nselect">
<div class="ops1">
<div class="jc">发布 |</div>
</div>
<div class="ops2">
<router-link to="/libraryadd">
<div class="jc">查看</div>
</router-link>
</div>
<div class="ops3">
<div class="jc">删除</div>
</div>
</div>
) : (
<div></div>
)}
name: "TemplateLibrary",
setup() {
const state = reactive({
tableData1: [
{
key: "1",
name: "管理者进阶-腾飞班Z1",
status: "已发布",
creator: "李部长",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
{
key: "2",
name: "管理者进阶-腾飞班Z2",
status: "已发布",
creator: "毛继禹",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
{
key: "3",
name: "管理者进阶-腾飞班Z3",
status: "已发布",
creator: "毛继禹",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
{
key: "4",
name: "管理者进阶-腾飞班Z4",
status: "未发布",
creator: "毛继禹",
stutime: "2022-10-31 23:12:00",
operation: "operation",
},
],
});
const getTableDate1 = () => {
let data = state.tableData1;
data.map((value) => {
{
//单层项目
value.operation = (
<div class="operation" style="justify-content: center;">
<div class="nSelect">
{value.status === "已发布" ? (
<div class="nselect">
<div class="ops1">
<div class="jc"></div>
</div>
<div class="ops2">
<router-link to="/libraryadd">
<div class="jc">查看</div>
</router-link>
</div>
);
}
});
state.tableData = data;
};
getTableDate1();
return {
...toRefs(state),
columns1,
}
}
})
<div class="ops3">
<div class="jc">撤回</div>
</div>
</div>
) : (
<div></div>
)}
{value.status === "未发布" ? (
<div class="nselect">
<div class="ops1">
<div class="jc">发布</div>
</div>
<div class="ops2">
<router-link to="/libraryadd">
<div class="jc">查看</div>
</router-link>
</div>
<div class="ops3">
<div class="jc">删除</div>
</div>
</div>
) : (
<div></div>
)}
</div>
</div>
);
}
});
state.tableData = data;
};
getTableDate1();
return {
...toRefs(state),
columns1,
};
},
});
</script>
<style lang="scss">
.templatelibrary{
width: 100%;
.tmpl{
width:100%;
.tmpl_header{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 32px;
margin-left: 32px;
margin-right: 32px;
.tmplh_inp{
.inpbox{
display: flex;
margin-top: 32px;
.inpbox1{
display:flex;
justify-content: center;
align-items: center;
margin-right: 24px;
span{
white-space: nowrap;
}
}
}
}
.tmplh_btn{
display: flex;
margin-left: 38px;
margin-top: 32px;
.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{
.operation {
display: flex;
justify-content: center;
align-items: center;
color: #4ea6ff;
.nselect {
justify-content: center;
align-items: center;
display: flex;
.jc {
margin-left: 20px;
white-space: nowrap;
cursor: pointer;
}
}
}
}
.templatelibrary {
width: 100%;
.tmpl {
width: 100%;
.tmpl_header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 32px;
margin-left: 32px;
margin-right: 32px;
.tmplh_inp {
.inpbox {
display: flex;
margin-top: 32px;
.inpbox1 {
display: flex;
justify-content: center;
align-items: center;
margin-right: 24px;
span {
white-space: nowrap;
}
}
}
}
.tmplh_btn {
display: flex;
margin-left: 38px;
margin-top: 32px;
.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;
}
}
}
}
</style>
.tmpl_body {
.tmpl_tabbox {
.operation {
display: flex;
justify-content: center;
align-items: center;
color: #4ea6ff;
.nselect {
justify-content: center;
align-items: center;
display: flex;
.jc {
margin-left: 20px;
width: 28px;
white-space: nowrap;
cursor: pointer;
}
}
}
}
}
}
}
</style>