dreamland/pages/dream/index.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" :key="k">
					<view class="default">
						<image :src="v.pic" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="btn">
				<view class='dots'>
					<text :class="swiper.index == k ? 'cur' : ''" v-for="(v, k) in fetch.items" :key="k"></text>
				</view>
				
				<view class="grace-flex-center">
					<button @click="view" type="default" class="grace-button button" :style="fetch.button.read.style">{{fetch.button.read.name}}</button>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/lib/graceUI/components/gracePage.vue";
export default{
	data() {
		return {
			swiper : {
				index : 0,
				circular : true,
			},
			fetch: {
				items : [
					{
						pic : 'https://7.jstyle.cn/1/2020/04/25/a69fdba6a0cba49d46cc07b8e269b546.jpg',
						url : '',
						title:"测试标题 001",
						opentype : 'navigate'
					},
					{
						pic : 'https://7.jstyle.cn/1/2020/04/25/224697c330eca688097b4d0e4189709e.jpg',
						url : '',
						title:"测试标题 02",
						opentype : 'navigate'
					},
				],
				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
	}
}
</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: 20rpx;
  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>