5 anos atrás · 7b6d34e521
--- a/README.md
+++ b/README.md
 # 516_gongyin
 ## Project setup
 ```
 npm install
 ```
 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "516_gongyin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vant": "^2.5.4",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>工银积存金</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div id="app">
    <router-view/>
  </div>
 </template>
 <style>
 	@import url("./style/animate.css");
  @import url("./style/base.css");
 </style>
 <style lang="scss">
 </style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
 </template>
 <script>
 export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 h3 {
  margin: 40px 0 0;
 }
 ul {
  list-style-type: none;
  padding: 0;
 }
 li {
  display: inline-block;
  margin: 0 10px;
 }
 a {
  color: #42b983;
 }
 </style>
--- a/src/js/img.js
+++ b/src/js/img.js
 var baseUrl="http://www.jiyou-tech.com/2020/516/images/"
 var imgArray=[
 	{
 		name:'bg',
 		url:'bg.jpg?v=010'
 	},
 	{
 		name:'frame',
 		url:'frame.png?v=001'
 	},
 	{
 		name:'pageArrow',
 		url:'arrow.png'
 	},
 	{
 		name:'page1Title',
 		url:'page1/title.png'
 	},
 	{
 		name:'page1Pic',
 		url:'page1/pic.png'
 	},
 	{
 		name:'page1Content',
 		url:'page1/txtContent.png?v=001'
 	},
 	{
 		name:'page1Txt1',
 		url:'page1/txt1.png'
 	},
 	{
 		name:'page1Txt2',
 		url:'page1/txt2.png'
 	},
 	{
 		name:'page1Txt3',
 		url:'page1/txt3.png'
 	},
 	{
 		name:'page1Txt4',
 		url:'page1/txt4.png'
 	},
 	{
 		name:'page1Txt5',
 		url:'page1/txt5.png'
 	},
 	{
 		name:'page1Txt6_1',
 		url:'page1/txt6_1.png'
 	},
 	{
 		name:'page1Txt6_2',
 		url:'page1/txt6_2.png'
 	},
 	{
 		name:'page1Head',
 		url:'page1/head.png'
 	},
 	{
 		name:'page2Title',
 		url:'page2/title.png'
 	},
 	{
 		name:'page2Progress',
 		url:'page2/progress.png'
 	},
 	{
 		name:'page2Txt1',
 		url:'page2/txt1.png'
 	},
 	{
 		name:'page2Txt2',
 		url:'page2/txt2.png'
 	},
 	{
 		name:'page2Txt3',
 		url:'page2/txt3.png'
 	},
 	{
 		name:'page2Txt4',
 		url:'page2/txt4.png'
 	},
 	{
 		name:'page2Txt5',
 		url:'page2/txt5.png'
 	},
 	{
 		name:'page2Txt6',
 		url:'page2/txt6.png'
 	},
 	{
 		name:'page3Title',
 		url:'page3/title.png'
 	},
 	{
 		name:'page3Pic',
 		url:'page3/pic.png'
 	},
 	{
 		name:'page4Title',
 		url:'page4/title.png'
 	},
 	{
 		name:'page4Pic1',
 		url:'page4/pic1.jpg'
 	},
 	{
 		name:'page4Pic2',
 		url:'page4/pic2.jpg'
 	},
 	{
 		name:'page4Pic3',
 		url:'page4/pic3.jpg'
 	},
 	{
 		name:'page4Pic4',
 		url:'page4/pic4.jpg'
 	},
 	{
 		name:'arrowLeft',
 		url:'arrowLeft.png'
 	},
 	{
 		name:'arrowRight',
 		url:'arrowRight.png'
 	},
 	{
 		name:'page5Title',
 		url:'page5/title.png'
 	},
 	{
 		name:'page5Pic1',
 		url:'page5/pic1.jpg'
 	},
 	{
 		name:'page5Pic2',
 		url:'page5/pic2.jpg'
 	},
 	{
 		name:'page5Pic3',
 		url:'page5/pic3.jpg'
 	},
 	{
 		name:'page6Title',
 		url:'page6/title.png'
 	},
 	{
 		name:'page6Pic1',
 		url:'page6/pic1.jpg'
 	},
 	{
 		name:'page6Pic2',
 		url:'page6/pic2.jpg'
 	},
 	{
 		name:'page6Txt',
 		url:'page6/txt.png'
 	},
 	{
 		name:'page7Title',
 		url:'page7/title.png'
 	},
 	{
 		name:'page7Txt',
 		url:'page7/txt.png'
 	},
 	{
 		name:'page8Title',
 		url:'page8/title.png'
 	},
 	{
 		name:'page8QR',
 		url:'page8/qr.png'
 	},
 	{
 		name:'page8Txt',
 		url:'page8/txt.png'
 	},
 	{
 		name:'popBtnClose',
 		url:'pop/btnClose.png'
 	},
 	{
 		name:'popPic1',
 		url:'pop/pic1.png'
 	},
 	{
 		name:'popPic2',
 		url:'pop/pic2.png'
 	},
 	{
 		name:'popPic3',
 		url:'pop/pic3.png'
 	},
 	{
 		name:'popPic4',
 		url:'pop/pic4.png'
 	},
 	{
 		name:'popPic5',
 		url:'pop/pic5.png'
 	},
 	{
 		name:'popPic6',
 		url:'pop/pic6.png'
 	}
 ]
 function onLoad(){
 	var imgData={}
 	for(var i=0;i<imgArray.length;i++){
 		var url=baseUrl+imgArray[i].url
 		imgData[imgArray[i].name]=url
 		var img=new Image()
 		img.src=url
 	}
 	return imgData
 }
 var images={
 	onLoad:onLoad
 }
 export {images}
--- a/src/main.js
+++ b/src/main.js
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import { Swipe, SwipeItem } from 'vant';
 import 'vant/lib/index.css';
 Vue.use(Swipe);
 Vue.use(SwipeItem);
 Vue.config.productionTip = false
 new Vue({
  router,
  store,
  render: h => h(App)
 }).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 Vue.use(VueRouter)
 const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
 ]
 const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
 })
 export default router
--- a/src/store/index.js
+++ b/src/store/index.js
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
 })
--- a/src/style/animate.css
+++ b/src/style/animate.css
 /* 淡入 */
 .fadein{
 	-webkit-animation:.8s linear both;
 	animation:.8s linear both;
 	-webkit-animation-name:fadein;
 	animation-name:fadein;
 }
@-webkit-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
 }
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
 }
 /*箭头动画*/
 .arrowMc{
 	-webkit-animation:.8s linear infinite alternate;
 	animation:.8s linear infinite alternate;
 	-webkit-animation-name:arrowMc;
 	animation-name:arrowMc;
 }
@-webkit-keyframes arrowMc{
    0%{transform: translateY(0vw);}
    100%{transform: translateY(-1.5vw);}
 }
@keyframes arrowMc{
    0%{transform: translateY(0vw);}
    100%{transform: translateY(-1.5vw);}
 }
 /*小手缩放*/
 .headMc{
 	-webkit-animation:.8s linear infinite alternate;
 	animation:.8s linear infinite alternate;
 	-webkit-animation-name:headMc;
 	animation-name:headMc;
 }
@-webkit-keyframes headMc{
    0%{transform: scale(1,1));}
    100%{transform: scale(1.2,1.2);}
 }
@keyframes headMc{
    0%{transform: scale(1,1));}
    100%{transform: scale(1.2,1.2);}
 }
 /*进度条动画*/
@-webkit-keyframes progressBoxMc{
    0%{transform: translateY(calc(-890/750*100vw));}
    100%{transform: translateY(0vw);}
 }
@keyframes progressBoxMc{
    0%{transform: translateY(calc(-890/750*100vw));}
    100%{transform: translateY(0vw);}
 }
@-webkit-keyframes progressMc{
    0%{transform: translateY(calc(890/750*100vw));}
    100%{transform: translateY(0vw);}
 }
@keyframes progressMc{
    0%{transform: translateY(calc(890/750*100vw));}
    100%{transform: translateY(0vw);}
 }
--- a/src/style/base.css
+++ b/src/style/base.css
 * {
  	margin: 0;
  	padding: 0;
  }
  html,
  body {
  	position: fixed;
  	width: 100%;
  	height: 100%;
  	overflow: hidden;
  }
  img {
  	display: block;
  }
  .container {
  	position: absolute;
  	width: 100vw;
  	height: calc(1206/750*100vw);
  	left: 0;
  	top: 50%;
  	transform: translateY(-50%);
  }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
 <template>
 	<div id="home" @touchstart="start" @touchend="end">
 		<img class="bg" :src="imgData.bg" v-if="imgData" />
 		<div class="container" v-if="imgData">
 			<div class="frameBox">
 				<img class="frame" :src="imgData.frame" />
 				<div class="page page1" v-show="page==1">
 					<img class="page1Title fadein" :src="imgData.page1Title" />
 					<img class="page1Pic fadein" :src="imgData.page1Pic" />
 					<div class="content fadein">
 						<img class="page1Content" :src="imgData.page1Content" />
 						<img class="txt page1Txt1" :src="imgData.page1Txt1" @click="showPop(1)" />
 						<img class="txt page1Txt2" :src="imgData.page1Txt2" @click="showPop(2)" />
 						<img class="txt page1Txt3" :src="imgData.page1Txt3" @click="showPop(3)" />
 						<img class="txt page1Txt4" :src="imgData.page1Txt4" @click="showPop(4)" />
 						<img class="txt page1Txt5" :src="imgData.page1Txt5" @click="showPop(5)" />
 						<img class="txt page1Txt6_1" :src="imgData.page1Txt6_1" @click="showPop(6)" />
 						<img class="txt page1Txt6_2" :src="imgData.page1Txt6_2" @click="showPop(6)" />
 						<img class="head headMc" :src="imgData.page1Head" v-if="showHead"/>
 					</div>
 				</div>
 				<div class="page page2" v-show="page==2">
 					<img class="page2Title fadein" :src="imgData.page2Title" />
 					<div class="progressBox">
 						<img :src="imgData.page2Progress" />
 					</div>
 					<img class="txt fadein" :class="'page2Txt'+item" :src="imgData['page2Txt'+item]" v-for="item in 6" :key="item" />
 				</div>
 				<div class="page page3" v-show="page==3">
 					<img class="page3Title fadein" :src="imgData.page3Title" />
 					<img class="page3Pic fadein" :src="imgData.page3Pic" />
 				</div>
 				<div class="page page4 fadein" v-if="page==4">
 					<img class="page4Title" :src="imgData.page4Title" />
 					<div class="mySwiperBox">
 						<van-swipe class="my-swipe" :show-indicators='false' ref="swiper4">
 						  <van-swipe-item v-for="item in 4" :key="item"><img :src="imgData['page4Pic'+item]" /></van-swipe-item>
 						</van-swipe>
 						<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper4')"/>
 						<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper4')"/>
 					</div>
 				</div>
 				<div class="page page5 fadein" v-if="page==5">
 					<img class="page5Title" :src="imgData.page5Title" />
 					<div class="mySwiperBox">
 						<van-swipe class="my-swipe" :show-indicators='false' ref="swiper5">
 						  <van-swipe-item v-for="item in 3" :key="item"><img :src="imgData['page5Pic'+item]" /></van-swipe-item>
 						</van-swipe>
 						<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper5')"/>
 						<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper5')"/>
 					</div>
 				</div>
 				<div class="page page6 fadein" v-if="page==6">
 					<img class="page6Title" :src="imgData.page6Title" />
 					<div class="mySwiperBox">
 						<van-swipe class="my-swipe" :show-indicators='false' ref="swiper6">
 						  <van-swipe-item v-for="item in 2" :key="item"><img :src="imgData['page6Pic'+item]" /></van-swipe-item>
 						</van-swipe>
 						<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper6')"/>
 						<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper6')"/>
 					</div>
 					<img class="page6Txt" :src="imgData.page6Txt" />
 				</div>
 				<div class="page page7" v-if="page==7">
 					<img class="page7Title fadein" :src="imgData.page7Title" />
 					<img class="page7Txt fadein" :src="imgData.page7Txt" />
 				</div>
 				<div class="page page8" v-if="page==8">
 					<img class="page8Title fadein" :src="imgData.page8Title" />
 					<img class="page8Txt fadein" :src="imgData.page8Txt" />
 					<img class="page8QR fadein" :src="imgData.page8QR" />
 				</div>
 				<img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/>
 			</div>
 		</div>
 		<div class="Popup" v-if="popCode!==0">
 			<div class="contentBox" v-if="popCode===item" v-for="item in 6" :key="item">
 				<img class="pic" :src="imgData['popPic'+item]" />
 				<img class="btn" :class="popBtnCloseStyle(item)" :src="imgData.popBtnClose" @click="hiddenPop" />
 			</div>
 		</div>
 	</div>
 </template>
 <script>
 	import {
 		images
 	} from '../js/img.js'
 	export default {
 		name: 'Home',
 		data() {
 			return {
 				imgData: null,
 				page: 1,
 				popCode: 0, //弹窗Code
 				oldPageY: 0,
 				showHead:true
 			}
 		},
 		mounted() {
 			this.imgData = images.onLoad();
 		},
 		methods: {
 			popBtnCloseStyle(code) {
 				if (code == 2) {
 					return 'close2'
 				} else {
 					return 'close1'
 				}
 			},
 			showPop(code) {
 				this.showHead=false
 				this.popCode = code;
 			},
 			hiddenPop() {
 				this.popCode = 0;
 			},
 			start(e) {
 				this.oldPageY = e.touches[0].clientY
 			},
 			end(e) {
 				if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页
 					this.page++
 				}
 				if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页
 					this.page--
 				}
 			},
 			prevSwiper(res){
 				this.$refs[res].prev();
 			},
 			nextSwiper(res){
 				this.$refs[res].next();
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	#home {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		.bg {
 			position: absolute;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
 		}
 		.frameBox {
 			position: absolute;
 			width: calc(730/750*100vw);
 			height: calc(1184/750*100vw);
 			margin: 4vw 0 0 3vw;
 			.frame {
 				position: absolute;
 				width: 100%;
 				height: auto;
 				// display: none;
 			}
 			.page {
 				position: absolute;
 				left: 0;
 				top: 0;
 				width: 100%;
 				height: 100%;
 				.mySwiperBox{
 					position: absolute;
 					width: 86%;
 					left: 5vw;
 					.my-swipe .van-swipe-item {
 					  color: #fff;
 					  font-size: 20px;
 					  text-align: center;
 						img{
 							display: inline-block;
 							width: auto;
 						}
 					}
 					.arrow{
 						position: absolute;
 						width: auto;
 						height: calc(41/750*100vw);
 						top: 45%;
 						transform: translateY(-45%);
 					}
 					.left{
 						left: 6vw;
 					}
 					.right{
 						right:6vw
 					}
 				}
 			}
 			.page1 {
 				img {
 					position: absolute;
 				}
 				.page1Title {
 					width: calc(492/750*100vw);
 					height: calc(238/750*100vw);
 					top: 20vw;
 					left: 14vw;
 				}
 				.page1Pic {
 					width: calc(516/750*100vw);
 					height: calc(496/750*100vw);
 					top: 45vw;
 					left: 12vw;
 					animation-delay: .3s;
 					-webkit-animation-delay: .3s;
 				}
 				.content {
 					position: absolute;
 					width: calc(511/750*100vw);
 					height: calc(355/750*100vw);
 					left: 13vw;
 					bottom: 15vw;
 					animation-delay: .6s;
 					-webkit-animation-delay: .6s;
 					.page1Content {
 						width: 100%;
 						height: 100%;
 					}
 					.txt {
 						height: calc(29/750*100vw);
 						width: auto;
 					}
 					.page1Txt1 {
 						bottom: 19vw;
 						left: 4vw;
 					}
 					.page1Txt2 {
 						bottom: 19vw;
 						left: 24vw;
 					}
 					.page1Txt3 {
 						bottom: 13vw;
 						left: 28vw;
 					}
 					.page1Txt4 {
 						bottom: 13vw;
 						left: 40vw;
 					}
 					.page1Txt5 {
 						bottom: 13vw;
 						left: 52vw;
 					}
 					.page1Txt6_1 {
 						bottom: 13vw;
 						left: 60vw;
 					}
 					.page1Txt6_2 {
 						bottom: 6.2vw;
 						left: 0;
 					}
 					.head{
 						position: absolute;
 						width: calc(42/750*100vw);
 						height: auto;
 						top: 27vw;
 						left: 18vw;
 					}
 				}
 			}
 			.page2 {
 				img {
 					position: absolute;
 					width: auto;
 				}
 				.page2Title {
 					height: calc(44/750*100vw);
 					left: 17.5vw;
 					top: 19vw;
 				}
 				.progressBox {
 					position: absolute;
 					width: calc(21/750*100vw);
 					height: calc(890/750*100vw);
 					top: 26.5vw;
 					left: 6vw;
 					overflow: hidden;
 					-webkit-animation: 3s linear .5s both;
 					animation: 3s linear .5s both;
 					-webkit-animation-name: progressBoxMc;
 					animation-name: progressBoxMc;
 					img {
 						width: 100%;
 						height: 100%;
 						-webkit-animation: 3s linear .5s both;
 						animation: 3s linear .5s both;
 						-webkit-animation-name: progressMc;
 						animation-name: progressMc;
 					}
 				}
 				.txt {
 					height: calc(90/750*100vw);
 					left: 13vw;
 				}
 				.page2Txt1 {
 					top: 29.7vw;
 					animation-delay: .5s;
 					-webkit-animation-delay: .5s;
 				}
 				.page2Txt2 {
 					top: 48.7vw;
 					animation-delay: 1s;
 					-webkit-animation-delay: 1s;
 				}
 				.page2Txt3 {
 					top: 68vw;
 					animation-delay: 1.5s;
 					-webkit-animation-delay: 1.5s;
 				}
 				.page2Txt4 {
 					top: 88vw;
 					animation-delay: 2s;
 					-webkit-animation-delay: 2s;
 				}
 				.page2Txt5 {
 					top: 107.5vw;
 					animation-delay: 2.5s;
 					-webkit-animation-delay: 2.5s;
 				}
 				.page2Txt6 {
 					top: 126.5vw;
 					animation-delay: 3s;
 					-webkit-animation-delay: 3s;
 				}
 			}
 			.page3 {
 				img {
 					position: absolute;
 					height: auto;
 				}
 				.page3Title {
 					left: 19vw;
 					top: 18.5vw;
 					width: calc(410/750*100vw);
 				}
 				.page3Pic {
 					left: 10vw;
 					top: 35.5vw;
 					width: calc(559/750*100vw);
 					animation-delay: .3s;
 					-webkit-animation-delay: .3s;
 				}
 			}
 			.page4{
 				.page4Title{
 					position: absolute;
 					width: calc(546/750*100vw);
 					height: auto;
 					left: 12vw;
 					top: 19vw;
 				}
 				.mySwiperBox{
 					height: calc(649/750*100vw);
 					bottom: 14.5vw;
 					.my-swipe .van-swipe-item {
 					  line-height: calc(649/750*100vw);
 						img{
 							height: calc(649/750*100vw);
 						}
 					}
 				}
 			}
 			.page5{
 				.page5Title{
 					position: absolute;
 					width: calc(591/750*100vw);
 					height: auto;
 					left: 9vw;
 					top: 18.5vw;
 				}
 				.mySwiperBox{
 					height: calc(412/750*100vw);
 					bottom: 34vw;
 					.my-swipe .van-swipe-item {
 					  line-height: calc(412/750*100vw);
 						img{
 							height: calc(412/750*100vw);
 						}
 					}
 				}
 			}
 			.page6{
 				.page6Title{
 					position: absolute;
 					width: calc(512/750*100vw);
 					height: auto;
 					left: 13vw;
 					top: 19vw;
 				}
 				.mySwiperBox{
 					height: calc(656/750*100vw);
 					bottom: 27vw;
 					.my-swipe .van-swipe-item {
 					  line-height: calc(656/750*100vw);
 						img{
 							height: calc(656/750*100vw);
 						}
 					}
 				}
 				.page6Txt{
 					position: absolute;
 					width: calc(596/750*100vw);
 					height: auto;
 					bottom: 13vw;
 					left: 7vw;
 				}
 			}
 			.page7{
 				.page7Title{
 					position: absolute;
 					width: calc(330/750*100vw);
 					height: auto;
 					left: 25vw;
 					top: 21vw;
 				}
 				.page7Txt{
 					position: absolute;
 					width: calc(601/750*100vw);
 					height: auto;
 					top: 33vw;
 					left: 6.3vw;
 					animation-delay: .3s;
 					-webkit-animation-delay: .3s;
 				}
 			}
 			.page8{
 				.page8Title{
 					position: absolute;
 					height: calc(44/750*100vw);
 					width: auto;
 					left: 22vw;
 					top: 23vw;
 				}
 				.page8Txt{
 					position: absolute;
 					width: calc(516/750*100vw);
 					height: auto;
 					left: 12vw;
 					top: 34.5vw;
 				}
 				.page8QR{
 					position: absolute;
 					width: calc(231/750*100vw);
 					height: auto;
 					left: 32vw;
 					bottom: 22vw;
 				}
 			}
 			.pageArrow {
 				position: absolute;
 				width: calc(42/750*100vw);
 				bottom: 3vw;
 				left: 46vw;
 			}
 		}
 		.Popup {
 			position: fixed;
 			width: 100%;
 			height: 100%;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			background-color: rgba(0, 0, 0, 0.7);
 			.contentBox {
 				position: relative;
 				img {
 					height: auto;
 				}
 				.btn {
 					position: absolute;
 					width: calc(37/750*100vw);
 				}
 				.pic {
 					width: calc(700/750*100vw);
 				}
 				.close1 {
 					top: 4vw;
 					right: 5vw;
 				}
 				.close2 {
 					top: 8vw;
 					right: 5vw;
 				}
 			}
 		}
 	}
 </style>
--- a/vue.config.js
+++ b/vue.config.js
 // vue.config.js
 module.exports = {
  // 选项...
  publicPath: process.env.NODE_ENV === 'production'
    ? '/2020/516/'
    : '/'
 }