38 changed files with 2253 additions and 1717 deletions
@ -1,6 +0,0 @@ |
|||||
# Browsers that we support |
|
||||
|
|
||||
last 1 version |
|
||||
> 1% |
|
||||
maintained node versions |
|
||||
not dead |
|
||||
@ -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). |
|
||||
@ -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). |
|
||||
|
|
||||
|
|
||||
测试一波 |
|
||||
@ -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; |
|
||||
} |
|
||||
} |
|
||||
@ -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+'%'; |
|
||||
} |
|
||||
@ -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 */ |
|
||||
@ -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" |
|
||||
} |
|
||||
@ -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> |
|
||||
@ -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; |
|
||||
} |
|
||||
|
After Width: | Height: | Size: 926 B |
@ -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; |
|
||||
} |
|
||||
@ -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; |
|
||||
} |
|
||||
@ -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; |
|
||||
} |
|
||||
@ -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; |
|
||||
} |
|
||||
@ -0,0 +1,13 @@ |
|||||
|
html { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
*, |
||||
|
*:before, |
||||
|
*:after { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@import "./common.scss"; |
||||
@ -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; |
||||
|
// } |
||||
@ -1,27 +1,11 @@ |
|||||
<template> |
<template> |
||||
<div class="s1920"> |
<div class="hq"> |
||||
<nuxt /> |
<nuxt /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
<script> |
||||
<style> |
export default { |
||||
html { |
components: { |
||||
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> |
||||
|
|
||||
*, |
|
||||
*:before, |
|
||||
*:after { |
|
||||
box-sizing: border-box; |
|
||||
margin: 0; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,83 +1,62 @@ |
|||||
export default { |
const path = require('path'); |
||||
|
module.exports = { |
||||
mode: 'universal', |
mode: 'universal', |
||||
/* |
/* |
||||
** Headers of the page |
** Headers of the page |
||||
*/ |
*/ |
||||
head: { |
head: { |
||||
title: process.env.npm_package_name || '', |
title: process.env.npm_package_name || '', |
||||
meta: [{ |
meta: [ |
||||
charset: 'utf-8' |
{ 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 || '' } |
||||
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: [{ |
link: [ |
||||
rel: 'icon', |
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } |
||||
type: 'image/x-icon', |
] |
||||
href: '/favicon.ico' |
|
||||
}], |
|
||||
script: [{ |
|
||||
src: '/js/flexible.js', |
|
||||
type: "text/javascript", |
|
||||
charset: 'utf-8' |
|
||||
}], |
|
||||
}, |
}, |
||||
/* |
/* |
||||
** Customize the progress-bar color |
** Customize the progress-bar color |
||||
*/ |
*/ |
||||
loading: { |
loading: { color: '#fff' }, |
||||
color: '#fff' |
|
||||
}, |
|
||||
/* |
/* |
||||
** Global CSS |
** Global CSS |
||||
*/ |
*/ |
||||
css: [ |
css: [ |
||||
'~assets/reset.css', |
'reset-css/reset.css', |
||||
'swiper/dist/css/swiper.css' |
|
||||
], |
], |
||||
/* |
/* |
||||
** Plugins to load before mounting the App |
** Plugins to load before mounting the App |
||||
*/ |
*/ |
||||
plugins: [{ |
plugins: [ |
||||
src: "@/plugins/vue-awesome-swiper", |
|
||||
ssr: false |
|
||||
}, |
|
||||
|
|
||||
], |
], |
||||
/* |
/* |
||||
** Nuxt.js dev-modules |
** Nuxt.js dev-modules |
||||
*/ |
*/ |
||||
devModules: [], |
devModules: [ |
||||
|
], |
||||
/* |
/* |
||||
** Nuxt.js modules |
** Nuxt.js modules |
||||
*/ |
*/ |
||||
modules: [], |
modules: [ |
||||
|
// 使用bootstrap-vue
|
||||
|
'bootstrap-vue/nuxt' |
||||
|
], |
||||
/* |
/* |
||||
** Build configuration |
** Build configuration |
||||
*/ |
*/ |
||||
build: { |
build: { |
||||
/* |
/* |
||||
** You can extend webpack config here |
** You can extend webpack config here |
||||
*/ |
*/ |
||||
extend(config, ctx) { |
styleResources:{ |
||||
// config.resolve.alias[0]
|
scss: 'assets/style/_global.scss' |
||||
}, |
}, |
||||
postcss: [ |
extend (config, ctx) { |
||||
// require('postcss-pxtorem')({
|
config.resolve.alias['@pages']=path.resolve(__dirname,'pages'); |
||||
// rootValue: 200,
|
config.resolve.alias['@assets']=path.resolve(__dirname,'assets'); |
||||
// propList: ['*']
|
config.resolve.alias['@components']=path.resolve(__dirname,'components'); |
||||
// }),
|
config.resolve.alias['@images']=path.resolve(__dirname,'assets','images'); |
||||
// require('autoprefixer')({
|
} |
||||
// browsers: ['Android >= 4.0', 'iOS >= 7']
|
|
||||
// })
|
|
||||
] |
|
||||
|
|
||||
} |
} |
||||
} |
} |
||||
|
|||||
File diff suppressed because it is too large
@ -1,23 +1,30 @@ |
|||||
{ |
{ |
||||
"name": "huaqian", |
"name": "huaqian", |
||||
"version": "1.0.0", |
"version": "1.0.0", |
||||
"description": "My terrific Nuxt.js project", |
"description": "My primo Nuxt.js project", |
||||
"author": "1549469775", |
"author": "1549469775", |
||||
"private": true, |
"private": true, |
||||
"scripts": { |
"scripts": { |
||||
"dev": "nuxt", |
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", |
||||
"build": "nuxt build", |
"build": "nuxt build", |
||||
"start": "nuxt start", |
"start": "cross-env NODE_ENV=production node server/index.js", |
||||
"generate": "nuxt generate" |
"generate": "nuxt generate" |
||||
}, |
}, |
||||
"dependencies": { |
"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", |
"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": { |
"devDependencies": { |
||||
"autoprefixer": "^9.6.1", |
"nodemon": "^1.18.9" |
||||
"node-sass": "^4.12.0", |
|
||||
"postcss-pxtorem": "^4.0.1", |
|
||||
"sass-loader": "^7.1.0" |
|
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -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> |
|
||||
@ -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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -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> |
|
||||
@ -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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,168 +1,63 @@ |
|||||
<template> |
<template> |
||||
<div class="container"> |
<b-container fluid> |
||||
<vheader></vheader> |
<b-row> |
||||
<div class="banner"> |
<b-col sm='4'>1 of 2</b-col> |
||||
<div class="banner__wrap"> |
<b-col sm='2'>2 of 2</b-col> |
||||
<div class="banner__title"> |
</b-row> |
||||
聚焦区块链生态，专注于DAPP开发 |
<b-alert show>Default Alert</b-alert> |
||||
打造区块链+互联网新时代 |
|
||||
</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=" 品牌保证 "> |
|
||||
|
|
||||
</vpanel> |
<b-alert variant="success" show>Success Alert</b-alert> |
||||
</div> |
|
||||
|
<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> |
</template> |
||||
|
|
||||
<script> |
<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 { |
export default { |
||||
components: { |
|
||||
vheader, |
|
||||
vdesc, |
|
||||
vpanel |
|
||||
}, |
|
||||
data() { |
data() { |
||||
return { |
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'], |
dismissSecs: 10, |
||||
// 所有配置均为可选（同Swiper配置） |
dismissCountDown: 0, |
||||
swiperOption: { |
showDismissibleAlert: false |
||||
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: { |
methods: { |
||||
stopSwiper() { |
countDownChanged(dismissCountDown) { |
||||
this.swiper.autoplay.stop() |
this.dismissCountDown = dismissCountDown |
||||
}, |
}, |
||||
startSwiper() { |
showAlert() { |
||||
this.swiper.autoplay.start() |
this.dismissCountDown = this.dismissSecs |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss'> |
<style lang='scss'> |
||||
@media screen and (min-width: 1440px) { |
@import "./style.scss"; |
||||
@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> |
</style> |
||||
|
|||||
@ -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%; |
|
||||
} |
|
||||
} |
|
||||
@ -1,4 +0,0 @@ |
|||||
import Vue from "vue" |
|
||||
import VueAwesomeSwiper from "vue-awesome-swiper/dist/ssr"; |
|
||||
|
|
||||
Vue.use(VueAwesomeSwiper); |
|
||||
@ -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() |
||||
|
After Width: | Height: | Size: 926 B |
@ -0,0 +1,9 @@ |
|||||
|
export const state = () => ({ |
||||
|
counter: 0 |
||||
|
}) |
||||
|
|
||||
|
export const mutations = { |
||||
|
increment(state) { |
||||
|
state.counter++ |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue