給大家推薦作者大大的這個項目：https://github.com/mwy516/vue-fund
作者大大的項目真的也是非常有意思哇
我們可以先看一下項目效果
作者大大的這個項目，其實也是有一些通用的項目模板架構在裏面的，我們可以一起看這個美麗的項目哇
真的超級感謝這些慷慨的作者大大們，讓我們看見這麼美麗又有趣的項目
接着跟我一起看項目哇
在index.html中，我們可以看到，引用了wow.js,wow.js和animate.css結合使用，會讓消化效果非常的絲滑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name=”description” content="Qbao是基於Qtum技術的去中心化社交網絡，擁有數字貨幣錢包，交易，支付，dapp商店，社交等多種應用場景。目標是成爲微信那樣擁有完整生態的去中心化應用。">
<meta name=”keywords” content="Qbao Network，Qbao團隊，Qbao Network是誰？Qbao Network怎麼樣？Qbao 陳琳，區塊鏈錢包，區塊鏈社交，區塊鏈應用，幣圈微信，區塊鏈世界，區塊鏈世界入口。Qbao Network白皮書，QBT，Qbt數字貨幣">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<!--<link rel="shortcut icon" href="static/favicon2.ico">-->
<link rel="shortcut icon" href="static/favicon3.ico" type="image/x-icon"/>
<title>Qbao Network-區塊鏈世界的入口</title>
<!--<link rel="stylesheet" href="//at.alicdn.com/t/font_529370_wbyej4ehk2dibe29.css">-->
<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
<style>
html,body{
font-weight: 200;
font-family: 'PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
}
</style>
</head>
<body>
<div id="qbao_fund"></div>
<script src="./static/wow.min.js"></script>
<script>
var wow = new WOW({
boxClass: 'wow',
animateClasss: 'animated',
offset: 100,
mobile: false,
live: true
});
wow.init();
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1272937096'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1272937096%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
<!-- built files will be auto injected -->
</body>
</html>
main.js中還引用了vue-particles，粒子效果背景
//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import VueParticles from 'vue-particles'
import 'font-awesome/css/font-awesome.min.css'
import './style/font.css'
import 'vue2-animate/dist/vue2-animate.min.css';
// import particles from 'particles.js'
// Vue.use(particles)
Vue.use(VueParticles);
Vue.config.productionTip = false;
/* eslint-disable */
require('./router/index.js');
FastClick.attach(document.body);
app.vue中是入口文件
//app.vue
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
@import "./style/common.less";
@import './style/reset.less';
@import './style/phone.less';
/*@import 'vue2-animate/dist/vue2-animate.min.css';*/
</style>
router.js
//router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '../App'
import VueI18n from 'vue-i18n'
import Index from '../components/Index.vue'
import Doc from '../components/Home/Doc.vue'
import messages from '../i18n/translate.js'
import support from '../components/support/support.vue'
// require('../i18n/translate.js')
const routes = [
{
path: '/',
name: 'index',
component: Index
},
{
path: '/doc',
name: 'doc',
component: Doc
},
{
path: '/support',
name: 'support',
component: support
}
];
Vue.use(VueRouter);
const router = new VueRouter({
mode: '',
base: __dirname,
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (to.hash) {
return {selector: to.hash}
}
}
// if (to.hash) {
// return {
// // 這個是透過 to.hash 的值來找到對應的元素
// // 照你的 html 來看是不用多加處理這樣就可以了
// // 例如你按下 #3 的連結，就會變成 querySelector('#3')，自然會找到 id = 3 的元素
// selector: to.hash
// }
// }
}
});
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'zh', // 語言標識
messages
});
new Vue({
router,
i18n,
render: h => h(App)
}).$mount('#qbao_fund');
Index.vue
<template>
<div class="index">
<Head :gradient="gradConfig"></Head>
<div style="padding-top: 100px;background-color: #181B2A;" v-if="guideShow">
<Guide></Guide>
</div>
<div>
<home></home>
<white-paper></white-paper>
<about></about>
<features></features>
<scenarios></scenarios>
<product></product>
<road-map></road-map>
<download></download>
<teams></teams>
<partner></partner>
</div>
<foot></foot>
</div>
</template>
<script>
import Head from './Head/Head'
import Home from './Home/Home'
import WhitePaper from './WhitePaper/WhitePaper'
import About from './About/About'
import Features from './Features/Features'
import Scenarios from './Scenarios/Scenarios'
import Product from './Product/Product'
import RoadMap from './RoadMap/RoadMap'
import Download from './Download/Download'
import Partner from './Partner/Partner'
import Foot from './Foot/Foot'
import Guide from '../components/Home/Doc.vue'
import bus from '../bus'
import teams from '../components/team/team.vue'
export default {
components: {
RoadMap,
Head,
Home,
WhitePaper,
About,
Features,
Scenarios,
Product,
Download,
Partner,
Foot,
Guide,
teams
},
data() {
return {
guideShow: false,
gradConfig: {
navBgColor: 'transparent',
navShadow:'transparent',
navColor:'transparent',
logoShow:true
}
}
},
methods: {
Gradient() {
let Hight = window.innerHeight;
let scroll = document.documentElement.scrollTop || document.body.scrollTop;
let width = document.documentElement.clientWidth;
if (width < 679) {
this.gradConfig.navBgColor = '#fff'
} else {
if (scroll <= 0) {
this.gradConfig.navBgColor = 'transparent';
this.gradConfig.navColor = '#fff';
this.gradConfig.navShadow='none';
this.logoShow=true;
} else if (scroll > (Hight-80)) {
this.logoShow=false;
this.gradConfig.navBgColor = '#fff';
this.gradConfig.navColor = '#000';
this.gradConfig.navShadow='0 2px 4px 0 rgba(151, 145, 151, 0.1)';
}
}
}
},
mounted() {
bus.$on('guideShow', (type) => {
this.guideShow = type;
})
window.addEventListener('scroll', this.Gradient)
}
}
</script>
<style lang="less" scoped>
.index {
width: 100%;
}
</style>
接下來我們按照順序看組件內容
在header部分有一個比較有意思的，就是多語言切換功能，其實我們做這個的時候，挺喜歡用組件的，不過，我看到博主大大這個，就是純手寫的
寫的很有意思的
//head.vue
<template>
<header class="nav" :style="{'background':gradient.navBgColor,'box-shadow':gradient.navShadow}">
<div class="header">
<div class="nav_menu close" v-show="showMenu" @click="hideMenu">
<i class="iconfont icon-guanbi"></i>
</div>
<div class="nav_menu open" v-show="!showMenu" @click="Menu">
<i class="iconfont icon-caidan"></i>
</div>
<a href="#" class="logo" v-if="gradient.navShadow=='none'"></a>
<a href="#" class="logo1" v-else></a>
<nav :class="{'menu':showMenu}">
<a style="margin-right:.2rem;" v-for="item in navbar" :key="item" @click="jumbTo(item)"
:class="{'active':item===navItem}" :style="{'color':gradient.navColor}">
{{$t(item)}}
</a>
<a style="margin-right:10px;position: relative;" @click="showLang" :style="{'color':gradient.navColor}">
<i class="langIcon" v-show="nowLang=='中文'"><img src="../../assets/langicon_zh.png" alt=""></i>
<i class="langIcon" v-show="nowLang=='ENGLISH'"><img src="../../assets/langicon_en.png" alt=""></i>
<i class="langIcon" v-show="nowLang=='한국어'"><img src="../../assets/langicon_ko.png" alt=""></i>
{{nowLang}}
</a>
<div class="lang_menu" v-show="isShowLang">
<p @click="lang('zh')"><i class="icon_zh"></i>中文</p>
<p @click="lang('en')"><i class="icon_en"></i>English</p>
<p @click="lang('ko')"><i class="icon_ko"></i>한국어</p>
</div>
<div class="menu_mask" v-show="isShowLang" @click="isShowLang=false"></div>
</nav>
</div>
</header>
</template>
<script>
import bus from '../../bus';
export default {
data() {
return {
showMenu: false,
navItem: 'head.index',
nowLang: '中文',
isShowLang: false,
nowLangObj: {
'zh': '中文',
'en': 'ENGLISH',
'ko': '한국어'
},
navbar: ['head.index', 'head.qbaoIo', 'head.qbao', 'head.scenes','head.map', 'head.teams', 'head.partner', 'head.contact'],
}
},
components: {},
props: {
gradient: {
navBgColor: String,
navShadow:String,
navColor: String,
logoShow:Boolean
}
},
methods: {
jumbTo(item) {
this.navItem = item;
this.$router.push('#' + item.split('.')[1])
},
lang(langu) {
this.$i18n.locale = langu || 'en';
this.isShowLang = false;
this.nowLang = this.nowLangObj[langu];
},
showLang() {
this.isShowLang = true;
},
Menu() {
this.showMenu = true;
},
hideMenu() {
this.showMenu = false;
}
}
}
</script>
<style lang="less" scoped type="text/less">
#app .header nav.menu{
display: block;
}
.nav {
position: fixed;
z-index: 200;
width: 100%;
min-height: 50px;
.header {
padding: 0 10px;
a.active{
color:#3997F8 !important;
}
a {
display: inline-block;
cursor: pointer;
margin-right: .2rem;
font-size: 15px;
color:#fff;
font-weight: lighter;
height: 0.7rem;
line-height: 0.7rem;
font-family: 'PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
&.logo {
background: url("../../assets/logo.png") no-repeat center;
-webkit-background-size: contain;
background-size: contain;
height: 0.7rem;
width: 1.6rem;
float: left;
}
&.logo1 {
background: url("../../assets/logo1.png") no-repeat center;
-webkit-background-size: contain;
background-size: contain;
height: 0.7rem;
width: 1.6rem;
float: left;
}
&:hover {
color: #3997F8;
}
}
.nav_menu {
position: relative;
float: right;
margin: 20px 15px 8px 0;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid #ddd;
background: #fff;
display: none;
i{
color:#666;
}
}
nav{
float:right;
.langIcon{
position: relative;
left:0;
display: inline-block;
vertical-align: middle;
margin-right:5px;
img{
width:22px;
height:16px;
}
}
.lang_menu {
position: absolute;
right: 32px;
top: 80px;
width: 130px;
display: inline-block;
background: #fff;
border-radius: .2em;
color: #000;
box-shadow: 0 1px 5px #d6e2ce;
text-align: left;
z-index: 200;
p {
padding: 10px 20px;
}
p:hover {
background-color: #f0f0f0;
cursor: pointer;
}
i.icon_zh,i.icon_en,i.icon_ko{
display: inline-block;
vertical-align: middle;
width:22px;
height:16px;
margin-right:5px;
}
i.icon_zh{
background: url("../../assets/langicon_zh.png") no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
i.icon_en{
background: url("../../assets/langicon_en.png") no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
i.icon_ko{
background: url("../../assets/langicon_ko.png") no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
}
}
}
}
</style>
//home.vue
<template>
<div class="home" :style="{'height':HEIGHT + 'px'}" id="index">
<canvas id="canvas" width="1349" height="404"></canvas>
<div class="container">
<div class="con animated wow fadeInUp">
<h2>{{$t('home.title')}}</h2>
<div class="dec">
<p>{{$t('home.txt2')}}</p>
<p>{{$t('home.txt3')}}</p>
<p>{{$t('home.txt1')}}</p>
</div>
<div class="btn">
<div class="button and" @click="andMenuShow">
<div class="img">
<i class="iconfont icon-ai-app"></i>
</div>
<div class="btnDec">
<p>Available on the</p>
<div>Android</div>
</div>
<ul class="btnMenu" v-show="andBtn">
<li @click="androidShow">{{$t('home.qbao')}}</li>
<li>
<a href="http://app.mi.com/details?id=com.aether.coder.qbao&ref=search">
{{$t('home.xiaomi')}}
</a>
</li>
<li>
<a href="https://mobile.baidu.com/item?docid=24432603&f0=search_searchContent%400_appBaseNormal%400">
{{$t('home.baidu')}}
</a>
</li>
</ul>
</div>
<div class="button">
<a href="https://play.google.com/store/apps/details?id=com.aether.coder.qbao" target="_blank">
<div class="img">
<i class="iconfont icon-google-play" style="font-size: 38px;"></i>
</div>
<div class="btnDec">
<p>GET IT ON</p>
<div>Google Play</div>
</div>
</a>
</div>
<div class="button" @click="iosShow">
<div class="img">
<i class="iconfont icon-ios"></i>
</div>
<div class="btnDec">
<p>Download on the</p>
<div>AppStore</div>
</div>
</div>
</div>
</div>
</div>
<androidDialog :android="android"></androidDialog>
<iOSDialog :iOS="iOS" :sss="ss"></iOSDialog>
<div class="mark" v-if="mark" @click="close"></div>
</div>
</template>
<script>
import Guide from './Doc.vue';
import bus from '../../bus';
import androidDialog from './Android.vue';
import iOSDialog from './iOS.vue';
export default {
data() {
return {
android: {
show: false
},
iOS: {
show: false
},
mark: false,
ss: {
show: false
},
andBtn: false
}
},
components: {
androidDialog,
iOSDialog
},
computed: {
HEIGHT() {
return window.innerHeight
}
},
methods: {
close() {
this.android.show = false;
this.mark = false;
this.iOS.show = false;
this.ss.show = false;
this.andBtn = false;
},
andMenuShow() {
this.andBtn = true;
this.mark = true;
},
androidShow() {
this.andBtn = false;
let width = document.documentElement.clientWidth
if (width < 678) {
window.location.href = "https://api.aethercoder.com/file/download/pkg/QBaoNetwork.apk"
} else {
this.android.show = true;
this.mark = true;
}
},
iosShow() {
let width = document.documentElement.clientWidth
if (width < 678) {
window.location.href = "https://itunes.apple.com/cn/app/id1333370260"
} else {
this.mark = false;
this.iOS.show = true;
}
}
},
mounted() {
bus.$on('markShow', (type) => {
this.mark = type;
this.andBtn =false;
});
// canvas
let o = document.getElementById('index');
let num = 200;
let w = window.innerWidth;
let h = o.offsetHeight;
let _x = 0;
let _y = 0;
let _z = 150;
let dtr = function (d) {
return d * Math.PI / 180;
};
let rnd = function () {
return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
};
let dist = function (p1, p2, p3) {
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
};
let cam = {
obj: {
x: _x,
y: _y,
z: _z
},
dest: {
x: 0,
y: 0,
z: 1
},
dist: {
x: 0,
y: 0,
z: 200
},
ang: {
cplane: 0,
splane: 0,
ctheta: 0,
stheta: 0
},
zoom: 1,
disp: {
x: w / 2,
y: h / 2,
z: 0
},
upd: function () {
cam.dist.x = cam.dest.x - cam.obj.x;
cam.dist.y = cam.dest.y - cam.obj.y;
cam.dist.z = cam.dest.z - cam.obj.z;
cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
}
};
let trans = {
parts: {
sz: function (p, sz) {
return {
x: p.x * sz.x,
y: p.y * sz.y,
z: p.z * sz.z
};
},
rot: {
x: function (p, rot) {
return {
x: p.x,
y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
};
},
y: function (p, rot) {
return {
x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
y: p.y,
z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
};
},
z: function (p, rot) {
return {
x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
z: p.z
};
}
},
pos: function (p, pos) {
return {
x: p.x + pos.x,
y: p.y + pos.y,
z: p.z + pos.z
};
}
},
pov: {
plane: function (p) {
return {
x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
y: p.y,
z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
};
},
theta: function (p) {
return {
x: p.x,
y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
};
},
set: function (p) {
return {
x: p.x - cam.obj.x,
y: p.y - cam.obj.y,
z: p.z - cam.obj.z
};
}
},
persp: function (p) {
return {
x: p.x * cam.dist.z / p.z * cam.zoom,
y: p.y * cam.dist.z / p.z * cam.zoom,
z: p.z * cam.zoom,
p: cam.dist.z / p.z
};
},
disp: function (p, disp) {
return {
x: p.x + disp.x,
y: -p.y + disp.y,
z: p.z + disp.z,
p: p.p
};
},
steps: function (_obj_, sz, rot, pos, disp) {
let _args = trans.parts.sz(_obj_, sz);
_args = trans.parts.rot.x(_args, rot);
_args = trans.parts.rot.y(_args, rot);
_args = trans.parts.rot.z(_args, rot);
_args = trans.parts.pos(_args, pos);
_args = trans.pov.plane(_args);
_args = trans.pov.theta(_args);
_args = trans.pov.set(_args);
_args = trans.persp(_args);
_args = trans.disp(_args, disp);
return _args;
}
};
let threeD = function (param) {
this.transIn = {};
this.transOut = {};
this.transIn.vtx = (param.vtx);
this.transIn.sz = (param.sz);
this.transIn.rot = (param.rot);
this.transIn.pos = (param.pos);
};
threeD.prototype.vupd = function () {
this.transOut = trans.steps(
this.transIn.vtx,
this.transIn.sz,
this.transIn.rot,
this.transIn.pos,
cam.disp
);
};
let Build = function () {
this.vel = 0.04;
this.lim = 360;
this.diff = 200;
this.initPos = 100;
this.toX = _x;
this.toY = _y;
this.go();
};
Build.prototype.go = function () {
this.canvas = document.getElementById("canvas");
this.canvas.width = window.innerWidth;
this.canvas.height = o.offsetHeight;
this.$ = canvas.getContext("2d");
this.$.globalCompositeOperation = 'source-over';
this.varr = [];
this.dist = [];
this.calc = [];
for (let i = 0, len = num; i < len; i++) {
this.add();
}
this.rotObj = {
x: 0,
y: 0,
z: 0
};
this.objSz = {
x: w / 5,
y: h / 5,
z: w / 5
};
};
Build.prototype.add = function () {
this.varr.push(new threeD({
vtx: {
x: rnd(),
y: rnd(),
z: rnd()
},
sz: {
x: 0,
y: 0,
z: 0
},
rot: {
x: 20,
y: -20,
z: 0
},
pos: {
x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
}
}));
this.calc.push({
x: 360 * Math.random(),
y: 360 * Math.random(),
z: 360 * Math.random()
});
};
Build.prototype.upd = function () {
cam.obj.x += (this.toX - cam.obj.x) * 0.05;
cam.obj.y += (this.toY - cam.obj.y) * 0.05;
};
Build.prototype.draw = function () {
this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
cam.upd();
this.rotObj.x += 0.1;
this.rotObj.y += 0.1;
this.rotObj.z += 0.1;
for (let i = 0; i < this.varr.length; i++) {
for (let val in this.calc[i]) {
if (this.calc[i].hasOwnProperty(val)) {
this.calc[i][val] += this.vel;
if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
}
}
this.varr[i].transIn.pos = {
x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
};
this.varr[i].transIn.rot = this.rotObj;
this.varr[i].transIn.sz = this.objSz;
this.varr[i].vupd();
if (this.varr[i].transOut.p < 0) continue;
let g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
this.$.globalCompositeOperation = 'lighter';
g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
this.$.fillStyle = g;
this.$.beginPath();
this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
this.$.fill();
this.$.closePath();
}
};
Build.prototype.anim = function () {
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
function (callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
let anim = function () {
this.upd();
this.draw();
window.requestAnimationFrame(anim);
}.bind(this);
window.requestAnimationFrame(anim);
};
Build.prototype.run = function () {
this.anim();
window.addEventListener('mousemove', function (e) {
this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
}.bind(this));
window.addEventListener('touchmove', function (e) {
e.preventDefault();
this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
}.bind(this));
window.addEventListener('mousedown', function (e) {
for (let i = 0; i < 100; i++) {
this.add();
}
}.bind(this));
window.addEventListener('touchstart', function (e) {
e.preventDefault();
for (let i = 0; i < 100; i++) {
this.add();
}
}.bind(this));
};
let app = new Build();
app.run();
window.addEventListener('resize', function () {
canvas.width = w = window.innerWidth;
canvas.height = h = window.innerHeight;
}, false);
}
}
</script>
<style lang="less" scoped type="text/less">
@import "../../style/common.less";
.home {
width: 100%;
background: #052342 url("../../assets/bg1.jpg") no-repeat 100% 100%;
-webkit-background-size: cover;
background-size: cover;
overflow: hidden;
#canvas {
left: 0;
width: 100%;
z-index: 1;
position: absolute;
}
.con {
color: #fff;
position: relative;
padding-top: 20%;
text-align: center;
z-index: 2;
h2 {
font-size: .5rem;
font-weight: 200;
margin-bottom: .6rem;
}
.dec {
font-size: .18rem;
font-weight: 100;
margin-bottom: 1rem;
}
.btn {
.button:hover {
background: #000;
}
.button:hover i, .button:hover .btnDec{
color: #fff;
}
.button:nth-child(2) {
margin: 0 37px;
}
.button {
z-index: 2;
cursor: pointer;
display: inline-block;
height: .52rem;
padding: 4px;
margin-right: 37px;
background: #fff;
color: #000;
min-width: 186px;
max-width: 234px;
position: relative;
border-radius: 5px;
.btnMenu {
z-index: 2;
position: absolute;
background: #fff;
width: 100%;
border-radius: 5px;
padding: 20px 0;
li {
height: 40px;
line-height: 40px;
}
li:hover{
background: #000;
color:#fff;
}
}
.img {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}
i {
font-size: 34px;
color: #000;
position: relative;
top: -16px;
}
.btnDec {
color: #212121;
text-align: left;
display: inline-block;
p {
font-size: .13rem;
}
div {
font-size: .21rem;
position: relative;
top: -5px;
}
}
}
}
}
.mark {
.x-mark;
z-index: 1;
}
}
</style>
這裏作者大大處理下載pdf的功能也是挺有意思的
<template>
<div class="whitepaper">
<div style="position: absolute;top:-1rem;" id="qbaoIo"></div>
<div class="container paper animated wow fadeInUp">
<div class="left">
<img src="../../assets/book.png" alt="">
<div class="content">
<h2>{{$t('whitepaper.whitePaper')}}</h2>
<p>{{$t('whitepaper.wpIntro1')}}</p>
<p>{{$t('whitepaper.wpIntro2')}}</p>
<p v-if="$i18n.locale=='en'">{{$t('whitepaper.wpIntro3')}}</p>
</div>
</div>
<div class="down">
<a target="_blank" :href="'https://qbao.fund/qbao/qbao/resources/pdf/qbao_fund_'+LANG()+'.pdf'">
{{$t('whitepaper.downLoad')}}
<i class="iconfont icon-arrow-bottom"></i>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {
LANG() {
if (this.$i18n.locale === 'zh') {
return 'zh-CN'
} else {
return this.$i18n.locale
}
}
}
}
</script>
<style lang="less" scoped>
.whitepaper {
margin: .6rem auto;
position: relative;
.paper{
background: #3997F8;
padding:10px 20px;
position: relative;
border-radius:5px;
color: #fff;
.left{
width:80%;
display: inline-block;
p{
font-size: 0.17rem;
}
img,.content{
vertical-align: middle;
display: inline-block;
line-height: 26px;
}
img{
width:100px;
margin-right: 10px;
}
.content{
width:77%;
h2{
font-size: 0.25rem;
font-weight: 300;
}
}
}
.down:hover{
background: #fff;
}
.down:hover a{
color:#3997F8;
}
.down{
border-radius:5px;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto 0;
width:20%;
height:55px;
line-height: 33px;
padding:10px 20px;
border:1px solid #fff;
text-align: center;
a{
font-size: 0.17rem;
color:#fff;
i{
margin-left: 20px;
}
}
}
}
}
</style>
這裏還引入了一個視頻
//About.vue
<template>
<div class="about">
<div style="position: absolute;top:-1rem;" id="qbao"></div>
<div class="container animated wow fadeInUp">
<h2>{{$t('about.qbao')}}</h2>
<p>{{$t('about.qbao1')}}</p>
<br>
<p>{{$t('about.qbao2')}}</p>
<video webkit-playsinline playsinline :poster="videoBg" controls height="400" width="600" id="video">
<source src="http://vliveachy.tc.qq.com/vhot2.qqvideo.tc.qq.com/AJauRuNzDQFIkbwN55Z_pAEEMsGZvkWmSkTLFjC0AHcM/d05401lp8mb.mp4?sdtfrom=v1010&guid=d977474a11b4024b7907e46017d963e0&vkey=9BAD1320405DEC9D504B7D2D620EAEB60E207DBF24ADE092E564E6578704BDA34BD6A452EE048C0625BDEC43DC5491541536E3A238B4A4D434AD49742EF5B91C8AECF199EA443DEE75BC075B7CE48DF7F56C3D4CAA33F4EF930299FB04D00CFAC61BBFCAD393DDAD559FCC6DB8D9376A0468C8D3000863A8&ocid=2602833324&ocid=776934828" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
videoBg:require('../../assets/videoBg.jpg'),
}
},
methods: {
},
}
</script>
<style lang="less" scoped>
.about {
text-align: center;
position: relative;
.container{
h2{
font-size: .2rem;
font-weight: 400;
margin-bottom: .4rem;
color: #49555f;
}
p{
font-size: 0.17rem;
color: #70808D;
font-weight: 200;
margin-bottom: .4rem;
}
video{
border-radius: 10px;
box-shadow: 0 12px 23px 0 rgba(74, 92, 105, 0.33);
transition: all 0.6s;
/*background: url("../../assets/videoBg.jpg") no-repeat;*/
/*background-size: cover;*/
}
video:hover{
transform: scale(1.1);
}
}
}
</style>
這個地方作者大大實現的思路也挺有意思的
//Features.vue
<template>
<div class="features">
<div class="container animated wow fadeInUp">
<ul class="left content">
<li>
<h3>{{$t('features.fun1')}}</h3>
<p>{{$t('features.fun11')}}</p>
</li>
<li>
<h3>{{$t('features.fun2')}}</h3>
<p>{{$t('features.fun21')}}</p>
</li>
</ul>
<div class="center content">
<h2 class="ceil">
{{$t('features.fun')}}
</h2>
</div>
<ul class="right content">
<li>
<h3>{{$t('features.fun3')}}</h3>
<p>{{$t('features.fun31')}}</p>
</li>
<li>
<h3>{{$t('features.fun4')}}</h3>
<p>{{$t('features.fun41')}}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
.features {
background: #052342;
width:100%;
min-height:200px;
margin:1rem 0;
padding:1rem 0;
.container{
display: flex;
position: relative;
.content{
flex:1;
}
.left,.right{
width:30%;
display: inline-block;
li{
border-radius:5px;
width:32.3%;
border: 1px solid #979797;
color: #fff;
padding:10px;
h3{
font-size: .17rem;
}
p{
font-size: 0.15rem;
}
}
li:nth-child(1){
position: absolute;
top:0;
}
li:nth-child(2){
position: absolute;
bottom:0;
}
}
.center{
width:40%;
/*width:340px;*/
/*height:340px;*/
padding:20px;
display: inline-block;
background: url("../../assets/feature.png") no-repeat center center;
background-size: cover;
.ceil{
font-size: 0.25rem;
font-weight: 300;
width:80%;
height:100%;
line-height: 3rem;
margin:auto;
text-align: center;
border-radius: 50%;
color:#fff;
background-image: linear-gradient(to right, #13C3F9,#727DFF)
}
}
}
}
</style>
//Scenarios.vue
<template>
<div class="scenarios">
<div style="position: absolute;top:-1rem;" id="scenes"></div>
<div class="container animated wow fadeInUp">
<h2>{{$t('scenarios.scenes')}}</h2>
<ul :class="{'enHeight':$i18n.locale=='en','koHeight':$i18n.locale=='ko'}">
<li>
<img src="../../assets/scenario4.png" alt="">
<div class="content">
<h3>{{$t('scenarios.title4')}}</h3>
<p>{{$t('scenarios.intro41')}}</p>
</div>
</li>
<li>
<img src="../../assets/scenario5.png" alt="">
<div class="content">
<h3>{{$t('scenarios.title5')}}</h3>
<p>{{$t('scenarios.intro5')}}</p>
</div>
</li>
<li>
<img src="../../assets/scenario6.png" alt="">
<div class="content">
<h3>{{$t('scenarios.title6')}}</h3>
<p>{{$t('scenarios.intro61')}}</p>
</div>
</li>
<li>
<img src="../../assets/scenario1.png" alt="">
<div class="content">
<h3>{{$t('scenarios.title1')}}</h3>
<p>{{$t('scenarios.intro11')}}</p>
</div>
</li>
<li>
<img src="../../assets/scenario2.png" alt="">
<div class="content">
<h3>{{$t('scenarios.title2')}}</h3>
<p>{{$t('scenarios.intro21')}}</p>
</div>
</li>
<li>
<img src="../../assets/scenario3.png" alt="">
<div class="content">
<h3>{{$t('scenarios.title3')}}</h3>
<p>{{$t('scenarios.intro31')}}</p>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
}
},
methods: {}
}
</script>
<style lang="less" scoped>
.scenarios {
position: relative;
margin-bottom: 1rem;
h2{
font-size: .25rem;
text-align: center;
}
ul{
li:hover{
box-shadow: 0 2px 41px 0 rgba(0,0,0,0.2);
}
li{
border-radius:5px;
width:47%;
background: #F6F7F9;
padding:40px 20px;
display: inline-block;
min-height:225px;
img{
width:90px;
margin-right: 10px;
vertical-align: middle;
display: inline-block;
}
.content{
width:70%;
display: inline-block;
vertical-align: middle;
min-height:135px;
h3{
font-size: .17rem;
}
p{
font-size: 0.15rem;
}
}
}
li:nth-child(odd){
margin: 2% 2% 2% 0;
}
li:nth-child(even){
margin: 2% 0 2% 2%;
}
}
.enHeight li .content{
height:185px;
}
.koHeight li .content{
height:165px;
}
}
</style>
不要小看這個圖哦，這個裏面還有很多是作者大大自己寫的呢，很精彩呢
//Product.vue
<template>
<div class="product">
<div class="img animated wow fadeInUp">
<img src="../../assets/product.png" alt="">
</div>
<div class="img1 animated wow fadeInUp">
<img src="../../assets/productBg.png" alt="">
</div>
<div class="product-content animated wow fadeInUp">
<div class="center">
<div class="circle">
<div class="pixi-item item-1">
<div class="inner">
<div class="icon">
<img src="../../assets/p10.png" alt="">
</div>
<p class="title">{{$t('product.trust')}}</p>
</div>
</div>
<div class="pixi-item item-2">
<div class="inner">
<div class="icon">
<img src="../../assets/p9.png" alt="">
</div>
<p class="title">{{$t('product.know')}}</p>
</div>
</div>
<div class="pixi-item item-3">
<div class="inner">
<div class="icon">
<img src="../../assets/p8.png" alt="">
</div>
<p class="title">{{$t('product.pay')}}</p>
</div>
</div>
<div class="pixi-item item-4">
<div class="inner">
<div class="icon">
<img src="../../assets/p7.png" alt="">
</div>
<p class="title">{{$t('product.content')}}</p>
</div>
</div>
<div class="pixi-item item-5">
<div class="inner">
<div class="icon">
<img src="../../assets/p6.png" alt="">
</div>
<p class="title">{{$t('product.engine')}}</p>
</div>
</div>
<div class="pixi-item item-6">
<div class="inner">
<p class="title">{{$t('product.smart')}}</p>
<div class="icon">
<img src="../../assets/p5.png" alt="">
</div>
</div>
</div>
<div class="pixi-item item-7">
<div class="inner">
<p class="title">{{$t('product.shop')}}</p>
<div class="icon">
<img src="../../assets/p4.png" alt="">
</div>
</div>
</div>
<div class="pixi-item item-8">
<div class="inner">
<p class="title">{{$t('product.center')}}</p>
<div class="icon">
<img src="../../assets/p3.png" alt="">
</div>
</div>
</div>
<div class="pixi-item item-9">
<div class="inner">
<p class="title">{{$t('product.comm')}}</p>
<div class="icon">
<img src="../../assets/p2.png" alt="">
</div>
</div>
</div>
<div class="pixi-item item-10">
<div class="inner">
<p class="title">{{$t('product.vip')}}</p>
<div class="icon">
<img src="../../assets/p1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
.product {
width: 100%;
//height: 700px;
position: relative;
margin-bottom: 2rem;
background: #3997F8;
padding-top: 60px;
.img1, .img {
position: absolute;
z-index: 10;
bottom: 0;
width: 40%;
left: 30%;
img {
width: 100%;
}
}
.img {
z-index: 20;
bottom: -1rem;
}
.product-content {
z-index: 30;
position: relative;
width: 80%;
margin: 0 auto;
padding: 40px 0;
}
.center {
// background: #fff;
width: 100%;
margin: 0 auto;
padding-top: 50px;
height: 540px;
overflow: hidden;
.circle {
border: 4px solid #fff;
width: 900px;
height: 900px;
z-index: 200;
position: relative;
margin: 0 auto;
border-radius: 450px;
.pixi-item {
position: absolute;
z-index: 1000;
.inner {
min-width: 250px;
text-align: center;
transition: all 0.6s;
.icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #fff;
padding: 10px;
display: inline-block;
//margin: 0 auto 10px auto;
vertical-align: middle;
margin-right: 20px;
img {
width: 100%;
}
}
p {
color: #fff;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
}
}
.pixi-item .inner:hover {
transform: scale(1.1);
}
.item-1 {
right: -206px;
top: 365px;
}
.item-2 {
right: -163px;
top: 235px;
}
.item-3 {
right: -92px;
top: 114px;
}
.item-4 {
right: 8px;
top: 22px;
}
.item-5 {
right: 167px;
top: -42px;
}
.item-6 {
left: 198px;
top: -42px;
}
.item-7 {
left: 60px;
top: 22px;
}
.item-8 {
left: -57px;
top: 114px;
}
.item-9 {
left: -142px;
top: 235px;
}
.item-10 {
left: -197px;
top: 365px;
}
}
}
}
</style>
作者大大實現這個也是很有技巧的呢
//RoadMap.vue
<template>
<div class="roadMap">
<div style="position: absolute;top:-1rem;" id="map"></div>
<div class="container">
<h2>{{$t('roadmap.product_line')}}</h2>
<p>{{$t('roadmap.product_description')}}</p>
<div class="road animated wow fadeInUp">
<div class="line"></div>
<div class="lineHover"></div>
<ul class="content animated wow fadeInUp">
<li>
<div class="col" :class="{'right':width<480}">
<div>
<h3>2017/10</h3>
<p><i></i>{{$t('roadmap.line1710_1')}}</p>
<p><i></i>{{$t('roadmap.line1710_2')}}</p>
<i class="triangle"></i>
</div>
<span>01</span>
</div>
</li>
<li>
<div class="col right">
<span>02</span>
<div>
<h3>2017/11</h3>
<p><i></i>{{$t('roadmap.line1711_1')}}</p>
<p><i></i>{{$t('roadmap.line1711_2')}}</p>
<i class="triangle"></i>
</div>
</div>
</li>
<li>
<div class="col" :class="{'right':width<480}">
<div>
<h3>2017/12</h3>
<p><i></i>{{$t('roadmap.line1712_1')}}</p>
<i class="triangle"></i>
</div>
<span>03</span>
</div>
</li>
<li>
<div class="col right">
<span>04</span>
<div>
<h3>2018/03</h3>
<p><i></i>{{$t('roadmap.line1803_1')}}</p>
<p><i></i>{{$t('roadmap.line1803_2')}}</p>
<p><i></i>{{$t('roadmap.line1803_3')}}</p>
<i class="triangle"></i>
</div>
</div>
</li>
<li>
<div class="col" :class="{'right':width<480}">
<div>
<h3>2018/04</h3>
<p><i></i>{{$t('roadmap.line1804_1')}}</p>
<i class="triangle"></i>
</div>
<span>05</span>
</div>
</li>
<li>
<div class="col right">
<span>06</span>
<div>
<h3>2018/05</h3>
<p><i></i>{{$t('roadmap.line1805_1')}}</p>
<p><i></i>{{$t('roadmap.line1805_2')}}</p>
<i class="triangle"></i>
</div>
</div>
</li>
<li>
<div class="col" :class="{'right':width<480}">
<div>
<h3>2018/06</h3>
<p><i></i>{{$t('roadmap.line1806_1')}}</p>
<p><i></i>{{$t('roadmap.line1806_3')}}</p>
<i class="triangle"></i>
</div>
<span>07</span>
</div>
</li>
<li>
<div class="col right">
<span>08</span>
<div>
<h3>2018/07</h3>
<p><i></i>{{$t('roadmap.line1807_1')}}</p>
<p><i></i>{{$t('roadmap.line1807_2')}}</p>
<p><i></i>{{$t('roadmap.line1807_3')}}</p>
<i class="triangle"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {},
computed: {
width() {
return window.innerWidth
}
},
}
</script>
<style lang="less" scoped>
.roadMap:hover .container .road .lineHover{
height:92%;
}
.roadMap {
overflow: hidden;
position: relative;
margin-bottom: 1rem;
.container {
h2 {
font-family: 'PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
font-size: .25rem;
text-align: center;
color: #49555f;
line-height: 1.4rem;
}
p {
font-size: .17rem;
text-align: center;
color: #70808D;
}
.road {
width: 100%;
margin-top: 1rem;
position: relative;
height: 900px;
.line, .lineHover {
width: 1px;
position: absolute;
top: 0;
left: 50%;
}
.line {
height: 860px;
border: 1px solid #979797;
}
.lineHover {
height: 0;
transition:height 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:height 2s; /* Opera */
border: 1px solid #3997F8;
}
> ul.content li {
min-height: 110px;
div.col {
width: 50%;
position: relative;
display: inline-block;
> div {
border-radius:5px;
width: 90%;
border: 1px solid #757575;
padding: 10px;
text-align: left;
position: relative;
p {
font-size: .15rem;
text-align: left;
i {
width: 4px;
height: 4px;
margin: 4px;
display: inline-block;
border-radius: 50%;
background: #ddd;
}
}
h3 {
color: #49555f;
font-size: .17rem;
}
.triangle {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #D8D8D8;
position: absolute;
right: -13px;
top: 10px;
}
}
}
span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
border: 1px solid #3997F8;
color: #3997F8;
position: absolute;
right: -20px;
background: #fff;
top: 0;
font-size: .18rem;
}
}
> ul.content li .right {
float: right;
span {
left: -20px;
}
> div {
margin-left: 10%;
.triangle {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #D8D8D8;
border-left: 0 !important;
left: -13px;
}
}
}
}
}
}
</style>
//Download.vue
<template>
<div class="download">
<div class="container animated wow fadeInUp">
<p>{{$t('download.product1')}}</p>
<div class="btn">
<div class="button " @click="andMenuShow">
<div class="img">
<i class="iconfont icon-ai-app"></i>
</div>
<div class="btnDec">
<p>Available on the</p>
<div>Android</div>
</div>
<ul class="btnMenu" v-show="andBtn">
<li @click="androidShow">{{$t('home.qbao')}}</li>
<li>
<a href="http://app.mi.com/details?id=com.aether.coder.qbao&ref=search">
{{$t('home.xiaomi')}}
</a>
</li>
<li>
<a href="https://mobile.baidu.com/item?docid=24432603&f0=search_searchContent%400_appBaseNormal%400">
{{$t('home.baidu')}}
</a>
</li>
</ul>
</div>
<div class="button">
<a href="https://play.google.com/store/apps/details?id=com.aether.coder.qbao" target="_blank">
<div class="img">
<i class="iconfont icon-google-play" style="font-size: 38px;"></i>
</div>
<div class="btnDec">
<p>GET IT ON</p>
<div>Google Play</div>
</div>
</a>
</div>
<div class="button" @click="iosShow">
<div class="img">
<i class="iconfont icon-ios"></i>
</div>
<div class="btnDec">
<p>Download on the</p>
<div>AppStore</div>
</div>
</div>
</div>
</div>
<androidDialog :android="android"></androidDialog>
<iOSDialog :iOS="iOS" :sss="ss"></iOSDialog>
<div class="mark" v-if="mark" @click="close"></div>
</div>
</template>
<script>
import Guide from '../Home/Doc.vue';
import bus from '../../bus';
import androidDialog from '../Home/Android.vue';
import iOSDialog from '../Home/iOS.vue';
export default {
components: {
androidDialog,
iOSDialog
},
data() {
return {
ss: {
show: false
},
isActive: false,
android: {
show: false
},
iOS: {
show: false
},
mark: false,
andBtn: false
}
},
methods: {
close() {
this.ss.show = false;
this.android.show = false;
this.mark = false;
this.iOS.show = false;
this.andBtn=false;
},
andMenuShow() {
this.andBtn = true;
this.mark = true;
},
androidShow() {
let width = document.documentElement.clientWidth;
if (width < 678) {
window.location.href = "https://api.aethercoder.com/file/download/pkg/QBaoNetwork.apk"
} else {
this.android.show = true;
this.mark = true;
}
},
iosShow() {
let width = document.documentElement.clientWidth
if (width < 678) {
window.location.href = "https://itunes.apple.com/cn/app/id1333370260"
} else {
this.iOS.show = true;
this.mark = true;
}
}
},
mounted() {
bus.$on('markShow', (type) => {
this.mark = type;
this.andBtn =false;
})
}
}
</script>
<style lang="less" scoped type="text/less">
@import "../../style/common.less";
.download {
width: 100%;
min-height: 260px;
background: #052342;
margin-bottom: 1rem;
padding: .5rem;
.container {
p {
color: #fff;
font-size: .17rem;
text-align: center;
}
.btn {
margin:.5rem auto 0 auto;
display: table;
.button:hover{
background: #000;
}
.button:hover .img i,.button:hover .btnDec,.button:hover .btnDec p{
color: #fff;
}
.button:nth-child(2){
margin:0 37px;
}
.button {
display: inline-block;
border-radius:5px;
cursor: pointer;
height: .52rem;
padding: 4px 6px;
background: #fff;
color: #000;
min-width: 186px;
max-width: 234px;
position: relative;
.btnMenu {
text-align: center;
z-index: 2;
position: absolute;
background: #fff;
width: 100%;
border-radius: 5px;
padding: 20px 0;
li {
height: 40px;
line-height: 40px;
}
li:hover{
background: #000;
color:#fff;
}
}
.img {
display: inline-block;
margin-right: 4px;
i{
font-size: 34px;
color:#000;
position: relative;
top:-6px;
}
}
.btnDec {
color: #000;
text-align: left;
display: inline-block;
p {
color:#000;
font-size: .13rem;
}
div {
font-size: .21rem;
position: relative;
top: -3px;
}
}
}
}
}
.mark {
.x-mark;
z-index: 1;
}
}
</style>
//team.vue
<style lang="less" scoped type="text/less">
.teams {
margin-bottom: 1rem;
position: relative;
.container{
h2{
font-size: .25rem;
text-align: center;
margin-bottom: 20px;
}
ul {
width:80%;
margin:0 auto;
display: flex;
li{
flex:1;
border: 1px solid #DDDDDD;
position: relative;
img{
width:100%;
}
div{
padding:18px 0;
text-align: center;rem
h3{
font-size: .17rem;
color: #49555f;
}
p{
font-size: 0.15rem;
text-align: center;
color: #3997F8;
}
}
.hover1,.hover2,.hover3{
width:100%;
height:100%;
position: absolute;
background: rgba(57,151,248,0.80);
z-index: 100;
top:0;
padding:1rem 20px;
display: none;
p{
color:#fff;
font-size: .15rem;
text-align: left;
margin-bottom: 10px;
}
}
}
li:nth-child(1):hover .hover1{
display: block;
}
li:nth-child(2):hover .hover2{
display: block;
}
li:nth-child(3):hover .hover3{
display: block;
}
li:nth-child(2){
margin:0 4.5% 0 4.5%;
}
}
}
}
</style>
<template>
<section class="teams">
<div style="position: absolute;top:-1rem;" id="teams"></div>
<div class="container animated wow fadeInUp">
<h2>{{$t('teams.teams')}}</h2>
<ul>
<li>
<img src="../../assets/chenLin_Qbao.png" alt="陳琳">
<div>
<h3>{{$t('teams.chenlin')}}</h3>
<p>{{$t('teams.founder')}}</p>
</div>
<div class="hover1">
<p>{{$t('teams.chenlin1')}}</p>
<p>{{$t('teams.chenlin2')}}</p>
</div>
</li>
<li>
<img src="../../assets/ruoYu_Qbao.png" alt="孫若禹">
<div>
<h3>{{$t('teams.Ruoyu')}}</h3>
<p>{{$t('teams.founder')}}</p>
</div>
<div class="hover2">
<p>{{$t('teams.ruoyu1')}}</p>
<p>{{$t('teams.ruoyu2')}}</p>
</div>
</li>
<li>
<img src="../../assets/pengFei_Qbao.png" alt="何鵬飛">
<div>
<h3>{{$t('teams.pengfei')}}</h3>
<p>{{$t('teams.founder')}}</p>
</div>
<div class="hover3">
<p>{{$t('teams.pengfei1')}}</p>
<p>{{$t('teams.pengfei2')}}</p>
</div>
</li>
</ul>
</div>
</section>
</template>
<script>
export default {
props: [],
data() {
return {}
},
components: {},
computed: {},
methods: {
},
mounted() {
}
}
</script>
//Partner.vue
<template>
<div class="partner animated wow fadeInUp">
<div style="position: absolute;top:-1rem;" id="partner"></div>
<h2>{{$t('partner')}}</h2>
<img src="../../assets/dd.png" alt="">
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
.partner {
position: relative;
h2 {
font-size: .25rem;
text-align: center;
margin-bottom: 20px;
}
img {
width: 100%;
}
}
</style>
//Foot.vue
<template>
<div class="foot" id="contact">
<div class="link animated wow fadeInUp">
<div class="linkIcon">
<a v-for="(i,index) in iconAll" :key="index" @click="iconDetail(i)">
<img :src="IconImg[index]" alt="">
</a>
</div>
<p>
<span>{{$t('foot.bEmail')}}</span>: [email protected]
</p>
<p>
<span>{{$t('foot.cEmail')}}</span>: [email protected]
</p>
<div class="btn">
<a href="t.me/Qbaofoundation" target="_blank">
{{$t('foot.join_cn')}}
</a>
<a href="t.me/QbaofoundationEn" target="_blank">
{{$t('foot.join_en')}}
</a>
<a href="t.me/QbaocommunityKr" target="_blank">
{{$t('foot.join_ko')}}
</a>
</div>
</div>
<footer>Copyright © 2018 Qbao Network All rights reserved.</footer>
<div class="mark" v-if="mark" @click="close"></div>
<wechat :anzhuo="weiChat" :mark="mark"></wechat>
<qqDialog :qq="qq"></qqDialog>
</div>
</template>
<script>
import bus from '../../bus';
import wechat from '../Head/wechat.vue';
import qqDialog from '../Head/qq.vue';
export default {
data() {
return {
lang: this.$i18n,
weiChat: {
show: false
},
mark: false,
qq: {
show: false
},
iconAll:[
{
herf: 'https://twitter.com/Qbao2339'
},
{
herf: 'https://www.facebook.com/Qbao-120845068623551/'
},
{
herf: 'https://qbao.slack.com'
},
{
herf: 'https://open.kakao.com/o/gRC5BDL'
},
{
herf: 'https://www.reddit.com/r/Qbao/'
},
{
herf: 'https://medium.com/@Qbao2339'
},
{
herf: 'https://www.instagram.com/qbaonetwork/'
},
{
herf: 'https://blog.naver.com/qbaonetwork'
},
{
herf: 'https://weibo.com/6416945905/profile?topnav=1&wvr=6'
},
{
className:'wechat',
herf: ''
},
{
className:'qq',
herf: ''
},
{
herf: 'mailto:[email protected]'
}
],
IconImg:[
require('../../assets/twitter.png'),
require('../../assets/facebook.png'),
require('../../assets/slack.png'),
require('../../assets/kakao.png'),
require('../../assets/reddit.png'),
require('../../assets/medium.png'),
require('../../assets/camera.png'),
require('../../assets/blog.png'),
require('../../assets/weibo.png'),
require('../../assets/weixin.png'),
require('../../assets/qq.png'),
require('../../assets/email.png')
]
}
},
components: {
wechat,
qqDialog
},
methods: {
close() {
this.mark = false;
this.weiChat.show = false;
this.qq.show = false;
},
iconDetail(i) {
if (i.herf) {
window.open(i.herf);
} else {
if (i.className === 'wechat') {
this.weiChat.show = true;
this.mark = true;
} else if(i.className === 'qq') {
this.qq.show = true;
this.mark = true;
}
}
}
},
mounted() {
bus.$on('markShow', (type) => {
this.mark = type;
})
}
}
</script>
<style lang="less" scoped>
.foot {
.link {
padding: 30px 0;
width: 100%;
//height:300px;
background: #052342;
.linkIcon {
text-align: center;
margin:0 auto 30px auto;
a:hover{
transform: scale(1.2);
}
a {
transition: all 0.6s;
display: inline-block;
margin-right: 20px;
margin-bottom: 10px;
cursor: pointer;
img {
width: 30px;
}
i {
width: 30px;
height: 30px;
border-radius: 50%;
color: #fff;
line-height: 30px;
}
}
}
p {
font-size: .15rem;
opacity: 0.5;
text-align: center;
color: #fff;
font-weight: 200;
}
.btn {
margin-top: .4rem;
text-align: center;
a {
font-weight: 200;
border: 1px solid #FFFFFF;
padding: 6px;
margin: 0 20px;
color: #fff;
font-size: .15rem;
opacity: 0.5;
border-radius: 4px;
}
}
}
footer {
text-align: center;
background: #03182E;
padding: 24px 0;
color: #fff;
}
}
</style>
再次向作者大大感謝，真的是很精彩的項目呢