Skip to content

A
Athena
Commit 6c302dd8 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

列表

parent 958a3552
Show whitespace changes
Inline Side-by-side
Showing with 1864 additions and 225 deletions
src/assets/css/common.css
View file @ 6c302dd8
......@@ -7,12 +7,18 @@
.commonF .f14{
font-size: 14px;
}
.commonF .f16{
font-size: 16px;
}
.commonF .f18{
font-size: 18px;
}
.commonF .f20{
font-size: 20px;
}
.commonF .f24{
font-size: 24px;
}
.commonF .f26{
font-size: 26px;
}
......@@ -64,6 +70,13 @@
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.commonF .text4{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.commonF .cee{
color: #EE4454
}
......@@ -94,3 +107,18 @@
.commonF .c99{
color: #999999
}
.commonF .cff{
color: #ffffff
}
.del-text{
text-decoration: line-through
}
.bold{
font-weight: bold;
}
.PingFangR{
font-family: 'PingFangR'
}
.mg-r-10{
margin-right: 10px;
}
\ No newline at end of file
src/components/FreeTravel/FreeDetail.vue
View file @ 6c302dd8
<template>
<div class="commonF FreeDetail">
<div class="commonF FreeDetail" v-if="loading">
<div class="w1200">
<div class="bannerImg">
<img style="width:100%;height:100%" src="../../assets/img/juan/banner.png" alt="">
......@@ -11,16 +11,16 @@
</div>
<div class="Content basefix" style="margin-top:20px;margin-bottom:50px">
<div class="left" style="width:795px;margin-right:47px">
<p class="pfR">【东京人气温泉】大江户温泉物语实体门票（台湾邮寄）</p>
<p class="f14 c99" style="margin:15px 0">东京旅行必去台场的大江户温泉物语，体验江户时代造景的主题乐园。在 KKday 购买比官网便宜的台场大江户门票，带你穿上浴衣漫步在江户时代街道，泡汤、美食、休閒娱乐一次满足，适合全家大小、三五好友一起来同乐！</p>
<p class="pfR">{{dataDetail.prod_name}}</p>
<p class="f14 c99" style="margin:15px 0">{{dataDetail.prod_desc}}</p>
<el-row class="titleEl f14">
<el-col :span="6">
<img src="../../assets/img/free/xc.png" alt="">
<span>行程时间12小时</span>
<span>行程时间{{dataDetail.hours}}小时</span>
</el-col>
<el-col :span="6">
<img src="../../assets/img/free/yy.png" alt="">
<span>日语/English导游</span>
<span v-for="(item, index) in dataDetail.guide_lang_list">{{item.lang_name}} <span v-if="index != dataDetail.guide_lang_list.length -1 ">/</span> </span>
</el-col>
<el-col :span="6">
<img src="../../assets/img/free/yxq.png" alt="">
......@@ -171,13 +171,38 @@ export default {
tomonth: moment().format("YYYY-MM"),
classArray: [],
num:1,
dataDetail: {},
loading: false,
}
},
mounted() {
let list=[];
let id = this.$route.query.id
this.getDetails(id)
this.creatCalendar(list);
},
methods: {
getDetails(id){
// http://efficient.oytour.com/api/kkday/QueryProduct
this.apiJavaPost(
"/api/kkday/QueryProduct",
{
"prod_no": id ? id : "28474",
"locale":"zh-cn"
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prod
console.log(data)
this.loading = true
this.dataDetail = data
} else {
this.Error(res.data.message);
}
},
null
);
},
handleChange(){},
// 改变月份
ChangeMonth(num){
......
src/components/FreeTravel/FreeHome.vue
View file @ 6c302dd8
......@@ -15,6 +15,9 @@
text-align: center;
}
.fh-search-box{
position: relative;
}
.fh-search-box .fh-search-box-input{
width:725px;
height: 100px;
background:rgba(7,109,155,.2);
......@@ -25,7 +28,7 @@
display: flex;
margin: 0 auto;
}
.fh-search-box div{
.fh-search-box .fh-search-box-input div{
height: 46px;
display: flex;
align-items: center;
......@@ -33,20 +36,28 @@
box-sizing: border-box;
padding: 0 20px;
}
.fh-search-box div:nth-child(1){
.fh-search-box .fh-search-box-input div:nth-child(1){
flex: 2;
}
.fh-search-box div:nth-child(1) input{
.fh-search-box .fh-search-box-input div:nth-child(1) input{
width: 100%;
border: none;
outline:none;
color: white;
background-color: transparent;
}
.fh-search-box div:nth-child(1) input::-webkit-input-placeholder {
.fh-search-box .fh-search-box-input div:nth-child(1) input::-webkit-input-placeholder {
color: white;
}
.fh-search-box div:nth-child(2){
.inputActive{
width: 675px;
position: absolute;
left: 21.9%;
top: 72px;
z-index: 3;
background-color: white;
}
.fh-search-box .fh-search-box-input div:nth-child(2){
width: 77px;
justify-content: center;
background:rgba(238,68,84,1);
......@@ -65,12 +76,68 @@
background-repeat: no-repeat;
position: relative;
margin-right: 6px;
transition: all linear .5s;
overflow: hidden;
}
.FreeHome .fh-city .city-s>img{
width: 185px;
height: 100%;
.city-tag{
padding: 13px 20px;
color: #333;
width: 100%;
box-sizing: border-box;
position: relative;
}
.FreeHome .fh-city .city-s>span,.FreeHome .fh-city .city-m>span{
.city-tag.active{
background-color: #EE4454;
color: white;
}
.city-tag p{
font-size:14px;
margin-bottom: 5px;
}
.city-tag div span{
display: inline-block;
padding: 2px 4px 0 0;
}
.triangle-up {
position: absolute;
right: -3px;
top: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid white;
transform: rotate(-90deg);
}
.city-list{
display: flex;
padding: 10px;
}
.city-list>span{
width: 100px;
font-size:14px;
color: #333;
font-weight:bold;
}
.city-list>p{
color: #888888;
cursor: pointer;
font-size: 12px;
}
.city-list>p span{
display: inline-block;
padding-right: 20px;
}
.FreeHome .fh-city .city-s>div{
/* background-image: url(https://image.kkday.com/v2/image/get/w_628%2Ch_472%2Cc_fill%2Cq_55%2Ct_webp/s1.kkday.com/campaign_357/20170808084920_CZBUf/jpg); */
background-position: 50%;
background-size: cover;
height: 280px;
}
.FreeHome .fh-city .city-s>div>span,.FreeHome .fh-city .city-m>div>span{
font-size:24px;
font-family:Microsoft YaHei;
font-weight:bold;
......@@ -93,6 +160,11 @@
width: 100%;
height: 100%;
}
.FreeHome .fh-city .city-s .city-m-b{
position: absolute;
bottom: -24px;
color: white;
}
.FreeHome .fh-city .city-m .city-m-b{
display: flex;
align-items: center;
......@@ -195,7 +267,7 @@
width: 100%;
display: flex;
padding-top: 16px;
justify-content: space-between;
/* justify-content: space-between; */
}
.content-item-box-hover{
width: 100%;
......@@ -211,6 +283,7 @@
cursor: pointer;
transition: top .5s;
top: 0px;
margin-right: 25px;
}
.content-item-box-item:hover{
top: -16px;
......@@ -270,6 +343,8 @@
border-radius:6px;
padding: 10px;
cursor: pointer;
min-height: 261px;
box-sizing: border-box;
}
.content-item-box2 .img-box{
position: relative;
......@@ -330,7 +405,7 @@
height: 190px;
width: 188px;
}
.price3{
.price2{
background:#F86870 !important;
}
.price3{
......@@ -540,54 +615,171 @@
.jinxuan-time .number2{
font-size: 36px;
}
.FreeHome .el-carousel__indicator.is-active button{
width: 12px;;
}
</style>
<template>
<div class="FreeHome">
<div class="FreeHome commonF" @click="inputActive = false">
<div>
<div class="fh-tit">
<img src="../../assets/img/freeHome/top-tex.png" alt="">
</div>
<div class="fh-search-box">
<div class="fh-search-box-input">
<div>
<input type="text" placeholder="输入目的地/景点/关键字，搜索您需要的信息..">
<input type="text" @click.stop="inputActive = true" placeholder="输入目的地/景点/关键字，搜索您需要的信息..">
</div>
<div>
搜索
</div>
</div>
<div class="fh-city">
<div class="city-s">
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
<div v-show="inputActive" class="inputActive" @click.stop>
<el-row>
<el-col :span="6">
<div class="city-tag active __cp">
<p>东亚</p>
<div class="f12 text2">
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p class="f16">北美</p>
<div class="f12 text2">
<span>成都</span>
<span>四川阿坝</span>
<span>好好还会</span>
<span>上课抵抗力</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p class="f16">中东非</p>
<div class="f12 text2">
<span>菲律宾啊</span>
<span>日本掉啊</span>
<span>嗷嗷待食多</span>
<span>阿斯达是的</span>
<span>市发改委</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p class="f16">西伯利亚</p>
<div class="f12 text2">
<span>小从v四碗饭</span>
<span>阿萨德群二</span>
<span>哒哒</span>
<span>阿斯达是的</span>
<span>阿萨德</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-s">
</el-col>
<el-col :span="18">
<div class="city-list">
<span class="PingFangR">成都&成都</span>
<p>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</p>
</div>
<div class="city-list">
<span class="PingFangR">河南</span>
<p>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
</p>
</div>
<div class="city-list">
<span class="PingFangR">重庆</span>
<p>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
</p>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="fh-city" >
<div class="city-s" v-for="(item, index) in topCityList" :class="{'city-m': topCityActive == index}" @mouseenter="topCityActive = index" :key="index">
<div :style="`background-image: url(${item.src})`">
<span>{{item.name}}</span>
<div class="city-m-b">
<span>门票</span>
<span>餐食</span>
<span>一日游</span>
<img src="../../assets/img/freeHome/more_s.png" alt="">
</div>
</div>
</div>
<!-- <div class="city-s">
<div>
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
<div class="city-m">
</div>
<div class="city-s city-m" @click="goList()">
<div>
<span>东京</span>
<img src="../../assets/img/activy.jpg" alt="">
<div class="city-m-b">
<span class="active">门票</span>
<span>餐食</span>
<span>一日游</span>
<img src="../../assets/img/freeHome/more_s.png" alt="">
</div>
</div>
</div>
<div class="city-s">
<div>
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
</div>
<div class="city-s">
<div>
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
</div> -->
</div>
<div class="more-city">
<!-- <div class="more-city">
<div>
更多城市选择
</div>
</div>
</div> -->
<div class="fh-tejia">
<p>当季特价</p>
<div class="icon-item">
......@@ -602,13 +794,13 @@
</div>
</div>
<div>
<div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')">
<i class="iconfont icon-cheliang"></i>
<div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')">
<i class="iconfont icon-yiriyou"></i>
</div>
</div>
<div>
<div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')">
<i class="iconfont icon-yiriyou"></i>
<div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')">
<i class="iconfont icon-cheliang"></i>
</div>
</div>
</div>
......@@ -623,75 +815,25 @@
<p class="content-item-tit">餐食就在这里解决吧~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="content-item-box-item" v-for="(item, index) in list1" @click="goDetails(item)">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
<div class="price price3">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
</div>
</div>
</div>
<div id="yiriyou" class="content-item">
<div class="left-btn _btn">
<!-- <div class="left-btn _btn">
</div>
<div class="right-btn _btn">
......@@ -734,80 +876,55 @@
</div>
</div>
</el-col>
</el-row>
</div>
<div id="cheliang" class="content-item">
</el-row> -->
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">车程快慢，你来定~</p>
<p class="content-item-tit">放轻松，甩手一日游~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="content-item-box-item" v-for="(item, index) in list2" @click="goDetails(item)">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
<div class="price price2">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
<div id="cheliang" class="content-item">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<div class="content-item-box-item">
<p class="content-item-tit">车程快慢，你来定~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item" v-for="(item, index) in list3" @click="goDetails(item)">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
<div class="price">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
</div>
......@@ -821,43 +938,24 @@
</div>
<p class="content-item-tit">游玩门票，看过来~</p>
<el-row :gutter="20">
<el-col :span="14">
<div class="content-item-box2">
<div class="img-box img-box2">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<span class="tag price4">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item" v-for="(item, index) in menPiaoList" @click="goDetails(item)">
<div class="img-box">
<div class="price price4">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</el-col>
<el-col :span="10">
<div class="content-item-box2">
<div class="img-box">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<span class="tag price4">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="jingxuan">
<div>
......@@ -930,14 +1028,134 @@ export default {
'cheliang',
'menpiao',
],
activeId: 'meals'
inputActive: false,
activeId: 'meals',
dataList: [],
menPiaoList: [],
list1: [],
list2: [],
list3: [],
topCityActive: 0,
topCityList: [{
name: '东京',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg",
id: 1,
},{
name: '京都',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg",
id: 2,
},{
name: '大阪',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg",
id: 3,
},{
name: '首尔',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg",
id: 0,
},{
name: '曼谷',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg",
id: 4,
}]
}
},
mounted() {
this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
this.getDataList()
this.getTaocanList()
},
methods: {
goDetails(obj){
this.$router.push({
name: "FreeDetail",
query: {
id: obj.prod_url_no,
}
});
},
goList(){
this.$router.push({ name: "FreeList" });
},
getDataList(){
// http://efficient.oytour.com/api/kkday/commodityList
this.apiJavaPost(
"/api/kkday/commodityList",
{
"cat_sub_keys":["TAG_1_3"],
"cat_main_keys":["TAG_1"],
"page_size":"8",
"date_from":"20180101",
"date_to":"20191231",
"guide_langs":["English"],
"price_from":"0",
"price_to":"1000",
"keywords":"ski",
"sort":"PAESC",
"start":"0",
"durations":["24,48"],
"stats":["price"],
"locale":"zh-cn",
"voucher_type":"01",
"state":"tw"
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods,menPiaoList = [], list1 = [], list2 = [], list3 = [];
console.log(data)
// M01 一日遊
// M02 多日遊
// M03 機場接送
// M04 司機/交通
// M05 票券
// M06 半日遊
// M07 私人導遊
// M08 點對點接送
data.map(x=>{
if (x.countries[0].name.indexOf('台灣') !== -1 || x.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x.countries[0].name.indexOf('澳门') !== -1){
x.countries[0].name = `中国-${x.countries[0].name}`
}
if (x.prod_type == 'M05') { // M05 票券
menPiaoList.push(x)
} else if (x.prod_type == 'M06') {
// list1.push(x)
} else if (x.prod_type == 'M01' || x.prod_type == 'M02') { // M01 一日遊 M06 半日遊
list2.push(x)
} else if (x.prod_type == 'M04' || x.prod_type == 'M08' || x.prod_type == 'M03') { // M04 司機/交通 M03 機場接送 M08 點對點接送
list3.push(x)
}
})
this.list1 = list1;
this.list2 = list2;
this.list3 = list2;
this.dataList = data
this.menPiaoList = menPiaoList
this.$forceUpdate()
} else {
this.Error(res.data.message);
}
},
null
);
},
getTaocanList(){
//http://efficient.oytour.com/api/kkday/QueryPackage
this.apiJavaPost(
"/api/kkday/QueryPackage",
{
"prod_no": "20140",
"locale":"zh-cn"
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods
} else {
this.Error(res.data.message);
}
},
null
);
},
handleScroll(){
try {
let current=''
......
src/components/FreeTravel/FreeList.vue 0 → 100644
View file @ 6c302dd8
<style>
.fl-top-box{
height: 287px;
background: url(../../assets/img/ps8b67947fa38de6aa-9517-4c0f-a433-f178bd05084f.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.fl-top{
width: 1200px;
height: 100%;
margin: 0 auto;
padding-top: 56px;
box-sizing: border-box;
position: relative;
z-index: 2;
display: flex;
justify-content: space-around;
}
.fl-zhezhao{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5)
}
.fl-ad{
display: flex;
color:rgba(255,255,255,1);
}
.fl-adname{
font-size:56px;
font-family:Microsoft YaHei;
font-weight:bold;
padding-right: 33px;
}
.change-ad{
margin-top: 30px;
width: 107px;;
}
.fl-ad-box{
margin-top: 15px;
}
.fl-ad-box>p{
background-color: transparent;
}
.fl-ad-box>p>span{
color: #333;
padding: 13px 16px;
display: inline-block;
background-color: white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-weight:bold;
}
.fl-ad-cont{
width:653px;
/* height:375px; */
background:rgba(246,246,246,1);
box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-top-right-radius: 4px;
position: absolute;
z-index: 5;
}
.fl-ad-cont .search{
padding: 16px;
position: relative;
}
.fl-ad-cont .search span{
position: absolute;
color: #333;
right: 2px;
top: 3px;
font-size: 12px;
font-weight: bold;
}
.city-tag{
padding: 13px 20px;
color: #333;
width: 100%;
box-sizing: border-box;
position: relative;
}
.city-tag.active{
background-color: #EE4454;
color: white;
}
.city-tag p{
font-size:14px;
margin-bottom: 5px;
}
.city-tag div span{
display: inline-block;
padding: 2px 4px 0 0;
}
.triangle-up {
position: absolute;
right: -3px;
top: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid white;
transform: rotate(-90deg);
}
.city-list{
display: flex;
padding: 10px;
}
.city-list>span{
width: 100px;
font-size:14px;
color: #333;
font-weight:bold;
}
.city-list>p{
color: #888888;
cursor: pointer;
font-size: 12px;
}
.city-list>p span{
display: inline-block;
padding-right: 20px;
}
.freeList .city-right-tag .el-tabs--card>.el-tabs__header,.freeList .shaixuan-top .el-tabs--card>.el-tabs__header,.freeList .el-tabs--card>.el-tabs__header .el-tabs__nav,.freeList .el-tabs--card>.el-tabs__header .el-tabs__item{
border: none;
}
.freeList .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item{
background:rgba(255,255,255,.1);
border-radius:4px;
font-size:18px;
color:rgba(255,255,255,1);
margin-right: 15px;
font-weight: bold;
transition: all linear .5s
}
.freeList .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item:hover{
background:rgba(255,255,255,1);
color: #EE4454;
}
.freeList .city-right-tag{
width: 618px;
}
.freeList .el-icon-arrow-right ,.freeList .el-icon-arrow-left{
background: rgba(255,255,255,.1);
border-radius: 50%;
transition: all linear .5s
}
.freeList .city-right-tag .el-icon-arrow-right:hover,.city-right-tag .freeList .el-icon-arrow-left:hover{
background: rgba(255,255,255,1);
}
.freeList .city-right-tag>p{
padding-bottom: 10px;
}
.freeList .content{
margin: 0 auto;
width: 1200px;
padding-top: 80px;
position: relative;
}
.freeList .contet-nav{
padding: 0 60px;
height: 87px;
width: 100%;
background:rgba(255,255,255,1);
box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-radius:6px;
position: absolute;
top: -50px;
z-index: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
align-items: center;
}
.freeList .contet-nav>div{
width: 150px;
text-align: center;
cursor: pointer;
}
.freeList .contet-nav>div:hover .contet-nav-item img{
transform: scale(1.5);
}
.freeList .contet-nav-item{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.freeList .contet-nav-item img{
width: 22px;
height: 22px;
transition: all linear .5s;
}
.freeList .hot-p-item{
margin-bottom: 20px;
}
.freeList .hot-p-item .hot-p-item-tit{
margin-bottom: 10px;
}
.freeList .hot-p-item .hot-p-item-tit-s{
position: relative;
height: 40px;
width: 100%;
}
.freeList .hot-p-item .hot-p-item-tit-s-line{
display: inline-block;
position: absolute;
height: 5px;
width: 40px;
background-color: #F6A1A9;
}
.freeList .hot-p-item .hot-p-item-tit-s strong{
position: absolute;
top: -4px
}
.hot-p-item .hot-p-item-tit-s .see-more{
position: absolute;
right: 0;
top: 5px;
}
.pro-item{
padding: 5px;
position: relative;
box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
border-radius:6px;
}
.pro-item-top{
display: flex;
}
.pro-item-top img{
width: 110px;
height: 80px;
display: block;
margin-right: 10px;
}
.pro-item .bgc-b1{
background:linear-gradient(90deg,rgba(71,121,255,1),rgba(71,165,255,1));
}
.pro-item .bgc-b.bgc-b2{
background:linear-gradient(90deg,rgba(167,222,138,1),rgba(68,214,172,1));
}
.pro-item .bgc-b.bgc-b3{
background:linear-gradient(90deg,rgba(147,69,248,1),rgba(220,63,243,1));
}
.pro-item .bgc-b.bgc-b4{
background:linear-gradient(90deg,rgba(255,159,23,1),rgba(255,219,56,1));
}
.pro-item-tag{
position: absolute;
left: 15px;
top: 0;
border-radius:0px 0px 4px 4px;
padding: 4px 6px;
}
.pro-item-btm{
display: flex;
align-items: center;
margin-top: 10px;
justify-content: space-between
}
.pro-item-btm>div>p{
margin-top: 8px;
}
.pro-item-btm .price-box{
padding: 3px 6px;
background-color: #FEF12C;
border-radius: 4px;
}
.shaixuan{
width: 1200px;
margin: 0 auto;
}
.shaixuan-box{
border:1px solid rgba(220,220,220,1);
margin-bottom: 20px;
}
.shaixuan>p{
margin-bottom: 10px;
}
.shaixuan-top{
padding: 26px 24px 16px 24px;
display: flex;
}
.shaixuan-top{
border:1px dashed rgba(220,220,220,1);
}
.shaixuan-top>div:nth-child(2){
flex: 1;
}
.left-name{
width: 130px;
}
.shaixuan-top .el-checkbox{
width: 100px;
margin: 0 0 10px 0;
}
.shaixuan-top .el-tabs--card>.el-tabs__header .el-tabs__item{
width: 130px;
padding: 0;
text-align: center;
}
.shaixuan-top .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background:rgba(238,68,84, .1);
}
.shaixuan-top .el-tabs__content{
background:rgba(238,68,84, .1);
padding: 10px
}
.shaixuan-top .el-tabs__header{
margin-bottom: 0;
}
.freeList .el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #EE4454;
border-color: #EE4454;
}
.freeList .el-checkbox__input.is-checked+.el-checkbox__label{
color: #EE4454
}
.shangpinliebiao{
margin-bottom: 30px;
}
.shangpinliebiao-item{
box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
border-radius:6px;
padding: 8px;
margin-top: 25px;
position: relative;
top: 0;
transition: all linear .5s;
cursor: pointer;
}
.shangpinliebiao-item:hover{
top: -10px;
}
.shangpinliebiao .top-img img{
width: 100%;
height: 185px;
}
.shangpinliebiao-item>p{
margin-top: 5px;
}
.get-nav{
height: 50px;
display: flex;
align-items: center;
padding: 19px 23px;
box-sizing: border-box;
justify-content: space-between;
border: 1px solid rgba(220,220,220,1);
}
.get-nav .block{
display: flex;
align-items: center;
}
.get-nav .paixu{
transform: rotate(180deg)
}
</style>
<template>
<div class="freeList commonF">
<div class="fl-top-box">
<div class="fl-zhezhao"></div>
<div class="fl-top">
<div class="fl-ad">
<span class="fl-adname">日本</span>
<span class="f14 __cp change-ad" v-if="!addShow" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span>
<div v-else class="fl-ad-box">
<p><span class="f14 __cp" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span></p>
<div class="fl-ad-cont">
<div class="search">
<span class="el-icon-close __cp" @click="addShow = !addShow"></span>
<el-input size="mini"></el-input>
</div>
<el-row>
<el-col :span="5">
<div class="city-tag active __cp">
<p>东亚</p>
<div class="f12 text2">
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p>北美</p>
<div class="f12 text2">
<span>成都</span>
<span>四川阿坝</span>
<span>好好还会</span>
<span>上课抵抗力</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag active __cp">
<p>中东非</p>
<div class="f12 text2">
<span>菲律宾啊</span>
<span>日本掉啊</span>
<span>嗷嗷待食多</span>
<span>阿斯达是的</span>
<span>市发改委</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p>西伯利亚</p>
<div class="f12 text2">
<span>小从v四碗饭</span>
<span>阿萨德群二</span>
<span>哒哒</span>
<span>阿斯达是的</span>
<span>阿萨德</span>
</div>
<div class="triangle-up"></div>
</div>
</el-col>
<el-col :span="19">
<div class="city-list">
<span>成都&成都</span>
<p>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</p>
</div>
<div class="city-list">
<span>河南</span>
<p>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
</p>
</div>
<div class="city-list">
<span>重庆</span>
<p>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
</p>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="city-right-tag">
<p class="f14 cff">共12个旅游点</p>
<el-tabs type="card" >
<el-tab-pane label="大阪" name="first"></el-tab-pane>
<el-tab-pane label="冲绳" name="second"></el-tab-pane>
<el-tab-pane label="东京" name="third"></el-tab-pane>
<el-tab-pane label="三和" name="fourth"></el-tab-pane>
<el-tab-pane label="大阪" name="first"></el-tab-pane>
<el-tab-pane label="冲绳" name="second"></el-tab-pane>
<el-tab-pane label="东京" name="third"></el-tab-pane>
<el-tab-pane label="三和" name="fourth"></el-tab-pane>
<el-tab-pane label="大阪" name="first"></el-tab-pane>
<el-tab-pane label="冲绳" name="second"></el-tab-pane>
<el-tab-pane label="东京" name="third"></el-tab-pane>
<el-tab-pane label="三和" name="fourth"></el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<div class="content">
<div class="contet-nav">
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon4.png" alt="">
</div>
<p>首页</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon1.png" alt="">
</div>
<p>特色餐食</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon.png" alt="">
</div>
<p>一日游</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon2.png" alt="">
</div>
<p>景点门票</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon3.png" alt="">
</div>
<p>当地交通</p>
</div>
</div>
<div class="hot-p">
<div class="hot-p-item">
<p class="f24 hot-p-item-tit"><strong>TOP3</strong> 目的地热销产品</p>
<p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span>
<strong>新潟＆長野</strong>
<span class="f14 c88 __cp see-more">查看更多</span>
</p>
<el-row :gutter="20">
<el-col :span="6" v-for="item in 4" :key="item">
<div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${item}`">一日游</span>
<div class="pro-item-top">
<img src="../../assets/img/activy.jpg" alt="">
<p class="text4 f14">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
</div>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="hot-p-item">
<p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span>
<strong>东京</strong>
<span class="f14 c88 __cp see-more">查看更多</span>
</p>
<el-row :gutter="20">
<el-col :span="6" v-for="item in 4" :key="item">
<div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${item}`">一日游</span>
<div class="pro-item-top">
<img src="../../assets/img/activy.jpg" alt="">
<p class="text4 f14">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
</div>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="hot-p-item">
<p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span>
<strong>北海道</strong>
<span class="f14 c88 __cp see-more">查看更多</span>
</p>
<el-row :gutter="20">
<el-col :span="6" v-for="item in 4" :key="item">
<div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${item}`">一日游</span>
<div class="pro-item-top">
<img src="../../assets/img/activy.jpg" alt="">
<p class="text4 f14">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
</div>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="shaixuan">
<p class="f24 bold">日本游玩列表</p>
<div class="shaixuan-box">
<div class="shaixuan-top shaixuan-top1">
<div class="left-name">
目的地
</div>
<div>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="shaixuan-top">
<div class="left-name">
游玩类型
</div>
<div class="">
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="大阪" name="大阪">
<el-checkbox slot="label">大阪</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="冲绳" name="冲绳">
<el-checkbox slot="label">冲绳</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="东京" name="东京">
<el-checkbox slot="label">东京</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="三和" name="三和">
<el-checkbox slot="label">三和</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<div class="shangpinliebiao">
<div class="get-nav">
<div class="block">
<span class="demonstration f14 mg-r-10">预订时间</span>
<el-date-picker
size="mini"
v-model="value"
type="date"
:picker-options="pickerOptions0"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="f14 __cp" @click="paixu1 = !paixu1">
<span>价格排序</span><i class="iconfont icon-xia c88" :class="{'paixu': paixu1}"></i>
</div>
</div>
<el-row :gutter="26">
<el-col :span="6" v-for="item in 16" :key="item">
<div class="shangpinliebiao-item">
<div class="top-img">
<img src="../../assets/img/activy.jpg" alt="">
</div>
<p class="text2 f14 c33">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
paixu1: false,
addShow: false,
cities: ['上海', '北京', '广州', '深圳','上海4', '北京2', '广州2', '深圳2','上海2', '北京3', '广州3', '深圳3','上海3', '北京4', '广州5', '深圳5'],
checkedCities: ['上海', '北京'],
activeName: '大阪',
value:'',
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
},
mounted() {
},
methods: {
}
}
</script>
\ No newline at end of file
src/components/FreeTravel/FreeList2.vue 0 → 100644
View file @ 6c302dd8
<style>
.fl-top-box{
height: 287px;
background: url(../../assets/img/ps8b67947fa38de6aa-9517-4c0f-a433-f178bd05084f.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.fl-top{
width: 1200px;
height: 100%;
margin: 0 auto;
padding-top: 56px;
box-sizing: border-box;
position: relative;
z-index: 2;
display: flex;
justify-content: space-around;
}
.fl-zhezhao{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5)
}
.fl-ad{
display: flex;
color:rgba(255,255,255,1);
}
.fl-adname{
font-size:56px;
font-family:Microsoft YaHei;
font-weight:bold;
padding-right: 33px;
}
.change-ad{
margin-top: 30px;
width: 107px;;
}
.fl-ad-box{
margin-top: 15px;
}
.fl-ad-box>p{
background-color: transparent;
}
.fl-ad-box>p>span{
color: #333;
padding: 13px 16px;
display: inline-block;
background-color: white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-weight:bold;
}
.fl-ad-cont{
width:653px;
/* height:375px; */
background:rgba(246,246,246,1);
box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-top-right-radius: 4px;
position: absolute;
z-index: 5;
}
.fl-ad-cont .search{
padding: 16px;
position: relative;
}
.fl-ad-cont .search span{
position: absolute;
color: #333;
right: 2px;
top: 3px;
font-size: 12px;
font-weight: bold;
}
.city-tag{
padding: 13px 20px;
color: #333;
width: 100%;
box-sizing: border-box;
position: relative;
}
.city-tag.active{
background-color: #EE4454;
color: white;
}
.city-tag p{
font-size:14px;
margin-bottom: 5px;
}
.city-tag div span{
display: inline-block;
padding: 2px 4px 0 0;
}
.triangle-up {
position: absolute;
right: -3px;
top: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid white;
transform: rotate(-90deg);
}
.city-list{
display: flex;
padding: 10px;
}
.city-list>span{
width: 100px;
font-size:14px;
color: #333;
font-weight:bold;
}
.city-list>p{
color: #888888;
cursor: pointer;
font-size: 12px;
}
.city-list>p span{
display: inline-block;
padding-right: 20px;
}
.freeList .city-right-tag .el-tabs--card>.el-tabs__header,.freeList .shaixuan-top .el-tabs--card>.el-tabs__header,.freeList .el-tabs--card>.el-tabs__header .el-tabs__nav,.freeList .el-tabs--card>.el-tabs__header .el-tabs__item{
border: none;
}
.freeList .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item{
background:rgba(255,255,255,.1);
border-radius:4px;
font-size:18px;
color:rgba(255,255,255,1);
margin-right: 15px;
font-weight: bold;
transition: all linear .5s
}
.freeList .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item:hover{
background:rgba(255,255,255,1);
color: #EE4454;
}
.freeList .city-right-tag{
width: 618px;
}
.freeList .el-icon-arrow-right ,.freeList .el-icon-arrow-left{
background: rgba(255,255,255,.1);
border-radius: 50%;
transition: all linear .5s
}
.freeList .city-right-tag .el-icon-arrow-right:hover,.city-right-tag .freeList .el-icon-arrow-left:hover{
background: rgba(255,255,255,1);
}
.freeList .city-right-tag>p{
padding-bottom: 10px;
}
.freeList .content{
margin: 0 auto;
width: 1200px;
padding-top: 80px;
position: relative;
}
.freeList .contet-nav{
padding: 0 60px;
height: 87px;
width: 100%;
background:rgba(255,255,255,1);
box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-radius:6px;
position: absolute;
top: -50px;
z-index: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
align-items: center;
}
.freeList .contet-nav>div{
width: 150px;
text-align: center;
cursor: pointer;
}
.freeList .contet-nav>div:hover .contet-nav-item img{
transform: scale(1.5);
}
.freeList .contet-nav-item{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.freeList .contet-nav-item img{
width: 22px;
height: 22px;
transition: all linear .5s;
}
.freeList .hot-p-item{
margin-bottom: 20px;
}
.freeList .hot-p-item .hot-p-item-tit{
margin-bottom: 10px;
}
.freeList .hot-p-item .hot-p-item-tit-s{
position: relative;
height: 40px;
width: 100%;
}
.freeList .hot-p-item .hot-p-item-tit-s-line{
display: inline-block;
position: absolute;
height: 5px;
width: 40px;
background-color: #F6A1A9;
}
.freeList .hot-p-item .hot-p-item-tit-s strong{
position: absolute;
top: -4px
}
.hot-p-item .hot-p-item-tit-s .see-more{
position: absolute;
right: 0;
top: 5px;
}
.pro-item{
padding: 5px;
position: relative;
box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
border-radius:6px;
}
.pro-item-top{
display: flex;
}
.pro-item-top img{
width: 110px;
height: 80px;
display: block;
margin-right: 10px;
}
.pro-item .bgc-b1{
background:linear-gradient(90deg,rgba(71,121,255,1),rgba(71,165,255,1));
}
.pro-item .bgc-b.bgc-b2{
background:linear-gradient(90deg,rgba(167,222,138,1),rgba(68,214,172,1));
}
.pro-item .bgc-b.bgc-b3{
background:linear-gradient(90deg,rgba(147,69,248,1),rgba(220,63,243,1));
}
.pro-item .bgc-b.bgc-b4{
background:linear-gradient(90deg,rgba(255,159,23,1),rgba(255,219,56,1));
}
.pro-item-tag{
position: absolute;
left: 15px;
top: 0;
border-radius:0px 0px 4px 4px;
padding: 4px 6px;
}
.pro-item-btm{
display: flex;
align-items: center;
margin-top: 10px;
justify-content: space-between
}
.pro-item-btm>div>p{
margin-top: 8px;
}
.pro-item-btm .price-box{
padding: 3px 6px;
background-color: #FEF12C;
border-radius: 4px;
}
.shaixuan{
width: 1200px;
margin: 0 auto;
}
.shaixuan-box{
border:1px solid rgba(220,220,220,1);
margin-bottom: 20px;
}
.shaixuan>p{
margin-bottom: 10px;
}
.shaixuan-top{
padding: 26px 24px 16px 24px;
display: flex;
}
.shaixuan-top{
border:1px dashed rgba(220,220,220,1);
}
.shaixuan-top>div:nth-child(2){
flex: 1;
}
.left-name{
width: 130px;
}
.shaixuan-top .el-checkbox{
width: 100px;
margin: 0 0 10px 0;
}
.shaixuan-top .el-tabs--card>.el-tabs__header .el-tabs__item{
width: 130px;
padding: 0;
text-align: center;
}
.shaixuan-top .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background:rgba(238,68,84, .1);
}
.shaixuan-top .el-tabs__content{
background:rgba(238,68,84, .1);
padding: 10px
}
.shaixuan-top .el-tabs__header{
margin-bottom: 0;
}
.freeList .el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #EE4454;
border-color: #EE4454;
}
.freeList .el-checkbox__input.is-checked+.el-checkbox__label{
color: #EE4454
}
.shangpinliebiao{
margin-bottom: 30px;
}
.shangpinliebiao-item{
box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
border-radius:6px;
padding: 8px;
margin-top: 25px;
position: relative;
top: 0;
transition: all linear .5s;
cursor: pointer;
}
.shangpinliebiao-item:hover{
top: -10px;
}
.shangpinliebiao .top-img img{
width: 100%;
height: 185px;
}
.shangpinliebiao-item>p{
margin-top: 5px;
}
.get-nav{
height: 50px;
display: flex;
align-items: center;
padding: 19px 23px;
box-sizing: border-box;
justify-content: space-between;
border: 1px solid rgba(220,220,220,1);
}
.get-nav .block{
display: flex;
align-items: center;
}
.get-nav .paixu{
transform: rotate(180deg)
}
</style>
<template>
<div class="freeList commonF">
<div class="fl-top-box">
<div class="fl-zhezhao"></div>
<div class="fl-top">
<div class="fl-ad">
<span class="fl-adname">日本</span>
<span class="f14 __cp change-ad" v-if="!addShow" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span>
<div v-else class="fl-ad-box">
<p><span class="f14 __cp" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span></p>
<div class="fl-ad-cont">
<div class="search">
<span class="el-icon-close __cp" @click="addShow = !addShow"></span>
<el-input size="mini"></el-input>
</div>
<el-row>
<el-col :span="5">
<div class="city-tag active __cp">
<p>东亚</p>
<div class="f12 text2">
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p>北美</p>
<div class="f12 text2">
<span>成都</span>
<span>四川阿坝</span>
<span>好好还会</span>
<span>上课抵抗力</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag active __cp">
<p>中东非</p>
<div class="f12 text2">
<span>菲律宾啊</span>
<span>日本掉啊</span>
<span>嗷嗷待食多</span>
<span>阿斯达是的</span>
<span>市发改委</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p>西伯利亚</p>
<div class="f12 text2">
<span>小从v四碗饭</span>
<span>阿萨德群二</span>
<span>哒哒</span>
<span>阿斯达是的</span>
<span>阿萨德</span>
</div>
<div class="triangle-up"></div>
</div>
</el-col>
<el-col :span="19">
<div class="city-list">
<span>成都&成都</span>
<p>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</p>
</div>
<div class="city-list">
<span>河南</span>
<p>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
</p>
</div>
<div class="city-list">
<span>重庆</span>
<p>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
</p>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 天气 -->
</div>
</div>
<div class="content">
<div class="contet-nav">
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon4.png" alt="">
</div>
<p>首页</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon1.png" alt="">
</div>
<p>特色餐食</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon.png" alt="">
</div>
<p>一日游</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon2.png" alt="">
</div>
<p>景点门票</p>
</div>
<div>
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon3.png" alt="">
</div>
<p>当地交通</p>
</div>
</div>
</div>
<div class="shaixuan">
<p class="f24 bold">日本游玩列表</p>
<div class="shaixuan-box">
<div class="shaixuan-top">
<div class="left-name">
游玩类型
</div>
<div class="">
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="大阪" name="大阪">
<el-checkbox slot="label">大阪</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="冲绳" name="冲绳">
<el-checkbox slot="label">冲绳</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="东京" name="东京">
<el-checkbox slot="label">东京</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="三和" name="三和">
<el-checkbox slot="label">三和</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<div class="shangpinliebiao">
<div class="get-nav">
<div class="block">
<span class="demonstration f14 mg-r-10">预订时间</span>
<el-date-picker
size="mini"
v-model="value"
type="date"
:picker-options="pickerOptions0"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="f14 __cp" @click="paixu1 = !paixu1">
<span>价格排序</span><i class="iconfont icon-xia c88" :class="{'paixu': paixu1}"></i>
</div>
</div>
<el-row :gutter="26">
<el-col :span="6" v-for="item in 16" :key="item">
<div class="shangpinliebiao-item">
<div class="top-img">
<img src="../../assets/img/activy.jpg" alt="">
</div>
<p class="text2 f14 c33">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
addShow: false,
cities: ['上海', '北京', '广州', '深圳','上海4', '北京2', '广州2', '深圳2','上海2', '北京3', '广州3', '深圳3','上海3', '北京4', '广州5', '深圳5'],
checkedCities: ['上海', '北京'],
activeName: '大阪'
}
},
mounted() {
},
methods: {
}
}
</script>
\ No newline at end of file
src/router.js
View file @ 6c302dd8
......@@ -546,6 +546,24 @@ export default new Router({
title: "自由行"
}
},
{
path: "/FreeList2",
name: "FreeList2",
component: resolve =>
require(["@/components/FreeTravel/FreeList2"], resolve),
meta: {
title: "自由行"
}
},
{
path: "/FreeList",
name: "FreeList",
component: resolve =>
require(["@/components/FreeTravel/FreeList"], resolve),
meta: {
title: "自由行"
}
},
{
path: "/PersonalTailor",
name: "PersonalTailor",
......
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 to comment