Skip to content

M
million
Commit aa6c59ed authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 92f5afbb
Show whitespace changes
Inline Side-by-side
Showing with 278 additions and 201 deletions
src/components/search_sf/search_sf1.vue
View file @ aa6c59ed
......@@ -362,7 +362,7 @@
timeout: 3000
});
}
this.CommonJump('/Search', {})
this.CommonJump('/search', {})
}
}
};
......
src/components/search_sf/search_sf2.vue
View file @ aa6c59ed
......@@ -364,7 +364,7 @@
timeout: 3000
});
}
this.CommonJump('/Search', {})
this.CommonJump('/search', {})
}
}
};
......
src/components/search_sf/search_sf3.vue
View file @ aa6c59ed
......@@ -367,7 +367,7 @@
timeout: 3000
});
}
this.CommonJump('/Search', {})
this.CommonJump('/search', {})
}
}
};
......
src/pages/Search.vue
View file @ aa6c59ed
......@@ -124,10 +124,12 @@
line-height: 57px;
text-align: center;
}
@media only screen and (max-width: 1200px) {
.pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
}
.pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
}
......@@ -144,19 +146,21 @@
.pd-list .pd-box {
flex-basis: 100% !important;
/* margin-right: 0 !important; */
margin:0 10px 20px -20px!important;
margin: 0 10px 20px -20px !important;
}
}
.pd-list .pd-box {
margin-right: 20px;
margin-bottom: 30px;
flex-basis: calc(25% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0,0,0,.09);
transition: -webkit--webkit-transform .2s ease,box-shadow .2s ease;
box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
transition: -webkit--webkit-transform .2s ease, box-shadow .2s ease;
background-color: #fff;
}
.pd-box .pd-img {
position: relative;
width: 100%;
......@@ -177,6 +181,7 @@
border-bottom: 4px solid #00afff;
text-align: right;
}
.pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
......@@ -196,6 +201,7 @@
padding: 0 4px;
font-size: 14px;
}
.pd-box .pd-content {
padding: 15px 15px 20px;
}
......@@ -212,39 +218,47 @@
font-size: 14px;
color: #999;
}
.pd-box .pd-departure .more {
float: right;
font-size: 14px;
}
.Search_center .pd-list {
display: flex;
flex-flow: wrap;
width:100%;
width: 100%;
}
.pd-list li{
.pd-list li {
list-style-type: none;
}
.SearchMain .search-content{
.SearchMain .search-content {
display: flex;
align-items: flex-start;
}
.wl-section-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.search-filter-aside{
}
.search-filter-aside {
width: 300px;
margin-right: 30px;
margin-bottom: 30px;
background-color: #fff;
}
.search-content .group-result-list {
display: flex;
flex-flow: wrap;
width: calc(100% - 300px);
}
.search-filter-aside .search-header {
position: relative;
padding: 10px 15px;
......@@ -252,6 +266,7 @@
font-size: 18px;
font-weight: 700;
}
.search-filter-aside .clear-filter {
position: absolute;
top: 15px;
......@@ -264,17 +279,20 @@
font-size: 13px;
color: #999;
}
.search-filter-aside .search-type {
position: relative;
padding: 15px;
border-bottom: 1px solid #eee;
}
.search-filter-aside .search-type .search-title {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
color: #333;
}
.range-text {
display: flex;
justify-content: space-between;
......@@ -282,11 +300,13 @@
font-weight: 700;
color: #333;
font-size: 15px;
}
.SearchMain .row.inline{
display:flex!important;
}
.group-statis-block{
}
.SearchMain .row.inline {
display: flex !important;
}
.group-statis-block {
display: flex;
justify-content: flex-start;
width: 100%;
......@@ -294,45 +314,52 @@
margin-bottom: 15px;
font-size: 15px;
height: 45px;
}
.group-result-list .group-statis-block>* {
}
.group-result-list .group-statis-block>* {
display: inline-block;
height: 100%;
line-height: 45px;
}
.group-result-list .group-statis-block .group-share {
}
.group-result-list .group-statis-block .group-share {
position: relative;
width: 150px;
text-align: center;
background-color: #2a8dbd;
color: #fff;
margin-right: 15px;
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 {
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 {
padding-left: 10px;
background: #fff;
width: calc(100% - 150px);
}
.group-statis-detail .title {
}
.group-statis-detail .title {
font-size: 18px;
}
.group-statis-detail .num {
}
.group-statis-detail .num {
color: #fd992d;
margin: 0 3px;
font-size: 16px;
}
.group-box{
width:100%;
}
.group-box {
width: 100%;
display: flex;
flex-wrap: wrap;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.09);
transition: transform .2s ease,box-shadow .2s ease;
box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
transition: transform .2s ease, box-shadow .2s ease;
margin-bottom: 20px;
}
.group-cover{
}
.group-cover {
position: relative;
width: 270px;
-webkit-background-size: cover;
......@@ -341,8 +368,9 @@
background-size: cover;
background-position: center;
overflow: hidden;
}
.group-cover img {
}
.group-cover img {
position: absolute;
top: 0;
right: null;
......@@ -355,141 +383,166 @@
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
.group-box .group-main {
}
.group-box .group-main {
display: flex;
flex-wrap: wrap;
width: calc(100% - 270px);
flex-basis: calc(100% - 270px);
}
.group-box>div {
}
.group-box>div {
flex: 1;
}
.group-box .group-main .group-info {
}
.group-box .group-main .group-info {
padding: 20px;
width: calc(100% - 200px);
border-right: 1px solid #eee;
}
.group-box .group-main .group-info .group-detail {
}
.group-box .group-main .group-info .group-detail {
margin-bottom: 5px;
font-size: 14px;
color: #666;
}
.group-box .group-main .group-info .group-detail i {
}
.group-box .group-main .group-info .group-detail i {
margin-right: 5px;
font-size: 18px;
}
.group-box .group-main .group-info .group-detail>* {
}
.group-box .group-main .group-info .group-detail>* {
display: inline-block;
vertical-align: middle;
}
.group-name{
}
.group-name {
color: #333;
font-size: 16px;
line-height: 1.2;
font-weight:bold;
}
.group-list{
margin:0;
padding:0;
}
.group-list li{
font-weight: bold;
}
.group-list {
margin: 0;
padding: 0;
}
.group-list li {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 5px;
list-style-type: none;
}
.group-list li a{
}
.group-list li a {
padding: 5px;
font-size: 12px;
background-color: #d9edf7;
border-color: #bce8f1;
color:#0083bd;
color: #0083bd;
border-radius: 3px;
background-clip: padding-box;
}
.price-info{
}
.price-info {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 20px 15px;
width: 200px;
font-size: 14px;
}
.price-wrap{
}
.price-wrap {
width: 100%;
text-align: right;
}
.price-wrap>* {
}
.price-wrap>* {
display: block;
width: 100%;
}
.price_Search{
}
.price_Search {
font-size: 32px;
font-weight: 700;
color: #ff9a14;
}
.price_unit{
}
.price_unit {
font-size: 14px;
padding-right: 5px;
}
.btn_warning{
}
.btn_warning {
text-align: center;
cursor: pointer;
padding: 0 15px;
height: 40px;
min-width: 135px;
font-size:15px;
font-size: 15px;
border-radius: 2px;
background-clip: padding-box;
letter-spacing: .05em;
background-color: #ff9a14;
color: #fff;
margin-top:10px;
margin-top: 10px;
line-height: 40px;
}
}
@media only screen and (max-width: 1200px){
@media only screen and (max-width: 1200px) {
.search-content .search-filter-aside {
display: none;
}
.search-content .group-result-list {
width: 100%;
}
}
@media only screen and (max-width: 1200px){
}
@media only screen and (max-width: 1200px) {
.search-content {
max-width: 768px;
}
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 768px) {
.group-statis-block .group-statis-detail {
width: calc(100% - 45px);
}
.group-box .group-cover {
display: block;
width: 100%;
padding-bottom: 60%;
}
.group-box .group-main {
display: block;
width: 100%;
}
.group-box .group-main .group-info {
width: 100%;
padding-bottom: 0;
border-right: 0;
}
.group-box .group-main .price-info {
display: block;
width: 100%;
padding-top: 0;
}
.price-info .price-wrap .price_Search {
font-size: 28px;
}
}
}
</style>
<template>
<div class="SearchMain">
......@@ -572,7 +625,8 @@
<div v-if="$q.screen.xs">
<div class="search-bar-m">
<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 class="sortDiv">
<q-select filled style="width:50%" v-model="priceSort" :options="navs" emit-value map-options />
......@@ -585,7 +639,8 @@
<ul class="pd-list">
<li class="pd-box">
<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="price">
11
......@@ -605,7 +660,8 @@
</li>
<li class="pd-box">
<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="price">
11
......@@ -672,8 +728,8 @@
<span class="clear-filter">清除篩選</span>
</div>
<div class="q-gutter-sm">
<q-checkbox v-model="StartWeek" v-for="(item,index) in weekList" val="teal" :label="item.label" :key="index"
color="teal" />
<q-checkbox v-model="StartWeek" v-for="(item,index) in weekList" val="teal" :label="item.label"
:key="index" color="teal" />
</div>
</div>
</div>
......@@ -905,7 +961,28 @@
},
searchDate: "",
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() {
......
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