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 @@ ...@@ -63,7 +63,24 @@
list-style: none; list-style: none;
} }
@media screen and (max-width: 768px){ @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{ .swiper-dots{
...@@ -75,12 +92,35 @@ ...@@ -75,12 +92,35 @@
left: 100%; left: 100%;
} }
.swiper-navigator{ .swiper-navigator{
width: 0px; width: 60%;
height: 0px; height: 0px;
z-index: -2; z-index: 1000;
position: fixed; position: fixed;
left: 100%; top: 50%;
visibility: hidden; }
.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{ .swiper-current-text{
...@@ -90,22 +130,67 @@ ...@@ -90,22 +130,67 @@
top: 0.4rem; top: 0.4rem;
font-family: myFont; 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> </style>
</head> </head>
<body> <body>
<div id="pano" style="width:100%;height:100%;"></div> <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 id="swiper" style="width:100%;height:100%;">
<div class="swiper-container " id="app"> <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"> <ul class="swiper-wrap" v-if="loadReady">
<li v-for="(item,idx) in slides" :key="idx"> <li v-for="(item,idx) in slides" :key="idx">
<img class="img-item" @click="toShow(item.title,item.id,idx)" :src="item.image"> <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> </li>
</ul> </ul>
<ul class="swiper-dots"></ul> <ul class="swiper-dots"></ul>
<ul class="swiper-navigator"> <ul class="swiper-navigator">
<li class="swiper-btn-prev"></li> <li class="swiper-btn-prev">
<li class="swiper-btn-next"></li> <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> </ul>
</div> </div>
</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