From 3046abba0134f3c1d01e4bd06f84aeff6aefa1b9 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 1 Feb 2023 11:53:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A9=E6=B0=94=E6=8F=92=E4=BB=B6=E9=81=AE?=
=?UTF-8?q?=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/styles/index.scss | 676 +++++++++++++++++------------------
src/views/header/index.vue | 136 +++----
2 files changed, 406 insertions(+), 406 deletions(-)
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 35657b2..da42087 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,339 +1,339 @@
-#screen-container {
- width: 100%;
- height: 100vh;
- padding: 0 0.175rem;
- font-size: 0.25rem;
- line-height: 0.35rem;
- color: #fff;
- background-color: #010326;
- overflow: hidden;
-}
-
-// 头部主题标题
-.header-container{
- position: relative;
- width: 100%;
- height: 1.125rem;
- font-size: 0.3rem;
- color: #fff;
- &::before,
- &::after{
- content: "";
- position: absolute;
- top: 0;
- width: 6.2rem;
- height: 1.05rem;
- }
- &::before{
- left: 0;
- background: url('~@/assets/images/header-left.png') no-repeat top center;
- }
- &::after{
- right: 0;
- background: url('~@/assets/images/header-right.png') no-repeat top center;
- }
- .header-title{
- position: relative;
- width: 15.85rem;
- height: 1.075rem;
- margin: 0 auto;
- background: url('~@/assets/images/header-bg.png') no-repeat top center;
- background-size: cover;
- h2{
- font-size: 0.6rem;
- font-family: "ZhenyanGB";
- font-weight: normal;
- line-height: 1.125rem;
- text-align: center;
- letter-spacing: 0.2rem;
- background: linear-gradient(180deg, #FFFFFF 0%, #1AC9FF 100%);
- background-clip: text;
- color: transparent;
- }
- }
- .header-text{
- position: absolute;
- top: 0.65rem;
- }
- .header-weather {
- left: 1rem;
- }
- .header-date {
- right: 0.375rem;
- }
-}
-
-// 头部动态效果
-.line1,
-.line2{
- position: absolute;
- top: 0;
-}
-
-.line1{
- right: 632px;
- transform: rotateY(-180deg);
-}
-
-.line2{
- left: 632px;
-}
-
-.top-line1,
-.top-line2{
- display: block;
- width: 7.925rem;
- height: 1.075rem;
- animation: topline 4s linear infinite both;
-}
-
-.top-line1{
- background: url('~@/assets/images/top-line.png') no-repeat;
-}
-
-.top-line2{
- background: url('~@/assets/images/top-line.png') no-repeat;
-}
-
-@keyframes topline {
- from {
- width: 0;
- }
- 50%,
- to {
- width: 643px;
- }
-}
-
-// 主题内部部分
-.screen-main{
- display: flex;
- justify-content: space-between;
- height: calc(100% - 91px);
- margin: 0.0625rem 0 0.5rem 0;
- padding: 0 0.325rem;
- overflow: hidden;
- .screen-left,
- .screen-right{
- width: 6.375rem;
- }
- .screen-middle{
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- margin: 0 0.5rem;
- }
- .screen-item{
- margin-top: 0.25rem;
- }
- .common-title{
- width: 100%;
- height: 0.475rem;
- line-height: 0.475rem;
- padding-left: 0.525rem;
- font-size: 0.325rem;
- background: url('~@/assets/images/title.png') no-repeat center center;
- background-size: cover;
- font-family: 'YouSheBiaoTiHei';
- letter-spacing: 0.1rem;
- }
- .module-content{
- border: 1px solid #2C75E0;
- box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5);
- }
- .small-module{
- height: 3.75rem;
- }
- .medium-module{
- height: 4.125rem;
- }
- .big-module{
- height: 6.8125rem;
- // margin:0.1625rem 0;
- }
-
- //排行榜-推荐 - list
- .lending-ranking{
- .module-content{
- padding: 0 0.25rem;
- overflow: hidden;
- }
- }
- .book-list-item{
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.1rem 0.25rem;
- .book-img{
- width: 0.825rem;
- height: 1.075rem;
- margin-right: 0.35rem;
- background: url('~@/assets/images/default-img.png') no-repeat center center;
- background-size: contain;
- display: flex;
- align-items: center;
- overflow: hidden;
- img{
- display: block;
- width: 100%;
- // height: 100%;
- }
- }
- .book-info{
- flex: 1;
- margin-right: 0.35rem;
- h4{
- font-size: 0.25rem;
- font-weight: normal;
- }
- p{
- font-size: 0.2rem;
- }
- }
- .ranking-num{
- display: flex;
- justify-content: space-between;
- align-items: center;
- .icon{
- width: 0.5625rem;
- height: 0.5625rem;
- margin-right: 0.175rem;
- }
- }
- }
-
- // 进出馆人数
- .accessToLib-container{
- display: flex;
- justify-content: space-between;
- text-align: center;
- align-items: center;
- margin: 0.375rem 0 .25rem 0;
- .accessToLib-item{
- width: 2.75rem;
- .panel-num{
- display: block;
- height: 0.85rem;
- margin-top: 0.125rem;
- line-height: 0.85rem;
- font-size: 0.325rem;
- font-weight: bold;
- text-align: center;
- color: #1AC9FF;
- background: url('~@/assets/images/num-img.png') no-repeat center center;
- background-size: cover;
- }
- }
- }
-
- // 视频
- .video-box{
- width: 100%;
- height: 5.2125rem;
- }
-
- // 阅读之星
- .read-star{
- flex: 1;
- .common-title{
- background: url('~@/assets/images/title-big.png') no-repeat center center;
- background-size: cover;
- }
- .module-content{
- padding: .25rem;
- overflow: hidden;
- .readstart-item{
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 0.5rem;
- padding: 0 0.25rem;
- font-size: 0.2rem;
- margin-bottom: 0.125rem;
- background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%);
- .icon-star-1{
- width: 0.35rem;
- height: 0.3rem;
- margin-left: -0.05rem;
- margin-right: 0.2rem;
- }
- .icon-star-2{
- width: 0.375rem;
- height: 0.3rem;
- margin-left: -0.0625rem;
- margin-right: 0.2rem;
- }
- .icon-star-3{
- width: 0.275rem;
- height: 0.3rem;
- margin-right: 0.25rem;
- }
- .star-num{
- display: block;
- width: 0.25rem;
- height: 0.25rem;
- margin-right: 0.25rem;
- font-size: 0.2rem;
- line-height: 0.25rem;
- text-align: center;
- border-radius: 50%;
- color: #1AC9FF;
- border: 1px solid #1AC9FF;
- }
- .star-info{
- flex: 1;
- margin-right: 0.25rem;
- }
- &.star1-bg{
- background: url('~@/assets/images/star-1.png') no-repeat left top;
- background-size: contain;
- }
- &.star2-bg{
- background: url('~@/assets/images/star-2.png') no-repeat left top;
- background-size: contain;
- }
- &.star3-bg{
- background: url('~@/assets/images/star-3.png') no-repeat left top;
- background-size: contain;
- }
- }
-
- }
- }
-
- // 通知公告
- .notice{
- .module-content{
- display: flex;
- justify-content: space-between;
- width: 100%;
- padding: 0.25rem 0.375rem 0.5rem 0.375rem;
- .notice-icon-gif{
- display: block;
- width: 2.375rem;
- height: 2.875rem;
- background: url('~@/assets/images/notice.gif') no-repeat left top;
- background-size: contain;
- margin-right: 0.15rem;
- }
- .seamless-warp{
- width: calc(100vw);
- height: 3.1rem;
- overflow: hidden;
- .notice-txt {
- animation: myMove 20s linear infinite;
- animation-fill-mode: forwards;
- }
- @keyframes myMove {
- 0% {
- transform: translateY(2rem);
- }
- 100% {
- transform: translateY(-6rem);
- }
- }
- }
- }
- }
+#screen-container {
+ width: 100%;
+ height: 100vh;
+ padding: 0 0.175rem;
+ font-size: 0.25rem;
+ line-height: 0.35rem;
+ color: #fff;
+ background-color: #010326;
+ overflow: hidden;
+}
+
+// 头部主题标题
+.header-container{
+ position: relative;
+ width: 100%;
+ height: 1.125rem;
+ font-size: 0.3rem;
+ color: #fff;
+ &::before,
+ &::after{
+ content: "";
+ position: absolute;
+ top: 0;
+ width: 6.2rem;
+ height: 1.05rem;
+ }
+ &::before{
+ left: 0;
+ background: url('~@/assets/images/header-left.png') no-repeat top center;
+ }
+ &::after{
+ right: 0;
+ background: url('~@/assets/images/header-right.png') no-repeat top center;
+ }
+ .header-title{
+ position: relative;
+ width: 15.85rem;
+ height: 1.075rem;
+ margin: 0 auto;
+ background: url('~@/assets/images/header-bg.png') no-repeat top center;
+ background-size: cover;
+ h2{
+ font-size: 0.6rem;
+ font-family: "ZhenyanGB";
+ font-weight: normal;
+ line-height: 1.125rem;
+ text-align: center;
+ letter-spacing: 0.2rem;
+ background: linear-gradient(180deg, #FFFFFF 0%, #1AC9FF 100%);
+ background-clip: text;
+ color: transparent;
+ }
+ }
+ .header-text{
+ position: absolute;
+ top: 0.65rem;
+ }
+ .header-weather {
+ left: 0.6rem;
+ }
+ .header-date {
+ right: 0.375rem;
+ }
+}
+
+// 头部动态效果
+.line1,
+.line2{
+ position: absolute;
+ top: 0;
+}
+
+.line1{
+ right: 632px;
+ transform: rotateY(-180deg);
+}
+
+.line2{
+ left: 632px;
+}
+
+.top-line1,
+.top-line2{
+ display: block;
+ width: 7.925rem;
+ height: 1.075rem;
+ animation: topline 4s linear infinite both;
+}
+
+.top-line1{
+ background: url('~@/assets/images/top-line.png') no-repeat;
+}
+
+.top-line2{
+ background: url('~@/assets/images/top-line.png') no-repeat;
+}
+
+@keyframes topline {
+ from {
+ width: 0;
+ }
+ 50%,
+ to {
+ width: 643px;
+ }
+}
+
+// 主题内部部分
+.screen-main{
+ display: flex;
+ justify-content: space-between;
+ height: calc(100% - 91px);
+ margin: 0.0625rem 0 0.5rem 0;
+ padding: 0 0.325rem;
+ overflow: hidden;
+ .screen-left,
+ .screen-right{
+ width: 6.375rem;
+ }
+ .screen-middle{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 0 0.5rem;
+ }
+ .screen-item{
+ margin-top: 0.25rem;
+ }
+ .common-title{
+ width: 100%;
+ height: 0.475rem;
+ line-height: 0.475rem;
+ padding-left: 0.525rem;
+ font-size: 0.325rem;
+ background: url('~@/assets/images/title.png') no-repeat center center;
+ background-size: cover;
+ font-family: 'YouSheBiaoTiHei';
+ letter-spacing: 0.1rem;
+ }
+ .module-content{
+ border: 1px solid #2C75E0;
+ box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5);
+ }
+ .small-module{
+ height: 3.75rem;
+ }
+ .medium-module{
+ height: 4.125rem;
+ }
+ .big-module{
+ height: 6.8125rem;
+ // margin:0.1625rem 0;
+ }
+
+ //排行榜-推荐 - list
+ .lending-ranking{
+ .module-content{
+ padding: 0 0.25rem;
+ overflow: hidden;
+ }
+ }
+ .book-list-item{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.1rem 0.25rem;
+ .book-img{
+ width: 0.825rem;
+ height: 1.075rem;
+ margin-right: 0.35rem;
+ background: url('~@/assets/images/default-img.png') no-repeat center center;
+ background-size: contain;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ img{
+ display: block;
+ width: 100%;
+ // height: 100%;
+ }
+ }
+ .book-info{
+ flex: 1;
+ margin-right: 0.35rem;
+ h4{
+ font-size: 0.25rem;
+ font-weight: normal;
+ }
+ p{
+ font-size: 0.2rem;
+ }
+ }
+ .ranking-num{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .icon{
+ width: 0.5625rem;
+ height: 0.5625rem;
+ margin-right: 0.175rem;
+ }
+ }
+ }
+
+ // 进出馆人数
+ .accessToLib-container{
+ display: flex;
+ justify-content: space-between;
+ text-align: center;
+ align-items: center;
+ margin: 0.375rem 0 .25rem 0;
+ .accessToLib-item{
+ width: 2.75rem;
+ .panel-num{
+ display: block;
+ height: 0.85rem;
+ margin-top: 0.125rem;
+ line-height: 0.85rem;
+ font-size: 0.325rem;
+ font-weight: bold;
+ text-align: center;
+ color: #1AC9FF;
+ background: url('~@/assets/images/num-img.png') no-repeat center center;
+ background-size: cover;
+ }
+ }
+ }
+
+ // 视频
+ .video-box{
+ width: 100%;
+ height: 5.2125rem;
+ }
+
+ // 阅读之星
+ .read-star{
+ flex: 1;
+ .common-title{
+ background: url('~@/assets/images/title-big.png') no-repeat center center;
+ background-size: cover;
+ }
+ .module-content{
+ padding: .25rem;
+ overflow: hidden;
+ .readstart-item{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 0.5rem;
+ padding: 0 0.25rem;
+ font-size: 0.2rem;
+ margin-bottom: 0.125rem;
+ background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%);
+ .icon-star-1{
+ width: 0.35rem;
+ height: 0.3rem;
+ margin-left: -0.05rem;
+ margin-right: 0.2rem;
+ }
+ .icon-star-2{
+ width: 0.375rem;
+ height: 0.3rem;
+ margin-left: -0.0625rem;
+ margin-right: 0.2rem;
+ }
+ .icon-star-3{
+ width: 0.275rem;
+ height: 0.3rem;
+ margin-right: 0.25rem;
+ }
+ .star-num{
+ display: block;
+ width: 0.25rem;
+ height: 0.25rem;
+ margin-right: 0.25rem;
+ font-size: 0.2rem;
+ line-height: 0.25rem;
+ text-align: center;
+ border-radius: 50%;
+ color: #1AC9FF;
+ border: 1px solid #1AC9FF;
+ }
+ .star-info{
+ flex: 1;
+ margin-right: 0.25rem;
+ }
+ &.star1-bg{
+ background: url('~@/assets/images/star-1.png') no-repeat left top;
+ background-size: contain;
+ }
+ &.star2-bg{
+ background: url('~@/assets/images/star-2.png') no-repeat left top;
+ background-size: contain;
+ }
+ &.star3-bg{
+ background: url('~@/assets/images/star-3.png') no-repeat left top;
+ background-size: contain;
+ }
+ }
+
+ }
+ }
+
+ // 通知公告
+ .notice{
+ .module-content{
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 0.25rem 0.375rem 0.5rem 0.375rem;
+ .notice-icon-gif{
+ display: block;
+ width: 2.375rem;
+ height: 2.875rem;
+ background: url('~@/assets/images/notice.gif') no-repeat left top;
+ background-size: contain;
+ margin-right: 0.15rem;
+ }
+ .seamless-warp{
+ width: calc(100vw);
+ height: 3.1rem;
+ overflow: hidden;
+ .notice-txt {
+ animation: myMove 20s linear infinite;
+ animation-fill-mode: forwards;
+ }
+ @keyframes myMove {
+ 0% {
+ transform: translateY(2rem);
+ }
+ 100% {
+ transform: translateY(-6rem);
+ }
+ }
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index a15c84f..7fdc1fd 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,68 +1,68 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+