├── static └── .gitkeep ├── .eslintignore ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── logo.png │ ├── logo red.png │ ├── logo green.png │ ├── rays-main.png │ ├── rays-main1.png │ └── icon │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.css │ │ ├── iconfont.svg │ │ └── iconfont.js ├── utils │ ├── eventBus.js │ └── codepenEmbed.js ├── styles │ ├── element-ui.scss │ ├── scrollbar.scss │ ├── index.scss │ └── mixin.scss ├── components │ ├── common │ │ ├── mixins │ │ │ ├── codepenMixin.js │ │ │ └── clipboardMixin.js │ │ ├── local │ │ │ ├── componentRegister.js │ │ │ ├── DemoBox.vue │ │ │ └── DemoBlock.vue │ │ ├── SideBar.vue │ │ ├── HeaderNav.vue │ │ └── SearchRoutes.vue │ └── styleParts │ │ ├── loadingAnimation │ │ ├── LoadingAnimation0302.vue │ │ ├── LoadingAnimation0301.vue │ │ ├── LoadingAnimation0503.vue │ │ ├── LoadingAnimation0501.vue │ │ ├── LoadingAnimation0102.vue │ │ ├── LoadingAnimation0304.vue │ │ ├── LoadingAnimation0506.vue │ │ ├── LoadingAnimation0203.vue │ │ ├── LoadingAnimation0101.vue │ │ ├── LoadingAnimation0303.vue │ │ ├── LoadingAnimation0306.vue │ │ ├── LoadingAnimation0504.vue │ │ ├── LoadingAnimation0505.vue │ │ ├── LoadingAnimation0305.vue │ │ ├── LoadingAnimation0201.vue │ │ ├── LoadingAnimation0401.vue │ │ ├── LoadingAnimation0202.vue │ │ ├── LoadingAnimation0508.vue │ │ ├── LoadingAnimation0502.vue │ │ ├── LoadingAnimation0204.vue │ │ └── LoadingAnimation0507.vue │ │ ├── hoverAnimation │ │ ├── HoverAnimation0302.vue │ │ ├── HoverAnimation0201.vue │ │ ├── HoverAnimation0101.vue │ │ └── HoverAnimation0301.vue │ │ ├── RotateBackgroundRays.vue │ │ ├── BreathingLight.vue │ │ ├── RotatingDashedBorder.vue │ │ └── CloudySpiral.vue ├── main.js ├── router │ └── index.js ├── views │ ├── PanelAnimation.vue │ ├── Dashboard.vue │ ├── HoverAnimation.vue │ └── LoadingAnimation.vue ├── mixins │ ├── canjump.js │ └── sysParamsMixin.js └── App.vue ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html ├── .github └── workflows │ └── ci.yml ├── .eslintrc.js ├── LICENSE ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logo red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/logo red.png -------------------------------------------------------------------------------- /src/assets/logo green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/logo green.png -------------------------------------------------------------------------------- /src/assets/rays-main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/rays-main.png -------------------------------------------------------------------------------- /src/assets/rays-main1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/rays-main1.png -------------------------------------------------------------------------------- /src/assets/icon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/icon/iconfont.eot -------------------------------------------------------------------------------- /src/assets/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SHERlocked93/vue-style-codebase/HEAD/src/assets/icon/iconfont.woff -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/utils/eventBus.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/23 3 | * 作者: SHERlocked93 4 | * 功能: 事件总线 5 | */ 6 | 7 | import Vue from 'vue' 8 | 9 | const EventBus = new Vue() 10 | 11 | export default EventBus 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | /vue-style-codebase 16 | -------------------------------------------------------------------------------- /src/styles/element-ui.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/25 3 | * 作者: SHERlocked93 4 | * 功能: 用以覆盖element-ui默认设置的样式 5 | */ 6 | @import "mixin"; 7 | 8 | .el-scrollbar { 9 | height: 100%; 10 | .el-scrollbar__wrap { 11 | overflow-x: hidden; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-style-codebase 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/common/mixins/codepenMixin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/25 3 | * 作者: SHERlocked93 4 | * 功能: Codepen相关的Mixin 5 | */ 6 | 7 | 8 | export default { 9 | methods: { 10 | /** 11 | * 重加载Codepen 12 | * @private 13 | */ 14 | _reloadEmbed(el) { 15 | window.__CPEmbed(el) 16 | } 17 | }, 18 | mounted() { 19 | this.$nextTick( 20 | window.__CPEmbed() // 重加载Codepen 21 | ) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: GitHub Actions Build and Deploy Demo 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build-and-deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@master 12 | with: 13 | persist-credentials: false 14 | 15 | 16 | - name: Build and Deploy 17 | uses: JamesIves/github-pages-deploy-action@master 18 | env: 19 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 20 | BRANCH: gh-pages 21 | FOLDER: vue-style-codebase 22 | BUILD_SCRIPT: npm install && npm run build 23 | -------------------------------------------------------------------------------- /src/styles/scrollbar.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: 滚动条样式 5 | */ 6 | 7 | ::-webkit-scrollbar { 8 | width: 7px; 9 | height: 7px; 10 | } 11 | 12 | ::-webkit-scrollbar-button { 13 | width: 0; 14 | height: 0; 15 | } 16 | 17 | ::-webkit-scrollbar-thumb { 18 | background: rgba(28, 31, 34, 0.8); 19 | &:hover { 20 | background: #3daee9; 21 | } 22 | } 23 | 24 | ::-webkit-scrollbar-track { 25 | background: transparent; 26 | border-radius: 50px; 27 | transition: .2s; 28 | &:hover { 29 | background: rgba(106, 110, 113, 0.1); 30 | } 31 | } 32 | 33 | ::-webkit-scrollbar-corner { 34 | background: rgba(0, 0, 0, 0.8); 35 | } 36 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | extends: ['plugin:vue/essential'], 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'vue' 17 | ], 18 | // add your custom rules here 19 | rules: { 20 | // allow debugger during development 21 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | import ElementUI from 'element-ui' 5 | 6 | import 'normalize.css/normalize.css' 7 | import 'styles/index.scss' 8 | import 'element-ui/lib/theme-chalk/index.css' 9 | import 'styles/element-ui.scss' 10 | import 'styles/scrollbar.scss' 11 | import 'assets/icon/iconfont.css' 12 | import 'progress-catalog/src/progress-catalog.css' 13 | import 'utils/codepenEmbed.js' 14 | 15 | import 'local/componentRegister.js' 16 | 17 | Vue.config.productionTip = false 18 | 19 | Vue.use(ElementUI, { size: 'small' }) 20 | 21 | /* eslint-disable no-new */ 22 | new Vue({ 23 | el: '#app', 24 | router, 25 | components: { App }, 26 | template: '' 27 | }) 28 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Dashboard from 'views/Dashboard' 4 | import LoadingAnimation from 'views/LoadingAnimation' 5 | import HoverAnimation from 'views/HoverAnimation' 6 | import PanelAnimation from 'views/PanelAnimation' 7 | 8 | Vue.use(Router) 9 | 10 | export const routes = [ 11 | { 12 | path: '/', 13 | name: 'Dashboard', 14 | component: Dashboard 15 | }, 16 | { 17 | path: '/loadingAnimation', 18 | name: 'Loading 加载中效果', 19 | component: LoadingAnimation 20 | }, 21 | { 22 | path: '/hoverAnimation', 23 | name: 'Hover 悬停效果', 24 | component: HoverAnimation 25 | }, 26 | { 27 | path: '/panelAnimation', 28 | name: 'Panel 展板效果', 29 | component: PanelAnimation 30 | } 31 | ] 32 | 33 | export default new Router({ 34 | mode: 'history', 35 | base: '/vue-style-codebase/', 36 | routes 37 | }) 38 | -------------------------------------------------------------------------------- /src/components/common/mixins/clipboardMixin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/25 3 | * 作者: SHERlocked93 4 | * 功能: Clipboard相关的Mixin 5 | */ 6 | 7 | import Clipboard from 'clipboard' 8 | 9 | export default { 10 | data() { 11 | return { 12 | _clipboard: null // Clipboard.js剪切板对象 13 | } 14 | }, 15 | methods: { 16 | /** 17 | * 装载 Clipboard 剪切板操作对象 18 | * @param el css选择器、DOM、DOM元素的list 19 | */ 20 | _loadEleClipboard(el) { 21 | this._clipboard = new Clipboard(this.$refs.demoBox) 22 | 23 | this._clipboard.on('success', e => this.$message({ 24 | type: 'success', 25 | dangerouslyUseHTMLString: true, 26 | message: `组件名 ${this.thisName} 已经成功复制到剪切板` 27 | })) 28 | 29 | this._clipboard.on('error', err => console.error('复制失败', err)) 30 | } 31 | }, 32 | destroyed() { 33 | this._clipboard && 34 | (this._clipboard = null) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0302.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0302 环形 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 11 | 12 | 17 | 18 | 39 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0301.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0301 环形 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 11 | 12 | 17 | 18 | 41 | -------------------------------------------------------------------------------- /src/views/PanelAnimation.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: panel 展板动画 5 | */ 6 | 7 | 8 | 20 | 21 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /src/mixins/canjump.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/9/18 3 | * 作者: QianYu 4 | * 功能: 路由是否可跳转mixin 5 | */ 6 | 7 | 8 | const canjump = { 9 | data() { 10 | return { 11 | $_canJump: true, // 是否可以直接跳转 12 | $_tipsMessage: '是否放弃当前操作？' // 提示 13 | } 14 | }, 15 | methods: { 16 | /** 17 | * 信息修改标记 18 | */ 19 | _infoChange(flag) { 20 | this.$data.$_canJump = flag 21 | }, 22 | 23 | /** 24 | * 改变提示 25 | * @param res 26 | * @private 27 | */ 28 | _tipsMessageChange(res) { 29 | this.$data.$_tipsMessage = res || '是否放弃当前操作？' 30 | } 31 | }, 32 | beforeRouteLeave(to, from, next) { 33 | if (!this.$data.$_canJump) { // 跳转前提示是否保存 34 | this.$confirm(this.$data.$_tipsMessage, '提示', { 35 | center: true, 36 | confirmButtonText: '确定', 37 | cancelButtonText: '取消', 38 | type: 'warning' 39 | }) 40 | .then(() => next()) 41 | .catch(() => next(false)) 42 | } else { 43 | next() 44 | } 45 | } 46 | } 47 | export default canjump 48 | -------------------------------------------------------------------------------- /src/components/styleParts/hoverAnimation/HoverAnimation0302.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2019/1/9 3 | * 作者: SHERlocked93 4 | * 功能: HoverAnimation0302 按钮Hover效果 5 | * Codepen: https://codepen.io/SHERlocked93/pen/zyLPEy 6 | */ 7 | 8 | 9 | 14 | 15 | 20 | 21 | 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 ximuli 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0503.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0503 其他 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 11 | 12 | 17 | 18 | 43 | -------------------------------------------------------------------------------- /src/components/common/local/componentRegister.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | /** 4 | * 首字母大写 5 | * @param str 字符串 6 | * @example heheHaha 7 | * @return {string} HeheHaha 8 | */ 9 | function capitalizeFirstLetter(str) { 10 | return str.charAt(0).toUpperCase() + str.slice(1) 11 | } 12 | 13 | /** 14 | * 对符合'xx/xx.vue'组件格式的组件取组件名 15 | * @param str fileName 16 | * @example abc/bcd/def/basicTable.vue 17 | * @return {string} BasicTable 18 | */ 19 | function validateFileName(str) { 20 | return /^\S+\.vue$/.test(str) && 21 | str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1)) 22 | } 23 | 24 | const requireComponent = require.context('./', true, /\.vue$/) 25 | 26 | // 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名 27 | requireComponent.keys().forEach(filePath => { 28 | const componentConfig = requireComponent(filePath) 29 | const fileName = validateFileName(filePath) 30 | const componentName = fileName.toLowerCase() === 'index' 31 | ? capitalizeFirstLetter(componentConfig.default.name) 32 | : fileName 33 | Vue.component(componentName, componentConfig.default || componentConfig) 34 | }) 35 | 36 | -------------------------------------------------------------------------------- /src/components/styleParts/hoverAnimation/HoverAnimation0201.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/11/4 3 | * 作者: QianYu 4 | * 功能: HoverAnimation0201 文字Hover效果 5 | * Codepen: https://codepen.io/SHERlocked93/pen/RqNwjw 6 | */ 7 | 8 | 9 | 12 | 13 | 18 | 19 | 47 | -------------------------------------------------------------------------------- /src/components/styleParts/RotateBackgroundRays.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/31 3 | * 作者: QianYu 4 | * 功能: 旋转的背景光晕 5 | * Codepen: https://codepen.io/SHERlocked93/pen/zLPWyx 6 | */ 7 | 8 | 9 | 10 | 16 | 17 | 22 | 23 | 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo](https://github.com/SHERlocked93/vue-style-codebase/blob/master/src/assets/logo%20green.png) 2 | 3 |

4 | 5 | 6 |

7 | 8 | # vue-style-codebase 9 | 10 | 自用样式库，主要是用来预览各种样式，方便 UI、PM 进行样式设计，和自己平时的开发。也欢迎大家给我提issue，提pr啊~~~ 11 | 12 | - 展示区集成CodePen 13 | - 点击示例将复制组件名称，方便查找 14 | 15 | ## Build Setup 16 | 17 | [线上DEMO](https://SHERlocked93.github.io/vue-style-codebase) 18 | 19 | 20 | 21 | 22 | ``` bash 23 | # install dependencies 24 | npm install 25 | 26 | # serve with hot reload at localhost:8080 27 | npm run dev 28 | 29 | # build for production with minification 30 | npm run build 31 | 32 | # build for production and view the bundle analyzer report 33 | npm run build --report 34 | ``` 35 | 36 | 37 | ## TODO List 38 | - [x] UI框架 39 | - [x] Demo Box 40 | - [x] 内容页目录自动生成 41 | - [x] 骨架屏 42 | - [x] 预渲染机制 43 | - [ ] 自选主题 44 | - [ ] 组件导出 45 | 46 | 47 | --- 48 | 49 | PS： 在下的 [掘金专栏](https://juejin.im/user/5962fe1d6fb9a06bac5b9899/posts)、[SegmentFault专栏](https://segmentfault.com/blog/sherlocked93)，也欢迎大家关注我的公众号【前端下午茶】，一起加油~ 50 | 51 | ![](https://i.loli.net/2019/05/31/5cf08a479cd5d75372.jpg) 52 | 53 | 54 | 另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注**加群**，我拉你入群～ 55 | 56 | ![](https://i.loli.net/2019/07/13/5d2986f77e9bc11533.jpg) 57 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0501.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0501 其他 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 15 | 16 | 21 | 22 | 57 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0102.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0102 小球球 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 17 | 18 | 23 | 24 | 57 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/25 3 | * 作者: SHERlocked93 4 | * 功能: 通用设置 5 | */ 6 | @import "mixin"; 7 | 8 | body, html { 9 | min-width: 1920px; 10 | min-height: 1080px; 11 | overflow: hidden; 12 | font-size: 14px; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-font-smoothing: antialiased; 15 | text-rendering: optimizeLegibility; 16 | font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Microsoft Sans Serif, Hiragino Sans GB, Arial, sans-serif; 17 | margin: 0; 18 | border: 0; 19 | } 20 | 21 | *, 22 | *:before, 23 | *:after { 24 | box-sizing: inherit; 25 | } 26 | 27 | *::selection { 28 | background: rgba(65, 184, 163, 0.44); 29 | } 30 | 31 | a:focus, 32 | a:active { 33 | outline: none; 34 | } 35 | 36 | a, 37 | a:focus, 38 | a:hover { 39 | cursor: pointer; 40 | color: inherit; 41 | text-decoration: none; 42 | } 43 | 44 | h2, h3 { 45 | position: relative; 46 | margin: 40px 0 25px; 47 | 48 | &:before { 49 | content: '#'; 50 | color: $light; 51 | position: absolute; 52 | left: -20px; 53 | display: none; 54 | } 55 | 56 | &:hover { 57 | &:before { 58 | display: inline-block; 59 | } 60 | } 61 | } 62 | 63 | h2 { 64 | font-size: 1.8em; 65 | margin: 40px 0 30px; 66 | } 67 | 68 | h3 { 69 | font-size: 1.5em; 70 | } 71 | 72 | code { 73 | font-family: $code-font; 74 | word-wrap: break-word; 75 | margin: 0 4px; 76 | padding: 2px 4px; 77 | white-space: pre-wrap; 78 | color: $green; 79 | background-color: $green-light; 80 | border-radius: 4px; 81 | } 82 | 83 | 84 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0304.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/15 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0304 环形 Loading效果 5 | * Codepen: https://codepen.io/martinvd/pen/wBQveM 6 | */ 7 | 8 | 14 | 15 | 20 | 21 | 65 | -------------------------------------------------------------------------------- /src/components/common/local/DemoBox.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/31 3 | * 作者: QianYu 4 | * 功能: 示例中的小栗子容器 5 | */ 6 | 7 | 8 | 21 | 22 | 43 | 44 | 73 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0506.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0506 其他 Loading效果 5 | * Codepen: https://codepen.io/TaniaLD/pen/oKxep 6 | */ 7 | 8 | 13 | 14 | 19 | 20 | 70 | -------------------------------------------------------------------------------- /src/mixins/sysParamsMixin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/9/7 3 | * 作者: QianYu 4 | * type: 全局mixins 5 | * 功能: 获取系统数据字典 6 | * 使用方法：https://segmentfault.com/a/1190000016320939 7 | */ 8 | 9 | import * as Api from 'api' 10 | 11 | export default { 12 | data() { 13 | return { 14 | _filterFunc: null, // 过滤器函数 15 | _sysParams: null, // 获取数据字典 16 | _sysParamsPromise: null // 获取sysParams之后返回的Promise 17 | } 18 | }, 19 | methods: { 20 | /** 21 | * 注册过滤器到_filterFunc中 22 | * @private 23 | */ 24 | _getSysParamsFunc() { 25 | const thisPromise = this.$data._sysParamsPromise 26 | return thisPromise || Api.sysParams() 27 | .then(({ data }) => { 28 | this.$data._sysParams = data 29 | this.$data._filterFunc = {} 30 | Object.keys(data).forEach(paramKey => 31 | this.$data._filterFunc[paramKey] = val => { 32 | const tar = data[paramKey].find(item => item['paramValue'] === val) 33 | return tar['paramDesc'] || '' 34 | }) 35 | return data 36 | }) 37 | .catch(err => console.error(err, ' in src/mixins/sysParamsMixin.js')) 38 | }, 39 | 40 | /** 41 | * 按照键值获取单个过滤器 42 | * @returns {*} 43 | * @param id 过滤器key 44 | * @param val 传给过滤器的value 45 | */ 46 | _rootFilters(val, id = 'DEPARTMENT') { 47 | const func = this.$data._filterFunc 48 | const mth = func && func[id] 49 | return mth && mth(val) || val 50 | }, 51 | 52 | /** 53 | * 获取数据字典 54 | * @returns {Object} 55 | * @private 56 | */ 57 | _getSysParams() { 58 | return this.$data._sysParams 59 | } 60 | }, 61 | mounted() { 62 | this.$data._filterFunc || 63 | (this.$data._sysParamsPromise = this._getSysParamsFunc()) 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0203.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0203 小球球 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 21 | 22 | 27 | 28 | 69 | -------------------------------------------------------------------------------- /src/components/styleParts/hoverAnimation/HoverAnimation0101.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/11/4 3 | * 作者: QianYu 4 | * 功能: HoverAnimation0101 基础Hover效果 5 | * Codepen: https://codepen.io/SHERlocked93/pen/Pxwobw 6 | */ 7 | 8 | 9 | 12 | 13 | 18 | 19 | 54 | -------------------------------------------------------------------------------- /src/styles/mixin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/23 3 | * 作者: QianYu 4 | * 功能: 样式全局变量 5 | */ 6 | 7 | // 调色板 8 | $dark: #2c3e50; 9 | $medium: #34495e; 10 | $light: #d7d7d7; 11 | $green: #42b983; 12 | $green-trans: rgba(66, 185, 131, .8); 13 | $green-light: #e5f7ef; 14 | $codebg: #f8f8f8; 15 | $red: #f66; 16 | $red-trans: rgba(255, 102, 102, .8); 17 | $grey: #717171; 18 | $light-grey: #f6f6f6; 19 | $border-grey: #e9e9e9; 20 | $hover-bg-grey: rgba(243, 243, 243, .5); 21 | $box-shadow: rgba(96, 96, 96, 0.5); 22 | 23 | // 字体库 24 | $body-font: Source Sans Pro, Helvetica Neue, Arial, sans-serif; 25 | $logo-font: Segoe UI, Raleway, Bahnschrift, Source Sans Pro, Arial, sans-serif; 26 | $code-font: Consolas, Monaco, courier, monospace; 27 | $title-font: Segoe UI Semibold, Segoe UI Symbol, Verdana, sans-serif; 28 | 29 | // 效果设置 30 | $comm-transition: .4s; 31 | $comm-border: 1px solid $light-grey; 32 | 33 | // 长度设置 34 | $radius: 2px; 35 | $radius-big: 4px; 36 | $header-height: 40px + 15px * 2; 37 | $header-padding: 15px 60px; 38 | 39 | $comm-distance: 20px; 40 | $content-minwidth: 1000px; 41 | 42 | $sidebar-width: 330px; 43 | 44 | // 样式块 45 | @mixin blnWrap { 46 | position: fixed; 47 | top: 20px + $header-height; 48 | right: 20px; 49 | color: white; 50 | font-size: 21px; 51 | [class^="el-icon-my"] { 52 | font-size: 20px; 53 | margin-top: 2px; 54 | } 55 | } 56 | 57 | // 文本超出显示省略号 58 | @mixin overflowEllipsis { 59 | overflow: hidden; 60 | white-space: nowrap; 61 | text-overflow: ellipsis; 62 | } 63 | 64 | // 透明度(含IEhack) 65 | @mixin opacity($opacity) { 66 | opacity: $opacity; 67 | $opacityIE: $opacity * 100; 68 | filter: alpha(opacity=$opacityIE); 69 | } 70 | 71 | //region keyframes 72 | 73 | // 顺时针自选 74 | @keyframes spin { 75 | 0% { transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); } 77 | } 78 | 79 | // 逆时针自旋 80 | @keyframes spinReverse { 81 | 0% { transform: rotate(0deg); } 82 | 100% { transform: rotate(-360deg); } 83 | } 84 | 85 | //endregion 86 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0101.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/31 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0101 音阶波浪 Loading效果 5 | * Codepen: https://codepen.io/SHERlocked93/pen/YjQQoR 6 | */ 7 | 8 | 9 | 15 | 16 | 27 | 28 | 79 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0303.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0303 环形 Loading效果 5 | * Codepen: https://codepen.io/Erik/pen/cslHn 6 | */ 7 | 8 | 11 | 12 | 17 | 18 | 81 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0306.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/25 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0306 环形 Loading效果 5 | * Codepen: https://codepen.io/francoislesenne/pen/aIuko 6 | */ 7 | 8 | 13 | 14 | 19 | 20 | 72 | -------------------------------------------------------------------------------- /src/components/common/SideBar.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: 侧边菜单栏 5 | */ 6 | 7 | 18 | 19 | 35 | 36 | 78 | -------------------------------------------------------------------------------- /src/components/styleParts/hoverAnimation/HoverAnimation0301.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/11/4 3 | * 作者: QianYu 4 | * 功能: HoverAnimation0301 按钮Hover效果 5 | * Codepen: https://codepen.io/SHERlocked93/pen/dQPymB 6 | * 参考： https://www.zcfy.cc/article/stunning-hover-effects-with-css-variables 7 | */ 8 | 9 | 10 | 17 | 18 | 31 | 32 | 75 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0504.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0504 其他 Loading效果 5 | * Codepen: https://codepen.io/hakimel/pen/CxliK 6 | */ 7 | 8 | 15 | 16 | 21 | 22 | 81 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0505.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0505 其他 Loading效果 5 | * Codepen: https://codepen.io/akshaycodes/pen/OoMxYG 6 | */ 7 | 8 | 15 | 16 | 21 | 22 | 80 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0305.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/25 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0305 环形 Loading效果 5 | * Codepen: https://codepen.io/francoislesenne/pen/aIuko 6 | */ 7 | 8 | 13 | 14 | 19 | 20 | 77 | -------------------------------------------------------------------------------- /src/components/styleParts/BreathingLight.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/2 3 | * 作者: QianYu 4 | * 功能: 呼吸灯 5 | * Codepen: https://codepen.io/SHERlocked93/pen/ajYxOM 6 | */ 7 | 8 | 9 | 18 | 19 | 24 | 25 | 95 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0201.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/31 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0201 小球球 Loading效果 5 | * Codepen: https://codepen.io/stryju/pen/zrijB 6 | */ 7 | 8 | 9 | 14 | 15 | 20 | 21 | 91 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0401.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0401 环形 Loading效果 5 | * Codepen: https://codepen.io/martinvd/pen/xbQJom 6 | */ 7 | 8 | 15 | 16 | 21 | 22 | 92 | -------------------------------------------------------------------------------- /src/components/styleParts/RotatingDashedBorder.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/31 3 | * 作者: QianYu 4 | * 功能: border虚线移动特效 5 | * Codepen: https://codepen.io/techniq/pen/gzyHI 6 | */ 7 | 8 | 9 | 10 | 19 | 20 | 36 | 37 | 92 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0202.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/31 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0202 小球球 Loading效果 5 | * Codepen: https://codepen.io/janrubio/pen/DusIE 6 | */ 7 | 8 | 17 | 18 | 23 | 24 | 85 | -------------------------------------------------------------------------------- /src/views/Dashboard.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: Dashboard 5 | * From: https://juejin.im/post/5a924fcaf265da4e7d6061a6 6 | */ 7 | 8 | 9 | 15 | 16 | 40 | 41 | 93 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-style-codebase", 3 | "version": "1.0.4", 4 | "description": "Style Codebase", 5 | "author": "SHERlocked93 <443033099@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js", 12 | "build:report": "npm run build --report" 13 | }, 14 | "homepage": "https://SHERlocked93.github.io/vue-style-codebase", 15 | "dependencies": { 16 | "axios": "^0.18.0", 17 | "clipboard": "^2.0.1", 18 | "echarts": "^4.1.0", 19 | "element-ui": "^2.4.4", 20 | "lodash": "^4.17.10", 21 | "normalize.css": "^8.0.0", 22 | "progress-catalog": "^1.0.6", 23 | "vue": "^2.5.17", 24 | "vue-router": "^3.0.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^7.1.2", 28 | "babel-core": "^6.22.1", 29 | "babel-eslint": "^8.2.1", 30 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 31 | "babel-loader": "^7.1.1", 32 | "babel-plugin-syntax-jsx": "^6.18.0", 33 | "babel-plugin-transform-runtime": "^6.22.0", 34 | "babel-plugin-transform-vue-jsx": "^3.5.0", 35 | "babel-preset-env": "^1.3.2", 36 | "babel-preset-stage-2": "^6.22.0", 37 | "chalk": "^2.0.1", 38 | "copy-webpack-plugin": "^4.0.1", 39 | "css-loader": "^0.28.0", 40 | "eslint": "^4.15.0", 41 | "eslint-friendly-formatter": "^3.0.0", 42 | "eslint-loader": "^1.7.1", 43 | "eslint-plugin-vue": "^4.0.0", 44 | "extract-text-webpack-plugin": "^3.0.2", 45 | "file-loader": "^1.1.4", 46 | "friendly-errors-webpack-plugin": "^1.6.1", 47 | "html-webpack-plugin": "^2.30.1", 48 | "node-notifier": "^5.1.2", 49 | "node-sass": "^4.9.2", 50 | "optimize-css-assets-webpack-plugin": "^3.2.0", 51 | "ora": "^1.2.0", 52 | "portfinder": "^1.0.13", 53 | "postcss-import": "^11.0.0", 54 | "postcss-loader": "^2.0.8", 55 | "postcss-url": "^7.2.1", 56 | "rimraf": "^2.6.0", 57 | "sass-loader": "^7.0.3", 58 | "semver": "^5.3.0", 59 | "shelljs": "^0.7.6", 60 | "uglifyjs-webpack-plugin": "^1.1.1", 61 | "url-loader": "^0.5.8", 62 | "vue-loader": "^13.3.0", 63 | "vue-style-loader": "^3.0.1", 64 | "vue-template-compiler": "^2.5.17", 65 | "webpack": "^3.6.0", 66 | "webpack-bundle-analyzer": "^2.13.1", 67 | "webpack-dev-server": "^2.9.1", 68 | "webpack-merge": "^4.1.0" 69 | }, 70 | "engines": { 71 | "node": ">= 6.0.0", 72 | "npm": ">= 3.0.0" 73 | }, 74 | "browserslist": [ 75 | "> 1%", 76 | "last 2 versions", 77 | "not ie <= 8" 78 | ] 79 | } 80 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | const ip = require('ip').address() 7 | 8 | module.exports = { 9 | dev: { 10 | 11 | // Paths 12 | assetsSubDirectory: 'static', 13 | assetsPublicPath: '/', 14 | proxyTable: {}, 15 | 16 | // Various Dev Server settings 17 | host: ip, // can be overwritten by process.env.HOST 18 | port: 9550, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 19 | autoOpenBrowser: true, 20 | errorOverlay: true, 21 | notifyOnErrors: true, 22 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 23 | 24 | // Use Eslint Loader? 25 | // If true, your code will be linted during bundling and 26 | // linting errors and warnings will be shown in the console. 27 | useEslint: true, 28 | // If true, eslint errors and warnings will also be shown in the error overlay 29 | // in the browser. 30 | showEslintErrorsInOverlay: false, 31 | 32 | /** 33 | * Source Maps 34 | */ 35 | 36 | // https://webpack.js.org/configuration/devtool/#development 37 | devtool: 'cheap-module-eval-source-map', 38 | 39 | // If you have problems debugging vue-files in devtools, 40 | // set this to false - it *may* help 41 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 42 | cacheBusting: true, 43 | 44 | cssSourceMap: true 45 | }, 46 | 47 | build: { 48 | // Template for index.html 49 | index: path.resolve(__dirname, '../vue-style-codebase/index.html'), 50 | 51 | // Paths 52 | assetsRoot: path.resolve(__dirname, '..'), 53 | assetsSubDirectory: 'vue-style-codebase/static', 54 | assetsPublicPath: '/', 55 | 56 | /** 57 | * Source Maps 58 | */ 59 | 60 | productionSourceMap: true, 61 | // https://webpack.js.org/configuration/devtool/#production 62 | devtool: '#source-map', 63 | 64 | // Gzip off by default as many popular static hosts such as 65 | // Surge or Netlify already gzip all static assets for you. 66 | // Before setting to `true`, make sure to: 67 | // npm install --save-dev compression-webpack-plugin 68 | productionGzip: false, 69 | productionGzipExtensions: ['js', 'css'], 70 | 71 | // Run the build command with an extra argument to 72 | // View the bundle analyzer report after build finishes: 73 | // `npm run build --report` 74 | // Set to `true` or `false` to always turn it on or off 75 | bundleAnalyzerReport: process.env.npm_config_report 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/components/styleParts/CloudySpiral.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: Cloudy Spiral 螺旋云 5 | * Codepen: https://codepen.io/hakimel/pen/aIhkf 6 | */ 7 | 8 | 9 | 75 | 76 | 81 | 82 | 126 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1533184480226'); /* IE9*/ 4 | src: url('iconfont.eot?t=1533184480226#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 5 | url('iconfont.ttf?t=1533184480226') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1533184480226#iconfont') format('svg'); /* iOS 4.1- */ 6 | } 7 | 8 | .iconfont, [class^="el-icon-my"], [class*=" el-icon-my"] { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | .el-icon-my-github:before { content: "\eaf6"; } 17 | 18 | .el-icon-my-menu:before { content: "\e94e"; } 19 | 20 | .el-icon-my-search:before { content: "\e614"; } 21 | 22 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0508.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0508 其他 Loading效果 5 | * Codepen: https://codepen.io/comehope/pen/KBxYZg 6 | */ 7 | 8 | 17 | 18 | 23 | 24 | 104 | -------------------------------------------------------------------------------- /src/components/common/HeaderNav.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/23 3 | * 作者: SHERlocked93 4 | * 功能: 头部导航 5 | */ 6 | 7 | 8 | 35 | 36 | 50 | 51 | 115 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0502.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0502 其他 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 36 | 37 | 42 | 43 | 101 | -------------------------------------------------------------------------------- /src/components/styleParts/loadingAnimation/LoadingAnimation0204.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/8/1 3 | * 作者: QianYu 4 | * 功能: LoadingAnimation0204 小球球 Loading效果 5 | * Codepen: https://codepen.io/filipekiss/pen/yJxFo 6 | */ 7 | 8 | 36 | 37 | 42 | 43 | 101 | -------------------------------------------------------------------------------- /src/components/common/SearchRoutes.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: 导航栏的搜索框 5 | */ 6 | 7 | 8 | 26 | 27 | 75 | 76 | 132 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 24 | 25 | 53 | 54 | 133 | -------------------------------------------------------------------------------- /src/components/common/local/DemoBlock.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/25 3 | * 作者: SHERlocked93 4 | * 功能: 示例 Demo 容器 5 | * slot name: blackboard 演示区 6 | * slot name: description 描述区 7 | * slot name: realization 实现区 8 | */ 9 | 10 | 11 | 37 | 38 | 62 | 63 | 140 | -------------------------------------------------------------------------------- /src/views/HoverAnimation.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建于 2018/7/24 3 | * 作者: SHERlocked93 4 | * 功能: hover 过渡动画 5 | */ 6 | 7 | 8 | 66 | 67 | 90 | 91 | 96 | -------------------------------------------------------------------------------- /src/utils/codepenEmbed.js: -------------------------------------------------------------------------------- 1 | // noinspection CommaExpressionJS 2 | /** 3 | * 创建于 2018/7/26 4 | * 作者: QianYu 5 | * 功能: codepen 的重加载函数 6 | */ 7 | 8 | 9 | document.getElementsByClassName || (document.getElementsByClassName = function(e) { 10 | let n, t, r 11 | const docu = document, arr = [] 12 | if (docu.querySelectorAll) return docu.querySelectorAll("." + e) 13 | if (docu.evaluate) for (t = ".//*[contains(concat(' ', @class, ' '), ' " + e + " ')]", n = docu.evaluate(t, docu, null, 0, null); r = n.iterateNext();) {arr.push(r)} else { 14 | for (n = docu.getElementsByTagName("*"), t = new RegExp("(^|\\s)" + e + "(\\s|$)"), r = 0; r < n.length; r++) t.test(n[r].className) && arr.push(n[r]) 15 | } 16 | return arr 17 | }), function() { 18 | function init(el = document) { 19 | function _init(el) { 20 | const e = el.getElementsByClassName("codepen") 21 | let t = e.length - 1 22 | for (; t > -1; t--) { 23 | let u = a(e[t]) 24 | // noinspection CommaExpressionJS 25 | if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) { 26 | const c = i(u), l = s(u, c) 27 | f(e[t], l) 28 | } 29 | } 30 | m() 31 | } 32 | 33 | function n(e, n) { 34 | if ("string" === typeof e.user) return e.user 35 | let t = 0 36 | const r = n.children.length 37 | for (; t < r; t++) { 38 | const a = n.children[t], o = a.href || "", i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i) 39 | if (i) return i[2] 40 | } 41 | return "anon" 42 | } 43 | 44 | function r(e) {return e["slug-hash"]} 45 | 46 | function a(e) { 47 | // noinspection ES6ConvertVarToLetConst 48 | for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) { 49 | const o = t[r].name 50 | 0 === o.indexOf("data-") && (n[o.replace("data-", "")] = t[r].value) 51 | } 52 | return n 53 | } 54 | 55 | function o(e) {// noinspection CommaExpressionJS 56 | return e.href && (e["slug-hash"] = e.href), e.type && (e["default-tab"] = e.type), e.safe && ("true" === e.safe ? e.animations = "run" : e.animations = "stop-after-5"), e 57 | } 58 | 59 | function i(e) { 60 | const n = u(e), t = e.user ? e.user : "anon", r = "?" + l(e), a = e.preview && "true" === e.preview ? "embed/preview" : "embed", o = [n, t, a, e["slug-hash"] + r].join("/") 61 | return o.replace(/\/\//g, "//") 62 | } 63 | 64 | function u(e) {return e.host ? c(e.host) : "file:" === document.location.protocol ? "https://codepen.io" : "//codepen.io"} 65 | 66 | function c(e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + "//" + e : e} 67 | 68 | function l(e) { 69 | let n = "" 70 | for (let t in e) { 71 | // noinspection JSUnfilteredForInLoop,CommaExpressionJS 72 | "" !== n && (n += "&"), n += t + "=" + encodeURIComponent(e[t]) 73 | } 74 | return n 75 | } 76 | 77 | function s(e, n) { 78 | let r 79 | // noinspection CommaExpressionJS 80 | e["pen-title"] ? r = e["pen-title"] : (r = "CodePen Embed " + t, t++) 81 | const a = { 82 | id: "cp_embed_" + e["slug-hash"].replace("/", "_"), src: n, scrolling: "no", frameborder: "0", height: d(e), allowTransparency: "true", allowfullscreen: "true", allowpaymentrequest: "true", 83 | name: "CodePen Embed", title: r, "class": "cp_embed_iframe " + (e["class"] ? e["class"] : ""), style: "width: " + p + "; overflow: hidden;" 84 | } 85 | let o = "