topuser
/
nuxt-for-preset
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

new

new
1549469775 6 years ago
parent
4766a46871
commit
9243f11c7b
38 changed files with 2253 additions and 1717 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      .browserslistrc
  2. 22
      .history/README_20190808143227.md
  3. 25
      .history/README_20191013120842.md
  4. 5
      README.md
  5. 37
      assets/_global.scss
  6. 41
      assets/_index.scss
  7. 42
      assets/demo/index.css
  8. 9
      assets/demo/index.css.map
  9. 13
      assets/demo/index.html
  10. 56
      assets/demo/index.scss
  11. BIN
      assets/images/bluedialog.png
  12. 35
      assets/pc-1366.scss
  13. 55
      assets/pc-1920.scss
  14. 65
      assets/pc-768.scss
  15. 53
      assets/reset.css
  16. 13
      assets/style/_global.scss
  17. 297
      assets/style/common.scss
  18. 0
      assets/style/pc.scss
  19. 13
      components/panel/index.vue
  20. 18
      components/panel/style.scss
  21. 26
      layouts/default.vue
  22. 73
      nuxt.config.js
  23. 2181
      package-lock.json
  24. 23
      package.json
  25. 54
      pages-child/desc/index.vue
  26. 65
      pages-child/desc/pc.scss
  27. 34
      pages-child/header/index.vue
  28. 61
      pages-child/header/pc.scss
  29. 193
      pages/index.vue
  30. 151
      pages/pc.scss
  31. 0
      pages/style.scss
  32. 3
      plugins/README.md
  33. 4
      plugins/vue-awesome-swiper.js
  34. 42
      server/index.js
  35. BIN
      static/image/bluedialog.png
  36. 9
      store/index.js
  37. 20
      store/todos.js

6
.browserslistrc
View File

@ -1,6 +0,0 @@
# Browsers that we support
last 1 version
> 1%
maintained node versions
not dead

22
.history/README_20190808143227.md
View File

@ -1,22 +0,0 @@
# 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).

25
.history/README_20191013120842.md
View File

@ -1,25 +0,0 @@
# 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).
测试一波

5
README.md
View File

@ -1,6 +1,6 @@
# huaqian
> My terrific Nuxt.js project
> My primo Nuxt.js project
## Build Setup
@ -20,6 +20,3 @@ $ npm run generate
```
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
测试一波

37
assets/_global.scss
View File

@ -1,37 +0,0 @@
$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
}
.clearfix {
&::after {
content: "";
height: 0;
display: block;
clear: both;
}
}

41
assets/_index.scss
View File

@ -1,41 +0,0 @@
$red: #ff0000;
html,
body {
width: 100%;
}
.border-right {
&::after {
position: absolute;
content: " ";
height: 100%;
width: 1px;
background-color: #fff;
top: 50%;
transform: translateY(-50%);
}
}
.mg-auto {
margin: 0 auto;
}
.clearfix {
&::after {
content: "";
height: 0;
display: block;
clear: both;
}
}
// 字体或者什么的用em,距离用%
@function em($v, $f:16) {
@return $v/$f+em;
}
$designWidth:1920px;
@function per($v) {
@return $v/$designWidth+'%';
}

42
assets/demo/index.css
View File

@ -1,42 +0,0 @@
:root {
font-size: 16px;
}
html,
body {
width: 100%;
margin: 0;
padding: 0;
}
.border-right::after {
position: absolute;
content: " ";
height: 100%;
width: 1px;
background-color: #fff;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.mg-auto {
margin: 0 auto;
}
.clearfix::after {
content: "";
height: 0;
display: block;
clear: both;
}
.box1 {
width: 5.20833%;
margin-top: 2.23958%;
height: 0;
padding-bottom: 5.20833%;
font-size: 2rem;
background-color: red;
}
/*# sourceMappingURL=index.css.map */

9
assets/demo/index.css.map
View File

@ -1,9 +0,0 @@
{
"version": 3,
"mappings": "AAEA,AAAA,KAAK,CAAA;EACH,SAAS,EAAE,IAAI;CAChB;;AACD,AAAA,IAAI;AACJ,IAAI,CAAC;EACH,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACX;;AAED,AACE,aADW,AACV,OAAO,CAAC;EACP,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,IAAI;EACtB,GAAG,EAAE,GAAG;EACR,SAAS,EAAE,gBAAgB;CAC5B;;AAGH,AAAA,QAAQ,CAAC;EACP,MAAM,EAAE,MAAM;CACf;;AAED,AACE,SADO,AACN,OAAO,CAAC;EACP,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;CACZ;;AAcH,AAAA,KAAK,CAAC;EACJ,KAAK,EAJG,QAA2B;EAKnC,UAAU,EALF,QAA2B;EAMnC,MAAM,EAAE,CAAC;EACT,cAAc,EAPN,QAA2B;EAQnC,SAAS,EAdD,IAAS;EAejB,gBAAgB,EAAE,GAAG;CACtB",
"sources": [
"index.scss"
],
"names": [],
"file": "index.css"
}

13
assets/demo/index.html
View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box1">cxvccxvcxcvx</div>
</body>
</html>

56
assets/demo/index.scss
View File

@ -1,56 +0,0 @@
$red: #ff0000;
:root{
font-size: 16px;
}
html,
body {
width: 100%;//62.5%;
margin: 0;
padding: 0;
}
.border-right {
&::after {
position: absolute;
content: " ";
height: 100%;
width: 1px;
background-color: #fff;
top: 50%;
transform: translateY(-50%);
}
}
.mg-auto {
margin: 0 auto;
}
.clearfix {
&::after {
content: "";
height: 0;
display: block;
clear: both;
}
}
// 字体或者什么的用em
@function em($v, $f:16) {
@return $v/$f+rem;
}
$designWidth:1920;
// 距离用百分比
@function per($v) {
@return percentage($v/$designWidth);
}
.box1 {
width: per(100);
margin-top: per(43);
height: 0;
padding-bottom: per(100);
font-size: em(32);
background-color: red;
}

BIN
assets/images/bluedialog.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 926 B

35
assets/pc-1366.scss
View File

@ -1,35 +0,0 @@
@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: 85%;
}
@function bq($v, $f:16) {
@return $v/$f+em;
}
.m-auto {
margin: 0 auto;
}

55
assets/pc-1920.scss
View File

@ -1,55 +0,0 @@
@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, $f:16) {
@return $v/$f+em;
}
.s1366 .layer {
width: 85%;
}
.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;
}

65
assets/pc-768.scss
View File

@ -1,65 +0,0 @@
@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;
@media screen and (max-width:1024px) {
.s1920 {
width: $layerWidth;
}
}
.s1920 {
width: 100%;
}
.s1920 .layer {
width: 100%;
}
@function bq($v, $f:16) {
@return $v/$f+em;
}
.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;
}

53
assets/reset.css
View File

@ -1,53 +0,0 @@
/* 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;
}

13
assets/style/_global.scss
View File

@ -0,0 +1,13 @@
html {
width: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
@import "./common.scss";

297
assets/style/common.scss
View File

@ -0,0 +1,297 @@
// 清除浮动
%clearfix {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// 文字溢出省略，仅webkit支持多
@mixin ellipsis($lines) {
@if ($lines==1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
}
%ellipsis {
@include ellipsis(1);
}
// 去掉滚动条
%no-scrollbar {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
// 使用 @extend %no-scrollbar;
// 一像素边框
%_onepxElement {
content: '';
position: absolute;
}
%_onepxTopBottom {
@extend %_onepxElement;
left: 0;
right: 0;
}
%_onepxLeftRight {
@extend %_onepxElement;
top: 0;
bottom: 0;
}
@mixin setDprBorder($direction: tb) {
@for $i from 1 through 4 {
@media screen and (-webkit-min-device-pixel-ratio: $i) {
@if($direction==tb) {
transform: scaleY(1 / $i);
}
@else if($direction==lr) {
transform: scaleX(1 / $i);
}
@else if($direction==full) {
transform: scale(1 / $i);
}
}
}
}
/*
* 一像素边框
* $direction: 边框方向，默认底边框
* $style: 线条样式，默认solid
* $color: 边框颜色
*/
@mixin one-px-border($direction: bottom, $style: solid, $color: #e5e5e5) {
position: relative;
$border: 1px $style $color;
@if ($direction==bottom) {
&:after {
@extend %_onepxTopBottom;
@include setDprBorder(tb);
border-top: $border;
bottom: 0;
}
}
@else if ($direction==top) {
&:before {
@extend %_onepxTopBottom;
@include setDprBorder(tb);
border-top: $border;
top: 0;
}
}
@else if ($direction==left) {
&:before {
@extend %_onepxLeftRight;
@include setDprBorder(lr);
border-left: $border;
left: 0;
}
}
@else if ($direction==right) {
&:after {
@extend %_onepxLeftRight;
@include setDprBorder(lr);
border-left: $border;
right: 0;
}
}
}
// 默认下边框
%one-px-border {
@include one-px-border();
}
// 四边一像素边框
@mixin full-px-border($color: #e5e5e5, $radius: 0, $zIndex: -1) {
position: relative;
z-index: 1;
&:before {
content: '';
position: absolute;
z-index: $zIndex;
border: 1px solid $color;
width: 200%;
height: 200%;
border-radius: inherit;
transform: scale(.5);
transform-origin: top left;
border-radius: $radius * 2;
left: 0;
top: 0
}
}
%full-px-border {
@include full-px-border();
}
// 去除单位并返回数值
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// px转rem
@mixin px2rem($attr, $num, $base: 37.5) {
$list: (); //存储所有转换后的值
// 遍历所有值并转换为rem单位
@for $i from 1 through length($num) {
// 计算单个rem值
$value: strip-units(nth($num, $i)) / $base * 1rem;
// 添加到列表中
$list: append($list, $value);
}
// 设置属性值
#{$attr}:$list;
}
@function px2rem($num, $base: 37.5) {
@return strip-units($num) / $base * 1rem;
}
// 居中一个元素
@mixin center($position) {
position: absolute;
@if $position=='vertical' {
top: 50%;
transform: translateY(-50%);
}
@else if $position=='horizontal' {
left: 50%;
transform: translateX(-50%);
}
@else if $position=='both' {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
// 该函数可以用来做各种方向的背景渐变，
@mixin background-gradient($start-color, $end-color, $orientation) {
background: $start-color;
@if $orientation=='vertical' {
background: linear-gradient(to bottom, $start-color, $end-color);
}
@else if $orientation=='horizontal' {
background: linear-gradient(to right, $start-color, $end-color);
}
@else {
background: radial-gradient(ellipse at center, $start-color, $end-color);
}
}
//
@mixin triangle($direction: down, $size: 5px, $color: #F96001) {
width: 0px;
height: 0px;
@if ($direction==left) {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
}
@else if ($direction==right) {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
}
@else if ($direction==down) {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
}
@else {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
}
}
// 媒体查询
$width-small: 400px;
$width-medium: 760px;
$width-large: 1200px;
@mixin responsive($width) {
@if $width==wide-screens {
@media only screen and (max-width: $width-large) {
@content;
}
}
@else if $width==medium-screens {
@media only screen and (max-width: $width-medium) {
@content;
}
}
@else if $width==small-screens {
@media only screen and (max-width: $width-small) {
@content;
}
}
}
// @include responsive(wide-screens) {
// width: 80%;
// }
// @include responsive(medium-screens) {
// width: 50%;
// font-size: 14px;
// }
// @include responsive(small-screens) {
// float: none;
// width: 100%;
// font-size: 12px;
// }

0
assets/style/pc.scss
View File

13
components/panel/index.vue
View File

@ -16,16 +16,5 @@
}
</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";
}
@import "./style.scss";
</style>

18
components/panel/pc.scss → components/panel/style.scss
View File

@ -1,6 +1,6 @@
.panel {
padding-top: bq(59);
padding-bottom: bq(59);
padding-top: em(59);
padding-bottom: em(59);
text-align: center;
color: #131720;
@ -9,8 +9,8 @@
}
h2 {
font-size: bq(36);
margin-bottom: bq(15);
font-size: em(36);
margin-bottom: em(15);
}
.panel__desc {
@ -18,17 +18,17 @@
justify-content: center;
.panel__desc__word {
font-size: bq(18);
font-size: em(18);
position: relative;
color: #4B4B4B;
&::before {
content: "";
position: absolute;
left: bq(-100, 18);
left: em(-100, 18);
top: 50%;
transform: translateY(-50%);
width: bq(83);
width: em(83);
height: 2px;
background-color: rgba(181, 181, 181, 1);
}
@ -36,10 +36,10 @@
&::after {
content: "";
position: absolute;
right: bq(-100, 18);
right: em(-100, 18);
top: 50%;
transform: translateY(-50%);
width: bq(83, 18);
width: em(83, 18);
height: 1px;
background-color: rgba(181, 181, 181, 1);
}

26
layouts/default.vue
View File

@ -1,27 +1,11 @@
<template>
<div class="s1920">
<div class="hq">
<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;
<script>
export default {
components: {
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
</style>
</script>

73
nuxt.config.js
View File

@ -1,64 +1,47 @@
export default {
const path = require('path');
module.exports = {
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 || ''
}
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}],
script: [{
src: '/js/flexible.js',
type: "text/javascript",
charset: 'utf-8'
}],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: {
color: '#fff'
},
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~assets/reset.css',
'swiper/dist/css/swiper.css'
'reset-css/reset.css',
],
/*
** Plugins to load before mounting the App
*/
plugins: [{
src: "@/plugins/vue-awesome-swiper",
ssr: false
},
plugins: [
],
/*
** Nuxt.js dev-modules
*/
devModules: [],
devModules: [
],
/*
** Nuxt.js modules
*/
modules: [],
modules: [
// 使用bootstrap-vue
'bootstrap-vue/nuxt'
],
/*
** Build configuration
*/
@ -66,18 +49,14 @@ export default {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// config.resolve.alias[0]
styleResources:{
scss: 'assets/style/_global.scss'
},
postcss: [
// require('postcss-pxtorem')({
// rootValue: 200,
// propList: ['*']
// }),
// require('autoprefixer')({
// browsers: ['Android >= 4.0', 'iOS >= 7']
// })
]
extend (config, ctx) {
config.resolve.alias['@pages']=path.resolve(__dirname,'pages');
config.resolve.alias['@assets']=path.resolve(__dirname,'assets');
config.resolve.alias['@components']=path.resolve(__dirname,'components');
config.resolve.alias['@images']=path.resolve(__dirname,'assets','images');
}
}
}

2181
package-lock.json
View File

File diff suppressed because it is too large

23
package.json
View File

@ -1,23 +1,30 @@
{
"name": "huaqian",
"version": "1.0.0",
"description": "My terrific Nuxt.js project",
"description": "My primo Nuxt.js project",
"author": "1549469775",
"private": true,
"scripts": {
"dev": "nuxt",
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "nuxt start",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate"
},
"dependencies": {
"autoprefixer": "^9.6.1",
"bootstrap-vue": "^2.0.0-rc.27",
"cross-env": "^5.2.0",
"jquery": "^3.4.1",
"koa": "^2.6.2",
"node-sass": "^4.12.0",
"nuxt": "^2.0.0",
"vue-awesome-swiper": "^3.1.3"
"postcss": "^7.0.17",
"postcss-loader": "^3.0.0",
"reset-css": "^4.0.1",
"sass-loader": "^7.2.0",
"sass-resources-loader": "^2.0.1"
},
"devDependencies": {
"autoprefixer": "^9.6.1",
"node-sass": "^4.12.0",
"postcss-pxtorem": "^4.0.1",
"sass-loader": "^7.1.0"
"nodemon": "^1.18.9"
}
}

54
pages-child/desc/index.vue
View File

@ -1,54 +0,0 @@
<template>
<div class="wrapper">
<div class="center_wraper"></div>
<ul class=" descicon layer m-auto clearfix">
<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>

65
pages-child/desc/pc.scss
View File

@ -1,65 +0,0 @@
.wrapper {
border-bottom: solid 1px #e2e2e2;
.descicon {
// min-height: bq(105);
// display: flex;
// display: inline-block;
// margin: 0 auto;
.item {
float: left;
display: flex;
align-items: center;
flex-direction: row;
width: bq(273+60);
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 {
white-space: nowrap;
font-size: bq(18);
color: #8f8f8f;
}
}
}
}
}

34
pages-child/header/index.vue
View File

@ -1,34 +0,0 @@
<template>
<div class="header layer m-auto">
<div class="logo">华谦官网</div>
<div class="hr border-right"></div>
<div class="header__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>

61
pages-child/header/pc.scss
View File

@ -1,61 +0,0 @@
.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(50);
&::after {
content: "";
height: 70%;
}
}
.header__desc {
font-size: bq(12);
line-height: bq(20);
// height: 80%;
display: inline-block;
color: #fff;
white-space: nowrap;
}
.navbar {
color: #fff;
padding-top: 0;
margin-left: auto;
.navbar__item {
float: left;
cursor: grab;
margin: 0 bq(16);
text-align: center;
font-size: bq(16);
line-height: bq(43);
// width: 4em;
}
}
}

193
pages/index.vue
View File

@ -1,168 +1,63 @@
<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="完美的技术支持" color='#f5f5f5'>
<ul class="dd clearfix">
<li class="d1 border">区块链+</li>
<li class="d1 border">短视频系统</li>
<li class="d1 border">电商系统</li>
<li class="d1">棋牌游戏系统</li>
</ul>
<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-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</div>
</vpanel>
<vpanel vtitle="合作方式" vdesc="互联网产业新趋势" color='#f5f5f5'>
<div class="hz_wrapper">
<div class="line"></div>
<ul class="fl__wraper clearfix">
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">1.商业模式设计</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">2.品牌策划</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">3.产品规划</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">4.UI设计</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">5.产品开发</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">6.项目跟进</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">7.产品测试</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">8.交付上线</p>
</li>
<li class="fl__item">
<div class="fl__item__icon"></div>
<div class="fl__item__circle"></div>
<p class="fl__item__name">9.迭代优化</p>
</li>
</ul>
</div>
</vpanel>
<vpanel vtitle="选择华谦" vdesc=" 品牌保证 ">
<b-container fluid>
<b-row>
<b-col sm='4'>1 of 2</b-col>
<b-col sm='2'>2 of 2</b-col>
</b-row>
<b-alert show>Default Alert</b-alert>
</vpanel>
</div>
<b-alert variant="success" show>Success Alert</b-alert>
<b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
Dismissible Alert!
</b-alert>
<img src="~@images/bluedialog.png" alt="">
<b-alert
:show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountDown=0"
@dismiss-count-down="countDownChanged"
>
<p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
<b-progress
variant="warning"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
></b-progress>
</b-alert>
<b-button @click="showAlert" variant="info" class="m-1">
Show alert with count-down timer
</b-button>
<b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
</b-button>
</b-container>
</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);
dismissSecs: 10,
dismissCountDown: 0,
showDismissibleAlert: false
}
},
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()
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
startSwiper() {
this.swiper.autoplay.start()
showAlert() {
this.dismissCountDown = this.dismissSecs
}
}
}
</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";
}
@import "./style.scss";
</style>

151
pages/pc.scss
View File

@ -1,151 +0,0 @@
.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;
}
}
}
.dd {
margin: bq(38) 0 bq(38) 0;
display: inline-block;
.d1 {
float: left;
padding: 0 bq(20);
font-size: bq(18);
font-weight: 400;
color: rgba(75, 75, 75, 1);
&.border {
border-right: 1px solid rgba(143, 143, 143, 1);
}
}
}
.hz_wrapper {
// height: bq(100);
margin-top: bq(40);
position: relative;
.line {
position: absolute;
top: bq(77+30+14/2);
left: 0;
right: 0;
background-image: url('/image/xu.png');
height: 1px;
}
.fl__wraper {
.fl__item {
float: left;
position: relative;
top: 0;
min-width: bq(137);
margin-right: bq(10);
transition: .2s linear all;
&:hover {
top: bq(-17);
}
.fl__item__icon {
box-sizing: content-box;
width: bq(77);
height: bq(77);
background-image: url('/image/icon0.png');
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
background-size: 100% 100%;
}
.fl__item__circle {
margin: 0 auto;
margin-top: bq(30);
width: bq(15);
height: bq(15);
border: 2px solid #888888;
border-radius: 50%;
}
.fl__item__name {
font-size: bq(20);
margin-top: bq(20);
}
}
}
}
.swiperBox {
height: bq(458);
/deep/ .swiper-button-prev {
background-image: url(/image/left.png);
background-size: 100% 100%;
left: 0;
width: bq(59);
height: bq(105);
transform: translateY(-25%);
}
/deep/ .swiper-button-next {
background-image: url(/image/right.png);
background-size: 100% 100%;
right: 0;
width: bq(59);
height: bq(105);
transform: translateY(-25%);
}
img {
width: 100%;
max-width: 100%;
height: 100%;
}
}

0
pages/style.scss
View File

3
plugins/README.md
View File

@ -5,3 +5,6 @@
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).
用于使用插件的地方，例如vue-swiper

4
plugins/vue-awesome-swiper.js
View File

@ -1,4 +0,0 @@
import Vue from "vue"
import VueAwesomeSwiper from "vue-awesome-swiper/dist/ssr";
Vue.use(VueAwesomeSwiper);

42
server/index.js
View File

@ -0,0 +1,42 @@
const Koa = require('koa')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = new Koa()
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = app.env !== 'production'
async function start () {
// Instantiate nuxt.js
const nuxt = new Nuxt(config)
const {
host = process.env.HOST || '127.0.0.1',
port = process.env.PORT || 3000
} = nuxt.options.server
// Build in development
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
} else {
await nuxt.ready()
}
app.use((ctx) => {
ctx.status = 200
ctx.respond = false // Bypass Koa's built-in response handling
ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
nuxt.render(ctx.req, ctx.res)
})
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
}
start()

BIN
static/image/bluedialog.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 926 B

9
store/index.js
View File

@ -0,0 +1,9 @@
export const state = () => ({
counter: 0
})
export const mutations = {
increment(state) {
state.counter++
}
}

20
store/todos.js
View File

@ -0,0 +1,20 @@
export const state = () => ({
list: []
})
export const mutations = {
add(state, text) {
state.list.push({
text: text,
done: false
})
},
remove(state, {
todo
}) {
state.list.splice(state.list.indexOf(todo), 1)
},
toggle(state, todo) {
todo.done = !todo.done
}
}
Write Preview
Loading…
Cancel
Save