bf
This commit is contained in:
zyronon
parent
7591e90c1d
commit
1fdcaeb56e
13
package-lock.json
generated
13
package-lock.json
generated
@ -1581,6 +1581,11 @@
|
|||||||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"animate.css": {
|
||||||
|
"version": "3.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz",
|
||||||
|
"integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw=="
|
||||||
|
},
|
||||||
"ansi-colors": {
|
"ansi-colors": {
|
||||||
"version": "3.2.4",
|
"version": "3.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
|
||||||
@ -12952,6 +12957,14 @@
|
|||||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"vueg": {
|
||||||
|
"version": "1.4.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/vueg/-/vueg-1.4.5.tgz",
|
||||||
|
"integrity": "sha512-Q+UTTLPZ1yIZp4zQPNBQVMdKTsgINfArzQDVGpiM7Ga02WZ4kkND14v0OfW+BEYV6pd8d8WdT6SILPBCzF3F8A==",
|
||||||
|
"requires": {
|
||||||
|
"animate.css": "^3.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"watchpack": {
|
"watchpack": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||||
|
|||||||
@ -12,7 +12,8 @@
|
|||||||
"lodash": "^4.17.14",
|
"lodash": "^4.17.14",
|
||||||
"pinyin": "^2.9.0",
|
"pinyin": "^2.9.0",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-router": "^3.0.7"
|
"vue-router": "^3.0.7",
|
||||||
|
"vueg": "^1.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^3.0.3",
|
"@vue/cli-plugin-babel": "^3.0.3",
|
||||||
|
|||||||
40
src/App.vue
40
src/App.vue
@ -1,13 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app" >
|
<div id="app">
|
||||||
<router-view></router-view>
|
<transition name="slide-fade">
|
||||||
|
<router-view></router-view>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app'
|
name: 'app',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
transitionName: 'fold-left'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$route'(to, from) {
|
||||||
|
//此时假设从index页面跳转到pointList页面
|
||||||
|
// console.log(to) // "/pointList"
|
||||||
|
// console.log(from) // “/index”
|
||||||
|
// if (to.path === '/me') {
|
||||||
|
// this.transitionName = 'fold-right'
|
||||||
|
// } else {
|
||||||
|
// this.transitionName = 'fold-left'
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -16,4 +34,18 @@
|
|||||||
background: #2e3244;
|
background: #2e3244;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 可以设置不同的进入和离开动画 */
|
||||||
|
/* 设置持续时间和动画函数 */
|
||||||
|
.slide-fade-enter-active {
|
||||||
|
transition: all .3s ease;
|
||||||
|
}
|
||||||
|
.slide-fade-leave-active {
|
||||||
|
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||||
|
}
|
||||||
|
.slide-fade-enter, .slide-fade-leave-to
|
||||||
|
/* .slide-fade-leave-active for below version 2.1.8 */ {
|
||||||
|
transform: translateX(10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,6 +2,8 @@ import Vue from 'vue'
|
|||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import Icon from 'vue-svg-icon/Icon.vue'
|
import Icon from 'vue-svg-icon/Icon.vue'
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
|
import vueg from 'vueg'
|
||||||
|
|
||||||
import './assets/scss/index.scss'
|
import './assets/scss/index.scss'
|
||||||
import Index from './pages/home/Index'
|
import Index from './pages/home/Index'
|
||||||
import Attention from './pages/home/Attention'
|
import Attention from './pages/home/Attention'
|
||||||
@ -34,6 +36,8 @@ const router = new VueRouter({
|
|||||||
{ path: '/myCard', component: MyCard },
|
{ path: '/myCard', component: MyCard },
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置
|
||||||
|
|
||||||
Vue.mixin({
|
Vue.mixin({
|
||||||
methods: {
|
methods: {
|
||||||
getCss(curEle, attr) {
|
getCss(curEle, attr) {
|
||||||
@ -52,6 +56,9 @@ Vue.mixin({
|
|||||||
}
|
}
|
||||||
reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
|
reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
|
||||||
return reg.test(val) ? parseFloat(val) : val
|
return reg.test(val) ? parseFloat(val) : val
|
||||||
|
},
|
||||||
|
nav(path, query = {}) {
|
||||||
|
this.$router.push({ path, query })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="Me">
|
<div class="Me" >
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<header>
|
<header>
|
||||||
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
||||||
<img src="../../assets/img/icon/more.svg" alt="">
|
<img src="../../assets/img/icon/more.svg" alt="" @click="nav('myCard')">
|
||||||
</header>
|
</header>
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
@ -159,7 +159,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li @click="nav('myCard')">
|
||||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||||
<span>个人名片</span>
|
<span>个人名片</span>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@ -1,43 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id='MyCard'>
|
<div id='MyCard'>
|
||||||
<BaseHeader @back="back">
|
<BaseHeader @back="back">
|
||||||
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
p-id="15320" width="32" height="32">
|
p-id="15320" width="32" height="32">
|
||||||
<path d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
|
<path d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
|
||||||
fill="#8a8a8a" p-id="15321">
|
fill="#8a8a8a" p-id="15321">
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
</BaseHeader>
|
</BaseHeader>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="logo-ctn">
|
<div class="logo-ctn">
|
||||||
<img src="@/assets/img/icon/head-image.jpeg" alt="">
|
<img src="@/assets/img/icon/head-image.jpeg" alt="">
|
||||||
|
</div>
|
||||||
|
<span class="name">TTentau</span>
|
||||||
|
<span class="notice">使用抖音扫码，加我好友</span>
|
||||||
|
<img src="@/assets/img/icon/logo2.png" alt="" class="logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notice-two">请使用最新版抖音扫描</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="btn">
|
||||||
|
<img src="@/assets/img/icon/download.png" alt="">
|
||||||
|
<span>保存到相册</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<img src="@/assets/img/icon/scan.png" alt="">
|
||||||
|
<span>保存到相册</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="name">TTentau</span>
|
|
||||||
<span class="notice">使用抖音扫码，加我好友</span>
|
|
||||||
<img src="@/assets/img/icon/logo2.png" alt="" class="logo">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="notice-two">请使用最新版抖音扫描</div>
|
</transition>
|
||||||
<div class="footer">
|
|
||||||
<div class="btn">
|
|
||||||
<img src="@/assets/img/icon/download.png" alt="">
|
|
||||||
<span>保存到相册</span>
|
|
||||||
</div>
|
|
||||||
<div class="btn">
|
|
||||||
<img src="@/assets/img/icon/scan.png" alt="">
|
|
||||||
<span>保存到相册</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "MyCard",
|
name: "MyCard",
|
||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
transitionName: 'fade'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
@ -61,6 +64,7 @@
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
margin: 10px 20px;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -77,7 +81,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -85,7 +90,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
margin-top: 80px;
|
margin-top: 60px;
|
||||||
opacity: .4;
|
opacity: .4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -123,4 +128,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -14,4 +14,11 @@ module.exports = {
|
|||||||
// 是否为生产环境构建生成 source map
|
// 是否为生产环境构建生成 source map
|
||||||
productionSourceMap: false,
|
productionSourceMap: false,
|
||||||
css: {},
|
css: {},
|
||||||
|
devServer: {
|
||||||
|
open: true,
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 8863,
|
||||||
|
https: false,
|
||||||
|
hotOnly: false,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user