xuhuajiao
/
intelligence-screen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

天气插件遮挡问题

master
xuhuajiao 2 years ago
parent
fef4755cfd
commit
3046abba01
2 changed files with 406 additions and 406 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 676
      src/assets/styles/index.scss
  2. 136
      src/views/header/index.vue

676
src/assets/styles/index.scss
View File

@ -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);
}
}
}
}
}
} }

136
src/views/header/index.vue
View File

@ -1,68 +1,68 @@
<template>
<div class="header-container">
<div class="header-title">
<div class="line1">
<span class="top-line1" />
</div>
<div class="ball-running-dots left-dots">
<div />
<div />
<div />
<div />
</div>
<h2>{{ headerTitle }}</h2>
<div class="ball-running-dots right-dots">
<div />
<div />
<div />
<div />
</div>
<div class="line2">
<span class="top-line2" />
</div>
</div>
<div class="header-text header-weather">
<!-- 天气api: https://www.tianqi.com/plugin -->
<iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" />
</div>
<div class="header-text header-date">{{ nowDate }}</div>
</div>
</template>
<script>
import { getCurrentTime } from '@/utils/index'
export default {
name: 'Header',
props: {
headerTitle: {
type: String,
default: function() {
return ''
}
}
},
data() {
return {
nowDate: ''
}
},
watch: {
headerTitle: function() {
}
},
created() {
this.timer = setInterval(() => {
this.nowDate = getCurrentTime()
}, 1000)
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
@import "~@/assets/styles/ball-running-animate.css";
</style>
<template>
<div class="header-container">
<div class="header-title">
<div class="line1">
<span class="top-line1" />
</div>
<div class="ball-running-dots left-dots">
<div />
<div />
<div />
<div />
</div>
<h2>{{ headerTitle }}</h2>
<div class="ball-running-dots right-dots">
<div />
<div />
<div />
<div />
</div>
<div class="line2">
<span class="top-line2" />
</div>
</div>
<div class="header-text header-weather">
<!-- 天气api: https://www.tianqi.com/plugin -->
<iframe id="weather" width="400" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=18" />
</div>
<div class="header-text header-date">{{ nowDate }}</div>
</div>
</template>
<script>
import { getCurrentTime } from '@/utils/index'
export default {
name: 'Header',
props: {
headerTitle: {
type: String,
default: function() {
return ''
}
}
},
data() {
return {
nowDate: ''
}
},
watch: {
headerTitle: function() {
}
},
created() {
this.timer = setInterval(() => {
this.nowDate = getCurrentTime()
}, 1000)
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss">
@import "~@/assets/styles/index.scss";
@import "~@/assets/styles/ball-running-animate.css";
</style>
Write Preview
Loading…
Cancel
Save