mirror of
https://github.com/cuiocean/ZY-Player.git
synced 2026-05-05 20:44:52 +08:00
定义listpage样式
This commit is contained in:
haiyangcui
@@ -124,7 +124,7 @@
|
||||
flex: 1;
|
||||
border-bottom: 1px solid;
|
||||
overflow: auto;
|
||||
el-table__row>td{
|
||||
.el-table__row td{
|
||||
border: none;
|
||||
}
|
||||
.el-table::before{
|
||||
@@ -195,6 +195,37 @@
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
// Page of list using el-table
|
||||
.listpage{
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
right: 20px;
|
||||
top: 40px;
|
||||
bottom: 20px;
|
||||
width: calc(100% - 100px);
|
||||
height: calc(100% - 60px);
|
||||
border-radius: 5px;
|
||||
.listpage-content{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.listpage-header{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.listpage-body{
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
.el-table__body td,.el-table__body th{
|
||||
height: 50px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// loading
|
||||
.zy-loading{
|
||||
width: 100%;
|
||||
|
||||
@@ -373,4 +373,42 @@
|
||||
background-color: var(--d-bgc-1);
|
||||
box-shadow: var(--d-bsc);
|
||||
}
|
||||
// Page of list using el-table
|
||||
.listpage{
|
||||
color: var(--d-fc-2);
|
||||
.listpage-content{
|
||||
.listpage-header{
|
||||
border-bottom-color: var(--d-c-3);
|
||||
.btn{
|
||||
&:hover{
|
||||
color: var(--d-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listpage-body{
|
||||
.el-table::before{
|
||||
height: 0px;
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table{
|
||||
color: var(--d-fc-1);
|
||||
background-color: var(--d-bgc-1);
|
||||
}
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--d-fc-1);
|
||||
background-color: var(--d-bgc-1);
|
||||
border-bottom-color: var(--d-c-2);
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td{
|
||||
background-color: var(--d-bgc-2);
|
||||
}
|
||||
.el-button{
|
||||
color: var(--d-fc-1);
|
||||
&:hover{
|
||||
color: var(--d-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -269,7 +269,7 @@
|
||||
color: var(--g-fc-3);
|
||||
}
|
||||
&:hover{
|
||||
background-color: var(--d-c-3);
|
||||
background-color: var(--g-c-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -370,4 +370,42 @@
|
||||
background-color: var(--g-bgc-1);
|
||||
box-shadow: var(--g-bsc);
|
||||
}
|
||||
// Page of list using el-table
|
||||
.listpage{
|
||||
color: var(--g-fc-2);
|
||||
.listpage-content{
|
||||
.listpage-header{
|
||||
border-bottom-color: var(--g-c-3);
|
||||
.btn{
|
||||
&:hover{
|
||||
color: var(--g-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listpage-body{
|
||||
.el-table::before{
|
||||
height: 0px;
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table{
|
||||
color: var(--g-fc-1);
|
||||
background-color: var(--g-bgc-1);
|
||||
}
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--g-fc-1);
|
||||
background-color: var(--g-bgc-1);
|
||||
border-bottom-color: var(--g-c-2);
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td{
|
||||
background-color: var(--g-bgc-2);
|
||||
}
|
||||
.el-button{
|
||||
color: var(--g-fc-1);
|
||||
&:hover{
|
||||
color: var(--g-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,6 @@
|
||||
color: var(--l-fc-1);
|
||||
background-color: var(--l-bgc-1);
|
||||
border-bottom-color: var(--l-c-2);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover{
|
||||
box-shadow: var(--l-bsc-hover);
|
||||
}
|
||||
@@ -269,7 +268,7 @@
|
||||
color: var(--l-fc-3);
|
||||
}
|
||||
&:hover{
|
||||
background-color: var(--d-c-3);
|
||||
background-color: var(--l-c-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -370,4 +369,42 @@
|
||||
background-color: var(--l-bgc-1);
|
||||
box-shadow: var(--l-bsc);
|
||||
}
|
||||
// Page of list using el-table
|
||||
.listpage{
|
||||
color: var(--l-fc-2);
|
||||
.listpage-content{
|
||||
.listpage-header{
|
||||
border-bottom-color: var(--l-c-3);
|
||||
.btn{
|
||||
&:hover{
|
||||
color: var(--l-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listpage-body{
|
||||
.el-table::before{
|
||||
height: 0px;
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table{
|
||||
color: var(--l-fc-1);
|
||||
background-color: var(--l-bgc-1);
|
||||
}
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--l-fc-1);
|
||||
background-color: var(--l-bgc-1);
|
||||
border-bottom-color: var(--l-c-2);
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td{
|
||||
background-color: var(--l-bgc-2);
|
||||
}
|
||||
.el-button{
|
||||
color: var(--l-fc-1);
|
||||
&:hover{
|
||||
color: var(--l-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +76,6 @@
|
||||
color: var(--p-fc-1);
|
||||
background-color:var(--p-bgc-1);
|
||||
border-bottom-color: var(--p-c-2);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
}
|
||||
@@ -268,7 +267,7 @@
|
||||
color: var(--p-fc-3);
|
||||
}
|
||||
&:hover{
|
||||
background-color: var(--d-c-3);
|
||||
background-color: var(--p-c-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -369,4 +368,42 @@
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
}
|
||||
// Page of list using el-table
|
||||
.listpage{
|
||||
color: var(--p-fc-2);
|
||||
.listpage-content{
|
||||
.listpage-header{
|
||||
border-bottom-color: var(--p-c-3);
|
||||
.btn{
|
||||
&:hover{
|
||||
color: var(--p-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listpage-body{
|
||||
.el-table::before{
|
||||
height: 0px;
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table{
|
||||
color: var(--p-fc-1);
|
||||
background-color: var(--p-bgc-1);
|
||||
}
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--p-fc-1);
|
||||
background-color: var(--p-bgc-1);
|
||||
border-bottom-color: var(--p-c-2);
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td{
|
||||
background-color: var(--p-bgc-2);
|
||||
}
|
||||
.el-button{
|
||||
color: var(--p-fc-1);
|
||||
&:hover{
|
||||
color: var(--p-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<div class="detail" id="history">
|
||||
<div class="detail-content">
|
||||
<div class="detail-body zy-scroll">
|
||||
<div class="zy-table" id="history-table">
|
||||
<div class="tHeader">
|
||||
<div class="listpage" id="history">
|
||||
<div class="listpage-content">
|
||||
<div class="listpage-header">
|
||||
<span class="btn"></span>
|
||||
<span class="btn" @click="clearAllHistory">清空</span>
|
||||
</div>
|
||||
<div class="tBody zy-scroll">
|
||||
<el-table
|
||||
</div>
|
||||
<div class="listpage-body">
|
||||
<el-table
|
||||
:data="history"
|
||||
height="100%"
|
||||
row-key="id"
|
||||
@@ -47,9 +45,7 @@
|
||||
<el-button @click.stop="removeHistoryItem(scope.row)" type="text">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -235,36 +231,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detail{
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
right: 20px;
|
||||
top: 40px;
|
||||
bottom: 0;
|
||||
width: calc(100% - 100px);
|
||||
height: calc(100% - 40px);
|
||||
border-radius: 5px;
|
||||
.detail-content{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.detail-header{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.detail-title{
|
||||
font-size: 16px;
|
||||
}
|
||||
.detail-close{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.detail-body{
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user