😛 部分组件样式

This commit is contained in:
hunlongyu
2020-04-16 13:41:03 +08:00
parent 152b654d41
commit 8e380b6463
8 changed files with 385 additions and 51 deletions

View File

@@ -12,3 +12,206 @@
fill: none;
}
}
// select
.zy-select{
position: relative;
display: inline-block;
width: 200px;
height: 30px;
cursor: pointer;
border-radius: 3px;
user-select: none;
vertical-align: middle;
.vs-placeholder{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
&::after{
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
}
.vs-options{
z-index: 2;
width: 100%;
overflow-y: auto;
min-height: 0;
ul{
padding: 0;
margin: 0;
list-style: none;
li{
width: 100%;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 25px;
}
}
}
}
// table
.zy-table{
display: flex;
flex-direction: column;
height: 100%;
font-size: 15px;
.tHead{
height: 50px;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid;
padding: 0 5px 0 0;
font-weight: 600;
span{
display: flex;
width: 180px;
font-size: 16px;
&.name{
flex: 1;
padding-left: 15px;
}
&.type{
width: 120px;
}
&.from{
width: 120px;
}
&.operate{
width: 120px;
}
}
}
.tBody{
flex: 1;
overflow-y: scroll;
border-bottom: 1px solid;
ul{
list-style: none;
padding: 0;
margin: 0;
li{
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
height: 50px;
border-bottom: 1px solid;
cursor: pointer;
span{
display: flex;
width: 180px;
font-size: 13px;
height: 50px;
line-height: 50px;
&.name{
flex: 1;
padding-left: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.type{
width: 120px;
}
&.from{
width: 120px;
}
&.operate{
width: 120px;
}
}
}
}
}
.tFooter{
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding-right: 10px;
.tFooter-span{
padding-left: 10px;
font-size: 12px;
}
}
}
// scroll
.zy-scroll{
&::-webkit-scrollbar{
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
position: absolute;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
position: absolute;
}
}
// loading
.zy-loading{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.loader {
font-size: 8px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: load4 1.3s infinite linear;
transform: translateZ(0);
}
@keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
}

View File

@@ -1,13 +1,19 @@
:root{
// light
--l-c: #823aa0;
--l-fontc: #808695;
--l-bgc: #ffffff;
--l-bgc-two: #f2f6f9;
--l-c-hover: #823aa022;
--l-c-active: #823aa099;
--l-bdc: #823aa033;
--l-bsc: #8e8da2;
--l-c-0: #823aa0;
--l-c-1: #823aa011;
--l-c-2: #823aa022;
--l-c-3: #823aa033;
--l-c-8: #823aa088;
--l-c-9: #823aa099;
--l-fc-1: #808695;
--l-fc-2: #332f5c;
--l-fc-3: #332f5c88;
--l-bgc-1: #ffffff;
--l-bgc-2: #f2f6f9;
--l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
--l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
--l-bsc-scroll: inset 0 0 5px #823aa005;
}
@import './theme/light.scss';

View File

@@ -1,23 +1,114 @@
.theme-light{
background-color: var(--l-bgc);
background-color: var(--l-bgc-1);
.el-pagination{
color: var(--l-fc-1);
.el-pagination__total, .el-pagination__jump, .el-input__inner{
color: var(--l-fc-1);
}
.el-pager{
.number:hover{
color: var(--l-c-8);
}
.active{
color: var(--l-c-9);
}
}
.more, .btn-next, .btn-prev{
&:hover{
color: var(--l-c-8);
}
}
}
.zy-select{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
&:hover{
box-shadow: var(--l-bsc-hover);
}
.vs-options{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
ul{
li{
&:hover{
background-color: var(--l-c-1);
}
&.active{
background-color: var(--l-c-3);
}
}
}
}
}
.zy-table{
color: var(--l-fc-2);
.tHead{
background-color: var(--l-bgc-1);
border-bottom-color: var(--l-c-3);
}
.tBody{
border-bottom-color: var(--l-c-3);
ul{
li{
border-bottom-color: var(--l-c-2);
&:hover{
animation: tableHoverAni 0.2s ease both;
@keyframes tableHoverAni {
to{
box-shadow: var(--l-bsc-hover);
}
}
}
span{
&.btn:hover{
color: var(--l-fc-3)
}
}
}
}
}
.tFooter{
.tFooter-span{
color: var(--l-fc-1);
}
}
}
.zy-scroll{
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--l-bsc-scroll);
background: var(--l-c-3);
}
&::-webkit-scrollbar-track {
box-shadow: var(--l-bsc-scroll);
background: var(--bgc);
}
}
}
.zy-loading{
.loader{
color: var(--l-c-3);
}
}
.home{
.body{
background-color: var(--l-bgc-two);
background-color: var(--l-bgc-2);
}
}
.aside{
.zy-svg{
svg{
stroke: var(--l-c);
stroke: var(--l-c-0);
}
&:hover{
background-color: var(--l-c-hover);
background-color: var(--l-c-2);
}
&.active{
svg{
stroke: var(--l-c);
stroke: var(--l-c-0);
stroke-width: 2;
fill: var(--l-c-hover);
fill: var(--l-c-2);
}
}
}
@@ -32,4 +123,33 @@
}
}
}
.film{
.top{
.search{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
&:hover{
box-shadow: var(--l-bsc-hover);
}
svg{
stroke: #823aa099;
stroke-width: 1;
fill: none;
}
.search-box{
background-color: none;
}
&.active{
box-shadow: var(--l-bsc-hover);
svg{
stroke-width: 1.5;
fill: var(--l-c-2);
}
}
input{
color: var(--l-fc-1);
}
}
}
}
}

View File

@@ -16,19 +16,19 @@
</span>
<span :class="[view === 'Play' ? 'active ': ''] + 'play zy-svg'" @click="changeView('Play')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
<title id="playIconTitle">播放</title>
<title id="playIconTitle">{{$t('play')}}</title>
<path d="M20 12L5 21V3z"></path>
</svg>
</span>
<span :class="[view === 'Star' ? 'active ': ''] + 'star zy-svg'" @click="changeView('Star')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
<title id="favouriteIconTitle">收藏</title>
<title id="favouriteIconTitle">{{$t('star')}}</title>
<path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
</svg>
</span>
<span :class="[view === 'Setting' ? 'active ': ''] + 'setting zy-svg'" @click="changeView('Setting')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
<title id="settingsIconTitle">设置</title>
<title id="settingsIconTitle">{{$t('setting')}}</title>
<path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
<circle cx="12" cy="12" r="1"></circle>
</svg>

View File

@@ -2,7 +2,7 @@
<div class="film">
<div class="top" v-if="top">
<!-- site -->
<div class="vue-select" @mouseleave="show.site = false">
<div class="zy-select" @mouseleave="show.site = false">
<div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
<div class="vs-options" v-show="show.site">
<ul>
@@ -11,7 +11,7 @@
</div>
</div>
<!-- tags -->
<div class="vue-select" @mouseleave="show.tags = false" v-if="site.tags.length > 0">
<div class="zy-select" @mouseleave="show.tags = false" v-if="site.tags.length > 0">
<div class="vs-placeholder" @click="show.tags = true">{{site.tags[tag].title}}</div>
<div class="vs-options" v-show="show.tags">
<ul>
@@ -20,7 +20,7 @@
</div>
</div>
<!-- type -->
<div class="vue-select" @mouseleave="show.type = false" v-if="site.tags[tag].children.length > 0">
<div class="zy-select" @mouseleave="show.type = false" v-if="site.tags[tag].children.length > 0">
<div class="vs-placeholder" @click="show.type = true">{{site.tags[tag].children[type].title}}</div>
<div class="vs-options" v-show="show.type">
<ul>
@@ -30,37 +30,39 @@
</div>
<div :class="[inputFocus ? 'active ': ''] + 'search'" @mouseover="inputFocus = true" @mouseleave="inputFocus = false">
<div class="search-icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="searchIconTitle">
<title id="searchIconTitle">Search</title>
<path d="M14.4121122,14.4121122 L20,20"></path>
<circle cx="10" cy="10" r="6"></circle>
</svg>
<span class="zy-svg">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="searchIconTitle">
<title id="searchIconTitle">Search</title>
<path d="M14.4121122,14.4121122 L20,20"></path>
<circle cx="10" cy="10" r="6"></circle>
</svg>
</span>
</div>
<input type="text" class="search-box" v-model="keywords" @keypress.enter="searchEvent">
</div>
</div>
<div class="middle">
<div class="vue-table">
<div class="zy-table">
<div class="tHead">
<span class="name">影片名称</span>
<span class="type">类型</span>
<span class="time">时间</span>
<span class="operate">操作</span>
<span class="name">{{$t('videoName')}}</span>
<span class="type">{{$t('type')}}</span>
<span class="time">{{$t('time')}}</span>
<span class="operate">{{$t('operate')}}</span>
</div>
<div class="tBody">
<div class="tBody zy-scroll">
<ul v-show="!tb.loading">
<li v-for="(i, j) in tb.list" :key="j" @click="detailEvent(i)">
<span class="name">{{i.name}}</span>
<span class="type">{{i.type}}</span>
<span class="time">{{i.time}}</span>
<span class="operate">
<span class="btn" @click.stop="playEvent(i)">播放</span>
<span class="btn" @click.stop="starEvent(i)">收藏</span>
<span class="btn" @click.stop="shareEvent(i)">分享</span>
<span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
<span class="btn" @click.stop="starEvent(i)">{{$t('star')}}</span>
<span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
</span>
</li>
</ul>
<div class="tBody-mask" v-show="tb.loading">
<div class="tBody-mask zy-loading" v-show="tb.loading">
<div class="loader"></div>
</div>
</div>
@@ -288,19 +290,14 @@ export default {
width: 200px;
height: 30px;
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
border-radius: 15px;
box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
svg{
width: 20px;
height: 20px;
stroke: #823aa099;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.search-icon{
width: 40px;
@@ -314,7 +311,6 @@ export default {
height: 30px;
border-radius: 20px;
border: none;
background-color: #00000000;
text-indent: 2px;
font-size: 14px;
&:focus{
@@ -322,13 +318,6 @@ export default {
border: none;
}
}
&.active{
box-shadow: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
svg{
stroke-width: 1.5;
fill: #823aa022;
}
}
}
}
.middle{

View File

@@ -3,5 +3,13 @@
"en": "English",
"language": "Language",
"default_site": "Default Site",
"view": "View"
"view": "View",
"play": "Play",
"star": "Star",
"setting": "Setting",
"videoName": "Video Name",
"type": "Type",
"time": "Time",
"operate": "Operate",
"share": "Share"
}

View File

@@ -3,5 +3,13 @@
"en": "English",
"language": "语言",
"default_site": "默认源",
"view": "浏览"
"view": "浏览",
"play": "播放",
"star": "收藏",
"setting": "设置",
"videoName": "视频名称",
"type": "类型",
"time": "时间",
"operate": "操作",
"share": "分享"
}

View File

@@ -5,7 +5,7 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
view: 'Setting',
view: 'Film',
theme: 'light',
site: 'zuidazy',
language: 'zhCn',