feat login time bg

src/filters/index.js

@@ -1,4 +1,4 @@
-function pluralize(time, label) {
+function pluralize (time, label) {
   if (time === 1) {
     return time + label
   }
@@ -8,8 +8,7 @@ function pluralize(time, label) {
 /**
  * 日期格式化
  */
-export function dateFormat(date) {
-  let format = 'yyyy-MM-dd hh:mm:ss'
+export function dateFormat (date, format = 'yyyy-MM-dd hh:mm:ss') {
   if (date !== 'Invalid Date') {
     var o = {
       'M+': date.getMonth() + 1, // month
@@ -36,7 +35,7 @@ export function dateFormat(date) {
   return ''
 }
 
-export function timeAgo(time) {
+export function timeAgo (time) {
   const between = Date.now() / 1000 - Number(time)
   if (between < 3600) {
     return pluralize(~~(between / 60), ' minute')
@@ -47,7 +46,7 @@ export function timeAgo(time) {
   }
 }
 
-export function parseTime(time, cFormat) {
+export function parseTime (time, cFormat) {
   if (arguments.length === 0) {
     return null
   }
@@ -83,7 +82,7 @@ export function parseTime(time, cFormat) {
   return time_str
 }
 
-export function formatTime(time, option) {
+export function formatTime (time, option) {
   time = +time * 1000
   const d = new Date(time)
   const now = Date.now()
@@ -107,7 +106,7 @@ export function formatTime(time, option) {
 }
 
 /* 数字 格式化 */
-export function nFormatter(num, digits) {
+export function nFormatter (num, digits) {
   const si = [
     { value: 1E18, symbol: 'E' },
     { value: 1E15, symbol: 'P' },
@@ -124,12 +123,12 @@ export function nFormatter(num, digits) {
   return num.toString()
 }
 
-export function html2Text(val) {
+export function html2Text (val) {
   const div = document.createElement('div')
   div.innerHTML = val
   return div.textContent || div.innerText
 }
 
-export function toThousandslsFilter(num) {
+export function toThousandslsFilter (num) {
   return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }

src/page/login/index.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="login-container"
        @keyup.enter.native="handleLogin">
+    <div class="login-time">
+      {{ time }}
+    </div>
     <div class="login-weaper  animated bounceInDown">
       <div class="login-logo">
-        <img src="/img/logo.png" alt="">
+        <img src="/img/logo.png"
+             alt="">
       </div>
       <p class="login-tip">{{ website.infoTitle}} v 3.3</p>
       <div class="login-border">
@@ -23,14 +27,26 @@
           <codeLogin v-else-if="activeName==='code'" />
           <thirdLogin v-else-if="activeName==='third'" />
           <div class="login-menu">
-            <a href="#" @click.stop="activeName='user'">账号密码</a>
-            <a href="#" @click.stop="activeName='code'">手机号登录</a>
-            <a href="#" @click.stop="activeName='third'">第三方登录</a>
+            <a href="#"
+               @click.stop="activeName='user'">账号密码</a>
+            <a href="#"
+               @click.stop="activeName='code'">手机号登录</a>
+            <a href="#"
+               @click.stop="activeName='third'">第三方登录</a>
           </div>
         </div>
 
       </div>
     </div>
+    <div class="login-copyright">
+
+      Copyright
+
+      2017-parent pig4cloud.com
+
+      @冷冷
+
+    </div>
     <top-color v-show="false" />
   </div>
 </template>
@@ -105,7 +121,7 @@ export default {
       setStore({ name: 'tenantId', content: command })
     },
     getTime () {
-      this.time = dateFormat(new Date())
+      this.time = dateFormat(new Date(), 'hh:mm:ss')
     },
     getTenantList () {
       request({
@@ -149,15 +165,22 @@ export default {
 </script>
 
 <style lang="scss">
+.login-copyright {
+  color: #999;
+  width: 100%;
+  position: fixed;
+  bottom: 30px;
+  text-align: center;
+}
 .login-container {
+  background-color: #f0f2f5;
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background-color: #fbfbfb;
-  animation: animate-cloud 20s linear infinite;
+  // animation: animate-cloud 20s linear infinite;
 }
 
 .login-tip {
@@ -220,15 +243,18 @@ export default {
 }
 
 .login-time {
-  position: absolute;
-  left: 25px;
-  top: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.03);
+  position: fixed;
+  left: 0;
+  top: 0;
   width: 100%;
-  color: #fff;
-  font-weight: 200;
+  height: 100%;
   opacity: 0.9;
-  font-size: 18px;
-  overflow: hidden;
+  font-size: 24em;
+  font-weight: bold;
 }
 
 .login-left .title {

src/util/date.js

@@ -25,8 +25,7 @@ export const calcDate = (date1, date2) => {
 /**
  * 日期格式化
  */
-export function dateFormat(date) {
-  let format = 'yyyy-MM-dd hh:mm:ss'
+export function dateFormat (date, format = 'yyyy-MM-dd hh:mm:ss') {
   if (date !== 'Invalid Date') {
     var o = {
       'M+': date.getMonth() + 1, // month