Skip to content

V
vue-ssr-mobile
Commit 1ecaaf54 authored by lixy's avatar lixy
Browse files
Options

车型tab定位

parent 2c9fca59
Expand all Show whitespace changes
Inline Side-by-side
Showing with 431 additions and 70 deletions
assets/styles/base.scss
View file @ 1ecaaf54
......@@ -33,6 +33,9 @@ input[disabled] {
display: flex;
justify-content: space-between;
}
.flex{
display: flex;
}
.flex-aic-jcc-fdc{
display: flex;
......@@ -40,11 +43,16 @@ input[disabled] {
justify-content: center;
flex-direction: column;
}
.flex-jcb-fdc{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.header-top{
display: flex;
justify-content: space-between;
align-items: center;
height: 1.87733rem;
height: px2rem(88px);
position: fixed;
z-index: 999;
top: 0;
......@@ -64,6 +72,15 @@ input[disabled] {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.loading{
padding: 10px;
text-align: center;
color: #666;
}
.total-div{
font-size: px2rem(30px);
}
.main-padding{
padding: 0.7rem 0.4rem;
......@@ -131,10 +148,20 @@ a:active {
body,
html {
@include wh(100%, 100%);
background-color: $fill-base;
background-color: #fff;
}
img {
display: block;
max-width: 100%;
}
.isFixed {
position: fixed;
width: 100%;
top: px2rem(88px);
background: #fff;
z-index: 999;
}
.bt-line{
border-bottom: 1px solid #dfdfdf;
}
pages/activity.vue
View file @ 1ecaaf54
......@@ -36,9 +36,13 @@
</div>
</router-link>
</ul>
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——没有更多了——</p>
<Footer v-if="touchend"/>
</div>
</template>
......@@ -89,6 +93,7 @@
created() {
// handleScroll为页面滚动的监听回调
window.addEventListener('scroll', this.handleScroll);
this.preventRepeatReuqest = true;
this.getAll();
},
async asyncData() {
......
pages/campsite.vue
View file @ 1ecaaf54
......@@ -33,9 +33,13 @@
</div>
</router-link>
</ul>
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——没有更多了——</p>
<Footer v-if="touchend"/>
</div>
</template>
......@@ -87,6 +91,7 @@
created() {
// handleScroll为页面滚动的监听回调
window.addEventListener('scroll', this.handleScroll);
this.preventRepeatReuqest = true;
this.getType();
this.getAll();
},
......@@ -121,6 +126,7 @@
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
this.preventRepeatReuqest = true;
this.getAll();
},
getType() {
......
pages/news.vue
View file @ 1ecaaf54
......@@ -3,6 +3,7 @@
<Head/>
<ul
v-if="dataDetail.length"
id="scroll-area"
type="1"
class="main-padding">
<router-link
......@@ -11,17 +12,22 @@
:key="item.id"
class="flex-jcb news-item">
<img
:src="item.cover"
:src="item.coverImage"
class="tour-img-home">
<div class="tour-home-r">
<div class="ellipsis2">{{ item.name }}</div>
<div class="ellipsis2">{{ item.title }}</div>
<div class="ellipsis2 epitome">导语：{{ item.epitome }}</div>
<div class="epitome">{{ item.addTime.substring(0, 10) }}</div>
</div>
</router-link>
</ul>
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——没有更多了——</p>
<Footer/>
<Footer v-if="touchend"/>
</div>
</template>
......@@ -67,23 +73,51 @@
...mapGetters(["userInfo"])
},
created() {
this.preventRepeatReuqest = true;
window.addEventListener('scroll', this.handleScroll);
this.getAll();
},
methods: {
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
this.preventRepeatReuqest = true;
this.getAll();
},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 设备/屏幕高度
let scrollObj = document.getElementById("scroll-area"); // 滚动区域
if(scrollObj){
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
}
this.preventRepeatReuqest = true;
//数据的定位加20位
this.listQuery.page = this.currentPage + 1;
this.getAll();
}
}
},
getAll() {
let t = this;
axios.get('/api/uccn/article/app/unauth/list?type=1&page='+this.listQuery.page+'&limit='+this.listQuery.limit)
.then(function(response) {
t.totalCount = response.data.data.total;
t.dataDetail = response.data.data.list;
let list = response.data.data.list;
t.dataDetail = [...t.dataDetail, ...list];
t.currentPage = response.data.data.pageNum;
if (response.data.data.total < t.listQuery.limit*t.listQuery.page) {
t.touchend = true;
}
t.preventRepeatReuqest = false;
});
},
},
......
pages/tour.vue
View file @ 1ecaaf54
......@@ -13,7 +13,7 @@
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<div class="main-padding"> 共{{ totalCount }}个旅行路线</div>
<div class="main-padding total-div"> 共{{ totalCount }}个旅行路线</div>
<ul
v-if="dataDetail.length"
id="scroll-area"
......@@ -33,9 +33,13 @@
</div>
</router-link>
</ul>
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——没有更多了——</p>
<Footer v-if="touchend"/>
</div>
</template>
......@@ -88,6 +92,7 @@
// handleScroll为页面滚动的监听回调
window.addEventListener('scroll', this.handleScroll);
this.getType();
this.preventRepeatReuqest = true;
this.getAll();
},
async asyncData() {
......@@ -121,6 +126,7 @@
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
this.preventRepeatReuqest = true;
this.getAll();
},
getType() {
......
pages/vehicle.vue
View file @ 1ecaaf54
......@@ -24,19 +24,43 @@
v-for="item in dataDetail"
:to="{ path: 'vehicleDetail', query:{id: item.id, name:item.name }}"
:key="item.id"
class="flex-jcb news-item">
class="news-item flex">
<img
:src="item.coverPic"
:alt = "item.name"
class="tour-img-home">
<div class="tour-home-r">
<div class="ellipsis2">{{ item.name }}</div>
class="vehicle-img-list">
<div class="vehicle-list flex-jcb-fdc">
<div class="ellipsis2 vehicle-img-list-name">{{ item.name }}</div>
<div class="flex-aic-jcb">
<span
v-for="(iitem,iindex) in item.uccnCataList"
:key="iitem.id"
class="flex-aic config">
<img
v-if="iindex==0"
style="margin-right: 5px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg==">
<img
v-if="iindex==1"
style="margin-right: 5px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII=">
<img
v-if="iindex==2"
style="margin-right: 5px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC">
{{ iitem.name }}
</span>
</div>
</div>
</router-link>
</ul>
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——没有更多了——</p>
<Footer v-if="touchend"/>
</div>
</template>
......@@ -87,6 +111,7 @@
created() {
// handleScroll为页面滚动的监听回调
window.addEventListener('scroll', this.handleScroll);
this.preventRepeatReuqest = true;
this.getAll();
},
async asyncData() {
......@@ -162,10 +187,24 @@
.tour-home-r, .news-home-r{
width: 58%;
}
.tour-img-home, .news-home-img{
width: px2rem(300px);
height: px2rem(150px);
.vehicle-img-list-name{
font-size:px2rem(24px);
font-weight: 700;
}
.vehicle-img-list{
width: px2rem(277px);
height: px2rem(225px);
}
.vehicle-list{
border-bottom: 1px solid #dfdfdf;
margin-left: px2rem(20px);
width: 100%;
padding: px2rem(20px);
.config{
color: #999;
}
}
.order-page {
padding: px2rem(88px) 0 3px 0;
......
pages/vehicleDetail/index.vue
View file @ 1ecaaf54
This diff is collapsed.
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