dreamland/pages/index/index.vue

<template>
	<gracePage :customHeader="false">
		<view slot="gBody" class="grace-body">
			<view class='journal-list'>
			  <view class='list'>
			    <view class='journal' v-for="(v, k) in fetch.info" :key="k">
			      <view data-journal="list" @click="location(v.id_code)">
			        <image mode='aspectFill' class='default cover' :src="v.pic_cover"></image>
			        <view class='infos'>
			          <view class='tit'>{{v.name}}</view>
			          <view class='num'>
			            <text class='grace-icons icon-eye'></text><text class="icon-num">{{v.num_view_total}}</text>
						<text class='grace-icons icon-user'></text><text class="icon-num">{{v.num_buy_total}}</text>
					  </view>
			        </view>
			      </view>
			    </view>
			  </view>
			</view>
		</view>
	</gracePage>
</template>
<script>
export default{
	data() {
		return {
			fetch : {
				info : [],
			}
		}
	},
	onShow() {
		this.Dever.checkLogin();
		this.getData(1);
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getData(1);
	},
	//下拉加载
	onReachBottom() {
		this.getData(2);
	},
	methods:{
		getData : function(page) {
			this.Dever.page([page, 'info'], this, 'app/collection/?l=api.home', {id:-1});
		},
		location : function(id) {
			this.Dever.location('dream/index?id=' + id);
		}
	},
}
</script>
<style>
.grace-icons {
	margin-left:12rpx;
}
page {
  padding-bottom: 100rpx;
}

.push-journal {
  position: relative;
  width: 750rpx;
  margin: 0 auto;
  padding: 20rpx 0 43rpx;
  overflow: visible;
}
.push-journal view{
  overflow: visible;
}

.push-journal .icon-fee, .push-journal .icon-free, .push-journal .icon-vip {
  top: 82rpx;
}

.push-journal swiper {
  width: 750rpx;
  height: 964rpx;
  display: block;
  margin: 0 auto;
}
.push-journal swiper image{
  display: block;
  margin: 18rpx auto 0;
  width: 545rpx;
  height: 768rpx;
  transition-property: all;
  transition-duration: 0.3s;
}
.push-journal .active image{
  width: 570rpx;
  height: 804rpx;
  margin: 0 auto;
}

.push-journal .push-infos{
  box-shadow:0rpx 0 20rpx 0rpx rgba(187, 187, 187, 0.35);
  width: 545rpx;
  margin: 0 auto;
  padding:  20rpx 0;
}
.push-journal .active .push-infos{
  width: 570rpx;
}

.push-journal .tit {
  font-size: 30rpx;
  line-height: 50rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.push-journal .num {
  font-size: 22rpx;
  color: #999;
  text-align: center;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.push-journal .num .ico-dingyue{
  margin-right: 13rpx;
  flex-shrink: 0;
}

.spriter {
  height: 45rpx;
  width: 750rpx;
  background: #f2f2f2;
}

.journal-list {
  width: 650rpx;
  box-sizing: border-box;
  margin: 0 auto;
}

.journal-list .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.journal {
  position: relative;
  width: 300rpx;
  padding: 50rpx 0 22rpx;
}

.journal .cover {
  width: 300rpx;
  height: 420rpx;
  display: block;
}

.journal .infos{
   box-shadow:0rpx 0 20rpx 0rpx rgba(187, 187, 187, 0.35);
  width: 300rpx;
  margin: 0 auto;
  padding:  20rpx 30rpx;
  box-sizing: border-box;
}

.journal .tit {
  font-size: 28rpx;
  line-height: 36rpx;
  height: 72rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.journal .num {
  font-size: 20rpx;
  color: #999;
  margin-top: 15rpx;
  display: flex;
  text-align: center;
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.journal .num .ico-dingyue{
  margin-right: 9rpx;
}

.journal-list .loading {
  margin: 40rpx auto 0;
}

.myinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50rpx 0 50rpx;
}

.uprofile {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.uprofile image {
  width: 83rpx;
  height: 83rpx;
  display: block;
  border-radius: 50%;
  margin-right: 10rpx;
}

.myinfo .contact {
  position: relative;
  width: 150rpx;
  height: 55rpx;
  text-align: center;
  border: 2rpx solid #000;
  border-radius: 55rpx;
  font-size: 26rpx;
  line-height: 55rpx;
}

.myinfo .contact button {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.help {
  width: 590rpx;
  margin: 0 auto;
}

.wxParse-img {
  width: 590rpx;
}

.order-list{
  width: 650rpx;
  margin: 0 auto;
}
.order-list .list{
  margin-bottom: 40rpx;
}
.order-item {
  position: relative;
  border-bottom: solid 1rpx #ccc;
  padding: 40rpx 0 0;
}

.order-item .order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-item .order-info view {
  display: flex;
  align-items: center;
  line-height: 24rpx;
  font-size: 24rpx;
  color: #666;
  overflow: hidden;
}

.order-item .order-info view:before {
  content: '';
  width: 4rpx;
  background-color: #d1171a;
  height: 22rpx;
  margin-right: 18rpx
}

.order-item .order-info navigator {
  color: #d1171a;
  font-size: 28rpx;
}

.order-item .mag-info {
  background-color: #f1f1f1;
  margin: 27rpx 0 40rpx;
  font-size: 28rpx;
  padding: 17rpx 0;
}

.order-item .mag-info text {
  display: block;
  padding: 15rpx 0 0 17rpx;
}
.order-item .mag-info view{
  padding-left: 17rpx;
}
.icon-num {
	margin-left:6rpx;
}
</style>