feiyiWeb
/
web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

6月4日晚

Browse Source
master
rosehan 1 year ago
parent f308d9b314
commit a3c1ff89d4
2 changed files with 225 additions and 23 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 206
      assets/style/v-layout.css
  2. 42
      pages/fyzy/index.html

206
assets/style/v-layout.css
Unescape View File

@ -63,7 +63,11 @@
.v-article-cont p {
margin-bottom: 20px;
}
.v-pages{margin-top: -100px;}
.v-pages {
margin-top: -100px;
}
.v-pages-item {
margin: 80px 0;
}
@ -114,14 +118,26 @@
color: #333333;
}
.v-pages-title.white .big{color: #fff;}
.v-pages-title.white .small{color: #fff;}
.v-pages-title.white .title-inner::before { background-image: url("../images/title_line_left_w.svg");
.v-pages-title.white .big {
color: #fff;
}
.v-pages-title.white .small {
color: #fff;
}
.v-pages-title.white .title-inner::before {
background-image: url("../images/title_line_left_w.svg");
background-repeat: no-repeat;
background-size: contain;}
.v-pages-title.white .title-inner::after { background-image: url("../images/title_line_right_w.svg");
background-size: contain;
}
.v-pages-title.white .title-inner::after {
background-image: url("../images/title_line_right_w.svg");
background-repeat: no-repeat;
background-size: contain;}
background-size: contain;
}
.mode1 .image {
height: 400px;
border-radius: 8px 0 0 8px;
@ -483,7 +499,10 @@
text-align: center;
transition: all .4s;
}
.v-pages-item.fyzl .v-list-item:hover{ top: 0px}
.v-pages-item.fyzl .v-list-item:hover {
top: 0px
}
.v-pages-item.fyzl .v-list-item img {
width: 95%
@ -496,9 +515,114 @@
background-image: url("../images/video_bg.png");
background-repeat: no-repeat;
background-size: 100%;
height: 640px;
height: 800px;
}
.v-pages-item.fyyy .v-list-item {
justify-content: center;
align-items: center
}
.v-pages-item.fyyy .circle {
position: relative;
width: 250px;
height: 250px;
padding: 2px;
border-radius: 300px;
border: 1px solid #f60;
}
.v-pages-item.fyyy .circle .circle-inner {
position: absolute;
left: 6px;
top: 6px;
width: 95%;
height: 95%;
border-radius: 95%;
overflow: hidden;
transition: all .4s;
transform-origin: center center;
animation-iteration-count: infinite;
}
.v-pages-item.fyyy .circle .circle-inner:hover {
animation: imgplay 20s linear infinite;
}
.v-pages-item.fyyy .circle .circle-inner img {
width: 100%
}
.v-pages-item.fyyy .circle .title {
padding: 20px 8px;
position: absolute;
right: -10px;
top: -20px;
border: 1px solid #b28647;
color: #b28647;
background: #fff;
writing-mode: vertical-rl; /* 文字从上到下竖排，从右到左 */
z-index: 99;
}
.v-pages-item.fyyy .circle .title:after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
border: 1px solid #b28647;
}
.v-pages-item.fyyy .circle .play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-image: url("../images/video_start.png");
background-repeat: no-repeat;
background-size: 100%;
z-index: 99;
}
.v-pages-item.fyyy .circle.big {
width: 400px;
height: 400px;
background-image: url("../images/video_circle.png");
background-repeat: no-repeat;
background-size: 100%;
}
.v-pages-item.fyyy .circle.big .title {
color: #b03232;
font-size: 22px;
}
.v-pages-item.fyyy .circle.big .play {
width: 80px;
height: 80px;
}
.v-pages-item.fyyy .circle.big .circle-inner {
left: 60px;
top: 60px;
width: 70%;
height: 70%;
border-radius: 70%;
}
@keyframes imgplay {
from {
transform: rotate(0deg)
}
to {
transform: rotate(100deg)
}
}
/* 非遗图集 */
.v-pages-item.fytj {
padding: 150px 0 50px 0;
@ -506,12 +630,62 @@
background-image: url("../images/music_bg.png");
background-repeat: no-repeat;
background-size: 100%;
height:910px;
height: 910px;
}
.v-pages-item.fytj .v-list {
margin-top: 150px
}
.v-pages-item.fytj .v-list-item:nth-child(2n) {
top: -40px
}
.v-pages-item.fytj .v-list-item{position: relative; width: 80px;}
.v-pages-item.fytj .v-list-item:before{content: ""; left: 20px; top: 165px; position: absolute; width: 20px; height: 20px;background-image: url("../images/flower1.svg");
.v-pages-item.fytj .v-list-item {
justify-content: center;
position: relative;
width: 80px;
margin: 0 auto;
opacity: .5;
transition: all .4s;
cursor: pointer;
}
.v-pages-item.fytj .v-list-item:hover {
opacity: 1
}
.v-pages-item.fytj .v-list-item:before {
content: "";
left: 100px;
top: 255px;
position: absolute;
width: 20px;
height: 20px;
background-image: url("../images/flower1.svg");
background-repeat: no-repeat;
background-size: 100%;}
.v-pages-item.fytj .v-list-item:after{content: ""; left: 30px; top: 15px; position: absolute; width: 1px; height: 150px;background: #fff}
.v-pages-item.fytj .v-list-item .item-name{width: 30px;color: #fff; margin-right: 20px;}
.v-pages-item.fytj .v-list-item .item-title{width: 30px;color: #fff}
background-size: 100%;
}
.v-pages-item.fytj .v-list-item:after {
content: "";
left: 110px;
top: 15px;
position: absolute;
width: 1px;
height: 250px;
background: #fff
}
.v-pages-item.fytj .v-list-item .item-name {
width: 30px;
color: #fff;
margin-right: 20px;
writing-mode: vertical-rl; /* 文字从上到下竖排，从右到左 */
}
.v-pages-item.fytj .v-list-item .item-title {
width: 30px;
color: #fff;
writing-mode: vertical-rl; /* 文字从上到下竖排，从右到左 */
}

42
pages/fyzy/index.html
Unescape View File

@ -37,11 +37,39 @@
</div>
</div>
</div>
<div class="v-pages-item fyyy">
<div class="v-pages-item fyyy">
<div class="v-contain">
<div class="v-pages-title text-center">
<div class="title-inner"><span class="big">影音</span></div>
</div>
<div class="v-list row">
<div class="v-list-item row col-6">
<div class="circle">
<div class="title">评书《帕米尔雄鹰》</div>
<div class="play"></div>
<div class="circle-inner">
<img src="../../assets/images/exhibition_picture1.png"/>
</div>
</div>
</div>
<div class="v-list-item row col-12">
<div class="circle big">
<div class="title">河北梆子《王宝钏》</div>
<div class="play"></div>
<div class="circle-inner">
<img src="../../assets/images/exhibition_picture1.png"/>
</div>
</div> </div>
<div class="v-list-item row col-6">
<div class="circle">
<div class="title">石家庄丝弦</div>
<div class="play"></div>
<div class="circle-inner">
<img src="../../assets/images/exhibition_picture1.png"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="v-pages-item fytj">
@ -51,27 +79,27 @@
</div>
<div class="v-list row">
<div class="v-list-item row col-4">
<div class="item-name">《<br/>平沙落雁<br/>》</div>
<div class="item-name">《平沙落雁》</div>
<div class="item-title">古琴曲目</div>
</div>
<div class="v-list-item row col-4">
<div class="item-name">《<br/>平沙落雁<br/>》</div>
<div class="item-name">《阳关三叠》</div>
<div class="item-title">古琴曲目</div>
</div>
<div class="v-list-item row col-4">
<div class="item-name">《<br/>平沙落雁<br/>》</div>
<div class="item-name">《嘎报郎娘·劝说男女歌》</div>
<div class="item-title">古琴曲目</div>
</div>
<div class="v-list-item row col-4">
<div class="item-name">《<br/>平沙落雁<br/>》</div>
<div class="item-name">《凤落梧桐》</div>
<div class="item-title">古琴曲目</div>
</div>
<div class="v-list-item row col-4">
<div class="item-name">《<br/>平沙落雁<br/>》</div>
<div class="item-name">《春江花月夜》</div>
<div class="item-title">古琴曲目</div>
</div>
<div class="v-list-item row col-4">
<div class="item-name">《<br/>平沙落雁<br/>》</div>
<div class="item-name">《薛仁贵征东》</div>
<div class="item-title">古琴曲目</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save