Skip to content

yanghanwen / wanda-vr

Go to a project
Commit e485998a by 杨翰文
Options

feat: 首页改版

parent 1b87d2d2
Showing with 93 additions and 8 deletions
tour.html
......@@ -63,7 +63,24 @@
list-style: none;
}
@media screen and (max-width: 768px){
.swiper-navigator {display: none;}
/* .swiper-navigator {display: none;} */
}
.swiper-head-title {
position: absolute;
top: 2rem;
left: 0;
right: 0;
display: flex;
justify-content: center;
}
.swiper-head-title img {
width: 80%;
display: block;
}
.swiper-container {
margin-top: 0;
display: flex;
align-items: center;
}
.swiper-dots{
......@@ -75,12 +92,35 @@
left: 100%;
}
.swiper-navigator{
width: 0px;
width: 60%;
height: 0px;
z-index: -2;
z-index: 1000;
position: fixed;
left: 100%;
visibility: hidden;
top: 50%;
}
.swiper-navigator .swiper-btn-prev,
.swiper-navigator .swiper-btn-next {
background: none;
position: absolute;
width: 50px;
height: 50px;
line-height: 43px;
text-align: center;
}
.swiper-navigator span {
color: #fff;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
z-index: 10;
top: 0;
left: 34%;
}
.swiper-navigator img {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.swiper-current-text{
......@@ -90,22 +130,67 @@
top: 0.4rem;
font-family: myFont;
}
.swiper-wrap {
top: -5vh;
}
@media screen and (min-height: 608px){
.swiper-wrap {
top: 0vh;
}
}
.swiper-wrap li .card{
width: 100%;
position: relative;
}
.swiper-wrap li .img-item {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translate(-50%, 0);
width: 95%;
z-index: 10;
}
.swiper-wrap li .text {
position: absolute;
bottom: 0.5rem;
left: 0;
right: 0;
z-index: 10;
color: #fff;
font-size: 30px;
text-align: center;
/* font-family: myFont; */
}
</style>
</head>
<body>
<div id="pano" style="width:100%;height:100%;"></div>
<div class="swiper-head-title">
<img src="./images/load/big_name.png" alt="">
</div>
<div id="swiper" style="width:100%;height:100%;">
<div class="swiper-container " id="app">
<div class="swiper-current-text" v-if="slides.length>0">{{slides[swiperActive].title}}</div>
<ul class="swiper-wrap" v-if="loadReady">
<li v-for="(item,idx) in slides" :key="idx">
<img class="img-item" @click="toShow(item.title,item.id,idx)" :src="item.image">
<div class="text" v-if="slides.length>0">{{item.title}}</div>
<img src="./images/load/card.png" class="card" alt="">
</li>
</ul>
<ul class="swiper-dots"></ul>
<ul class="swiper-navigator">
<li class="swiper-btn-prev"></li>
<li class="swiper-btn-next"></li>
<li class="swiper-btn-prev">
<span>&lt;</span>
<img src="./images/load/arr_bg.png" alt="">
</li>
<li class="swiper-btn-next">
<span>&gt;</span>
<img src="./images/load/arr_bg.png" alt="">
</li>
</ul>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment