首页 发现 帮助
注册 登录
chenlei
/
ydd-quyuan-minapp
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

feat: --

chenlei 1 年之前
当前提交
b1965e16f6
共有 19 个文件被更改，包括 3013 次插入 和 0 次删除
分列视图 显示文件统计
  1. 4 0
      .gitignore
  2. 16 0
      .hbuilderx/launch.json
  3. 27 0
      App.vue
  4. 20 0
      index.html
  5. 26 0
      main.js
  6. 77 0
      manifest.json
  7. 28 0
      package-lock.json
  8. 14 0
      package.json
  9. 72 0
      pages.json
  10. 549 0
      pages/index/index.vue
  11. 513 0
      pages/shouyu/shouyu.vue
  12. 952 0
      pages/zhaomengfu/zhaomengfu.vue
  13. 99 0
      pages/zhongduxiu/zhongduxiu.vue
  14. 429 0
      pages/zhongduxiub/zhongduxiub.vue
  15. 二进制
      static/logo.png
  16. 76 0
      uni.scss
  17. 31 0
      utils/getTickImg.js
  18. 17 0
      utils/request.js
  19. 63 0
      utils/tickAnimeItem.js

+ 4 - 0
.gitignore
查看文件 

@@ -0,0 +1,4 @@
 
+unpackage/
 
+node_modules/
 
+.DS_Store
 
+yarn-error.log

+ 16 - 0
.hbuilderx/launch.json
查看文件 

@@ -0,0 +1,16 @@
 
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
 
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
 
+    "version": "0.0",
 
+    "configurations": [{
 
+     	"default" : 
+     	{
 
+     		"launchtype" : "local"
 
+     	},
 
+     	"mp-weixin" : 
+     	{
 
+     		"launchtype" : "local"
 
+     	},
 
+     	"type" : "uniCloud"
 
+     }
 
+    ]
 
+}

+ 27 - 0
App.vue
查看文件 

@@ -0,0 +1,27 @@
 
+<script>
 
+	export default {
 
+		onLaunch: function() {
 
+			console.log('App Launch')
 
+			// #ifdef MP-WEIXIN
 
+			uni.setInnerAudioOption({
 
+				obeyMuteSwitch: false,
 
+				success: function(res) {
 
+					console.log("开启静音模式下播放音乐的功能");
 
+				},
 
+				fail: function(err) {
 
+					console.log("静音设置失败",err);
 
+				}
 
+			});
 
+			// #endif
 
+		},
 
+		onShow: function() {
 
+			console.log('App Show')
 
+		},
 
+		onHide: function() {
 
+			console.log('App Hide')
 
+		}
 
+	}
 
+</script>
 
+
 
+<style>
 
+</style>

+ 20 - 0
index.html
查看文件 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <script>
 
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
 
+        CSS.supports('top: constant(a)'))
 
+      document.write(
 
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
 
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
 
+    </script>
 
+    <title></title>
 
+    <!--preload-links-->
 
+    <!--app-context-->
 
+  </head>
 
+  <body>
 
+    <div id="app"><!--app-html--></div>
 
+    <script type="module" src="/main.js"></script>
 
+  </body>
 
+</html>

+ 26 - 0
main.js
查看文件 

@@ -0,0 +1,26 @@
 
+import App from './App'
 
+
 
+// #ifndef VUE3
 
+import Vue from 'vue'
 
+Vue.config.productionTip = false
 
+Vue.prototype.$g={
 
+	baseUrl:"https://dadu.oss-cn-hangzhou.aliyuncs.com"
 
+}
 
+// baseUrl:"http://127.0.0.1:3000"
 
+// baseUrl:"https://dadu.ispush.com"
 
+App.mpType = 'app'
 
+const app = new Vue({
 
+    ...App
 
+})
 
+app.$mount()
 
+// #endif
 
+
 
+// #ifdef VUE3
 
+import { createSSRApp } from 'vue'
 
+export function createApp() {
 
+  const app = createSSRApp(App)
 
+  return {
 
+    app
 
+  }
 
+}
 
+// #endif

+ 77 - 0
manifest.json
查看文件 

@@ -0,0 +1,77 @@
 
+{
 
+    "name" : "app",
 
+    "appid" : "__UNI__0AAC76E",
 
+    "description" : "",
 
+    "versionName" : "1.0.0",
 
+    "versionCode" : "100",
 
+    "transformPx" : false,
 
+    /* 5+App特有相关 */
 
+    "app-plus" : {
 
+        "usingComponents" : true,
 
+        "nvueStyleCompiler" : "uni-app",
 
+        "compilerVersion" : 3,
 
+        "splashscreen" : {
 
+            "alwaysShowBeforeRender" : true,
 
+            "waiting" : true,
 
+            "autoclose" : true,
 
+            "delay" : 0
 
+        },
 
+        /* 模块配置 */
 
+        "modules" : {},
 
+        /* 应用发布信息 */
 
+        "distribute" : {
 
+            /* android打包配置 */
 
+            "android" : {
 
+                "permissions" : [
 
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
 
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
 
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
 
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
 
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
 
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
 
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
 
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
 
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
 
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
 
+                ]
 
+            },
 
+            /* ios打包配置 */
 
+            "ios" : {},
 
+            /* SDK配置 */
 
+            "sdkConfigs" : {}
 
+        }
 
+    },
 
+    /* 快应用特有相关 */
 
+    "quickapp" : {},
 
+    /* 小程序特有相关 */
 
+    "mp-weixin" : {
 
+        "appid" : "",
 
+        "setting" : {
 
+            "urlCheck" : false
 
+        },
 
+        "usingComponents" : true
 
+    },
 
+    "mp-alipay" : {
 
+        "usingComponents" : true
 
+    },
 
+    "mp-baidu" : {
 
+        "usingComponents" : true
 
+    },
 
+    "mp-toutiao" : {
 
+        "usingComponents" : true
 
+    },
 
+    "uniStatistics" : {
 
+        "enable" : false
 
+    },
 
+    "vueVersion" : "2",
 
+    "h5" : {
 
+        "router" : {
 
+            "base" : "./"
 
+        }
 
+    }
 
+}

+ 28 - 0
package-lock.json
查看文件 

@@ -0,0 +1,28 @@
 
+{
 
+  "name": "app",
 
+  "version": "1.0.0",
 
+  "lockfileVersion": 2,
 
+  "requires": true,
 
+  "packages": {
 
+    "": {
 
+      "name": "app",
 
+      "version": "1.0.0",
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "wxml2canvas": "^1.0.1"
 
+      }
 
+    },
 
+    "node_modules/wxml2canvas": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmmirror.com/wxml2canvas/-/wxml2canvas-1.0.1.tgz",
 
+      "integrity": "sha512-AdWvxgTjJtW/m6Cki1cwGO0HOERKU8O9V3RcCz8UyqJbrPF7e8Nv27/epYiIs64HlbPTKWTLl7ECjQi6UVducA=="
 
+    }
 
+  },
 
+  "dependencies": {
 
+    "wxml2canvas": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmmirror.com/wxml2canvas/-/wxml2canvas-1.0.1.tgz",
 
+      "integrity": "sha512-AdWvxgTjJtW/m6Cki1cwGO0HOERKU8O9V3RcCz8UyqJbrPF7e8Nv27/epYiIs64HlbPTKWTLl7ECjQi6UVducA=="
 
+    }
 
+  }
 
+}

+ 14 - 0
package.json
查看文件 

@@ -0,0 +1,14 @@
 
+{
 
+  "name": "app",
 
+  "version": "1.0.0",
 
+  "description": "",
 
+  "main": "main.js",
 
+  "scripts": {
 
+    "test": "echo \"Error: no test specified\" && exit 1"
 
+  },
 
+  "author": "",
 
+  "license": "ISC",
 
+  "dependencies": {
 
+    "wxml2canvas": "^1.0.1"
 
+  }
 
+}

+ 72 - 0
pages.json
查看文件 

@@ -0,0 +1,72 @@
 
+{
 
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 
+		{
 
+			"path": "pages/index/index",
 
+			"style": {
 
+				"navigationBarTitleText": "大行散乐忠都秀"
 
+			}
 
+		},
 
+		{
 
+			"path": "pages/zhaomengfu/zhaomengfu",
 
+			"style": {
 
+				"navigationBarTitleText": "运河上的赵孟頫" 
+			}
 
+		},
 
+		{
 
+			"path": "pages/zhongduxiu/zhongduxiu",
 
+			"style": {
 
+				"navigationBarTitleText": "大行散乐忠都秀" 
+			}
 
+		},
 
+		{
 
+			"path": "pages/shouyu/shouyu",
 
+			"style": {
 
+				"navigationBarTitleText": "手谕打卡留念" 
+			}
 
+		},
 
+		{
 
+			"path": "pages/zhongduxiub/zhongduxiub",
 
+			"style": {
 
+				"navigationBarTitleText": "大行散乐忠都秀" 
+			}
 
+		}
 
+	],
 
+	"globalStyle": {
 
+		"navigationBarTextStyle": "black",
 
+		"navigationBarTitleText": "uni-app",
 
+		"navigationBarBackgroundColor": "#F8F8F8",
 
+		"backgroundColor": "#F8F8F8",
 
+		"pageOrientation": "portrait"//portrait,landscape
 
+	},
 
+	"uniIdRouter": {},
 
+	"condition" : { //模式配置，仅开发期间生效
 
+		"current": 0, //当前激活的模式(list 的索引项)
 
+		"list": [
 
+			{
 
+				"name": "忠都秀", //模式名称
 
+				"path": "pages/index/index",  //启动页面，必选
 
+				"query": "" //启动参数，在页面的onLoad函数里面得到
 
+			},
 
+			{
 
+				"name": "赵孟頫", //模式名称
 
+				"path": "pages/zhaomengfu/zhaomengfu",  //启动页面，必选
 
+				"query": "" //启动参数，在页面的onLoad函数里面得到
 
+			},
 
+			{
 
+				"name": "忠都秀", //模式名称
 
+				"path": "pages/zhongduxiu/zhongduxiu",  //启动页面，必选
 
+				"query": "" //启动参数，在页面的onLoad函数里面得到
 
+			},
 
+			{
 
+				"name": "手谕", //模式名称
 
+				"path": "pages/shouyu/shouyu",  //启动页面，必选
 
+				"query": "" //启动参数，在页面的onLoad函数里面得到 
+			},
 
+			{
 
+				"name": "忠都秀2", //模式名称
 
+				"path": "pages/zhongduxiub/zhongduxiub",  //启动页面，必选
 
+				"query": "" //启动参数，在页面的onLoad函数里面得到
 
+			}
 
+		]
 
+	}
 
+}

+ 549 - 0
pages/index/index.vue
查看文件 

@@ -0,0 +1,549 @@
 
+<template>
 
+	<view class="container">
 
+		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
 
+			<view class="loadingBox" v-if="loadPointState">
 
+				<span class="span1"></span>
 
+				<span class="span2"></span>
 
+				<span class="span3"></span>
 
+				<span class="span4"></span>
 
+				<span class="span5"></span>
 
+				<span class="span6"></span>
 
+			</view>
 
+			<image class="loadingText" @load="loadImgEnd" :src="loadingText" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
 
+			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
 
+			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="videoContent">
 
+			<video id="myVideoBg" :src="videoBgPath" :loop="true" :controls="false" :muted="true" objectFit='cover'
 
+				:show-progress='false' :enable-progress-gesture='false' :show-play-btn='false'
 
+				:show-fullscreen-btn='false' @loadedmetadata="videoLoadingEnd"></video>
 
+		</view>
 
+		<view class="tips" v-show="tipsState">
 
+			<image :src="tips" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="imgLayer">
 
+			<view class="imgMask" v-if="imgShowIndex!='close'">
 
+			</view>
 
+			<view class="imgItem" v-for="(item,index) in personList" :key="item.name"
 
+				:style="{width:item.width,height:item.height,left:item.x,top:item.y}" v-show="imgShowIndex==item.name">
 
+				<image :src="item.url" mode="aspectFill"></image>
 
+			</view>
 
+		</view>
 
+		<view class="clickLayer">
 
+			<view class="clickItem clickItem1" @click="openImg('person1')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem2" @click="openImg('person2')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem3" @click="openImg('person3')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem4" @click="openImg('person4')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem5" @click="openImg('person5')">
 
+
 
+			</view>
 
+		</view>
 
+		<view class="textLayer">
 
+			<view class="textItem" v-for="(item,index) in textList" :key="item.name" v-show="imgShowIndex==item.name">
 
+				<image :src="item.url" mode="aspectFill"></image>
 
+			</view>
 
+		</view>
 
+		<view class="closeBtn" v-show="imgShowIndex!='close'" @click="closeContent">
 
+		</view>
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	export default {
 
+		data() {
 
+			return {
 
+				loadPointState: false,
 
+				logoImg: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/logo.png",
 
+				loadingState: true,
 
+				loadingOutAnime: false, //加载退场动画
 
+				videoCtx: "",
 
+				tipsState: true,
 
+				tips: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/tips.png",
 
+				audioImgA: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/audioOn.png",
 
+				audioImgB: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/audioOff.png",
 
+				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading.jpg",
 
+				audioUrl: "",
 
+				webUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/api/getHtml",
 
+				audioState: true,
 
+				innerAudioContext: "",
 
+				imgShowIndex: "close",
 
+				videoBgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/video/bg.mp4",
 
+				personList: [{
 
+						"name": "person1",
 
+						"width": "180rpx",
 
+						"height": "461rpx",
 
+						"x": "-10rpx",
 
+						"y": "980rpx",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/1.png"
 
+					},
 
+					{
 
+						"name": "person2",
 
+						"width": "192rpx",
 
+						"height": "466rpx",
 
+						"x": "130rpx",
 
+						"y": "980rpx",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/2.png"
 
+					},
 
+					{
 
+						"name": "person3",
 
+						"width": "246rpx",
 
+						"height": "474rpx",
 
+						"x": "278rpx",
 
+						"y": "950rpx",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/3.png"
 
+					},
 
+					{
 
+						"name": "person4",
 
+						"width": "179rpx",
 
+						"height": "466rpx",
 
+						"x": "485rpx",
 
+						"y": "972rpx",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/4.png"
 
+					},
 
+					{
 
+						"name": "person5",
 
+						"width": "148rpx",
 
+						"height": "458rpx",
 
+						"x": "610rpx",
 
+						"y": "980rpx",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/5.png"
 
+					}
 
+				],
 
+				textList: [{
 
+						"name": "person1",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text1A.png"
 
+					},
 
+					{
 
+						"name": "person2",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text2A.png"
 
+					},
 
+					{
 
+						"name": "person3",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text3A.png"
 
+					},
 
+					{
 
+						"name": "person4",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text4A.png"
 
+					},
 
+					{
 
+						"name": "person5",
 
+						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text5A.png"
 
+					}
 
+				]
 
+			}
 
+		},
 
+		methods: {
 
+			loadImgEnd(e) {
 
+				this.loadPointState = true
 
+			},
 
+			createAudio() {
 
+				this.innerAudioContext = uni.createInnerAudioContext()
 
+				this.innerAudioContext.loop = true
 
+				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhongduxiu/audio/audio.mp3`
 
+				this.innerAudioContext.play()
 
+			},
 
+			changeAudio() {
 
+				if (this.audioState) {
 
+					this.innerAudioContext.pause()
 
+				} else {
 
+					this.innerAudioContext.play()
 
+				}
 
+				this.audioState = !this.audioState
 
+			},
 
+			videoLoadingEnd() {
 
+				this.loadingOutAnime = true
 
+				this.videoCtx.play()
 
+				let t = setTimeout(() => {
 
+					this.loadingState = false
 
+					clearTimeout(t)
 
+				}, 600)
 
+			},
 
+			openImg(index) {
 
+				this.imgShowIndex = index
 
+				this.tipsState = false
 
+			},
 
+			closeContent() {
 
+				this.imgShowIndex = 'close'
 
+			}
 
+		},
 
+		onLoad() {
 
+			// #ifdef MP-WEIXIN
 
+			uni.hideHomeButton()
 
+			// #endif
 
+			this.videoCtx = uni.createVideoContext('myVideoBg')
 
+			this.createAudio()
 
+		},
 
+		onHide() {
 
+			this.audioState = false
 
+		},
 
+		onShow() {
 
+			this.audioState = true
 
+			if (this.innerAudioContext) {
 
+				this.innerAudioContext.play()
 
+			}
 
+
 
+		},
 
+		onUnload() {
 
+			this.innerAudioContext.stop()
 
+			this.innerAudioContext.destroy()
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped>
 
+	.container {
 
+		position: relative;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		overflow: hidden;
 
+	}
 
+
 
+	@media screen and (max-height: 750px) {
 
+		.container {
 
+			overflow: visible !important;
 
+		}
 
+
 
+		.container .tips {
 
+			top: 1300rpx;
 
+		}
 
+	}
 
+
 
+	.container .loading {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		z-index: 9999999;
 
+		background: #4c4c4c;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+
 
+	.container .loading .loadingBox {
 
+		position: absolute;
 
+		width: 105rpx;
 
+		height: 41rpx;
 
+		display: flex;
 
+		top: 345rpx;
 
+		left: 459rpx;
 
+		z-index: 1;
 
+		opacity: 0;
 
+		justify-content: space-around;
 
+		align-items: center;
 
+		animation: 0.8s loadingBoxAnime 0.5s linear forwards;
 
+	}
 
+
 
+	@keyframes loadingBoxAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .loading .loadingBox span {
 
+		width: 8rpx;
 
+		height: 8rpx;
 
+		background: #c8841a;
 
+		border-radius: 50%;
 
+	}
 
+
 
+	.container .loading .loadingBox .span1 {
 
+		animation: 0.8s spanAnime 0.2s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span2 {
 
+		animation: 0.8s spanAnime 0.4s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span3 {
 
+		animation: 0.8s spanAnime 0.6s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span4 {
 
+		animation: 0.8s spanAnime 0.8s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span5 {
 
+		animation: 0.8s spanAnime 1s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span6 {
 
+		animation: 0.8s spanAnime 1.2s alternate infinite;
 
+	}
 
+
 
+	@keyframes spanAnime {
 
+		from {
 
+			transform: scale(1.5);
 
+		}
 
+
 
+		to {
 
+			transform: scale(0.7);
 
+		}
 
+	}
 
+
 
+
 
+	.container .loading .loadingBox .loadingRotate {
 
+		animation: 1s loadingRotateAnime linear infinite;
 
+	}
 
+
 
+	.container .loading .loadingText {
 
+		position: absolute;
 
+		top: 0%;
 
+		left: 0%;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		will-change: transform;
 
+	}
 
+
 
+	@keyframes loadingRotateAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.container .loadingOut {
 
+		animation: 1s loadingOutAnime linear forwards;
 
+	}
 
+
 
+	@keyframes loadingOutAnime {
 
+		from {
 
+			opacity: 1;
 
+		}
 
+
 
+		to {
 
+			opacity: 0;
 
+		}
 
+	}
 
+
 
+	.container .tips {
 
+		position: absolute;
 
+		width: 750rpx;
 
+		height: 318rpx;
 
+		/* top: 1300rpx; */
 
+		bottom: 0;
 
+		left: 0;
 
+		opacity: 0;
 
+		animation: 3s tipsAnime 1s linear alternate infinite;
 
+	}
 
+
 
+	.container .tips image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	@keyframes tipsAnime {
 
+		from {
 
+			opacity: 0.5;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+
 
+	.container .changeAudio {
 
+		position: absolute;
 
+		right: 45rpx;
 
+		top: 45rpx;
 
+		width: 47rpx;
 
+		height: 47rpx;
 
+		z-index: 999999;
 
+	}
 
+
 
+	.container .changeAudio image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .changeAudioPlay {
 
+		animation: 1s changeAudioAnime linear infinite;
 
+	}
 
+
 
+	@keyframes changeAudioAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.videoContent {
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+	}
 
+
 
+	.videoContent video {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.imgLayer {
 
+		width: 100vw;
 
+		height: 100vh;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		z-index: 99;
 
+	}
 
+
 
+	.imgLayer .imgMask {
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		background: rgba(0, 0, 0, 0.6);
 
+		opacity: 0;
 
+		animation: 1s imgMaskAnime linear forwards;
 
+	}
 
+
 
+	@keyframes imgMaskAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.imgLayer .imgItem {
 
+		position: absolute;
 
+		animation: 0.5s imgItemAnime linear forwards;
 
+	}
 
+
 
+	@keyframes imgItemAnime {
 
+		from {
 
+			transform: scale(1);
 
+		}
 
+
 
+		to {
 
+			transform: scale(1.05);
 
+		}
 
+	}
 
+
 
+	.imgLayer .imgItem image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.clickLayer {
 
+		width: 100vw;
 
+		height: 100vh;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		z-index: 99999;
 
+	}
 
+
 
+	.clickLayer .clickItem {
 
+		width: 200rpx;
 
+		height: 150rpx;
 
+		position: absolute;
 
+		/* 		background: pink; */
 
+		z-index: 9999;
 
+	}
 
+
 
+	.clickLayer .clickItem1 {
 
+		width: 150rpx;
 
+		height: 460rpx;
 
+		left: 0rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem2 {
 
+		width: 160rpx;
 
+		height: 460rpx;
 
+		left: 152rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem3 {
 
+		width: 170rpx;
 
+		height: 460rpx;
 
+		left: 315rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem4 {
 
+		width: 140rpx;
 
+		height: 460rpx;
 
+		left: 486rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem5 {
 
+		width: 123rpx;
 
+		height: 460rpx;
 
+		left: 628rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.textLayer {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		z-index: 999;
 
+	}
 
+
 
+	.textLayer .textItem {
 
+		position: absolute;
 
+		width: 643rpx;
 
+		height: 372rpx;
 
+		top: 525rpx;
 
+		left: 50%;
 
+		opacity: 0;
 
+		transform: translateX(-50%);
 
+		animation: 0.5s textItemAnime 1s linear forwards;
 
+	}
 
+
 
+	@keyframes textItemAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.textLayer .textItem image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.closeBtn {
 
+		position: absolute;
 
+		z-index: 99999;
 
+		top: 525rpx;
 
+		left: 635rpx;
 
+		width: 60rpx;
 
+		height: 60rpx;
 
+		opacity: 0;
 
+		animation: 0.5s textItemAnime linear 1s forwards;
 
+	}
 
+</style>

+ 513 - 0
pages/shouyu/shouyu.vue
查看文件 

@@ -0,0 +1,513 @@
 
+<template>
 
+	<view class="container">
 
+		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
 
+			<view class="loadingBox" v-if="loadPointState">
 
+				<span class="span1"></span>
 
+				<span class="span2"></span>
 
+				<span class="span3"></span>
 
+				<span class="span4"></span>
 
+				<span class="span5"></span>
 
+				<span class="span6"></span>
 
+			</view>
 
+			<image class="loadingText" @load="loadImgEnd" :src="loadingText" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
 
+			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
 
+			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="imgLayer" v-show="openControlState">
 
+			<view class="imgLayerContent">
 
+				<image :src="imgPath" show-menu-by-longpress='1' mode="widthFix"></image>
 
+			</view>
 
+			<view class="imgLayerTips">
 
+				<image :src="tipsImgPath" mode="aspectFill"></image>
 
+			</view>
 
+		</view>
 
+		<view class="videoLayer" v-show="!openControlState">
 
+			<view class="videoContent">
 
+				<video id="myVideoBg" :src="videoBgPath" :controls="false" :muted="true" objectFit='cover'
 
+					:show-progress='false' :enable-progress-gesture='false' :show-play-btn='false'
 
+					:show-fullscreen-btn='false' @loadedmetadata="videoLoadingEnd"></video>
 
+			</view>
 
+			<view class="addText">
 
+				<input type="text" class="inputLabel" v-model="inputText" @input="inputChange">
 
+			</view>
 
+			<view class="viewSpan span1">{{inputText[0]}}</view>
 
+			<view class="viewSpan span2">{{inputText[1]}}</view>
 
+			<view class="viewSpan span3">{{inputText[2]}}</view>
 
+			<view class="viewSpan span4">{{inputText[3]}}</view>
 
+			<view class="viewSpan submit" @click="submitText">
 
+			</view>
 
+		</view>
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	import request from "@/utils/request.js"
 
+	export default {
 
+		data() {
 
+			return {
 
+				loadPointState:false,
 
+				audioImgA: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/audioOn.png",
 
+				audioImgB: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/audioOff.png",
 
+				audioState: true,
 
+				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading.jpg",
 
+				loadingState: true, //当前加载状态
 
+				loadingOutAnime: false, //加载退场动画
 
+				tipsImgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/tips.png", //用来提示的文字
 
+				openid: "",
 
+				personCount: "", //当前是第几个访问
 
+				imgPath: "", //已经打开的图片数据
 
+				openControlState: false, //是否进行添加还是直接展示
 
+				videoBgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/bg2.mp4",
 
+				videoCtx: "",
 
+				inputText: "",
 
+			}
 
+		},
 
+		methods: {
 
+			login() {
 
+				uni.login({
 
+					provider: 'weixin', //使用微信登录
 
+					success: async (loginRes) => {
 
+						let res = await request({
 
+							url: "/api/login",
 
+							method: "GET",
 
+							data: {
 
+								code: loginRes.code
 
+							},
 
+						})
 
+						if (res.data.changeState != undefined) {
 
+							this.openControlState = true
 
+							this.loadingOutAnime = true
 
+							let lT = setTimeout(()=>{
 
+								this.loadingState = false
 
+							},2000)
 
+							this.imgPath = `https://dadu.ispush.com/${res.data.imgPath}?t=${new Date().getTime()}`
 
+						} else {
 
+							this.personCount = res.data.person_index + 1
 
+
 
+						}
 
+						this.openid = res.data.openid
 
+					}
 
+				});
 
+			},
 
+			loadImgEnd(e){
 
+				this.loadPointState = true
 
+			},
 
+			videoLoadingEnd(ev) {
 
+				let t1 = setTimeout(() => {
 
+					this.loadingOutAnime = true
 
+					this.videoCtx.play()
 
+				}, 1000)
 
+				let t2 = setTimeout(() => {
 
+					this.loadingState = false
 
+					clearTimeout(t2)
 
+				}, 2500)
 
+
 
+			},
 
+			createAudio() {
 
+				this.innerAudioContext = uni.createInnerAudioContext()
 
+				this.innerAudioContext.loop = true
 
+				this.innerAudioContext.src = `${this.$g.baseUrl}/static/shouyu/audio.mp3`
 
+			},
 
+			changeAudio() {
 
+				if (this.audioState) {
 
+					this.innerAudioContext.pause()
 
+				} else {
 
+					this.innerAudioContext.play()
 
+				}
 
+				this.audioState = !this.audioState
 
+			},
 
+			inputChange() {
 
+				if (this.inputText.length > 4) {
 
+					this.inputText = ""
 
+					uni.showToast({
 
+						title: '最多录入四个字',
 
+						duration: 2000
 
+					});
 
+				}
 
+			},
 
+			isChn(str) {
 
+				var reg = /^[\u4E00-\u9FA5]+$/;
 
+				if (!reg.test(str)) {
 
+					return false;
 
+				} else {
 
+					return true;
 
+				}
 
+			},
 
+			async submitText() {
 
+				if (this.inputText.length == 1) {
 
+					this.inputText = ""
 
+					uni.showToast({
 
+						title: '至少录入两个字',
 
+						duration: 2000
 
+					});
 
+					return
 
+				}
 
+				if (this.inputText[0] == "" && this.inputText[1] == "") {
 
+					uni.showToast({
 
+						title: '不能录入空字符',
 
+						duration: 2000
 
+					});
 
+				}
 
+				let isCh = this.isChn(this.inputText)
 
+				if (!isCh) {
 
+					this.inputText = ""
 
+					uni.showToast({
 
+						title: '只能输入中文字符',
 
+						duration: 2000
 
+					});
 
+					return
 
+				}
 
+				uni.showLoading({
 
+					title: '生成中'
 
+				});
 
+				let res = await request({
 
+					url: "/api/createImg",
 
+					method: "GET",
 
+					data: {
 
+						"openid": this.openid,
 
+						"text": this.inputText,
 
+						"count": Number(this.personCount)
 
+					},
 
+				})
 
+				if (res.data.createState != true) {
 
+					uni.showToast({
 
+						title: '网络延迟请重试',
 
+						duration: 2000
 
+					});
 
+					uni.hideLoading();
 
+					return
 
+				}
 
+				uni.hideLoading();
 
+				this.openControlState = true
 
+				this.imgPath = `https://dadu.ispush.com/${res.data.imgPath}?t=${new Date().getTime()}`
 
+			}
 
+		},
 
+		onReady() {
 
+			this.videoCtx = uni.createVideoContext('myVideoBg')
 
+		},
 
+		onLoad() {
 
+			uni.hideHomeButton()
 
+			this.createAudio()
 
+			this.login()
 
+		},
 
+		onHide() {
 
+			this.audioState = false
 
+			this.innerAudioContext.pause()
 
+		},
 
+		onShow() {
 
+			this.audioState = true
 
+			if (this.innerAudioContext) {
 
+				this.innerAudioContext.play() 
+			}
 
+		},
 
+		onUnload() {
 
+			this.innerAudioContext.stop()
 
+			this.innerAudioContext.destroy()
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped>
 
+	.container {
 
+		position: relative;
 
+		width: 100vw;
 
+		height: 100vh;
 
+	}
 
+
 
+	.container .loading {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		z-index: 999999;
 
+		background: #4c4c4c;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+
 
+	.container .loading .loadingBox {
 
+		position: absolute;
 
+		width: 105rpx;
 
+		height: 41rpx;
 
+		display: flex;
 
+		top: 345rpx;
 
+		left: 459rpx;
 
+		z-index: 1;
 
+		opacity: 0;
 
+		justify-content: space-around;
 
+		align-items: center;
 
+		animation: 0.8s loadingBoxAnime 0.5s linear forwards;
 
+	}
 
+	@keyframes loadingBoxAnime{
 
+		from{opacity: 0;}
 
+		to{opacity: 1;}
 
+	}
 
+
 
+	.container .loading .loadingBox span {
 
+		width: 8rpx;
 
+		height: 8rpx;
 
+		background: #c8841a;
 
+		border-radius: 50%;
 
+	}
 
+
 
+	.container .loading .loadingBox .span1 {
 
+		animation: 0.8s spanAnime 0.2s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span2 {
 
+		animation: 0.8s spanAnime 0.4s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span3 {
 
+		animation: 0.8s spanAnime 0.6s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span4 {
 
+		animation: 0.8s spanAnime 0.8s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span5 {
 
+		animation: 0.8s spanAnime 1s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span6 {
 
+		animation: 0.8s spanAnime 1.2s alternate infinite;
 
+	}
 
+
 
+	@keyframes spanAnime {
 
+		from {
 
+			transform: scale(1.5);
 
+		}
 
+
 
+		to {
 
+			transform: scale(0.7);
 
+		}
 
+	}
 
+
 
+	.container .loading .loadingBox .loadingRotate {
 
+		animation: 1s loadingRotateAnime linear infinite;
 
+	}
 
+
 
+	.container .loading .loadingText {
 
+		position: absolute;
 
+		top: 0%;
 
+		left: 0%;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		will-change: transform;
 
+	}
 
+
 
+	@keyframes loadingRotateAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.container .loadingOut {
 
+		animation: 1s loadingOutAnime 1s linear forwards;
 
+	}
 
+
 
+	@keyframes loadingOutAnime {
 
+		from {
 
+			opacity: 1;
 
+		}
 
+
 
+		to {
 
+			opacity: 0;
 
+		}
 
+	}
 
+
 
+	.container .changeAudio {
 
+		position: absolute;
 
+		right: 55rpx;
 
+		top: 55rpx;
 
+		width: 47rpx;
 
+		height: 47rpx;
 
+		z-index: 9999;
 
+	}
 
+
 
+	.container .changeAudio image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .changeAudioPlay {
 
+		animation: 1s changeAudioAnime linear infinite;
 
+	}
 
+
 
+	@keyframes changeAudioAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.container .imgLayer {
 
+		position: absolute;
 
+		z-index: 999;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		left: 0;
 
+		top: 0;
 
+		animation: 1s imgLayerAnime linear forwards;
 
+	}
 
+
 
+	@keyframes imgLayerAnime {
 
+		from {
 
+			opacity: 0;
 
+			transform: scale(1.1);
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+			transform: scale(1);
 
+		}
 
+	}
 
+
 
+	.container .imgLayer .imgLayerContent {
 
+		position: absolute;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		left: 0;
 
+		top: 0;
 
+	}
 
+
 
+	.container .imgLayer .imgLayerContent image {
 
+		width: 100%;
 
+		height: 100%;
 
+		will-change: transform;
 
+	}
 
+
 
+	.container .imgLayer .imgLayerTips {
 
+		position: absolute;
 
+		left: 390rpx;
 
+		top: 1220rpx;
 
+		width: 323rpx;
 
+		height: 27rpx;
 
+		z-index: 99;
 
+		transform: translateX(-50%);
 
+		animation: 1s imgLayerTipsAnime linear alternate infinite;
 
+		pointer-events: none;
 
+	}
 
+
 
+	/* @media screen and (max-height: 1400px) {
 
+		.container .imgLayer .imgLayerTips {
 
+			top: 85%;
 
+		}
 
+	} */
 
+
 
+	.container .imgLayer .imgLayerTips image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	@keyframes imgLayerTipsAnime {
 
+		from {
 
+			opacity: 0.5;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .videoLayer {
 
+		position: absolute;
 
+		z-index: 999;
 
+		left: 0;
 
+		top: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+	}
 
+
 
+	.container .videoLayer .videoContent {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+	}
 
+
 
+	.container .videoLayer .videoContent video {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .videoLayer .addText {
 
+		position: absolute;
 
+		left: 320rpx;
 
+		top: 415rpx;
 
+		width: 155rpx;
 
+		height: 695rpx;
 
+		font-size: 120rpx;
 
+		display: flex;
 
+		flex-direction: column;
 
+		justify-content: start;
 
+		box-sizing: border-box;
 
+		z-index: 9999;
 
+	}
 
+
 
+	.container .videoLayer .addText .inputLabel {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 0;
 
+		width: 155rpx;
 
+		height: 695rpx;
 
+		opacity: 0;
 
+		color: rgba(0, 0, 0, 0);
 
+	}
 
+
 
+	.container .videoLayer .addText .inputLabel input:focus {
 
+		border-color: transparent;
 
+		/* 将边框颜色设置为透明 */
 
+		background-color: #fff;
 
+		/* 将背景色设置为白色 */
 
+		caret-color: transparent;
 
+	}
 
+
 
+	.container .videoLayer .viewSpan {
 
+		position: absolute;
 
+		width: 155rpx;
 
+		height: 155rpx;
 
+		left: 318rpx;
 
+		font-size: 120rpx;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+
 
+	.container .videoLayer .span1 {
 
+		top: 410rpx;
 
+	}
 
+
 
+	.container .videoLayer .span2 {
 
+		top: 590rpx;
 
+	}
 
+
 
+	.container .videoLayer .span3 {
 
+		top: 770rpx;
 
+	}
 
+
 
+	.container .videoLayer .span4 {
 
+		top: 950rpx;
 
+	}
 
+
 
+	.container .videoLayer .submit {
 
+		position: absolute;
 
+		left: 520rpx;
 
+		top: 930rpx;
 
+		width: 80rpx;
 
+		height: 170rpx;
 
+	}
 
+</style>

+ 952 - 0
pages/zhaomengfu/zhaomengfu.vue
查看文件 

@@ -0,0 +1,952 @@
 
+<template>
 
+	<view class="container">
 
+		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
 
+			<view class="loadingBox" v-if="loadPointState">
 
+				<span class="span1"></span>
 
+				<span class="span2"></span>
 
+				<span class="span3"></span>
 
+				<span class="span4"></span>
 
+				<span class="span5"></span>
 
+				<span class="span6"></span>
 
+			</view>
 
+			<image class="loadingText" @load="loadImgEnd" :src="loadingText" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="yunBg" :class="[yunBgState?'yunBgOut':'']" v-if="yunShowState">
 
+			<video id="videoYunDom" :src="yunVideoPath" :loop="false" :controls="false" :muted="true" objectFit='cover'
 
+				:show-progress='false' :custom-cache="false" :enable-progress-gesture='false' :show-play-btn='false'
 
+				:show-fullscreen-btn='false' @loadedmetadata="videoYunLoadingEnd"></video>
 
+		</view>
 
+		<view class="containerBg" @touchmove="touchStart">
 
+			<video id="videoBgDom" :src="bgVideoPath" :loop="true" :controls="false" :muted="true" objectFit='cover'
 
+				:show-progress='false' :custom-cache="false" :enable-progress-gesture='false' :show-play-btn='false'
 
+				:show-fullscreen-btn='false' @loadedmetadata="videoBgLoadingEnd"></video>
 
+
 
+			<view class="point" v-if="pointShow" v-for="(item,index) in pointList" :key="item.title"
 
+				:style="{width:item.width,height:item.height,left:item.left,top:item.top}"
 
+				@click="pointClick(item,index)">
 
+				<image v-show="!item.showState" class="pointImg" :src="item.img" mode="aspectFill"></image>
 
+				<image v-show="item.showState" class="pointImgA" :src="item.imgA" mode="aspectFill"></image>
 
+			</view>
 
+			<view class="openBook" @click="clickOpenBook">
 
+				<image :src="bookUrl" mode="aspectFit"></image>
 
+			</view>
 
+			<view class="bookPlane" v-show="bookOpenState">
 
+				<view class="bookClose" @click="clickCloseBook">
 
+					<image :src="bookCloseUrl" mode="aspectFit"></image>
 
+				</view>
 
+				<!-- 书页 -->
 
+				<view class="swiperContent">
 
+					<view class="uni-margin-wrap">
 
+						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
 
+							:interval="interval" :duration="duration">
 
+							<swiper-item>
 
+								<view class="swiper-itemA uni-bg-red">
 
+									<image :src="'https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/pic'+0+'.png'"
 
+										mode="aspectFill"></image>
 
+								</view>
 
+							</swiper-item>
 
+							<swiper-item v-for="(item,index) in swiperList" :key="item">
 
+								<view class="swiper-item uni-bg-red">
 
+									<image :src="'https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/pic'+(item+1)+'.png'"
 
+										mode="aspectFill"></image>
 
+								</view>
 
+							</swiper-item>
 
+						</swiper>
 
+					</view>
 
+				</view>
 
+			</view>
 
+			<view class="animeBox" :style="{left:animeLine[animeIndex].x,top:animeLine[animeIndex].y}">
 
+				<image :src="shipImg" alt=""></image>
 
+			</view>
 
+		</view>
 
+		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
 
+			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
 
+			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="content" v-show="contentOpenState">
 
+			<view class="videoLayer" v-if="openType=='video'">
 
+			
+				<view class="videoCloseTips">
 
+					<image :src="videoCloseTips" mode="aspectFit"></image>
 
+				</view>
 
+			</view>
 
+			<view class="videoBox" :class="[openType=='video'?'videoShow':'videoNone']">
 
+				<view class="closeVideoLayer" @click="closeContent"></view>
 
+				<view class="videoBorder">
 
+					<view class="videoTitle">
 
+						<image :src="videoTitle" mode="aspectFit"></image>
 
+					</view>
 
+					<video id="videoDom" :src="videoPath" :controls="true" :play-strategy="0" :autoplay="false"
 
+						:custom-cache="false" objectFit="fill" :show-progress='true' enable-progress-gesture='false'
 
+						:direction="90" :show-fullscreen-btn="true" :show-loading="true" :show-play-btn='false'
 
+						@play="videoPlay" @error="videoPlayErr"></video>
 
+				</view>
 
+			</view>
 
+			<view class="imageBox" v-if="openType=='image'">
 
+				<view class="textBox">
 
+					<view class="closeImgContent" @click="closeImgContentFn"></view>
 
+					<image :src="textImg" mode="aspectFit"></image>
 
+				</view>
 
+			</view>
 
+		</view>
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	import request from "@/utils/request.js"
 
+	export default {
 
+		data() {
 
+			return {
 
+				loadPointState: false,
 
+				loadingState: true,
 
+				loadingOutAnime: false, //加载退场动画
 
+				loadingCount: 0,
 
+				bookOpenState: false,
 
+				bookUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/book.png",
 
+				bookCloseUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/bookClose.png",
 
+				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading2.jpg",
 
+				baseUrl: "",
 
+				bgVideoPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/zmfbg.mp4",
 
+				videoTitle: "",
 
+				textImg: "",
 
+				yunBgState: false,
 
+				yunShowState: true,
 
+				yunVideoPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/zmfyun.mp4",
 
+				audioImgA: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/audioOn.png",
 
+				audioImgB: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/audioOff.png",
 
+				currentIndex: 0, //当前被点击的动画索引
 
+				animeIndex: 0, //当前动画播放的位置
 
+				audioState: true,
 
+				clickState: true, //控制动画结束才能在点击
 
+				videoContext: "", //视频组件
 
+				videoPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11.mp4",
 
+				videoYunDomCtx: "",
 
+				videoBgCtx: "",
 
+				pointShow: false,
 
+				contentOpenState: false, //内容打开状态
 
+				openType: "video", //打开的类型
 
+				btnClickIndex: 0, //被点击按钮的下标
 
+				shipImg: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/ship.png",
 
+				videoCloseTips: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/videoCloseTips.png",
 
+				pointList: [{
 
+						"title": "1",
 
+						"width": "234rpx",
 
+						"height": "190rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/01C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/01D.png",
 
+						"left": "90rpx",
 
+						"top": "268rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/01.mp4",
 
+						"type": "video",
 
+						"index": 600
 
+					},
 
+					{
 
+						"title": "2",
 
+						"width": "119rpx",
 
+						"height": "140rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/02C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/02D.png",
 
+						"left": "72rpx",
 
+						"top": "536rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/02.mp4",
 
+						"type": "video",
 
+						"index": 440
 
+					},
 
+					{
 
+						"title": "3",
 
+						"width": "34rpx",
 
+						"height": "90rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/03C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/03D.png",
 
+						"left": "269rpx",
 
+						"top": "590rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text03.png",
 
+						"type": "image",
 
+						"index": 420
 
+					},
 
+					{
 
+						"title": "4",
 
+						"width": "110rpx",
 
+						"height": "124rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/04C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/04D.png",
 
+						"left": "139rpx",
 
+						"top": "719rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/04.mp4",
 
+						"type": "video",
 
+						"index": 360
 
+					},
 
+					{
 
+						"title": "5",
 
+						"width": "113rpx",
 
+						"height": "94rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/05C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/05D.png",
 
+						"left": "200rpx",
 
+						"top": "837rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text05.png",
 
+						"type": "image",
 
+						"index": 295
 
+					},
 
+					{
 
+						"title": "6",
 
+						"width": "114rpx",
 
+						"height": "105rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/06C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/06D.png",
 
+						"left": "379rpx",
 
+						"top": "791rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text06.png",
 
+						"type": "image",
 
+						"index": 295
 
+					},
 
+					{
 
+						"title": "7",
 
+						"width": "131rpx",
 
+						"height": "109rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/07C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/07D.png",
 
+						"left": "531rpx",
 
+						"top": "955rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text07.png",
 
+						"type": "image",
 
+						"index": 130
 
+					},
 
+					{
 
+						"title": "8",
 
+						"width": "105rpx",
 
+						"height": "90rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/08C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/08D.png",
 
+						"left": "399rpx",
 
+						"top": "1048rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/08.mp4",
 
+						"type": "video",
 
+						"index": 100
 
+					},
 
+					{
 
+						"title": "9",
 
+						"width": "125rpx",
 
+						"height": "99rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/09C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/09D.png",
 
+						"left": "292rpx",
 
+						"top": "930rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text09.png",
 
+						"type": "image",
 
+						"index": 200
 
+					},
 
+					{
 
+						"title": "10",
 
+						"width": "115rpx",
 
+						"height": "133rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/10C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/10D.png",
 
+						"left": "602rpx",
 
+						"top": "1068rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/10.mp4",
 
+						"type": "video",
 
+						"index": 40
 
+					},
 
+					{
 
+						"title": "11",
 
+						"width": "147rpx",
 
+						"height": "139rpx",
 
+						"showState": false,
 
+						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11C.png",
 
+						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11D.png",
 
+						"left": "498rpx",
 
+						"top": "1285rpx",
 
+						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11.mp4",
 
+						"type": "video",
 
+						"index": 0
 
+					}
 
+				],
 
+				animeLine: [],
 
+				T: "", //当前定时器
 
+				aI: 0, //动画帧索引
 
+				animeState: false, //是否进行动画
 
+				animeStart: 0, //当前动画开始的数组下标
 
+				animeEnd: 0, //当前动画结束的数组下标
 
+				animeDirection: 1,
 
+				saveAnime: [],
 
+				indicatorDots: true,
 
+				autoplay: true,
 
+				interval: 2000,
 
+				duration: 500,
 
+				swiperList: 9,
 
+			}
 
+		},
 
+		methods: {
 
+			async initData() {
 
+				this.baseUrl = this.$g.baseUrl
 
+				this.audioImg = `${this.$g.baseUrl}/static/zhaomengfu/audio.png`
 
+				this.videoContext = uni.createVideoContext('videoDom', this)
 
+				this.videoYunDomCtx = uni.createVideoContext('videoYunDom', this)
 
+				this.videoBgCtx = uni.createVideoContext('videoBgDom', this)
 
+				let res = await request({
 
+					url: "/api/getAnimeLine",
 
+					method: "GET",
 
+					data: {
 
+						code: "getAnime"
 
+					},
 
+				})
 
+				this.animeLine = res.data.data
 
+			},
 
+			loadImgEnd(e) {
 
+				this.loadPointState = true
 
+			},
 
+			clickOpenBook() {
 
+				this.bookOpenState = true
 
+			},
 
+			clickCloseBook() {
 
+				this.bookOpenState = false
 
+			},
 
+			closeContent() {
 
+				this.audioState = true
 
+				this.innerAudioContext.play()
 
+				this.videoContext.stop()
 
+				this.videoPath = ""
 
+				this.contentOpenState = false
 
+			},
 
+			closeImgContentFn() {
 
+				this.contentOpenState = false
 
+			},
 
+			createAudio() {
 
+				this.innerAudioContext = uni.createInnerAudioContext()
 
+				this.innerAudioContext.loop = true
 
+				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhaomengfu/audio.mp3`
 
+			},
 
+			changeAudio() {
 
+				if (this.audioState) {
 
+					this.innerAudioContext.pause()
 
+					// console.log(JSON.stringify(this.saveAnime))
 
+				} else {
 
+					this.innerAudioContext.play()
 
+				}
 
+				this.audioState = !this.audioState
 
+			},
 
+			videoYunLoadingEnd() {
 
+				this.loadingCount++
 
+				if (this.loadingCount == 2) {
 
+					this.yunAnimeStart()
 
+				}
 
+			},
 
+			yunAnimeStart() {
 
+				this.loadingOutAnime = true
 
+				let tX = setTimeout(() => {
 
+					this.loadingState = false
 
+					this.videoYunDomCtx.play()
 
+					this.yunBgState = true
 
+					clearTimeout(tX)
 
+				}, 1000)
 
+				let yunT = setTimeout(() => {
 
+					this.yunShowState = false
 
+					this.pointShow = true
 
+					clearTimeout(yunT)
 
+				}, 4000)
 
+			},
 
+			videoBgLoadingEnd() {
 
+				this.loadingCount++
 
+				this.videoBgCtx.play()
 
+				if (this.loadingCount == 2) {
 
+					this.yunAnimeStart()
 
+				}
 
+			},
 
+			videoPlay() {
 
+				if (this.innerAudioContext) {
 
+					this.innerAudioContext.pause()
 
+					this.audioState = false
 
+				}
 
+			},
 
+			videoPlayErr(){
 
+				this.videoBgCtx.play()
 
+			},
 
+			pointClick(data, index) {
 
+				if (this.clickState) {
 
+					this.pointList[this.btnClickIndex].showState = false
 
+					data.showState = true
 
+					this.btnClickIndex = index
 
+					this.animeStart = this.currentIndex
 
+					this.animeEnd = data.index
 
+					this.openType = data.type
 
+					if (this.currentIndex - data.index == 0) {
 
+						this.contentOpenState = true
 
+						this.openType = data.type
 
+						if (this.openType == 'video') {
 
+							this.videoTitle = `${this.$g.baseUrl}/static/zhaomengfu/titlev${data.title}.png`
 
+							this.videoPath = data.data
 
+							let t = setTimeout(() => {
 
+								// this.videoContext.pause()
 
+								this.videoContext.play();
 
+								clearTimeout(t)
 
+							}, 1000)
 
+						}
 
+						if (this.openType == 'image') {
 
+							this.textImg = `${this.$g.baseUrl}/static/zhaomengfu/text${data.title}.png`
 
+						}
 
+						return
 
+					}
 
+					if (this.openType == 'video') {
 
+						this.videoTitle = `${this.$g.baseUrl}/static/zhaomengfu/titlev${data.title}.png`
 
+						this.videoPath = data.data
 
+					}
 
+					if (this.openType == 'image') {
 
+						this.textImg = `${this.$g.baseUrl}/static/zhaomengfu/text${data.title}.png`
 
+					}
 
+					if (this.currentIndex - data.index > 0) {
 
+						this.animeDirection = -1
 
+					}
 
+					if (this.currentIndex - data.index < 0) {
 
+						this.animeDirection = 1
 
+					}
 
+					this.clickState = false
 
+					this.animeState = true
 
+				}
 
+
 
+				// console.log(data)
 
+			},
 
+			animeRender() {
 
+				setInterval(() => {
 
+					if (this.animeState) {
 
+						this.animeStart += this.animeDirection
 
+						// console.log(this.animeIndex)
 
+						this.animeIndex = this.animeStart
 
+						if (this.animeStart == this.animeEnd) {
 
+							this.currentIndex = this.animeEnd
 
+							this.animeState = false
 
+							this.clickState = true
 
+							this.contentOpenState = true
 
+							if (this.openType == 'video') {
 
+								// this.videoContext.pause()
 
+								this.videoContext.play();
 
+							}
 
+						}
 
+					}
 
+				}, 10)
 
+			},
 
+			touchStart(e) {
 
+				// this.animeLine = []
 
+				// let x = this.rpxTopx(e.touches[0].pageX)
 
+				// let y = this.rpxTopx(e.touches[0].pageY)
 
+				// let json1 = {
 
+				// 	"x": `${e.touches[0].pageX-40.5}rpx`,
 
+				// 	"y": `${e.touches[0].pageY-42.5}rpx`
 
+				// }
 
+				// this.saveAnime.push(json1)
 
+				// this.animeLine.push(json1)
 
+				// this.aI++
 
+				// console.log(this.aI)
 
+			},
 
+			touchCilick() {
 
+				// console.log(this.aI)
 
+			},
 
+			rpxTopx(px) {
 
+
 
+				let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
 
+
 
+				let rpx = (750 / deviceWidth) * Number(px)
 
+
 
+				return Math.floor(rpx);
 
+
 
+			}
 
+		},
 
+		onLoad() {
 
+			uni.hideHomeButton()
 
+			this.initData()
 
+			this.createAudio()
 
+			this.animeRender()
 
+		},
 
+		onHide() {
 
+			this.audioState = false
 
+			this.innerAudioContext.pause()
 
+			clearInterval(this.T)
 
+		},
 
+		onShow() {
 
+			if (this.innerAudioContext) {
 
+				this.audioState = true
 
+				this.innerAudioContext.play()
 
+			}
 
+		},
 
+		onUnload() {
 
+			this.innerAudioContext.stop()
 
+			this.innerAudioContext.destroy()
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped>
 
+	.container {
 
+		width: 100vw;
 
+		height: 100vh;
 
+		overflow: hidden;
 
+	}
 
+
 
+	.container .loading {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		z-index: 9999999;
 
+		background: #4c4c4c;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+	.videoShow{
 
+		display: flex !important;
 
+	}
 
+	.videoNone{
 
+		display: none !important;
 
+	}
 
+
 
+	.container .loading .loadingBox {
 
+		position: absolute;
 
+		width: 105rpx;
 
+		height: 41rpx;
 
+		display: flex;
 
+		top: 345rpx;
 
+		left: 459rpx;
 
+		z-index: 1;
 
+		opacity: 0;
 
+		justify-content: space-around;
 
+		align-items: center;
 
+		animation: 0.8s loadingBoxAnime 0.5s linear forwards;
 
+	}
 
+
 
+	@keyframes loadingBoxAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .loading .loadingBox span {
 
+		width: 8rpx;
 
+		height: 8rpx;
 
+		background: #c8841a;
 
+		border-radius: 50%;
 
+	}
 
+
 
+	.container .loading .loadingBox .span1 {
 
+		animation: 0.8s spanAnime 0.2s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span2 {
 
+		animation: 0.8s spanAnime 0.4s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span3 {
 
+		animation: 0.8s spanAnime 0.6s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span4 {
 
+		animation: 0.8s spanAnime 0.8s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span5 {
 
+		animation: 0.8s spanAnime 1s alternate infinite;
 
+	}
 
+
 
+	.container .loading .loadingBox .span6 {
 
+		animation: 0.8s spanAnime 1.2s alternate infinite;
 
+	}
 
+
 
+	@keyframes spanAnime {
 
+		from {
 
+			transform: scale(1.5);
 
+		}
 
+
 
+		to {
 
+			transform: scale(0.7);
 
+		}
 
+	}
 
+
 
+	.container .loading .loadingText {
 
+		position: absolute;
 
+		top: 0%;
 
+		left: 0%;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		will-change: transform;
 
+	}
 
+
 
+	.container .yunBg {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 0;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		z-index: 99999;
 
+	}
 
+
 
+	.container .yunBg video {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .yunBgOut {
 
+		will-change: opacity;
 
+		animation: 1s yunBgOutAnime 2s linear forwards;
 
+	}
 
+
 
+	@keyframes yunBgOutAnime {
 
+		from {
 
+			opacity: 1;
 
+		}
 
+
 
+		to {
 
+			opacity: 0;
 
+		}
 
+	}
 
+
 
+	.container .containerBg {
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		position: absolute;
 
+		left: 0;
 
+		top: 0;
 
+		overflow: hidden;
 
+		opacity: 0;
 
+		animation: 1s containerBgAnime linear 1s forwards;
 
+	}
 
+
 
+	@keyframes containerBgAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .containerBg #videoBgDom {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .containerBg .point {
 
+		position: absolute;
 
+		width: 5vw;
 
+		height: 5vw;
 
+		z-index: 9999;
 
+		opacity: 0;
 
+		animation: 0.5s pointAnime linear forwards;
 
+	}
 
+
 
+	@keyframes pointAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .containerBg .point .pointImg {
 
+		animation: 1s pointImgAnime linear forwards;
 
+	}
 
+
 
+	.container .containerBg .point .pointImgA {
 
+		animation: 1s pointImgAnimeA linear forwards;
 
+	}
 
+
 
+	@keyframes pointImgAnime {
 
+		from {
 
+			opacity: 0.8;
 
+			transform: scale(1.1);
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+			transform: scale(1);
 
+		}
 
+	}
 
+
 
+	@keyframes pointImgAnimeA {
 
+		from {
 
+			opacity: 0.8;
 
+			transform: scale(0.9);
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+			transform: scale(1);
 
+		}
 
+	}
 
+
 
+	.container .containerBg .openBook {
 
+		position: absolute;
 
+		width: 55rpx;
 
+		height: 220rpx;
 
+		right: 0;
 
+		top: 555rpx;
 
+		z-index: 9999;
 
+	}
 
+
 
+	.container .containerBg .openBook image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .containerBg .bookPlane {
 
+		position: absolute;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		left: 0;
 
+		top: 0;
 
+		z-index: 9999;
 
+		background: rgba(70, 72, 71, 0.63)
 
+	}
 
+
 
+	.container .containerBg .bookPlane .bookClose {
 
+		position: absolute;
 
+		right: 90rpx;
 
+		top: 440rpx;
 
+		width: 41rpx;
 
+		height: 41rpx;
 
+	}
 
+
 
+	.container .containerBg .bookPlane .bookClose image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.uni-margin-wrap {
 
+		width: 690rpx;
 
+		width: 100%;
 
+	}
 
+
 
+	.swiperContent {
 
+		width: 100vw;
 
+		height: 560rpx;
 
+		position: absolute;
 
+		top: 500rpx;
 
+		left: 0;
 
+	}
 
+
 
+	.swiper {
 
+		height: 600rpx;
 
+	}
 
+
 
+	.swiper-itemA {
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+		width: 287rpx;
 
+		height: 558rpx;
 
+		margin: 0 auto;
 
+	}
 
+
 
+	.swiper-itemA image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.swiper-item {
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+		width: 507rpx;
 
+		height: 558rpx;
 
+		line-height: 300rpx;
 
+		text-align: center;
 
+		margin: 0 auto;
 
+	}
 
+
 
+	.swiper-item image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .containerBg .animeBox {
 
+		width: 81rpx;
 
+		height: 84rpx;
 
+		position: absolute;
 
+		will-change: left, top;
 
+	}
 
+
 
+	.container .containerBg .animeBox image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .changeAudio {
 
+		position: absolute;
 
+		right: 45rpx;
 
+		top: 105rpx;
 
+		width: 47rpx;
 
+		height: 47rpx;
 
+		z-index: 99999;
 
+	}
 
+
 
+	.container .changeAudio image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .changeAudioPlay {
 
+		animation: 1s changeAudioAnime linear infinite;
 
+	}
 
+
 
+	@keyframes changeAudioAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.container .content {
 
+		position: absolute;
 
+		z-index: 99;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		background: #0000008a;
 
+		animation: 1s contentAnime linear forwards;
 
+	}
 
+
 
+	@keyframes contentAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .content .videoLayer {
 
+		width: 100vw;
 
+		height: 100vh;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+
 
+	.container .content .videoLayer .videoCloseTips {
 
+		position: absolute;
 
+		top: 990rpx;
 
+		left: 50%;
 
+		transform: translateX(-50%);
 
+		width: 199rpx;
 
+		height: 26rpx;
 
+		animation: 1s videoCloseTipsAnime linear 2s alternate infinite;
 
+	}
 
+
 
+	@keyframes videoCloseTipsAnime {
 
+		from {
 
+			opacity: 0.5;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.container .content .videoLayer .videoCloseTips image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .content .videoBox {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+
 
+	.container .content .videoBox .closeVideoLayer {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+
 
+	}
 
+
 
+	.container .content .videoBox .videoBorder {
 
+		position: relative;
 
+		width: 100vw;
 
+	}
 
+	.container .content .videoBox .videoBorder .videoTitle {
 
+		position: absolute;
 
+		top: -50rpx;
 
+		left: 50%;
 
+		transform: translateX(-50%);
 
+		max-width: 740rpx;
 
+		min-width: 644rpx;
 
+		height: 37rpx;
 
+	}
 
+	
+	.container .content .videoBox .videoBorder .videoTitle image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .content .videoBox .videoBorder video {
 
+		width: 100vw;
 
+		border-top: 2px solid #a9f9e5;
 
+		border-bottom: 2px solid #a9f9e5;
 
+	}
 
+
 
+	.container .containerBg .point image {
 
+		width: 100%;
 
+		height: 100%;
 
+		will-change: transform;
 
+	}
 
+
 
+	.container .content .imageBox {
 
+		position: absolute;
 
+		z-index: 99;
 
+		width: 100vw;
 
+		height: 100vh;
 
+	}
 
+
 
+	.container .content .imageBox .textBox {
 
+		position: absolute;
 
+		right: 135rpx;
 
+		top: 430rpx;
 
+		width: 537rpx;
 
+		height: 646rpx;
 
+	}
 
+
 
+	.container .content .imageBox .textBox image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .content .imageBox .textBox .closeImgContent {
 
+		position: absolute;
 
+		right: 14rpx;
 
+		top: 0rpx;
 
+		width: 55rpx;
 
+		height: 55rpx;
 
+		z-index: 99;
 
+	}
 
+</style>

+ 99 - 0
pages/zhongduxiu/zhongduxiu.vue
查看文件 

@@ -0,0 +1,99 @@
 
+<template>
 
+	<view class="container">
 
+		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
 
+			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
 
+			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="h5box">
 
+			<web-view :webview-styles="webviewStyles" :src="webUrl"></web-view>
 
+		</view>
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	export default {
 
+		data() {
 
+			return {
 
+				audioImgA: "https://dadu.ispush.com/static/zhongduxiu/img/audioOn.png",
 
+				audioImgB: "https://dadu.ispush.com/static/zhongduxiu/img/audioOff.png",
 
+				audioUrl: "",
 
+				webUrl: "https://dadu.ispush.com/api/getHtml",
 
+				audioState: false,
 
+				innerAudioContext: ""
 
+			}
 
+		},
 
+		methods: {
 
+			createAudio() {
 
+				this.innerAudioContext = uni.createInnerAudioContext()
 
+				this.innerAudioContext.autoplay = true
 
+				this.innerAudioContext.loop = true
 
+				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhongduxiu/audio/audio.mp3`
 
+			},
 
+			changeAudio() {
 
+				if (this.audioState) {
 
+					this.innerAudioContext.pause()
 
+				} else {
 
+					this.innerAudioContext.play()
 
+				}
 
+				this.audioState = !this.audioState
 
+			},
 
+		},
 
+		created() {
 
+			this.createAudio()
 
+		},
 
+		onHide() {
 
+			this.audioState = false
 
+			this.innerAudioContext.pause()
 
+			clearInterval(this.T)
 
+		},
 
+		onShow(){
 
+			if (this.innerAudioContext) {
 
+				this.audioState = true
 
+				this.innerAudioContext.play()
 
+			}
 
+		}
 
+		
+	}
 
+</script>
 
+
 
+<style scoped>
 
+	.conatiner {
 
+		position: relative;
 
+		width: 100vw;
 
+		height: 100vh;
 
+	}
 
+
 
+	.container .changeAudio {
 
+		position: absolute;
 
+		right: 45rpx;
 
+		top: 105rpx;
 
+		width: 47rpx;
 
+		height: 47rpx;
 
+	}
 
+	.container .changeAudio image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .changeAudioPlay {
 
+		animation: 1s changeAudioAnime linear infinite; 
+	}
 
+
 
+	@keyframes changeAudioAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+	.container .h5box{
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		
+	}
 
+</style>

+ 429 - 0
pages/zhongduxiub/zhongduxiub.vue
查看文件 

@@ -0,0 +1,429 @@
 
+<template>
 
+	<view class="container">
 
+		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
 
+			<view class="loadingBox">
 
+				<image :src="loadingAImg" mode="aspectFit"></image>
 
+				<image class="loadingRotate" :src="loadingBImg" mode="aspectFit"></image>
 
+			</view>
 
+			<image class="loadingText" :src="loadingText" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
 
+			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
 
+			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
 
+		</view>
 
+		<view class="videoContent">
 
+			<video id="myVideoBg" :src="videoBgPath" :loop="true" :controls="false" :muted="true"
 
+				objectFit='cover' :show-progress='false' :enable-progress-gesture='false' :show-play-btn='false'
 
+				:show-fullscreen-btn='false' @loadedmetadata="videoLoadingEnd"></video>
 
+		</view>
 
+		<view class="imgLayer">
 
+			<view class="imgMask" v-if="imgShowIndex!='close'">
 
+			</view>
 
+			<view class="imgItem" v-for="(item,index) in personList" :key="item.name"
 
+				:style="{width:item.width,height:item.height,left:item.x,top:item.y}" v-show="imgShowIndex==item.name">
 
+				<image :src="item.url" mode="aspectFill"></image>
 
+			</view>
 
+		</view>
 
+		<view class="clickLayer">
 
+			<view class="clickItem clickItem1" @click="openImg('person1')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem2" @click="openImg('person2')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem3" @click="openImg('person3')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem4" @click="openImg('person4')">
 
+
 
+			</view>
 
+			<view class="clickItem clickItem5" @click="openImg('person5')">
 
+
 
+			</view>
 
+		</view>
 
+		<view class="textLayer">
 
+			<view class="textItem" v-for="(item,index) in textList" :key="item.name" v-show="imgShowIndex==item.name">
 
+				<image :src="item.url" mode="aspectFill"></image>
 
+			</view>
 
+		</view>
 
+		<view class="closeBtn" v-show="imgShowIndex!='close'" @click="closeContent">
 
+		</view>
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	export default {
 
+		data() {
 
+			return {
 
+				loadingState: true,
 
+				loadingOutAnime: false, //加载退场动画
 
+				videoCtx:"",
 
+				audioImgA: "https://dadu.ispush.com/static/zhongduxiu/img/audioOn.png",
 
+				audioImgB: "https://dadu.ispush.com/static/zhongduxiu/img/audioOff.png",
 
+				loadingAImg: "https://dadu.ispush.com/static/shouyu/loadingA.png",
 
+				loadingBImg: "https://dadu.ispush.com/static/shouyu/loadingB.png",
 
+				loadingText: "https://dadu.ispush.com/static/shouyu/loadingText.png",
 
+				audioUrl: "",
 
+				webUrl: "https://dadu.ispush.com/api/getHtml",
 
+				audioState: true,
 
+				innerAudioContext: "",
 
+				imgShowIndex: "close",
 
+				videoBgPath: "https://dadu.ispush.com/static/zhongduxiu/video/bg.mp4",
 
+				personList: [{
 
+						"name": "person1",
 
+						"width": "180rpx",
 
+						"height": "461rpx",
 
+						"x": "-10rpx",
 
+						"y": "980rpx",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/person/1.png"
 
+					},
 
+					{
 
+						"name": "person2",
 
+						"width": "192rpx",
 
+						"height": "466rpx",
 
+						"x": "130rpx",
 
+						"y": "980rpx",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/person/2.png"
 
+					},
 
+					{
 
+						"name": "person3",
 
+						"width": "246rpx",
 
+						"height": "474rpx",
 
+						"x": "278rpx",
 
+						"y": "950rpx",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/person/3.png"
 
+					},
 
+					{
 
+						"name": "person4",
 
+						"width": "179rpx",
 
+						"height": "466rpx",
 
+						"x": "485rpx",
 
+						"y": "972rpx",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/person/4.png"
 
+					},
 
+					{
 
+						"name": "person5",
 
+						"width": "148rpx",
 
+						"height": "458rpx",
 
+						"x": "610rpx",
 
+						"y": "980rpx",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/person/5.png"
 
+					}
 
+				],
 
+				textList: [{
 
+						"name": "person1",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text1.png"
 
+					},
 
+					{
 
+						"name": "person2",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text2.png"
 
+					},
 
+					{
 
+						"name": "person3",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text3.png"
 
+					},
 
+					{
 
+						"name": "person4",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text4.png"
 
+					},
 
+					{
 
+						"name": "person5",
 
+						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text5.png"
 
+					}
 
+				]
 
+			}
 
+		},
 
+		methods: {
 
+			createAudio() {
 
+				this.innerAudioContext = uni.createInnerAudioContext()
 
+				this.innerAudioContext.autoplay = true
 
+				this.innerAudioContext.loop = true
 
+				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhongduxiu/audio/audio.mp3`
 
+			},
 
+			changeAudio() {
 
+				if (this.audioState) {
 
+					this.innerAudioContext.pause()
 
+				} else {
 
+					this.innerAudioContext.play()
 
+				}
 
+				this.audioState = !this.audioState
 
+			},
 
+			videoLoadingEnd() {
 
+				this.loadingOutAnime = true
 
+				this.videoCtx.play()
 
+				let t = setTimeout(() => {
 
+					this.loadingState = false
 
+					clearTimeout(t)
 
+				}, 600)
 
+			},
 
+			openImg(index) {
 
+				this.imgShowIndex = index
 
+			},
 
+			closeContent() {
 
+				this.imgShowIndex = 'close'
 
+			}
 
+		},
 
+		onReady() {
 
+			this.videoCtx = uni.createVideoContext('myVideoBg')
 
+			this.createAudio()
 
+		}
 
+	}
 
+</script>
 
+
 
+<style scoped>
 
+	.conatiner {
 
+		position: relative;
 
+		width: 100vw;
 
+		height: 100vh;
 
+	}
 
+
 
+	.container .loading {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100vw;
 
+		height: 100vh;
 
+		z-index: 9999999;
 
+		background: #4c4c4c;
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+	}
 
+
 
+	.container .loading .loadingBox {
 
+		position: relative;
 
+		width: 73rpx;
 
+		height: 72rpx;
 
+	}
 
+
 
+	.container .loading .loadingBox image {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 0;
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .loading .loadingBox .loadingRotate {
 
+		animation: 1s loadingRotateAnime linear infinite;
 
+	}
 
+
 
+	.container .loading .loadingText {
 
+		position: absolute;
 
+		top: 43%;
 
+		left: 50%;
 
+		transform: translate(-50%, -50%);
 
+		width: 169rpx;
 
+		height: 40rpx;
 
+	}
 
+
 
+	@keyframes loadingRotateAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.container .loadingOut {
 
+		animation: 1s loadingOutAnime linear forwards;
 
+	}
 
+
 
+	@keyframes loadingOutAnime {
 
+		from {
 
+			opacity: 1;
 
+		}
 
+
 
+		to {
 
+			opacity: 0;
 
+		}
 
+	}
 
+
 
+	.container .changeAudio {
 
+		position: absolute;
 
+		right: 45rpx;
 
+		top: 105rpx;
 
+		width: 47rpx;
 
+		height: 47rpx;
 
+		z-index: 999999;
 
+	}
 
+
 
+	.container .changeAudio image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.container .changeAudioPlay {
 
+		animation: 1s changeAudioAnime linear infinite;
 
+	}
 
+
 
+	@keyframes changeAudioAnime {
 
+		from {
 
+			transform: rotate(0deg);
 
+		}
 
+
 
+		to {
 
+			transform: rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.videoContent {
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+	}
 
+
 
+	.videoContent video {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.imgLayer {
 
+		width: 100vw;
 
+		height: 100vh;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		z-index: 99;
 
+	}
 
+
 
+	.imgLayer .imgMask {
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		background: rgba(0, 0, 0, 0.6);
 
+		opacity: 0;
 
+		animation: 1s imgMaskAnime linear forwards;
 
+	}
 
+
 
+	@keyframes imgMaskAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.imgLayer .imgItem {
 
+		position: absolute;
 
+		animation: 0.5s imgItemAnime linear forwards;
 
+	}
 
+
 
+	@keyframes imgItemAnime {
 
+		from {
 
+			transform: scale(1);
 
+		}
 
+
 
+		to {
 
+			transform: scale(1.05);
 
+		}
 
+	}
 
+
 
+	.imgLayer .imgItem image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.clickLayer {
 
+		width: 100vw;
 
+		height: 100vh;
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		z-index: 99999;
 
+	}
 
+
 
+	.clickLayer .clickItem {
 
+		width: 200rpx;
 
+		height: 150rpx;
 
+		position: absolute;
 
+		/* 		background: pink; */
 
+		z-index: 9999;
 
+	}
 
+
 
+	.clickLayer .clickItem1 {
 
+		width: 150rpx;
 
+		height: 460rpx;
 
+		left: 0rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem2 {
 
+		width: 160rpx;
 
+		height: 460rpx;
 
+		left: 152rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem3 {
 
+		width: 170rpx;
 
+		height: 460rpx;
 
+		left: 315rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem4 {
 
+		width: 140rpx;
 
+		height: 460rpx;
 
+		left: 486rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.clickLayer .clickItem5 {
 
+		width: 123rpx;
 
+		height: 460rpx;
 
+		left: 628rpx;
 
+		top: 970rpx;
 
+	}
 
+
 
+	.textLayer {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		width: 750rpx;
 
+		height: 1624rpx;
 
+		z-index: 999;
 
+	}
 
+
 
+	.textLayer .textItem {
 
+		position: absolute;
 
+		width: 643rpx;
 
+		height: 280rpx;
 
+		top: 657rpx;
 
+		left: 50%;
 
+		opacity: 0;
 
+		transform: translateX(-50%);
 
+		animation: 0.5s textItemAnime 1s linear forwards;
 
+	}
 
+
 
+	@keyframes textItemAnime {
 
+		from {
 
+			opacity: 0;
 
+		}
 
+
 
+		to {
 
+			opacity: 1;
 
+		}
 
+	}
 
+
 
+	.textLayer .textItem image {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+
 
+	.closeBtn {
 
+		position: absolute;
 
+		z-index: 99999;
 
+		top: 665rpx;
 
+		left: 625rpx;
 
+		width: 60rpx;
 
+		height: 60rpx;
 
+		opacity: 0;
 
+		animation: 0.5s textItemAnime linear 1s forwards;
 
+	}
 
+</style>

二进制
static/logo.png
查看文件


+ 76 - 0
uni.scss
查看文件 

@@ -0,0 +1,76 @@
 
+/**
 
+ * 这里是uni-app内置的常用样式变量
 
+ *
 
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 
+ *
 
+ */
 
+
 
+/**
 
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 
+ *
 
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 
+ */
 
+
 
+/* 颜色变量 */
 
+
 
+/* 行为相关颜色 */
 
+$uni-color-primary: #007aff;
 
+$uni-color-success: #4cd964;
 
+$uni-color-warning: #f0ad4e;
 
+$uni-color-error: #dd524d;
 
+
 
+/* 文字基本颜色 */
 
+$uni-text-color:#333;//基本色
 
+$uni-text-color-inverse:#fff;//反色
 
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
 
+$uni-text-color-placeholder: #808080;
 
+$uni-text-color-disable:#c0c0c0;
 
+
 
+/* 背景颜色 */
 
+$uni-bg-color:#ffffff;
 
+$uni-bg-color-grey:#f8f8f8;
 
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
 
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
+
 
+/* 边框颜色 */
 
+$uni-border-color:#c8c7cc;
 
+
 
+/* 尺寸变量 */
 
+
 
+/* 文字尺寸 */
 
+$uni-font-size-sm:12px;
 
+$uni-font-size-base:14px;
 
+$uni-font-size-lg:16;
 
+
 
+/* 图片尺寸 */
 
+$uni-img-size-sm:20px;
 
+$uni-img-size-base:26px;
 
+$uni-img-size-lg:40px;
 
+
 
+/* Border Radius */
 
+$uni-border-radius-sm: 2px;
 
+$uni-border-radius-base: 3px;
 
+$uni-border-radius-lg: 6px;
 
+$uni-border-radius-circle: 50%;
 
+
 
+/* 水平间距 */
 
+$uni-spacing-row-sm: 5px;
 
+$uni-spacing-row-base: 10px;
 
+$uni-spacing-row-lg: 15px;
 
+
 
+/* 垂直间距 */
 
+$uni-spacing-col-sm: 4px;
 
+$uni-spacing-col-base: 8px;
 
+$uni-spacing-col-lg: 12px;
 
+
 
+/* 透明度 */
 
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
+
 
+/* 文章场景相关 */
 
+$uni-color-title: #2C405A; // 文章标题颜色
 
+$uni-font-size-title:20px;
 
+$uni-color-subtitle: #555555; // 二级标题颜色
 
+$uni-font-size-subtitle:26px;
 
+$uni-color-paragraph: #3F536E; // 文章段落颜色
 
+$uni-font-size-paragraph:15px;

+ 31 - 0
utils/getTickImg.js
查看文件 

@@ -0,0 +1,31 @@
 
+class GetTickImg {
 
+	constructor(imgPath, len) {
 
+		this.imgPath = imgPath
 
+		this.len = len
 
+		this.imgList = []
 
+		this.loadState = false
 
+		this.initDraw = false
 
+		this.getDrawImgUrl()
 
+	}
 
+	async getDrawImgUrl() {
 
+		for (let i = 1; i < this.len + 1; i++) {
 
+			let imgHostUrl = await this.getImgInfo(i)
 
+			this.imgList.push(imgHostUrl)
 
+		}
 
+		this.loadState = true
 
+	}
 
+	getImgInfo(index) {
 
+		return new Promise((resolev, reject) => {
 
+			uni.downloadFile({
 
+				url: `${this.imgPath} (${index}).png`,
 
+				success: (res) => {
 
+					resolev(res.tempFilePath)
 
+				},
 
+				fail(err) {
 
+					reject(err)
 
+				}
 
+			})
 
+		})
 
+	}
 
+}
 
+export default GetTickImg

+ 17 - 0
utils/request.js
查看文件 

@@ -0,0 +1,17 @@
 
+const baseUrl = "https://dadu.ispush.com"
 
+// const baseUrl = "http://127.0.0.1:3000"
 
+export default function request(config){
 
+	return new Promise((resolve,reject)=>{
 
+		uni.request({
 
+			url:`${baseUrl}${config.url}`, //仅为示例，并非真实接口地址。
 
+			method:config.method,
 
+			data:config.data,
 
+			success:(res)=> {
 
+				resolve(res)
 
+			},
 
+			fail:(err)=>{
 
+				reject(err)
 
+			}
 
+		})
 
+	})
 
+}

+ 63 - 0
utils/tickAnimeItem.js
查看文件 

@@ -0,0 +1,63 @@
 
+class TickAnime {
 
+	constructor(imgLen, x, y, w, h, ctx,name,zIndex,imgName,imgBaseUrl) {
 
+		this.imgLen = imgLen
 
+		this.x = x
 
+		this.y = y
 
+		this.w = w
 
+		this.h = h
 
+		this.ctx = ctx
 
+		this.name = name
 
+		this.zIndex = zIndex
 
+		this.imgName = imgName
 
+		this.currentIndex = 0
 
+		this.imgBaseUrl = imgBaseUrl
 
+		this.loadingState = false
 
+		this.clickState = false
 
+		this.imgList = []
 
+		this.getDrawImgUrl()
 
+	}
 
+	async getDrawImgUrl() {
 
+		for (let i = 1; i < this.imgLen + 1; i++) {
 
+			let imgHostUrl = await this.getImgInfo(i)
 
+			this.imgList.push(imgHostUrl)
 
+		}
 
+		this.initDraw()
 
+	}
 
+	initDraw(){
 
+		for(let i=0;i<this.imgList.length;i++){
 
+			this.ctx.drawImage(this.imgList[i], this.x, this.y, this.w, this.h)
 
+		}
 
+		setTimeout(()=>{
 
+			this.loadingState = true
 
+		},1000)
 
+	}
 
+	getImgInfo(index) {
 
+		return new Promise((resolev, reject) => {
 
+			uni.getImageInfo({
 
+				src: `${this.imgBaseUrl}/${this.imgName} (${index}).png`,
 
+				success: (res) => {
 
+					resolev(res.path)
 
+				},
 
+				fail(err) {
 
+					reject(err)
 
+				}
 
+			})
 
+		})
 
+	}
 
+	draw() {
 
+		if (this.loadingState) {
 
+			this.ctx.drawImage(this.imgList[this.currentIndex], this.x, this.y, this.w, this.h)
 
+		}
 
+
 
+	}
 
+	update() {
 
+		if (!this.clickState) {
 
+			if (this.currentIndex < this.imgLen - 1) {
 
+				this.currentIndex++
 
+			} else {
 
+				this.currentIndex = 1
 
+			}
 
+		}
 
+	}
 
+}
 
+export default TickAnime