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