Skip to content

Q
q-trip

lanwenshuai / q-trip

通知 1
Star 0
Fork 0
Q
q-trip

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

源分支
选择Git版本
...
目标分支
选择Git版本
 
Commits (4)
    https://gitcode.net/lanwenshuai/q-trip/-/commit/b2cc906d8944ff3fcec4b3ccdc0e6a9195756960 vision: 0.2 2021-07-09T09:04:25+08:00 lanwenshuai 821343134@qq.com https://gitcode.net/lanwenshuai/q-trip/-/commit/442e5ed476f4e72cfaf94162a927012a382b64db version : 0.3 2021-07-12T01:45:41+08:00 ss 821343134@qq.com https://gitcode.net/lanwenshuai/q-trip/-/commit/2bc04b94419d5b729b09b7ac0b1677fbab475d0c version :0.4 2021-07-12T10:02:36+08:00 lanwenshuai lanwenshuai@qq.com https://gitcode.net/lanwenshuai/q-trip/-/commit/f5231d07bea03f6cccc72b6f85c67845d5d0c78c Merge branch 'master' of https://codechina.csdn.net/lanwenshuai/q-trip 2021-07-12T10:05:45+08:00 lanwenshuai lanwenshuai@qq.com
展开全部 隐藏空白更改
内联 并排
Showing with 1841 addition and 247 deletion
.gitignore
浏览文件 @ f5231d07
" "
<<<<<<< HEAD
/
=======
>>>>>>> 7075cb06b011f57e5860866f634cbac0876ecb01
App.vue
浏览文件 @ f5231d07
......@@ -12,11 +12,24 @@
}
</script>
<style>
<style lang="scss">
/*每个页面公共css */
*{
margin: 0;
padding: 0;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
}
body{
margin: 0 auto;
min-width: 1140px;
overflow-x: hidden;
}
.clearfix::after{
content: '';
height: 0;
display: block;
clear: both;
overflow: hidden;
}
</style>
components/hotel/content.vue 0 → 100644
浏览文件 @ f5231d07
<template>
<view>
<view class="content">
<view class="box1 box">
<view class="title">
<view>主题住宿</view>
</view>
<view class="box1-content">
<view class="content-title">
<view class="active">亲子之选</view>
<view>周末好去处</view>
<view>目的地特色</view>
<view>私人海滩</view>
<view>吃货根据地</view>
<view>潜水生地</view>
</view>
<!-- 内容 -->
<view class="neirong">
<view class="nr-box">
<view class="nr-content" v-for="(item,index) in box1TitleList" :key='index'>
<image :src="item.src" mode=""></image>
<view class="content-text">
<view>{{item.title}}</view>
<!-- 地址 -->
<view class="content-dzhi">
{{item.dzhi}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="box2 box">
<view class="title">
<view>特价酒店</view>
</view>
<view class="box1-content">
<view class="content-title">
<view class="active">曼谷</view>
<view>台北</view>
<view>东京</view>
<view>香港</view>
<view>首尔</view>
<view>新加坡</view>
</view>
<!-- 内容 -->
<view class="neirong">
<view class="nr-box">
<view class="nr2-content" v-for="(item,index) in box2TitleList" :key='index'>
<view class="bac"></view>
<image :src="item.src" mode="" class="nr-img"></image>
<view class="content-text">
<!-- 分数 -->
<view class="text-num">
{{item.num}}
</view>
<!-- 介绍 -->
<view class="text-name">
{{item.name}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"gotelContent",
data() {
return {
box1TitleList:[
{
src:'../../static/hotel/1.jpeg',
title:'狗骨岛',
dzhi:'泰国'
},
{
src:'../../static/hotel/2.jpeg',
title:'三亚',
dzhi:'中国'
},
{
src:'../../static/hotel/3.jpeg',
title:'大阪',
dzhi:'日本'
},
{
src:'../../static/hotel/4.jpeg',
title:'苏梅岛',
dzhi:'泰国'
},
{
src:'../../static/hotel/5.jpeg',
title:'大阪',
dzhi:'新西兰'
},
{
src:'../../static/hotel/6.jpeg',
title:'大堡礁',
dzhi:'澳大利亚'
}
],
box2TitleList:[
{
src:'../../static/hotel/hotel1.jpeg',
num:'8.4分',
name:'曼谷威客3号酒店（原曼谷胜利纪念碑全季酒店）'
},
{
src:'../../static/hotel/hotel2.jpeg',
num:'8.8分',
name:'穰南帝景酒店'
},
{
src:'../../static/hotel/hotel3.jpeg',
num:'8.4分',
name:'璀璨专享服务公寓'
},
{
src:'../../static/hotel/hotel4.jpeg',
num:'8.7分',
name:'曼谷暹罗安纳塔拉酒店'
},
{
src:'../../static/hotel/hotel5.jpeg',
num:'7.7分',
name:'彩虹云霄酒店'
},
{
src:'../../static/hotel/hotel6.jpeg',
num:'8.7分',
name:'曼谷利特酒店'
},
{
src:'../../static/hotel/hotel7.jpeg',
num:'8.3分',
name:'暹罗四季酒店'
},
{
src:'../../static/hotel/hotel8.jpeg',
num:'8.7分',
name:'曼谷廊曼机场阿玛瑞酒店'
},
]
};
}
}
</script>
<style lang="scss">
.content{
//标题名
.title{
margin-top: 50px;
margin: 100px 0 25px 0 ;
text-align: center;
color: #333;
font-size: 24px;
line-height: 30px;
}
.box{
width: 1000px;
margin: 0 auto;
.active{
border-bottom: 3px solid $color;
color: $color;
margin-bottom: -2px;
}
.box1-content{
//菜单栏
.content-title{
display: flex;
font-size: 18px;
height: 50px;
text-align: center;
line-height: 50px;
border-bottom: 1px solid #e4e4e4;
&>view{
width: 16.6%;
cursor: pointer;
}
}
//内容
.neirong{
.nr-box{
width: 1023px;
display: flex;
flex-wrap: wrap;
.nr-content{
width: 318px;
height: 240px;
margin: 20px 23px 0 0 ;
position: relative;
.content-text{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
font-size: 30px;
color: #fff;
font-weight: normal;
text-shadow: 2px 2px 2px rgba(0,0,0,.8);
margin-top: -30px;
.content-dzhi{
font-size: 16px;
}
}
}
}
}
}
}
.box2{
&>.box1-content{
&>.neirong{
margin-top: 20px;
.nr2-content{
position: relative;
width: 240px;
height: 240px;
overflow: hidden;
margin:0 13px 13px 0;
.nr-img{
width: 100%;
height:100%;
}
//阴影
.bac{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color:rgb(83, 83, 83);
z-index: 2;
opacity: .2;
transition: all 0.5s;
}
&:hover .bac{
opacity: 0;
}
.content-text{
.text-num{
position: absolute;
top: 13px;
left: 13px;
border-radius: 4px;
text-align: center;
width: 55px;
height: 25px;
color: #fff;
font-size: 18px;
background-color: rgba(0,0,0,.5);
}
.text-name{
position: absolute;
bottom: 13px;
left: 13px;
margin-top: -30px;
font-size: 14px;
color: #ffffff;
width: 220px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}
}
}
}
}
}
}
</style>
components/index/body.vue
浏览文件 @ f5231d07
......@@ -2,7 +2,8 @@
<view class="content">
<!-- 第一行 -->
<view class="title">
<view v-for="(index,i) in titConten" :key='i' class="title-font" :style="{backgroundPositionY:index.position}">
<view v-for="(index,i) in titConten" :key='i' class="title-font"
:style="{backgroundPositionY:index.position}">
<view class="font-1">
{{index.title}}
</view>
......@@ -13,282 +14,114 @@
</view>
<!-- 第二行 -->
<view class="body">
<!-- 左边 -->
<view class="body-left">
<!-- 左 标题栏 -->
<view class="left-title">
<navigator url="#">
<image src="../../static/index/body/left-title.png" style="width: 218px;height: 31px;"></image>
</navigator>
</view>
<!-- 左 专栏 -->
<view class="left-column">
<view class="column-title">
<navigator url="#" class="titColor">旅行家专栏</navigator>
<navigator url="#" class="titIndex">专栏首页</navigator>
</view>
<view >
<!-- 原生轮播 -->
<swiper :indicator-dots="true" :autoplay="false" circular="true" class="left-banner" >
<swiper-item style="height: 500px;" v-for="(item,i) in banner" :key='i' >
<image :src='item.src' :draggable="false" mode="scaleToFill" class="banner" >
</image>
<view style="padding: 0 10px;">
<view class="banner-left">{{item.title}}</view>
<view class="banner-right">{{item.detail}}</view>
</view>
</swiper-item>
</swiper>
<!-- 扩展轮播 -->
<!-- <uni-swiper-dot :info="banner" :current="current" :mode="mode" class="left-banner" :dotsStyles="dotsStyles" >
<swiper autoplay="false" class="swiper-box aaa" @change="change" circular="true" interval='300000' >
<swiper-item v-for="(item ,i) in banner" :key="i" class="banner" >
<view class="swiper-item" >
<image :src='item.src' :draggable="false" mode="scaleToFill" class="banner" >
</view>
<view style="padding: 0 5px;">{{item.detail}}</view>
</swiper-item>
</swiper>
</uni-swiper-dot> -->
</view>
</view>
</view>
<leftIndex></leftIndex>
<!-- 右边 -->
<view class="body-right">
</view>
<rightIndex></rightIndex>
</view>
<!-- </view> -->
</view>
</template>
<script>
import leftIndex from '@/components/index/left-body.vue'
import rightIndex from '@/components/index/right-body.vue'
export default {
name:"index-header",
name: "index-header",
data() {
return {
//title 精灵图
titConten:[
{
position:'-650px',
title:'自由行',
content:'旅行就要更自在'
},
{
position:'-24px',
title:'跟团游',
content:'行程透明省心游'
},
{
position:'-129px',
title:'当地游',
content:'最地道的玩法体验'
titConten: [{
position: '-650px',
title: '自由行',
content: '旅行就要更自在'
},
{
position:'-441px',
title:'机票',
content:'特惠一折起'
position: '-24px',
title: '跟团游',
content: '行程透明省心游'
},
{
position:'-546px',
title:'订酒店',
content:'一键全网性价比'
position: '-129px',
title: '当地游',
content: '最地道的玩法体验'
},
{
position:'-335px',
title:'签证',
content:'出签率高服务佳'
position: '-441px',
title: '机票',
content: '特惠一折起'
},
{
position:'-233px',
title:'邮轮',
content:'移动的海上城堡'
}
],
banner:[
{
src:'../../static/index/banner/1.jpeg',
url:'#',
title:'夏木尼，小王子的玫瑰城市',
detail:'夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。'
},
{
src:'../../static/index/banner/2.jpeg',
url:'#',
title:'暹粒油淋鱼',
detail:'默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。'
position: '-546px',
title: '订酒店',
content: '一键全网性价比'
},
{
src:'../../static/index/banner/3.jpeg',
url:'#',
title:'西安：旧长安的画皮',
detail:'西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。'
position: '-335px',
title: '签证',
content: '出签率高服务佳'
},
{
src:'../../static/index/banner/4.jpeg',
url:'#',
title:'漫山岛',
detail:'漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。'
},
{
src:'../../static/index/banner/5.jpeg',
url:'#',
title:' 胡日尔镇的美术馆',
detail:'我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。'
position: '-233px',
title: '邮轮',
content: '移动的海上城堡'
}
],
//存放轮播图的index
//扩展轮播 start
// current: 0,
// mode: 'round',
// dotsStyles:{
// width:10
// }
//扩展轮播 end
};
},
methods:{
//拓展轮播
// change(e) {
// this.current = e.detail.current;
// }
}
methods: {
},
components:{
leftIndex,
rightIndex
}
}
</script>
<style lang="scss">
.content{
.content {
width: 1000px;
margin: 0 auto;
padding:0 20px;
}
//第一行
.title{
.title {
display: flex;
justify-content: space-around;
padding:20px 0 ;
padding: 20px 0;
//框内样式
.title-font{
.title-font {
border: 1px solid #e5e5e5;
width: 127px;
height: 47px;
background:url(~@/static/index/body/jinglingtu.png) no-repeat;
background: url(~@/static/index/body/jinglingtu.png) no-repeat;
// background: url();
padding:10px 0 0 5px;
padding: 10px 0 0 5px;
// background-repeat: no-repeat;
background-size:104px auto ;
background-position-x:60px;
background-size: 104px auto;
background-position-x: 60px;
// background-position-y:-650px;
//内容1
.font-1{
.font-1 {
font-weight: bolder;
}
//内容2
.font-2{
.font-2 {
font-size: 12px;
color: #9d9d9d;
line-height: 20px;
}
}
}
.body{
//左栏 标题字 左
.titColor{
color: #333;
font-size: 18px;
}
//左栏 标题字 右
.titIndex{
color: #999;
font-size: 12px;
}
//左栏
.banner-left{
color: #333;
font-size: 16px;
line-height: 26px;
// margin-bottom: 10px;
}
.banner-right{
font-size: 14px;
line-height: 20px;
height: 60px;
overflow: hidden;
color: #666;
}
.body-left{
float: left;
width: 260px;
//左标示图
.left-title{
margin-bottom: 30px;
}
//专栏
.left-column{
//专栏 标题文字
.column-title{
margin-bottom: 12px;
height: 35px;
&>navigator{
line-height:35px ;
}
&>navigator:nth-child(1){
float: left;
}
&>navigator:nth-child(2){
float: right;
}
}
//轮播图框
// .aaa{
// border: 1px solid #000;
// &>:nth-child(1){
// overflow: visible;
// }
// }
.left-banner{
height: 280px;
//轮播图大小
& /deep/ .uni-swiper-dots-horizontal{
// border: 1px solid #FF9D00;
bottom: 50%;
transform: translate(10px);
.uni-swiper-dot{
border-radius: 5px;
width: 15px;
background-color: rgba(255,255,255,.8);
}
.uni-swiper-dot:hover{
background-color: #ff9d00;
}
.uni-swiper-dot-active{
background-color: #ff9d00;
}
}
.banner{
width: 260px;
height: 150px;
cursor: auto;
}
}
}
}
.body-right{
float: right;
}
}
.body::after{
.body::after {
content: '';
clear: both;
height: 0;
......
components/index/bottom.vue 0 → 100644
浏览文件 @ f5231d07
<template>
<view class="bot">
<view class="bot-content">
<view class="box">
<view class="box1">
<view>马蜂窝旅游网</view>
<view>中国年轻一代用得更多的旅游网站</view>
<view>上亿旅行者共同打造的
<text class="textColor">"旅行神器"</text>
</view>
<view>
<view class="textColor">
60,000
</view>
多个全球旅游的目的地
</view>
<view>
<view class="textColor">600,00 </view>
个细分目的地新玩法
</view>
<view>
<view class="textColor">760,000,000 </view>
次攻略下载
</view>
<view>
<view class="textColor">
38,000
</view>
家旅游产品供应商
</view>
</view>
<view class="box2">
<view>关于我们</view>
<view>
<navigator url="#">关于马蜂窝</navigator>
<navigator url="#">联系我们</navigator>
</view>
<view>
<navigator url="#">隐私政策</navigator>
<navigator url="#">商标声明</navigator>
</view>
<view>
<navigator url="#">服务协议</navigator>
</view>
<view>
<navigator url="#">商城平台服务协议</navigator>
</view>
<view>
<navigator url="#">网络信息侵权通知指引</navigator>
</view>
<view>
<navigator url="#">马蜂窝旅游网服务监督员</navigator>
</view>
<view>
<navigator url="#">网站地址</navigator>
<navigator url="#" class="textColor">加入马蜂窝</navigator>
</view>
</view>
<view class="box3">
<view style="text-align: center;">旅游服务</view>
<view class="box3-content">
<view>
<navigator>旅游攻略</navigator>
<navigator>酒店预订</navigator>
</view>
<view>
<navigator>旅游特价</navigator>
<navigator>酒店预订</navigator>
</view>
<view>
<navigator>旅游问答</navigator>
<navigator>旅游保险</navigator>
</view>
<view>
<navigator>旅游指南</navigator>
<navigator>订火车票</navigator>
</view>
<view>
<navigator>旅游咨询</navigator>
<navigator>APP下载</navigator>
</view>
<view class="textColor">
旅游商城全球商家入驻
</view>
</view>
</view>
<view class="box4">
<view class="box4-content">
<view src="../../static/bottom/app.png" mode=""></view>
<view>马蜂窝APP</view>
<view>扫码立即下载</view>
</view>
<view>
<view src="../../static/bottom/dingyuehao.gif" mode=""></view>
<view>马蜂窝旅游</view>
<view>订阅号</view>
</view>
<view>
<view src="../../static/bottom/fuwuhao.png" mode=""></view>
<view>马蜂窝良品</view>
<view>官方服务号</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.bot{
background-color: #3c3c3c;
color: #c2c2c2;
line-height: 22px;
font-size: 12px;
margin-top: 50px;
.bot-content{
width: 1105px;
margin: 0 auto;
.box{
display: flex;
flex-wrap: wrap;
padding: 30px 8px 40px 8px;
&>view{
&>view:nth-child(1){
font-size: 14px;
height: 30px;
}
}
navigator{
display: inline-block;
}
navigator:hover{
color: #fff;
}
.textColor{
color: $color;
display: inline-block;
margin-right: 3px;
}
.box1{
width: 200px;
margin-right: 66px;
}
.box2{
width: 145px;
margin-right: 85px;
navigator{
margin-right: 10px;
}
}
.box3{
width: 135px;
margin-right: 80px;
.box3-content{
margin-right: -35px;
}
navigator{
width: 85px;
}
}
.box4{
display: flex;
flex-wrap: wrap;
line-height: 25px;
&>view{
width: 100px;
text-align: center;
}
.font{
}
&>view:not(:last-child){
margin-right: 30px;
}
&>view>view:not(:first-child){
font-size: 12px;
}
&>view>view:nth-child(1){
height: 90px;
margin: 0 0 8px 6px;
}
&>view:nth-child(1)>view:nth-child(1){
background: url(../../static/bottom/app.png) no-repeat;
}
&>view:nth-child(2)>view:nth-child(1){
background: url(../../static/bottom/dingyuehao.gif) no-repeat;
}
&>view:nth-child(3)>view:nth-child(1){
background: url(../../static/bottom/fuwuhao.png) no-repeat;
}
}
}
}
}
</style>
components/index/header.vue
浏览文件 @ f5231d07
......@@ -7,18 +7,18 @@
<navigator url="#" class="logo"></navigator>
</view>
<view class="head-nav uni-flex">
<view class="nav">
<navigator url="#">首页</navigator>
<view class="nav" :class="{'active':active==1}">
<navigator url="../../pages/index/index" @click="act(1)">首页</navigator>
</view>
<view class="nav">
<navigator url="#">目的地</navigator>
<view class="nav" :class="{'active':active==2}">
<navigator url="#" @click="act(2)">目的地</navigator>
</view>
<view class="nav">
<navigator url="#">旅游攻略</navigator>
<view class="nav" :class="{'active':active==3}">
<navigator url="#" @click="act(3)">旅游攻略</navigator>
</view>
<view class="nav-xl nav">
<view class="nav-xl-nav">
<navigator url="#">
<view class="nav-xl nav" :class="{'active':active==4}">
<view class="nav-xl-nav" >
<navigator url="#" @click="act(4)">
<text>去旅行</text>
<text class="nav-icon"></text>
</navigator>
......@@ -33,11 +33,11 @@
<view class="xl-br">签证</view>
</view>
</view>
<view class="nav">
<navigator url="#">机票火车</navigator>
<view class="nav":class="{'active':active==5}">
<navigator url="#" @click="act(5)" >机票火车</navigator>
</view>
<view class="nav">
<navigator url="#">订酒店</navigator>
<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-nav">
......@@ -58,7 +58,7 @@
</view>
</view>
<view class="nav">
<navigator url="#">APP</navigator>
<navigator url="#" >APP</navigator>
</view>
<view class="nav">
<navigator url="#" class="nav-logo"></navigator>
......@@ -70,7 +70,7 @@
<navigator url="#" class="login-wx login-icon"></navigator>
<navigator url="#" class="login-size">登录</navigator>
<text>|</text>
<navigator url="#" class="login-size">注册</navigator>
<navigator url="../../pages/reg/reg" class="login-size">注册</navigator>
</view>
</view>
<view class="head-bottom"></view>
......@@ -87,14 +87,23 @@
return {
list:[
{title:'首页'}
]
],
active:1
};
}
},
methods:{
act(a){
this.active=a
console.log(a)
}
},
}
</script>
<style lang="scss">
$color:#ff9d00;
//最大屏
@media (min-width:1440px) {
.head-box{
......@@ -111,6 +120,9 @@
view{
line-height: 68px;
}
.nav{
font-size: 16px;
}
.nav:hover{
color: $color;
border-bottom: 3px solid $color;
......@@ -148,8 +160,11 @@
color: $color;
border-bottom: 3px solid $color;
z-index: 999;
height: 58px;
// height: 58px;
}
.nav{
font-size: 14px;
}
.xl{
top: 53px;
}
......@@ -191,6 +206,11 @@
// position: relative;
float: left;
color: #333;
.active{
background-color: $color;
color: #fff;
}
.nav{
padding: 2px 16px;
z-index: 4;
......
components/index/left-body.vue 0 → 100644
浏览文件 @ f5231d07
<template>
<!-- 左边 -->
<view class="body-left">
<!-- 左 标题栏 -->
<view class="left-title">
<navigator url="#">
<image src="../../static/index/body/left-title.png" style="width: 218px;height: 31px;"></image>
</navigator>
</view>
<!-- 左 专栏 -->
<view class="left-column">
<view class="column-title">
<navigator url="#" class="titColor">旅行家专栏</navigator>
<navigator url="#" class="titIndex">专栏首页</navigator>
</view>
<view>
<!-- 原生轮播 -->
<swiper :indicator-dots="true" :autoplay="false" circular="true" class="left-banner">
<swiper-item style="height: 500px;" v-for="(item,i) in banner" :key='i'>
<navigator :url="item.url">
<image :src='item.src' :draggable="false" mode="scaleToFill" class="banner img">
</image>
</navigator>
<view style="padding: 5px 10px;">
<navigator :url="item.url">
<view class="banner-left">{{item.title}}</view>
</navigator>
<view class="banner-right">{{item.detail}}</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- 左 专栏下 -->
<view class="left-hostList">
<!-- 专栏下 盒子box -->
<view class="hostList-box" v-for="(item,index) in hostList" :key='index'>
<view class="column-title">
<text class="hostList_title_left">{{item.leftTitle}}</text>
<navigator :url="item.url" class="titIndex">{{item.rightTitle}}</navigator>
</view>
<view>
<navigator :url="item.url">
<image :src="item.src" mode="" class="img"></image>
</navigator>
</view>
<view style="padding: 5px 10px; ">
<navigator :url="item.url">
<view class="banner-left">
{{item.title}}
</view>
</navigator>
<view class="banner-right">
{{item.detail}}
</view>
</view>
</view>
</view>
<!-- 左 最新资讯 -->
<view class="left-new">
<view class="new-title">
<view>马蜂窝</view>
<navigator url="#">
旅游网
</navigator>
<view>最新资讯</view>
</view>
<view class="new-info">
<view class="info-box" v-for="(item,index) in newInfo" :key='index'>
<text>{{item.leftTitle}}</text>
<navigator url="#" >
{{item.rightTitle}}
</navigator>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//左栏小轮播
banner: [{
src: '../../static/index/banner/1.jpeg',
url: '#',
title: '夏木尼，小王子的玫瑰城市',
detail: '夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。'
},
{
src: '../../static/index/banner/2.jpeg',
url: '#',
title: '暹粒油淋鱼',
detail: '默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。'
},
{
src: '../../static/index/banner/3.jpeg',
url: '#',
title: '西安：旧长安的画皮',
detail: '西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。'
},
{
src: '../../static/index/banner/4.jpeg',
url: '#',
title: '漫山岛',
detail: '漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。'
},
{
src: '../../static/index/banner/5.jpeg',
url: '#',
title: ' 胡日尔镇的美术馆',
detail: '我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。'
}
],
//左下资料
hostList: [{
leftTitle: '旅游攻略推荐',
rightTitle: '更多>',
src: '../../static/index/hostList/1.jpg',
url: '#',
title: '青海湖环线自驾一网打尽油菜花+盐湖+祁连山',
detail: ''
},
{
leftTitle: '最新活动',
rightTitle: '查看全部>',
src: '../../static/index/hostList/2.jpg',
url: '#',
title: '潮玩旅行路书',
detail: '来定制路书，跟哈弗一起去潮玩！'
},
{
leftTitle: '未知旅行实验室',
rightTitle: '查看更多>',
src: '../../static/index/hostList/3.jpg',
url: '#',
title: '',
detail: ''
},
{
leftTitle: '加入马蜂窝',
rightTitle: '了解详情>',
src: '../../static/index/hostList/4.jpg',
url: '#',
title: '',
detail: ''
}
],
//最新资讯
newInfo:[
{
leftTitle:'04月07日',
rightTitle:'马蜂窝“云旅游”直播的攻与守',
url:'#'
},
{
leftTitle:'04月01日',
rightTitle:'马蜂窝的“云上战疫”',
url:'#'
},
{
leftTitle:'02月19日',
rightTitle:'科技“战疫” ：马蜂窝大数据赋能旅游业',
url:'#'
},
{
leftTitle:'02月13日',
rightTitle:'陈罡：疫情下旅游业的“守恒与求变”',
url:'#'
},
{
leftTitle:'02月06日',
rightTitle:'马蜂窝将退订完成率定为最高KPI',
url:'#'
},
{
leftTitle:'09月28日',
rightTitle:'马蜂窝国庆白领出游偏好调查：超7成在旅途中工作',
url:'#'
}
]
};
}
}
</script>
<style lang="scss">
.body-left {
float: left;
width: 260px;
//左栏 标题字 左
.titColor {
color: #333;
font-size: 18px;
}
//左栏 标题字 右
.titIndex {
color: #999;
font-size: 12px;
}
.titIndex:hover {
text-decoration: underline;
}
//左栏
.banner-left {
color: #333;
font-size: 16px;
line-height: 26px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.banner-left:hover {
color: $color;
text-decoration: underline;
}
.banner-right {
font-size: 14px;
line-height: 20px;
// height: 60px;
overflow: hidden;
color: #666;
}
//左标示图
.left-title {
margin-bottom: 30px;
}
//专栏 标题文字
.column-title {
margin-bottom: 12px;
height: 35px;
&>navigator {
line-height: 35px;
}
&>navigator:nth-child(1) {
float: left;
}
&>navigator:nth-child(2) {
float: right;
}
}
.img {
width: 260px;
height: 150px;
}
//专栏
.left-column {
.left-banner {
height: 280px;
//轮播图大小
& /deep/ .uni-swiper-dots-horizontal {
// border: 1px solid #FF9D00;
bottom: 50%;
transform: translate(10px);
.uni-swiper-dot {
border-radius: 5px;
width: 15px;
background-color: rgba(255, 255, 255, .8);
}
.uni-swiper-dot:hover {
background-color: #ff9d00;
}
.uni-swiper-dot-active {
background-color: #ff9d00;
}
}
.banner {
cursor: pointer;
}
}
}
//专栏下方
.left-hostList {
.hostList-box {
padding-bottom: 20px;
.hostList_title_left {
font-size: 18px;
color: #333;
}
}
}
//最新资讯
.left-new {
//标题名
.new-title {
display: flex;
font-size: 18px;
flex-flow: row;
padding-bottom: 10px;
color: #333;
> {
display: inline-block;
}
}
//资讯
.new-info{
.info-box{
font-size: 12px;
color: #666;
display: flex;
line-height: 24px;
padding-top: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
>:nth-child(1){
padding-right: 5px;
}
:nth-child(2){
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:nth-child(2):hover{
text-decoration: underline;
}
}
}
}
}
</style>
components/index/right-body.vue 0 → 100644
浏览文件 @ f5231d07
此差异已折叠。
manifest.json
浏览文件 @ f5231d07
......@@ -65,6 +65,9 @@
"mp-toutiao" : {
"usingComponents" : true
},
"h5":{
"publicPath":"../"
},
"uniStatistics": {
"enable": false
}
......
pages.json
浏览文件 @ f5231d07
......@@ -6,7 +6,25 @@
}
}
],
,{
"path" : "pages/reg/reg",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/hotel/hotel",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "q-trip",
......@@ -15,5 +33,6 @@
//#endif
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
pages/hotel/hotel.vue 0 → 100644
浏览文件 @ f5231d07
<template>
<view>
<indexHeader></indexHeader>
<hotelConten></hotelConten>
<bottom></bottom>
</view>
</template>
<script>
import indexHeader from '@/components/index/header.vue';
import hotelConten from '@/components/hotel/content.vue'
import bottom from '@/components/index/bottom.vue'
export default {
data() {
return {
}
},
methods: {
},
components:{
indexHeader,
hotelConten,
bottom
}
}
</script>
<style lang="scss">
</style>
pages/index/index.vue
浏览文件 @ f5231d07
<template>
<view class="">
<view class="index">
<indexHeader></indexHeader>
<indexBanner></indexBanner>
<indexBody></indexBody>
<bottom></bottom>
</view>
</template>
......@@ -10,6 +11,8 @@
import indexHeader from '@/components/index/header.vue'
import indexBanner from '@/components/index/banner.vue'
import indexBody from '@/components/index/body.vue'
import bottom from '@/components/index/bottom.vue'
export default {
data() {
return {
......@@ -28,7 +31,8 @@
components:{
indexHeader,
indexBanner,
indexBody
indexBody,
bottom
}
}
</script>
......
pages/reg/reg.vue 0 → 100644
浏览文件 @ f5231d07
<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>
</template>
<script>
export default {
data() {
return {
num:1,
// backImg:url(`../../static/reg/{{this.num}}.jpg`)
}
},
methods: {
},
onLoad() {
this.num=parseInt(Math.random()*9)
}
}
</script>
<style lang="scss">
.content{
width: 100vw;
height: 100vh;
background-position: 50% 50%;
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%;
position: absolute;
top: 22%;
overflow: hidden;
//内容
.reg-box{
margin: 0 auto;
width: 730px;
height: 434px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 3px 3px rgba(0,0,0, 0.4);
.box-left{
position: relative;
width: 440px;
height: 434px;
padding: 0 58px 0 62px;
box-sizing: border-box;
float: left;
.regui{
height: calc(100% - 97px);
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
.phone{
border-radius: 6px;
// border-color: #;
background-color: #f6f7f9;
width: 306px;
height: 28px;
border: 1px solid #f6f7f9;
font-size: 14px;
color: #666;
line-height: 28px;
padding: 6px 0 6px 12px;
box-shadow: 0 0 5px #fff;;
outline: 0;;
}
.btn{
padding: 17px 0 0 ;
.reg-btn{
background-color: $color;
color: #FFFFFF;
border-radius: 6px;
font-size: 18px;
font-weight: 500;
width: 320px;
height: 42px;
border: 0;
text-align: center;
line-height: 40px;
}
}
.agreement{
display: flex;
flex-direction: row-reverse;
font-size: 12px;
padding: 10px 0 ;
color: #666;
&>:nth-child(2){
color: #aaa;
margin-right: 10px;
}
}
}
.icon-box{
background: linear-gradient(270deg,rgba(246,247,249,0.3) 0,rgba(246,247,249,1) 100%);
position: absolute;
height: 97px;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
padding: 0 41px;
.icon-title{
padding: 12px 0 ;
color: rgb(148,150,154);
line-height: 20px;
font-size: 14px;
}
.icons{
display: flex;
&>navigator{
width: 34px;
height: 34px;
margin-right: 32px;
background-size: 34px;
transition: all .3s;
}
&>navigator:nth-child(1){
background-image:url(../../static/reg/ic_weibo.png);
}
&>navigator:nth-child(1):hover{
background-image:url(../../static/reg/ic_weibo_sel.png);
}
&>navigator:nth-child(2){
background-image:url(../../static/reg/ic_qq.png);
}
&>navigator:nth-child(2):hover{
background-image:url(../../static/reg/ic_qq_sel.png);
}
&>navigator:nth-child(3){
background-image:url(../../static/reg/ic_weixin.png);
}
&>navigator:nth-child(3):hover{
background-image:url(../../static/reg/ic_weixin_sel.png);
}
}
}
}
.box-right{
float: right;
width: 290px;
height: 434px;
box-sizing: border-box;
border-radius: 0 8px 8px 0;
position: relative;
background-image: url(../../static/reg/img_download.png);
.download{
position: absolute;
bottom: 15px;
// background-color: pink;
width: 30px;
height: 30px;
right: 15px;
cursor: pointer;
}
}
}
//下方提示
.bottom{
width: 140px;
margin: 10px auto;
border-radius: 15px;
background-color: rgba(0,0,0,.4);
text-align: center;
font-size: 12px;
color: #fff;
padding: 4px 0 ;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
display: flex;
justify-content: center;
navigator{
color: $color;
}
}
}
}
</style>
uni.scss
浏览文件 @ f5231d07
......@@ -13,7 +13,7 @@
*/
/* 颜色变量 */
$color:#ff9d00;
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
......