Skip to content

A
Athena
Commit dc4b98a6 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent d739fdd3
Hide whitespace changes
Inline Side-by-side
Showing with 1383 additions and 1250 deletions
src/components/FreeTravel/FreeHome.vue
View file @ dc4b98a6
<style> <style>
.FreeHome{ .FreeHome {
background-color: antiquewhite; background-color: antiquewhite;
background: url(../../assets/img/freeHome/bg-banner2.jpg); background: url(../../assets/img/freeHome/bg-banner2.jpg);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
min-height: 1200px; min-height: 1200px;
} }
.FreeHome>div{
width: 1200px; .FreeHome>div {
margin: 0 auto; width: 1200px;
} margin: 0 auto;
.fh-tit { }
padding: 100px 30px 50px 30px;
text-align: center; .fh-tit {
} padding: 100px 30px 50px 30px;
.fh-search-box{ text-align: center;
position: relative; }
}
.fh-search-box .fh-search-box-input{ .fh-search-box {
width:725px; position: relative;
height: 100px; }
background:rgba(7,109,155,.2);
/* box-shadow:0px 2px 0px 0px rgba(0,76,119,1), 0px 2px 0px 0px rgba(95,181,221,1); */ .fh-search-box .fh-search-box-input {
border-radius:4px; width: 725px;
box-sizing: border-box; height: 100px;
padding: 26px 25px; background: rgba(7, 109, 155, .2);
display: flex; /* box-shadow:0px 2px 0px 0px rgba(0,76,119,1), 0px 2px 0px 0px rgba(95,181,221,1); */
margin: 0 auto; border-radius: 4px;
} box-sizing: border-box;
.fh-search-box .fh-search-box-input div{ padding: 26px 25px;
height: 46px; display: flex;
display: flex; margin: 0 auto;
align-items: center; }
background:rgba(2,111,159,.3);
box-sizing: border-box; .fh-search-box .fh-search-box-input div {
padding: 0 20px; height: 46px;
} display: flex;
.fh-search-box .fh-search-box-input div:nth-child(1){ align-items: center;
flex: 2; background: rgba(2, 111, 159, .3);
} box-sizing: border-box;
.fh-search-box .fh-search-box-input div:nth-child(1) input{ padding: 0 20px;
width: 100%; }
border: none;
outline:none; .fh-search-box .fh-search-box-input div:nth-child(1) {
color: white; flex: 2;
background-color: transparent; }
}
.fh-search-box .fh-search-box-input div:nth-child(1) input::-webkit-input-placeholder { .fh-search-box .fh-search-box-input div:nth-child(1) input {
color: white; width: 100%;
} border: none;
.inputActive{ outline: none;
width: 675px; color: white;
position: absolute; background-color: transparent;
left: 21.9%; }
top: 72px;
z-index: 3; .fh-search-box .fh-search-box-input div:nth-child(1) input::-webkit-input-placeholder {
background-color: white; color: white;
} }
.inputActive .el-row .el-col.el-col-6{
height: 400px; .inputActive {
overflow: auto; width: 675px;
} position: absolute;
.fh-search-box .fh-search-box-input div:nth-child(2){ left: 21.9%;
width: 77px; top: 72px;
justify-content: center; z-index: 3;
background:rgba(238,68,84,1); background-color: white;
color: white; }
cursor: pointer;
} .inputActive .el-row .el-col.el-col-6 {
.FreeHome .fh-city{ height: 400px;
padding-top: 100px; overflow: auto;
display: flex; }
height: 280px;
} .fh-search-box .fh-search-box-input div:nth-child(2) {
.FreeHome .fh-city .city-s{ width: 77px;
width: 200px; justify-content: center;
background: url(../../assets/img/freeHome/bg.png); background: rgba(238, 68, 84, 1);
background-size: 100% 100%; color: white;
background-repeat: no-repeat; cursor: pointer;
position: relative; }
margin-right: 6px;
transition: all linear .5s; .FreeHome .fh-city {
overflow: hidden; padding-top: 100px;
height: 280px; display: flex;
} height: 280px;
.city-tag{ }
padding: 13px 20px;
color: #333; .FreeHome .fh-city .city-s {
width: 99%; width: 200px;
box-sizing: border-box; background: url(../../assets/img/freeHome/bg.png);
position: relative; background-size: 100% 100%;
} background-repeat: no-repeat;
.city-tag.active{ position: relative;
background-color: #EE4454; margin-right: 6px;
color: white; transition: all linear .5s;
} overflow: hidden;
.city-tag p{ height: 280px;
font-size:14px; }
margin-bottom: 5px;
} .city-tag {
.city-tag div span{ padding: 13px 20px;
display: inline-block; color: #333;
padding: 2px 4px 0 0; width: 99%;
} box-sizing: border-box;
.triangle-up { position: relative;
position: absolute; }
right: -3px;
top: 50%; .city-tag.active {
width: 0; background-color: #EE4454;
height: 0; color: white;
transform: translateX(-50%); }
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%); .city-tag p {
border-left: 5px solid transparent; font-size: 14px;
border-right: 5px solid transparent; margin-bottom: 5px;
border-bottom: 5px solid white; }
transform: rotate(-90deg);
} .city-tag div span {
.city-list{ display: inline-block;
display: flex; padding: 2px 4px 0 0;
padding: 10px; }
}
.city-list>span{ .triangle-up {
width: 100px; position: absolute;
font-size:14px; right: -3px;
color: #333; top: 50%;
font-weight:bold; width: 0;
flex: 1; height: 0;
} transform: translateX(-50%);
.city-list>p{ -webkit-transform: translateX(-50%);
color: #888888; -moz-transform: translateX(-50%);
cursor: pointer; border-left: 5px solid transparent;
font-size: 12px; border-right: 5px solid transparent;
flex: 6; border-bottom: 5px solid white;
} transform: rotate(-90deg);
.city-list>p span{ }
display: inline-block;
padding-right: 20px; .city-list {
padding-bottom: 5px; display: flex;
} padding: 10px;
.FreeHome .fh-city .city-s>div{ }
/* background-image: url(https://image.kkday.com/v2/image/get/w_628%2Ch_472%2Cc_fill%2Cq_55%2Ct_webp/s1.kkday.com/campaign_357/20170808084920_CZBUf/jpg); */
background-position: 50%; .city-list>span {
background-size: cover; width: 100px;
height: 280px; font-size: 14px;
} color: #333;
.FreeHome .fh-city .city-s>div>span,.FreeHome .fh-city .city-m>div>span{ font-weight: bold;
font-size:24px; flex: 1;
font-family:Microsoft YaHei; }
font-weight:bold;
color:rgba(255,255,255,1); .city-list>p {
text-shadow:1px 2px 3px rgba(0, 0, 0, 0.45); color: #888888;
position: absolute; cursor: pointer;
right: 34px; font-size: 12px;
top: 15px; flex: 6;
} }
.FreeHome .fh-city .city-m{
position: relative; .city-list>p span {
width: 372px; display: inline-block;
height: 280px; padding-right: 20px;
background:linear-gradient(180deg,rgba(0,0,0,0.57),rgba(0,0,0,-0.38)); padding-bottom: 5px;
border-radius:6px; }
overflow: hidden;
} .FreeHome .fh-city .city-s>div {
.FreeHome .fh-city .city-m>img{ /* background-image: url(https://image.kkday.com/v2/image/get/w_628%2Ch_472%2Cc_fill%2Cq_55%2Ct_webp/s1.kkday.com/campaign_357/20170808084920_CZBUf/jpg); */
width: 100%; background-position: 50%;
height: 100%; background-size: cover;
} height: 280px;
.FreeHome .fh-city .city-s .city-m-b{ }
position: absolute;
bottom: -60px; .FreeHome .fh-city .city-s>div>span,
color: white; .FreeHome .fh-city .city-m>div>span {
} font-size: 24px;
.FreeHome .fh-city .city-s .city-m-b span{ font-family: Microsoft YaHei;
border-radius: 2px; font-weight: bold;
font-size: 12px; color: rgba(255, 255, 255, 1);
} text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);
.FreeHome .fh-city .city-m .city-m-b{ position: absolute;
display: flex; right: 34px;
align-items: center; top: 15px;
position: absolute; }
bottom: 5px;
width: 100%; .FreeHome .fh-city .city-m {
padding-left: 14px; position: relative;
box-sizing: border-box; width: 372px;
justify-content: space-around; height: 280px;
cursor: pointer; background: linear-gradient(180deg, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, -0.38));
} border-radius: 6px;
.FreeHome .fh-city .city-m .city-m-b span{ overflow: hidden;
padding: 5px 10px; }
color: white;
background:rgba(255,255,255, .3); .FreeHome .fh-city .city-m>img {
margin-right: 16px; width: 100%;
cursor: pointer; height: 100%;
transition: all linear .5s; }
}
.FreeHome .fh-city .city-m .city-m-b span:hover{ .FreeHome .fh-city .city-s .city-m-b {
background:rgba(255,255,255, .6); position: absolute;
} bottom: -60px;
.FreeHome .fh-city .city-m .city-m-b span.active{ color: white;
background:rgba(255,255,255, .6); }
}
.FreeHome .more-city{ .FreeHome .fh-city .city-s .city-m-b span {
text-align: center; border-radius: 2px;
padding-top: 40px; font-size: 12px;
} }
.FreeHome .more-city div{
width:170px; .FreeHome .fh-city .city-m .city-m-b {
height:41px; display: flex;
background:rgba(255,255,255,0.1); align-items: center;
box-shadow:0px 2px 27px 0px rgba(0,66,96,0.45); position: absolute;
color: white; bottom: 5px;
line-height:41px; width: 100%;
cursor: pointer; padding-left: 14px;
transition: all linear .5s; box-sizing: border-box;
margin: 0 auto; justify-content: space-around;
} cursor: pointer;
.FreeHome .more-city div:hover{ }
background:rgba(247,101,109,1);
} .FreeHome .fh-city .city-m .city-m-b span {
.fh-tejia p{ padding: 5px 10px;
padding: 100px 0 66px 0; color: white;
text-align: center; background: rgba(255, 255, 255, .3);
font-weight:400; margin-right: 16px;
color:rgba(51,51,51,1); cursor: pointer;
font-size:30px; transition: all linear .5s;
} }
.fh-tejia{
margin-top: 50px; .FreeHome .fh-city .city-m .city-m-b span:hover {
} background: rgba(255, 255, 255, .6);
.fh-tejia .icon-item{ }
width: 400px;
margin: 0 auto; .FreeHome .fh-city .city-m .city-m-b span.active {
display: flex; background: rgba(255, 255, 255, .6);
justify-content: space-around; }
align-items: center;
} .FreeHome .more-city {
.fh-tejia .icon-item>div{ text-align: center;
width: 70px; padding-top: 40px;
height: 70px; }
display: flex;
align-items: center; .FreeHome .more-city div {
justify-content: center; width: 170px;
cursor: pointer; height: 41px;
} background: rgba(255, 255, 255, 0.1);
.fh-tejia .icon-item>div>div{ box-shadow: 0px 2px 27px 0px rgba(0, 66, 96, 0.45);
width:48px; color: white;
height:48px; line-height: 41px;
background:rgba(255,255,255, .3); cursor: pointer;
border-radius:50%; transition: all linear .5s;
display: flex; margin: 0 auto;
align-items: center; }
justify-content: center;
cursor: pointer; .FreeHome .more-city div:hover {
/* transition: all linear .5s; */ background: rgba(247, 101, 109, 1);
} }
.fh-tejia .icon-item>div>div.active,.fh-tejia .icon-item>div>div:hover{
width:68px; .fh-tejia p {
height:68px; padding: 100px 0 66px 0;
background:radial-gradient(circle,rgba(255,133,133,1),rgba(238,68,84,1)); text-align: center;
} font-weight: 400;
.fh-tejia .icon-item>div>div.active .iconfont,.fh-tejia .icon-item>div>div:hover .iconfont{ color: rgba(51, 51, 51, 1);
color: white; font-size: 30px;
} }
.fh-tejia .icon-item .iconfont{
color: #F86970; .fh-tejia {
font-size: 24px; margin-top: 50px;
} }
.content-item{
height: 380px; .fh-tejia .icon-item {
position: relative; width: 400px;
} margin: 0 auto;
.content-item-tit{ display: flex;
padding: 40px 0 20px 0; justify-content: space-around;
font-size:20px; align-items: center;
font-weight:400; }
}
.content-item-box .content-item-box-hover{ .fh-tejia .icon-item>div {
position: relative; width: 70px;
width: 100%; height: 70px;
display: -webkit-box; display: flex;
padding-top: 16px; align-items: center;
overflow: auto; justify-content: center;
/* justify-content: space-between; */ cursor: pointer;
height: 280px; }
padding-bottom: 10px;
} .fh-tejia .icon-item>div>div {
.content-item-box-hover{ width: 48px;
width: 100%; height: 48px;
} background: rgba(255, 255, 255, .3);
.content-item-box-item{ border-radius: 50%;
width: 280px; display: flex;
box-sizing: border-box; align-items: center;
padding: 8px; justify-content: center;
background:rgba(255,255,255,1); cursor: pointer;
box-shadow:0px 2px 5px 0px rgba(0, 96, 66, 0.35); /* transition: all linear .5s; */
border-radius:6px; }
position: relative;
cursor: pointer; .fh-tejia .icon-item>div>div.active,
transition: top .5s; .fh-tejia .icon-item>div>div:hover {
top: 0px; width: 68px;
margin-right: 25px; height: 68px;
} background: radial-gradient(circle, rgba(255, 133, 133, 1), rgba(238, 68, 84, 1));
.content-item-box-item:hover{ }
top: -16px;
} .fh-tejia .icon-item>div>div.active .iconfont,
.content-item-box-item .img-box{ .fh-tejia .icon-item>div>div:hover .iconfont {
position: relative; color: white;
height: 183px; }
background-color: #e0e0e0
} .fh-tejia .icon-item .iconfont {
.content-item-box-item .img-box img{ color: #F86970;
width: 100%; font-size: 24px;
height: 183px; }
}
.content-item-box-item .img-box .price{ .content-item {
position: absolute; height: 380px;
right: 10px; position: relative;
top: 10px; }
padding: 8px;
background:rgba(254,241,44,1); .content-item-tit {
border-radius:4px; padding: 40px 0 20px 0;
} font-size: 20px;
.content-item-box-item .img-box .price .now-p{ font-weight: 400;
font-size:12px; }
}
.content-item-box-item .img-box .price .now-p strong{ .content-item-box .content-item-box-hover {
font-size:14px; position: relative;
} width: 100%;
.content-item-box-item .img-box .price .now-o{ display: -webkit-box;
font-size:12px; padding-top: 16px;
text-decoration:line-through; overflow: auto;
color:rgba(102,102,102,1); /* justify-content: space-between; */
} height: 280px;
.content-item-box-item .img-box .tag{ padding-bottom: 10px;
position: absolute; }
left: 10px;
bottom: 20px; .content-item-box-hover {
} width: 100%;
.content-item-box-item .img-box .tag>span{ }
padding: 8px;
background:rgba(0,0,0, .4); .content-item-box-item {
border-radius:4px; width: 280px;
color: #FFFFFF; box-sizing: border-box;
margin-right: 10px; padding: 8px;
} background: rgba(255, 255, 255, 1);
.content-item-box-item .name { box-shadow: 0px 2px 5px 0px rgba(0, 96, 66, 0.35);
padding-top: 5px; border-radius: 6px;
font-size:14px; position: relative;
color:rgba(51,51,51,1); cursor: pointer;
overflow: hidden; transition: top .5s;
text-overflow: ellipsis; top: 0px;
display: -webkit-box; margin-right: 25px;
-webkit-line-clamp: 2; }
-webkit-box-orient: vertical;
} .content-item-box-item:hover {
.content-item-box2{ top: -16px;
position: relative; }
background:rgba(255,255,255,1);
box-shadow:0px 2px 5px 0px rgba(0, 96, 66, 0.35); .content-item-box-item .img-box {
border-radius:6px; position: relative;
padding: 10px; height: 183px;
cursor: pointer; background-color: #e0e0e0
min-height: 261px; }
box-sizing: border-box;
} .content-item-box-item .img-box img {
.content-item-box2 .img-box{ width: 100%;
position: relative; height: 183px;
} }
.content-item-box2 .img-box img:nth-child(1){
height: 190px; .content-item-box-item .img-box .price {
width: 270px; position: absolute;
margin-right: 10px; right: 10px;
} top: 10px;
.content-item-box2 .img-box img:nth-child(2){ padding: 8px;
height: 190px; background: rgba(254, 241, 44, 1);
width: 188px; border-radius: 4px;
} }
.content-item-box2 .img-box span{
position: absolute; .content-item-box-item .img-box .price .now-p {
left: 10px; font-size: 12px;
top: 10px; }
background: rgba(248,104,112,1);
border-radius: 4px; .content-item-box-item .img-box .price .now-p strong {
color: white; font-size: 14px;
padding: 3px 7px; }
font-size: 12px;
} .content-item-box-item .img-box .price .now-o {
.content-item-box2 .img-box span strong{ font-size: 12px;
font-size: 14px; text-decoration: line-through;
} color: rgba(102, 102, 102, 1);
.content-item-box2 .content-tit{ }
display: flex;
justify-content: space-between; .content-item-box-item .img-box .tag {
align-items: center; position: absolute;
padding-top: 5px; left: 10px;
} bottom: 20px;
.content-item-box2 .content-tit div:nth-child(1){ }
overflow: hidden;
text-overflow: ellipsis; .content-item-box-item .img-box .tag>span {
display: -webkit-box; padding: 8px;
-webkit-line-clamp: 2; background: rgba(0, 0, 0, .4);
-webkit-box-orient: vertical; border-radius: 4px;
} color: #FFFFFF;
.content-item-box2 .content-tit div:nth-child(2){ margin-right: 10px;
background:rgba(217,217,217,.5); }
border-radius:4px;
padding: 4px 6px; .content-item-box-item .name {
min-width: 90px; padding-top: 5px;
font-size:14px; font-size: 14px;
} color: rgba(51, 51, 51, 1);
.content-item-box2 .img-box2 img:nth-child(1){ overflow: hidden;
height: 190px; text-overflow: ellipsis;
width: 270px; display: -webkit-box;
margin-right: 10px; -webkit-line-clamp: 2;
} -webkit-box-orient: vertical;
.content-item-box2 .img-box2 img:nth-child(2){ }
height: 190px;
width: 188px; .content-item-box2 {
margin-right: 10px; position: relative;
} background: rgba(255, 255, 255, 1);
.content-item-box2 .img-box2 img:nth-child(3){ box-shadow: 0px 2px 5px 0px rgba(0, 96, 66, 0.35);
height: 190px; border-radius: 6px;
width: 188px; padding: 10px;
} cursor: pointer;
.price2{ min-height: 261px;
background:#F86870 !important; box-sizing: border-box;
} }
.price3{
background:rgba(0,215,133,1) !important; .content-item-box2 .img-box {
} position: relative;
.price4{ }
background-color: #0DB9F2 !important;
} .content-item-box2 .img-box img:nth-child(1) {
.content-item:hover ._btn{ height: 190px;
opacity: 1; width: 270px;
} margin-right: 10px;
.content-item .left-btn,.content-item .right-btn{ }
position: absolute;
left: -56px; .content-item-box2 .img-box img:nth-child(2) {
top: 190px; height: 190px;
width: 36px; width: 188px;
height: 36px; }
background: url(../../assets/img/freeHome/left_n.png);
background-size: 100% 100%; .content-item-box2 .img-box span {
background-repeat: no-repeat; position: absolute;
cursor: pointer; left: 10px;
opacity: 0; top: 10px;
transition: all linear .5s; background: rgba(248, 104, 112, 1);
} border-radius: 4px;
.content-item .left-btn:hover{ color: white;
background: url(../../assets/img/freeHome/left_a.png); padding: 3px 7px;
background-size: 100% 100%; font-size: 12px;
background-repeat: no-repeat; }
}
.content-item .right-btn{ .content-item-box2 .img-box span strong {
right: -56px; font-size: 14px;
left: initial; }
background: url(../../assets/img/freeHome/right_n.png);
background-size: 100% 100%; .content-item-box2 .content-tit {
background-repeat: no-repeat; display: flex;
} justify-content: space-between;
.content-item .right-btn:hover{ align-items: center;
background: url(../../assets/img/freeHome/right_a.png); padding-top: 5px;
background-size: 100% 100%; }
background-repeat: no-repeat;
} .content-item-box2 .content-tit div:nth-child(1) {
.jingxuan{ overflow: hidden;
padding-top: 170px; text-overflow: ellipsis;
padding-bottom: 155px; display: -webkit-box;
} -webkit-line-clamp: 2;
.jingxuan>div{ -webkit-box-orient: vertical;
position: relative; }
width: 100%;
height: 700px; .content-item-box2 .content-tit div:nth-child(2) {
background-color: white; background: rgba(217, 217, 217, .5);
padding-top: 140px; border-radius: 4px;
box-sizing: border-box; padding: 4px 6px;
box-shadow:0px 1px 5px 0px rgba(0,66,96,0.22); min-width: 90px;
border-radius:20px; font-size: 14px;
} }
.jingxuan>div .tit{
width:307px; .content-item-box2 .img-box2 img:nth-child(1) {
height:128px; height: 190px;
background:rgba(255,255,255,0.1); width: 270px;
border:2px solid rgba(221, 204, 182, 1); margin-right: 10px;
box-shadow:0px 2px 5px 0px rgba(28,121,133,0.66); }
border-radius:6px;
position: absolute; .content-item-box2 .img-box2 img:nth-child(2) {
left: 445px; height: 190px;
top: -40px; width: 188px;
text-align: center; margin-right: 10px;
} }
.jingxuan>div .tit i{
position: absolute; .content-item-box2 .img-box2 img:nth-child(3) {
top: -30px; height: 190px;
left: 124px; width: 188px;
width:60px; }
height:60px;
background:rgba(255,255,255,1); .price2 {
border-radius:50%; background: #F86870 !important;
font-size:28px; }
color:#CAB394;
line-height: 60px; .price3 {
} background: rgba(0, 215, 133, 1) !important;
.jingxuan>div .tit p{ }
margin-top: 50px;
font-size:28px; .price4 {
color:rgba(68,68,68,1); background-color: #0DB9F2 !important;
} }
.el-carousel__indicator{
padding: 0; .content-item:hover ._btn {
margin: 12px 4px 0 0; opacity: 1;
} }
.el-carousel__indicator.is-active{
width: 25px; .content-item .left-btn,
background:rgba(255,147,157,1); .content-item .right-btn {
border-radius:6px; position: absolute;
} left: -56px;
.el-carousel__indicator.is-active .el-carousel__button{ top: 190px;
background:#EE4454; width: 36px;
float: right; height: 36px;
} background: url(../../assets/img/freeHome/left_n.png);
.el-carousel__indicators--outside button{ background-size: 100% 100%;
opacity: 1; background-repeat: no-repeat;
} cursor: pointer;
.el-carousel__button{ opacity: 0;
width:12px; transition: all linear .5s;
height:12px; }
background:#B8B8B8;
border-radius:50%; .content-item .left-btn:hover {
} background: url(../../assets/img/freeHome/left_a.png);
background-size: 100% 100%;
.jingxuan-item{ background-repeat: no-repeat;
position: relative; }
background-color: white;
} .content-item .right-btn {
.jingxuan-item>div{ right: -56px;
display: flex; left: initial;
justify-content: center; background: url(../../assets/img/freeHome/right_n.png);
flex-wrap: wrap; background-size: 100% 100%;
} background-repeat: no-repeat;
.jingxuan-item .img-item{ }
margin-bottom: 5px;
position: relative; .content-item .right-btn:hover {
width: 562px; background: url(../../assets/img/freeHome/right_a.png);
height: 406px; background-size: 100% 100%;
} background-repeat: no-repeat;
.jingxuan-item .img-item:nth-child(2n){ }
margin-left: 5px;
} .jingxuan {
.jingxuan-item .img-item img{ padding-top: 170px;
width: 100%; padding-bottom: 155px;
height: 100%; }
display: block;
} .jingxuan>div {
.jingxuan-item .img-item .info{ position: relative;
position: absolute; width: 100%;
left: 0; height: 700px;
top: 0; background-color: white;
width: 100%; padding-top: 140px;
height: 100%; box-sizing: border-box;
box-sizing: border-box; box-shadow: 0px 1px 5px 0px rgba(0, 66, 96, 0.22);
padding: 50px 30px 0 30px; border-radius: 20px;
font-size:14px; }
color:rgba(51,51,51,1);
background:rgba(254,241,44,.8); .jingxuan>div .tit {
opacity: 0; width: 307px;
transition: all linear .5s; height: 128px;
} background: rgba(255, 255, 255, 0.1);
.jingxuan-item .img-item:hover .info{ border: 2px solid rgba(221, 204, 182, 1);
opacity: 1; box-shadow: 0px 2px 5px 0px rgba(28, 121, 133, 0.66);
} border-radius: 6px;
.jingxuan-item .jingxuanbg{ position: absolute;
position: absolute; left: 445px;
left: 0; top: -40px;
top: 0; text-align: center;
z-index: 1; }
}
.top-zhezhao{ .jingxuan>div .tit i {
position: absolute; position: absolute;
left: 0; top: -30px;
top: 0; left: 124px;
z-index: 2; width: 60px;
width: 100%; height: 60px;
height: 100%; background: rgba(255, 255, 255, 1);
} border-radius: 50%;
.top-zhezhao .img-item{ font-size: 28px;
width: 253px; color: #CAB394;
height: 198px; line-height: 60px;
} }
.top-zhezhao .img-item:nth-child(1) .info{
border-top-left-radius: 182px; .jingxuan>div .tit p {
padding-top: 85px; margin-top: 50px;
width: 255px; font-size: 28px;
} color: rgba(68, 68, 68, 1);
.top-zhezhao .img-item:nth-child(2) .info{ }
border-top-right-radius: 233px;
padding-top: 85px; .el-carousel__indicator {
width: 249px; padding: 0;
} margin: 12px 4px 0 0;
.top-zhezhao .img-item:nth-child(3) .info{ }
border-bottom-left-radius: 170px;
width: 253px; .el-carousel__indicator.is-active {
border-bottom-right-radius: 31px; width: 25px;
} background: rgba(255, 147, 157, 1);
.top-zhezhao .img-item:nth-child(4) .info{ border-radius: 6px;
border-bottom-right-radius: 181px; }
width: 249px;
border-bottom-left-radius: 31px; .el-carousel__indicator.is-active .el-carousel__button {
} background: #EE4454;
.el-carousel__item--card.is-in-stage{ float: right;
opacity: .5; }
}
.el-carousel__item--card.is-active{ .el-carousel__indicators--outside button {
opacity: 1; opacity: 1;
} }
.jingxuan-tit{
padding: 20px; .el-carousel__button {
text-align: center; width: 12px;
} height: 12px;
.jinxuan-time{ background: #B8B8B8;
position: absolute; border-radius: 50%;
right: 20px; }
top: 8px;
color: #BABABA; .jingxuan-item {
z-index: 3 position: relative;
} background-color: white;
.jinxuan-time .text{ }
font-size: 16px;
} .jingxuan-item>div {
.jinxuan-time .number{ display: flex;
font-size: 28px; justify-content: center;
} flex-wrap: wrap;
.jinxuan-time .number2{ }
font-size: 36px;
} .jingxuan-item .img-item {
.FreeHome .el-carousel__indicator.is-active button{ margin-bottom: 5px;
width: 12px;; position: relative;
} width: 562px;
.loading-box{ height: 406px;
min-height:400px }
}
.FreeHome .el-select-dropdown__item{ .jingxuan-item .img-item:nth-child(2n) {
white-space: initial; margin-left: 5px;
} }
.jingxuan-item .img-item img {
width: 100%;
height: 100%;
display: block;
}
.jingxuan-item .img-item .info {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 50px 30px 0 30px;
font-size: 14px;
color: rgba(51, 51, 51, 1);
background: rgba(254, 241, 44, .8);
opacity: 0;
transition: all linear .5s;
}
.jingxuan-item .img-item:hover .info {
opacity: 1;
}
.jingxuan-item .jingxuanbg {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.top-zhezhao {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.top-zhezhao .img-item {
width: 253px;
height: 198px;
}
.top-zhezhao .img-item:nth-child(1) .info {
border-top-left-radius: 182px;
padding-top: 85px;
width: 255px;
}
.top-zhezhao .img-item:nth-child(2) .info {
border-top-right-radius: 233px;
padding-top: 85px;
width: 249px;
}
.top-zhezhao .img-item:nth-child(3) .info {
border-bottom-left-radius: 170px;
width: 253px;
border-bottom-right-radius: 31px;
}
.top-zhezhao .img-item:nth-child(4) .info {
border-bottom-right-radius: 181px;
width: 249px;
border-bottom-left-radius: 31px;
}
.el-carousel__item--card.is-in-stage {
opacity: .5;
}
.el-carousel__item--card.is-active {
opacity: 1;
}
.jingxuan-tit {
padding: 20px;
text-align: center;
}
.jinxuan-time {
position: absolute;
right: 20px;
top: 8px;
color: #BABABA;
z-index: 3
}
.jinxuan-time .text {
font-size: 16px;
}
.jinxuan-time .number {
font-size: 28px;
}
.jinxuan-time .number2 {
font-size: 36px;
}
.FreeHome .el-carousel__indicator.is-active button {
width: 12px;
;
}
.loading-box {
min-height: 400px
}
.FreeHome .el-select-dropdown__item {
white-space: initial;
}
</style> </style>
<template> <template>
<div v-loading="loading" class="commonF"> <div v-loading="loading" class="commonF">
<div class="FreeHome " @click="inputActive = false" > <div class="FreeHome " @click="inputActive = false">
<div> <div>
<div class="fh-tit"> <div class="fh-tit">
<img :onerror="defaultImg" src="../../assets/img/freeHome/top-tex.png" alt=""> <img :onerror="defaultImg" src="../../assets/img/freeHome/top-tex.png" alt="">
</div> </div>
<div class="fh-search-box"> <div class="fh-search-box">
<div class="fh-search-box-input"> <div class="fh-search-box-input">
<div> <div>
<el-select <el-select v-model="changeId" filterable remote reserve-keyword placeholder="输入目的地/景点/关键字，搜索您需要的信息.."
v-model="changeId" :remote-method="searchKey" @focus="inputActive = true, changeId = '', queryStr = '', searchList = []"
filterable @change='getSelect' :loading="loading2">
remote <el-option v-for="item in searchList" :key="item.prod_no" :label="item.prod_name" :value="item">
reserve-keyword <div v-if="item.type == 2 || item.type == 1">
placeholder="输入目的地/景点/关键字，搜索您需要的信息.." <i style="padding-right: 15px" class="iconfont icon-lvseqizi"></i>
:remote-method="searchKey" <span class="PingFangR">{{ item.prod_name}}</span>
@focus="inputActive = true, changeId = '', queryStr = '', searchList = []" </div>
@change='getSelect' <div v-else>
:loading="loading2"> <span
<el-option style="float: left; width: 370px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.prod_name}}</span>&nbsp;&nbsp;
v-for="item in searchList" <span v-if="item.countries && item.countries.length > 0"
:key="item.prod_no" style="float: right">{{ item.countries[0].name }}&nbsp;&nbsp;{{item.countries[0].cities[0].name}}</span>
:label="item.prod_name" <i style="float: right;color: rgb(204, 204, 204)" class="iconfont icon-ico_dingwei"></i>
:value="item"> </div>
<div v-if="item.type == 2 || item.type == 1">
<i style="padding-right: 15px" class="iconfont icon-lvseqizi"></i>
<span class="PingFangR">{{ item.prod_name}}</span>
</div>
<div v-else>
<span style="float: left; width: 370px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.prod_name}}</span>&nbsp;&nbsp;
<span v-if="item.countries && item.countries.length > 0" style="float: right">{{ item.countries[0].name }}&nbsp;&nbsp;{{item.countries[0].cities[0].name}}</span>
<i style="float: right;color: rgb(204, 204, 204)" class="iconfont icon-ico_dingwei"></i>
</div>
</el-option> </el-option>
</el-select> </el-select>
<!-- <input type="text" @click.stop="inputActive = true" placeholder="输入目的地/景点/关键字，搜索您需要的信息.."> --> <!-- <input type="text" @click.stop="inputActive = true" placeholder="输入目的地/景点/关键字，搜索您需要的信息.."> -->
</div>
<div @click="goList">
搜索
</div>
</div> </div>
<div @click="goList"> <div v-show="inputActive && queryStr == '' && searchList.length < 1" class="inputActive" @click.stop>
搜索 <el-row v-if="CCList.length>0 ">
<el-col :span="6">
<div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index"
:class="{'active': CCListActive == index}" :key="index">
<p>{{item.Country_Name}}</p>
<div class="f12 text2">
<span v-for="(s, sIndex) in item.Cities" :key="sIndex">{{s.City_Name}}</span>
</div>
<div class="triangle-up"></div>
</div>
</el-col>
<el-col :span="18">
<div class="city-list">
<span class="PingFangR __cp"
@click="goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name)">{{CCList[CCListActive].Country_Name}}</span>
<p>
<span @click="goListPage(2, item.City_Code, item.City_Name, index)" class="f14 __cp"
v-for="(item, index) in CCList[CCListActive].Cities" :key="index">{{item.City_Name}}</span>
</p>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
<div v-show="inputActive && queryStr == '' && searchList.length < 1" class="inputActive" @click.stop> <div class="fh-city">
<el-row v-if="CCList.length>0 "> <div class="city-s" v-for="(item, index) in topCityList" :class="{'city-m': topCityActive == index}"
<el-col :span="6"> @mouseenter="topCityActive = index" :key="index">
<div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index" > <div :style="`background-image: url(${item.src})`">
<p >{{item.Country_Name}}</p> <span>{{item.name}}</span>
<div class="f12 text2"> <div class="city-m-b">
<span v-for="(s, sIndex) in item.Cities" :key="sIndex">{{s.City_Name}}</span> <span @click.stop="goList2(item, 'menpiao')">门票</span>
<span @click.stop="goList2(item, 'canshi')">餐食</span>
<span @click.stop="goList2(item, 'yiri')">一日游</span>
<div style="padding: 8px 12px;" @click.stop="goList2(item, 'all')">
<img :onerror="defaultImg" src="../../assets/img/freeHome/more_s.png" alt="">
</div> </div>
<div class="triangle-up"></div>
</div>
</el-col>
<el-col :span="18">
<div class="city-list">
<span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name)">{{CCList[CCListActive].Country_Name}}</span>
<p>
<span @click="goListPage(2, item.City_Code, item.City_Name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].Cities" :key="index">{{item.City_Name}}</span>
</p>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="fh-city" >
<div class="city-s" v-for="(item, index) in topCityList" :class="{'city-m': topCityActive == index}" @mouseenter="topCityActive = index" :key="index">
<div :style="`background-image: url(${item.src})`">
<span>{{item.name}}</span>
<div class="city-m-b">
<span @click.stop="goList2(item, 'menpiao')">门票</span>
<span @click.stop="goList2(item, 'canshi')">餐食</span>
<span @click.stop="goList2(item, 'yiri')">一日游</span>
<div style="padding: 8px 12px;" @click.stop="goList2(item, 'all')">
<img :onerror="defaultImg" src="../../assets/img/freeHome/more_s.png" alt="">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div>
<div> <div class="fh-tejia">
<div class="fh-tejia"> <p>当季特价</p>
<p>当季特价</p> <div class="icon-item">
<div class="icon-item"> <div v-if="menPiaoList.length>0">
<div v-if="menPiaoList.length>0"> <div :class="{'active': activeId == 'menpiao'}" @click="goScroll('menpiao')">
<div :class="{'active': activeId == 'menpiao'}" @click="goScroll('menpiao')"> <i class="iconfont icon-menpiao1"></i>
<i class="iconfont icon-menpiao1"></i> </div>
</div> </div>
</div> <div v-if="list1.length>0">
<div v-if="list1.length>0"> <div :class="{'active': activeId == 'meals'}" @click="goScroll('meals')">
<div :class="{'active': activeId == 'meals'}" @click="goScroll('meals')"> <i class="iconfont icon-b-meals"></i>
<i class="iconfont icon-b-meals"></i> </div>
</div> </div>
</div> <div v-if="list2.length>0">
<div v-if="list2.length>0"> <div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')">
<div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')"> <i class="iconfont icon-yiriyou"></i>
<i class="iconfont icon-yiriyou"></i> </div>
</div> </div>
</div> <div v-if="list3.length>0">
<div v-if="list3.length>0"> <div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')">
<div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')"> <i class="iconfont icon-cheliang"></i>
<i class="iconfont icon-cheliang"></i> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div id="meals" class="content-item" v-if="list1.length>0">
<div id="meals" class="content-item" v-if="list1.length>0"> <div class="left-btn _btn" @click="scrollbar('meals', 1)">
<div class="left-btn _btn" @click="scrollbar('meals', 1)">
</div>
</div> <div class="right-btn _btn" @click="scrollbar('meals', 2)">
<div class="right-btn _btn" @click="scrollbar('meals', 2)">
</div>
</div> <p class="content-item-tit">餐食就在这里解决吧~</p>
<p class="content-item-tit">餐食就在这里解决吧~</p> <div class="content-item-box">
<div class="content-item-box"> <div class="content-item-box-hover" ref="meals">
<div class="content-item-box-hover" ref="meals"> <div class="content-item-box-item" v-for="(item, index) in list1" @click="goDetails(item)">
<div class="content-item-box-item" v-for="(item, index) in list1" @click="goDetails(item)" > <div class="img-box">
<div class="img-box"> <div class="price price3">
<div class="price price3"> <p class="now-p">￥<strong
<p class="now-p">￥<strong class="PingFangR">{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p> class="PingFangR">{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span
class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span>
</span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div> </div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div id="yiriyou" class="content-item" v-if="list2.length>0">
<div id="yiriyou" class="content-item" v-if="list2.length>0"> <div class="left-btn _btn" @click="scrollbar('yiriyou', 1)">
<div class="left-btn _btn" @click="scrollbar('yiriyou', 1)">
</div>
</div> <div class="right-btn _btn" @click="scrollbar('yiriyou', 2)">
<div class="right-btn _btn" @click="scrollbar('yiriyou', 2)">
</div>
</div> <p class="content-item-tit">放轻松，甩手一日游~</p>
<p class="content-item-tit">放轻松，甩手一日游~</p> <div class="content-item-box">
<div class="content-item-box"> <div class="content-item-box-hover" ref="yiriyou">
<div class="content-item-box-hover" ref="yiriyou"> <div class="content-item-box-item" v-for="(item, index) in list2" @click="goDetails(item)">
<div class="content-item-box-item" v-for="(item, index) in list2" @click="goDetails(item)" > <div class="img-box">
<div class="img-box"> <div class="price price2">
<div class="price price2"> <p class="now-p">￥<strong>{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p>
<p class="now-p">￥<strong>{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p> </div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span
class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span>
</span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div> </div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div id="cheliang" class="content-item" v-if="list3.length>0">
<div id="cheliang" class="content-item" v-if="list3.length>0"> <div class="left-btn _btn" @click="scrollbar('cheliang', 1)">
<div class="left-btn _btn" @click="scrollbar('cheliang', 1)">
</div>
</div> <div class="right-btn _btn" @click="scrollbar('cheliang', 2)">
<div class="right-btn _btn" @click="scrollbar('cheliang', 2)">
</div>
</div> <p class="content-item-tit">车程快慢，你来定~</p>
<p class="content-item-tit">车程快慢，你来定~</p> <div class="content-item-box">
<div class="content-item-box"> <div class="content-item-box-hover" ref="cheliang">
<div class="content-item-box-hover" ref="cheliang"> <div class="content-item-box-item" v-for="(item, index) in list3" @click="goDetails(item)">
<div class="content-item-box-item" v-for="(item, index) in list3" @click="goDetails(item)" > <div class="img-box">
<div class="img-box"> <div class="price">
<div class="price"> <p class="now-p">￥<strong>{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p>
<p class="now-p">￥<strong>{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p> </div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span
class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span>
</span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div> </div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div id="menpiao" class="content-item" v-if="menPiaoList.length>0">
<div id="menpiao" class="content-item" v-if="menPiaoList.length>0"> <div class="left-btn _btn" @click="scrollbar('menpiao', 1)">
<div class="left-btn _btn" @click="scrollbar('menpiao', 1)">
</div>
<div class="right-btn _btn" @click="scrollbar('menpiao', 2)">
</div>
<p class="content-item-tit">游玩门票，看过来~</p>
<div class="content-item-box">
<div class="content-item-box-hover" ref="menpiao">
<div class="content-item-box-item" v-for="(item, index) in menPiaoList" @click="goDetails(item)" >
<div class="img-box">
<div class="price price4">
<p class="now-p">￥<strong>{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div>
</div>
</div> </div>
</div> <div class="right-btn _btn" @click="scrollbar('menpiao', 2)">
</div>
<div class="jingxuan">
<div v-if="TaoCanList.length > 0">
<div class="tit">
<i class="iconfont icon-jingxuan"></i>
<p>精选</p>
</div> </div>
<el-carousel :interval="999999" type="card" height="490px"> <p class="content-item-tit">游玩门票，看过来~</p>
<el-carousel-item v-for="(item, index) in TaoCanList" v-if="item.pkgs" :key="index"> <div class="content-item-box">
<div class="jingxuan-item" @click="goDetails(item.pkgs[0], 2)"> <div class="content-item-box-hover" ref="menpiao">
<div> <div class="content-item-box-item" v-for="(item, index) in menPiaoList" @click="goDetails(item)">
<div class="img-item"> <div class="img-box">
<img :onerror="defaultImg" :src="item.url" alt=""> <div class="price price4">
<p class="now-p">￥<strong>{{isLogin == 1 ? item.reborn_price : item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span
class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span>
</span>
</div> </div>
</div> </div>
<div class="jingxuanbg"> <div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
<img :onerror="defaultImg" src="../../assets/img/freeHome/jingxuanbg.png" alt=""> {{item.introduction.replace(/KKday/g, '印象之旅')}}
</div>
<div class="jinxuan-time" v-if="item.sale_dates.saleDt">
<span class="number">{{getMonth(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text"> 月</span><span class="number number2"> {{getDay(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text"> 日</span>
</div> </div>
</div> </div>
<p class="jingxuan-tit">{{item.pkgs[0].pkg_name.replace(/KKday/g, '印象之旅')}}</p> </div>
</el-carousel-item> </div>
</el-carousel> </div>
<div class="jingxuan">
<div v-if="TaoCanList.length > 0">
<div class="tit">
<i class="iconfont icon-jingxuan"></i>
<p>精选</p>
</div>
<el-carousel :interval="999999" type="card" height="490px">
<el-carousel-item v-for="(item, index) in TaoCanList" v-if="item.pkgs" :key="index">
<div class="jingxuan-item" @click="goDetails(item.pkgs[0], 2)">
<div>
<div class="img-item">
<img :onerror="defaultImg" :src="item.url" alt="">
</div>
</div>
<div class="jingxuanbg">
<img :onerror="defaultImg" src="../../assets/img/freeHome/jingxuanbg.png" alt="">
</div>
<div class="jinxuan-time" v-if="item.sale_dates.saleDt">
<span class="number">{{getMonth(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text">
月</span><span class="number number2"> {{getDay(item.sale_dates.saleDt[0].sale_day)}}</span><span
class="text"> 日</span>
</div>
</div>
<p class="jingxuan-tit">{{item.pkgs[0].pkg_name.replace(/KKday/g, '印象之旅')}}</p>
</el-carousel-item>
</el-carousel>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <a :href="blankUrl" id="blankLink" target="_blank" style="display:none">1</a>
<a :href="blankUrl" id="blankLink" target="_blank" style="display:none">1</a>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
changeId: "", changeId: "",
queryStr: "", queryStr: "",
queryStr2: "", queryStr2: "",
searchList: [], searchList: [],
loading2: false, loading2: false,
loading: false, loading: false,
scrollobj: null, scrollobj: null,
navs:[ navs: [
'meals', 'meals',
'yiriyou', 'yiriyou',
'cheliang', 'cheliang',
'menpiao', 'menpiao',
], ],
blankUrl:'', blankUrl: '',
inputActive: false, inputActive: false,
activeId: 'meals', activeId: 'meals',
dataList: [], dataList: [],
menPiaoList: [], menPiaoList: [],
list1: [], list1: [],
list2: [], list2: [],
list3: [], list3: [],
TaoCanList: [], TaoCanList: [],
topCityActive: 0, topCityActive: 0,
CCListActive: 0, CCListActive: 0,
topCityList: [{ topCityList: [{
name: '东京', name: '东京',
src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg", src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg",
id: 1, id: 1,
number: "A01-003-00001" number: "A01-003-00001"
},{ }, {
name: '京都', name: '京都',
src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg", src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg",
id: 2, id: 2,
number: "A01-003-00003", number: "A01-003-00003",
},{ }, {
name: '大阪', name: '大阪',
src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg", src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg",
id: 3, id: 3,
number: "A01-003-00002" number: "A01-003-00002"
},{ }, {
name: '首尔', name: '首尔',
src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg", src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg",
id: 0, id: 0,
number: 'A01-004-00001' number: 'A01-004-00001'
},{ }, {
name: '曼谷', name: '曼谷',
src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg", src: "http://staticfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg",
id: 4, id: 4,
number: "A01-010-00001" number: "A01-010-00001"
}], }],
KkdayDomain: "", KkdayDomain: "",
CCList: [], CCList: [],
defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"', defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"',
isLogin:1, isLogin: 1,
}
},
mounted() {
//获取传递参数
var url = window.location.href;
if (url.indexOf("?") != -1) {
let str = url.split("?")[1];
let uid = str.split("uid=")[1];
sessionStorage.setItem("OpenB2BCode", decodeURIComponent(uid));
}
this.isLogin=this.$store.state.isLogin;
this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
this.getDataList()
this.getDataCanList()
this.getCCList()
this.getCheList()
},
methods: {
getSelect(e){
if (e.prod_no && (e.type == 2 || e.type == 1)) {
let dom = document.querySelector("#blankLink");
let num = e.type == 2 ? '2' : '';
let fullPath = `/FreeList${num}?id=${e.prod_no}&name=${e.prod_name}&CCListActive=${this.CCListActive}&type=${e.type}`;
dom.href=`http://${window.location.host}/#${fullPath}`
dom.click()
} else if (e.prod_no && !e.type){
this.goDetails(e)
} }
this.changeId = ''
this.queryStr = ''
this.searchList = []
}, },
getIndex(query){ mounted() {
let ok = false //获取传递参数
for(let i = 0; i < this.CCList.length; i++){ var url = window.location.href;
if (ok) break; if (url.indexOf("?") != -1) {
let str = url.split("?")[1];
let uid = str.split("uid=")[1];
sessionStorage.setItem("OpenB2BCode", decodeURIComponent(uid));
}
this.isLogin = this.$store.state.isLogin;
this.scrollobj = document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
this.getDataList()
this.getDataCanList()
this.getCCList()
this.getCheList()
},
methods: {
getSelect(e) {
if (e.prod_no && (e.type == 2 || e.type == 1)) {
let dom = document.querySelector("#blankLink");
let num = e.type == 2 ? '2' : '';
let fullPath =
`/FreeList${num}?id=${e.prod_no}&name=${e.prod_name}&CCListActive=${this.CCListActive}&type=${e.type}`;
dom.href = `http://${window.location.host}/#${fullPath}`
dom.click()
} else if (e.prod_no && !e.type) {
this.goDetails(e)
}
this.changeId = ''
this.queryStr = ''
this.searchList = []
},
getIndex(query) {
let ok = false
for (let i = 0; i < this.CCList.length; i++) {
if (ok) break;
let ff = this.CCList[i] let ff = this.CCList[i]
if (ff.Country_Name == query) { if (ff.Country_Name == query) {
this.CCListActive = i this.CCListActive = i
ok = true ok = true
break; break;
} }
for(let y = 0; y < ff.Cities.length; y++){ for (let y = 0; y < ff.Cities.length; y++) {
let cc = ff.Cities[y] let cc = ff.Cities[y]
if (cc.City_Name == query) { if (cc.City_Name == query) {
this.CCListActive = i this.CCListActive = i
...@@ -1002,341 +1125,351 @@ export default { ...@@ -1002,341 +1125,351 @@ export default {
} }
} }
} }
}, },
searchKey(query){ searchKey(query) {
this.queryStr2 = query this.queryStr2 = query
if (query !== '') { if (query !== '') {
let ct = null let ct = null
for(let i = 0; i < this.CCList.length; i++){ for (let i = 0; i < this.CCList.length; i++) {
let ff = this.CCList[i] let ff = this.CCList[i]
if (ff.Country_Name == query) { if (ff.Country_Name == query) {
this.CCListActive = i
ct = {
type: 1,
name: query,
id: ff.Country_Code
}
break
}
for(let y = 0; y < ff.Cities.length; y++){
let cc = ff.Cities[y]
if (cc.City_Name == query) {
this.CCListActive = i this.CCListActive = i
ct = { ct = {
type: 2, type: 1,
name: query, name: query,
id: cc.City_Code id: ff.Country_Code
} }
break break
} }
for (let y = 0; y < ff.Cities.length; y++) {
let cc = ff.Cities[y]
if (cc.City_Name == query) {
this.CCListActive = i
ct = {
type: 2,
name: query,
id: cc.City_Code
}
break
}
}
} }
this.queryStr = query
this.loading2 = true;
this.apiJavaPost(
"/api/kkday/commodityList", {
"locale": "zh-cn",
"state": "CN",
"sort": "PASC",
"keywords": query,
"page_size": 5,
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods;
this.loading2 = false;
if (!ct) {
let cc = null,
tt = null;
for (let i = 0; i < data.length; i++) {
if (cc && tt) break;
cc = data[i].countries[0];
if (data[i].countries[0].cities[0].name !== '所有城市') {
tt = data[i].countries[0].cities[0];
}
}
let obj = {
type: cc && tt ? 2 : 1,
prod_name: cc && tt ? tt.name : cc.name,
prod_no: cc && tt ? tt.id : cc.id,
}
let name = cc && tt ? tt.name : cc.name
this.getIndex(name)
data.unshift(obj)
} else if (ct) {
let obj = {
type: ct.type,
prod_name: ct.name,
prod_no: ct.id
}
data.unshift(obj)
}
this.searchList = data;
} else {
this.Error(res.data.message);
}
},
null
);
} else {
this.queryStr = ""
this.searchList = [];
this.loading2 = false;
}
},
scrollbar(dom, type) {
if (type == 1) {
this.$refs[dom].scrollLeft = this.$refs[dom].scrollLeft - 300
} else {
this.$refs[dom].scrollLeft = this.$refs[dom].scrollLeft + 300
} }
},
this.queryStr = query goList2(obj, type) {
this.loading2 = true; this.$router.push({
name: "FreeList2",
query: {
tag: type,
id: obj.number,
type: 2,
name: obj.name,
CCListActive: 0,
}
});
},
goListPage(type, id, name, index) {
this.inputActive = false;
let url = type == 1 ? "FreeList" : "FreeList2"
this.$router.push({
name: url,
query: {
id: id,
type: type,
name: name,
CCListActive: index ? index : this.CCListActive,
}
});
},
getMonth(str) {
return str.substring(4, 6)
},
getDay(str) {
return str.substring(6, 10)
},
//获取国家 城市
getCCList() {
//http://efficient.oytour.com/api/kkday/searchCity
this.apiJavaPost(
"/api/kkday/searchCity", {},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.Countries
let deleteIdiot = []
if (data && data.length > 0) {
data.map(x => {
if (x.Country_Name !== "台湾" && x.Country_Name !== "香港" && x.Country_Name !== "澳门" && x
.Country_Name !== "港澳") {
deleteIdiot.push(x)
}
})
}
this.CCList = deleteIdiot
} else {
this.Error(res.data.message);
}
},
null
);
},
goDetails(obj, type) {
let dom = document.querySelector("#blankLink")
let fullPath = `/FreeDetail?id=${type ? obj.pkg_no : obj.prod_no}`;
dom.href = `http://${window.location.host}/#${fullPath}`
dom.click()
return
this.$router.push({
name: "FreeDetail",
query: {
id: type ? obj.prod_no : obj.prod_no,
}
});
},
goList() {
if (this.queryStr2 == '') return
let dom = document.querySelector("#blankLink")
let fullPath = `/FreeList2?keywords=${this.queryStr2}`;
dom.href = `http://${window.location.host}/#${fullPath}`
dom.click()
this.queryStr2 = ""
},
getDataCanList() {
this.apiJavaPost( this.apiJavaPost(
"/api/kkday/commodityList", "/api/kkday/commodityList", {
{
"locale": "zh-cn", "locale": "zh-cn",
"state": "CN" , "state": "CN",
"cat_main_keys": [
"TAG_3"
],
"cat_keys": [
"TAG_3_2"
],
"sort": "PASC", "sort": "PASC",
"keywords": query,
"page_size": 5,
}, },
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
let data = res.data.data.prods; let data = res.data.data.prods,
// let no1 = data.length > 0 ? data[0].countries : '' list1 = [];
this.loading2 = false; data.map((x, index) => {
if (!ct){ if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x
let cc = null, tt = null; .countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x
for(let i = 0; i < data.length; i++){ .countries[0].name.indexOf('澳门') !== -1) {
if (cc && tt) break; x.countries[0].name = `中国-${x.countries[0].name}`
cc = data[i].countries[0];
if (data[i].countries[0].cities[0].name !== '所有城市'){
tt = data[i].countries[0].cities[0];
}
} }
})
let obj = { this.list1 = data;
type: cc && tt ? 2 : 1, } else {
prod_name: cc && tt ? tt.name : cc.name, this.Error(res.data.message);
prod_no: cc && tt ? tt.id : cc.id, }
},
null
);
},
getCheList() {
// http://efficient.oytour.com/api/kkday/commodityList
this.loading = true
this.apiJavaPost(
"/api/kkday/commodityList", {
"locale": "zh-cn",
"state": "CN",
"cat_main_keys": [
"TAG_5"
],
"sort": "PASC",
"page_size": 20,
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods,
list = [];
data.map(x => {
if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x
.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x
.countries[0].name.indexOf('澳门') !== -1) {
x.countries[0].name = `中国-${x.countries[0].name}`
} }
let name = cc && tt ? tt.name : cc.name list.push(x)
this.getIndex(name) })
data.unshift(obj) this.list3 = list;
} else if (ct){ this.loading = false
let obj = { } else {
type: ct.type, this.Error(res.data.message);
prod_name: ct.name, }
prod_no: ct.id },
null
);
},
getDataList() {
// http://efficient.oytour.com/api/kkday/commodityList
this.loading = true
this.apiJavaPost(
"/api/kkday/commodityList", {
"locale": "zh-cn",
"state": "CN",
"cat_keys": [
"TAG_1_3"
],
"sort": "PASC",
"page_size": 40,
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods,
menPiaoList = [],
list1 = [],
list2 = [],
TaoCanIds = [];
this.KkdayDomain = res.data.data.KkdayDomain;
// M01 一日遊
// M02 多日遊
// M03 機場接送
// M04 司機/交通
// M05 票券
// M06 半日遊
// M07 私人導遊
// M08 點對點接送
data.map((x, index) => {
if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x
.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x
.countries[0].name.indexOf('澳门') !== -1) {
x.countries[0].name = `中国-${x.countries[0].name}`
} }
data.unshift(obj) if (x.prod_type == 'M05') { // M05 票券
} menPiaoList.push(x)
this.searchList = data; } else if (x.prod_type == 'M02') {
// list1.push(x)
} else if (x.prod_type == 'M01' || x.prod_type == 'M06') { // M01 一日遊 M06 半日遊
if (TaoCanIds.length < 6) {
TaoCanIds.push({
num: x.prod_no,
url: x.prod_img_url
})
}
list2.push(x)
} else if (x.prod_type == 'M04' || x.prod_type == 'M08' || x.prod_type ==
'M03') { // M04 司機/交通 M03 機場接送 M08 點對點接送
}
})
this.list2 = list2;
this.dataList = data
this.menPiaoList = menPiaoList
this.loading = false
// this.getTaocanList(TaoCanIds)
this.$forceUpdate()
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
null null
); );
} else { },
this.queryStr = "" getTaocanList(TaoCanIds) {
this.searchList = []; let list = '';
this.loading2 = false; for (let i = 0; i < TaoCanIds.length; i++) {
} list = list + TaoCanIds[i].num + (i == TaoCanIds.length - 1 ? '' : ',')
},
scrollbar(dom, type) {
if (type == 1) {
this.$refs[dom].scrollLeft = this.$refs[dom].scrollLeft - 300
} else {
this.$refs[dom].scrollLeft = this.$refs[dom].scrollLeft + 300
}
},
goList2(obj, type){
this.$router.push({
name: "FreeList2",
query: {
tag: type,
id: obj.number,
type: 2,
name: obj.name,
CCListActive: 0,
}
});
},
goListPage(type, id, name, index){
this.inputActive = false;
let url = type == 1 ? "FreeList" : "FreeList2"
this.$router.push({
name: url,
query: {
id: id,
type: type,
name: name,
CCListActive: index ? index : this.CCListActive,
}
});
},
getMonth(str){
return str.substring(4, 6)
},
getDay(str){
return str.substring(6, 10)
},
//获取国家 城市
getCCList(){
//http://efficient.oytour.com/api/kkday/searchCity
this.apiJavaPost(
"/api/kkday/searchCity",
{},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.Countries
let deleteIdiot = []
data = data.length > 0 ? data : []
data.map(x=>{
if(x.Country_Name !== "台湾" && x.Country_Name !== "香港" && x.Country_Name !== "澳门" && x.Country_Name !== "港澳") {
deleteIdiot.push(x)
}
})
this.CCList = deleteIdiot
} else {
this.Error(res.data.message);
}
},
null
);
},
goDetails(obj, type){
let dom = document.querySelector("#blankLink")
let fullPath = `/FreeDetail?id=${type ? obj.pkg_no : obj.prod_no}`;
dom.href=`http://${window.location.host}/#${fullPath}`
dom.click()
return
this.$router.push({
name: "FreeDetail",
query: {
id: type ? obj.prod_no : obj.prod_no,
} }
}); //http://efficient.oytour.com/api/kkday/QueryPackageList
}, this.apiJavaPost(
goList(){ "/api/kkday/QueryPackageList", {
if(this.queryStr2 == '') return "prodNums": list,
},
let dom = document.querySelector("#blankLink") res => {
let fullPath = `/FreeList2?keywords=${this.queryStr2}`; if (res.data.resultCode === 1) {
dom.href=`http://${window.location.host}/#${fullPath}` let data = res.data.data
dom.click() for (let i = 0; i < data.length; i++) {
this.queryStr2 = "" data[i].url = TaoCanIds[i].url
},
getDataCanList(){
this.apiJavaPost(
"/api/kkday/commodityList",
{
"locale": "zh-cn",
"state":"CN" ,
"cat_main_keys": [
"TAG_3"
],
"cat_keys": [
"TAG_3_2"
],
"sort": "PASC",
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods,list1 = [];
data.map((x, index)=>{
if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x.countries[0].name.indexOf('澳门') !== -1){
x.countries[0].name = `中国-${x.countries[0].name}`
}
})
this.list1 = data;
} else {
this.Error(res.data.message);
}
},
null
);
},
getCheList(){
// http://efficient.oytour.com/api/kkday/commodityList
this.loading = true
this.apiJavaPost(
"/api/kkday/commodityList",
{
"locale": "zh-cn",
"state": "CN" ,
"cat_main_keys": [
"TAG_5"
],
"sort": "PASC",
"page_size": 20,
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods, list = [];
data.map(x=>{
if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x.countries[0].name.indexOf('澳门') !== -1){
x.countries[0].name = `中国-${x.countries[0].name}`
}
list.push(x)
})
this.list3 = list;
this.loading = false
} else {
this.Error(res.data.message);
}
},
null
);
},
getDataList(){
// http://efficient.oytour.com/api/kkday/commodityList
this.loading = true
this.apiJavaPost(
"/api/kkday/commodityList",
{
"locale": "zh-cn",
"state": "CN" ,
"cat_keys": [
"TAG_1_3"
],
"sort": "PASC",
"page_size": 40,
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.prods,menPiaoList = [], list1 = [], list2 = [], TaoCanIds = [];
this.KkdayDomain = res.data.data.KkdayDomain;
// M01 一日遊
// M02 多日遊
// M03 機場接送
// M04 司機/交通
// M05 票券
// M06 半日遊
// M07 私人導遊
// M08 點對點接送
data.map((x, index)=>{
if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x.countries[0].name.indexOf('澳门') !== -1){
x.countries[0].name = `中国-${x.countries[0].name}`
} }
if (x.prod_type == 'M05') { // M05 票券 this.TaoCanList = data
menPiaoList.push(x) } else {
} else if (x.prod_type == 'M02') { this.Error(res.data.message);
// list1.push(x)
} else if (x.prod_type == 'M01' || x.prod_type == 'M06') { // M01 一日遊 M06 半日遊
if (TaoCanIds.length < 6) {
TaoCanIds.push({
num: x.prod_no,
url: x.prod_img_url
})
}
list2.push(x)
} else if (x.prod_type == 'M04' || x.prod_type == 'M08' || x.prod_type == 'M03') { // M04 司機/交通 M03 機場接送 M08 點對點接送
}
})
this.list2 = list2;
this.dataList = data
this.menPiaoList = menPiaoList
this.loading = false
// this.getTaocanList(TaoCanIds)
this.$forceUpdate()
} else {
this.Error(res.data.message);
}
},
null
);
},
getTaocanList(TaoCanIds){
let list = '';
for(let i = 0; i < TaoCanIds.length; i ++) {
list = list + TaoCanIds[i].num + (i == TaoCanIds.length -1 ? '' : ',')
}
//http://efficient.oytour.com/api/kkday/QueryPackageList
this.apiJavaPost(
"/api/kkday/QueryPackageList",
{
"prodNums": list,
},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data
for(let i = 0; i < data.length ; i ++){
data[i].url = TaoCanIds[i].url
} }
this.TaoCanList = data },
} else { null
this.Error(res.data.message); );
} },
}, handleScroll() {
null try {
); let current = ''
}, this.navs.forEach(x => {
handleScroll(){ let t = document.getElementById(x).offsetTop
try { if (t <= this.scrollobj.scrollTop - 200) {
let current='' current = x
this.navs.forEach(x=>{ }
let t=document.getElementById(x).offsetTop })
if(t<=this.scrollobj.scrollTop-200){ this.crtnav = current
current=x } catch (error) {}
} },
}) goScroll(id) {
this.crtnav=current this.activeId = id;
} catch (error) {} this.scrollobj.scrollTop = document.getElementById(id).offsetTop;
}, },
goScroll(id){ }
this.activeId = id;
this.scrollobj.scrollTop=document.getElementById(id).offsetTop;
},
} }
}
</script> </script>
\ No newline at end of file
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