Skip to content

C
CRM
Commit 6a6409c6 authored by 罗超's avatar 罗超
Browse files
Options

解决冲突

parents 0621b330 2bfff7d6
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 1487 deletions
src/App.vue
View file @ 6a6409c6
......@@ -10,7 +10,9 @@ export default {
}
},
mounted() {
this.$router.push({
name: "Home"
});
},
methods: {
......
src/assets/css/init.css
View file @ 6a6409c6
......@@ -12,4 +12,10 @@ sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
\ No newline at end of file
table { border-collapse:collapse; border-spacing:0; }
.w110{
width: 110px;
}
.height100{
height: 100%;
}
\ No newline at end of file
src/components/Home.vue
View file @ 6a6409c6
<style>
.home-page .home-page-box{
height: 415px;
padding-right: 30px;
margin-bottom: 30px;
}
.home-page .home-page-box .ht-left,.home-page .home-page-box .ht-right{
height: 100%;
background:rgba(255,255,255,1);
border-radius:30px;
padding: 28px 27px;
box-sizing: border-box;
}
.home-page .home-page-box .tit{
font-size:14px;
font-weight:bold;
color:rgba(17,17,17,1);
}
.khjb{
margin-top: 30px;
}
.khjb li{
padding: 14px 93px 14px 30px;
display: flex;
align-items: center;
justify-content: space-between;
background:rgba(244,245,249,1);
margin-bottom: 5px;
font-size:12px;
font-weight:400;
color:rgba(17,17,17,1);
}
.khjb li:first-child{
border-radius:30px 30px 0 0;
}
.khjb li:last-child {
border-radius:0 0 30px 30px;
}
</style>
<template>
<div v-loading="PageLoad" class="Home commonF">
<div class="Home_top">
<el-carousel arrow="always" height="300px" :interval="10000" trigger="click" :style="{'background':'#ddd'}">
<el-carousel-item>
<a style="display:block;height:100%" href="http://www.oytour.com/#/Juanski" target="_blank">
<img src='../assets/img/juan/huaxue1.jpg'>
</a>
</el-carousel-item>
<el-carousel-item>
<a style="display:block;height:100%" href="http://www.oytour.com/#/FoodImg2" target="_blank">
<img src='../assets/img/juan/qiufenghuodong.jpg'>
</a>
</el-carousel-item>
<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;bottom:20px;z-index:100;left:20%">
<div>
<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 style="width:394px" 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> -->
<ul class="visaul_li">
<li>国家/地区</li>
<li><span class="iconfont icon-vertical_line"></span></li>
<li>
<el-input size="small" v-model="visaSearch" placeholder="国家或者地区名字"></el-input>
</li>
</ul>
<div style="overflow:auto;margin-top:10px">
<span class="form_btn">
<router-link style="color:#fff;display:block;" :to="{ path: '/Visalist',query:{'searchKey':visaSearch} }" target='_blank'>立即搜索</router-link>
</span>
</div>
<ul class="form_ul">
<p style="margin:6px 0;display: flex;align-items: center;">
<span class="green_span"></span> 热门推荐
</p>
<li @click="TagGourl('Visalist',item)" v-for="(item,index) in searchItemVisa.hotCountry" :key="index+350">
{{item.name}}
</li>
</ul>
</el-form>
</div>
<!-- 机票 -->
<div style="width:394px;margin-top: -15px;" v-show="tag=='ticket'" class="ticket">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="国际机票" name="first">
<p style="margin-bottom:5px">
<el-radio v-model="choose_info.ticketType" :label=1>单程</el-radio>
<el-radio v-model="choose_info.ticketType" :label=2>往返</el-radio>
</p>
<div style="margin-top:15px;">
<ul class="chooseticketul">
<li>
<span>出发地</span>
<span class="iconfont icon-vertical_line"></span>
<span>
<el-popover v-model="startcity" :visible-arrow="false"
placement="bottom"
trigger="click">
<div class="citycompent">
<v-city @CityInfo="CityInfo" @CityCompClose="CityCompClose"></v-city>
</div>
<span slot="reference">
<el-input size="small" clearable class="ChooseCity" v-model="choose_info.departure_cityname" placeholder="城市">
</el-input>
</span>
</el-popover>
</span>
</li>
<span @click="CityChange" style="cursor: pointer;margin:0 3px;display:inline-block;width:20px;height:20px;background:#15B6A1;border-radius:50%;text-align:center;color:#fff">换</span>
<li>
<span>目的地</span>
<span class="iconfont icon-vertical_line"></span>
<span>
<el-popover v-model="endcity" :visible-arrow="false"
placement="bottom"
trigger="click">
<div v-show="endcity" class="citycompent">
<v-city1 @CityInfo1="CityInfo1" @CityCompClose1="CityCompClose1"></v-city1>
</div>
<span slot="reference">
<el-input size="mini" clearable class="ChooseCity" v-model="choose_info.arrival_cityname" placeholder="城市">
</el-input>
</span>
</el-popover>
</span>
</li>
<li>
<span>成人</span>
<span class="iconfont icon-vertical_line"></span>
<span>
<el-select size="small" v-model="choose_info.cr" placeholder="请选择">
<el-option
v-for="item in person"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</span>
</li>
<li style="margin-left:26px;">
<span>儿童</span>
<span class="iconfont icon-vertical_line"></span>
<span>
<el-select size="small" v-model="choose_info.child" placeholder="请选择">
<el-option
v-for="item in person"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</span>
</li>
<li>
<span>出发日期</span>
<span class="iconfont icon-vertical_line"></span>
<span>
<el-date-picker
size="small" prefix-icon=" " style="width:100%"
value-format="yyyy-MM-dd"
v-model="choose_info.qFlightDateStart"
type="date"
:picker-options="pickerOptions0"
placeholder="选择日期">
</el-date-picker>
</span>
</li>
<!-- <li style="margin-left:26px;">
<span>返回日期</span>
<span class="iconfont icon-vertical_line"></span>
<span>
<el-date-picker prefix-icon=" " style="width:100%" size="small"
v-model="visa_form.value1"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</span>
</li> -->
</ul>
</div>
<div style="overflow:auto;">
<span @click="SearchTicket" class="form_btn">立即搜索</span>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="国内机票" name="second">国内机票</el-tab-pane> -->
</el-tabs>
</div>
<!-- 酒店 -->
<div style="width:394px;margin-top: -15px;" v-show="tag=='hotel'" class="visa hotel_tabcontent">
<el-tabs v-model="hotel_tab" @tab-click="handleClick">
<el-tab-pane label="国际酒店" name="gjjd">
<el-form label-width="60px">
<ul class="visaul_li">
<li>目的地</li>
<li><span class="iconfont icon-vertical_line"></span></li>
<li>
<el-input size="small" v-model="HotelMsg.place" placeholder="目的地"></el-input>
</li>
</ul>
<div style="margin-top:16px;overflow:auto">
<div style="float:left;width:182px">
<ul class="visaul_li">
<li>入住日</li>
<li><span class="iconfont icon-vertical_line"></span></li>
<li>
<el-date-picker prefix-icon=" " style="width:100%" size="small"
v-model="HotelMsg.StartDate"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions0"
placeholder="选择日期">
</el-date-picker>
</li>
</ul>
</div>
<div style="float:right;width:182px">
<ul class="visaul_li">
<li>离店日</li>
<li><span class="iconfont icon-vertical_line"></span></li>
<li>
<el-date-picker prefix-icon=" " style="width:100%" size="small"
v-model="HotelMsg.EndDate"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions0"
type="date"
placeholder="选择日期">
</el-date-picker>
</li>
</ul>
</div>
</div>
<div style="overflow:auto;margin-top:10px">
<span class="form_btn" @click="SearchHotel">立即搜索</span>
</div>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<!-- 门票 v-show="tag=='admticket'"-->
<div style="width:394px" class="visa" v-show="false">
<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> -->
<ul class="visaul_li">
<li>关键词搜索</li>
<li><span class="iconfont icon-vertical_line"></span></li>
<li>
<el-input size="small" v-model="scenSearchKey" placeholder="输入景点名称、城市或主题"></el-input>
</li>
</ul>
<div style="overflow:auto;margin-top:10px">
<span @click="ScenSearch" class="form_btn">立即搜索</span>
</div>
<ul class="form_ul basefix">
<p style="margin:6px 0;display: flex;align-items: center;">
<span class="green_span"></span> 热门国家
</p>
<li @click="TagGourl('LocalTourList',item,2)" v-if="index<4" v-for="(item,index) in searchTicket.hotCountry" :key="index+400">
{{item.name}}
</li>
</ul>
<ul class="form_ul basefix">
<p style="margin:6px 0;display: flex;align-items: center;">
<span class="green_span"></span> 热门景点
</p>
<li @click="TagGourl('TicketDetails',item,-1)" class="text1" v-for="(item,index) in searchTicket.hotTicketCoupon" :key="index+450">
<el-tooltip :content="item.name" placement="top">
<span>{{item.name}}</span>
</el-tooltip>
</li>
</ul>
</el-form>
</div>
<div class="home-page">
<div class="home-page-box">
<el-row :gutter="20" class="height100">
<el-col :span="18" class="height100">
<div class="ht-left">
</div>
</el-col>
<el-col :span="6" class="height100">
<div class="ht-right">
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 内容 -->
<div class="home_content" style="width:1180px;box-sizing:border-box;padding:20px 10px;margin:0 auto">
<!-- 超值特卖 -->
<div class="cztm" style="height:199px">
<el-tabs v-model="activecontent1" @tab-click="handleClick">
<el-tab-pane label="超值特卖" name="first">
<div style="margin-left:-25px">
<div @click="goLocalDes(item.idDes, item)" v-if="index<5" :key="index+700" v-for="(item,index) in homeTravelSpecialSale" class="cztm_item">
<img v-if="item.imgCover[0].url" :src='compressImg(item.imgCover[0].url, "filt", 245, "")' alt="">
<img v-else src="//dimg07.c-ctrip.com/images/100j0y000000m0bhg78DC_C_221_166.jpg" alt="">
<div class="cztm_item_content">
<div id="triangle-left"></div>
<p class="cztm_title text2">{{item.title}}</p>
<p style="margin-top:8px" class="cztm_title">{{item.dayNum}}日{{item.nightNum}}晚</p>
<!-- <p><span class="discount">7.2折</span></p> -->
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起
</p>
<p v-html="ComputingTime(item)">}</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 @click="Purchase(item)" v-if="index<5" v-for="(item,index) in AllTicketList" :key="index+800" class="tj_ticket">
<div class="ticket_top">
{{item.alName}}
<div class="cirle circle_left"></div>
<div class="cirle circle_right"></div>
</div>
<div class="ticket_content">
<el-row class="ticketTitle" style="font-size:16px;position:relative">
<div style="padding:10px 0">
<div class="Divtitle" style="position:relative;z-index:1">
<span>{{item.departureName}}</span>
<span style="float:right">{{item.arrivalCityName}}</span>
</div>
<div class="bg">
<i class="iconfont icon-Shape1" style="font-size:12px;color:#dcdcdc;position:relative;top:-5px"></i>
<span class="dashed"></span>
</div>
</div>
<!-- <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">日期：{{item.flightDate}}</p>
<p style="font-size:12px;padding:2px 0 2px 10px">￥
<span style="color:#FF6600;font-size:16px;font-weight:700">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起</p>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<img
@click="FootgoUrl('xiazaiAPP')"
class="huodong_img"
style="width: 1160px;cursor: pointer;"
src="../assets/img/juan/appguangao.jpg"
alt
>
<!-- 跟团游 -->
<div class="Grouptour">
<div class="tour_left">
<p class="pfR">跟团游</p>
<div class="tour_left_content">
<p style="font-size:14px;font-weight:700">热门目的地</p>
<span v-if="index<10" v-for="(item,index) in packageTravel.placeNames" :key="index">
<router-link :to="{ path: '/search',query:{'keywords':item} }" target='_blank'>{{item}}</router-link>
</span>
</div>
</div>
<div class="tour_right">
<ul class="common_ul_tab" style="min-height:32px;">
<li @click="ClickpackageTravel(item,0)" v-for="(item,index) in packageTravel.lineItem" :key="index+50" :class="gotuan.lineId==item.lineId?'li_active':''">{{item.lineShortName}}</li>
<span @click="GoMore('heel')" style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div v-loading="Travelload" class="tour_right_content" style="height:342px">
<div @click="goLocalDes(item.idDes, item)" v-if="index<8" v-for="(item,index) in TravelPriceList" :key="index+100" class="tour_right_item">
<div style="position:relative;height:127px">
<!-- <img v-if="item.imgCover[0].url" :src='item.imgCover[0].url' alt=""> -->
<img v-if="item.imgCover[0].url" :src='compressImg(item.imgCover[0].url, "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour4.png" alt="">
<p class="Remarks text1">{{item.title}}</p>
</div>
<div>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起</span>
<span style="color:#666666;float:right;margin-top:6px">席位充足</span>
</div>
</div>
</div>
</div>
</div>
<!-- 幸运大抽奖跳转 --><el-row style="margin: 20px 0;cursor: pointer;">
<img style="width:1160px;"
@click="FootgoUrl('TurnaroundDraw')"
class="huodong_img"
src="../assets/img/active/huodong_img.png"
alt
>
</el-row>
<!-- 自由行 -->
<div class="travel Grouptour" v-show="false">
<div class="tour_left">
<p class="pfR">自由行</p>
<div class="tour_left_content travel_left" style="height:325px;">
<p style="font-size:14px;font-weight:700">热门目的地</p>
<span v-if="index<7" v-for="(item,index) in freeTravel.placeNames" :key="index">
<router-link :to="{ path: '/IndependentList',query:{'keywords':item} }" target='_blank' >{{item}}</router-link>
</span>
</div>
</div>
<div v-loading="freelload" class="tour_right">
<ul class="common_ul_tab">
<li @click="ClickpackageTravel(item,1)" v-for="(item,index) in freeTravel.lineItem" :key="index+50" :class="freeMsg.lineId==item.lineId?'li_active':''">{{item.lineShortName}}</li>
<span @click="GoMore('IndependentList')" style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div class="travel_right_content">
<div @click="goUrl('detailTwo',item.idDes,item.tcid)" v-if="index==0" v-for="(item,index) in freePriceList" :key="index+150" class="travel_right_item travel_right_item_big">
<img v-if="item.imgCover[0].url" :src='compressImg(item.imgCover[0].url, "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p class="text2">{{item.title}}</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起</span></p>
</div>
</div>
<div class="travel_samll_div">
<div @click="goUrl('detailTwo',item.idDes,item.tcid)" v-if="index>0 && index<5" v-for="(item,index) in freePriceList" :key="index+150" class="travel_right_item travel_right_item_small">
<img v-if="item.imgCover[0].url" :src='compressImg(item.imgCover[0].url, "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p class="text2">{{item.title}}</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起</span></p>
</div>
</div>
</div>
<div @click="goUrl('detailTwo',item.idDes,item.tcid)" v-if="index==5" v-for="(item,index) in freePriceList" :key="index+150" class="travel_right_item travel_right_item_big">
<img v-if="item.imgCover[0].url" :src='compressImg(item.imgCover[0].url, "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour4.png" alt="">
<div class="Remarks">
<p class="text2">{{item.title}}</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- 冰糕活动跳转 -->
<!-- <el-row style="margin: 20px 0;cursor: pointer;">
<img
@click="FootgoUrl('IceCreamTask')"
class="huodong_img"
src="../assets/img/active/huodong_img1.png"
alt
>
</el-row> -->
<!-- 景点门票 -->
<div class="Ticket_spots" v-show="false">
<ul class="common_ul_tab">
<span style="font-weight:700;margin-right:172px">景点门票</span>
<li @click="ClickTicket(item)" v-for="(item,index) in tciketCountry" :key="index+200" :class="ticketMsg.countryId==item.countryId?'li_active':''">{{item.countryName}}</li>
<span @click="GoMore('LocalTourList',2)" style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div style="position:relative">
<div v-loading="ticketload" class="Ticket_spots_left" style="height:434px">
<div class="_spots_content">
<div @click="GoTicket(item)" v-for="(item,index) in tciketCountryList" :key="index+300" class="_spots_item">
<div style="position:relative">
<!-- <span class="city">香港</span> -->
<img v-if="item.coverImgs[0]" :src='compressImg(item.coverImgs[0], "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour1.png" alt="">
<div class="home-page-box">
<el-row :gutter="20" class="height100">
<el-col :span="18" class="height100">
<div class="ht-left">
<p class="tit">客户简报</p>
<ul class="khjb">
<li v-for="(item, index) in newCast" :key="index">
<div>
<p class="Remarks text2" style="height:34px">{{item.name}}</p>
<span style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2cPrice : item.b2bPrice) | NoDesnum}}
</span>起</span>
<span style="color:#666666;float:right;margin-top:6px">席位充足</span>
<img :src="`../../assets/img/home/img${index}.png`" alt="">
<span>{{item.name}}</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 @click="GoTicket(item)" v-if="index<5" v-for="(item,index) in bestSellTicketCoupons" :key="index+200">
<div class="hot_left">
<img v-if="item.coverImgs[0]" :src='compressImg(item.coverImgs[0], "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour4.png" alt="">
<i class="index">{{index+1}}</i>
</div>
<div class="hot_right">
<p class="text2" style="height:34px">{{item.name}}</p>
<p style="text-align:right"><span style="color:#FF6600">￥<span style="font-size:16px;font-weight:bold">
{{(isLogin!=1 ? item.b2cPrice : item.b2bPrice) | NoDesnum}}
</span>起</span></p>
</div>
</li>
</ul>
</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" style="text-align:left">
<p class="pfR" 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" style="text-align:left">
<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" style="text-align:left">
<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" style="text-align:left">
<p style="font-size:14px;color:#FF9000">客服服务电话</p>
<p class="pfR" style="font-size:18px;color:#FF9000">028-88888888</p>
</el-col>
</el-row>
<!-- 酒店 -->
<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 @click="goSearchDetail('名古屋')">名古屋</span>
<span @click="goSearchDetail('大分县')">别府</span>
<span @click="goSearchDetail('北海道')">洞爷.登别.苫小牧</span>
<span @click="goSearchDetail('东京都')">上野.浅草两国</span>
<span @click="goSearchDetail('兵库县')">神户.有马.明石</span>
<span @click="goSearchDetail('神奈川县')">箱根</span>
<span @click="goSearchDetail('京都府')">京都站周边</span>
</div>
</div>
<div class="tour_right">
<ul class="common_ul_tab">
<li :class="liActive==0?'li_active':''" @click="getHotelList('东京都'),liActive=0">东京</li>
<li :class="liActive==1?'li_active':''" @click="getHotelList('大阪府'),liActive=1">大阪</li>
<li :class="liActive==2?'li_active':''" @click="getHotelList('京都府'),liActive=2">京都</li>
<span style="float:right;color:#999999;font-size:12px" @click="SearchHotelMore">查看更多</span>
</ul>
<div class="hotel_right" v-loading="hotelLoading">
<div class="hotel_right_item" v-for="item in HotelList" @click="goHotelDetail(item)">
<img :src="item.hotelImageUrl" alt=""/>
<div class="hotel_remake">
<p class="Home_HtName">{{item.hotelName}}</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">{{item.lowrateBySetCurrency}}</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 @click="ClickTJTicket(item)" v-for="(item,index) in specialAirTicketItem" :key="index+650" :class="item.type==airMsg.airTicketType?'li_active':''">
{{item.name}}
</li>
<span @click="GoMore('TicketHome')" style="float:right;color:#999999;font-size:12px">查看更多</span>
</ul>
<div style="position:relative">
<div class="Ticket_spots_left" style="height:284px">
<div v-loading="airLoad" class="Special_ticket_content">
<div v-if="index<8" v-for="(item,index) in airTicketList" :key="index+750" class="Special_ticket_item">
<p style="font-size:14px;">
<span>{{item.departureName}}</span>
<span style="margin:0 10px" class="iconfont icon-jiang-copy"></span>
<span>{{item.arrivalCityName}}</span>
</p>
<p>{{item.flightDate}}</p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起
<span @click="Purchase(item)" class="qg">抢购</span>
</p>
</div>
</div>
</div>
<div class="Special_ticket_right">
<router-link style="display:block;width:100%;height:100%" :to="{ path: '/TicketHome'}" target='_blank'></router-link>
</div>
</div>
</div>
<!-- 当地游 -->
<div class="Localtour">
<ul class="common_ul_tab">
<span style="font-weight:700;margin-right:172px">当地游</span>
<li @click="ClickLocal(item)" v-for="item in localLineItem" :key="item.lineName" :class="localMsg.lineId==item.lineId?'li_active':''">{{item.lineShortName}}</li>
<span @click="GoMore('LocalTourList',1)" 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 @click="GoMore('LocalTourList',item.type)" v-if="index<7" v-for="(item,index) in hotRecommend" :key="index+500">
<span class="button-content">{{index+1}}</span>
{{item.name}}
<p>{{item.num}}</p>
</li>
</ul>
</div>
</div>
<div v-loading="localload" @click="goLocalDetail(item)" v-for="(item,index) in localPriceList" :key="index+550" class="Localtour_item">
<img v-if="item.imgCover[0].url" :src='compressImg(item.imgCover[0].url, "filt", 245, "")' alt="">
<img v-else src="../assets/img/home/tour_1.png" alt="">
<div style="color:#fff" class="city">
<!-- <p>dongjing</p> -->
<p class="text1">{{item.ltName}}</p>
</el-col>
<el-col :span="6" class="height100">
<div class="ht-right">
</div>
<div class="price">
<p class="f12" style="color:#fff;">￥<span style="font-size:18px;font-weight:bold;color:#FF6600">
{{(isLogin!=1 ? item.b2CPrice : item.b2BPrice) | NoDesnum}}
</span>起</p>
</div>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import ChooseCity from "@/components/Ticket/ChooseCity.vue";
import ChooseCity1 from "@/components/Ticket/ChooseCity1.vue";
import moment from "moment";
export default {
components: {
"v-city": ChooseCity,
"v-city1": ChooseCity1
},
data() {
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
startcity:false,
endcity:false,
choose_info: {
pageIndex: 1,
pageSize: 10,
id: 0,
qFlightDateStart: moment().format("YYYY-MM-DD"),
qFlightDateEnd: "",
flight_number: "",
airLineID: 0,
ticketType: 2,
lineId: 0,
isPayOrder: 0,
departure_city: 0,
departure_cityname: "",
arrival_city: 0,
arrival_cityname: "",
freightSpace: 0,
airTicketScatterNum: 0,
cr: 0,
child: 0,
ye: 0,
lr: 0
},
banner_height: "0px",
visaSearch:"",
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,
packageTravel:{},
gotuan:{
teamType:0,
lineId:0,
},
TravelPriceList:[],
Travelload:false,
//酒店查询信息
HotelMsg:{
place:'',
StartDate:'',
EndDate:'',
auditNum:1,
childNum:0,
room:1,
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
},
// 自由行
freeTravel:{},
freelload:false,
freeMsg:{
teamType:1,
lineId:0,
},
freePriceList:[],
// 景点门票
ticketItem:{},
hotticketMsg:{
pageIndex:1,
pageSize:5,
countryId:0,
},
bestSellTicketCoupons:[],
tciketCountry:[],
tciketCountryList:[],
ticketMsg:{
pageIndex:1,
pageSize:8,
countryId:0,
},
ticketload:false,
// 搜索
searchItemVisa:{},
searchTicket:{},
// 当地游
hotRecommend:[],
localLineItem:[],
localPriceList:[],
localMsg:{
lineId:0,
pageIndex:1,
pageSize:4,
},
localload:false,
PageLoad:false,
specialAirTicketItem:{},
airMsg:{
airTicketType:0,
pageIndex:1,
pageSize:10,
},
airTicketList:[],
airLoad:false,
scenSearchKey:"",
// 超值特卖
homeTravelSpecialSale:[],
AllTicketList:[],
isLogin:0,
cityId:262,
companyId:0,
//酒店数据
HotelList:[],
hotelLoading:false,
//酒店详情传过去参数
PassMsg:{
hotelId:'',
groupBookingFlg:'',
arrivalDate:'',
departureDate:'',
searchroomGroup:[],
lowrateBySetCurrency:''
},
pickerOptions0: {
disabledDate(time) {
let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
}
},
};
},
props:['changeCity'],
watch:{
changeCity: {
handler: function(val, oldVal) {
if(val){
this.cityId=localStorage.cityId;
this.companyId=parseInt(localStorage.site);
this.NotTuanTravel();
this.Cztm();
data () {
return {
newCast: [
{
name: '新增客户',
num: 50
},{
name: '新增联系人',
num: 11
},{
name: '新增商机',
num: 467
},{
name: '阶段变化的商机',
num: 1
},{
name: '新增合同',
num: 39
}
},
deep: true
},
},
mounted() {
this.cityId=localStorage.cityId;
this.companyId=parseInt(localStorage.site);
this.getHotelList('东京都');
},
created() {
this.loadSize();
this.InitData();
this.isLogin=this.$store.state.isLogin;
},
methods: {
goLocalDes(idDes,obj){
let path = 'detailTwo'
path=`${path}/${encodeURIComponent(idDes)}/${obj.tcid}`;
let routeData = this.$router.resolve({ path:path});
window.open(routeData.href, '_blank');
// this.$router.push({ name: 'visaList2',query:{"VisaPlanIdStr":obj.VisaPlanIdStr,blank:'y',tab:'签证详情'} })
},
// 机票购买
Purchase(item) {
let isLogin = this.$store.state.isLogin;
if (isLogin == 0) {
this.Error("请先登录！");
this.$router.push({
path: "/login?type=1",
query: { path: this.$route.name }
});
} else {
let routeData = this.$router.resolve({path: `/ticket/FillItinerary/${item.airTicketId}`});
window.open(routeData.href, '_blank');
}
},
// 景点门票关键词搜索
ScenSearch(){
if(this.scenSearchKey==""){
this.Error("请输入景点！")
return;
]
}
this.$router.push({ path:'/LocalTourList',
query:{tab:2,searchKey:this.scenSearchKey} })
},
// 交换城市
CityChange(){
let tempcity=this.choose_info.departure_city;
let tempcityname=this.choose_info.departure_cityname;
this.choose_info.departure_city=this.choose_info.arrival_city;
this.choose_info.departure_cityname=this.choose_info.arrival_cityname;
this.choose_info.arrival_city = tempcity;
this.choose_info.arrival_cityname = tempcityname;
},
SearchTicket(){
sessionStorage.setItem("ChooseInfo", JSON.stringify(this.choose_info));
let routeData = this.$router.resolve({
path: "TicketList"
});
window.open(routeData.href, '_blank');
},
// 出发城市
CityInfo(val) {
this.choose_info.departure_city = val.ID;
this.choose_info.departure_cityname = val.Name;
},
// 出发地关闭子组件
CityCompClose(val) {
this.startcity = false;
},
CityInfo1(val) {
this.choose_info.arrival_city = val.ID;
this.choose_info.arrival_cityname = val.Name;
},
// 目的地关闭子组件
CityCompClose1(val) {
this.endcity = false;
},
TagGourl(path,item,num){
if(num==-1){
let routeData = this.$router.resolve({ name:path,
query:{idDes:encodeURIComponent(item.idDes)} })
window.open(routeData.href, '_blank');
}
else if(num==2){
let routeData = this.$router.resolve({ name: path,
query:{tab:num,id:item.id} })
window.open(routeData.href, '_blank');
}else{
let id=item.id;
let routeData = this.$router.resolve({path: `/${path}?id=${id}`});
window.open(routeData.href, '_blank');
}
},
GoMore(path,num){
if(num==1 || num==2){
// this.$router.push({ name: path,
// query:{tab:num} })
let routeData = this.$router.resolve({ path:path,query:{tab:num}});
window.open(routeData.href, '_blank');
}
else if(num==3){
// this.$router.push({name: 'LocalCuisine'});
let routeData = this.$router.resolve({name: 'LocalCuisine'});
window.open(routeData.href, '_blank');
}
else{
let routeData =this.$router.resolve({name: path});
window.open(routeData.href, '_blank');
}
},
ClickTJTicket(item){
this.airMsg.airTicketType=item.type;
this.airLoad=true;
this.apiJavaPost('/api/b2b/home/getHomeSpecialAirTicketList',this.airMsg,res=>{
this.airLoad=false;
if(res.data.resultCode==1){
this.airTicketList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
// 底部跳转
FootgoUrl(path){
this.$router.push({ path })
},
goLocalDetail(item){
let path = 'OneDayDetailTwo';
path=`${path}/${encodeURIComponent(item.idDes)}/${item.tcid}`;
// this.$router.push({ path })
let routeData = this.$router.resolve({ path:path,query:{local:"local"}});
window.open(routeData.href, '_blank');
},
ClickLocal(item){
this.localMsg.lineId=item.lineId;
this.localload=true;
this.apiJavaPost('/api/b2b/home/getHomeDayTripPrice',this.localMsg,res=>{
this.localload=false;
if(res.data.resultCode==1){
this.localPriceList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
// 门票详情跳转
GoTicket(item){
let routeData = this.$router.resolve({ path:'/TicketDetails',
query:{idDes:encodeURIComponent(item.idDes)} });
window.open(routeData.href, '_blank');
},
// 跳转自由行详情
goUrl(path,idDes,tcid){
path = 'detailTwo'
path=`${path}/${encodeURIComponent(idDes)}/`+tcid
// this.$router.push({ path })
let routeData = this.$router.resolve({ path:path,query:{free:'free'}});
window.open(routeData.href, '_blank');
},
ClickTicket(item){
this.ticketMsg.countryId=item.countryId;
this.ticketload=true;
this.apiJavaPost('/api/b2b/home/getHomeTicketCoupons',this.ticketMsg,res=>{
this.ticketload=false;
if(res.data.resultCode==1){
this.tciketCountryList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
ClickpackageTravel(item,num){
// return;
if(num==0){
this.gotuan.lineId=item.lineId;
this.PackageTravel()
}else{
this.freeMsg.lineId=item.lineId;
this.FreeTravel()
}
},
FreeTravel(){
this.freelload=true;
this.apiJavaPost('/api/b2b/home/getHomeTravelPrice',this.freeMsg,res=>{
this.freelload=false;
if(res.data.resultCode==1){
this.freePriceList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
PackageTravel(){
this.gotuan.companyId= this.companyId;
this.gotuan.cityId= this.cityId;
this.Travelload=true;
this.apiJavaPost('/api/b2b/home/getHomeTravelPrice',this.gotuan,res=>{
this.Travelload=false;
if(res.data.resultCode==1){
this.TravelPriceList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
// 站点不是成都时，跟团游筛选项
NotTuanTravel(){
let msg={companyId:this.companyId,cityId:this.cityId};
this.apiJavaPost('/api/b2b/home/getHomeGroupTravelItem',msg,res=>{
if(res.data.resultCode==1){
this.packageTravel=res.data.data;
if(this.packageTravel.lineItem.length>0){
this.gotuan.lineId=this.packageTravel.lineItem[0].lineId;
this.PackageTravel();
}else{
this.TravelPriceList=[];
}
}else{
this.Error(res.data.message);
}
},null)
},
InitData(){
this.PageLoad=true;
this.apiJavaPost('/api/b2b/home/getHomeInitData',{},res=>{
this.PageLoad=false;
if(res.data.resultCode==1){
let data=res.data.data;
this.packageTravel=data.packageTravel;
// 跟团游
if(data.packageTravel.lineItem.length>0){
this.gotuan.lineId=data.packageTravel.lineItem[0].lineId;
this.TravelPriceList=data.packageTravel.lineItem[0].priceList;
// 自由行
}
this.freeTravel=data.freeTravel;
if(data.freeTravel.lineItem.length>0){
this.freeMsg.lineId=data.freeTravel.lineItem[0].lineId;
this.freePriceList=data.freeTravel.lineItem[0].priceList;
// 自由行
}
// 门票热门畅销
this.bestSellTicketCoupons=data.ticketItem.bestSellTicketCoupons;
this.tciketCountry=data.ticketItem.tciketCountry;
if(data.ticketItem.tciketCountry.length>0){
this.ticketMsg.countryId=data.ticketItem.tciketCountry[0].countryId;
this.tciketCountryList=data.ticketItem.tciketCountry[0].ticketList;
}
// 搜索
this.searchItemVisa=data.searchItem.visa;
this.searchTicket=data.searchItem.ticketCoupos;
// 当地游
if(data.localItem){
this.hotRecommend=data.localItem.hotRecommend;
this.localLineItem=data.localItem.lineItem;
if(this.localLineItem.length>0){
this.localMsg.lineId=this.localLineItem[0].lineId;
this.localPriceList=this.localLineItem[0].priceList;
}
}
// 特价机票
if(data.specialAirTicketItem){
this.specialAirTicketItem=data.specialAirTicketItem.specialAirTicket;
if(this.specialAirTicketItem.length>0){
this.airMsg.airTicketType=this.specialAirTicketItem[0].type;
this.airTicketList=this.specialAirTicketItem[0].airTicketList;
}
}
// 超值特卖
if(data.homeTravelSpecialSale){
this.homeTravelSpecialSale=data.homeTravelSpecialSale;
// this.ComputingTime();
}
// 判断当前站点
if(this.companyId!=0){
this.NotTuanTravel();
this.Cztm();
}
}else{
this.Error(res.data.message);
}
},null)
},
ComputingTime(item){
var returnStr ="";
var startDate = moment().format("x"); //获取系统当前时间
let endDate=moment(item.sendVisaTime).format("x");
var diff = endDate- startDate; //时间差的毫秒数
//计算出相差天数
var days = Math.floor(diff / (24 * 3600 * 1000));
//计算出小时数
var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
// if (days > 0) {
// returnStr += "<span class='bg'>"+days+"</span>" + "天";
// }else{
// returnStr += "<span class='bg'>"+0+"</span>" + "天";
// }
// if (hours > 0) {
// returnStr += "<span class='bg'>"+hours+"</span>" + "时";
// }else{
// returnStr += "<span class='bg'>"+0+"</span>" + "时";
// }
returnStr += "<span class='bg'>"+days+"</span>" + "天";
returnStr += "<span class='bg'>"+hours+"</span>" + "时";
returnStr += "<span class='bg'>"+minutes+"</span>" + "分";
mounted () {
return returnStr
},
handleClick(tab, event) {
if(this.activecontent1=="first"){
this.Cztm();
}else{
this.GetAllTicket();
}
},
Cztm(){
let Msg={
pageIndex:1,
pageSize:5,
companyId:this.companyId,
cityId:this.cityId,
};
this.apiJavaPost('/api/b2b/home/getHomeTravelSpecialSale',Msg,res=>{
if(res.data.resultCode==1){
this.homeTravelSpecialSale=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
GetAllTicket(){
let Msg={
airTicketType:0,
pageIndex:1,
pageSize:5,
};
this.apiJavaPost('/api/b2b/home/getHomeSpecialAirTicketList',Msg,res=>{
if(res.data.resultCode==1){
this.AllTicketList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
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";
},
//酒店点击查询
SearchHotel(){
if(this.HotelMsg.place==''){
this.Error('请输入目的地');
return;
}
if(this.HotelMsg.StartDate==''){
this.Error('请选择入住日期');
return;
}
if(this.HotelMsg.EndDate==''){
this.Error('请选择退房日期');
return;
}
sessionStorage.setItem("HotelInfo", JSON.stringify(this.HotelMsg));
let routeData = this.$router.resolve({
path: "HotelList"
});
window.open(routeData.href, '_blank');
},
//初始化酒店列表
getHotelList(keyWord){
let msg = {
arrivalDate: moment().format("YYYY-MM-DD"),
departureDate: moment().add(1,'days').format('YYYY-MM-DD'),
displayFrom: 1,
freeword: keyWord,
freewordType: 1,
numberOfResults: 8,
reviewRatingLowerLimits: 0,
reviewRatingUpperLimits: 0,
searchHotelCategory: [],
searchHotelFeatures: [],
searchHotelIdList: [],
searchMaxRate: 0,
searchMealType: [],
searchMinRate: 0,
searchRoomType: [],
searchroomGroup: [{roomNum: 1, numberOfAdults: 1, numberOfChildren: 0, childAges: 0}],
sort: 0
}
this.hotelLoading=true;
this.apipost("dmc_post_Get_GetJAPAN_HotelList",msg,res => {
this.hotelLoading=false;
if (res.data.resultCode == 1) {
if(Object.prototype.toString.call(res.data.data.hotelSummary) == '[object Object]'){
this.HotelList.push(res.data.data.hotelSummary);
}else{
this.HotelList = res.data.data.hotelSummary;
}
this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg;
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//首页点击跳转
goSearchDetail(keywords){
let msg = {
place:keywords,
StartDate:moment().format("YYYY-MM-DD"),
EndDate:moment().add(1,'days').format('YYYY-MM-DD'),
room:1,
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
}
sessionStorage.setItem("HotelInfo", JSON.stringify(msg));
this.$router.push({
path:"/HotelList",
})
},
//查看更多
SearchHotelMore() {
let msg ={
place:'',
StartDate:moment().format("YYYY-MM-DD"),
EndDate:moment().add(1,'days').format('YYYY-MM-DD'),
auditNum:1,
childNum:0,
room:1,
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
}
switch(this.liActive){
case 0:
msg.place='东京都';
break;
case 1:
msg.place='大阪府';
break;
case 2:
msg.place='京都府';
break;
}
sessionStorage.setItem("HotelInfo", JSON.stringify(msg));
this.$router.push({
path:"/HotelList"
})
},
//跳转详情
goHotelDetail(item){
this.PassMsg.hotelId = item.hotelId,
this.PassMsg.arrivalDate=moment().format("YYYY-MM-DD");
this.PassMsg.departureDate = moment().add(1,'days').format('YYYY-MM-DD');
this.PassMsg.searchroomGroup = [{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}],
this.PassMsg.lowrateBySetCurrency = item.lowrateBySetCurrency;
this.PassMsg.room = 1
sessionStorage.setItem("HotelDetail", JSON.stringify(this.PassMsg));
this.$router.push({
path:"/HotelDetail"
})
},
methods: {
}
}
};
}
</script>
<style>
@import "../assets/css/home.css";
@import "../assets/css/common.css";
</style>
src/components/HomeNav/HomeNav.vue deleted 100644 → 0
View file @ 0621b330
<style>
.home-nav{
width: 100%;
height: 100%;
}
.log-box{
width: 100%;
height: 13.19%;
}
.log-box{
background-color: white;
}
.log-box>div{
height: 100%;
width: 100%;
background:rgba(13,36,129,1);
border-radius:0px 40px 40px 0px;
display: flex;
align-items: center;
justify-content: center
}
.log-box img{
width: 42px;
}
.home-nav .home-menu {
padding-left: 19px;
}
.home-nav .home-menu .home-menu-item{
color:rgba(255,255,255,1);
font-size: 12px;
cursor: pointer;
transition: all linear .2s;
}
.home-nav .home-menu .home-menu-item>div{
padding: 13px 0 13px 35px;
border-radius: 19px 0 0 19px;
background-color: rgba(13,36,129,1);
}
.home-nav .home-menu .home-menu-item:hover{
background-color: rgb(45, 59, 115);
}
.home-nav .home-menu .home-menu-item.active>div{
font-weight:bold;
color:rgba(13,36,129,1);
opacity: 1;
transition: all linear .2s;
background-color: white
}
</style>
<template>
<div class="home-nav">
<div class="log-box">
<div>
<img src="../../assets/img/logo.png" alt="">
</div>
</div>
<ul class="home-menu">
<li class="home-menu-item" v-for="(item, index) in navList" :key="index" :class="[index === activeIndex ? 'active' : '']" @click="changeMenu(item, index)">
<div>
<i :class="item.class"></i><span>{{item.name}}</span>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
activeIndex: 0,
navList: [
{
class: 'iconfont icondongwu',
name: '仪表盘'
},
{
class: 'iconfont icondongwu',
name: '待办事项'
},
{
class: 'iconfont icondongwu',
name: '线索'
},
{
class: 'iconfont icondongwu',
name: '客户'
},
{
class: 'iconfont icondongwu',
name: '联系人'
},
{
class: 'iconfont icondongwu',
name: '公海'
},
{
class: 'iconfont icondongwu',
name: '商机'
},
{
class: 'iconfont icondongwu',
name: '合同'
}
]
}
},
mounted () {
},
methods: {
changeMenu: function (it, ind) {
this.activeIndex = ind
}
}
}
</script>
src/router.js
View file @ 6a6409c6
......@@ -2,6 +2,7 @@ import Vue from "vue";
import Router from "vue-router";
import index from "./views/index";
import login from "./views/login";
import Home from "./components/Home"
Vue.use(Router);
export default new Router({
......@@ -38,7 +39,14 @@ export default new Router({
content: "IE=Edge,chrome=1"
},
children: [
{
path: "/Home",
name: "Home",
component: Home,
meta: {
title: "CRM-仪表盘",
},
}
]
},
{
......
src/views/index.vue
View file @ 6a6409c6
......@@ -3,7 +3,7 @@
height: 100%;
}
.left-nav{
width: 14.93%;
width: 15%;
float: left;
box-sizing: border-box;
height: 100%;
......@@ -11,26 +11,56 @@
}
.right-content{
float: left;
width: calc(100vw - 14.93%);
width: 85%;
background: #F4F5F9;
box-sizing: border-box;
height: 100%;
padding-left: 30px;
}
.home-nv-right{
width: 100%;
height: 11%;
box-sizing: border-box;
}
.template-div{
height: calc(100vh - 14%);
overflow-y: auto;
}
.template-div::-webkit-scrollbar{
width: 4px;
height: 8px;
}
.template-div::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.template-div::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #EDEDED;
}
</style>
<template>
<div class="clearfix main">
<div class="left-nav">
<HomeNav/>
<HomeNavLeft/>
</div>
<div class="right-content">
a
<div class="home-nv-right">
<HomeNavRight/>
</div>
<div class="template-div">
<router-view/>
</div>
</div>
</div>
</template>
<script>
import HomeNav from '../components/HomeNav/HomeNav'
import HomeNavLeft from '../components/HomeNav/HomeNavLeft'
import HomeNavRight from '../components/HomeNav/HomeNavRight'
export default {
components: {HomeNav},
components: {HomeNavLeft, HomeNavRight},
data () {
return {
......
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