From 690c779c6445a6ba44d5b3c179d429746cee098e Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 20 Nov 2017 17:37:58 +0800
Subject: [PATCH] refactor:add documentation

---
 src/components/Share/dropdownMenu.vue         | 97 +++++++++++++++++++
 .../admin/components/TransactionTable.vue     |  2 +-
 src/views/documentation/index.vue             | 72 ++++++++------
 3 files changed, 138 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Share/dropdownMenu.vue

diff --git a/src/components/Share/dropdownMenu.vue b/src/components/Share/dropdownMenu.vue
new file mode 100644
index 00000000..098b3744
--- /dev/null
+++ b/src/components/Share/dropdownMenu.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="share-dropdown-menu" @click.native="click" :class="{active:isActive}">
+    <div class="share-dropdown-menu-wrapper">
+      <span class="share-dropdown-menu-title">{{title}}</span>
+      <div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
+        <a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
+        <span v-else>{{item.title}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array
+    },
+    title: {
+      type: String,
+      default: 'vue'
+    }
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    click() {
+      this.isActive = !this.isActive
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+$n: 5; //和items.length 相同
+$t: .1s;
+.share-dropdown-menu {
+  width: 250px;
+  position: relative;
+  &-title {
+    width: 100%;
+    display: block;
+    vertical-align: middle;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+    z-index: 2;
+    transform: translate3d(0,0,0);
+  }
+  &-wrapper {
+    position: relative;
+  }
+  &-item {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    background: #e0e0e0;
+    line-height: 60px;
+    height: 60px;
+    cursor: pointer;
+    font-size: 20px;
+    opacity: 1;
+    transition: transform 0.28s ease;
+    &:hover {
+      background: black;
+      color: white;
+    }
+    @for $i from 1 through $n {
+      &:nth-of-type(#{$i}) {
+        z-index: -1;
+        transition-delay: $i*$t;
+        transform: translate3d(0, -60px, 0);
+      }
+    }
+  }
+  &.active {
+    .share-dropdown-menu-wrapper {
+      z-index: 1;
+    }
+    .share-dropdown-menu-item {
+      @for $i from 1 through $n {
+        &:nth-of-type(#{$i}) {
+         transition-delay: ($n - $i)*$t;
+          transform: translate3d(0, ($i - 1)*60px, 0);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index 32a1ca94..35a65153 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -7,7 +7,7 @@
     </el-table-column>
     <el-table-column label="Price" width="195" align="center">
       <template slot-scope="scope">
-        {{scope.row.price | toThousandslsFilter}}
+        ¥{{scope.row.price | toThousandslsFilter}}
       </template>
     </el-table-column>
     <el-table-column label="Status"  width="100" align="center">
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 25aa2e9d..c4009abc 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -1,39 +1,47 @@
 <template>
-  <div class="app-container">
-    <div class="wrapper">
-      <code>
-        <ul>
-          <li>
-            <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">项目地址</a>
-          </li>
-          <li>
-            <a target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">详细文档</a>
-          </li>
-          <li>
-            <a target='_blank' href="https://juejin.im/post/59097cd7a22b9d0065fb61d2">手摸手，带你用 vue 撸后台 系列一(基础篇)</a>
-          </li>
-          <li>
-            <a target='_blank' href="https://juejin.im/post/591aa14f570c35006961acac">手摸手，带你用 vue 撸后台 系列二(登录权限篇)</a>
-          </li>
-          <li>
-            <a target='_blank' href="https://juejin.im/post/593121aa0ce4630057f70d35">手摸手，带你用 vue 撸后台 系列三 (实战篇)</a>
-          </li>
-          <li>
-            <a target='_blank' href="https://juejin.im/post/595b4d776fb9a06bbe7dba56">手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)</a>
-          </li>
-          <li>
-            <a target='_blank' href="https://segmentfault.com/a/1190000009090836">手摸手，带你封装一个vue component</a>
-          </li>
-        </ul>
-      </code>
-    </div>
+  <div class="app-container documentation-container">
+    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">文档</a>
+    <a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">Github 地址</a>
+    <dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
   </div>
 </template>
 
+<script>
+import DropdownMenu from '@/components/Share/dropdownMenu'
 
-<style scoped>
-  .wrapper{
-    width: 800px;
-    margin: 30px auto;
+export default {
+  name: 'clipboardDemo',
+  components: { DropdownMenu },
+  data() {
+    return {
+      articleList: [
+        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
+        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
+        { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
+        { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
+        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' }
+      ]
+    }
   }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.documentation-container {
+  margin: 50px;
+  .document-btn {
+    float: left;
+    margin-left: 50px;
+    vertical-align: middle;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    width: 200px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+  }
+}
 </style>