1

App.vue

@@ -14,4 +14,9 @@
 
 <style>
 	/*每个页面公共css */
+.back-icon{
+	width: 27rpx;
+	height: 50rpx;
+	margin: 20rpx auto 0 49rpx;
+}
 </style>

main.js

@@ -5,6 +5,19 @@ import Vue from 'vue'
 import './uni.promisify.adaptor'
 Vue.config.productionTip = false
 App.mpType = 'app'
+
+
+Vue.prototype.goBack = function () {
+	getCurrentPages().length > 1 ? uni.navigateBack({}) : uni.navigateBack({delta:999})
+}
+Vue.prototype.concat = function () {
+	// let img = require("static/4/0_card.png")
+	// uni.previewImage({
+	// 	urls: [img],
+	// })
+}
+
+
 const app = new Vue({
   ...App
 })

pages.json

@@ -5,6 +5,18 @@
 			"style": {
 				"navigationBarTitleText": "uni-app"
 			}
+		},
+		{
+			"path": "pages/index/dongLing",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/shanJuan",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/dongLing.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="bg">
+		<image class="back-icon" src="/static/back.png" @click="goBack()"></image>
+		
+		<view class="content">
+			<image class="head-title" src="/static/4/head_title.png">
+			
+			<view class="line"></view>
+			
+			<view class="head-img-container">
+				<image :class="['head-img','head-img-'+i]" @click="changeCurrent(i)"
+				 v-for="(item,i) in 2" :key="i" :src="currentIndex==i?`/static/4/p${i}_active.png`:`/static/4/p${i}.png`" >
+			</view>
+			
+			<view class="line" style="background: #FCF1E6;margin-top: 24rpx;"></view>	
+		</view>
+			<view style="width: 100%;position: relative;">
+				<image class="card" src="/static/4/card.png" @click="viewCard()"></image>
+				
+				<image style="width: 100%;margin-top: 32rpx;" :src="`/static/4/${currentIndex}.png`" mode="widthFix"></image>
+				
+				<image class="concat" src="/static/3/concat.png" @click="concat()"></image>
+				
+				<view style="height: 150rpx;width: 100%;"></view>
+				
+			</view>
+			
+	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				headImgs: [],
+				currentIndex: 0
+			}
+		},
+		methods: {
+			changeCurrent (i) {
+				this.currentIndex = i
+			},
+			viewCard () {
+				let img0 = require("static/4/0_card.png")
+				let img1 = require("static/4/1_card.png")
+				let urls = [img0]
+				if (this.currentIndex == 1) {
+					urls = [img1]
+				}
+				uni.previewImage({
+					urls: urls,
+					fail: (res)=>{
+						console.log(res)
+					}
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	*{
+		box-sizing: border-box;
+	}
+	.bg{
+		width: 100%;
+		min-height: 100vh;
+		position: relative;
+		background: black;
+	}
+	.head-title{
+		width: 642rpx;
+		height: 74rpx;
+	}
+	.content{
+		width: 100%;
+		padding: 60rpx 60rpx 0;
+	}
+	.line{
+		width: 100%;
+		height: 2rpx;
+		background: #FCF1E6;
+		margin: 32rpx 0;
+	}
+	.head-img-container{
+		display: flex;
+		justify-content:space-between;
+		flex-wrap: wrap;
+		padding: 0 50rpx;
+		.head-img{
+			width: 178rpx;
+			height: 260rpx;
+			margin: 0 20rpx;
+			margin-bottom: 32rpx;
+		}
+	}
+	.concat{
+		width: 569rpx;
+		height: 74rpx;
+		display: block;
+		margin: 84rpx auto 0;
+	}
+	.card{
+		width: 117rpx;
+		height: 116rpx;
+		position: absolute;
+		top: 434rpx;
+		left: 59rpx;
+		z-index: 20;
+	}
+</style>

pages/index/shanJuan.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="bg">
+		<image class="back-icon" src="/static/back.png" @click="goBack()"></image>
+		
+		<view class="content">
+			<image class="head-title" src="/static/3/head_title.png">
+			
+			<view class="line"></view>
+			
+			<view class="head-img-container">
+				<image :class="['head-img','head-img-'+i]" @click="changeCurrent(i)"
+				 v-for="(item,i) in 7" :key="i" :src="currentIndex==i?`/static/3/head_${i}_active.png`:`/static/3/head_${i}.png`" >
+			</view>
+			
+			<view class="line" style="background: #FCF1E6;margin-top: 24rpx;"></view>
+			
+			<image style="width: 100%;margin-top: 32rpx;" :src="`/static/3/${currentIndex}.png`" mode="widthFix"></image>
+			
+			<image style="width: 100%;margin-top: 32rpx;" :src="`/static/3/${currentIndex}_content.png`" mode="widthFix"></image>
+		
+			<image class="concat" src="/static/3/concat.png" @click="concat()"></image>
+			
+			<view style="height: 450rpx;width: 100%;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				headImgs: [],
+				currentIndex: 0
+			}
+		},
+		methods: {
+			changeCurrent (i) {
+				this.currentIndex = i
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	*{
+		box-sizing: border-box;
+	}
+	.bg{
+		width: 100%;
+		min-height: 100vh;
+		position: relative;
+		background: black;
+	}
+	.head-title{
+		width: 329rpx;
+		height: 74rpx;
+	}
+	.content{
+		width: 100%;
+		padding: 60rpx;
+	}
+	.line{
+		width: 100%;
+		height: 2rpx;
+		background: #FCF1E6;
+		margin: 32rpx 0;
+	}
+	.head-img-container{
+		display: flex;
+		justify-content:space-between;
+		flex-wrap: wrap;
+		padding: 0 10rpx;
+		.head-img{
+			width: 106rpx;
+			height: 106rpx;
+			margin: 0 20rpx;
+			margin-bottom: 32rpx;
+		}
+		.head-img.head-img-0{
+			margin-left: 0;
+		}
+		.head-img.head-img-3{
+			margin-right: 0;
+		}
+		.head-img.head-img-4{
+			margin-left: 76rpx;
+		}
+		.head-img.head-img-6{
+			margin-right: 76rpx;
+		}
+	}
+	.concat{
+		width: 569rpx;
+		height: 74rpx;
+		display: block;
+		margin: 84rpx auto 0;
+	}
+</style>

uni.scss

@@ -73,4 +73,4 @@ $uni-font-size-title:20px;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-paragraph:15px;