dreamland/pages/dream/view.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<swiper class="swiper" @change="change" :circular="swiper.circular">
				<swiper-item v-for="(v, k) in fetch.items">
					<dreamView :item="v" class="item"></dreamView>
				</swiper-item>
			</swiper>

		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/lib/graceUI/components/gracePage.vue";
import dreamView from "@/pages/dream/view/dreamView.vue";
export default{
	data() {
		return {
			swiper : {
				index : 0,
				circular : false,
			},
			fetch: {
				items : [
					{
						pic : 'https://7.jstyle.cn/1/2020/04/25/a69fdba6a0cba49d46cc07b8e269b546.jpg',
						name : "测试标题 001",
						content : '内容',
						type : 1
					},
					{
						pic : 'https://7.jstyle.cn/1/2020/04/25/224697c330eca688097b4d0e4189709e.jpg',
						name : "测试标题 002",
						content : '内容2',
						type : 1
					},
				],
				button : {
					read : {
						name : '阅读',
						style : 'background: linear-gradient(to right, #FF0066,#CA00FF) !important;color:#ffffff'
					}
				}
			}
		}
	},
	methods:{
		change : function(e) {
			this.swiper.index = e.detail.current;
		},
		view : function() {
			this.Dever.location('dream/view?id=1');
		}
	},
	components:{
		gracePage,dreamView
	}
}
</script>
<style>
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.swiper {
	width: 750rpx;
	height: 100%;
}
swiper-item>view{
  height: 100%;
}
swiper-item image{
  width: 750rpx;
  height: 100%;
}
.btn {
  position: absolute;
  bottom: 30rpx;
  left: 60rpx;
  right: 60rpx;
}
.btn .dots{
  display: flex;
  justify-content: center;
  margin-bottom: -88rpx;
}
.btn .dots text{
  display: block;
  width: 16rpx;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8rpx;
  margin: 0 5rpx;
}
.btn .dots text.cur{
  background-color: rgba(255, 255, 255, 1);
  /*background: red;*/
}

.button{
	margin-top: 8rpx;
	height:60rpx;
	width:200rpx;
	text-align: center;
	line-height: 28px;
	border-radius: 0;
}
</style>