|
|
@ -1,12 +1,13 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="content"> |
|
|
<view class="content"> |
|
|
<view class="navbar"> |
|
|
<view class="navbar"> |
|
|
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view> |
|
|
<view v-for="(item, index) in navList" :key="index" class="nav-item" |
|
|
|
|
|
:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab"> |
|
|
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab"> |
|
|
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex"> |
|
|
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex"> |
|
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" > |
|
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData"> |
|
|
<!-- 空白页 --> |
|
|
<!-- 空白页 --> |
|
|
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> |
|
|
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> |
|
|
|
|
|
|
|
|
@ -19,7 +20,8 @@ |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="goods-box-single"> |
|
|
<view class="goods-box-single"> |
|
|
<image class="goods-img" :src="item.meno1" @click="navToDetailPage(item)" mode="aspectFill"></image> |
|
|
<image class="goods-img" :src="item.meno1" @click="navToDetailPage(item)" mode="aspectFill"> |
|
|
|
|
|
</image> |
|
|
<view class="right"> |
|
|
<view class="right"> |
|
|
<text class="title clamp">{{ item.name }}</text> |
|
|
<text class="title clamp">{{ item.name }}</text> |
|
|
<text class="attr-box">{{ item.meno3 }}</text> |
|
|
<text class="attr-box">{{ item.meno3 }}</text> |
|
|
@ -37,13 +39,17 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { mapState } from 'vuex'; |
|
|
import { |
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|
|
mapState |
|
|
import Api from '@/common/api'; |
|
|
} from 'vuex'; |
|
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; |
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|
|
import empty from '@/components/empty'; |
|
|
import Api from '@/common/api'; |
|
|
import { formatDate } from '@/common/date'; |
|
|
import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'; |
|
|
export default { |
|
|
import empty from '@/components/empty'; |
|
|
|
|
|
import { |
|
|
|
|
|
formatDate |
|
|
|
|
|
} from '@/common/date'; |
|
|
|
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
mallplusCopyright, |
|
|
mallplusCopyright, |
|
|
uniLoadMore, |
|
|
uniLoadMore, |
|
|
@ -52,25 +58,26 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
tabCurrentIndex: 0, |
|
|
tabCurrentIndex: 0, |
|
|
navList: [ |
|
|
pageNum:1, |
|
|
{ |
|
|
navList: [{ |
|
|
type: 1, |
|
|
type: 1, |
|
|
text: '收藏商品', |
|
|
text: '收藏商品', |
|
|
loadingType: 'more', |
|
|
loadingType: 'more', |
|
|
orderList: [] |
|
|
orderList: [] |
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 2, |
|
|
|
|
|
text: '收藏文章', |
|
|
|
|
|
loadingType: 'more', |
|
|
|
|
|
orderList: [] |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 3, |
|
|
|
|
|
text: '收藏店铺', |
|
|
|
|
|
loadingType: 'more', |
|
|
|
|
|
orderList: [] |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
// , |
|
|
|
|
|
// { |
|
|
|
|
|
// type: 2, |
|
|
|
|
|
// text: '收藏文章', |
|
|
|
|
|
// loadingType: 'more', |
|
|
|
|
|
// orderList: [] |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// type: 3, |
|
|
|
|
|
// text: '收藏店铺', |
|
|
|
|
|
// loadingType: 'more', |
|
|
|
|
|
// orderList: [] |
|
|
|
|
|
// } |
|
|
] |
|
|
] |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
@ -89,6 +96,23 @@ export default { |
|
|
computed: { |
|
|
computed: { |
|
|
...mapState(['hasLogin', 'userInfo']) |
|
|
...mapState(['hasLogin', 'userInfo']) |
|
|
}, |
|
|
}, |
|
|
|
|
|
//加载更多 |
|
|
|
|
|
onReachBottom() { |
|
|
|
|
|
this.pageNum = this.pageNum + 1; |
|
|
|
|
|
|
|
|
|
|
|
this.loadData(); |
|
|
|
|
|
}, |
|
|
|
|
|
onPullDownRefresh() { |
|
|
|
|
|
|
|
|
|
|
|
console.log("onPullDownRefresh") |
|
|
|
|
|
this.pageNum = this.pageNum + 1; |
|
|
|
|
|
// this.getNewProductList('refresh'); |
|
|
|
|
|
|
|
|
|
|
|
this.loadData(); |
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
|
|
}, 2000); |
|
|
|
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
//详情页 |
|
|
//详情页 |
|
|
navToDetailPage(item) { |
|
|
navToDetailPage(item) { |
|
|
@ -100,7 +124,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
//获取订单列表 |
|
|
//获取订单列表 |
|
|
async loadData(source) { |
|
|
async loadData(source) { |
|
|
console.log('=======================') |
|
|
// console.log('=======================') |
|
|
|
|
|
|
|
|
//这里是将订单挂载到tab列表下 |
|
|
//这里是将订单挂载到tab列表下 |
|
|
let index = this.tabCurrentIndex; |
|
|
let index = this.tabCurrentIndex; |
|
|
@ -118,13 +142,24 @@ export default { |
|
|
|
|
|
|
|
|
navItem.loadingType = 'loading'; |
|
|
navItem.loadingType = 'loading'; |
|
|
|
|
|
|
|
|
if (!this.hasLogin) { |
|
|
// if (!this.hasLogin) { |
|
|
url = '/pages/public/login'; |
|
|
// url = '/pages/public/login'; |
|
|
uni.navigateTo({ |
|
|
// uni.navigateTo({ |
|
|
url |
|
|
// url |
|
|
}); |
|
|
// }); |
|
|
|
|
|
// } else { |
|
|
|
|
|
//没有更多直接返回 |
|
|
|
|
|
if (type === 'add') { |
|
|
|
|
|
if (this.loadingType === 'nomore') { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
this.loadingType = 'loading'; |
|
|
} else { |
|
|
} else { |
|
|
let params = { }; |
|
|
this.loadingType = 'more'; |
|
|
|
|
|
} |
|
|
|
|
|
let params = { |
|
|
|
|
|
pageNum: this.pageNum, |
|
|
|
|
|
}; |
|
|
let data = await Api.apiCall('get', Api.goods.listCollect, params); |
|
|
let data = await Api.apiCall('get', Api.goods.listCollect, params); |
|
|
|
|
|
|
|
|
let orderList = data.records.filter(item => { |
|
|
let orderList = data.records.filter(item => { |
|
|
@ -148,7 +183,7 @@ export default { |
|
|
|
|
|
|
|
|
//判断是否还有数据， 有改为 more， 没有改为noMore |
|
|
//判断是否还有数据， 有改为 more， 没有改为noMore |
|
|
navItem.loadingType = 'more'; |
|
|
navItem.loadingType = 'more'; |
|
|
} |
|
|
// } |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//swiper 切换 |
|
|
//swiper 切换 |
|
|
@ -172,7 +207,9 @@ export default { |
|
|
let list = this.navList[this.tabCurrentIndex].orderList; |
|
|
let list = this.navList[this.tabCurrentIndex].orderList; |
|
|
let row = list[index]; |
|
|
let row = list[index]; |
|
|
let id = row.id; |
|
|
let id = row.id; |
|
|
let params = { ids: id }; |
|
|
let params = { |
|
|
|
|
|
ids: id |
|
|
|
|
|
}; |
|
|
let data = Api.apiCall('post', Api.goods.deleteCollect, params); |
|
|
let data = Api.apiCall('post', Api.goods.deleteCollect, params); |
|
|
}, |
|
|
}, |
|
|
//取消订单 |
|
|
//取消订单 |
|
|
@ -181,7 +218,10 @@ export default { |
|
|
title: '请稍后' |
|
|
title: '请稍后' |
|
|
}); |
|
|
}); |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
let { stateTip, stateTipColor } = this.orderStateExp(9); |
|
|
let { |
|
|
|
|
|
stateTip, |
|
|
|
|
|
stateTipColor |
|
|
|
|
|
} = this.orderStateExp(9); |
|
|
item = Object.assign(item, { |
|
|
item = Object.assign(item, { |
|
|
type: 9, |
|
|
type: 9, |
|
|
stateTip, |
|
|
stateTip, |
|
|
@ -215,7 +255,10 @@ export default { |
|
|
|
|
|
|
|
|
//更多自定义 |
|
|
//更多自定义 |
|
|
} |
|
|
} |
|
|
return { stateTip, stateTipColor }; |
|
|
return { |
|
|
|
|
|
stateTip, |
|
|
|
|
|
stateTipColor |
|
|
|
|
|
}; |
|
|
}, |
|
|
}, |
|
|
dateFormat(time) { |
|
|
dateFormat(time) { |
|
|
if (time == null || time === '') { |
|
|
if (time == null || time === '') { |
|
|
@ -225,24 +268,25 @@ export default { |
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss'); |
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss'); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
page, |
|
|
page, |
|
|
.content { |
|
|
.content { |
|
|
background: $page-color-base; |
|
|
background: $page-color-base; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.swiper-box { |
|
|
.swiper-box { |
|
|
height: calc(100% - 40px); |
|
|
height: calc(100% - 40px); |
|
|
} |
|
|
} |
|
|
.list-scroll-content { |
|
|
|
|
|
|
|
|
.list-scroll-content { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.navbar { |
|
|
.navbar { |
|
|
display: flex; |
|
|
display: flex; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
padding: 0 5px; |
|
|
padding: 0 5px; |
|
|
@ -250,6 +294,7 @@ page, |
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); |
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); |
|
|
position: relative; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
z-index: 10; |
|
|
|
|
|
|
|
|
.nav-item { |
|
|
.nav-item { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -259,8 +304,10 @@ page, |
|
|
font-size: 15px; |
|
|
font-size: 15px; |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
&.current { |
|
|
&.current { |
|
|
color: $base-color; |
|
|
color: $base-color; |
|
|
|
|
|
|
|
|
&:after { |
|
|
&:after { |
|
|
content: ''; |
|
|
content: ''; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
@ -273,17 +320,19 @@ page, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-swiper-item { |
|
|
.uni-swiper-item { |
|
|
height: auto; |
|
|
height: auto; |
|
|
} |
|
|
} |
|
|
.order-item { |
|
|
|
|
|
|
|
|
.order-item { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
padding-left: 30upx; |
|
|
padding-left: 30upx; |
|
|
background: #fff; |
|
|
background: #fff; |
|
|
margin-top: 16upx; |
|
|
margin-top: 16upx; |
|
|
|
|
|
|
|
|
.i-top { |
|
|
.i-top { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
@ -292,17 +341,21 @@ page, |
|
|
font-size: $font-base; |
|
|
font-size: $font-base; |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
.time { |
|
|
.time { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.state { |
|
|
.state { |
|
|
color: $base-color; |
|
|
color: $base-color; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.del-btn { |
|
|
.del-btn { |
|
|
padding: 10upx 0 10upx 36upx; |
|
|
padding: 10upx 0 10upx 36upx; |
|
|
font-size: $font-lg; |
|
|
font-size: $font-lg; |
|
|
color: $font-color-light; |
|
|
color: $font-color-light; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
&:after { |
|
|
&:after { |
|
|
content: ''; |
|
|
content: ''; |
|
|
width: 0; |
|
|
width: 0; |
|
|
@ -315,51 +368,61 @@ page, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 多条商品 */ |
|
|
/* 多条商品 */ |
|
|
.goods-box { |
|
|
.goods-box { |
|
|
height: 160upx; |
|
|
height: 160upx; |
|
|
padding: 20upx 0; |
|
|
padding: 20upx 0; |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
|
.goods-item { |
|
|
.goods-item { |
|
|
width: 120upx; |
|
|
width: 120upx; |
|
|
height: 120upx; |
|
|
height: 120upx; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
margin-right: 24upx; |
|
|
margin-right: 24upx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.goods-img { |
|
|
.goods-img { |
|
|
display: block; |
|
|
display: block; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 单条商品 */ |
|
|
/* 单条商品 */ |
|
|
.goods-box-single { |
|
|
.goods-box-single { |
|
|
display: flex; |
|
|
display: flex; |
|
|
padding: 20upx 0; |
|
|
padding: 20upx 0; |
|
|
|
|
|
|
|
|
.goods-img { |
|
|
.goods-img { |
|
|
display: block; |
|
|
display: block; |
|
|
width: 120upx; |
|
|
width: 120upx; |
|
|
height: 120upx; |
|
|
height: 120upx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.right { |
|
|
.right { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
padding: 0 30upx 0 24upx; |
|
|
padding: 0 30upx 0 24upx; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
.title { |
|
|
.title { |
|
|
font-size: $font-base + 2upx; |
|
|
font-size: $font-base + 2upx; |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
line-height: 1; |
|
|
line-height: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.attr-box { |
|
|
.attr-box { |
|
|
font-size: $font-sm + 2upx; |
|
|
font-size: $font-sm + 2upx; |
|
|
color: $font-color-light; |
|
|
color: $font-color-light; |
|
|
padding: 10upx 12upx; |
|
|
padding: 10upx 12upx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.price { |
|
|
.price { |
|
|
font-size: $font-base + 2upx; |
|
|
font-size: $font-base + 2upx; |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
|
&:before { |
|
|
&:before { |
|
|
content: '￥'; |
|
|
content: '￥'; |
|
|
font-size: $font-sm; |
|
|
font-size: $font-sm; |
|
|
@ -376,13 +439,16 @@ page, |
|
|
padding: 20upx 30upx; |
|
|
padding: 20upx 30upx; |
|
|
font-size: $font-sm + 2upx; |
|
|
font-size: $font-sm + 2upx; |
|
|
color: $font-color-light; |
|
|
color: $font-color-light; |
|
|
|
|
|
|
|
|
.num { |
|
|
.num { |
|
|
margin: 0 8upx; |
|
|
margin: 0 8upx; |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.price { |
|
|
.price { |
|
|
font-size: $font-lg; |
|
|
font-size: $font-lg; |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
|
&:before { |
|
|
&:before { |
|
|
content: '￥'; |
|
|
content: '￥'; |
|
|
font-size: $font-sm; |
|
|
font-size: $font-sm; |
|
|
@ -390,6 +456,7 @@ page, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.action-box { |
|
|
.action-box { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
justify-content: flex-end; |
|
|
@ -398,6 +465,7 @@ page, |
|
|
position: relative; |
|
|
position: relative; |
|
|
padding-right: 30upx; |
|
|
padding-right: 30upx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.action-btn { |
|
|
.action-btn { |
|
|
width: 160upx; |
|
|
width: 160upx; |
|
|
height: 60upx; |
|
|
height: 60upx; |
|
|
@ -410,44 +478,47 @@ page, |
|
|
color: $font-color-dark; |
|
|
color: $font-color-dark; |
|
|
background: #fff; |
|
|
background: #fff; |
|
|
border-radius: 100px; |
|
|
border-radius: 100px; |
|
|
|
|
|
|
|
|
&:after { |
|
|
&:after { |
|
|
border-radius: 100px; |
|
|
border-radius: 100px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&.recom { |
|
|
&.recom { |
|
|
background: #fff9f9; |
|
|
background: #fff9f9; |
|
|
color: $base-color; |
|
|
color: $base-color; |
|
|
|
|
|
|
|
|
&:after { |
|
|
&:after { |
|
|
border-color: #f7bcc8; |
|
|
border-color: #f7bcc8; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* load-more */ |
|
|
/* load-more */ |
|
|
.uni-load-more { |
|
|
.uni-load-more { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
height: 80upx; |
|
|
height: 80upx; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__text { |
|
|
.uni-load-more__text { |
|
|
font-size: 28upx; |
|
|
font-size: 28upx; |
|
|
color: #999; |
|
|
color: #999; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img { |
|
|
.uni-load-more__img { |
|
|
height: 24px; |
|
|
height: 24px; |
|
|
width: 24px; |
|
|
width: 24px; |
|
|
margin-right: 10px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img > view { |
|
|
.uni-load-more__img>view { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img > view view { |
|
|
.uni-load-more__img>view view { |
|
|
width: 6px; |
|
|
width: 6px; |
|
|
height: 2px; |
|
|
height: 2px; |
|
|
border-top-left-radius: 1px; |
|
|
border-top-left-radius: 1px; |
|
|
@ -457,95 +528,95 @@ page, |
|
|
opacity: 0.2; |
|
|
opacity: 0.2; |
|
|
transform-origin: 50%; |
|
|
transform-origin: 50%; |
|
|
animation: load 1.56s ease infinite; |
|
|
animation: load 1.56s ease infinite; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img > view view:nth-child(1) { |
|
|
.uni-load-more__img>view view:nth-child(1) { |
|
|
transform: rotate(90deg); |
|
|
transform: rotate(90deg); |
|
|
top: 2px; |
|
|
top: 2px; |
|
|
left: 9px; |
|
|
left: 9px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img > view view:nth-child(2) { |
|
|
.uni-load-more__img>view view:nth-child(2) { |
|
|
transform: rotate(180deg); |
|
|
transform: rotate(180deg); |
|
|
top: 11px; |
|
|
top: 11px; |
|
|
right: 0; |
|
|
right: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img > view view:nth-child(3) { |
|
|
.uni-load-more__img>view view:nth-child(3) { |
|
|
transform: rotate(270deg); |
|
|
transform: rotate(270deg); |
|
|
bottom: 2px; |
|
|
bottom: 2px; |
|
|
left: 9px; |
|
|
left: 9px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-load-more__img > view view:nth-child(4) { |
|
|
.uni-load-more__img>view view:nth-child(4) { |
|
|
top: 11px; |
|
|
top: 11px; |
|
|
left: 0; |
|
|
left: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load1, |
|
|
.load1, |
|
|
.load2, |
|
|
.load2, |
|
|
.load3 { |
|
|
.load3 { |
|
|
height: 24px; |
|
|
height: 24px; |
|
|
width: 24px; |
|
|
width: 24px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load2 { |
|
|
.load2 { |
|
|
transform: rotate(30deg); |
|
|
transform: rotate(30deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load3 { |
|
|
.load3 { |
|
|
transform: rotate(60deg); |
|
|
transform: rotate(60deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load1 view:nth-child(1) { |
|
|
.load1 view:nth-child(1) { |
|
|
animation-delay: 0s; |
|
|
animation-delay: 0s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load2 view:nth-child(1) { |
|
|
.load2 view:nth-child(1) { |
|
|
animation-delay: 0.13s; |
|
|
animation-delay: 0.13s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load3 view:nth-child(1) { |
|
|
.load3 view:nth-child(1) { |
|
|
animation-delay: 0.26s; |
|
|
animation-delay: 0.26s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load1 view:nth-child(2) { |
|
|
.load1 view:nth-child(2) { |
|
|
animation-delay: 0.39s; |
|
|
animation-delay: 0.39s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load2 view:nth-child(2) { |
|
|
.load2 view:nth-child(2) { |
|
|
animation-delay: 0.52s; |
|
|
animation-delay: 0.52s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load3 view:nth-child(2) { |
|
|
.load3 view:nth-child(2) { |
|
|
animation-delay: 0.65s; |
|
|
animation-delay: 0.65s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load1 view:nth-child(3) { |
|
|
.load1 view:nth-child(3) { |
|
|
animation-delay: 0.78s; |
|
|
animation-delay: 0.78s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load2 view:nth-child(3) { |
|
|
.load2 view:nth-child(3) { |
|
|
animation-delay: 0.91s; |
|
|
animation-delay: 0.91s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load3 view:nth-child(3) { |
|
|
.load3 view:nth-child(3) { |
|
|
animation-delay: 1.04s; |
|
|
animation-delay: 1.04s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load1 view:nth-child(4) { |
|
|
.load1 view:nth-child(4) { |
|
|
animation-delay: 1.17s; |
|
|
animation-delay: 1.17s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load2 view:nth-child(4) { |
|
|
.load2 view:nth-child(4) { |
|
|
animation-delay: 1.3s; |
|
|
animation-delay: 1.3s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.load3 view:nth-child(4) { |
|
|
.load3 view:nth-child(4) { |
|
|
animation-delay: 1.43s; |
|
|
animation-delay: 1.43s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@-webkit-keyframes load { |
|
|
@-webkit-keyframes load { |
|
|
0% { |
|
|
0% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
@ -553,5 +624,5 @@ page, |
|
|
100% { |
|
|
100% { |
|
|
opacity: 0.2; |
|
|
opacity: 0.2; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
