diff --git a/src/components/BarChart/index.vue b/src/components/BarChart/index.vue
new file mode 100755
index 0000000..18e1196
--- /dev/null
+++ b/src/components/BarChart/index.vue
@@ -0,0 +1,114 @@
+<template>
+ <div
+ :class="className"
+ :style="{height:height,width:width}"
+ />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/components/mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '300px'
+ }
+ },
+ data() {
+ return {
+ chart: null
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+
+ this.chart.setOption({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ grid: {
+ top: 10,
+ left: '2%',
+ right: '2%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisTick: {
+ alignWithLabel: true
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: 'pageA',
+ type: 'bar',
+ stack: 'vistors',
+ barWidth: '60%',
+ data: [79, 52, 200, 334, 390, 330, 220],
+ animationDuration
+ },
+ {
+ name: 'pageB',
+ type: 'bar',
+ stack: 'vistors',
+ barWidth: '60%',
+ data: [80, 52, 200, 334, 390, 330, 220],
+ animationDuration
+ },
+ {
+ name: 'pageC',
+ type: 'bar',
+ stack: 'vistors',
+ barWidth: '60%',
+ data: [30, 52, 200, 334, 390, 330, 220],
+ animationDuration
+ }
+ ]
+ })
+ }
+ }
+}
+</script>
diff --git a/src/components/BoxCard/index.vue b/src/components/BoxCard/index.vue
new file mode 100755
index 0000000..af3c23c
--- /dev/null
+++ b/src/components/BoxCard/index.vue
@@ -0,0 +1,119 @@
+<template>
+ <el-card class="box-card-component" style="margin-left:8px;">
+ <div slot="header" class="box-card-header">
+ <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
+ </div>
+ <div style="position:relative;">
+ <pan-thumb :image="avatar" class="panThumb" />
+ <mallki class-name="mallki-text" text="vue-element-admin" />
+ <div style="padding-top:35px;" class="progress-item">
+ <span>Vue</span>
+ <el-progress :percentage="70" />
+ </div>
+ <div class="progress-item">
+ <span>JavaScript</span>
+ <el-progress :percentage="18" />
+ </div>
+ <div class="progress-item">
+ <span>Css</span>
+ <el-progress :percentage="12" />
+ </div>
+ <div class="progress-item">
+ <span>ESLint</span>
+ <el-progress :percentage="100" status="success" />
+ </div>
+ </div>
+ </el-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+// import logoPath from "~@/assets/img/yp_logo.jpeg"
+
+export default {
+ components: { PanThumb, Mallki },
+
+ filters: {
+ statusFilter(status) {
+ const statusMap = {
+ success: 'success',
+ pending: 'danger'
+ }
+ return statusMap[status]
+ }
+ },
+ data() {
+ return {
+ statisticsData: {
+ article_count: 1024,
+ pageviews_count: 1024
+ }
+ }
+ },
+ computed: {
+ ...mapGetters([
+ 'name',
+ 'avatar',
+ 'roles'
+ ])
+ }
+}
+</script>
+
+<style lang="scss" >
+.box-card-component{
+ .el-card__header {
+ padding: 0px!important;
+ }
+}
+</style>
+<style lang="scss" scoped>
+.box-card-component {
+ .box-card-header {
+ position: relative;
+ height: 220px;
+ img {
+ width: 100%;
+ height: 100%;
+ transition: all 0.2s linear;
+ &:hover {
+ transform: scale(1.1, 1.1);
+ filter: contrast(130%);
+ }
+ }
+ }
+ .mallki-text {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ font-size: 20px;
+ font-weight: bold;
+ }
+ .panThumb {
+ z-index: 100;
+ height: 70px!important;
+ width: 70px!important;
+ position: absolute!important;
+ top: -45px;
+ left: 0px;
+ border: 5px solid #ffffff;
+ background-color: #fff;
+ margin: auto;
+ box-shadow: none!important;
+ /deep/ .pan-info {
+ box-shadow: none!important;
+ }
+ }
+ .progress-item {
+ margin-bottom: 10px;
+ font-size: 14px;
+ }
+ @media only screen and (max-width: 1510px){
+ .mallki-text{
+ display: none;
+ }
+ }
+}
+</style>
diff --git a/src/components/LineChart/index.vue b/src/components/LineChart/index.vue
new file mode 100755
index 0000000..4d58310
--- /dev/null
+++ b/src/components/LineChart/index.vue
@@ -0,0 +1,141 @@
+<template>
+ <div
+ :class="className"
+ :style="{height:height,width:width}"
+ />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/components/mixins/resize'
+
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '350px'
+ },
+ autoResize: {
+ type: Boolean,
+ default: true
+ },
+ chartData: {
+ type: Object,
+ required: true
+ }
+ },
+ data() {
+ return {
+ chart: null
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val)
+ }
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+ this.setOptions(this.chartData)
+ },
+ setOptions({ expectedData, actualData } = {}) {
+ this.chart.setOption({
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ boundaryGap: false,
+ axisTick: {
+ show: false
+ }
+ },
+ grid: {
+ left: 10,
+ right: 10,
+ bottom: 20,
+ top: 30,
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ },
+ padding: [5, 10]
+ },
+ yAxis: {
+ axisTick: {
+ show: false
+ }
+ },
+ legend: {
+ data: ['expected', 'actual']
+ },
+ series: [
+ {
+ name: 'expected',
+ itemStyle: {
+ normal: {
+ color: '#FF005A',
+ lineStyle: {
+ color: '#FF005A',
+ width: 2
+ }
+ }
+ },
+ smooth: true,
+ type: 'line',
+ data: expectedData,
+ animationDuration: 2800,
+ animationEasing: 'cubicInOut'
+ },
+ {
+ name: 'actual',
+ smooth: true,
+ type: 'line',
+ itemStyle: {
+ normal: {
+ color: '#3888fa',
+ lineStyle: {
+ color: '#3888fa',
+ width: 2
+ },
+ areaStyle: {
+ color: '#f3f8ff'
+ }
+ }
+ },
+ data: actualData,
+ animationDuration: 2800,
+ animationEasing: 'quadraticOut'
+ }
+ ]
+ })
+ }
+ }
+}
+</script>
diff --git a/src/components/PanelGroup/index.vue b/src/components/PanelGroup/index.vue
new file mode 100755
index 0000000..589236e
--- /dev/null
+++ b/src/components/PanelGroup/index.vue
@@ -0,0 +1,181 @@
+<template>
+ <el-row :gutter="40" class="panel-group">
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+ <div class="card-panel-icon-wrapper icon-people">
+ <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ New Visits
+ </div>
+ <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel" @click="handleSetLineChartData('messages')">
+ <div class="card-panel-icon-wrapper icon-message">
+ <svg-icon icon-class="message" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ Messages
+ </div>
+ <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel" @click="handleSetLineChartData('purchases')">
+ <div class="card-panel-icon-wrapper icon-money">
+ <svg-icon icon-class="money" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ Purchases
+ </div>
+ <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+ <div class="card-panel-icon-wrapper icon-shopping">
+ <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ Shoppings
+ </div>
+ <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+ components: {
+ CountTo
+ },
+ methods: {
+ handleSetLineChartData(type) {
+ this.$emit('handleSetLineChartData', type)
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+ margin-top: 18px;
+
+ .card-panel-col {
+ margin-bottom: 32px;
+ }
+
+ .card-panel {
+ height: 108px;
+ cursor: pointer;
+ font-size: 12px;
+ position: relative;
+ overflow: hidden;
+ color: #666;
+ background: #fff;
+ box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+ border-color: rgba(0, 0, 0, .05);
+
+ &:hover {
+ .card-panel-icon-wrapper {
+ color: #fff;
+ }
+
+ .icon-people {
+ background: #40c9c6;
+ }
+
+ .icon-message {
+ background: #36a3f7;
+ }
+
+ .icon-money {
+ background: #f4516c;
+ }
+
+ .icon-shopping {
+ background: #34bfa3
+ }
+ }
+
+ .icon-people {
+ color: #40c9c6;
+ }
+
+ .icon-message {
+ color: #36a3f7;
+ }
+
+ .icon-money {
+ color: #f4516c;
+ }
+
+ .icon-shopping {
+ color: #34bfa3
+ }
+
+ .card-panel-icon-wrapper {
+ float: left;
+ margin: 14px 0 0 14px;
+ padding: 16px;
+ transition: all 0.38s ease-out;
+ border-radius: 6px;
+ }
+
+ .card-panel-icon {
+ float: left;
+ font-size: 48px;
+ }
+
+ .card-panel-description {
+ float: right;
+ font-weight: bold;
+ margin: 26px;
+ margin-left: 0px;
+
+ .card-panel-text {
+ line-height: 18px;
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 16px;
+ margin-bottom: 12px;
+ }
+
+ .card-panel-num {
+ font-size: 20px;
+ }
+ }
+ }
+}
+
+@media (max-width:550px) {
+ .card-panel-description {
+ display: none;
+ }
+
+ .card-panel-icon-wrapper {
+ float: none !important;
+ width: 100%;
+ height: 100%;
+ margin: 0 !important;
+
+ .svg-icon {
+ display: block;
+ margin: 14px auto !important;
+ float: none !important;
+ }
+ }
+}
+</style>
diff --git a/src/components/PieChart/index.vue b/src/components/PieChart/index.vue
new file mode 100755
index 0000000..e4fb0a4
--- /dev/null
+++ b/src/components/PieChart/index.vue
@@ -0,0 +1,83 @@
+<template>
+ <div
+ :class="className"
+ :style="{height:height,width:width}"
+ />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/components/mixins/resize'
+// import resize from './mixins/resize'
+
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '300px'
+ }
+ },
+ data() {
+ return {
+ chart: null
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+
+ this.chart.setOption({
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ left: 'center',
+ bottom: '10',
+ data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+ },
+ series: [
+ {
+ name: 'WEEKLY WRITE ARTICLES',
+ type: 'pie',
+ roseType: 'radius',
+ radius: [15, 95],
+ center: ['50%', '38%'],
+ data: [
+ { value: 320, name: 'Industries' },
+ { value: 240, name: 'Technology' },
+ { value: 149, name: 'Forex' },
+ { value: 100, name: 'Gold' },
+ { value: 59, name: 'Forecasts' }
+ ],
+ animationEasing: 'cubicInOut',
+ animationDuration: 2600
+ }
+ ]
+ })
+ }
+ }
+}
+</script>
diff --git a/src/components/RaddarChart/index.vue b/src/components/RaddarChart/index.vue
new file mode 100755
index 0000000..590bec5
--- /dev/null
+++ b/src/components/RaddarChart/index.vue
@@ -0,0 +1,123 @@
+<template>
+ <div
+ :class="className"
+ :style="{height:height,width:width}"
+ />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/components/mixins/resize'
+// import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '300px'
+ }
+ },
+ data() {
+ return {
+ chart: null
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+
+ this.chart.setOption({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ radar: {
+ radius: '66%',
+ center: ['50%', '42%'],
+ splitNumber: 8,
+ splitArea: {
+ areaStyle: {
+ color: 'rgba(127,95,132,.3)',
+ opacity: 1,
+ shadowBlur: 45,
+ shadowColor: 'rgba(0,0,0,.5)',
+ shadowOffsetX: 0,
+ shadowOffsetY: 15
+ }
+ },
+ indicator: [
+ { name: 'Sales', max: 10000 },
+ { name: 'Administration', max: 20000 },
+ { name: 'Information Techology', max: 20000 },
+ { name: 'Customer Support', max: 20000 },
+ { name: 'Development', max: 20000 },
+ { name: 'Marketing', max: 20000 }
+ ]
+ },
+ legend: {
+ left: 'center',
+ bottom: '10',
+ data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+ },
+ series: [
+ {
+ type: 'radar',
+ symbolSize: 0,
+ areaStyle: {
+ normal: {
+ shadowBlur: 13,
+ shadowColor: 'rgba(0,0,0,.2)',
+ shadowOffsetX: 0,
+ shadowOffsetY: 10,
+ opacity: 1
+ }
+ },
+ data: [
+ {
+ value: [5000, 7000, 12000, 11000, 15000, 14000],
+ name: 'Allocated Budget'
+ },
+ {
+ value: [4000, 9000, 15000, 15000, 13000, 11000],
+ name: 'Expected Spending'
+ },
+ {
+ value: [5500, 11000, 12000, 15000, 12000, 12000],
+ name: 'Actual Spending'
+ }
+ ],
+ animationDuration: animationDuration
+ }
+ ]
+ })
+ }
+ }
+}
+</script>
diff --git a/src/components/TodoList/Todo.vue b/src/components/TodoList/Todo.vue
new file mode 100755
index 0000000..c4b3cae
--- /dev/null
+++ b/src/components/TodoList/Todo.vue
@@ -0,0 +1,81 @@
+<template>
+ <li :class="{ completed: todo.done, editing: editing }" class="todo">
+ <div class="view">
+ <input
+ :checked="todo.done"
+ class="toggle"
+ type="checkbox"
+ @change="toggleTodo( todo)"
+ >
+ <label @dblclick="editing = true" v-text="todo.text" />
+ <button class="destroy" @click="deleteTodo( todo )" />
+ </div>
+ <input
+ v-show="editing"
+ v-focus="editing"
+ :value="todo.text"
+ class="edit"
+ @keyup.enter="doneEdit"
+ @keyup.esc="cancelEdit"
+ @blur="doneEdit"
+ >
+ </li>
+</template>
+
+<script>
+export default {
+ name: 'Todo',
+ directives: {
+ focus(el, { value }, { context }) {
+ if (value) {
+ context.$nextTick(() => {
+ el.focus()
+ })
+ }
+ }
+ },
+ props: {
+ todo: {
+ type: Object,
+ default: function() {
+ return {}
+ }
+ }
+ },
+ data() {
+ return {
+ editing: false
+ }
+ },
+ methods: {
+ deleteTodo(todo) {
+ this.$emit('deleteTodo', todo)
+ },
+ editTodo({ todo, value }) {
+ this.$emit('editTodo', { todo, value })
+ },
+ toggleTodo(todo) {
+ this.$emit('toggleTodo', todo)
+ },
+ doneEdit(e) {
+ const value = e.target.value.trim()
+ const { todo } = this
+ if (!value) {
+ this.deleteTodo({
+ todo
+ })
+ } else if (this.editing) {
+ this.editTodo({
+ todo,
+ value
+ })
+ this.editing = false
+ }
+ },
+ cancelEdit(e) {
+ e.target.value = this.todo.text
+ this.editing = false
+ }
+ }
+}
+</script>
diff --git a/src/components/TodoList/index.scss b/src/components/TodoList/index.scss
new file mode 100755
index 0000000..74ce0d5
--- /dev/null
+++ b/src/components/TodoList/index.scss
@@ -0,0 +1,320 @@
+.todoapp {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ color: #4d4d4d;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto ;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+ background: #fff;
+ z-index: 1;
+ position: relative;
+ button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ font-weight: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ :focus {
+ outline: 0;
+ }
+ .hidden {
+ display: none;
+ }
+ .todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+ }
+ .todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+ }
+ .todoapp input::-moz-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+ }
+ .todoapp input::input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+ }
+ .todoapp h1 {
+ position: absolute;
+ top: -155px;
+ width: 100%;
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ color: rgba(175, 47, 47, 0.15);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+ }
+ .new-todo,
+ .edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 18px;
+ font-family: inherit;
+ font-weight: inherit;
+ line-height: 1.4em;
+ border: 0;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ .new-todo {
+ padding: 10px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+ }
+ .main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid #e6e6e6;
+ }
+ .toggle-all {
+ text-align: center;
+ border: none;
+ /* Mobile Safari */
+ opacity: 0;
+ position: absolute;
+ }
+ .toggle-all+label {
+ width: 60px;
+ height: 34px;
+ font-size: 0;
+ position: absolute;
+ top: -52px;
+ left: -13px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+ .toggle-all+label:before {
+ content: '❯';
+ font-size: 22px;
+ color: #e6e6e6;
+ padding: 10px 27px 10px 27px;
+ }
+ .toggle-all:checked+label:before {
+ color: #737373;
+ }
+ .todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+ }
+ .todo-list li:last-child {
+ border-bottom: none;
+ }
+ .todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+ }
+ .todo-list li.editing .edit {
+ display: block;
+ width: 506px;
+ padding: 12px 16px;
+ margin: 0 0 0 43px;
+ }
+ .todo-list li.editing .view {
+ display: none;
+ }
+ .todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none;
+ /* Mobile Safari */
+ -webkit-appearance: none;
+ appearance: none;
+ }
+ .todo-list li .toggle {
+ opacity: 0;
+ }
+ .todo-list li .toggle+label {
+ /*
+ Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+ IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+ */
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+ background-repeat: no-repeat;
+ background-position: center left;
+ background-size: 36px;
+ }
+ .todo-list li .toggle:checked+label {
+ background-size: 36px;
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+ }
+ .todo-list li label {
+ word-break: break-all;
+ padding: 15px 15px 15px 50px;
+ display: block;
+ line-height: 1.0;
+ font-size: 14px;
+ transition: color 0.4s;
+ }
+ .todo-list li.completed label {
+ color: #d9d9d9;
+ text-decoration: line-through;
+ }
+ .todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #cc9a9a;
+ transition: color 0.2s ease-out;
+ cursor: pointer;
+ }
+ .todo-list li .destroy:hover {
+ color: #af5b5e;
+ }
+ .todo-list li .destroy:after {
+ content: '×';
+ }
+ .todo-list li:hover .destroy {
+ display: block;
+ }
+ .todo-list li .edit {
+ display: none;
+ }
+ .todo-list li.editing:last-child {
+ margin-bottom: -1px;
+ }
+ .footer {
+ color: #777;
+ position: relative;
+ padding: 10px 15px;
+ height: 40px;
+ text-align: center;
+ border-top: 1px solid #e6e6e6;
+ }
+ .footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 40px;
+ overflow: hidden;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+ }
+ .todo-count {
+ float: left;
+ text-align: left;
+ }
+ .todo-count strong {
+ font-weight: 300;
+ }
+ .filters {
+ margin: 0;
+ padding: 0;
+ position: relative;
+ z-index: 1;
+ list-style: none;
+ }
+ .filters li {
+ display: inline;
+ }
+ .filters li a {
+ color: inherit;
+ font-size: 12px;
+ padding: 3px 7px;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ }
+ .filters li a:hover {
+ border-color: rgba(175, 47, 47, 0.1);
+ }
+ .filters li a.selected {
+ border-color: rgba(175, 47, 47, 0.2);
+ }
+ .clear-completed,
+ html .clear-completed:active {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ .clear-completed:hover {
+ text-decoration: underline;
+ }
+ .info {
+ margin: 65px auto 0;
+ color: #bfbfbf;
+ font-size: 10px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+ }
+ .info p {
+ line-height: 1;
+ }
+ .info a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: 400;
+ }
+ .info a:hover {
+ text-decoration: underline;
+ }
+ /*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox
+*/
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
+ .toggle-all,
+ .todo-list li .toggle {
+ background: none;
+ }
+ .todo-list li .toggle {
+ height: 40px;
+ }
+ }
+ @media (max-width: 430px) {
+ .footer {
+ height: 50px;
+ }
+ .filters {
+ bottom: 10px;
+ }
+ }
+}
diff --git a/src/components/TodoList/index.vue b/src/components/TodoList/index.vue
new file mode 100755
index 0000000..8000d41
--- /dev/null
+++ b/src/components/TodoList/index.vue
@@ -0,0 +1,127 @@
+<template>
+ <section class="todoapp">
+ <!-- header -->
+ <header class="header">
+ <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
+ </header>
+ <!-- main section -->
+ <section v-show="todos.length" class="main">
+ <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+ <label for="toggle-all" />
+ <ul class="todo-list">
+ <todo
+ v-for="(todo, index) in filteredTodos"
+ :key="index"
+ :todo="todo"
+ @toggleTodo="toggleTodo"
+ @editTodo="editTodo"
+ @deleteTodo="deleteTodo"
+ />
+ </ul>
+ </section>
+ <!-- footer -->
+ <footer v-show="todos.length" class="footer">
+ <span class="todo-count">
+ <strong>{{ remaining }}</strong>
+ {{ remaining | pluralize('item') }} left
+ </span>
+ <ul class="filters">
+ <li v-for="(val, key) in filters" :key="key">
+ <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
+ </li>
+ </ul>
+ <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+ Clear completed
+ </button> -->
+ </footer>
+ </section>
+</template>
+
+<script>
+import Todo from './Todo.vue'
+
+const STORAGE_KEY = 'todos'
+const filters = {
+ all: todos => todos,
+ active: todos => todos.filter(todo => !todo.done),
+ completed: todos => todos.filter(todo => todo.done)
+}
+const defalutList = [
+ { text: 'star this repository', done: false },
+ { text: 'fork this repository', done: false },
+ { text: 'follow author', done: false },
+ { text: 'vue-element-admin', done: true },
+ { text: 'vue', done: true },
+ { text: 'element-ui', done: true },
+ { text: 'axios', done: true },
+ { text: 'webpack', done: true }
+]
+export default {
+ components: { Todo },
+ filters: {
+ pluralize: (n, w) => n === 1 ? w : w + 's',
+ capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+ },
+ data() {
+ return {
+ visibility: 'all',
+ filters,
+ // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+ todos: defalutList
+ }
+ },
+ computed: {
+ allChecked() {
+ return this.todos.every(todo => todo.done)
+ },
+ filteredTodos() {
+ return filters[this.visibility](this.todos)
+ },
+ remaining() {
+ return this.todos.filter(todo => !todo.done).length
+ }
+ },
+ methods: {
+ setLocalStorage() {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+ },
+ addTodo(e) {
+ const text = e.target.value
+ if (text.trim()) {
+ this.todos.push({
+ text,
+ done: false
+ })
+ this.setLocalStorage()
+ }
+ e.target.value = ''
+ },
+ toggleTodo(val) {
+ val.done = !val.done
+ this.setLocalStorage()
+ },
+ deleteTodo(todo) {
+ this.todos.splice(this.todos.indexOf(todo), 1)
+ this.setLocalStorage()
+ },
+ editTodo({ todo, value }) {
+ todo.text = value
+ this.setLocalStorage()
+ },
+ clearCompleted() {
+ this.todos = this.todos.filter(todo => !todo.done)
+ this.setLocalStorage()
+ },
+ toggleAll({ done }) {
+ this.todos.forEach(todo => {
+ todo.done = done
+ this.setLocalStorage()
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+ @import './index.scss';
+</style>
diff --git a/src/components/TransactionTable/index.vue b/src/components/TransactionTable/index.vue
new file mode 100755
index 0000000..d07b0ed
--- /dev/null
+++ b/src/components/TransactionTable/index.vue
@@ -0,0 +1,55 @@
+<template>
+ <el-table :data="list" style="width: 100%;padding-top: 15px;">
+ <el-table-column label="Order_No" min-width="200">
+ <template slot-scope="scope">
+ {{ scope.row.order_no | orderNoFilter }}
+ </template>
+ </el-table-column>
+ <el-table-column label="Price" width="195" align="center">
+ <template slot-scope="scope">
+ ¥{{ scope.row.price | toThousandFilter }}
+ </template>
+ </el-table-column>
+ <el-table-column label="Status" width="100" align="center">
+ <template slot-scope="{row}">
+ <el-tag :type="row.status | statusFilter">
+ {{ row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+</template>
+
+<script>
+import { transactionList } from '@/api/remote-search'
+
+export default {
+ filters: {
+ statusFilter(status) {
+ const statusMap = {
+ success: 'success',
+ pending: 'danger'
+ }
+ return statusMap[status]
+ },
+ orderNoFilter(str) {
+ return str.substring(0, 30)
+ }
+ },
+ data() {
+ return {
+ list: null
+ }
+ },
+ created() {
+ this.fetchData()
+ },
+ methods: {
+ fetchData() {
+ transactionList().then(response => {
+ this.list = response.data.items.slice(0, 8)
+ })
+ }
+ }
+}
+</script>
diff --git a/src/components/mixins/resize.js b/src/components/mixins/resize.js
new file mode 100755
index 0000000..234953b
--- /dev/null
+++ b/src/components/mixins/resize.js
@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+ data() {
+ return {
+ $_sidebarElm: null,
+ $_resizeHandler: null
+ }
+ },
+ mounted() {
+ this.$_resizeHandler = debounce(() => {
+ if (this.chart) {
+ this.chart.resize()
+ }
+ }, 100)
+ this.$_initResizeEvent()
+ this.$_initSidebarResizeEvent()
+ },
+ beforeDestroy() {
+ this.$_destroyResizeEvent()
+ this.$_destroySidebarResizeEvent()
+ },
+ // to fixed bug when cached by keep-alive
+ // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+ activated() {
+ this.$_initResizeEvent()
+ this.$_initSidebarResizeEvent()
+ },
+ deactivated() {
+ this.$_destroyResizeEvent()
+ this.$_destroySidebarResizeEvent()
+ },
+ methods: {
+ // use $_ for mixins properties
+ // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+ $_initResizeEvent() {
+ window.addEventListener('resize', this.$_resizeHandler)
+ },
+ $_destroyResizeEvent() {
+ window.removeEventListener('resize', this.$_resizeHandler)
+ },
+ $_sidebarResizeHandler(e) {
+ if (e.propertyName === 'width') {
+ this.$_resizeHandler()
+ }
+ },
+ $_initSidebarResizeEvent() {
+ this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+ this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+ },
+ $_destroySidebarResizeEvent() {
+ this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+ }
+ }
+}
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 404ce3b..51a8a64 100755
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -175,7 +175,7 @@ export default {
forgetpassword: '忘记密码',
rememberpassword: 'remember password',
- title: '鱼皮出海--让我们荡起双浆',
+ title: '【富贵】出海--让我们荡起双浆',
logIn: '登录',
username: '账号',
password: '密码',
diff --git a/src/router/modules/prod.js b/src/router/modules/prod.js
index c85370c..f94b814 100644
--- a/src/router/modules/prod.js
+++ b/src/router/modules/prod.js
@@ -22,6 +22,14 @@ const prodRouter = {
roles: ['admin', 'assistant', 'shoper', 'runner']
}
}, {
+ path: 'fav',
+ component: () => import('@/views/prod/fav'),
+ name: 'ProdFav',
+ meta: {
+ title: 'prods.prodfav',
+ roles: ['runner']
+ }
+ }, {
path: 'edit/:pid(\\d+)',
component: () => import('@/views/prod/edit'),
name: 'ProdEdit',
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
deleted file mode 100755
index be0af34..0000000
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
- <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '300px'
- }
- },
- data() {
- return {
- chart: null
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
-
- this.chart.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- }
- },
- grid: {
- top: 10,
- left: '2%',
- right: '2%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisTick: {
- alignWithLabel: true
- }
- }],
- yAxis: [{
- type: 'value',
- axisTick: {
- show: false
- }
- }],
- series: [{
- name: 'pageA',
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
- data: [79, 52, 200, 334, 390, 330, 220],
- animationDuration
- }, {
- name: 'pageB',
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
- data: [80, 52, 200, 334, 390, 330, 220],
- animationDuration
- }, {
- name: 'pageC',
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
- data: [30, 52, 200, 334, 390, 330, 220],
- animationDuration
- }]
- })
- }
- }
-}
-</script>
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
deleted file mode 100755
index af3c23c..0000000
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
- <el-card class="box-card-component" style="margin-left:8px;">
- <div slot="header" class="box-card-header">
- <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
- </div>
- <div style="position:relative;">
- <pan-thumb :image="avatar" class="panThumb" />
- <mallki class-name="mallki-text" text="vue-element-admin" />
- <div style="padding-top:35px;" class="progress-item">
- <span>Vue</span>
- <el-progress :percentage="70" />
- </div>
- <div class="progress-item">
- <span>JavaScript</span>
- <el-progress :percentage="18" />
- </div>
- <div class="progress-item">
- <span>Css</span>
- <el-progress :percentage="12" />
- </div>
- <div class="progress-item">
- <span>ESLint</span>
- <el-progress :percentage="100" status="success" />
- </div>
- </div>
- </el-card>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanThumb from '@/components/PanThumb'
-import Mallki from '@/components/TextHoverEffect/Mallki'
-// import logoPath from "~@/assets/img/yp_logo.jpeg"
-
-export default {
- components: { PanThumb, Mallki },
-
- filters: {
- statusFilter(status) {
- const statusMap = {
- success: 'success',
- pending: 'danger'
- }
- return statusMap[status]
- }
- },
- data() {
- return {
- statisticsData: {
- article_count: 1024,
- pageviews_count: 1024
- }
- }
- },
- computed: {
- ...mapGetters([
- 'name',
- 'avatar',
- 'roles'
- ])
- }
-}
-</script>
-
-<style lang="scss" >
-.box-card-component{
- .el-card__header {
- padding: 0px!important;
- }
-}
-</style>
-<style lang="scss" scoped>
-.box-card-component {
- .box-card-header {
- position: relative;
- height: 220px;
- img {
- width: 100%;
- height: 100%;
- transition: all 0.2s linear;
- &:hover {
- transform: scale(1.1, 1.1);
- filter: contrast(130%);
- }
- }
- }
- .mallki-text {
- position: absolute;
- top: 0px;
- right: 0px;
- font-size: 20px;
- font-weight: bold;
- }
- .panThumb {
- z-index: 100;
- height: 70px!important;
- width: 70px!important;
- position: absolute!important;
- top: -45px;
- left: 0px;
- border: 5px solid #ffffff;
- background-color: #fff;
- margin: auto;
- box-shadow: none!important;
- /deep/ .pan-info {
- box-shadow: none!important;
- }
- }
- .progress-item {
- margin-bottom: 10px;
- font-size: 14px;
- }
- @media only screen and (max-width: 1510px){
- .mallki-text{
- display: none;
- }
- }
-}
-</style>
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
deleted file mode 100755
index e654168..0000000
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
- <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '350px'
- },
- autoResize: {
- type: Boolean,
- default: true
- },
- chartData: {
- type: Object,
- required: true
- }
- },
- data() {
- return {
- chart: null
- }
- },
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val)
- }
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
- this.setOptions(this.chartData)
- },
- setOptions({ expectedData, actualData } = {}) {
- this.chart.setOption({
- xAxis: {
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- boundaryGap: false,
- axisTick: {
- show: false
- }
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 30,
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- padding: [5, 10]
- },
- yAxis: {
- axisTick: {
- show: false
- }
- },
- legend: {
- data: ['expected', 'actual']
- },
- series: [{
- name: 'expected', itemStyle: {
- normal: {
- color: '#FF005A',
- lineStyle: {
- color: '#FF005A',
- width: 2
- }
- }
- },
- smooth: true,
- type: 'line',
- data: expectedData,
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- },
- {
- name: 'actual',
- smooth: true,
- type: 'line',
- itemStyle: {
- normal: {
- color: '#3888fa',
- lineStyle: {
- color: '#3888fa',
- width: 2
- },
- areaStyle: {
- color: '#f3f8ff'
- }
- }
- },
- data: actualData,
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }]
- })
- }
- }
-}
-</script>
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
deleted file mode 100755
index 589236e..0000000
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
- <el-row :gutter="40" class="panel-group">
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
- <div class="card-panel-icon-wrapper icon-people">
- <svg-icon icon-class="peoples" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- New Visits
- </div>
- <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('messages')">
- <div class="card-panel-icon-wrapper icon-message">
- <svg-icon icon-class="message" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- Messages
- </div>
- <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('purchases')">
- <div class="card-panel-icon-wrapper icon-money">
- <svg-icon icon-class="money" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- Purchases
- </div>
- <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('shoppings')">
- <div class="card-panel-icon-wrapper icon-shopping">
- <svg-icon icon-class="shopping" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- Shoppings
- </div>
- <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- </el-row>
-</template>
-
-<script>
-import CountTo from 'vue-count-to'
-
-export default {
- components: {
- CountTo
- },
- methods: {
- handleSetLineChartData(type) {
- this.$emit('handleSetLineChartData', type)
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.panel-group {
- margin-top: 18px;
-
- .card-panel-col {
- margin-bottom: 32px;
- }
-
- .card-panel {
- height: 108px;
- cursor: pointer;
- font-size: 12px;
- position: relative;
- overflow: hidden;
- color: #666;
- background: #fff;
- box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
- border-color: rgba(0, 0, 0, .05);
-
- &:hover {
- .card-panel-icon-wrapper {
- color: #fff;
- }
-
- .icon-people {
- background: #40c9c6;
- }
-
- .icon-message {
- background: #36a3f7;
- }
-
- .icon-money {
- background: #f4516c;
- }
-
- .icon-shopping {
- background: #34bfa3
- }
- }
-
- .icon-people {
- color: #40c9c6;
- }
-
- .icon-message {
- color: #36a3f7;
- }
-
- .icon-money {
- color: #f4516c;
- }
-
- .icon-shopping {
- color: #34bfa3
- }
-
- .card-panel-icon-wrapper {
- float: left;
- margin: 14px 0 0 14px;
- padding: 16px;
- transition: all 0.38s ease-out;
- border-radius: 6px;
- }
-
- .card-panel-icon {
- float: left;
- font-size: 48px;
- }
-
- .card-panel-description {
- float: right;
- font-weight: bold;
- margin: 26px;
- margin-left: 0px;
-
- .card-panel-text {
- line-height: 18px;
- color: rgba(0, 0, 0, 0.45);
- font-size: 16px;
- margin-bottom: 12px;
- }
-
- .card-panel-num {
- font-size: 20px;
- }
- }
- }
-}
-
-@media (max-width:550px) {
- .card-panel-description {
- display: none;
- }
-
- .card-panel-icon-wrapper {
- float: none !important;
- width: 100%;
- height: 100%;
- margin: 0 !important;
-
- .svg-icon {
- display: block;
- margin: 14px auto !important;
- float: none !important;
- }
- }
-}
-</style>
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
deleted file mode 100755
index 4d2ef32..0000000
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
- <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '300px'
- }
- },
- data() {
- return {
- chart: null
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
-
- this.chart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- left: 'center',
- bottom: '10',
- data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
- },
- series: [
- {
- name: 'WEEKLY WRITE ARTICLES',
- type: 'pie',
- roseType: 'radius',
- radius: [15, 95],
- center: ['50%', '38%'],
- data: [
- { value: 320, name: 'Industries' },
- { value: 240, name: 'Technology' },
- { value: 149, name: 'Forex' },
- { value: 100, name: 'Gold' },
- { value: 59, name: 'Forecasts' }
- ],
- animationEasing: 'cubicInOut',
- animationDuration: 2600
- }
- ]
- })
- }
- }
-}
-</script>
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
deleted file mode 100755
index 6823af3..0000000
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
- <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 3000
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '300px'
- }
- },
- data() {
- return {
- chart: null
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
-
- this.chart.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- }
- },
- radar: {
- radius: '66%',
- center: ['50%', '42%'],
- splitNumber: 8,
- splitArea: {
- areaStyle: {
- color: 'rgba(127,95,132,.3)',
- opacity: 1,
- shadowBlur: 45,
- shadowColor: 'rgba(0,0,0,.5)',
- shadowOffsetX: 0,
- shadowOffsetY: 15
- }
- },
- indicator: [
- { name: 'Sales', max: 10000 },
- { name: 'Administration', max: 20000 },
- { name: 'Information Techology', max: 20000 },
- { name: 'Customer Support', max: 20000 },
- { name: 'Development', max: 20000 },
- { name: 'Marketing', max: 20000 }
- ]
- },
- legend: {
- left: 'center',
- bottom: '10',
- data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
- },
- series: [{
- type: 'radar',
- symbolSize: 0,
- areaStyle: {
- normal: {
- shadowBlur: 13,
- shadowColor: 'rgba(0,0,0,.2)',
- shadowOffsetX: 0,
- shadowOffsetY: 10,
- opacity: 1
- }
- },
- data: [
- {
- value: [5000, 7000, 12000, 11000, 15000, 14000],
- name: 'Allocated Budget'
- },
- {
- value: [4000, 9000, 15000, 15000, 13000, 11000],
- name: 'Expected Spending'
- },
- {
- value: [5500, 11000, 12000, 15000, 12000, 12000],
- name: 'Actual Spending'
- }
- ],
- animationDuration: animationDuration
- }]
- })
- }
- }
-}
-</script>
diff --git a/src/views/dashboard/admin/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
deleted file mode 100755
index c4b3cae..0000000
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
- <li :class="{ completed: todo.done, editing: editing }" class="todo">
- <div class="view">
- <input
- :checked="todo.done"
- class="toggle"
- type="checkbox"
- @change="toggleTodo( todo)"
- >
- <label @dblclick="editing = true" v-text="todo.text" />
- <button class="destroy" @click="deleteTodo( todo )" />
- </div>
- <input
- v-show="editing"
- v-focus="editing"
- :value="todo.text"
- class="edit"
- @keyup.enter="doneEdit"
- @keyup.esc="cancelEdit"
- @blur="doneEdit"
- >
- </li>
-</template>
-
-<script>
-export default {
- name: 'Todo',
- directives: {
- focus(el, { value }, { context }) {
- if (value) {
- context.$nextTick(() => {
- el.focus()
- })
- }
- }
- },
- props: {
- todo: {
- type: Object,
- default: function() {
- return {}
- }
- }
- },
- data() {
- return {
- editing: false
- }
- },
- methods: {
- deleteTodo(todo) {
- this.$emit('deleteTodo', todo)
- },
- editTodo({ todo, value }) {
- this.$emit('editTodo', { todo, value })
- },
- toggleTodo(todo) {
- this.$emit('toggleTodo', todo)
- },
- doneEdit(e) {
- const value = e.target.value.trim()
- const { todo } = this
- if (!value) {
- this.deleteTodo({
- todo
- })
- } else if (this.editing) {
- this.editTodo({
- todo,
- value
- })
- this.editing = false
- }
- },
- cancelEdit(e) {
- e.target.value = this.todo.text
- this.editing = false
- }
- }
-}
-</script>
diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
deleted file mode 100755
index 74ce0d5..0000000
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ /dev/null
@@ -1,320 +0,0 @@
-.todoapp {
- font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
- line-height: 1.4em;
- color: #4d4d4d;
- min-width: 230px;
- max-width: 550px;
- margin: 0 auto ;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-weight: 300;
- background: #fff;
- z-index: 1;
- position: relative;
- button {
- margin: 0;
- padding: 0;
- border: 0;
- background: none;
- font-size: 100%;
- vertical-align: baseline;
- font-family: inherit;
- font-weight: inherit;
- color: inherit;
- -webkit-appearance: none;
- appearance: none;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- :focus {
- outline: 0;
- }
- .hidden {
- display: none;
- }
- .todoapp {
- background: #fff;
- margin: 130px 0 40px 0;
- position: relative;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
- }
- .todoapp input::-webkit-input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp input::-moz-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp input::input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp h1 {
- position: absolute;
- top: -155px;
- width: 100%;
- font-size: 100px;
- font-weight: 100;
- text-align: center;
- color: rgba(175, 47, 47, 0.15);
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
- }
- .new-todo,
- .edit {
- position: relative;
- margin: 0;
- width: 100%;
- font-size: 18px;
- font-family: inherit;
- font-weight: inherit;
- line-height: 1.4em;
- border: 0;
- color: inherit;
- padding: 6px;
- border: 1px solid #999;
- box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .new-todo {
- padding: 10px 16px 16px 60px;
- border: none;
- background: rgba(0, 0, 0, 0.003);
- box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
- }
- .main {
- position: relative;
- z-index: 2;
- border-top: 1px solid #e6e6e6;
- }
- .toggle-all {
- text-align: center;
- border: none;
- /* Mobile Safari */
- opacity: 0;
- position: absolute;
- }
- .toggle-all+label {
- width: 60px;
- height: 34px;
- font-size: 0;
- position: absolute;
- top: -52px;
- left: -13px;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- }
- .toggle-all+label:before {
- content: '❯';
- font-size: 22px;
- color: #e6e6e6;
- padding: 10px 27px 10px 27px;
- }
- .toggle-all:checked+label:before {
- color: #737373;
- }
- .todo-list {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .todo-list li {
- position: relative;
- font-size: 24px;
- border-bottom: 1px solid #ededed;
- }
- .todo-list li:last-child {
- border-bottom: none;
- }
- .todo-list li.editing {
- border-bottom: none;
- padding: 0;
- }
- .todo-list li.editing .edit {
- display: block;
- width: 506px;
- padding: 12px 16px;
- margin: 0 0 0 43px;
- }
- .todo-list li.editing .view {
- display: none;
- }
- .todo-list li .toggle {
- text-align: center;
- width: 40px;
- /* auto, since non-WebKit browsers doesn't support input styling */
- height: auto;
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto 0;
- border: none;
- /* Mobile Safari */
- -webkit-appearance: none;
- appearance: none;
- }
- .todo-list li .toggle {
- opacity: 0;
- }
- .todo-list li .toggle+label {
- /*
- Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
- IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
- */
- background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
- background-repeat: no-repeat;
- background-position: center left;
- background-size: 36px;
- }
- .todo-list li .toggle:checked+label {
- background-size: 36px;
- background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
- }
- .todo-list li label {
- word-break: break-all;
- padding: 15px 15px 15px 50px;
- display: block;
- line-height: 1.0;
- font-size: 14px;
- transition: color 0.4s;
- }
- .todo-list li.completed label {
- color: #d9d9d9;
- text-decoration: line-through;
- }
- .todo-list li .destroy {
- display: none;
- position: absolute;
- top: 0;
- right: 10px;
- bottom: 0;
- width: 40px;
- height: 40px;
- margin: auto 0;
- font-size: 30px;
- color: #cc9a9a;
- transition: color 0.2s ease-out;
- cursor: pointer;
- }
- .todo-list li .destroy:hover {
- color: #af5b5e;
- }
- .todo-list li .destroy:after {
- content: '×';
- }
- .todo-list li:hover .destroy {
- display: block;
- }
- .todo-list li .edit {
- display: none;
- }
- .todo-list li.editing:last-child {
- margin-bottom: -1px;
- }
- .footer {
- color: #777;
- position: relative;
- padding: 10px 15px;
- height: 40px;
- text-align: center;
- border-top: 1px solid #e6e6e6;
- }
- .footer:before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- height: 40px;
- overflow: hidden;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
- }
- .todo-count {
- float: left;
- text-align: left;
- }
- .todo-count strong {
- font-weight: 300;
- }
- .filters {
- margin: 0;
- padding: 0;
- position: relative;
- z-index: 1;
- list-style: none;
- }
- .filters li {
- display: inline;
- }
- .filters li a {
- color: inherit;
- font-size: 12px;
- padding: 3px 7px;
- text-decoration: none;
- border: 1px solid transparent;
- border-radius: 3px;
- }
- .filters li a:hover {
- border-color: rgba(175, 47, 47, 0.1);
- }
- .filters li a.selected {
- border-color: rgba(175, 47, 47, 0.2);
- }
- .clear-completed,
- html .clear-completed:active {
- float: right;
- position: relative;
- line-height: 20px;
- text-decoration: none;
- cursor: pointer;
- }
- .clear-completed:hover {
- text-decoration: underline;
- }
- .info {
- margin: 65px auto 0;
- color: #bfbfbf;
- font-size: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- text-align: center;
- }
- .info p {
- line-height: 1;
- }
- .info a {
- color: inherit;
- text-decoration: none;
- font-weight: 400;
- }
- .info a:hover {
- text-decoration: underline;
- }
- /*
- Hack to remove background from Mobile Safari.
- Can't use it globally since it destroys checkboxes in Firefox
-*/
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- .toggle-all,
- .todo-list li .toggle {
- background: none;
- }
- .todo-list li .toggle {
- height: 40px;
- }
- }
- @media (max-width: 430px) {
- .footer {
- height: 50px;
- }
- .filters {
- bottom: 10px;
- }
- }
-}
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
deleted file mode 100755
index 8000d41..0000000
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
- <section class="todoapp">
- <!-- header -->
- <header class="header">
- <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
- </header>
- <!-- main section -->
- <section v-show="todos.length" class="main">
- <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
- <label for="toggle-all" />
- <ul class="todo-list">
- <todo
- v-for="(todo, index) in filteredTodos"
- :key="index"
- :todo="todo"
- @toggleTodo="toggleTodo"
- @editTodo="editTodo"
- @deleteTodo="deleteTodo"
- />
- </ul>
- </section>
- <!-- footer -->
- <footer v-show="todos.length" class="footer">
- <span class="todo-count">
- <strong>{{ remaining }}</strong>
- {{ remaining | pluralize('item') }} left
- </span>
- <ul class="filters">
- <li v-for="(val, key) in filters" :key="key">
- <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
- </li>
- </ul>
- <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
- Clear completed
- </button> -->
- </footer>
- </section>
-</template>
-
-<script>
-import Todo from './Todo.vue'
-
-const STORAGE_KEY = 'todos'
-const filters = {
- all: todos => todos,
- active: todos => todos.filter(todo => !todo.done),
- completed: todos => todos.filter(todo => todo.done)
-}
-const defalutList = [
- { text: 'star this repository', done: false },
- { text: 'fork this repository', done: false },
- { text: 'follow author', done: false },
- { text: 'vue-element-admin', done: true },
- { text: 'vue', done: true },
- { text: 'element-ui', done: true },
- { text: 'axios', done: true },
- { text: 'webpack', done: true }
-]
-export default {
- components: { Todo },
- filters: {
- pluralize: (n, w) => n === 1 ? w : w + 's',
- capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
- },
- data() {
- return {
- visibility: 'all',
- filters,
- // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
- todos: defalutList
- }
- },
- computed: {
- allChecked() {
- return this.todos.every(todo => todo.done)
- },
- filteredTodos() {
- return filters[this.visibility](this.todos)
- },
- remaining() {
- return this.todos.filter(todo => !todo.done).length
- }
- },
- methods: {
- setLocalStorage() {
- window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
- },
- addTodo(e) {
- const text = e.target.value
- if (text.trim()) {
- this.todos.push({
- text,
- done: false
- })
- this.setLocalStorage()
- }
- e.target.value = ''
- },
- toggleTodo(val) {
- val.done = !val.done
- this.setLocalStorage()
- },
- deleteTodo(todo) {
- this.todos.splice(this.todos.indexOf(todo), 1)
- this.setLocalStorage()
- },
- editTodo({ todo, value }) {
- todo.text = value
- this.setLocalStorage()
- },
- clearCompleted() {
- this.todos = this.todos.filter(todo => !todo.done)
- this.setLocalStorage()
- },
- toggleAll({ done }) {
- this.todos.forEach(todo => {
- todo.done = done
- this.setLocalStorage()
- })
- }
- }
-}
-</script>
-
-<style lang="scss">
- @import './index.scss';
-</style>
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
deleted file mode 100755
index d07b0ed..0000000
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
- <el-table :data="list" style="width: 100%;padding-top: 15px;">
- <el-table-column label="Order_No" min-width="200">
- <template slot-scope="scope">
- {{ scope.row.order_no | orderNoFilter }}
- </template>
- </el-table-column>
- <el-table-column label="Price" width="195" align="center">
- <template slot-scope="scope">
- ¥{{ scope.row.price | toThousandFilter }}
- </template>
- </el-table-column>
- <el-table-column label="Status" width="100" align="center">
- <template slot-scope="{row}">
- <el-tag :type="row.status | statusFilter">
- {{ row.status }}
- </el-tag>
- </template>
- </el-table-column>
- </el-table>
-</template>
-
-<script>
-import { transactionList } from '@/api/remote-search'
-
-export default {
- filters: {
- statusFilter(status) {
- const statusMap = {
- success: 'success',
- pending: 'danger'
- }
- return statusMap[status]
- },
- orderNoFilter(str) {
- return str.substring(0, 30)
- }
- },
- data() {
- return {
- list: null
- }
- },
- created() {
- this.fetchData()
- },
- methods: {
- fetchData() {
- transactionList().then(response => {
- this.list = response.data.items.slice(0, 8)
- })
- }
- }
-}
-</script>
diff --git a/src/views/dashboard/admin/components/mixins/resize.js b/src/views/dashboard/admin/components/mixins/resize.js
deleted file mode 100755
index 234953b..0000000
--- a/src/views/dashboard/admin/components/mixins/resize.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
- data() {
- return {
- $_sidebarElm: null,
- $_resizeHandler: null
- }
- },
- mounted() {
- this.$_resizeHandler = debounce(() => {
- if (this.chart) {
- this.chart.resize()
- }
- }, 100)
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
- },
- beforeDestroy() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
- },
- // to fixed bug when cached by keep-alive
- // https://github.com/PanJiaChen/vue-element-admin/issues/2116
- activated() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
- },
- deactivated() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
- },
- methods: {
- // use $_ for mixins properties
- // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
- $_initResizeEvent() {
- window.addEventListener('resize', this.$_resizeHandler)
- },
- $_destroyResizeEvent() {
- window.removeEventListener('resize', this.$_resizeHandler)
- },
- $_sidebarResizeHandler(e) {
- if (e.propertyName === 'width') {
- this.$_resizeHandler()
- }
- },
- $_initSidebarResizeEvent() {
- this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
- this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
- },
- $_destroySidebarResizeEvent() {
- this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
- }
- }
-}
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 63ff774..fabedfb 100755
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -9,17 +9,29 @@
</el-row>
<el-row :gutter="32">
- <el-col :xs="24" :sm="24" :lg="8">
+ <el-col
+ :xs="24"
+ :sm="24"
+ :lg="8"
+ >
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col>
- <el-col :xs="24" :sm="24" :lg="8">
+ <el-col
+ :xs="24"
+ :sm="24"
+ :lg="8"
+ >
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
- <el-col :xs="24" :sm="24" :lg="8">
+ <el-col
+ :xs="24"
+ :sm="24"
+ :lg="8"
+ >
<div class="chart-wrapper">
<bar-chart />
</div>
@@ -27,13 +39,34 @@
</el-row>
<el-row :gutter="8">
- <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
+ <el-col
+ :xs="{span: 24}"
+ :sm="{span: 24}"
+ :md="{span: 24}"
+ :lg="{span: 12}"
+ :xl="{span: 12}"
+ style="padding-right:8px;margin-bottom:30px;"
+ >
<transaction-table />
</el-col>
- <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
+ <el-col
+ :xs="{span: 24}"
+ :sm="{span: 12}"
+ :md="{span: 12}"
+ :lg="{span: 6}"
+ :xl="{span: 6}"
+ style="margin-bottom:30px;"
+ >
<todo-list />
</el-col>
- <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
+ <el-col
+ :xs="{span: 24}"
+ :sm="{span: 12}"
+ :md="{span: 12}"
+ :lg="{span: 6}"
+ :xl="{span: 6}"
+ style="margin-bottom:30px;"
+ >
<box-card />
</el-col>
</el-row>
@@ -42,14 +75,14 @@
<script>
// import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
+import PanelGroup from '@/components/PanelGroup'
+import RaddarChart from '@/components/RaddarChart'
+import PieChart from '@/components/PieChart'
+import BarChart from '@/components/BarChart'
+import LineChart from '@/components/LineChart'
+import TransactionTable from '@/components/TransactionTable'
+import TodoList from '@/components/TodoList'
+import BoxCard from '@/components/BoxCard'
const lineChartData = {
newVisitis: {
@@ -116,7 +149,7 @@ export default {
}
}
-@media (max-width:1024px) {
+@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
diff --git a/src/views/dashboard/runner/index.vue b/src/views/dashboard/runner/index.vue
index e2085a6..aaf2efe 100755
--- a/src/views/dashboard/runner/index.vue
+++ b/src/views/dashboard/runner/index.vue
@@ -1,18 +1,49 @@
<template>
<div class="dashboard-editor-container">
<div class="clearfix">
- <pan-thumb :image="avatar" style="float: left">
+ <pan-thumb
+ :image="avatar"
+ style="float: left"
+ >
Your roles:
- <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
+ <span
+ v-for="item in roles"
+ :key="item"
+ class="pan-info-roles"
+ >{{ item }}</span>
</pan-thumb>
- <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
+ <!-- <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" /> -->
<div class="info-container">
<span class="display_name">{{ name }}</span>
<span style="font-size:20px;padding-top:20px;display:inline-block;">{{ roles }}'s Dashboard</span>
</div>
</div>
<div>
- <img :src="emptyGif" class="emptyGif">
+ <!-- <img :src="emptyGif" class="emptyGif"> -->
+ </div>
+ <div>
+ <el-row :gutter="8">
+ <el-col
+ :xs="{span: 24}"
+ :sm="{span: 24}"
+ :md="{span: 24}"
+ :lg="{span: 12}"
+ :xl="{span: 12}"
+ style="padding-right:8px;margin-bottom:30px;"
+ >
+ <transaction-table />
+ </el-col>
+ <el-col
+ :xs="{span: 24}"
+ :sm="{span: 24}"
+ :md="{span: 24}"
+ :lg="{span: 12}"
+ :xl="{span: 12}"
+ style="margin-bottom:30px;"
+ >
+ <todo-list />
+ </el-col>
+ </el-row>
</div>
</div>
</template>
@@ -20,12 +51,15 @@
<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
+import TransactionTable from '@/components/TransactionTable'
+import TodoList from '@/components/TodoList'
+// import BoxCard from "./components/BoxCard";
// import GithubCorner from '@/components/GithubCorner'
export default {
name: 'DashboardEditor',
// components: { PanThumb, GithubCorner },
- components: { PanThumb },
+ components: { PanThumb, TransactionTable, TodoList },
data() {
return {
emptyGif:
diff --git a/src/views/dashboard/shoper/index.vue b/src/views/dashboard/shoper/index.vue
new file mode 100644
index 0000000..528a784
--- /dev/null
+++ b/src/views/dashboard/shoper/index.vue
@@ -0,0 +1,82 @@
+<template>
+ <div class="dashboard-editor-container">
+ <div class="clearfix">
+ <pan-thumb
+ :image="avatar"
+ style="float: left"
+ >
+ Your roles:
+ <span
+ v-for="item in roles"
+ :key="item"
+ class="pan-info-roles"
+ >{{ item }}</span>
+ </pan-thumb>
+ <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
+ <div class="info-container">
+ <span class="display_name">{{ name }}</span>
+ <span style="font-size:20px;padding-top:20px;display:inline-block;">{{ roles }}'s Dashboard</span>
+ </div>
+ </div>
+ <div>
+ <img
+ :src="emptyGif"
+ class="emptyGif"
+ >
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+// import GithubCorner from '@/components/GithubCorner'
+
+export default {
+ name: 'DashboardEditor',
+ // components: { PanThumb, GithubCorner },
+ components: { PanThumb },
+ data() {
+ return {
+ emptyGif:
+ 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
+ }
+ },
+ computed: {
+ ...mapGetters(['name', 'avatar', 'roles'])
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.emptyGif {
+ display: block;
+ width: 45%;
+ margin: 0 auto;
+}
+
+.dashboard-editor-container {
+ background-color: #e3e3e3;
+ min-height: 100vh;
+ padding: 50px 60px 0px;
+ .pan-info-roles {
+ font-size: 12px;
+ font-weight: 700;
+ color: #333;
+ display: block;
+ }
+ .info-container {
+ position: relative;
+ margin-left: 190px;
+ height: 150px;
+ line-height: 200px;
+ .display_name {
+ font-size: 48px;
+ line-height: 48px;
+ color: #212121;
+ position: absolute;
+ top: 25px;
+ }
+ }
+}
+</style>
diff --git a/src/views/prod/fav.vue b/src/views/prod/fav.vue
new file mode 100644
index 0000000..06f6ca5
--- /dev/null
+++ b/src/views/prod/fav.vue
@@ -0,0 +1,177 @@
+<template>
+ <div class="app-container">
+ <!-- <el-header>
+
+ </el-header> -->
+ <template>
+ <router-link :to="'/prod/create/1111'">
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-edit"
+ >
+ create
+ </el-button>
+ </router-link>
+ </template>
+ <el-table
+ v-loading="listLoading"
+ :data="list"
+ border
+ fit
+ highlight-current-row
+ style="width: 100%"
+ >
+ <el-table-column
+ align="center"
+ label="pid"
+ >
+ <template slot-scope="scope">
+ <span>{{ scope.row.pid }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="pname"
+ >
+ <template slot-scope="scope">
+ <span>{{ scope.row.pname }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="参数信息"
+ >
+ <template slot-scope="scope">
+ <span>框宽{{ scope.row.prod_info_frame_width }}mm</span><br>
+ <span>腿长{{ scope.row.prod_info_leg_long }}mm</span><br>
+ <span>镜宽{{ scope.row.prod_info_glass_width }}mm</span><br>
+ <span>镜高{{ scope.row.prod_info_glass_height }}mm</span><br>
+ <span>鼻宽{{ scope.row.prod_info_norse_width }}mm</span><br>
+ <span>重量{{ scope.row.prod_info_weight }}g</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ align="center"
+ label="Date"
+ >
+ <template slot-scope="scope">
+ <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="Importance">
+ <template slot-scope="scope">
+ <svg-icon
+ v-for="n in +scope.row.importance"
+ :key="n"
+ icon-class="star"
+ class="meta-item__icon"
+ />
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ class-name="status-col"
+ label="prod_status"
+ >
+ <template slot-scope="{row}">
+ <el-tag :type="row.prod_status | statusFilter">
+ {{ row.prod_status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ align="center"
+ label="Actions"
+ >
+ <template slot-scope="{row}">
+ <router-link :to="'/prod/edit/'+row.pid">
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-edit"
+ >
+ Edit1
+ </el-button>
+ </router-link>
+ <router-link :to="'/prod/del/'+row.pid">
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-edit"
+ >
+ Edit2
+ </el-button>
+ </router-link>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <pagination
+ v-show="total>0"
+ :total="total"
+ :page.sync="listQuery.page"
+ :limit.sync="listQuery.limit"
+ @pagination="getList"
+ />
+ </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/prod'
+// import { Pagination } from "@/components/Pagination"; // Secondary package based on el-pagination
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+export default {
+ name: 'ProdList',
+ components: { Pagination },
+ filters: {
+ statusFilter(prod_status) {
+ const statusMap = {
+ published: 'success',
+ draft: 'info',
+ deleted: 'danger'
+ }
+ return statusMap[prod_status]
+ }
+ },
+ data() {
+ return {
+ list: null,
+ total: 0,
+ listLoading: true,
+ listQuery: {
+ page: 1,
+ limit: 20
+ }
+ }
+ },
+ created() {
+ this.getList()
+ },
+ methods: {
+ getList() {
+ this.listLoading = true
+ console.log('getList', 'dddddd')
+ fetchList(this.listQuery).then(response => {
+ this.list = response.data.items
+ this.total = response.data.total
+ this.listLoading = false
+ })
+ }
+ }
+}
+</script>
+
+<style scoped>
+.edit-input {
+ padding-right: 100px;
+}
+.cancel-btn {
+ position: absolute;
+ right: 15px;
+ top: 10px;
+}
+</style>
diff --git a/src/views/prod/list.vue b/src/views/prod/list.vue
index 06f6ca5..94d910d 100755
--- a/src/views/prod/list.vue
+++ b/src/views/prod/list.vue
@@ -14,6 +14,57 @@
</el-button>
</router-link>
</template>
+ <el-dialog
+ title="提示"
+ :visible.sync="dialogVisible"
+ width="30%"
+ :before-close="handleClose"
+ >
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span>这是一段信息</span>
+ <span
+ slot="footer"
+ class="dialog-footer"
+ >
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ <el-button
+ type="primary"
+ @click="dialogVisible = false"
+ >确 定</el-button>
+ </span>
+ </el-dialog>
<el-table
v-loading="listLoading"
:data="list"
@@ -27,6 +78,25 @@
label="pid"
>
<template slot-scope="scope">
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-more"
+ @click="dialogVisible = true"
+ >SKU管理</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-chat-round"
+ @click="dialogVisible = true"
+ >评论管理</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-setting"
+ @click="dialogVisible = true"
+ >产品定义</el-button>
+ <br>
<span>{{ scope.row.pid }}</span>
</template>
</el-table-column>
@@ -139,6 +209,7 @@ export default {
},
data() {
return {
+ dialogVisible: false,
list: null,
total: 0,
listLoading: true,
@@ -152,6 +223,13 @@ export default {
this.getList()
},
methods: {
+ handleClose(done) {
+ this.$confirm('确认关闭？')
+ .then(_ => {
+ done()
+ })
+ .catch(_ => {})
+ },
getList() {
this.listLoading = true
console.log('getList', 'dddddd')
diff --git a/src/views/site/list.vue b/src/views/site/list.vue
index a3fe0b7..5ae9157 100644
--- a/src/views/site/list.vue
+++ b/src/views/site/list.vue
@@ -85,7 +85,11 @@
cancel
</el-button>
</template>
- <span v-else>{{ row.title }}</span>
+ <span v-else>
+ 运营官运营的比较好的，高评分的站点，流量大，一旦加入其站点，成为推广员，分享相关链接至私域流量
+ 会容易获得较好的回报吗？
+ 不一定，但是，如果这个站点的产品好，漂亮，价格也好。
+ 则容易转化率较高一些{{ row.title }}</span>
</template>
</el-table-column>