40 changed files with 112 additions and 1998 deletions
@ -1,29 +1 @@ |
|||
# huaqian |
|||
|
|||
> My primo 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 |
|||
|
|||
2 |
|||
|
|||
3 |
|||
@nuxtjs/style-resources 这鬼东西无效，直接用配置文件的css加载scss文件 |
|||
@ -1,16 +0,0 @@ |
|||
// import $axios from '@nuxtjs/axios'
|
|||
// console.log($axios({
|
|||
// method:'POST',
|
|||
// url:'/',
|
|||
// data:{},
|
|||
// params:{}
|
|||
// }));
|
|||
|
|||
// export default ($axios)=>{
|
|||
// return {
|
|||
// register(){$axios({
|
|||
// method:'POST',
|
|||
// url:''
|
|||
// })}
|
|||
// }
|
|||
// }
|
|||
@ -1,8 +1,25 @@ |
|||
|
|||
|
|||
@import "./var.scss"; |
|||
@import "./common.scss"; |
|||
|
|||
html{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.light{ |
|||
background-color: $light-sidenav-bg; |
|||
color: $light-sidenav-color; |
|||
} |
|||
|
|||
.dark{ |
|||
background-color: $dark-sidenav-bg; |
|||
color: $dark-sidenav-color; |
|||
} |
|||
|
|||
|
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
$light-sidenav-bg:#fff; |
|||
$light-sidenav-color:#000; |
|||
|
|||
$dark-sidenav-bg:#000; |
|||
$dark-sidenav-color:#fff; |
|||
File diff suppressed because it is too large
@ -1,96 +0,0 @@ |
|||
export default (realData, str, ctrlDown, cb) => { |
|||
return { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
triggerOn: 'mousemove' |
|||
}, |
|||
series: [{ |
|||
type: 'tree', |
|||
roam: true, |
|||
data: [realData], |
|||
symbol: 'emptycircle', |
|||
left: '3%', |
|||
right: '3%', |
|||
top: '8%', |
|||
bottom: '20%', |
|||
// 缩放
|
|||
zoom: 1, |
|||
diyExpand: (name, isExpand) => { |
|||
if (ctrlDown) { |
|||
return !isExpand |
|||
} else { |
|||
// 收缩
|
|||
cb && cb(isExpand); |
|||
return isExpand |
|||
} |
|||
}, |
|||
symbolSize: (v, param) => { |
|||
if (str && param.name.match(str)) { |
|||
return 35 |
|||
} else { |
|||
return 20; |
|||
} |
|||
}, |
|||
symbol: (v, param) => { |
|||
if (Number(param.name) % 2 == 0) { |
|||
return 'image://https://cn.bing.com/th?id=OIP.1e3YVW946dgy5uJH764JXwHaFj&pid=Api&rs=1' |
|||
} else { |
|||
return 'emptycircle'; |
|||
} |
|||
}, |
|||
symbolKeepAspect: false, |
|||
layout: 'orthogonal', |
|||
orient: 'TB', |
|||
|
|||
expandAndCollapse: true, |
|||
initialTreeDepth: -1, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'top', |
|||
verticalAlign: 'middle', |
|||
align: 'middle', |
|||
fontSize: 20, |
|||
distance: 10, |
|||
formatter: function (param) { |
|||
if (str && param.name.match(str)) { |
|||
return '{a|' + param.name + '}' |
|||
} else { |
|||
return param.name; |
|||
} |
|||
}, |
|||
rich: { |
|||
a: { |
|||
color: 'red', |
|||
fontSize: 26, |
|||
fontWeight: 'bolder', |
|||
lineHeight: 10 |
|||
} |
|||
} |
|||
}, |
|||
// 高亮悬浮
|
|||
emphasis: { |
|||
fontSize: 26, |
|||
distance: 10, |
|||
fontWeight: 'bolder', |
|||
color: 'red' |
|||
} |
|||
}, |
|||
|
|||
leaves: { |
|||
label: { |
|||
normal: { |
|||
fontSize: 20, |
|||
show: true, |
|||
distance: 10, |
|||
position: 'top', |
|||
verticalAlign: 'middle', |
|||
align: 'middle' |
|||
} |
|||
} |
|||
}, |
|||
// animation: false,
|
|||
animationDurationUpdate: 750 |
|||
}] |
|||
} |
|||
} |
|||
@ -1,9 +0,0 @@ |
|||
<!doctype html> |
|||
<html data-n-head=""> |
|||
<head data-n-head=""> |
|||
<title data-n-head="true">Beer</title><meta data-n-head="true" charset="utf-8"><meta data-n-head="true" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta data-n-head="true" data-hid="description" name="description" content="My primo Nuxt.js project"><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/website/_nuxt/ca1ba156dfe080d242ef.js" as="script"><link rel="preload" href="/website/_nuxt/4d63b374d12d0c512fe1.js" as="script"><link rel="preload" href="/website/_nuxt/02f154bff9392ab47ea0.js" as="script"><link rel="preload" href="/website/_nuxt/a69e7f7b78ae7067d8d5.js" as="script"> |
|||
</head> |
|||
<body data-n-head=""> |
|||
<div id="__nuxt"><style>#nuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div> |
|||
<script type="text/javascript" src="/website/_nuxt/ca1ba156dfe080d242ef.js"></script><script type="text/javascript" src="/website/_nuxt/4d63b374d12d0c512fe1.js"></script><script type="text/javascript" src="/website/_nuxt/02f154bff9392ab47ea0.js"></script><script type="text/javascript" src="/website/_nuxt/a69e7f7b78ae7067d8d5.js"></script></body> |
|||
</html> |
|||
@ -1,11 +0,0 @@ |
|||
# 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). |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,52 +0,0 @@ |
|||
/*! |
|||
* Vue.js v2.6.10 |
|||
* (c) 2014-2019 Evan You |
|||
* Released under the MIT License. |
|||
*/ |
|||
|
|||
/*! |
|||
* vue-router v3.1.2 |
|||
* (c) 2019 Evan You |
|||
* @license MIT |
|||
*/ |
|||
|
|||
/** |
|||
* vuex v3.1.1 |
|||
* (c) 2019 Evan You |
|||
* @license MIT |
|||
*/ |
|||
|
|||
/** |
|||
* vue-meta v1.6.0 |
|||
* (c) 2019 Declan de Wet & Sébastien Chopin (@Atinux) |
|||
* @license MIT |
|||
*/ |
|||
|
|||
/* |
|||
object-assign |
|||
(c) Sindre Sorhus |
|||
@license MIT |
|||
*/ |
|||
|
|||
/*! |
|||
* Determine if an object is a Buffer |
|||
* |
|||
* @author Feross Aboukhadijeh <https://feross.org> |
|||
* @license MIT |
|||
*/ |
|||
|
|||
/*! |
|||
* vue-no-ssr v1.1.1 |
|||
* (c) 2018-present egoist <0x142857@gmail.com> |
|||
* Released under the MIT License. |
|||
*/ |
|||
|
|||
/*! |
|||
* ZRender, a high performance 2d drawing library. |
|||
* |
|||
* Copyright (c) 2013, Baidu Inc. |
|||
* All rights reserved. |
|||
* |
|||
* LICENSE |
|||
* https://github.com/ecomfe/zrender/blob/master/LICENSE.txt |
|||
*/ |
|||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@ |
|||
!function(e){function r(data){for(var r,n,f=data[0],l=data[1],d=data[2],i=0,h=[];i<f.length;i++)n=f[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(v&&v(data);h.length;)h.shift()();return c.push.apply(c,d||[]),t()}function t(){for(var e,i=0;i<c.length;i++){for(var r=c[i],t=!0,n=1;n<r.length;n++){var l=r[n];0!==o[l]&&(t=!1)}t&&(c.splice(i--,1),e=f(f.s=r[0]))}return e}var n={},o={4:0},c=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise(function(r,n){t=o[e]=[r,n]});r.push(t[2]=n);var c,script=document.createElement("script");script.charset="utf-8",script.timeout=120,f.nc&&script.setAttribute("nonce",f.nc),script.src=function(e){return f.p+""+{2:"100e629bf9959497fc76",3:"dc129e08ed4ceb79aa72",6:"884302fa3fe4fc621eae"}[e]+".js"}(e);var l=new Error;c=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+c+")",l.name="ChunkLoadError",l.type=n,l.request=c,t[1](l)}o[e]=void 0}};var d=setTimeout(function(){c({type:"timeout",target:script})},12e4);script.onerror=script.onload=c,document.head.appendChild(script)}return Promise.all(r)},f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},f.p="/website/_nuxt/",f.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],d=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var v=d;t()}([]); |
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 926 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 906 B |
|
Before Width: | Height: | Size: 751 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 258 B |
@ -1,9 +0,0 @@ |
|||
<!doctype html> |
|||
<html data-n-head-ssr data-n-head=""> |
|||
<head data-n-head=""> |
|||
<title data-n-head="true">Beer</title><meta data-n-head="true" charset="utf-8"><meta data-n-head="true" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta data-n-head="true" data-hid="description" name="description" content="My primo Nuxt.js project"><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"><base href="/website/"><link rel="preload" href="/website/_nuxt/ca1ba156dfe080d242ef.js" as="script"><link rel="preload" href="/website/_nuxt/4d63b374d12d0c512fe1.js" as="script"><link rel="preload" href="/website/_nuxt/02f154bff9392ab47ea0.js" as="script"><link rel="preload" href="/website/_nuxt/a69e7f7b78ae7067d8d5.js" as="script"><link rel="preload" href="/website/_nuxt/100e629bf9959497fc76.js" as="script"><style data-vue-ssr-id="290f013b:0 17cfdfa9:0 1112905c:0 6e47f87d:0">a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#fff;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}html[data-v-e0d65c42]{width:100vw;height:100vh}.default.layout[data-v-e0d65c42]{background:#f5f5d5;position:fixed;left:0;right:0;bottom:0;top:0}html[data-v-6dfaae3a]{width:100vw;height:100vh}.fade-enter-active[data-v-6dfaae3a],.fade-leave-active[data-v-6dfaae3a]{transition:opacity .5s}.fade-enter[data-v-6dfaae3a],.fade-leave-to[data-v-6dfaae3a]{opacity:0}.slide-fade-enter-active[data-v-6dfaae3a],.slide-fade-leave-active[data-v-6dfaae3a]{transition:all .5s}.slide-fade-enter[data-v-6dfaae3a],.slide-fade-leave-to[data-v-6dfaae3a]{transform:translateY(-300%);opacity:0}._model ._mask[data-v-6dfaae3a],._model[data-v-6dfaae3a]{position:fixed;top:0;left:0;right:0;bottom:0}._model ._mask[data-v-6dfaae3a]{background-color:rgba(0,0,0,.21961)}._model ._panel[data-v-6dfaae3a]{position:fixed;width:500px;top:100px;left:0;right:0;margin:0 auto;background-color:#fff}</style> |
|||
</head> |
|||
<body data-n-head=""> |
|||
<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div class="default layout" data-v-e0d65c42><div class="home" data-v-e0d65c42><div id="main" style="width:100%;height:100vh"></div> <div class="_model" style="display:none" data-v-6dfaae3a data-v-6dfaae3a><div class="_mask" data-v-6dfaae3a></div> <div class="_panel" style="display:none" data-v-6dfaae3a data-v-6dfaae3a>asssssssssssssssssss</div></div></div></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],error:null,state:{user:{},todos:{list:[],ip:""}},serverRendered:!0}</script><script src="/website/_nuxt/ca1ba156dfe080d242ef.js" defer></script><script src="/website/_nuxt/100e629bf9959497fc76.js" defer></script><script src="/website/_nuxt/4d63b374d12d0c512fe1.js" defer></script><script src="/website/_nuxt/02f154bff9392ab47ea0.js" defer></script><script src="/website/_nuxt/a69e7f7b78ae7067d8d5.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -1,77 +0,0 @@ |
|||
(function (designWidth, maxWidth) { |
|||
var doc = document, |
|||
win = window; |
|||
var docEl = doc.documentElement; |
|||
var metaEl, |
|||
metaElCon; |
|||
var styleText, |
|||
remStyle = document.createElement("style"); |
|||
var tid; |
|||
|
|||
function refreshRem() { |
|||
// var width = parseInt(window.screen.width); // uc有bug
|
|||
var width = docEl.getBoundingClientRect().width; |
|||
if (!maxWidth) { |
|||
maxWidth = 540; |
|||
}; |
|||
if (width > maxWidth) { // 淘宝做法：限制在540的屏幕下，这样100%就跟10rem不一样了
|
|||
width = maxWidth; |
|||
} |
|||
var rem = width * 100 / designWidth; |
|||
// var rem = width / 10; // 如果要兼容vw的话分成10份 淘宝做法
|
|||
//docEl.style.fontSize = rem + "px"; //旧的做法，在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug
|
|||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; |
|||
} |
|||
|
|||
// 设置 viewport ，有的话修改 没有的话设置
|
|||
metaEl = doc.querySelector('meta[name="viewport"]'); |
|||
// 20171219修改：增加 viewport-fit=cover ，用于适配iphoneX
|
|||
metaElCon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"; |
|||
if (metaEl) { |
|||
metaEl.setAttribute("content", metaElCon); |
|||
} else { |
|||
metaEl = doc.createElement("meta"); |
|||
metaEl.setAttribute("name", "viewport"); |
|||
metaEl.setAttribute("content", metaElCon); |
|||
if (docEl.firstElementChild) { |
|||
docEl.firstElementChild.appendChild(metaEl); |
|||
} else { |
|||
var wrap = doc.createElement("div"); |
|||
wrap.appendChild(metaEl); |
|||
doc.write(wrap.innerHTML); |
|||
wrap = null; |
|||
} |
|||
} |
|||
|
|||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
|||
refreshRem(); |
|||
|
|||
if (docEl.firstElementChild) { |
|||
docEl.firstElementChild.appendChild(remStyle); |
|||
} else { |
|||
var wrap = doc.createElement("div"); |
|||
wrap.appendChild(remStyle); |
|||
doc.write(wrap.innerHTML); |
|||
wrap = null; |
|||
} |
|||
|
|||
win.addEventListener("resize", function () { |
|||
clearTimeout(tid); //防止执行两次
|
|||
tid = setTimeout(refreshRem, 300); |
|||
}, false); |
|||
|
|||
win.addEventListener("pageshow", function (e) { |
|||
if (e.persisted) { // 浏览器后退的时候重新计算
|
|||
clearTimeout(tid); |
|||
tid = setTimeout(refreshRem, 300); |
|||
} |
|||
}, false); |
|||
|
|||
if (doc.readyState === "complete") { |
|||
doc.body.style.fontSize = "16px"; |
|||
} else { |
|||
doc.addEventListener("DOMContentLoaded", function (e) { |
|||
doc.body.style.fontSize = "16px"; |
|||
}, false); |
|||
} |
|||
})(750, 750); |
|||
File diff suppressed because one or more lines are too long
@ -1,20 +1,59 @@ |
|||
<template> |
|||
<div class="default layout"> |
|||
<nuxt /> |
|||
<div class="default"> |
|||
<div id="aside" class="page-sidenav" :class="theme"> |
|||
<div class="sidenav"> |
|||
<div class="logo px-md-4 py-md-4"> |
|||
<a href="#" class="navbar-brand" style="width:140px;"> |
|||
<img v-if="theme=='light'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo.png" alt="nicetheme"> |
|||
<img v-if="theme=='dark'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo-dark.png" alt="nicetheme"> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="page-content" :class="theme"> |
|||
<nuxt /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html |
|||
export default { |
|||
components: {} |
|||
components: {}, |
|||
mounted(){ |
|||
console.log(this); |
|||
|
|||
}, |
|||
computed:{ |
|||
theme(){ |
|||
return this.$store.getters.theme |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.default.layout { |
|||
background: #f5f5d5; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
top: 0; |
|||
|
|||
.default { |
|||
display: flex; |
|||
.page-sidenav { |
|||
z-index: 1000; |
|||
min-width: 13rem; |
|||
height: 100vh; |
|||
&.light{ |
|||
background-color: #f4f6fb; |
|||
} |
|||
&.dark{ |
|||
background-color: #000000; |
|||
} |
|||
} |
|||
.page-content { |
|||
flex: 1 1 auto!important; |
|||
min-height: 100vh; |
|||
&.light{ |
|||
background-color: #ffffff; |
|||
} |
|||
&.dark{ |
|||
background-color: #000000; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,297 +0,0 @@ |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.page { |
|||
font-family: 'Montserrat', sans-serif; |
|||
background: #f6f5f7; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100vh; |
|||
// margin: -20px 0 50px; |
|||
} |
|||
|
|||
h1 { |
|||
font-weight: bold; |
|||
margin: 0; |
|||
} |
|||
|
|||
p { |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: .5px; |
|||
margin: 20px 0 30px; |
|||
} |
|||
|
|||
span { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
a { |
|||
color: #333; |
|||
font-size: 14px; |
|||
text-decoration: none; |
|||
margin: 15px 0; |
|||
} |
|||
|
|||
.dowebok { |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22); |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 768px; |
|||
max-width: 100%; |
|||
min-height: 480px; |
|||
} |
|||
|
|||
.form-container form { |
|||
background: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 0 50px; |
|||
height: 100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.social-container { |
|||
margin: 20px 0; |
|||
} |
|||
|
|||
.social-container a { |
|||
border: 1px solid #ddd; |
|||
border-radius: 50%; |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 5px; |
|||
height: 40px; |
|||
width: 40px; |
|||
} |
|||
|
|||
.social-container a:hover { |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.form-container input { |
|||
background: #eee; |
|||
border: none; |
|||
padding: 12px 15px; |
|||
margin: 8px 0; |
|||
width: 100%; |
|||
outline: none; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 20px; |
|||
border: 1px solid #ff4b2b; |
|||
background: #ff4b2b; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
padding: 12px 45px; |
|||
letter-spacing: 1px; |
|||
text-transform: uppercase; |
|||
transition: transform 80ms ease-in; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
button:active { |
|||
transform: scale(.95); |
|||
} |
|||
|
|||
button:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
button.ghost { |
|||
background: transparent; |
|||
border-color: #fff; |
|||
} |
|||
|
|||
.form-container { |
|||
position: absolute; |
|||
top: 0; |
|||
height: 100%; |
|||
transition: all .6s ease-in-out; |
|||
} |
|||
|
|||
.sign-in-container { |
|||
left: 0; |
|||
width: 50%; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.sign-up-container { |
|||
left: 0; |
|||
width: 50%; |
|||
z-index: 1; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.overlay-container { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
width: 50%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
transition: transform .6s ease-in-out; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.overlay { |
|||
background: #ff416c; |
|||
background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover; |
|||
color: #fff; |
|||
position: relative; |
|||
left: -100%; |
|||
height: 100%; |
|||
width: 200%; |
|||
transform: translateY(0); |
|||
transition: transform .6s ease-in-out; |
|||
} |
|||
|
|||
.overlay-panel { |
|||
position: absolute; |
|||
top: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 0 40px; |
|||
height: 100%; |
|||
width: 50%; |
|||
text-align: center; |
|||
transform: translateY(0); |
|||
transition: transform .6s ease-in-out; |
|||
} |
|||
|
|||
.overlay-right { |
|||
right: 0; |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.overlay-left { |
|||
transform: translateY(-20%); |
|||
} |
|||
|
|||
/* Move signin to right */ |
|||
.dowebok.right-panel-active .sign-in-container { |
|||
transform: translateY(100%); |
|||
} |
|||
|
|||
/* Move overlay to left */ |
|||
.dowebok.right-panel-active .overlay-container { |
|||
transform: translateX(-100%); |
|||
} |
|||
|
|||
/* Bring signup over signin */ |
|||
.dowebok.right-panel-active .sign-up-container { |
|||
transform: translateX(100%); |
|||
opacity: 1; |
|||
z-index: 5; |
|||
} |
|||
|
|||
/* Move overlay back to right */ |
|||
.dowebok.right-panel-active .overlay { |
|||
transform: translateX(50%); |
|||
} |
|||
|
|||
/* Bring back the text to center */ |
|||
.dowebok.right-panel-active .overlay-left { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
/* Same effect for right */ |
|||
.dowebok.right-panel-active .overlay-right { |
|||
transform: translateY(20%); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
@ -1,94 +0,0 @@ |
|||
<template> |
|||
<div class="page"> |
|||
ppp{{data}} |
|||
<div class="dowebok" id="dowebok"> |
|||
<div class="form-container sign-up-container"> |
|||
<form action="#" v-stopsubmit> |
|||
<h1>注册</h1> |
|||
<div class="social-container"> |
|||
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> |
|||
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a> |
|||
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> |
|||
</div> |
|||
<span>或使用邮箱注册</span> |
|||
<input type="text" placeholder="姓名"> |
|||
<input type="email" placeholder="电子邮箱"> |
|||
<input type="password" placeholder="密码"> |
|||
<button>注册</button> |
|||
</form> |
|||
</div> |
|||
<div class="form-container sign-in-container"> |
|||
<form action="#" v-stopsubmit> |
|||
<h1>登录</h1> |
|||
<div class="social-container"> |
|||
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> |
|||
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a> |
|||
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> |
|||
</div> |
|||
<span>或使用您的帐号</span> |
|||
<input type="text" v-model="form.username" placeholder="账号"> |
|||
<input type="password" v-model="form.password" placeholder="密码"> |
|||
<a href="#">忘记密码？</a> |
|||
<button @click="login">登录</button> |
|||
</form> |
|||
</div> |
|||
<div class="overlay-container"> |
|||
<div class="overlay"> |
|||
<div class="overlay-panel overlay-left"> |
|||
<h1>已有帐号？</h1> |
|||
<p>请使用您的帐号进行登录</p> |
|||
<button class="ghost" id="signIn">登录</button> |
|||
</div> |
|||
<div class="overlay-panel overlay-right"> |
|||
<h1>没有帐号？</h1> |
|||
<p>立即注册加入我们，和我们一起开始旅程吧</p> |
|||
<button class="ghost" id="signUp">注册</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
async asyncData({ $axios }) { |
|||
return {} |
|||
}, |
|||
data(){ |
|||
return { |
|||
data:{}, |
|||
form:{ |
|||
username:"", |
|||
password:"" |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
async login(){ |
|||
try { |
|||
this.data = await this.$axios.$post('/api/login',this.form) |
|||
} catch (error) { |
|||
this.data = error |
|||
console.log(error); |
|||
} |
|||
} |
|||
}, |
|||
mounted(){ |
|||
var signUpButton = document.getElementById('signUp') |
|||
var signInButton = document.getElementById('signIn') |
|||
var container = document.getElementById('dowebok') |
|||
|
|||
signUpButton.addEventListener('click', function () { |
|||
container.classList.add('right-panel-active') |
|||
}) |
|||
|
|||
signInButton.addEventListener('click', function () { |
|||
container.classList.remove('right-panel-active') |
|||
}) |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import './index.scss'; |
|||
</style> |
|||
Loading…
Reference in new issue