commit
e6135643b3
35 changed files with 11332 additions and 0 deletions
@ -0,0 +1,6 @@ |
|||
# Browsers that we support |
|||
|
|||
last 1 version |
|||
> 1% |
|||
maintained node versions |
|||
not dead |
@ -0,0 +1,91 @@ |
|||
# Created by .ignore support plugin (hsz.mobi) |
|||
### Node template |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Runtime data |
|||
pids |
|||
*.pid |
|||
*.seed |
|||
*.pid.lock |
|||
|
|||
# Directory for instrumented libs generated by jscoverage/JSCover |
|||
lib-cov |
|||
|
|||
# Coverage directory used by tools like istanbul |
|||
coverage |
|||
|
|||
# nyc test coverage |
|||
.nyc_output |
|||
|
|||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) |
|||
.grunt |
|||
|
|||
# Bower dependency directory (https://bower.io/) |
|||
bower_components |
|||
|
|||
# node-waf configuration |
|||
.lock-wscript |
|||
|
|||
# Compiled binary addons (https://nodejs.org/api/addons.html) |
|||
build/Release |
|||
|
|||
# Dependency directories |
|||
node_modules/ |
|||
jspm_packages/ |
|||
|
|||
# TypeScript v1 declaration files |
|||
typings/ |
|||
|
|||
# Optional npm cache directory |
|||
.npm |
|||
|
|||
# Optional eslint cache |
|||
.eslintcache |
|||
|
|||
# Optional REPL history |
|||
.node_repl_history |
|||
|
|||
# Output of 'npm pack' |
|||
*.tgz |
|||
|
|||
# Yarn Integrity file |
|||
.yarn-integrity |
|||
|
|||
# dotenv environment variables file |
|||
.env |
|||
|
|||
# parcel-bundler cache (https://parceljs.org/) |
|||
.cache |
|||
|
|||
# next.js build output |
|||
.next |
|||
|
|||
# nuxt.js build output |
|||
.nuxt |
|||
|
|||
# Nuxt generate |
|||
dist |
|||
|
|||
# vuepress build output |
|||
.vuepress/dist |
|||
|
|||
# Serverless directories |
|||
.serverless |
|||
|
|||
# IDE / Editor |
|||
.idea |
|||
.editorconfig |
|||
|
|||
# Service worker |
|||
sw.* |
|||
|
|||
# Mac OSX |
|||
.DS_Store |
|||
|
|||
# Vim swap files |
|||
*.swp |
@ -0,0 +1,22 @@ |
|||
# huaqian |
|||
|
|||
> My terrific Nuxt.js project |
|||
|
|||
## Build Setup |
|||
|
|||
``` bash |
|||
# install dependencies |
|||
$ npm run install |
|||
|
|||
# serve with hot reload at localhost:3000 |
|||
$ npm run dev |
|||
|
|||
# build for production and launch server |
|||
$ npm run build |
|||
$ npm run start |
|||
|
|||
# generate static project |
|||
$ npm run generate |
|||
``` |
|||
|
|||
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). |
@ -0,0 +1,7 @@ |
|||
# ASSETS |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). |
@ -0,0 +1,25 @@ |
|||
$red: #ff0000; |
|||
|
|||
html, |
|||
body { |
|||
width: 100%; |
|||
// overflow-x: hidden; |
|||
} |
|||
|
|||
.border-right { |
|||
&::after { |
|||
position: absolute; |
|||
content: " "; |
|||
height: 100%; |
|||
width: 1px; |
|||
background-color: #fff; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
.m-auto { |
|||
margin: 0 auto; |
|||
} |
|||
.ls5{ |
|||
letter-spacing: 5px |
|||
} |
@ -0,0 +1,47 @@ |
|||
@import "./_global.scss"; |
|||
$red: #ff0000; |
|||
html, |
|||
body { |
|||
width: 100%; |
|||
// overflow-x: hidden; |
|||
} |
|||
|
|||
.border-right { |
|||
&::after { |
|||
position: absolute; |
|||
content: " "; |
|||
height: 100%; |
|||
width: 1px; |
|||
background-color: #fff; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
$layerWidth:1366px; |
|||
$designWidth:1920px; |
|||
|
|||
.s1920 .layer { |
|||
width: 990px; |
|||
} |
|||
|
|||
@function bq($v) { |
|||
@return $v*$layerWidth/$designWidth+px; |
|||
} |
|||
|
|||
.m-auto { |
|||
margin: 0 auto; |
|||
} |
|||
.f18d_b{ |
|||
font-size: bq(18); |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
letter-spacing: 0px; |
|||
color: #2078be; |
|||
} |
|||
.f18d_g{ |
|||
font-size: bq(18); |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
letter-spacing: 0px; |
|||
color: #4b4b4b; |
|||
} |
@ -0,0 +1,51 @@ |
|||
@import "./_global.scss"; |
|||
$red: #ff0000; |
|||
|
|||
html, |
|||
body { |
|||
width: 100%; |
|||
// overflow-x: hidden; |
|||
} |
|||
|
|||
.border-right { |
|||
&::after { |
|||
position: absolute; |
|||
content: " "; |
|||
height: 100%; |
|||
width: 1px; |
|||
background-color: #fff; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
$layerWidth:1920px; |
|||
$designWidth:1920px; |
|||
.s1920 .layer { |
|||
width: 1366px; |
|||
} |
|||
|
|||
@function bq($v) { |
|||
@return $v*$layerWidth/$designWidth+px; |
|||
} |
|||
|
|||
.s1366 .layer { |
|||
width: 1366px; |
|||
} |
|||
|
|||
.m-auto { |
|||
margin: 0 auto; |
|||
} |
|||
.f18d_b{ |
|||
font-size: bq(18); |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
letter-spacing: 0px; |
|||
color: #2078be; |
|||
} |
|||
.f18d_g{ |
|||
font-size: bq(18); |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
letter-spacing: 0px; |
|||
color: #4b4b4b; |
|||
} |
@ -0,0 +1,59 @@ |
|||
@import "./_global.scss"; |
|||
$red: #ff0000; |
|||
html, |
|||
body { |
|||
width: 100%; |
|||
// overflow-x: hidden; |
|||
} |
|||
|
|||
.border-right { |
|||
&::after { |
|||
position: absolute; |
|||
content: " "; |
|||
height: 100%; |
|||
width: 1px; |
|||
background-color: #fff; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
$layerWidth:1920px; |
|||
$designWidth:1920px; |
|||
@media screen and (max-width:1024px) { |
|||
.s1920{ |
|||
width: $layerWidth; |
|||
} |
|||
} |
|||
|
|||
.s1920{ |
|||
width: 1920px; |
|||
} |
|||
.s1920 .layer { |
|||
width: 1366px; |
|||
} |
|||
|
|||
@function bq($v) { |
|||
@return $v*$layerWidth/$designWidth+px; |
|||
} |
|||
|
|||
.m-auto { |
|||
margin: 0 auto; |
|||
} |
|||
.p-auto { |
|||
padding: 0 auto; |
|||
} |
|||
|
|||
.f18d_b{ |
|||
font-size: bq(18); |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
letter-spacing: 0px; |
|||
color: #2078be; |
|||
} |
|||
.f18d_g{ |
|||
font-size: bq(18); |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
letter-spacing: 0px; |
|||
color: #4b4b4b; |
|||
} |
@ -0,0 +1,53 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ */ |
|||
/* v1.0 | 20080212 */ |
|||
|
|||
html, body, div, span, applet, object, iframe, |
|||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|||
a, abbr, acronym, address, big, cite, code, |
|||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
|||
small, strike, strong, sub, sup, tt, var, |
|||
b, u, i, center, |
|||
dl, dt, dd, ol, ul, li, |
|||
fieldset, form, label, legend, |
|||
table, caption, tbody, tfoot, thead, tr, th, td { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
outline: 0; |
|||
font-size: 100%; |
|||
vertical-align: baseline; |
|||
background: transparent; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, blockquote:after, |
|||
q:before, q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
|
|||
/* remember to define focus styles! */ |
|||
:focus { |
|||
outline: 0; |
|||
} |
|||
|
|||
/* remember to highlight inserts somehow! */ |
|||
ins { |
|||
text-decoration: none; |
|||
} |
|||
del { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
/* tables still need 'cellspacing="0"' in the markup */ |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
@ -0,0 +1,7 @@ |
|||
# COMPONENTS |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
The components directory contains your Vue.js Components. |
|||
|
|||
_Nuxt.js doesn't supercharge these components._ |
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div class="layer m-auto panel"> |
|||
<h2>{{vtitle}}</h2> |
|||
<div class="panel__desc"> |
|||
<div class="panel__desc__word">{{vdesc}}</div> |
|||
</div> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props:['vtitle','vdesc'], |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@media screen and (min-width:1440px){ |
|||
@import '@/assets/pc-1920.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (min-width:768px) and (max-width:1440px) { |
|||
@import '@/assets/pc-1366.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (max-width:768px) { |
|||
@import '@/assets/pc-768.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,43 @@ |
|||
.panel { |
|||
margin-top: 59px; |
|||
|
|||
text-align: center; |
|||
|
|||
color: #131720; |
|||
|
|||
h2 { |
|||
font-size: bq(36); |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.panel__desc { |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.panel__desc__word { |
|||
font-size: bq(18); |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
left: -75%; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: bq(83); |
|||
height: 1px; |
|||
background-color: #b5b5b5; |
|||
} |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
right: -75%; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: bq(83); |
|||
height: 1px; |
|||
background-color: #b5b5b5; |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,7 @@ |
|||
# LAYOUTS |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
This directory contains your Application Layouts. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). |
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<div class="s1920"> |
|||
<nuxt /> |
|||
</div> |
|||
</template> |
|||
|
|||
<style> |
|||
html { |
|||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', |
|||
Roboto, 'Helvetica Neue', Arial, sans-serif; |
|||
word-spacing: 1px; |
|||
-ms-text-size-adjust: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
|
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
} |
|||
</style> |
@ -0,0 +1,8 @@ |
|||
# MIDDLEWARE |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
This directory contains your application middleware. |
|||
Middleware let you define custom functions that can be run before rendering either a page or a group of pages. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). |
@ -0,0 +1,72 @@ |
|||
|
|||
export default { |
|||
mode: 'universal', |
|||
/* |
|||
** Headers of the page |
|||
*/ |
|||
head: { |
|||
title: process.env.npm_package_name || '', |
|||
meta: [ |
|||
{ charset: 'utf-8' }, |
|||
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0' }, |
|||
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' } |
|||
], |
|||
link: [ |
|||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } |
|||
], |
|||
script:[ |
|||
{src:'flexible.js',type:"text/javascript",charset:'utf-8'} |
|||
], |
|||
}, |
|||
/* |
|||
** Customize the progress-bar color |
|||
*/ |
|||
loading: { color: '#fff' }, |
|||
/* |
|||
** Global CSS |
|||
*/ |
|||
css: [ |
|||
'~assets/reset.css', |
|||
'swiper/dist/css/swiper.css' |
|||
], |
|||
/* |
|||
** Plugins to load before mounting the App |
|||
*/ |
|||
plugins: [ |
|||
{ |
|||
src:"@/plugins/vue-awesome-swiper",ssr:false |
|||
}, |
|||
|
|||
], |
|||
/* |
|||
** Nuxt.js dev-modules |
|||
*/ |
|||
devModules: [ |
|||
], |
|||
/* |
|||
** Nuxt.js modules |
|||
*/ |
|||
modules: [ |
|||
], |
|||
/* |
|||
** Build configuration |
|||
*/ |
|||
build: { |
|||
/* |
|||
** You can extend webpack config here |
|||
*/ |
|||
extend (config, ctx) { |
|||
// config.resolve.alias[0]
|
|||
}, |
|||
postcss:[ |
|||
// require('postcss-pxtorem')({
|
|||
// rootValue: 200,
|
|||
// propList: ['*']
|
|||
// }),
|
|||
// require('autoprefixer')({
|
|||
// browsers: ['Android >= 4.0', 'iOS >= 7']
|
|||
// })
|
|||
] |
|||
|
|||
} |
|||
} |
File diff suppressed because it is too large
@ -0,0 +1,23 @@ |
|||
{ |
|||
"name": "huaqian", |
|||
"version": "1.0.0", |
|||
"description": "My terrific Nuxt.js project", |
|||
"author": "1549469775", |
|||
"private": true, |
|||
"scripts": { |
|||
"dev": "nuxt", |
|||
"build": "nuxt build", |
|||
"start": "nuxt start", |
|||
"generate": "nuxt generate" |
|||
}, |
|||
"dependencies": { |
|||
"nuxt": "^2.0.0", |
|||
"vue-awesome-swiper": "^3.1.3" |
|||
}, |
|||
"devDependencies": { |
|||
"autoprefixer": "^9.6.1", |
|||
"node-sass": "^4.12.0", |
|||
"postcss-pxtorem": "^4.0.1", |
|||
"sass-loader": "^7.1.0" |
|||
} |
|||
} |
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<div class="wrapper"> |
|||
<ul class="layer m-auto descicon"> |
|||
<li class="item"> |
|||
<div class="icon i0"> |
|||
</div> |
|||
<div class="word"> |
|||
<p class="word__titile">技术VC</p> |
|||
<p class="word__desc">(技术支持、企业资源整合)</p> |
|||
</div> |
|||
</li> |
|||
<li class="item"> |
|||
<div class="icon i1"> |
|||
</div> |
|||
<div class="word"> |
|||
<p class="word__titile">10年+</p> |
|||
<p class="word__desc">(技术沉淀团队 )</p> |
|||
</div> |
|||
</li> |
|||
<li class="item"> |
|||
<div class="icon i2"> |
|||
</div> |
|||
<div class="word"> |
|||
<p class="word__titile">100人+</p> |
|||
<p class="word__desc">(人精英团队 )</p> |
|||
</div> |
|||
</li> |
|||
<li class="item"> |
|||
<div class="icon i3"> |
|||
</div> |
|||
<div class="word"> |
|||
<p class="word__titile">行业口碑</p> |
|||
<p class="word__desc">(评价极佳)</p> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<style lang='scss'> |
|||
@media screen and (min-width:1440px) { |
|||
@import '@/assets/pc-1920.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
|
|||
@media screen and (min-width:768px) and (max-width:1440px) { |
|||
@import '@/assets/pc-1366.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (max-width:768px) { |
|||
@import '@/assets/pc-768.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
</style> |
@ -0,0 +1,53 @@ |
|||
.wrapper{ |
|||
border-bottom: solid 1px #e2e2e2; |
|||
.descicon { |
|||
height: bq(105); |
|||
display: flex; |
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
width: bq(273+156); |
|||
padding: bq(28) 0; |
|||
|
|||
.icon { |
|||
width: bq(33); |
|||
height: bq(33); |
|||
margin: 0 bq(31); |
|||
} |
|||
|
|||
.i0{ |
|||
background-image: url('/image/icon0.png'); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.i1{ |
|||
background-image: url('/image/icon1.png'); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.i2{ |
|||
background-image: url('/image/icon2.png'); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.i3{ |
|||
background-image: url('/image/icon3.png'); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.word { |
|||
line-height: bq(30 ); |
|||
.word__titile { |
|||
color: #3175bb; |
|||
font-size: bq(22); |
|||
} |
|||
|
|||
.word__desc { |
|||
font-size: bq(18); |
|||
color: #8f8f8f; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<div class="header layer m-auto"> |
|||
<div class="logo">华谦官网</div> |
|||
<div class="hr border-right"></div> |
|||
<div class="desc"> |
|||
<div>区块链</div> |
|||
<div>Block Chain + Professional Technology Platform</div> |
|||
</div> |
|||
<ul class="navbar"> |
|||
<li class="navbar__item">首页</li> |
|||
<li class="navbar__item">区块链+</li> |
|||
<li class="navbar__item">短视频直播</li> |
|||
<li class="navbar__item">商城系统</li> |
|||
<li class="navbar__item">棋牌系统</li> |
|||
<li class="navbar__item">团队介绍</li> |
|||
<li class="navbar__item">企业愿景</li> |
|||
<li class="navbar__item">关于我们</li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<style lang='scss'> |
|||
@media screen and (min-width:1440px){ |
|||
@import '@/assets/pc-1920.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (min-width:768px) and (max-width:1440px) { |
|||
@import '@/assets/pc-1366.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (max-width:768px) { |
|||
@import '@/assets/pc-768.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,60 @@ |
|||
|
|||
.header { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 99999; |
|||
height: bq(66); |
|||
padding-top: bq(23); |
|||
margin: 0 auto; |
|||
background-color: transparent; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.logo { |
|||
display: inline-block; |
|||
width: bq(209); |
|||
height: 0; |
|||
padding-top: bq(43); |
|||
overflow: hidden; |
|||
background-image: url('/image/logo.png'); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.hr { |
|||
// font-size: 0; |
|||
position: relative; |
|||
display: inline-block; |
|||
margin: 0 bq(18); |
|||
height: bq(43); |
|||
|
|||
&::after { |
|||
content: ""; |
|||
height: 70%; |
|||
} |
|||
} |
|||
|
|||
.desc { |
|||
font-size: bq(12); |
|||
line-height: bq(18); |
|||
height: 80%; |
|||
display: inline-block; |
|||
color: #fff; |
|||
} |
|||
|
|||
.navbar { |
|||
color: #fff; |
|||
padding-top: 0; |
|||
margin-left: auto; |
|||
.navbar__item { |
|||
float: left; |
|||
cursor: grab; |
|||
margin: 0 bq(15); |
|||
text-align: center; |
|||
font-size: bq(16); |
|||
line-height: bq(43); |
|||
// width: 4em; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,6 @@ |
|||
# PAGES |
|||
|
|||
This directory contains your Application Views and Routes. |
|||
The framework reads all the `*.vue` files inside this directory and creates the router of your application. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). |
@ -0,0 +1,109 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<vheader></vheader> |
|||
<div class="banner"> |
|||
<div class="banner__wrap"> |
|||
<div class="banner__title"> |
|||
聚焦区块链生态,专注于DAPP开发 |
|||
打造区块链+互联网新时代 |
|||
</div> |
|||
<div class="banner__button"> |
|||
关于我们 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<vdesc></vdesc> |
|||
<vpanel vtitle="四大系统" vdesc="完美的技术支持"> |
|||
<div><span class="f18d_b">区块链+</span>|短视频系统</div> |
|||
<div class="swiper swiperBox" v-swiper:swiper="swiperOption" ref="swiperBox" @mouseenter="stopSwiper" @mouseleave="startSwiper"> |
|||
<div class="swiper-wrapper"> |
|||
<div class="swiper-slide" v-for="(banner,i) in banners" :key="i"> |
|||
<img :src="banner"> |
|||
</div> |
|||
</div> |
|||
<div class="swiper-pagination" slot="pagination"></div> |
|||
<div class="swiper-button-prev" slot="button-prev"></div> |
|||
<div class="swiper-button-next" slot="button-next"></div> |
|||
</div> |
|||
</vpanel> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import vpanel from "@/components/panel/index.vue"; |
|||
import vheader from "@/pages-child/header/index.vue"; |
|||
import vdesc from "@/pages-child/desc/index.vue"; |
|||
export default { |
|||
components: { |
|||
vheader, |
|||
vdesc, |
|||
vpanel |
|||
}, |
|||
data(){ |
|||
return { |
|||
banners: [ '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg', '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg', '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg','//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg'], |
|||
// 所有配置均为可选(同Swiper配置) |
|||
swiperOption: { |
|||
loop: true, |
|||
speed:500, |
|||
// notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true |
|||
notNextTick: true, |
|||
slidesPerView: 'auto', |
|||
centeredSlides: true, |
|||
pagination: { |
|||
el: '.swiper-pagination', |
|||
clickable: true |
|||
}, |
|||
navigation: { |
|||
nextEl: '.swiper-button-next', |
|||
prevEl: '.swiper-button-prev', |
|||
}, |
|||
on: { |
|||
slideChange() { |
|||
// console.log('onSlideChangeEnd', this); |
|||
}, |
|||
tap() { |
|||
// console.log('onTap', this); |
|||
} |
|||
}, |
|||
autoplay: { |
|||
delay: 3500, |
|||
disableOnInteraction: false, |
|||
}, |
|||
autoplayDisableOnInteraction:false, |
|||
// effect:'cube', |
|||
mousewheel: true, |
|||
preloadImages: false, |
|||
lazy: true |
|||
} |
|||
} |
|||
}, |
|||
swiper() { |
|||
// 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象,同时notNextTick必须为true |
|||
return this.$refs.swiperBox.swiper |
|||
}, |
|||
methods:{ |
|||
stopSwiper(){ |
|||
this.swiper.autoplay.stop() |
|||
}, |
|||
startSwiper(){ |
|||
this.swiper.autoplay.start() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
@media screen and (min-width:1440px){ |
|||
@import '@/assets/pc-1920.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (min-width:768px) and (max-width:1440px) { |
|||
@import '@/assets/pc-1366.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
@media screen and (max-width:768px) { |
|||
@import '@/assets/pc-768.scss'; |
|||
@import './pc.scss'; |
|||
} |
|||
</style> |
@ -0,0 +1,51 @@ |
|||
.container { |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
.banner { |
|||
height: bq(608); |
|||
background-color: #000; |
|||
background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3232840639,190973432&fm=26&gp=0.jpg); |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
overflow: hidden; |
|||
.banner__wrap{ |
|||
width: bq(800); |
|||
margin: 0 auto; |
|||
.banner__title{ |
|||
box-sizing: content-box; |
|||
margin-top: bq(248); |
|||
width: bq(678); |
|||
text-align: left; |
|||
color: #fff; |
|||
// padding-right: bq(550); |
|||
font-size: bq(44); |
|||
font-weight: lighter; |
|||
line-height: bq(59.66); |
|||
letter-spacing: 0; |
|||
color: #ffffff; |
|||
} |
|||
.banner__button{ |
|||
display: flex; |
|||
cursor: pointer; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 40px; |
|||
width: bq(133); |
|||
height: bq(41); |
|||
line-height: bq(41); |
|||
font-size: bq(16); |
|||
text-align: center; |
|||
border-radius: bq(41); |
|||
color: #fff; |
|||
border: 1px solid #fff; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.swiperBox{ |
|||
height: bq(342); |
|||
} |
@ -0,0 +1,7 @@ |
|||
# PLUGINS |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). |
@ -0,0 +1,4 @@ |
|||
import Vue from "vue" |
|||
import VueAwesomeSwiper from "vue-awesome-swiper/dist/ssr"; |
|||
|
|||
Vue.use(VueAwesomeSwiper); |
@ -0,0 +1,11 @@ |
|||
# STATIC |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
This directory contains your static files. |
|||
Each file inside this directory is mapped to `/`. |
|||
Thus you'd want to delete this README.md before deploying to production. |
|||
|
|||
Example: `/static/robots.txt` is mapped as `/robots.txt`. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 906 B |
After Width: | Height: | Size: 751 B |
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,10 @@ |
|||
# STORE |
|||
|
|||
**This directory is not required, you can delete it if you don't want to use it.** |
|||
|
|||
This directory contains your Vuex Store files. |
|||
Vuex Store option is implemented in the Nuxt.js framework. |
|||
|
|||
Creating a file in this directory automatically activates the option in the framework. |
|||
|
|||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). |
Loading…
Reference in new issue