6月4日晚

master
rosehan 1 year ago
parent f308d9b314
commit a3c1ff89d4
  1. 206
      assets/style/v-layout.css
  2. 42
      pages/fyzy/index.html

@ -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; /* 文字从上到下竖排,从右到左 */
}

@ -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>

Loading…
Cancel
Save