chenming
/
516_gongyin
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

更新

master
wuwenjie 5 years ago
parent
762498e2f7
commit
7b6d34e521
17 changed files with 12683 additions and 0 deletions
Split View Show Diff Stats
  1. +17
    -0
      README.md
  2. +5
    -0
      babel.config.js
  3. +11641
    -0
      package-lock.json
  4. +29
    -0
      package.json
  5. BIN
      public/favicon.ico
  6. +17
    -0
      public/index.html
  7. +12
    -0
      src/App.vue
  8. BIN
      src/assets/logo.png
  9. +59
    -0
      src/components/HelloWorld.vue
  10. +221
    -0
      src/js/img.js
  11. +18
    -0
      src/main.js
  12. +21
    -0
      src/router/index.js
  13. +15
    -0
      src/store/index.js
  14. +63
    -0
      src/style/animate.css
  15. +25
    -0
      src/style/base.css
  16. +533
    -0
      src/views/Home.vue
  17. +7
    -0
      vue.config.js

+ 17
- 0
README.md View File

@@ -1,2 +1,19 @@
# 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/).

+ 5
- 0
babel.config.js View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

+ 11641
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 29
- 0
package.json View File

@@ -0,0 +1,29 @@
{
"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"
]
}

BIN
public/favicon.ico View File

Before After

+ 17
- 0
public/index.html View File

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

+ 12
- 0
src/App.vue View File

@@ -0,0 +1,12 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
@import url("./style/animate.css");
@import url("./style/base.css");
</style>
<style lang="scss">

</style>

BIN
src/assets/logo.png View File

Before After
Width: 200  |  Height: 200  |  Size: 6.7KB

+ 59
- 0
src/components/HelloWorld.vue View File

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

+ 221
- 0
src/js/img.js View File

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

+ 18
- 0
src/main.js View File

@@ -0,0 +1,18 @@
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')

+ 21
- 0
src/router/index.js View File

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

+ 15
- 0
src/store/index.js View File

@@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

+ 63
- 0
src/style/animate.css View File

@@ -0,0 +1,63 @@
/* 淡入 */
.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);}
}

+ 25
- 0
src/style/base.css View File

@@ -0,0 +1,25 @@
* {
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%);
}

+ 533
- 0
src/views/Home.vue View File

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

+ 7
- 0
vue.config.js View File

@@ -0,0 +1,7 @@
// vue.config.js
module.exports = {
// 选项...
publicPath: process.env.NODE_ENV === 'production'
? '/2020/516/'
: '/'
}

Write Preview
Loading…
Cancel
Save