Commit aa6c59ed authored by 黄奎's avatar 黄奎

页面修改

parent 92f5afbb
...@@ -362,7 +362,7 @@ ...@@ -362,7 +362,7 @@
timeout: 3000 timeout: 3000
}); });
} }
this.CommonJump('/Search', {}) this.CommonJump('/search', {})
} }
} }
}; };
......
...@@ -364,7 +364,7 @@ ...@@ -364,7 +364,7 @@
timeout: 3000 timeout: 3000
}); });
} }
this.CommonJump('/Search', {}) this.CommonJump('/search', {})
} }
} }
}; };
......
...@@ -367,7 +367,7 @@ ...@@ -367,7 +367,7 @@
timeout: 3000 timeout: 3000
}); });
} }
this.CommonJump('/Search', {}) this.CommonJump('/search', {})
} }
} }
}; };
......
...@@ -124,10 +124,12 @@ ...@@ -124,10 +124,12 @@
line-height: 57px; line-height: 57px;
text-align: center; text-align: center;
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.pd-list .pd-box { .pd-list .pd-box {
flex-basis: calc(50% - 10px) !important; flex-basis: calc(50% - 10px) !important;
} }
.pd-list .pd-box:nth-child(even) { .pd-list .pd-box:nth-child(even) {
margin-right: 0 !important; margin-right: 0 !important;
} }
...@@ -144,19 +146,21 @@ ...@@ -144,19 +146,21 @@
.pd-list .pd-box { .pd-list .pd-box {
flex-basis: 100% !important; flex-basis: 100% !important;
/* margin-right: 0 !important; */ /* margin-right: 0 !important; */
margin:0 10px 20px -20px!important; margin: 0 10px 20px -20px !important;
} }
} }
.pd-list .pd-box { .pd-list .pd-box {
margin-right: 20px; margin-right: 20px;
margin-bottom: 30px; margin-bottom: 30px;
flex-basis: calc(25% - 15px); flex-basis: calc(25% - 15px);
border-radius: 3px; border-radius: 3px;
background-clip: padding-box; background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0,0,0,.09); box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
transition: -webkit--webkit-transform .2s ease,box-shadow .2s ease; transition: -webkit--webkit-transform .2s ease, box-shadow .2s ease;
background-color: #fff; background-color: #fff;
} }
.pd-box .pd-img { .pd-box .pd-img {
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -177,6 +181,7 @@ ...@@ -177,6 +181,7 @@
border-bottom: 4px solid #00afff; border-bottom: 4px solid #00afff;
text-align: right; text-align: right;
} }
.pd-box .pd-img .pd-price .price { .pd-box .pd-img .pd-price .price {
display: inline-block; display: inline-block;
padding: 4px 12px 0; padding: 4px 12px 0;
...@@ -196,6 +201,7 @@ ...@@ -196,6 +201,7 @@
padding: 0 4px; padding: 0 4px;
font-size: 14px; font-size: 14px;
} }
.pd-box .pd-content { .pd-box .pd-content {
padding: 15px 15px 20px; padding: 15px 15px 20px;
} }
...@@ -212,39 +218,47 @@ ...@@ -212,39 +218,47 @@
font-size: 14px; font-size: 14px;
color: #999; color: #999;
} }
.pd-box .pd-departure .more { .pd-box .pd-departure .more {
float: right; float: right;
font-size: 14px; font-size: 14px;
} }
.Search_center .pd-list { .Search_center .pd-list {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
width:100%; width: 100%;
} }
.pd-list li{
.pd-list li {
list-style-type: none; list-style-type: none;
} }
.SearchMain .search-content{
.SearchMain .search-content {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
.wl-section-block { .wl-section-block {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
.search-filter-aside{
.search-filter-aside {
width: 300px; width: 300px;
margin-right: 30px; margin-right: 30px;
margin-bottom: 30px; margin-bottom: 30px;
background-color: #fff; background-color: #fff;
} }
.search-content .group-result-list { .search-content .group-result-list {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
width: calc(100% - 300px); width: calc(100% - 300px);
} }
.search-filter-aside .search-header { .search-filter-aside .search-header {
position: relative; position: relative;
padding: 10px 15px; padding: 10px 15px;
...@@ -252,6 +266,7 @@ ...@@ -252,6 +266,7 @@
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
} }
.search-filter-aside .clear-filter { .search-filter-aside .clear-filter {
position: absolute; position: absolute;
top: 15px; top: 15px;
...@@ -264,17 +279,20 @@ ...@@ -264,17 +279,20 @@
font-size: 13px; font-size: 13px;
color: #999; color: #999;
} }
.search-filter-aside .search-type { .search-filter-aside .search-type {
position: relative; position: relative;
padding: 15px; padding: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.search-filter-aside .search-type .search-title { .search-filter-aside .search-type .search-title {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #333; color: #333;
} }
.range-text { .range-text {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -282,11 +300,13 @@ ...@@ -282,11 +300,13 @@
font-weight: 700; font-weight: 700;
color: #333; color: #333;
font-size: 15px; font-size: 15px;
} }
.SearchMain .row.inline{
display:flex!important; .SearchMain .row.inline {
} display: flex !important;
.group-statis-block{ }
.group-statis-block {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
...@@ -294,45 +314,52 @@ ...@@ -294,45 +314,52 @@
margin-bottom: 15px; margin-bottom: 15px;
font-size: 15px; font-size: 15px;
height: 45px; height: 45px;
} }
.group-result-list .group-statis-block>* {
.group-result-list .group-statis-block>* {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
line-height: 45px; line-height: 45px;
} }
.group-result-list .group-statis-block .group-share {
.group-result-list .group-statis-block .group-share {
position: relative; position: relative;
width: 150px; width: 150px;
text-align: center; text-align: center;
background-color: #2a8dbd; background-color: #2a8dbd;
color: #fff; color: #fff;
margin-right: 15px; margin-right: 15px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.16), 0 2px 7px 0 rgba(0,0,0,.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 2px 7px 0 rgba(0, 0, 0, .12);
} }
.group-result-list .group-statis-block .group-statis-detail {
.group-result-list .group-statis-block .group-statis-detail {
padding-left: 10px; padding-left: 10px;
background: #fff; background: #fff;
width: calc(100% - 150px); width: calc(100% - 150px);
} }
.group-statis-detail .title {
.group-statis-detail .title {
font-size: 18px; font-size: 18px;
} }
.group-statis-detail .num {
.group-statis-detail .num {
color: #fd992d; color: #fd992d;
margin: 0 3px; margin: 0 3px;
font-size: 16px; font-size: 16px;
} }
.group-box{
width:100%; .group-box {
width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background-color: #fff; background-color: #fff;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.09); box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
transition: transform .2s ease,box-shadow .2s ease; transition: transform .2s ease, box-shadow .2s ease;
margin-bottom: 20px; margin-bottom: 20px;
} }
.group-cover{
.group-cover {
position: relative; position: relative;
width: 270px; width: 270px;
-webkit-background-size: cover; -webkit-background-size: cover;
...@@ -341,8 +368,9 @@ ...@@ -341,8 +368,9 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
overflow: hidden; overflow: hidden;
} }
.group-cover img {
.group-cover img {
position: absolute; position: absolute;
top: 0; top: 0;
right: null; right: null;
...@@ -355,141 +383,166 @@ ...@@ -355,141 +383,166 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
} }
.group-box .group-main {
.group-box .group-main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: calc(100% - 270px); width: calc(100% - 270px);
flex-basis: calc(100% - 270px); flex-basis: calc(100% - 270px);
} }
.group-box>div {
.group-box>div {
flex: 1; flex: 1;
} }
.group-box .group-main .group-info {
.group-box .group-main .group-info {
padding: 20px; padding: 20px;
width: calc(100% - 200px); width: calc(100% - 200px);
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
.group-box .group-main .group-info .group-detail {
.group-box .group-main .group-info .group-detail {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
.group-box .group-main .group-info .group-detail i {
.group-box .group-main .group-info .group-detail i {
margin-right: 5px; margin-right: 5px;
font-size: 18px; font-size: 18px;
} }
.group-box .group-main .group-info .group-detail>* {
.group-box .group-main .group-info .group-detail>* {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.group-name{
.group-name {
color: #333; color: #333;
font-size: 16px; font-size: 16px;
line-height: 1.2; line-height: 1.2;
font-weight:bold; font-weight: bold;
} }
.group-list{
margin:0; .group-list {
padding:0; margin: 0;
} padding: 0;
.group-list li{ }
.group-list li {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
list-style-type: none; list-style-type: none;
} }
.group-list li a{
.group-list li a {
padding: 5px; padding: 5px;
font-size: 12px; font-size: 12px;
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bce8f1; border-color: #bce8f1;
color:#0083bd; color: #0083bd;
border-radius: 3px; border-radius: 3px;
background-clip: padding-box; background-clip: padding-box;
} }
.price-info{
.price-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-end; align-items: flex-end;
padding: 20px 15px; padding: 20px 15px;
width: 200px; width: 200px;
font-size: 14px; font-size: 14px;
} }
.price-wrap{
.price-wrap {
width: 100%; width: 100%;
text-align: right; text-align: right;
} }
.price-wrap>* {
.price-wrap>* {
display: block; display: block;
width: 100%; width: 100%;
} }
.price_Search{
.price_Search {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #ff9a14; color: #ff9a14;
} }
.price_unit{
.price_unit {
font-size: 14px; font-size: 14px;
padding-right: 5px; padding-right: 5px;
} }
.btn_warning{
.btn_warning {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
padding: 0 15px; padding: 0 15px;
height: 40px; height: 40px;
min-width: 135px; min-width: 135px;
font-size:15px; font-size: 15px;
border-radius: 2px; border-radius: 2px;
background-clip: padding-box; background-clip: padding-box;
letter-spacing: .05em; letter-spacing: .05em;
background-color: #ff9a14; background-color: #ff9a14;
color: #fff; color: #fff;
margin-top:10px; margin-top: 10px;
line-height: 40px; line-height: 40px;
} }
@media only screen and (max-width: 1200px){ @media only screen and (max-width: 1200px) {
.search-content .search-filter-aside { .search-content .search-filter-aside {
display: none; display: none;
} }
.search-content .group-result-list { .search-content .group-result-list {
width: 100%; width: 100%;
} }
} }
@media only screen and (max-width: 1200px){
@media only screen and (max-width: 1200px) {
.search-content { .search-content {
max-width: 768px; max-width: 768px;
} }
} }
@media only screen and (max-width: 768px){
@media only screen and (max-width: 768px) {
.group-statis-block .group-statis-detail { .group-statis-block .group-statis-detail {
width: calc(100% - 45px); width: calc(100% - 45px);
} }
.group-box .group-cover { .group-box .group-cover {
display: block; display: block;
width: 100%; width: 100%;
padding-bottom: 60%; padding-bottom: 60%;
} }
.group-box .group-main { .group-box .group-main {
display: block; display: block;
width: 100%; width: 100%;
} }
.group-box .group-main .group-info { .group-box .group-main .group-info {
width: 100%; width: 100%;
padding-bottom: 0; padding-bottom: 0;
border-right: 0; border-right: 0;
} }
.group-box .group-main .price-info { .group-box .group-main .price-info {
display: block; display: block;
width: 100%; width: 100%;
padding-top: 0; padding-top: 0;
} }
.price-info .price-wrap .price_Search { .price-info .price-wrap .price_Search {
font-size: 28px; font-size: 28px;
} }
} }
</style> </style>
<template> <template>
<div class="SearchMain"> <div class="SearchMain">
...@@ -572,7 +625,8 @@ ...@@ -572,7 +625,8 @@
<div v-if="$q.screen.xs"> <div v-if="$q.screen.xs">
<div class="search-bar-m"> <div class="search-bar-m">
<i class="iconfont iconchazhao"></i> <i class="iconfont iconchazhao"></i>
<input type="text" placeholder="搜尋" value="" @click="showPopup=true" readonly="readonly" class="keyword-input"> <input type="text" placeholder="搜尋" value="" @click="showPopup=true" readonly="readonly"
class="keyword-input">
</div> </div>
<div class="sortDiv"> <div class="sortDiv">
<q-select filled style="width:50%" v-model="priceSort" :options="navs" emit-value map-options /> <q-select filled style="width:50%" v-model="priceSort" :options="navs" emit-value map-options />
...@@ -585,7 +639,8 @@ ...@@ -585,7 +639,8 @@
<ul class="pd-list"> <ul class="pd-list">
<li class="pd-box"> <li class="pd-box">
<a class="pd-link"> <a class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg')`}"> <div class="pd-img"
:style="{backgroundImage:`url('http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg')`}">
<div class="pd-price"> <div class="pd-price">
<div class="price"> <div class="price">
11 11
...@@ -605,7 +660,8 @@ ...@@ -605,7 +660,8 @@
</li> </li>
<li class="pd-box"> <li class="pd-box">
<a class="pd-link"> <a class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg')`}"> <div class="pd-img"
:style="{backgroundImage:`url('http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg')`}">
<div class="pd-price"> <div class="pd-price">
<div class="price"> <div class="price">
11 11
...@@ -672,8 +728,8 @@ ...@@ -672,8 +728,8 @@
<span class="clear-filter">清除篩選</span> <span class="clear-filter">清除篩選</span>
</div> </div>
<div class="q-gutter-sm"> <div class="q-gutter-sm">
<q-checkbox v-model="StartWeek" v-for="(item,index) in weekList" val="teal" :label="item.label" :key="index" <q-checkbox v-model="StartWeek" v-for="(item,index) in weekList" val="teal" :label="item.label"
color="teal" /> :key="index" color="teal" />
</div> </div>
</div> </div>
</div> </div>
...@@ -905,7 +961,28 @@ ...@@ -905,7 +961,28 @@
}, },
searchDate: "", searchDate: "",
searchEndDate: "", searchEndDate: "",
//查询参数
qMsg: {
cityId: 0,
companyId: 0,
startDate: "", //开始日期
endDate: "", //结束日期
lineId: 0,//线路编号
lineTeamId: 0,//系列编号
minPrice: -1,//最低价格
maxPrice: -1,//最高价格
minTripDay: -1,//最低行程条数
maxTripDay: -1,//最高行程天数
orderByDate: 0,
orderByPrice: 0,
orderBySales: 0,
pageIndex: 1,
pageSize: 20,
priceOrderByField: 4,
searchKey: "",
startCityId: 0,
},
}; };
}, },
mounted() { mounted() {
......
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