From 8e380b6463165d42d6b8cbfc7aacd626d9f13b84 Mon Sep 17 00:00:00 2001 From: hunlongyu Date: Thu, 16 Apr 2020 13:41:03 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=98=9B=20=E9=83=A8=E5=88=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/style.scss | 203 +++++++++++++++++++++++++++++++ src/assets/scss/theme.scss | 22 ++-- src/assets/scss/theme/light.scss | 132 +++++++++++++++++++- src/components/Aside.vue | 6 +- src/components/Film.vue | 51 +++----- src/locales/en.json | 10 +- src/locales/zh-cn.json | 10 +- src/store/index.js | 2 +- 8 files changed, 385 insertions(+), 51 deletions(-) diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index f76d6fb..5aa9119 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index 63c1ab5..b2d97b6 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -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'; diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss index 3ebe7db..886294f 100644 --- a/src/assets/scss/theme/light.scss +++ b/src/assets/scss/theme/light.scss @@ -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); + } + } + } + } } diff --git a/src/components/Aside.vue b/src/components/Aside.vue index fa789f7..f342ae0 100644 --- a/src/components/Aside.vue +++ b/src/components/Aside.vue @@ -16,19 +16,19 @@ - 播放 + {{$t('play')}} - 收藏 + {{$t('star')}} - 设置 + {{$t('setting')}} diff --git a/src/components/Film.vue b/src/components/Film.vue index 75cbbb0..da62117 100644 --- a/src/components/Film.vue +++ b/src/components/Film.vue @@ -2,7 +2,7 @@
-
+
{{site.name}}
    @@ -11,7 +11,7 @@
-
+
{{site.tags[tag].title}}
    @@ -20,7 +20,7 @@
-
+
{{site.tags[tag].children[type].title}}
    @@ -30,37 +30,39 @@
- - Search - - - + + + Search + + + +
-
+
- 影片名称 - 类型 - 时间 - 操作 + {{$t('videoName')}} + {{$t('type')}} + {{$t('time')}} + {{$t('operate')}}
-
+
  • {{i.name}} {{i.type}} {{i.time}} - 播放 - 收藏 - 分享 + {{$t('play')}} + {{$t('star')}} + {{$t('share')}}
-
+
@@ -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{ diff --git a/src/locales/en.json b/src/locales/en.json index 50b9cc4..63059e5 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -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" } diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json index f20d65b..1b8a326 100644 --- a/src/locales/zh-cn.json +++ b/src/locales/zh-cn.json @@ -3,5 +3,13 @@ "en": "English", "language": "语言", "default_site": "默认源", - "view": "浏览" + "view": "浏览", + "play": "播放", + "star": "收藏", + "setting": "设置", + "videoName": "视频名称", + "type": "类型", + "time": "时间", + "operate": "操作", + "share": "分享" } diff --git a/src/store/index.js b/src/store/index.js index 93fb670..b0298d3 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -5,7 +5,7 @@ Vue.use(Vuex) export default new Vuex.Store({ state: { - view: 'Setting', + view: 'Film', theme: 'light', site: 'zuidazy', language: 'zhCn',