Skip to content

Q
q-trip

lanwenshuai / q-trip

通知 1
Star 0
Fork 0
Q
q-trip

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7489cbd1 编写于 作者: L lanwenshuai
浏览文件
操作

version : 0.5

上级 f5231d07
隐藏空白更改
内联 并排
Showing with 144 addition and 66 deletion
components/index/banner.vue
浏览文件 @ 7489cbd1
<template>
<view class="">
<view class="banner">
<swiper :indicator-dots="true" :autoplay="true" :interval="5000" duration="700" class="banner-box" vertical="true" >
<swiper-item v-for="(item,index) in banner" :key='index'>
<view class="swiper-item">
<image :src="item.src" mode="" class="banner-img"></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
banner:[
{src:'../../static/index/banner/1.jpg'},
{src:'../../static/index/banner/2.jpg'},
{src:'../../static/index/banner/3.jpg'},
{src:'../../static/index/banner/4.jpg'},
{src:'../../static/index/banner/5.jpg'}
]
}
}
}
</script>
<style lang="scss">
.banner{
width: 100%;
height: 500px;
background-color: pink;
// position: relative;
// background-color: pink;
.banner-box{
height: 100%;
margin-top: -2px;
.swiper-item{
height: 100%;
.banner-img{
width: 100%;
height: 100%;
}
}
// & /deep/ .uni-swiper-dots-horizontal{
// left: 10%;
// top: 20%;
// display: flex;
// flex-direction: column;
// }
& /deep/ .uni-swiper-dot{
background-size: cover;
width: 110px;
height: 62px;
border-radius: 0;
opacity: 1;
margin-bottom: 5px;
}
& /deep/ .uni-swiper-dot-active{
border: 2px solid $color;
}
& /deep/ .uni-swiper-dots-vertical>:nth-child(1){
background-image: url(../../static/index/banner/min1.png);
}
& /deep/ .uni-swiper-dots-vertical>:nth-child(2){
background-image: url(../../static/index/banner/min2.png);
}
& /deep/ .uni-swiper-dots-vertical>:nth-child(3){
background-image: url(../../static/index/banner/min3.png);
}
& /deep/ .uni-swiper-dots-vertical>:nth-child(4){
background-image: url(../../static/index/banner/min4.png);
}
& /deep/ .uni-swiper-dots-vertical>:nth-child(5){
background-image: url(../../static/index/banner/min5.png);
}
}
}
</style>
components/index/header.vue
浏览文件 @ 7489cbd1
......@@ -16,7 +16,7 @@
<view class="nav" :class="{'active':active==3}">
<navigator url="#" @click="act(3)">旅游攻略</navigator>
</view>
<view class="nav-xl nav" :class="{'active':active==4}">
<view class="nav-xl " :class="{'active':active==4}">
<view class="nav-xl-nav" >
<navigator url="#" @click="act(4)">
<text>去旅行</text>
......@@ -39,7 +39,7 @@
<view class="nav " :class="{'active':active==6}">
<navigator url="../../pages/hotel/hotel" @click="act(6)">订酒店</navigator>
</view>
<view class="nav-xl nav">
<view class="nav-xl ">
<view class="nav-xl-nav">
<navigator url="#">
<text>社区</text>
......@@ -109,7 +109,7 @@
.head-box{
height: 68px;
.head-logo{
padding: 16px 0 14px;
padding: 15px 0 12px 14px;
.logo{
// width: 120px;
height: 39px;
......@@ -127,7 +127,7 @@
color: $color;
border-bottom: 3px solid $color;
z-index: 999;
height: 62px;
height: 65px;
}
.xl{
top:65px
......@@ -147,7 +147,7 @@
.head-box{
height: 58px;
.head-logo{
padding: 13px 0 13px 15px;
padding: 11px 0 12px 15px;
.logo{
width: 120px;
height: 33px;
......@@ -212,10 +212,10 @@
color: #fff;
}
.nav{
padding: 2px 16px;
padding: 0px 16px;
z-index: 4;
border-top: 1px solid #fff;
border-bottom: 0;
// border-top: 1px solid #fff;
// border-bottom: 0;
}
.nav-icon{
border-top: 4px solid #666;
......@@ -227,6 +227,8 @@
}
.nav-xl{
position: relative;
padding: 0px 16px;
z-index: 4;
display: block;
border-top:2px solid rgba(255,255,255,0);
border-left:1px solid rgba(255,255,255,0);
......
pages/reg/reg.vue
浏览文件 @ 7489cbd1
<template>
<view class="content" :style="{backgroundImage: 'url(../../static/reg/'+ num + '.jpg)'}">
<view class="reg clearfix">
<view class="reg-box">
<!-- 左盒子 -->
<view class="box-left">
<!-- 左边实际框 -->
<view class="regui">
<view class="zhuce">
<input type="text" placeholder="你的手机号" auto-focus="true" class="phone"/>
</view>
<view class="btn">
<button class="reg-btn">立即注册</button>
</view>
<!-- 协议 -->
<view class="agreement">
<navigator url="#"><<马蜂窝用户使用协议>></navigator>
<view>注册视为同意</view>
</view>
<!-- icon -->
</view>
<!-- 图标 -->
<view class="icon-box">
<view class="icon-title">用合作网账户直接登录</view>
<view class="icons">
<navigator url="#"></navigator>
<navigator url="#"></navigator>
<navigator url="#"></navigator>
</view>
</view>
</view>
<!-- 右盒子 -->
<view class="box-right">
<navigator url="#" class="download">
</navigator>
</view>
</view>
<view class="bottom">
<view>已经注册?</view>
<navigator url="#">
马上登录
</navigator>
</view>
</view>
</view>
<view class="box">
<view class="content" :style="{backgroundImage: 'url(../../static/reg/'+ num + '.jpg)'}">
<view class="reg clearfix">
<view class="reg-box">
<!-- 左盒子 -->
<view class="box-left">
<!-- 左边实际框 -->
<view class="regui">
<view class="zhuce">
<input type="text" placeholder="你的手机号" auto-focus="true" class="phone"/>
</view>
<view class="btn">
<button class="reg-btn">立即注册</button>
</view>
<!-- 协议 -->
<view class="agreement">
<navigator url="#"><<马蜂窝用户使用协议>></navigator>
<view>注册视为同意</view>
</view>
<!-- icon -->
</view>
<!-- 图标 -->
<view class="icon-box">
<view class="icon-title">用合作网账户直接登录</view>
<view class="icons">
<navigator url="#"></navigator>
<navigator url="#"></navigator>
<navigator url="#"></navigator>
</view>
</view>
</view>
<!-- 右盒子 -->
<view class="box-right">
<navigator url="#" class="download">
</navigator>
</view>
</view>
<view class="bottom">
<view>已经注册?</view>
<navigator url="#">
马上登录
</navigator>
</view>
</view>
</view>
</view>
</template>
<script>
......@@ -60,12 +63,26 @@
},
onLoad() {
this.num=parseInt(Math.random()*9)
this.num=parseInt(Math.random()*10)
console.log(this.num)
}
}
</script>
<style lang="scss">
.box::before{
// background-image: url(../../static/reg/full_page_vignette.png) ;
background: url(../../static/reg/full_page_vignette.png) 0 0 rgba(0,0,0,0.2);
background-size: 100%;
bottom: 0;
content: '';
left: 0;
right: 0;
top: 0;
position: fixed;
opacity: .5;
z-index: 2;
}
.content{
width: 100vw;
height: 100vh;
......@@ -73,15 +90,7 @@
background-size: cover;
position: relative;
&::before{
background-size: 100%;
background: url(../../static/reg/full_page_vignette.png) 0 0 rgba(0,0,0,0.3);
bottom: 0;
position: fixed;
content: '';
left: 0;
opacity: .5;
right: 0;
top: 0;
}
.reg{
width: 100%;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或