diff --git a/src/components/Share/dropdownMenu.vue b/src/components/Share/dropdownMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..098b37448a8a88a310e0307371408bd8d36214fd --- /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 32a1ca9488d443eb2c293a02faffda8bb75b7ad8..35a651537d9420d571241f923d0492b9f853e9d6 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 25aa2e9d9837c9ef0e296d860cc3309bae492c02..c4009abccbdb941dd5eaa946fe544ea7de48341b 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>