MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bf

Browse Source
This commit is contained in:
zyronon 2019-08-03 23:54:03 +08:00
parent 7591e90c1d
commit 1fdcaeb56e
7 changed files with 107 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -1581,6 +1581,11 @@
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"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": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@ -12952,6 +12957,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"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": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

3
package.json
View File

@ -12,7 +12,8 @@
"lodash": "^4.17.14",
"pinyin": "^2.9.0",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
"vue-router": "^3.0.7",
"vueg": "^1.4.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.3",

40
src/App.vue
View File

@ -1,13 +1,31 @@
<template>
<div id="app" >
<router-view></router-view>
<div id="app">
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
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>
@ -16,4 +34,18 @@
background: #2e3244;
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>

7
src/main.js
View File

@ -2,6 +2,8 @@ import Vue from 'vue'
import App from './App.vue'
import Icon from 'vue-svg-icon/Icon.vue'
import VueRouter from 'vue-router'
import vueg from 'vueg'
import './assets/scss/index.scss'
import Index from './pages/home/Index'
import Attention from './pages/home/Attention'
@ -34,6 +36,8 @@ const router = new VueRouter({
{ path: '/myCard', component: MyCard },
]
})
Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置
Vue.mixin({
methods: {
getCss(curEle, attr) {
@ -52,6 +56,9 @@ Vue.mixin({
}
reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
return reg.test(val) ? parseFloat(val) : val
},
nav(path, query = {}) {
this.$router.push({ path, query })
}
}
})

6
src/pages/home/Me.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="Me">
<div class="Me" >
<div class="wrapper">
<div class="left">
<header>
<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>
<div class="detail">
<div class="head">
@ -159,7 +159,7 @@
</div>
<div class="right">
<ul>
<li>
<li @click="nav('myCard')">
<img src="../../assets/img/icon/card-gray.png" alt="">
<span>个人名片</span>
</li>

71
src/pages/me/MyCard.vue
View File

@ -1,43 +1,46 @@
<template>
<div id='MyCard'>
<BaseHeader @back="back">
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg"
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"
fill="#8a8a8a" p-id="15321">
</path>
</svg>
</BaseHeader>
<div class="content">
<div class="card">
<div class="logo-ctn">
<img src="@/assets/img/icon/head-image.jpeg" alt="">
<div id='MyCard'>
<BaseHeader @back="back">
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg"
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"
fill="#8a8a8a" p-id="15321">
</path>
</svg>
</BaseHeader>
<div class="content">
<div class="card">
<div class="logo-ctn">
<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>
<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>
</div>
</transition>
</template>
<script>
export default {
name: "MyCard",
components: {},
data() {
return {}
return {
transitionName: 'fade'
}
},
created() {
@ -61,6 +64,7 @@
padding: 20px;
.card {
margin: 10px 20px;
background: white;
border-radius: 10px;
display: flex;
@ -77,7 +81,8 @@
display: flex;
align-items: center;
justify-content: center;
img{
img {
width: 50%;
height: 50%;
border-radius: 50%;
@ -85,7 +90,7 @@
}
.notice {
margin-top: 80px;
margin-top: 60px;
opacity: .4;
}
@ -123,4 +128,6 @@
}
}
}
</style>

7
vue.config.js
View File

@ -14,4 +14,11 @@ module.exports = {
// 是否为生产环境构建生成 source map
productionSourceMap: false,
css: {},
devServer: {
open: true,
host: '0.0.0.0',
port: 8863,
https: false,
hotOnly: false,
},
}