From e4acf226b47f0ebf0d6dfeef910363f016501806 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Thu, 27 Jun 2019 15:33:42 +0800 Subject: [PATCH] add 我的钱包前端页面 table --- package.json | 2 +- src/components/Breadcrumb/index.vue | 4 ++-- src/components/Pagination/index.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/styles/element-ui.scss | 31 +++++++++++++++++++++++++++++++ src/styles/index.scss | 3 +++ src/utils/scroll-to.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/account/index.vue | 243 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------ 7 files changed, 411 insertions(+), 33 deletions(-) create mode 100644 src/components/Pagination/index.vue create mode 100644 src/utils/scroll-to.js diff --git a/package.json b/package.json index 817a244..d3b980a 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "element-ui": "2.7.2", "js-cookie": "2.2.0", "normalize.css": "7.0.0", - "nprogress": "0.2.0", + "nprogress": "^0.2.0", "path-to-regexp": "2.4.0", "vue": "2.6.10", "vue-router": "3.0.6", diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 29f9a04..9263198 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -33,7 +33,7 @@ export default { const first = matched[0] if (!this.isDashboard(first)) { - matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) + matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched) } this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) @@ -43,7 +43,7 @@ export default { if (!name) { return false } - return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() + return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase() }, pathCompile(path) { // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue new file mode 100644 index 0000000..4216089 --- /dev/null +++ b/src/components/Pagination/index.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 6af3bfd..b41a015 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -42,3 +42,34 @@ display: block } } +// fix date-picker ui bug in filter-item +.el-range-editor.el-input__inner { + display: inline-flex !important; +} + +.el-table thead { + color: #515a6e !important; + font-weight: 500; +} +.el-table th{ + white-space: nowrap !important; + overflow: hidden !important; + background-color: #f8f8f9 !important; +} +.el-table{ + color: #515A6E !important; +} +.el-table thead{ + color: #1F2D3D !important; +} + +.el-form-item__label{ + font-size: 12px !important; + color: #515a6e !important; + vertical-align:middle; +} +label{ + font-weight:500 !important; + font-size: 14px !important; + cursor: default !important; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 6bc0924..8e971c7 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -104,3 +104,6 @@ p{ .font-size24{ font-size: 24px; } +.margin-top-24{ + margin-top: 24px; +} diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js new file mode 100644 index 0000000..c5d8e04 --- /dev/null +++ b/src/utils/scroll-to.js @@ -0,0 +1,58 @@ +Math.easeInOutQuad = function(t, b, c, d) { + t /= d / 2 + if (t < 1) { + return c / 2 * t * t + b + } + t-- + return -c / 2 * (t * (t - 2) - 1) + b +} + +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts +var requestAnimFrame = (function() { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) } +})() + +/** + * Because it's so fucking difficult to detect the scrolling element, just move them all + * @param {number} amount + */ +function move(amount) { + document.documentElement.scrollTop = amount + document.body.parentNode.scrollTop = amount + document.body.scrollTop = amount +} + +function position() { + return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop +} + +/** + * @param {number} to + * @param {number} duration + * @param {Function} callback + */ +export function scrollTo(to, duration, callback) { + const start = position() + const change = to - start + const increment = 20 + let currentTime = 0 + duration = (typeof (duration) === 'undefined') ? 500 : duration + var animateScroll = function() { + // increment the time + currentTime += increment + // find the value with the quadratic in-out easing function + var val = Math.easeInOutQuad(currentTime, start, change, duration) + // move the document.body + move(val) + // do the animation unless its over + if (currentTime < duration) { + requestAnimFrame(animateScroll) + } else { + if (callback && typeof (callback) === 'function') { + // the animation is done so lets callback + callback() + } + } + } + animateScroll() +} diff --git a/src/views/account/index.vue b/src/views/account/index.vue index f5d256d..70dad2e 100644 --- a/src/views/account/index.vue +++ b/src/views/account/index.vue @@ -1,53 +1,236 @@ + -- libgit2 0.21.4