Skip to content

A
Athena
Commit e45b67b3 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

合并代码

parent c25c427b
Hide whitespace changes
Inline Side-by-side
Showing with 1613 additions and 2 deletions
src/App.vue
View file @ e45b67b3
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_lbsx2a06sr.css'; @import '//at.alicdn.com/t/font_863923_puw2hsmbg3b.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
body,html{ body,html{
padding: 0px; padding: 0px;
......
src/assets/css/home.css 0 → 100644
View file @ e45b67b3
.home_content .cztm .el-tabs__item {
font-size: 18px;
}
.Home .ticket .el-form-item {
display: inline-block;
margin-bottom: 0;
width: 185px;
}
.Home .el-tabs__item:hover {
color: #fd6473;
}
.Home .el-tabs__active-bar {
background-color: #fd6473;
}
.Home .el-tabs__item.is-active {
color: #fd6473;
}
.Home .tag_active {
background: #fff;
color: #fd6473 !important;
font-weight: bold;
}
.Home .form_ul {
overflow: auto;
}
.Home .form_ul li {
float: left;
width: 70px;
text-align: center;
background: rgba(238, 238, 238, 1);
border-radius: 8px;
padding: 3px 0;
margin-right: 10px;
margin-bottom: 13px;
}
.Home .green_span {
display: inline-block;
width: 3px;
height: 14px;
background: rgba(21, 182, 161, 1);
margin-right: 5px;
}
.Home .form_btn {
display: inline-block;
width: 139px;
color: #fff;
background: rgba(253, 100, 115, 1);
padding: 5px 0;
text-align: center;
font-size: 14px;
font-weight: bold;
float: right;
}
.Home .Home_top .tag_right .el-form-item__label {
color: #666666;
}
.Home .el-input__inner {
border-radius: 0px;
}
.Home .Home_top .tag_left li .iconfont {
font-size: 20px;
}
.Home ul,
p {
padding: 0;
margin: 0;
}
.Home li {
list-style: none;
}
.Home .Home_top .tag_left li:last-child {
border: none;
}
.Home .Home_top .tag_left li {
height: 25%;
color: #fff;
font-size: 12px;
padding-top: 12px;
box-sizing: border-box;
border-bottom: 1px dashed #aaaaaa;
cursor: pointer;
}
.Home .Home_top .tag_left {
width: 78px;
position: absolute;
height: 100%;
text-align: center;
background: #444444;
}
.Home .Home_top .tag_right {
width: 100%;
box-sizing: border-box;
padding: 15px 20px 20px 90px;
height: 100%;
font-size: 14px;
}
.Home .Home_top {
position: relative;
z-index: 1000;
}
.Home .Home_top .top_tag {
position: relative;
width: 512px;
height: 255px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 4px 0px rgba(139, 139, 139, 0.33);
}
.Home .cztm,.Grouptour,.Ticket_spots,.Localtour{
cursor: pointer;
}
.Home {
font-family: "PingFang";
}
.Home .cztm_item_content p{
padding:1px 0;
}
.Home .cztm_item_content .cztm_title{
color:#333333;
font-weight: 700;
padding-top:4px;
}
.Home .cztm_item_content .discount{
padding:0 8px;
color: #FF6600;
border:1px solid rgba(255,102,0,1);
}
.Home .cztm_item_content .bg{
display: inline-block;
text-align: center;
color: #fff;
width:19px;
height:18px;
background:rgba(68,68,68,1);
}
.Home .cztm .cztm_item_content{
float: left;
height: 100%;
width: 100%;
box-sizing: border-box;
padding-left:10px;
position: relative;
}
.Home .cztm .cztm_item img{
display: block;
float: left;
width:100px;
height:100%;
}
.Home .cztm .cztm_item{
position: relative;
width:220px;
height:130px;
font-size: 14px;
background:rgba(255,255,255,1);
border:1px solid rgba(220,220,220,1);
display: inline-flex;
align-items:center;
margin:0 0 15px 15px;
box-sizing: border-box;
}
.Home #triangle-left{
position: absolute;
top: 16px;
left:-8px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 8px solid #fff;
border-bottom: 5px solid transparent;
}
.Home .cztm .tj_ticket{
margin:0 0 15px 17px;
width:215px;
height:130px;
background:rgba(255,255,255,1);
overflow: hidden;
display: inline-block;
}
.Home .cztm .tj_ticket .ticket_top{
width: 100%;
height: 32px;
line-height: 32px;
background:rgba(255,189,30,1);
text-align: center;
color: #fff;
border-top-left-radius:4px;
border-top-right-radius:4px;
position:relative;
}
.Home .cztm .tj_ticket .ticket_content{
border:1px solid #DCDCDC;
border-top:none;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}
.Home .cztm .tj_ticket .ticket_content .dashed{
display: inline-block;
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #dcdcdc 0%, #dcdcdc 50%, transparent 50%);
background-size: 10px 1px;
background-repeat: repeat-x;
position: absolute;
bottom:5px;
left: 0;
}
.Home .cztm .tj_ticket .cirle{
position: absolute;
background: #fff;
width: 10px;
height: 10px;
border-radius: 50%;
bottom: -5px;
border: 1px solid #DCDCDC;
}
.Home .cztm .tj_ticket .circle_left{
left: -5px;
}
.Home .cztm .tj_ticket .circle_right{
right: -5px;
border: 1px solid #DCDCDC;
}
.Home .Grouptour{
margin-top:30px;
position: relative;
}
.Home .Grouptour .tour_left{
width:220px;
box-sizing: border-box;
position: absolute;
left: 0;
}
.Home .Grouptour .tour_left_content{
height: 334px;
margin-top: 10px;
padding:10px;
box-sizing: border-box;
color: #333333;
border: 1px dashed #999;
background: url("../../assets/img/home/tour.png") 100% 100%;
}
.Home .Grouptour .tour_left_content span{
display: inline-block;
width: 50%;
font-size: 12px;
}
.Home .Grouptour .tour_right{
width: 100%;
padding-left: 235px;
box-sizing: border-box;
}
.common_ul_tab{
width: 100%;
border-bottom:1px solid #ededed;
}
.common_ul_tab li{
display: inline-block;
font-size: 15px;
margin-right:25px;
padding-bottom:6px;
}
.common_ul_tab .li_active{
border-bottom:3px solid #0BA893;
}
.Home .Grouptour .tour_right_item{
float: left;
width: 220px;
font-size: 12px;
margin:15px 0 0 15px;
box-sizing: border-box;
}
.Home .Grouptour .tour_right_content{
overflow: auto;
margin-left:-15px;
}
.Home .Grouptour .tour_right_item img{
height: 127px;
width: 100%;
}
.Home .Grouptour .tour_right_item .Remarks{
position: absolute;
bottom: 6px;
font-size: 12px;
color: #fff;
padding: 0 6px;
}
.Home .travel_right_content{
height: 323px;
margin-left:-15px;
}
.Home .travel_right_content .travel_right_item_big{
width: 220px;
height: 310px;
}
.Home .travel_right_content .travel_right_item{
float: left;
position: relative;
margin:15px 0 0 15px;
}
.Home .travel_right_content .travel_right_item img{
width: 100%;
height: 100%;
}
.Home .travel_right_content .travel_right_item .Remarks{
position: absolute;
bottom: 10px;
padding: 0 6px;
color:#fff;
font-size: 12px;
}
.Home .travel_samll_div{
width: 470px;
height: 308px;
float: left;
}
.Home .travel_samll_div .travel_right_item_small{
width: 220px;
height: 147px;
}
.Home .travel_left{
background: url("../../assets/img/home/tour5.png")!important;
background-size:contain!important;
}
.Home .dingz{
border:4px solid rgba(255,231,173,1);
margin: 35px 0;
height:92px;
display: flex;
align-items: center;
text-align:center;
}
.Home .dingz .icon{
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align:center;
background: #FFE7AD;
border-radius: 50%;
}
.Home .dingz .icon1{
background: #FFA800;
}
.Home .dingz .icon2{
background: #FFE7AD;
}
.Home .dingz .icon2 .iconfont{
color: #FFA800;
font-size: 30px;
}
.Home .dingz .icon1 .iconfont{
color: #fff;
font-size: 30px;
}
.Ticket_spots {
position: relative;
}
.Ticket_spots .Ticket_spots_right{
position: absolute;
right: 0;
top: 0;
width: 220px;
font-size: 12px;
}
.Ticket_spots .Ticket_spots_left{
width: 100%;
box-sizing: border-box;
padding-right: 235px;
}
.Ticket_right_content span{
display: inline-block;
width: 50%;
font-size: 12px;
}
.Ticket_spots ._spots_item{
display: inline-block;
width: 220px;
font-size: 12px;
margin:15px 0 0 15px;
}
.Ticket_spots ._spots_content{
margin-left:-15px;
}
.Ticket_spots ._spots_item img{
width:220px;
height:127px;
}
.Ticket_spots ._spots_item .city{
position: absolute;
top: 0;
left: 0;
padding:2px 8px;
background:rgba(249,201,0,1);
}
.Ticket_spots ._spots_item .Remarks{
margin: 6px 0;
}
.Ticket_right_content li{
position: relative;
padding:6px 10px;
box-sizing: border-box;
}
.Ticket_right_content .hot_left{
width:60px;
height:60px;
position: absolute;
left: 6px;
}
.Home .Ticket_right_content .hot_left img{
width: 100%;
height: 100%;
}
.Home .Ticket_right_content .hot_left .index{
position: absolute;
top: 0;
left: 0;
background: #E24A4A;
color:#fff;
padding: 0 3px;
}
.Home .Ticket_right_content .hot_right{
width: 100%;
box-sizing: border-box;
padding-left: 70px;
}
.Home .Ticket_right_content .hot_right p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.Home .Ticket_right_content li{
height: 76px;
margin-top:8px;
}
.Home .Ticket_right_content li:hover{
transition: all linear 0.5s;
cursor: pointer;
box-shadow:0px 1px 4px 0px rgba(94,94,94,0.61);
}
.Home .hotel_right{
margin-left: -15px;
}
.Home .hotel .hotel_right_item{
width:220px;
height:152px;
position: relative;
display: inline-block;
margin:15px 0 0 15px;
overflow: hidden;
}
.Home .hotel .hotel_right_item img{
width: 100%;
height: 100%;
transition: transform 0.5s ease 0s;
}
.Home .hotel .hotel_right_item img:hover{
transform: scale(1.1);
}
.Home .hotel .hotel_right_item .hotel_remake{
width:116px;
height:116px;
background:rgba(0,0,0,1);
opacity:0.75;
border-radius:50%;
position: absolute;
text-align: center;
color:#fff;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 12px;
top: 17px;
left: 51px;
}
.Home .hotel_left_content{
background: url('../img/home/tour6.png')!important;
background-size:cover!important;
height: 339px!important;
}
.Home .Special_ticket_content{
margin-left: -15px;
}
.Home .Special_ticket_item{
font-size: 12px;
width:220px;
height:127px;
margin:15px 0 0 15px;
background:#EFEFEF;
padding:6px 15px;
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.Home .Special_ticket_content .qg{
background: #FD6473;
color: #fff;
padding:4px 12px;
float: right;
}
.Home .Special_ticket_item p{
padding:6px 0;
}
.Home .Localtour,.Special_ticket{
margin-top:30px;
}
.Home .Special_ticket_right{
position: absolute;
right: 0px;
width:220px;
background: url('../img/home/tour7.png');
background-size:cover;
height: 284px;
top: 0;
}
.Home .Localtour .Localtour_item{
width:220px;
height:226px;
display: inline-block;
position: relative;
margin:15px 0 0 15px;
}
.Home .Localtour .Localtour_item img{
width: 100%;
height: 100%;
}
.Home .Localtour .Localtour_item .city{
position: absolute;
top:6px;
left:15px;
font-size: 22px;
}
.Home .Localtour .Localtour_item .price{
position: absolute;
bottom:10px;
right: 10px;
}
.Home .bottom1{
width: 100%;
background: #60CA6E;
color: #fff;
}
.Home .bottom1 .bottom1_row{
width: 1100px;
margin:0 auto;
display: flex;
align-items: center;
text-align: center;
padding: 10px 0;
}
.Home .bottom1 .bottom1_row .iconfont{
color:#fff;
font-size: 36px;
}
.Home .bottom1 .bottom1_row .fontb{
font-weight: bold;
font-size: 20px;
}
.Home .bottom1 .bottom1_row .fonts{
font-size: 14px;
margin-left: 15px;
}
.Home .button-content:before{
content:'';
width:20px;
height: 0%;
border: 7px solid;
border-color: transparent transparent transparent #FD6473;
position: absolute;
left:20px;
}
.Home .Localtour .Localtour_right{
width: 218px;
background: url('../img/home/tour8.png');
border: 1px dashed #999;
background-size:cover;
font-size: 12px;
padding:10px;
box-sizing: border-box;
}
.Home .Localtour .Localtour_right li{
margin:9px 0;
}
.Home .button-content{
display: inline-block;
width: 20px;
height: 14px;
background-color: #FD6473;
font-size: small;
line-height: 14px;
text-align: center;
position: relative;
margin-right:10px;
color: #fff;
}
src/components/Home.vue 0 → 100644
View file @ e45b67b3
<template>
<div class="Home">
<div class="Home_top">
<el-carousel arrow="always" :height="banner_height" :interval="10000" trigger="click" :style="{'background':'#ddd'}">
<el-carousel-item>
<img src='../assets/img/ticket/banner01.jpg'>
</el-carousel-item>
<el-carousel-item>
<img src='../assets/img/ticket/banner03.jpg'>
</el-carousel-item>
<el-carousel-item>
<img src='../assets/img/ticket/banner05.jpg'>
</el-carousel-item>
<el-carousel-item>
<img src='../assets/img/ticket/banner07.jpg'>
</el-carousel-item>
</el-carousel>
<div style="position:absolute;width:100%;bottom:20px;z-index:100">
<div style="width:1200px;margin:0 auto">
<div class="top_tag">
<ul class="tag_left">
<li @click="ChangeTab('visa')" :class="tag=='visa'?'tag_active':''">
<i class="iconfont icon-zhengshu"></i>
<p>签证</p>
</li>
<li @click="ChangeTab('ticket')" :class="tag=='ticket'?'tag_active':''">
<i class="iconfont icon-Shape1"></i>
<p>机票</p>
</li>
<li @click="ChangeTab('hotel')" :class="tag=='hotel'?'tag_active':''">
<i class="iconfont icon-Shape"></i>
<p>酒店</p>
</li>
<li @click="ChangeTab('admticket')" :class="tag=='admticket'?'tag_active':''">
<i class="iconfont icon-menpiao1"></i>
<p>门票</p>
</li>
</ul>
<div class="tag_right">
<!-- 签证 -->
<div v-show="tag=='visa'" class="visa">
<el-form ref="visa_form" :model="visa_form" label-width="90px">
<el-form-item label="国家/地区" style="margin-bottom:10px">
<el-input size="small" v-model="visa_form.name" placeholder="国家或者地区名字"></el-input>
</el-form-item>
<div style="overflow:auto">
<span class="form_btn">立即搜索</span>
</div>
<ul class="form_ul">
<p style="margin:6px 0;display: flex;align-items: center;">
<span class="green_span"></span> 热门推荐
</p>
<li>日本</li>
<li>澳大利亚</li>
<li>马来新亚</li>
<li>泰国</li>
<li>日本</li>
<li>澳大利亚</li>
<li>马来新亚</li>
<li>泰国</li>
</ul>
</el-form>
</div>
<!-- 机票 -->
<div v-show="tag=='ticket'" class="ticket">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="国际机票" name="first">
<el-form ref="ticket_form" :model="ticket_form" label-width="70px">
<p style="margin-bottom:5px">
<el-radio v-model="ticket_form.radio" label="1">单程</el-radio>
<el-radio v-model="ticket_form.radio" label="2">往返</el-radio>
</p>
<el-form-item label="出发地">
<el-input size="small" v-model="ticket_form.name" placeholder="出发地"></el-input>
</el-form-item>
<span style=";margin-left:12px;display:inline-block;width:20px;height:20px;background:#15B6A1;border-radius:50%;text-align:center;color:#fff">换</span>
<el-form-item label="目的地">
<el-input size="small" v-model="ticket_form.name" placeholder="目的地"></el-input>
</el-form-item>
<el-form-item label="出发日期">
<el-input size="small" v-model="ticket_form.name" placeholder="出发日期"></el-input>
</el-form-item>
<el-form-item style="margin-left:32px;" label="返回日期">
<el-input size="small" v-model="ticket_form.name" placeholder="返回日期"></el-input>
</el-form-item>
<el-form-item label="成人">
<el-select size="small" v-model="ticket_form.value" placeholder="请选择">
<el-option
v-for="item in person"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="儿童" style="margin-left:32px;">
<el-select size="small" v-model="ticket_form.value" placeholder="请选择">
<el-option
v-for="item in person"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<span class="form_btn" style="padding:6px 0">立即搜索</span>
</el-form>
</el-tab-pane>
<el-tab-pane label="国内机票" name="second">国内机票</el-tab-pane>
</el-tabs>
</div>
<!-- 酒店 -->
<div v-show="tag=='hotel'" class="visa">
<el-tabs v-model="hotel_tab" @tab-click="handleClick">
<el-tab-pane label="国际酒店" name="gjjd">
<el-form ref="visa_form" :model="visa_form" label-width="60px">
<el-form-item label="目的地">
<el-input size="small" v-model="visa_form.name" placeholder="目的地"></el-input>
</el-form-item>
<el-form-item style="display:inline-block;width:50%;" label="入住日">
<el-date-picker style="width:100%" size="small"
v-model="visa_form.value1"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item style="display:inline-block;width:50%;" label="离店日">
<el-date-picker style="width:100%" size="small"
v-model="visa_form.value1"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<div style="overflow:auto">
<span class="form_btn">立即搜索</span>
</div>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<!-- 门票 -->
<div v-show="tag=='admticket'" class="visa">
<el-form ref="visa_form" :model="visa_form" label-width="90px">
<el-form-item label="关键词搜索" style="margin-bottom:10px">
<el-input size="small" v-model="visa_form.name" placeholder="输入景点名称、城市或主题"></el-input>
</el-form-item>
<div style="overflow:auto">
<span class="form_btn">立即搜索</span>
</div>
<ul class="form_ul">
<p style="margin:6px 0;display: flex;align-items: center;">
<span class="green_span"></span> 热门地区
</p>
<li>日本</li>
<li>澳大利亚</li>
<li>马来新亚</li>
<li>泰国</li>
</ul>
<ul class="form_ul">
<p style="margin:6px 0;display: flex;align-items: center;">
<span class="green_span"></span> 热门景点
</p>
<li>日本</li>
<li>澳大利亚</li>
<li>马来新亚</li>
<li>泰国</li>
</ul>
</el-form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 内容 -->
<div class="home_content" style="width:1180px;box-sizing:border-box;padding:20px 10px;margin:0 auto">
<!-- 超值特卖 -->
<div class="cztm">
<el-tabs v-model="activecontent1" @tab-click="handleClick">
<el-tab-pane label="超值特卖" name="first">
<div style="margin-left:-17px">
<div class="cztm_item">
<img src="//dimg07.c-ctrip.com/images/100j0y000000m0bhg78DC_C_221_166.jpg" alt="" class="">
<div class="cztm_item_content">
<div id="triangle-left"></div>
<p class="cztm_title">新加坡+马来西亚</p>
<p class="cztm_title">5晚6日游</p>
<p><span class="discount">7.2折</span></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
<p><span class="bg">5</span>天<span class="bg">14</span>时<span class="bg">18</span>分</p>
</div>
</div>
<div class="cztm_item">
<img src="//dimg07.c-ctrip.com/images/100j0y000000m0bhg78DC_C_221_166.jpg" alt="" class="">
<div class="cztm_item_content">
<div id="triangle-left"></div>
<p class="cztm_title">新加坡+马来西亚</p>
<p class="cztm_title">5晚6日游</p>
<p><span class="discount">7.2折</span></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
<p><span class="bg">5</span>天<span class="bg">14</span>时<span class="bg">18</span>分</p>
</div>
</div>
<div class="cztm_item">
<img src="//dimg07.c-ctrip.com/images/100j0y000000m0bhg78DC_C_221_166.jpg" alt="" class="">
<div class="cztm_item_content">
<div id="triangle-left"></div>
<p class="cztm_title">新加坡+马来西亚</p>
<p class="cztm_title">5晚6日游</p>
<p><span class="discount">7.2折</span></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
<p><span class="bg">5</span>天<span class="bg">14</span>时<span class="bg">18</span>分</p>
</div>
</div>
<div class="cztm_item">
<img src="//dimg07.c-ctrip.com/images/100j0y000000m0bhg78DC_C_221_166.jpg" alt="" class="">
<div class="cztm_item_content">
<div id="triangle-left"></div>
<p class="cztm_title">新加坡+马来西亚</p>
<p class="cztm_title">5晚6日游</p>
<p><span class="discount">7.2折</span></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
<p><span class="bg">5</span>天<span class="bg">14</span>时<span class="bg">18</span>分</p>
</div>
</div>
<div class="cztm_item">
<img src="//dimg07.c-ctrip.com/images/100j0y000000m0bhg78DC_C_221_166.jpg" alt="" class="">
<div class="cztm_item_content">
<div id="triangle-left"></div>
<p class="cztm_title">新加坡+马来西亚</p>
<p class="cztm_title">5晚6日游</p>
<p><span class="discount">7.2折</span></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
<p><span class="bg">5</span>天<span class="bg">14</span>时<span class="bg">18</span>分</p>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="特价机票" name="second">
<div style="margin-left:-17px">
<div class="tj_ticket">
<div class="ticket_top">
祥鹏航空
<div class="cirle circle_left"></div>
<div class="cirle circle_right"></div>
</div>
<div class="ticket_content">
<el-row style="font-size:16px;">
<el-col :span="6" style="text-align:center;padding-top:15px;font-weight:700">成都</el-col>
<el-col :span="12" style="position:relative;padding:6px 15px;box-sizing:border-box;text-align:center">
<i class="iconfont icon-Shape1" style="font-size:12px;color:#dcdcdc"></i>
<span class="dashed"></span>
</el-col>
<el-col :span="6" style="text-align:center;padding-top:15px;font-weight:700">香港</el-col>
</el-row>
<p style="font-size:12px;padding:6px 0 2px 10px">日期：2019-04-44</p>
<p style="font-size:12px;padding:2px 0 2px 10px">单程：￥
<span style="color:#FF6600;font-size:16px;font-weight:700">310</span>起</p>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<!-- 跟团游 -->
<div class="Grouptour">
<div class="tour_left">
<p>跟团游</p>
<div class="tour_left_content">
<p style="font-size:14px;font-weight:700">热门目的地</p>
<span>曼谷</span>
<span>土耳其</span>
<span>土耳其</span>
<span>曼谷</span>
</div>
</div>
<div class="tour_right">
<ul class="common_ul_tab">
<li :class="liActive==0?'li_active':''">人气团游</li>
<li :class="liActive==1?'li_active':''">日本</li>
<li :class="liActive==2?'li_active':''">泰国</li>
<li :class="liActive==3?'li_active':''">越南</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div class="tour_right_content">
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
<div class="tour_right_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
</div>
</div>
<!-- 自由行 -->
<div class="travel Grouptour">
<div class="tour_left">
<p>自由行</p>
<div class="tour_left_content travel_left" style="height:325px;">
<p style="font-size:14px;font-weight:700">热门目的地</p>
<span>曼谷</span>
<span>土耳其</span>
<span>土耳其</span>
<span>曼谷</span>
</div>
</div>
<div class="tour_right">
<ul class="common_ul_tab">
<li :class="liActive==0?'li_active':''">最新</li>
<li :class="liActive==1?'li_active':''">日本</li>
<li :class="liActive==2?'li_active':''">东南亚</li>
<li :class="liActive==3?'li_active':''">南亚</li>
<li :class="liActive==4?'li_active':''">南亚</li>
<li :class="liActive==5?'li_active':''">南亚</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div class="travel_right_content">
<div class="travel_right_item travel_right_item_big">
<img src="../assets/img/home/tour3.png" alt="">
<div class="Remarks">
<p>[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span></p>
</div>
</div>
<div class="travel_samll_div">
<div class="travel_right_item travel_right_item_small">
<img src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p>[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span></p>
</div>
</div>
<div class="travel_right_item travel_right_item_small">
<img src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p>[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span></p>
</div>
</div>
<div class="travel_right_item travel_right_item_small">
<img src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p>[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span></p>
</div>
</div>
<div class="travel_right_item travel_right_item_small">
<img src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p>[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span></p>
</div>
</div>
</div>
<div class="travel_right_item travel_right_item_big">
<img src="../assets/img/home/tour3.png" alt="">
<div class="Remarks">
<p>[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- 定制 -->
<el-row class="dingz">
<el-col :span="2">
<span class="icon1 icon">
<i class="iconfont icon-icon-test7"></i>
</span>
</el-col>
<el-col :span="5">
<p style="font-size:20px;color:#202020">客户第一的购买政策</p>
<p style="font-size:12px;color:#FF9000">快速响应客户需求，开心出游你、我、他</p>
</el-col>
<el-col :span="2">
<span class="icon2 icon">
<i class="iconfont icon-icon-test6"></i>
</span>
</el-col>
<el-col :span="4">
<p style="font-size:20px;color:#202020">专业行程定制师</p>
<p style="font-size:12px;">定制套餐自由搭配 <br> 价位行程自行安排 保障最优出行
</p>
</el-col>
<el-col :span="2">
<span class="icon2 icon">
<i class="iconfont icon-icon-test8"></i>
</span>
</el-col>
<el-col :span="4">
<p style="font-size:20px;color:#202020">7*24小时客服服务</p>
<p style="font-size:12px;">24小时订单客服<br>随时解决客服需求咨询</p>
</el-col>
<el-col :span="2">
<span class="icon1 icon">
<i class="iconfont icon-Shape2"></i>
</span>
</el-col>
<el-col :span="3">
<p style="font-size:12px;color:#FF9000">客服服务电话</p>
<p style="font-size:12px;color:#FF9000">028-88888888</p>
</el-col>
</el-row>
<!-- 景点门票 -->
<div class="Ticket_spots">
<ul class="common_ul_tab">
<span style="font-weight:700;margin-right:172px">景点门票</span>
<li :class="liActive==0?'li_active':''">人气团游</li>
<li :class="liActive==1?'li_active':''">日本</li>
<li :class="liActive==2?'li_active':''">泰国</li>
<li :class="liActive==3?'li_active':''">越南</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div style="position:relative">
<div class="Ticket_spots_left">
<div class="_spots_content">
<div class="_spots_item">
<div style="position:relative">
<span class="city">香港</span>
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
<div class="_spots_item">
<div style="position:relative">
<img src="../assets/img/home/tour1.png" alt="">
<div>
<p class="Remarks">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</span>
<span style="color:#666666;float:right">席位充足</span>
</div>
</div>
</div>
</div>
</div>
<div class="Ticket_spots_right">
<p style="font-size:14px;font-weight:bold">畅销排行</p>
<ul class="Ticket_right_content">
<li>
<div class="hot_left">
<img src="../assets/img/home/tour4.png" alt="">
<i class="index">1</i>
</div>
<div class="hot_right">
<p>日本西瓜卡Suica卡（交通卡地铁巴士购物储值日本西瓜卡Suica卡（交通卡地铁巴士购物储值</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:16px;font-weight:bold">310</span>起</span></p>
</div>
</li>
<li>
<div class="hot_left">
<img src="../assets/img/home/tour4.png" alt="">
<i class="index">1</i>
</div>
<div class="hot_right">
<p>日本西瓜卡Suica卡（交通卡地铁巴士购物储值日本西瓜卡Suica卡（交通卡地铁巴士购物储值</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:16px;font-weight:bold">310</span>起</span></p>
</div>
</li>
<li>
<div class="hot_left">
<img src="../assets/img/home/tour4.png" alt="">
<i class="index">1</i>
</div>
<div class="hot_right">
<p>日本西瓜卡Suica卡（交通卡地铁巴士购物储值日本西瓜卡Suica卡（交通卡地铁巴士购物储值</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:16px;font-weight:bold">310</span>起</span></p>
</div>
</li>
<li>
<div class="hot_left">
<img src="../assets/img/home/tour4.png" alt="">
<i class="index">1</i>
</div>
<div class="hot_right">
<p>日本西瓜卡Suica卡（交通卡地铁巴士购物储值日本西瓜卡Suica卡（交通卡地铁巴士购物储值</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:16px;font-weight:bold">310</span>起</span></p>
</div>
</li>
<li>
<div class="hot_left">
<img src="../assets/img/home/tour4.png" alt="">
<i class="index">1</i>
</div>
<div class="hot_right">
<p>日本西瓜卡Suica卡（交通卡地铁巴士购物储值日本西瓜卡Suica卡（交通卡地铁巴士购物储值</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:16px;font-weight:bold">310</span>起</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 酒店 -->
<div class="Grouptour hotel">
<div class="tour_left">
<p>酒店</p>
<div class="tour_left_content hotel_left_content">
<p style="font-size:14px;font-weight:700">临期促销</p>
<span>曼谷</span>
<span>土耳其</span>
<span>土耳其</span>
<span>曼谷</span>
</div>
</div>
<div class="tour_right">
<ul class="common_ul_tab">
<li :class="liActive==0?'li_active':''">海外酒店</li>
<li :class="liActive==1?'li_active':''">国内酒店</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div class="hotel_right">
<div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div>
<div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div>
</div>
</div>
</div>
<!-- 特价机票 -->
<div class="Ticket_spots Special_ticket">
<ul class="common_ul_tab">
<span style="font-weight:700;margin-right:172px">特价机票</span>
<li :class="liActive==0?'li_active':''">国际特价票</li>
<li :class="liActive==1?'li_active':''">国内机票</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div style="position:relative">
<div class="Ticket_spots_left">
<div class="Special_ticket_content">
<div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div>
<div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div><div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div><div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div><div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div><div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div><div class="Special_ticket_item">
<p style="font-size:14px;">
<span>成都</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>成都</span>
</p>
<p>4月14日/4月15日</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起
<span class="qg">抢购</span>
</p>
</div>
</div>
</div>
<div class="Special_ticket_right"></div>
</div>
</div>
<!-- 当地游 -->
<div class="Localtour">
<ul class="common_ul_tab">
<span style="font-weight:700;margin-right:172px">当地游</span>
<li :class="liActive==0?'li_active':''">国际特价票</li>
<li :class="liActive==1?'li_active':''">国内机票</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div style="position:relative;margin-left: -15px;">
<div class="Localtour_right Localtour_item">
<div style="position:absolute">
<p style="font-size:14px;font-weight:bold">热门推荐</p>
<ul>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
<li><span class="button-content">1</span> 香港迪士尼乐园</li>
</ul>
</div>
</div>
<div class="Localtour_item">
<img src="../assets/img/home/tour_1.png" alt="">
<div style="color:#fff" class="city">
<p>dongjing</p>
<p>东京</p>
</div>
<div class="price">
<p style="color:#fff">￥<span style="font-size:18px;font-weight:bold;color:#FF6600">310</span>起</p>
</div>
</div>
<div class="Localtour_item">
<img src="../assets/img/home/tour_1.png" alt="">
<div style="color:#fff" class="city">
<p>dongjing</p>
<p>东京</p>
</div>
<div class="price">
<p style="color:#fff">￥<span style="font-size:18px;font-weight:bold;color:#FF6600">310</span>起</p>
</div>
</div>
<div class="Localtour_item">
<img src="../assets/img/home/tour_1.png" alt="">
<div style="color:#fff" class="city">
<p>dongjing</p>
<p>东京</p>
</div>
<div class="price">
<p style="color:#fff">￥<span style="font-size:18px;font-weight:bold;color:#FF6600">310</span>起</p>
</div>
</div>
<div class="Localtour_item">
<img src="../assets/img/home/tour_1.png" alt="">
<div style="color:#fff" class="city">
<p>dongjing</p>
<p>东京</p>
</div>
<div class="price">
<p style="color:#fff">￥<span style="font-size:18px;font-weight:bold;color:#FF6600">310</span>起</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom1">
<el-row class="bottom1_row">
<el-col :span="2">
<span class="iconfont icon-zhifeiji"></span>
</el-col>
<el-col :span="4">
<span class="fontb">阳光行程</span>
<span class="fonts">透明公开</span>
</el-col>
<el-col :span="2">
<span class="iconfont icon-zhuqunguanli"></span>
</el-col>
<el-col :span="4">
<span class="fontb">阳光价格</span>
<span class="fonts">明码标价</span>
</el-col>
<el-col :span="2">
<span class="iconfont icon-woshou"></span>
</el-col>
<el-col :span="4">
<span class="fontb">阳光服务</span>
<span class="fonts">专属客服</span>
</el-col>
<el-col :span="2">
<span class="iconfont icon-dianhua"></span>
</el-col>
<el-col :span="4">
<span class="fonts">客户服务电话(免长途费)</span>
<p class="fontb">4007-999-999</p>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
banner_height: "0px",
visa_form: {},
ticket_form: {},
tag: "visa",
activecontent1: "first",
activeName: "first",
hotel_tab: "gjjd",
person: [1, 2, 3, 4, 5, 6, 7, 8, 9],
liActive: 0
};
},
mounted() {},
created() {
this.loadSize();
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
ChangeTab(str) {
this.tag = str;
},
loadSize() {
let w = document.body.clientWidth;
this.carousel_height = w * 0.269 * 0.75 + "px";
this.banner_height = w * 0.205 + "px";
}
}
};
</script>
<style>
@import "../assets/css/home.css";
</style>
src/components/global/head.vue
View file @ e45b67b3
...@@ -87,11 +87,13 @@ color:rgba(51,51,51,1); ...@@ -87,11 +87,13 @@ color:rgba(51,51,51,1);
<el-menu-item index="2-1">跟团游</el-menu-item> <el-menu-item index="2-1">跟团游</el-menu-item>
<el-menu-item index="2-2">一日游</el-menu-item> <el-menu-item index="2-2">一日游</el-menu-item>
</el-submenu> --> </el-submenu> -->
<el-menu-item index="0" @click="goUrl('Home',true)"><a href="javascript:void(0);">首页</a></el-menu-item>
<el-menu-item index="2-1" @click="handleSelect('2-1',false)"><a href="javascript:void(0);">跟团游</a></el-menu-item> <el-menu-item index="2-1" @click="handleSelect('2-1',false)"><a href="javascript:void(0);">跟团游</a></el-menu-item>
<el-menu-item index="2-2" @click="handleSelect('2-2',true)"><a href="javascript:void(0);">当地游</a></el-menu-item> <el-menu-item index="2-2" @click="handleSelect('2-2',true)"><a href="javascript:void(0);">当地游</a></el-menu-item>
<!-- <el-menu-item index="3" @click="goUrl('TicketHome',true)"><a href="javascript:void(0);">机票</a></el-menu-item> --> <!-- <el-menu-item index="3" @click="goUrl('TicketHome',true)"><a href="javascript:void(0);">机票</a></el-menu-item> -->
<el-menu-item index="4" @click="goUrl('VisaHomePage',true)"><a href="javascript:void(0);">签证</a></el-menu-item> <el-menu-item index="4" @click="goUrl('VisaHomePage',true)"><a href="javascript:void(0);">签证</a></el-menu-item>
<!-- <el-menu-item index="5" @click="goUrl('IndependentTravel',true)"><a href="javascript:void(0);">自由行</a></el-menu-item> --> <el-menu-item index="5" @click="goUrl('IndependentTravel',true)"><a href="javascript:void(0);">自由行</a></el-menu-item>
<!-- <el-menu-item index="5"><a href="javascript:void(0);">机票</a></el-menu-item> <!-- <el-menu-item index="5"><a href="javascript:void(0);">机票</a></el-menu-item>
<el-menu-item index="2"><a href="javascript:void(0);">酒店</a></el-menu-item> <el-menu-item index="2"><a href="javascript:void(0);">酒店</a></el-menu-item>
......
src/router.js
View file @ e45b67b3
...@@ -335,6 +335,15 @@ export default new Router({ ...@@ -335,6 +335,15 @@ export default new Router({
title: "私人定制" title: "私人定制"
} }
}, },
{
path: "/Home",
name: "Home",
component: resolve =>
require(["@/components/Home.vue"], resolve),
meta: {
title: "首页"
}
},
] ]
}, },
......
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