edit

App.vue

@@ -25,6 +25,7 @@ export default {
 	font-family: graceIconfont; 
 }
 /* #endif */
+@import './lib/dever/dever.css';
 page{background-color: #ECEEF7;}
 /* 重写showModal样式 */
 uni-modal .uni-modal__hd {padding:30rpx 0;}

pages.json

@@ -19,8 +19,17 @@
 					"navigationStyle": "custom"
 				}
 			}
-		}
-        
+		},
+        {
+            "path" : "pages/dream/view",
+            "style": {
+            	"app-plus": {
+            		"titleNView": false,
+            		"bounce": "none",
+            		"navigationStyle": "custom"
+            	}
+            }
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",

pages/dream/index.vue

@@ -1,26 +1,121 @@
 <template>
 	<gracePage :customHeader="false">
-		<!-- 页面主体 -->
-		<view slot="gBody" class="grace-body">
-			<cover-image class="controls-play img" :src="fetch.pic"></cover-image>
+		<view class="container" slot="gBody">
+			<swiper class="swiper" @change="change" :circular="swiper.circular">
+				<swiper-item v-for="(v, k) in fetch.items">
+					<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"></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 {
-			fetch : {
-				pic : 'https://7.jstyle.cn/1/2020/01/01/38e94379e868a6966d888e77e920e63f.jpg'
+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:{},
+		}
+	},
+	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: 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>

pages/dream/view.vue

@@ -0,0 +1,111 @@
+<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>

pages/dream/view/dreamView.vue

@@ -0,0 +1,23 @@
+<template name="dreamView">
+	<view v-if="item">
+		ttt
+	</view>
+</template>
+
+<script>
+export default {
+	name: "dreamView",
+	props: {
+		item : {
+			type    : Array,
+			default : function(){return new Array();}
+		},
+	},
+	methods:{
+		stopFun : function(){return false;}
+	}
+}
+</script>
+
+<style>
+</style>