Skip to content

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

自由行

parent a4da44bb
Hide whitespace changes
Inline Side-by-side
Showing with 330 additions and 8 deletions
src/components/DependentTravel/IndependentTravel.vue 0 → 100644
View file @ db65f5bc
<template>
<div class="Indepentdent">
<div class="top_img">
<div style="padding:15px 0 0 30px">
<img src="../../assets/img/travel/logo.png" alt="">
</div>
<div class="japen">
<p style="font-size:55px;padding:15px 0">JAPAN</p>
<p>日本 自由行</p>
</div>
<div class="box">
<div class="boxCont"></div>
</div>
</div>
<el-row class="back_middle" :gutter="20">
<img class="left1" src="../../assets/img/travel/left1.png" alt="">
<img class="right1" src="../../assets/img/travel/right1.png" alt="">
<el-col :span="18" :offset="3">
<div class="pro_list">
<div>
<img src="../../assets/img/travel/hover1.png" alt="">
<p>大阪</p>
<p class="fg"></p>
<p>osaka</p>
</div>
<div>
<p>东京</p>
<p class="fg"></p>
<p>Tokyo</p>
</div>
<div>
<p>冲绳</p>
<p class="fg"></p>
<p>Okinawa</p>
</div>
<div>
<p>北海道</p>
<p class="fg"></p>
<p>Hokkaido</p>
</div>
<div>
<p>富士山</p>
<p class="fg"></p>
<p>Mount Fuji</p>
</div>
</div>
<!-- 当季精选特惠 -->
<div style="margin-top:40px">
<p style="text-align:center;font-family:PingFang-SC-Regular;">Hot areas in the season</p>
<div class="djjx">
<span class="cont_top">当季精选特惠</span>
<span class="cont_bottom">价格实惠内容更精彩</span>
</div>
<div class="Season_content">
<div>
<div class="Season_content_list">
<div style="position:relative">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="Season_money">
<p style="font-size:12px;padding-top:5px">RMB</p>
<p style="font-size:14px;font-weight:600">5680<span style="font-size:12px;font-weight:10">起</span></p>
</div>
</div>
<div style="padding:20px 10px">
<p style="font-size:16px;font-weight:600;text-align:center">东京-大阪自由行</p>
<div class="text">四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
</div>
</div>
<div>
<div class="Season_content_list">
<div style="position:relative">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="Season_money">
<p style="font-size:12px;padding-top:5px">RMB</p>
<p style="font-size:14px;font-weight:600">5680<span style="font-size:12px;font-weight:10">起</span></p>
</div>
</div>
<div style="padding:20px 10px">
<p style="font-size:16px;font-weight:600;text-align:center">东京-大阪自由行</p>
<div class="text">四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
</div>
</div>
<div>
<div class="Season_content_list">
<div style="position:relative">
<img src="../../assets/img/visa/country1.png" alt="">
<div class="Season_money">
<p style="font-size:12px;padding-top:5px">RMB</p>
<p style="font-size:14px;font-weight:600">5680<span style="font-size:12px;font-weight:10">起</span></p>
</div>
</div>
<div style="padding:20px 10px">
<p style="font-size:16px;font-weight:600;text-align:center">东京-大阪自由行</p>
<div class="text">四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row class="back_middle" :gutter="20">
<img class="left1" src="../../assets/img/travel/left1.png" alt="">
<img class="right1" src="../../assets/img/travel/right1.png" alt="">
<el-col :span="18" :offset="3">
<el-row>
<el-col :span="14"></el-col>
<el-col :span="10"></el-col>
</el-row>
</el-col>
</el-row>
<div class="footer"></div>
</div>
</template>
<script>
export default {
data() {
return {
top: 0
};
},
mounted() {},
methods: {}
};
</script>
<style>
.Indepentdent .footer{
width: 100%;
height: 700px;
background: url("../../assets/img/travel/footer.png");
background-size:100% 100%;
}
.back_middle .left1{
position: absolute;
z-index:-2;
top: 0;
left:0;
}
.back_middle .right1{
position: absolute;
z-index:-2;
top: 0;
right:0;
}
.back_middle{
position: relative;
}
.Indepentdent .Season_content .Season_content_list:hover{
cursor: pointer;
box-shadow:0px 1px 8px 0px rgba(153,153,153,0.6);
}
.Season_content_list .text{
color:#666666;
font-size:12px;
letter-spacing:2px;
padding-top:15px;
max-height: 100px;
box-sizing: border-box;
line-height: 2;
overflow:hidden;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;
}
.Indepentdent .Season_content .Season_content_list .Season_money{
position: absolute;
width: 50px;
height: 50px;
bottom:-25px;
border-radius: 50%;
text-align: center;
background: #F5F5F5;
color: #333333;
left:120px;
}
.Indepentdent .Season_content .Season_content_list img{
width: 100%;
height:130px;
}
.Indepentdent .Season_content .Season_content_list{
width: 285px;
margin:10px 0;
box-sizing: border-box;
display: inline-block;
}
.Indepentdent .Season_content>div{
width:33%;
text-align: center;
}
.Indepentdent .Season_content{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top:30px;
}
.djjx .cont_bottom{
position: absolute;
font-size:14px;
bottom:-10px;
left:25px;
background: #fff;
padding:0 35px;
color: #333333;
}
.djjx .cont_top{
position: absolute;
font-size:24px;
top:-15px;
left: 30px;
background: #fff;
padding:0 20px;
}
.djjx{
width:239px;
height:40px;
background:rgba(255,255,255,1);
position: relative;
margin:15px auto;
background: rgba(0,0,0,0);
border:1px solid #313131;
border-radius: 16px;
font-family: "MicrosoftYaHei";
}
.Indepentdent .top_img .japen{
width:472px;
height:92px;
position: relative;
margin:15px auto;
color: #ffffff;
text-align: center;
}
.Indepentdent ul,p{
margin:0;
padding:0;
}
.Indepentdent .pro_list>div:hover{
border: none;
color: #fff;
/* transition: all linear .2s; */
}
.Indepentdent .pro_list>div .fg{
width:40px;
height:4px;
background:rgba(0,0,0,1);
display: inline-block;
margin:10px auto;
opacity:0.2
}
.Indepentdent .pro_list>div{
display: inline-block;
width: 151px;
height: 151px;
border-radius: 50%;
border:6px solid #eee;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction:column;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
position: relative;
}
.Indepentdent .pro_list>div img{
position: absolute;
left: 0;
top:0;
z-index:-1;
width: 100%;
height: 100%;
}
.Indepentdent .pro_list{
width: 100%;
display: flex;
justify-content: space-between;
}
.Indepentdent .top_img{
width: 100%;
height: 530px;
position: relative;
background: url("../../assets/img/travel/logo_back.png");
}
.box{
width: 100%;
height: 50px;
background: rgba(255,255,255,0);
overflow: hidden;
position: absolute;
bottom:0;
left:0;
}
.boxCont{
width: 100%;
height: 109px;
border-radius: 50%;
background: #fff;
}
</style>
src/components/global/head.vue
View file @ db65f5bc
......@@ -89,7 +89,8 @@ color:rgba(51,51,51,1);
<el-menu-item index="2-4">私人订制</el-menu-item> -->
</el-submenu>
<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="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="2"><a href="javascript:void(0);">酒店</a></el-menu-item>
......
src/components/visa/VisaHomePage.vue
View file @ db65f5bc
......@@ -159,10 +159,9 @@
<div style="padding:30px 0;background:#f5f5f5;margin-top:15px">
<el-row :gutter="20">
<el-col :span="18" :offset="3">
<!-- 限时优惠 -->
<div>
<p style="text-align:center">
<img src="../../assets/img/visa/youhui.png" alt="">
<img src="../../assets/img/visa/hot.png" alt="">
</p>
<el-row style="padding:6px 0">
<el-col :span="10" style="">
......@@ -242,7 +241,7 @@
<el-col :span="18" :offset="3">
<div>
<p style="text-align:center">
<img src="../../assets/img/visa/youhui.png" alt="">
<img src="../../assets/img/visa/hot.png" alt="">
</p>
<el-row style="padding:6px 0">
<el-col :span="10" style="">
......@@ -355,9 +354,7 @@ export default {
}
},
changeScreen(){
console.log("屏幕分辨率为："+screen.width+"*"+screen.height)
let h=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
console.log(h)
this.swiperHeight=h/3.84+'px'
this.searchBoxWidth=h/3.01+'px'
this.searchBoxLeft=(h-(h/3.01))/2+'px'
......
src/plugins/index.js
View file @ db65f5bc
......@@ -18,7 +18,7 @@ export default {
// let domainUrl = "https://reborn.oytour.com"; //刘东主域名
// let domainUrl = "https://reborn.oytour.com";
var domainUrl = "http://test.viitto.com"
let locationName = window.location.hostname;
if (this.isOnline()) {
if(window.location.host.indexOf('viitto.com')!=-1)
domainUrl = "http://test.viitto.com"
......
src/router.js
View file @ db65f5bc
......@@ -211,7 +211,15 @@ export default new Router({
title: "签证"
}
},
{
path: "/IndependentTravel",
name: "IndependentTravel",
component: resolve =>
require(["@/components/DependentTravel/IndependentTravel"], 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