├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── assets
    │   ├── logo.png
    │   ├── img
    │   │   └── logo.jpeg
    │   ├── iconfont
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.ttf
    │   │   ├── iconfont.woff
    │   │   ├── iconfont.woff2
    │   │   ├── iconfont.json
    │   │   ├── iconfont.css
    │   │   ├── iconfont.svg
    │   │   ├── iconfont.js
    │   │   ├── demo.css
    │   │   └── demo_index.html
    │   └── style
    │   │   ├── mixin.scss
    │   │   ├── theme.scss
    │   │   └── style.scss
    ├── mixin
    │   └── routeTransition.ts
    ├── shims-vue.d.ts
    ├── views
    │   ├── home
    │   │   ├── pneumonia
    │   │   │   ├── syncComponents.vue
    │   │   │   ├── loadingComponent.vue
    │   │   │   ├── asyncComponents.vue
    │   │   │   ├── asyncComponent.ts
    │   │   │   └── pneumonia.vue
    │   │   ├── attention
    │   │   │   └── attention.vue
    │   │   ├── hotList
    │   │   │   └── hotList.vue
    │   │   ├── Home.vue
    │   │   └── recommend
    │   │   │   └── recommend.vue
    │   ├── notify
    │   │   └── notify.vue
    │   ├── vip
    │   │   └── vip.vue
    │   └── self
    │   │   └── self.vue
    ├── components
    │   ├── loading
    │   │   └── loading.vue
    │   ├── container
    │   │   └── container.vue
    │   ├── icon
    │   │   └── icon.vue
    │   ├── nav
    │   │   ├── topNavItem.vue
    │   │   ├── bottomNav.vue
    │   │   └── topNav.vue
    │   ├── card
    │   │   └── card.vue
    │   └── refresh
    │   │   └── drop-refresh.vue
    ├── App.vue
    ├── directive
    │   └── directive.ts
    ├── store
    │   └── index.ts
    ├── main.ts
    └── router
    │   └── index.ts
├── vue.config.js
├── .gitignore
├── .eslintrc.js
├── tsconfig.json
├── .postcssrc.js
├── package.json
├── doc
    ├── WebSocket.md
    └── README.md
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/mixin/routeTransition.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | 
3 | export const transitionName = ref('')
4 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/img/logo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/src/assets/img/logo.jpeg


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/src/assets/iconfont/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/src/assets/iconfont/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/src/assets/iconfont/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaiqiangren/vue-next-ts-preview/HEAD/src/assets/iconfont/iconfont.woff2


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // 项目配置
2 | module.exports = {
3 |   devServer: {
4 |     // 手机浏览器需要开启https才可以使用WebRTC
5 |     https: true
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/assets/style/mixin.scss:
--------------------------------------------------------------------------------
1 | @mixin text-overflow($row) {
2 |   display: -webkit-box;
3 |   -webkit-box-orient: vertical;
4 |   -webkit-line-clamp: $row;
5 |   overflow: hidden;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/views/home/pneumonia/syncComponents.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>我是同步组件</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 |   setup() {
 9 |     return {}
10 |   }
11 | }
12 | </script>
13 | 
14 | 


--------------------------------------------------------------------------------
/src/components/loading/loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     我是异步组件加载过程的组件!
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   setup() {
10 |     return {}
11 |   }
12 | }
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/views/home/pneumonia/loadingComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>loadingComponent</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   setup() {
 8 |     return {}
 9 |   }
10 | }
11 | </script>
12 | 
13 | 


--------------------------------------------------------------------------------
/src/views/notify/notify.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     notify
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   setup() {
10 |     return {}
11 |   }
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/views/home/pneumonia/asyncComponents.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     我是异步组件
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // import { ref } from 'vue'
 9 | export default {
10 |   setup() {
11 |     return {}
12 |   }
13 | }
14 | </script>
15 | 
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/views/vip/vip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     directives-test
 4 |     <div v-custom></div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // 组件内使用指令
10 | import { customDirective } from '../../directive/directive'
11 | export default {
12 |   setup() {
13 |     return {}
14 |   },
15 |   directives: {
16 |     custom: customDirective
17 |   }
18 | }
19 | </script>
20 | 
21 | <style scoped>
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="box">
 3 |     <router-view/>
 4 |     <bottom-nav></bottom-nav>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import BottomNav from "@/components/nav/bottomNav"
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     BottomNav
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 |   body {
20 |     background: #f6f6f6;
21 |   }
22 |   #box {
23 |     overflow-x: hidden;
24 |   }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/directive/directive.ts:
--------------------------------------------------------------------------------
 1 | import { ObjectDirective } from 'vue'
 2 | 
 3 | // 使用ObjectDirective声明指令类型即可，因为源码内部指定了默认类型说明
 4 | export const customDirective: ObjectDirective = {
 5 |   beforeMount(el, binding, vnode, prevVnode) {
 6 |     console.log(el, binding, vnode, prevVnode)
 7 |   },
 8 |   mounted() { console.log('mounted') },
 9 |   beforeUpdate() { console.log('beforeUpdate') },
10 |   updated() { console.log('updated') },
11 |   beforeUnmount() { console.log('beforeUnmount') },
12 |   unmounted() { console.log('unmounted') }
13 | }
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/src/views/home/pneumonia/asyncComponent.ts:
--------------------------------------------------------------------------------
 1 | import { defineAsyncComponent, defineComponent } from 'vue'
 2 | const loadingComponent = () => import('./loadingComponent.vue')
 3 | 
 4 | // 异步组件
 5 | export const asyncComponent = defineAsyncComponent({
 6 |   loader: () => import("./asyncComponents.vue"),
 7 |   loadingComponent: loadingComponent,
 8 |   errorComponent: loadingComponent,
 9 |   delay: 2000,
10 |   timeout: 3000
11 | });
12 | 
13 | // 同步组件
14 | export const syncComponent = defineComponent({
15 |   setup () {
16 |     return () => `我是同步组件`
17 |   }
18 | })
19 | 
20 | 


--------------------------------------------------------------------------------
/src/assets/style/theme.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | // 白天颜色
 3 | $bg-color-night:  #f6f6f6 !default;
 4 | $text-color-night: #000 !default;
 5 | 
 6 | // 晚上颜色
 7 | $bg-color-dark:  #000 !default;
 8 | $text-color-dark: #eee !default;
 9 | 
10 | // 切换主题
11 | @mixin themeChange($theme) {
12 |   @if($theme == "night") {
13 |     background: $bg-color-night;
14 |     color: $text-color-night;
15 |   }
16 |   @if($theme == "dark") {
17 |     background: $bg-color-dark;
18 |     color: $text-color-dark;
19 |   }
20 | }
21 | 
22 | .night {
23 |   @include themeChange("night");
24 | }
25 | 
26 | .dark {
27 |   @include themeChange("dark");
28 | }
29 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | const store = createStore({
 4 |   state: {
 5 |     userInfo: {
 6 |       name:'renkq'
 7 |     }
 8 |   },
 9 |   mutations: {
10 |     getUserInfo (state, name) {
11 |       state.userInfo.name = name
12 |     }
13 |   },
14 |   actions: {
15 |     asyncGetUserInfo ({ commit }) {
16 |       setTimeout(() => {
17 |         commit("getUserInfo", +new Date() + 'action')
18 |       },2000)
19 |     }
20 |   },
21 |   getters: {
22 |     userInfoGetter (state) {
23 |       return state.userInfo.name
24 |     }
25 |   }
26 | })
27 | 
28 | export default store
29 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp} from 'vue';
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store/index'
 5 | import 'normalize.css'
 6 | import './assets/iconfont/iconfont.css'
 7 | import './assets/style/style.scss'
 8 | // h5调试
 9 | import Vconsole from 'vconsole'
10 | console.log(process.env.NODE_ENV);
11 | if(process.env.NODE_ENV === 'development') {
12 |   new Vconsole()
13 | }
14 | // import { customDirective } from './directive/directive'
15 | // 主题样式
16 | // import './assets/style/theme.scss'
17 | 
18 | const app = createApp(App)
19 | app.use(router)
20 | app.use(store)
21 | // 全局注册directive
22 | // app.directive('custom', customDirective)
23 | app.mount('#app')
24 | 


--------------------------------------------------------------------------------
/src/components/container/container.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <slot></slot>
 4 |     <button @click="handleClick">点击emit</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // import { ref } from 'vue'
10 | 
11 | export default {
12 |   name: 'container',
13 |   props: {
14 |     value: {
15 |       type:Array,
16 |       default () {
17 |         return []
18 |       }
19 |     }
20 |   },
21 |   setup(props, { emit }) {
22 |     // 自定义v-model组件时，需要使用update:modelValue事件进行触发
23 |     const handleClick = () => {
24 |       emit('update:modelValue', ['I am a container!'])
25 |     }
26 |     return {
27 |       handleClick
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 |   .container {
35 |     padding-top: 2px;
36 |   }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "esModuleInterop": true,
10 |     "allowSyntheticDefaultImports": true,
11 |     "sourceMap": true,
12 |     "baseUrl": ".",
13 |     "types": [
14 |       "webpack-env"
15 |     ],
16 |     "paths": {
17 |       "@/*": [
18 |         "src/*"
19 |       ]
20 |     },
21 |     "lib": [
22 |       "esnext",
23 |       "dom",
24 |       "dom.iterable",
25 |       "scripthost"
26 |     ]
27 |   },
28 |   "include": [
29 |     "src/**/*.ts",
30 |     "src/**/*.tsx",
31 |     "src/**/*.vue",
32 |     "tests/**/*.ts",
33 |     "tests/**/*.tsx"
34 |   ],
35 |   "exclude": [
36 |     "node_modules"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/icon/icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span
 3 |     class="iconfont"
 4 |     :class="[props.name, props.hasInfo? 'has-icon': '']"
 5 |   >
 6 |   </span>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     name: {
13 |       type: String,
14 |       default: ''
15 |     },
16 |     hasInfo: {
17 |       type: Boolean,
18 |       default: false
19 |     }
20 |   },
21 |   setup(props) {
22 |     return {
23 |       props
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style scoped lang="scss">
30 |   .has-icon {
31 |     position: relative;
32 |     &::after {
33 |       content: '';
34 |       width: 5px;
35 |       height: 5px;
36 |       position: absolute;
37 |       top: 0;
38 |       right: 0;
39 |       background: red;
40 |       border-radius: 50%;
41 |     }
42 |   }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "plugins": {
 3 |     "autoprefixer": {},
 4 |     "postcss-import": {},
 5 |     "postcss-url": {},
 6 |     "postcss-write-svg": {
 7 |       utf8: false
 8 |     },
 9 |     // 官方说明文档 https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md
10 |     "postcss-px-to-viewport": {
11 |       viewportWidth: 375,     // (Number) UI设计图的宽度.
12 |       viewportHeight: 605,    // (Number)UI设计图的高度，一般可以不设置.
13 |       unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
14 |       viewportUnit: 'vw',     // (String) Expected units.
15 |       selectorBlackList: [],  // (Array) The selectors to ignore and leave as px.
16 |       minPixelValue: 1,       // (Number) 设置要替换的最小像素值.
17 |       mediaQuery: false       // (Boolean) 允许在媒体查询中转换px
18 |     }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/assets/style/style.scss:
--------------------------------------------------------------------------------
 1 | .left-enter-active {
 2 |   transition: transform .3s;
 3 |   transform: translateX(100%);
 4 | }
 5 | .left-leave-active {
 6 |   transition: transform .3s;
 7 | }
 8 | .left-enter-to {
 9 |   transform: translateX(0);
10 | }
11 | .left-leave-to {
12 |   transform: translateX(100%);
13 | }
14 | 
15 | .right-enter-active {
16 |   transition: transform .5s;
17 |   transform: translateX(-100%);
18 | }
19 | .right-leave-active {
20 |   transition: transform .5s;
21 | }
22 | .right-enter-to {
23 |   transform: translateX(0);
24 | }
25 | .right-leave-to {
26 |   transform: translateX(-100%);
27 | }
28 | 
29 | .top-enter-active {
30 |   transition: transform .5s;
31 |   transform: translateY(-100%);
32 | }
33 | .top-leave-active {
34 |   transition: transform .5s;
35 | }
36 | .top-enter-to {
37 |   transform: translateY(0);
38 | }
39 | .top-leave-to {
40 |   transform: translateY(-100%);
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/nav/topNavItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="nav-link"
 4 |     :class="{
 5 |       active: props.active
 6 |     }">
 7 |     <span class="nav-link-context"><slot></slot></span>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | 
13 | export default {
14 |   name: 'TopNavItem',
15 |   props: {
16 |     active: {
17 |       type: Boolean,
18 |       default: false
19 |     }
20 |   },
21 |   // 为了保障props响应性，需要将props全部返回
22 |   setup (props) {
23 |     return {
24 |       props
25 |     }
26 |   }
27 | }
28 | </script>
29 | 
30 | <style scoped lang="scss">
31 |   .nav-link {
32 |     width: 25%;
33 |     height: 40px;
34 |     line-height: 40px;
35 |     color: #8590a6;
36 |     cursor: pointer;
37 |     text-align: center;
38 |     display: inline-block;
39 |   }
40 |   .active {
41 |     color: #444;
42 |     font-weight: bold;
43 |     .nav-link-context{
44 |       border-bottom: 2px solid #444;
45 |     }
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/views/home/pneumonia/pneumonia.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>定义异步组件</h1>
 4 |     <div>
 5 |       <sync-component></sync-component>
 6 |       <async-component v-if="show"></async-component>
 7 |     </div>
 8 |     <button @click="handleCLick">切换异步组件</button>
 9 |     <h1>websocket连接</h1>
10 |     <button @click="createConnect">创建websocket连接</button>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import { ref } from 'vue'
16 | import { syncComponent, asyncComponent } from './asyncComponent'
17 | import io from 'socket.io-client'
18 | export default {
19 |   components: {
20 |     syncComponent,
21 |     asyncComponent
22 |   },
23 |   setup () {
24 |     const show = ref(false)
25 |     const handleCLick = () => {
26 |       show.value = !show.value
27 |     }
28 | 
29 |     const createConnect = () => {
30 |       const socket = io('ws://localhost:8000')
31 |       socket.on('connection', client => {
32 |         console.log(client)
33 |       })
34 |       socket.on('message', async (message) => {
35 |         console.log(message)
36 |       })
37 |     }
38 |     return {
39 |       show,
40 |       handleCLick,
41 |       createConnect
42 |     }
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-next-ts-preview",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "vue-cli-service build",
 7 |     "lint": "vue-cli-service lint",
 8 |     "dev": "vue-cli-service serve"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "normalize.css": "^8.0.1",
13 |     "socket.io-client": "^2.3.0",
14 |     "vconsole": "^3.3.4",
15 |     "vue": "^3.0.0-beta.14",
16 |     "vue-router": "^4.0.0-alpha.12",
17 |     "vuex": "^4.0.0-beta.2"
18 |   },
19 |   "devDependencies": {
20 |     "@typescript-eslint/eslint-plugin": "^2.26.0",
21 |     "@typescript-eslint/parser": "^2.26.0",
22 |     "@vue/cli-plugin-babel": "~4.3.0",
23 |     "@vue/cli-plugin-eslint": "~4.3.0",
24 |     "@vue/cli-plugin-router": "~4.3.0",
25 |     "@vue/cli-plugin-typescript": "~4.3.0",
26 |     "@vue/cli-plugin-vuex": "~4.3.0",
27 |     "@vue/cli-service": "~4.3.0",
28 |     "@vue/compiler-sfc": "^3.0.0-beta.1",
29 |     "@vue/eslint-config-typescript": "^5.0.2",
30 |     "eslint": "^6.7.2",
31 |     "eslint-plugin-vue": "^7.0.0-alpha.0",
32 |     "node-sass": "^4.12.0",
33 |     "postcss-import": "^12.0.1",
34 |     "postcss-px-to-viewport": "^1.1.1",
35 |     "postcss-url": "^8.0.0",
36 |     "postcss-write-svg": "^3.0.1",
37 |     "sass-loader": "^8.0.2",
38 |     "typescript": "~3.8.3",
39 |     "vue-cli-plugin-vue-next": "~0.1.2"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/views/self/self.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       getter:{{getters.userInfoGetter}}
 5 |     </div>
 6 |     <div>
 7 |       state:{{state.userInfo}}
 8 |     </div>
 9 |     <div>
10 |       <button @click="handleMutation">mutation</button>
11 |       <button @click="handleAction">action</button>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import {
18 |   useStore,
19 |   // mapState,
20 |   // mapMutations,
21 |   // mapActions,
22 |   // mapGetters
23 | } from 'vuex'
24 | 
25 | export default {
26 |   name: 'self',
27 |   setup() {
28 |     const store = useStore()
29 |     console.log(store, 'store')
30 |     console.log(store.getters, 'getters')
31 |     const state = store.state
32 |     const getters = store.getters
33 |     // console.log(mapState(store.state),'mapState')
34 |     // console.log(mapMutations(store._mutations),'mapMutations')
35 |     // console.log(mapActions(store._actions),'mapActions')
36 |     // console.log(mapGetters(store.getters),'mapGetters')
37 |     const methods = {
38 |       // 处理commit
39 |       handleMutation: () => {
40 |         store.commit('getUserInfo', +new Date)
41 |       },
42 |       // 处理dispatch
43 |       handleAction: () => {
44 |         store.dispatch('asyncGetUserInfo')
45 |       }
46 |     }
47 |     return {
48 |       state,
49 |       getters,
50 |       ...methods
51 |     }
52 |   }
53 | }
54 | </script>
55 | 
56 | <style scoped>
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/views/home/attention/attention.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="attention">
 3 |     <div class="attention-content">
 4 |       {{msg}}
 5 |     </div>
 6 |     {{modelTest}}
 7 |     <container v-model="modelTest"></container>
 8 |     <div>watch监听多个属性测试</div>
 9 | 
10 |     <button @click="changePosition">改变坐标</button>
11 |     <div>
12 |       <p>X:{{position.x}}</p>
13 |       <p>Y:{{position.y}}</p>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import { ref, reactive, watch } from 'vue'
20 | import { useRoute } from 'vue-router'
21 | import Container from "../../../components/container/container";
22 | export default {
23 |   name: 'attention',
24 |   components: {Container},
25 |   setup () {
26 |     const msg = ref('Hello attention')
27 |     const modelTest = reactive(['modelTest'])
28 |     const route  = useRoute();
29 |     console.log(route.params)
30 | 
31 | 
32 |     const position = reactive({
33 |       x: 1,
34 |       y: 1
35 |     })
36 |     const changePosition = () => {
37 |       position.x++
38 |       position.y++
39 |     }
40 |     // 监听多个属性
41 |     watch([
42 |           () => position.x,
43 |           () => position.y,
44 |         ], ([x1, y1], [nx1, ny1]) => {
45 |           console.log('x1,y1', x1, y1)
46 |           console.log('nx1,ny1', nx1, ny1)
47 |         },
48 |         {
49 |           flush: 'post', // 默认, 在视图渲染后触发
50 |           // flush: 'pre', // 在视图渲染之前触发
51 |           // flush: 'sync' // 无阻塞，异步触发
52 |         })
53 |     return {
54 |       msg,
55 |       modelTest,
56 |       position,
57 |       changePosition
58 |     }
59 |   }
60 | }
61 | </script>
62 | 
63 | <style scoped lang="scss">
64 |   .attention {
65 |     width: 100%;
66 |     padding-top: 10px;
67 |     .attention-content {
68 |       height: 80px;
69 |       background: #fff;
70 |     }
71 |   }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/views/home/hotList/hotList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hot-list-container">
 3 |     <button @click="getMediaStream">获取流视频</button>
 4 |     <button @click="closeMedia">关闭视频流</button>
 5 | 
 6 |     <video controls class="view-container" ref="localVideo" autoplay playsinline></video>
 7 |     <button @click="getDisplay">抓取桌面</button>
 8 |     <video controls class="view-container" ref="remoteVideo" autoplay playsinline></video>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { ref, onMounted } from 'vue'
14 | export default {
15 |   name: 'hotList',
16 |   setup () {
17 |     const localVideo = ref(null)
18 |     const remoteVideo = ref(null)
19 | 
20 |     const constraints = {
21 |       video: {
22 |         width: 375,
23 |         height: 300
24 |       },
25 |       audio:true,
26 |     }
27 | 
28 |     const getMediaStream = () => {
29 |       // 抓取本地视频流
30 |       window.navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
31 |         localVideo.value.srcObject = stream;
32 |       })
33 |     }
34 |     // 关闭摄像头
35 |     const closeMedia = () => {
36 |       constraints.video = false
37 |       constraints.audio = false
38 |       localVideo.value.srcObject = null
39 |     }
40 |     // 抓取桌面信息
41 |     const getDisplay = () => {
42 |       window.navigator.mediaDevices.getDisplayMedia({
43 |         video: true, // 是否抓取视频
44 |         audio:true //是否抓取音频
45 |       }).then(stream => {
46 |         remoteVideo.value.srcObject = stream;
47 |       })
48 |     }
49 | 
50 | 
51 |     onMounted(() => {
52 |       // getMediaStream()
53 |     })
54 |     return {
55 |       localVideo,
56 |       remoteVideo,
57 |       getMediaStream,
58 |       getDisplay,
59 |       closeMedia
60 |     }
61 |   }
62 | }
63 | </script>
64 | 
65 | <style lang="scss">
66 |   .hot-list-container{
67 |     video {
68 |       border: 1px solid blue;
69 |     }
70 |     .view-container{
71 |       width: 100%;
72 |       height: 300px;
73 |     }
74 |   }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/doc/WebSocket.md:
--------------------------------------------------------------------------------
 1 | # websocket相关
 2 | 
 3 | ## 一、koa依赖
 4 | ```json
 5 | {
 6 |   "name": "webrtc-sever",
 7 |   "version": "1.0.0",
 8 |   "description": "",
 9 |   "main": "index.js",
10 |   "scripts": {
11 |     "dev": "cross-env NODE_ENV=development nodemon index.js --watch index.js --exec babel-node",
12 |     "start": "cross-env NODE_ENV=production node index.js --exec babel-node"
13 |   },
14 |   "keywords": [],
15 |   "author": "kaiqiangren",
16 |   "license": "MIT",
17 |   "dependencies": {
18 |     "consola": "^2.12.2",
19 |     "koa": "^2.12.0",
20 |     "koa-bodyparser": "^4.3.0",
21 |     "koa-json": "^2.0.2",
22 |     "koa-onerror": "^4.1.0",
23 |     "koa-router": "^9.0.1",
24 |     "socket.io": "^2.3.0"
25 |   },
26 |   "devDependencies": {
27 |     "babel-cli": "^6.26.0",
28 |     "babel-preset-es2015": "^6.24.1",
29 |     "cross-env": "^7.0.2",
30 |     "nodemon": "^2.0.4"
31 |   }
32 | }
33 | ```
34 | 
35 | ## 二、服务端代码
36 | 
37 | ```js
38 | import Koa from 'koa'
39 | import bodyParser from 'koa-bodyparser'
40 | import json from 'koa-json'
41 | import onerror from 'koa-onerror'
42 | import consola from 'consola'
43 | import ioSocket from 'socket.io'
44 | import http from 'http'
45 | 
46 | const app = new Koa()
47 | app.keys = ['keys', 'keyskeys']
48 | app.proxy = true
49 | app.use(bodyParser())
50 | app.use(json())
51 | 
52 | // 创建server
53 | const server = http.Server(app.callback());
54 | const io = ioSocket(server);
55 | 
56 | io.on('connection', (socket) => {
57 |   socket.send('连接成功!')
58 | 
59 | });
60 | 
61 | onerror(app)
62 | 
63 | server.listen(8000, () => {
64 |   consola.ready({
65 |     message: `Server listening on localhost:8000`,
66 |     badge: true
67 |   })
68 | })
69 | ```
70 | 
71 | 
72 | ## 三、客户端代码
73 | 
74 | ```js
75 | import io from 'socket.io-client'
76 | 
77 | const socket = io('ws://localhost:8000')
78 | socket.on('connection', client => {
79 |    console.log(client)
80 | })
81 | socket.on('message', async (message) => {
82 |    console.log(message)
83 | })
84 | ```
85 | 


--------------------------------------------------------------------------------
/src/views/home/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <top-nav></top-nav>
 4 |     <div class="home-container"
 5 |          @touchstart="handleTouchStart"
 6 |          @touchend="handleTouchEnd"
 7 |     >
 8 |       <transition-group
 9 |         :name="transitionName"
10 |         :duration="500"
11 |         tag="div"
12 |         type="transition"
13 |         :appear="true"
14 |       >
15 |         <keep-alive v-if="route.meta.keepAlive">
16 |           <router-view  key="home-router-alive"/>
17 |         </keep-alive>
18 |         <router-view v-else key="home-router-key"/>
19 |       </transition-group>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import TopNav from '@/components/nav/topNav'
26 | import { transitionName } from '@/mixin/routeTransition'
27 | import { useRouter, useRoute } from "vue-router"
28 | 
29 | export default {
30 |   name: 'Home',
31 |   components: {
32 |     TopNav
33 |   },
34 |   setup () {
35 |     // 组件内路由获取方式
36 |     const router = useRouter()
37 |     router.beforeEach((to, from, next) => {
38 |       if (to.meta.index < from.meta.index) {
39 |         transitionName.value = 'left'
40 |       } else if (to.meta.index > from.meta.index){
41 |         transitionName.value = 'right'
42 |       } else {
43 |         transitionName.value = ''
44 |       }
45 |       next()
46 |     })
47 | 
48 |     const route = useRoute()
49 |     console.log(route.meta.keepAlive)
50 |     let touchStartX = 0
51 |     let touchEndX = 0
52 |     const handleTouchStart = (e) => {
53 |       touchStartX = e.changedTouches[0].clientX
54 |     }
55 |     const handleTouchEnd = (e) => {
56 |       touchEndX = e.changedTouches[0].clientX
57 |       if(touchStartX > touchEndX && touchStartX - touchEndX > 50) {
58 |         // console.log(route)
59 |         // console.log(route.getRoutes())
60 |         // console.log(route.currentRoute)
61 |       }
62 |     }
63 |     return {
64 |       route,
65 |       transitionName,
66 |       handleTouchStart,
67 |       handleTouchEnd
68 |     }
69 |   }
70 | }
71 | </script>
72 | 
73 | <style scoped>
74 |   .home-container {
75 |     margin-top: 90px;
76 |     margin-bottom: 50px;
77 |   }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/doc/README.md:
--------------------------------------------------------------------------------
 1 | # WebRTC相关文档
 2 | 
 3 | ## 一、浏览器支持检测
 4 | ```js
 5 | //判断浏览器是否支持这些 API
 6 | if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
 7 |   console.log("enumerateDevices() not supported.")
 8 | }
 9 | ```
10 | 
11 | ## 二、检测硬件设备列表
12 | ```js
13 | navigator.mediaDevices.enumerateDevices().then(list => {
14 |   console.log(list)
15 | })
16 | ```
17 | 
18 | ## 三、获取摄像头、音频
19 | ```js
20 | // video标签元素
21 | const view = document.getElementById('view')
22 | let promise = navigator.mediaDevices.getUserMedia({
23 |     video: true, // 是否抓取视频
24 |     audio:true //是否抓取音频
25 | });
26 | promise.then((stream) => {
27 |   // 使用video标签播放视频流，注意video必须设置autoplay，否则需要手动调用play方法
28 |   view.srcObject = stream;
29 | })
30 | ```
31 | 
32 | ## 四、录制视频流
33 | ```js
34 | // var mediaRecorder = new MediaRecorder(stream[, options]);
35 | /*
36 | stream，通过 getUserMedia 获取的本地视频流或通过 RTCPeerConnection 获取的远程视频流。
37 | options，可选项，指定视频格式、编解码器、码率等相关信息，如 mimeType: 'video/webm;codecs=vp8'。
38 | MediaRecorder 对象还有一个特别重要的事件，即 ondataavailable 事件。
39 | 当 MediaRecoder 捕获到数据时就会触发该事件。通过它，我们才能将音视频数据录制下来。
40 | */
41 | ```
42 | 
43 | ## 五、抓取桌面
44 | ```js
45 | // view 为video元素容器
46 | navigator.mediaDevices.getDisplayMedia({
47 |   video: true, // 是否抓取视频
48 |   audio:true //是否抓取音频
49 | }).then(stream => {
50 |   view.srcObject = stream;
51 | })
52 | ```
53 | 
54 | ## 六、WebRTC核心api
55 | ```js
56 | var pcConfig = null;
57 | var pc = new RTCPeerConnection(pcConfig);
58 | 
59 | //呼叫方创建 Offer
60 | pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
61 | 
62 | function setLocalAndSendMessage(sessionDescription) { 
63 |   pc.setLocalDescription(sessionDescription); 
64 |   sendMessage(sessionDescription); 
65 | }
66 | 
67 | // 被呼叫方收到 Offer
68 | socket.on('message', function(message) { 
69 |  if (message.type === 'offer') { 
70 |    pc.setRemoteDescription(new RTCSessionDescription(message)); 
71 |    doAnswer(); 
72 |  }
73 | })
74 | 
75 | // 被呼叫方创建 Answer
76 | function doAnswer() { 
77 |   pc.createAnswer().then( setLocalAndSendMessage, onCreateSessionDescriptionError ); 
78 | }
79 | 
80 | // 呼叫方收到 Answer
81 | socket.on('message', function(message) { 
82 |  if (message.type === 'answer') { 
83 |    pc.setRemoteDescription(new RTCSessionDescription(message));
84 |  }
85 | })
86 | ```
87 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | 
 3 | interface RoutesType {
 4 |   path: string;
 5 |   name: string;
 6 |   component: () => {};
 7 |   meta?: {
 8 |     index?: number;
 9 |     keepAlive?: boolean;
10 |   };
11 |   children?: RoutesType[];
12 | }
13 | 
14 | const routes: RoutesType[] = [
15 |   {
16 |     path: '/',
17 |     name: 'Home',
18 |     component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue'),
19 |     children: [
20 |       {
21 |         path: '',
22 |         name: 'Recommend',
23 |         component: () => import(/* webpackChunkName: "recommend" */ '../views/home/recommend/recommend.vue'),
24 |         meta: {
25 |           index: 1,
26 |           keepAlive:false
27 |         }
28 |       },
29 |       {
30 |         path: 'attention/:id',
31 |         name: 'Attention',
32 |         component: () => import(/* webpackChunkName: "attention" */ '../views/home/attention/attention.vue'),
33 |         meta: {
34 |           index: 0,
35 |           keepAlive:false
36 |         }
37 |       },
38 |       {
39 |         path: 'hotList',
40 |         name: 'HotList',
41 |         component: () => import(/* webpackChunkName: "hostList" */ '../views/home/hotList/hotList.vue'),
42 |         meta: {
43 |           index: 2,
44 |           keepAlive:false
45 |         }
46 |       },
47 |       {
48 |         path: 'pneumonia',
49 |         name: 'Pneumonia',
50 |         component: () => import(/* webpackChunkName: "pneumonia" */ '../views/home/pneumonia/pneumonia.vue'),
51 |         meta: {
52 |           index: 4,
53 |           keepAlive:false
54 |         }
55 |       }
56 |     ]
57 |   },
58 |   {
59 |     path: '/vip',
60 |     name: 'Vip',
61 |     component: () => import(/* webpackChunkName: "vip" */ '../views/vip/vip.vue'),
62 |   },
63 |   {
64 |     path: '/self',
65 |     name: 'Self',
66 |     component: () => import(/* webpackChunkName: "self" */ '../views/self/self.vue'),
67 |   },
68 |   {
69 |     path: '/notify',
70 |     name: 'Notify',
71 |     component: () => import(/* webpackChunkName: "notify" */ '../views/notify/notify.vue'),
72 |   }
73 | ]
74 | 
75 | const router = createRouter({
76 |   // createWebHistory 第一个参数为以前路由的base
77 |   history: createWebHistory(process.env.BASE_URL),
78 |   routes
79 | })
80 | 
81 | export default router
82 | 


--------------------------------------------------------------------------------
/src/components/card/card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card-container">
 3 |     <div class="card-header">
 4 |       {{title}}
 5 |     </div>
 6 |     <div class="card-body">
 7 |       <div class="card-body-left">
 8 |         <div class="body-title">科大讯飞 <span><icon name="dui"></icon>已认证的官方账号</span></div>
 9 |         <div class="body-content">{{content}}</div>
10 |       </div>
11 |       <img class="body-right-image" :src="iconUrl">
12 |     </div>
13 |     <div class="card-footer">
14 |       <span>5赞同 &#8226; 1评论</span>
15 |       <span class="card-footer-right">&#8226;&#8226;&#8226;</span>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import Icon from "../icon/icon";
22 | export default {
23 |   name: 'card',
24 |   components: {Icon},
25 |   props: {
26 |     title: {
27 |       type: String,
28 |       default: '标题'
29 |     },
30 |     content: {
31 |       type: String,
32 |       default: '01.如果你是博士，中国超过了14亿人口...'
33 |     },
34 |     iconUrl: {
35 |       type: String,
36 |       default: require('../../assets/img/logo.jpeg')
37 |     }
38 |   },
39 |   setup() {
40 |     return {}
41 |   }
42 | }
43 | </script>
44 | 
45 | <style scoped lang="scss">
46 |   @import "../../assets/style/mixin";
47 |   .card-container {
48 |     height: 140px;
49 |     background: #fff;
50 |     box-shadow: 0 1px 0.8vw rgba(26, 26, 26, 0.1);
51 |     margin: 8px 0;
52 |     box-sizing: border-box;
53 |     padding: 10px;
54 |     .card-header {
55 |       height: 30px;
56 |       line-height: 30px;
57 |       font-size: 16px;
58 |       font-weight: bold;
59 |     }
60 |     .card-body {
61 |       display: grid;
62 |       grid-template-columns: 1fr 80px;
63 |       .card-body-left {
64 |         margin-right: 8px;
65 |       }
66 |       .body-title {
67 |         font-size: 14px;
68 |         & > span {
69 |           color: #8590a6;
70 |           font-size: 12px;
71 |         }
72 |       }
73 |       .body-content {
74 |         font-size: 14px;
75 |         padding: 4px 0;
76 |         @include text-overflow(2);
77 |         line-height: 24px;
78 |         height: 48px;
79 |       }
80 |       .body-right-image {
81 |         width: 100%;
82 |         height: 100%;
83 |       }
84 |     }
85 |     .card-footer {
86 |       color: #8590a6;
87 |       font-size: 12px;
88 |       margin-top: 5px;
89 |       display: grid;
90 |       grid-template-columns: 1fr 1fr;
91 |       justify-content: space-between;
92 |       .card-footer-right {
93 |         text-align: right;
94 |       }
95 |     }
96 |   }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/nav/bottomNav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bottom-nav">
  3 |     <div
  4 |       v-for="(item, index) in navList"
  5 |       :key="index"
  6 |       @click="handleClickNav(item, index)"
  7 |        class="bottom-nav-item"
  8 |       :class="{ active: navActive === index || item.active}"
  9 |     >
 10 |       <icon v-if="navActive !== index" :name="item.icon"></icon>
 11 |       <icon v-if="navActive === index" :name="item.activeIcon"></icon>
 12 |       <div v-if="item.name">{{item.name}}</div>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import { ref } from 'vue'
 19 | import Icon from "../icon/icon"
 20 | import router from '@/router/index'
 21 | export default {
 22 |   name: 'bottomNav',
 23 |   components: {
 24 |     Icon
 25 |   },
 26 |   setup() {
 27 |     const navActive = ref(0)
 28 |     const navList = ref([
 29 |       {
 30 |         id: 1,
 31 |         name: '首页',
 32 |         path: '/',
 33 |         icon: 'home',
 34 |         activeIcon: 'shouye'
 35 |       },
 36 |       {
 37 |         id: 2,
 38 |         name: '会员',
 39 |         path: '/vip',
 40 |         icon: 'huangguan1',
 41 |         activeIcon: 'huangguan2'
 42 |       },
 43 |       {
 44 |         id: 3,
 45 |         name: '',
 46 |         path: '',
 47 |         icon: 'jiahao',
 48 |         activeIcon: 'jiahao',
 49 |         active:true
 50 |       },
 51 |       {
 52 |         id: 4,
 53 |         name: '消息',
 54 |         path: '/notify',
 55 |         icon: 'bell',
 56 |         activeIcon: 'tongzhi'
 57 |       },
 58 |       {
 59 |         id: 5,
 60 |         name: '我的',
 61 |         path: '/self',
 62 |         icon: 'user',
 63 |         activeIcon: 'yonghu'
 64 |       }
 65 |     ])
 66 | 
 67 |     const handleClickNav = (item, index) => {
 68 |       if (item.path) {
 69 |         navActive.value = index
 70 |         router.push({
 71 |           path: item.path
 72 |         })
 73 |       }
 74 |     }
 75 | 
 76 |     return {
 77 |       navList,
 78 |       navActive,
 79 |       handleClickNav
 80 |     }
 81 |   }
 82 | }
 83 | </script>
 84 | 
 85 | <style scoped lang="scss">
 86 |   .bottom-nav {
 87 |     position: fixed;
 88 |     bottom: 0;
 89 |     left: 0;
 90 |     width: 100%;
 91 |     height: 40px;
 92 |     display: grid;
 93 |     grid-template-columns: repeat(5,1fr);
 94 |     align-items: center;
 95 |     text-align: center;
 96 |     background: #fff;
 97 |     .bottom-nav-item {
 98 |       font-size: 12px;
 99 |       color: #1a1a1a;
100 |     }
101 |     .active {
102 |       color: #0084ff;
103 |     }
104 |   }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/views/home/recommend/recommend.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="recommend-container">
  3 |     <drop-refresh
  4 |       ref="dropRef"
  5 |       @refresh="handleRefresh"
  6 |       @infinite="handleInfinite"
  7 |     >
  8 |       <card
  9 |         v-for="(item,index) in cardData"
 10 |         :key="index"
 11 |         :title="item.title"
 12 |         :content="item.content"
 13 |       >
 14 | 
 15 |       </card>
 16 |     </drop-refresh>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import Card from "@/components/card/card";
 22 | import { reactive, ref } from 'vue'
 23 | import DropRefresh from "../../../components/refresh/drop-refresh";
 24 | export default {
 25 |   components: {
 26 |     DropRefresh,
 27 |     Card
 28 |   },
 29 |   setup() {
 30 |     // 创建模版引用
 31 |     const dropRef = ref(null)
 32 |     const cardData= reactive([
 33 |       {
 34 |         title: '你的学历超过了多少人?',
 35 |         content: '01.01.如果你是博士，中国超过了14亿人口01.如果你是博士，中国超过了14亿人口01.如果你是博士，中国超过了14亿人口',
 36 |         logoUrl: '',
 37 |         logoContext:'',
 38 |         imgUrl: '',
 39 |         isAuth: false // 是否认证
 40 |       },
 41 |       {
 42 |         title: '学习Vue3.0?',
 43 |         content: '快别更新了，学不动了！',
 44 |         logoUrl: '',
 45 |         logoContext:'',
 46 |         imgUrl: '',
 47 |         isAuth: false // 是否认证
 48 |       },
 49 |       {
 50 |         title: '学习Vue3.0?',
 51 |         content: '学不动了，就回家喂猪！',
 52 |         logoUrl: '',
 53 |         logoContext:'',
 54 |         imgUrl: '',
 55 |         isAuth: false // 是否认证
 56 |       },
 57 |       {
 58 |         title: '学习Vue3.0?',
 59 |         content: '学不动了，就回家喂猪！',
 60 |         logoUrl: '',
 61 |         logoContext:'',
 62 |         imgUrl: '',
 63 |         isAuth: false // 是否认证
 64 |       }
 65 |     ])
 66 |     // 处理数据刷新
 67 |     const handleRefresh = () => {
 68 |       setTimeout(() => {
 69 |         dropRef.value.refreshComplete()
 70 |         cardData.push({
 71 |           title: '学习Vue3.0?'+ new Date().getTime(),
 72 |           content: '学不动了，就回家喂猪！',
 73 |           logoUrl: '',
 74 |           logoContext:'',
 75 |           imgUrl: '',
 76 |           isAuth: false // 是否认证
 77 |         })
 78 |       },1000)
 79 |     }
 80 |     const handleInfinite = () => {
 81 |       setTimeout(() => {
 82 |         dropRef.value.infiniteComplete()
 83 |       },1000)
 84 |     }
 85 |     return {
 86 |       dropRef,
 87 |       cardData,
 88 |       handleRefresh,
 89 |       handleInfinite
 90 |     }
 91 |   }
 92 | }
 93 | </script>
 94 | 
 95 | <style scoped>
 96 |   .recommend-container {
 97 |     padding-top: 2px;
 98 |   }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "id": "1784116",
  3 |   "name": "zhihu",
  4 |   "font_family": "iconfont",
  5 |   "css_prefix_text": "",
  6 |   "description": "知乎demo项目",
  7 |   "glyphs": [
  8 |     {
  9 |       "icon_id": "1001157",
 10 |       "name": "下拉",
 11 |       "font_class": "iconxlsx",
 12 |       "unicode": "e629",
 13 |       "unicode_decimal": 58921
 14 |     },
 15 |     {
 16 |       "icon_id": "1486824",
 17 |       "name": "加载",
 18 |       "font_class": "jiazai",
 19 |       "unicode": "e62b",
 20 |       "unicode_decimal": 58923
 21 |     },
 22 |     {
 23 |       "icon_id": "1725607",
 24 |       "name": "对",
 25 |       "font_class": "dui",
 26 |       "unicode": "e613",
 27 |       "unicode_decimal": 58899
 28 |     },
 29 |     {
 30 |       "icon_id": "166640",
 31 |       "name": "首页",
 32 |       "font_class": "shouye",
 33 |       "unicode": "e637",
 34 |       "unicode_decimal": 58935
 35 |     },
 36 |     {
 37 |       "icon_id": "902044",
 38 |       "name": "用户",
 39 |       "font_class": "yonghu",
 40 |       "unicode": "e634",
 41 |       "unicode_decimal": 58932
 42 |     },
 43 |     {
 44 |       "icon_id": "1506397",
 45 |       "name": "通知",
 46 |       "font_class": "tongzhi",
 47 |       "unicode": "e61e",
 48 |       "unicode_decimal": 58910
 49 |     },
 50 |     {
 51 |       "icon_id": "4294111",
 52 |       "name": "皇冠",
 53 |       "font_class": "huangguan1",
 54 |       "unicode": "e798",
 55 |       "unicode_decimal": 59288
 56 |     },
 57 |     {
 58 |       "icon_id": "9626878",
 59 |       "name": "皇冠",
 60 |       "font_class": "huangguan2",
 61 |       "unicode": "e870",
 62 |       "unicode_decimal": 59504
 63 |     },
 64 |     {
 65 |       "icon_id": "788018",
 66 |       "name": "加号",
 67 |       "font_class": "jiahao",
 68 |       "unicode": "e640",
 69 |       "unicode_decimal": 58944
 70 |     },
 71 |     {
 72 |       "icon_id": "1637081",
 73 |       "name": "皇冠",
 74 |       "font_class": "huangguan",
 75 |       "unicode": "e603",
 76 |       "unicode_decimal": 58883
 77 |     },
 78 |     {
 79 |       "icon_id": "4766293",
 80 |       "name": "user",
 81 |       "font_class": "user",
 82 |       "unicode": "e7ae",
 83 |       "unicode_decimal": 59310
 84 |     },
 85 |     {
 86 |       "icon_id": "4766680",
 87 |       "name": "bell",
 88 |       "font_class": "bell",
 89 |       "unicode": "e7c4",
 90 |       "unicode_decimal": 59332
 91 |     },
 92 |     {
 93 |       "icon_id": "4766685",
 94 |       "name": "home",
 95 |       "font_class": "home",
 96 |       "unicode": "e7c6",
 97 |       "unicode_decimal": 59334
 98 |     },
 99 |     {
100 |       "icon_id": "4766856",
101 |       "name": "carry out",
102 |       "font_class": "carryout",
103 |       "unicode": "e7d3",
104 |       "unicode_decimal": 59347
105 |     },
106 |     {
107 |       "icon_id": "6486534",
108 |       "name": "放大镜",
109 |       "font_class": "fangdajing",
110 |       "unicode": "e60c",
111 |       "unicode_decimal": 58892
112 |     },
113 |     {
114 |       "icon_id": "14095303",
115 |       "name": "直播",
116 |       "font_class": "zhibo",
117 |       "unicode": "e78b",
118 |       "unicode_decimal": 59275
119 |     }
120 |   ]
121 | }
122 | 


--------------------------------------------------------------------------------
/src/components/nav/topNav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="top-nav">
  3 |     <div class="top-nav-top">
  4 |       <div class="nav-top-left">
  5 |         <icon name="zhibo" class="top-icon" :hasInfo="true"></icon>
  6 |       </div>
  7 |       <div class="nav-top-middle">
  8 |         <div class="nav-top-search">
  9 |           <icon name="fangdajing" class="top-icon"></icon>
 10 |           <input class="search-input" />
 11 |         </div>
 12 |       </div>
 13 |       <div class="nav-top-right">
 14 |         <icon name="carryout"  class="top-icon"></icon>
 15 |       </div>
 16 |     </div>
 17 |     <div>
 18 |       <top-nav-item
 19 |         v-for="(item,index) in navList"
 20 |         :type="item.type"
 21 |         :key="index"
 22 |         :active="defaultActive === index"
 23 |         @click="handleSelectNav(index, item)"
 24 |       >
 25 |         {{item.name}}
 26 |       </top-nav-item>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import { ref } from 'vue'
 33 | // 路由的使用，通过useRouter获取app所provide的路由
 34 | import { useRouter } from 'vue-router'
 35 | import Icon from "@/components/icon/icon";
 36 | import TopNavItem from "./topNavItem";
 37 | export default {
 38 |   name: 'topNav',
 39 |   components: {
 40 |     TopNavItem,
 41 |     Icon
 42 |   },
 43 |   setup() {
 44 |     const defaultActive = ref(1)
 45 |     const navList = ref([
 46 |       {
 47 |         name: '关注',
 48 |         path: '/attention/123',
 49 |         type: 2
 50 |       },
 51 |       {
 52 |         name: '推荐',
 53 |         path: '/',
 54 |         type: 1
 55 |       },
 56 |       {
 57 |         name: '热榜',
 58 |         path: '/hotList',
 59 |         type: 1
 60 |       },
 61 |       {
 62 |         name: '抗击肺炎',
 63 |         path: '/pneumonia',
 64 |         type: 1
 65 |       }
 66 |     ])
 67 |     const router = useRouter()
 68 |     const handleSelectNav = (index, item) => {
 69 |       defaultActive.value = index
 70 |       router.push({
 71 |         path: item.path
 72 |       })
 73 |     }
 74 |     return {
 75 |       defaultActive,
 76 |       navList,
 77 |       handleSelectNav
 78 |     }
 79 |   }
 80 | }
 81 | </script>
 82 | 
 83 | <style scoped lang="scss">
 84 |   .top-nav {
 85 |     background: #fff;
 86 |     position: fixed;
 87 |     box-shadow: 0 1px 3px rgba(26,26,26,.1);
 88 |     font-size: 15px;
 89 |     z-index: 100;
 90 |     top: 0;
 91 |     left: 0;
 92 |     width: 100%;
 93 |     .top-nav-top {
 94 |       height: 50px;
 95 |       line-height: 50px;
 96 |       display: grid;
 97 |       grid-template-columns: 50px 1fr 50px;
 98 |       text-align: center;
 99 |       .nav-top-middle {
100 |         box-sizing: border-box;
101 |         padding: 9px 0;
102 |         text-align: left;
103 |         .nav-top-search {
104 |           background: #f6f6f6;
105 |           line-height: 30px;
106 |           padding: 2px 5px;
107 |           height: 30px;
108 |           & > span {
109 |             margin-right: 5px;
110 |           }
111 |           .search-input {
112 |             outline: none;
113 |             border: none;
114 |             background:#f6f6f6;
115 |           }
116 |         }
117 |       }
118 |     }
119 |     .top-icon {
120 |       font-size: 20px;
121 |     }
122 |   }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/refresh/drop-refresh.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="pull-container"
  4 |     @touchstart="handleTouchStart"
  5 |     @touchend="handleTouchEnd"
  6 |     @touchmove="handleTouchMove"
  7 |   >
  8 |     <transition name="top">
  9 |       <div class="pull-text" v-show="loading">
 10 |         {{props.refreshText}}<div class="rotate"><icon  name="jiazai"></icon></div>
 11 |       </div>
 12 |     </transition>
 13 |     <slot></slot>
 14 |     <div class="pull-text">
 15 |       <span  v-show="!loadingFooter">{{props.loadingBottomText}}</span>
 16 |       <div class="rotate"  v-show="loadingFooter"><icon  name="jiazai"></icon></div>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import { ref, onUnmounted, onMounted } from 'vue'
 23 | import Icon from "../icon/icon";
 24 | 
 25 | export default {
 26 |   name: 'DropRefresh',
 27 |   components: {Icon},
 28 |   props: {
 29 |     refreshText: {
 30 |       type: String,
 31 |       default: '努力加载中'
 32 |     },
 33 |     loadingBottomText: {
 34 |       type: String,
 35 |       default: '没有更多数据啦!'
 36 |     },
 37 |   },
 38 |   setup(props, { emit }) {
 39 |     // 顶部加载动画
 40 |     const loading = ref(false)
 41 |     // 底部加载动画
 42 |     const loadingFooter = ref(false)
 43 | 
 44 | 
 45 |     let scrollTop;
 46 |     let startY;
 47 |     const methods = {
 48 |       handleTouchStart: (e) => {
 49 |         scrollTop = document.documentElement.scrollTop
 50 |         startY = e.targetTouches[0].pageY
 51 |       },
 52 |       handleTouchEnd: () => {
 53 |         if (loading.value) {
 54 |           emit('refresh')
 55 |         }
 56 |       },
 57 |       handleTouchMove: (e) => {
 58 |         e.stopPropagation()
 59 |         const currentY = e.targetTouches[0].pageY
 60 |         const diff = Math.abs(startY - currentY)
 61 |         if (scrollTop === 0) {
 62 |           if (startY <= currentY && diff > 80) {
 63 |             loading.value = true
 64 |           }
 65 |         }
 66 |       },
 67 |       // 开始下拉刷新
 68 |       refreshStart: () => {
 69 |         loading.value = true
 70 |       },
 71 |       // 下拉刷新完成
 72 |       refreshComplete: () => {
 73 |         loading.value = false
 74 |       },
 75 |       // 滚动刷新开始
 76 |       infiniteStart: () => {
 77 |         loadingFooter.value = true
 78 |       },
 79 |       // 滚动刷新完成
 80 |       infiniteComplete: () => {
 81 |         loadingFooter.value = false
 82 |       }
 83 |     }
 84 | 
 85 |     onMounted(() => {
 86 |       document.body.onscroll = () => {
 87 |         // 距离底部的距离
 88 |         const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
 89 |         const bottomDistance = document.documentElement.offsetHeight - window.innerHeight - scrollTop
 90 |         if (bottomDistance <= 50) {
 91 |           loadingFooter.value = true
 92 |           emit('infinite')
 93 |         }
 94 |       }
 95 |     })
 96 |     onUnmounted(() => {
 97 |       document.body.onscroll = null
 98 |     })
 99 | 
100 |     return {
101 |       props,
102 |       loading,
103 |       loadingFooter,
104 |       ...methods
105 |     }
106 |   }
107 | }
108 | </script>
109 | 
110 | <style scoped lang="scss">
111 |   @keyframes loading {
112 |     0% {
113 |       transform: rotate(0deg);
114 |     }
115 |     100% {
116 |       transform: rotate(360deg);
117 |     }
118 |   }
119 |   .rotate {
120 |     display: inline-block;
121 |     vertical-align: top;
122 |     transform-origin: center;
123 |     width: 18px;
124 |     height: 18px;
125 |     animation:loading 1s infinite linear;
126 |   }
127 |   .pull-container {
128 |     padding: 5px 0;
129 |     .pull-text {
130 |       text-align: center;
131 |       height: 20px;
132 |       line-height: 20px;
133 |       font-size: 14px;
134 |       color: #000000;
135 |     }
136 | 
137 |   }
138 | </style>
139 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.css:
--------------------------------------------------------------------------------
 1 | @font-face {font-family: "iconfont";
 2 |   src: url('iconfont.eot?t=1588902381829'); /* IE9 */
 3 |   src: url('iconfont.eot?t=1588902381829#iefix') format('embedded-opentype'), /* IE6-IE8 */
 4 |   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAjcAAsAAAAAEKAAAAiPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFOgqQdI1GATYCJANECyQABCAFhG0HgUEbAw4zA8LGAaDEvIvsv0zg5F5YwUO0cqMRpPPkRTNp2VAmzTHBFhsMk8x3dwUHB924PzUscEzw8L+fu0+++baGSuLQRSyJSIiWITUqjZAsFEjiIe4sAH4eN+0lH02CjUDFlIlW6Z1PEmidVWAikmxONqfmE+ZK50Y4caXM0ZkAuI1Xaw6c/++75g/YqAh1JPf85vfBF1K4Qq40mlw628KWOGRXmHH1Jvkx871njqmQ23GeQ6jOkS/bfVF4hAOlMVqhYi4j+4CXAsOv6/MQgEt5rYle8+gsNhqpCCw7mLy9ih1oQGeUCWyPmZBUg7jBwJYb5X3g2vp98UsbBSAxFMiok/a+DTo/R09wJW7BsMA11wbcUoECWgMN4iex4w2UI7daqpu0VnMH1VXS31h+KL5MuCQpcg2Rl1BLh7v+xc0vnn0567OPIu8iqFb+iQcuEQoTgcRA4xBn4eETEGKDMAGqz4XPk3F8IA3ChQ8KIoIPvUIWCUcdJkgS6hAgKahDguSiDgNkCOrQIHmAcOBTgIjjswXCgs/DdXgg11GHD3ITdQQgzwARwtesDdgAJEaS6qA15DmoLZDagTUhsJGKVXHgPBat5SpKRlepSZLSkxIaU1FBcrlEouaEilSqknVxckov0UXSeiMVLFH47qXGJiddL29qMhIuFy2zB55PuzhDQ6MQ4Gjmpzr3Yxh/QNgHwLkXXdiL7iCAbg+TpLCPc2spRZ2zqa09wNp8qpNmXPMIx+J35OlNRktT9xkD29ixwPkwMPX5c+bFC1YUrV4v0+ILdO2Jj8837zawFc17d7cutdeTOIm0iQoC2LlFiKU4NmSNzys2VTA0Y037nW7g7ORVhAt6XxTfEmN4o3XP4YjyvOaUdh6MvQ7cuTjN3gsYP7e81FKlqSlVl7MVZdZpKqBYHWgXJsS0V+lq5Aq9spLCCURhqlbNVi1tirVZzogRfV7z9eeRvS9MTO0ed1BZ425SI+wNqGif0+0RLnEXnZcnq8snNkZ0KxuPdHlpl4OER4xpe6z3xSj6uTW70UA2B/SLskR4oUYFsvPanXefHudPPLsn3HlyjDv6+PZSAo1J4ScjQ4l6nLBxzjmdT0xnnkUUx8k+bXv2B5MtbgvixWcNzX/yAvCl9uRtNOLuvUSSuAaRgoevJzDSihMflahhHYEIR8NSAtvoLhooi4lvk3D7phLgACbl91eqpSQMqwlT8RqSIZw0Y2lqQHZtWCQhoKK5aSlt8YjYRqwRxDEszU5Ysjnctnyh17vwdYbcfSkI5y4S6j2Xg1G7J4G0vMnSpHGiGteUj2IszGgrm/tR6P0cMicgOF5qH6sda5fGuzjIRPsLzTmUHogE/w4fqBMUBF7b4Zre36cdGNByi/fj2MuBEOEZ/dur/HJspGXF8gvyWReWr1g/JFX5lS2TdXoDIXBR3NjCTji6MKN0dsCsBx+PTqHWW70XZskvRL1degr//9+HfD7Up5T7xD5JmyhKzKiiT/nbDhd+bUGkfXq9Vf+d8M2+0aosoYPyYSRm9chR54xnsidEOSN3mg8TRRib/XJw+SpgsenCtkm4oBG2Y9OALedfDlkW1fEEF97BBEJu9gD+P+KP4mTq6NBojczwkcY1V0FAfj5o0QjF0akDG3CEYda1i2pxRgYlZkUYvmGAyzSQs16aRRoyoXlbcwlG/75cmNilrp7/w/DU2bda+CAgjpby//Vh16EhKNeeW8pdXoHRvMCG+7kcBjgA8KQNGlQpaGDMuMffyKipm37bmmVWh4wde+yK9m1CwPTSZeGXmOn0maw5/mAV+S6pCp7jz3o1CrtffL/oQfGD9q/dtkOyif0lZTv9O0pTzCe+tYHp6JrQQoejMBT7yeRQ45MEYeKSoL9DbXL8BIUhDseQtViJzDbSJgtKnTRhwtTUJYxM5KpB0dBYyfyEmLeg09wJb5ktOsgBLpDBpq5tdmgTdPZouy7BofWZh01lAtU6daTM5tN8/+OP32t8NlmkWjdqYeZ+ZEP7P1nAJIe/cuGVcEaVLtg5S2ZgRNb6VXzrhuAN7e3R0pzQZPNJc0pIkWmTddb9WW8tNrd9qrPrerRZn7aZbbNnKaFhCH7bnSezDbXJ8sCS3Z3JLUw+pAWmrdte4jLjmzIBJnLN/UMU5qaHeaXFiiHSITHLD5m15ucx9BDI/ND9XkNDV9q8Qnz71as7kIIMHW2/Mh5N4bx0X0PDu8eOsqbtP+L8oYM8YsR9OI+vImwixIOtH1xnWm/35BC9wWwwZ32IyOm5zbRed1yC8RCQx/VyG8a8d/Lk+vXl5Q/WS9+wMoIDAP9lNR4VwM5pDHF2v5W43/6lARRoP6FmoCRj76hGsQAAaCf+NoD/Z7UIqYX9trFoqP25myjN/qPahrShB3hQHgAA4vAPz3rB4PDGdwJqNCN/U5D/CaW32fMd1/mL3ech9hhjWMEqMue4ujAJZFiK4leQjcn0PqqGqx4mmW2wK2ntoB2TgKtcgDNbT9prt1q+MHfgankPSCzKgMKm1qoLW4GBRzswsekALi0NpPbIOgOF0EqA5q4EEMTdAknIPVDEPVh14QswKPQPTGIIuMxjekqPepOJwnsZWUUJ/ANWUFRqc73Yyx+om2fZL1i2f8zFDsPYDeHpO0bMTcQoTz3VqkBlCnATL0PvCZZMM4ramVqXa9+rpJidoLC6FGZk1agugX/craCorq+XyM8/UDfPcsa+H/d/zMU+HsZuKGC9q7HQvkNZW556qtSmQNuaKcCN2tArEwRLcqAZRe1MhbHl2tN5qqjada+FfX8PAEJ+jo7EYDSZLVab3eF0uT1en59/9oZ89O3L+zBb9mV2K5s9FEPtg4cPRW3asZo+vsZeTGNRa/3U6CpTmRHD6ByZu2sF846vVcydoYAnwXL+UKsXlTpXstlGvW+on9MK') format('woff2'),
 5 |   url('iconfont.woff?t=1588902381829') format('woff'),
 6 |   url('iconfont.ttf?t=1588902381829') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 7 |   url('iconfont.svg?t=1588902381829#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family: "iconfont" !important;
12 |   font-size: 16px;
13 |   font-style: normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .iconxlsx:before {
19 |   content: "\e629";
20 | }
21 | 
22 | .jiazai:before {
23 |   content: "\e62b";
24 | }
25 | 
26 | .dui:before {
27 |   content: "\e613";
28 | }
29 | 
30 | .shouye:before {
31 |   content: "\e637";
32 | }
33 | 
34 | .yonghu:before {
35 |   content: "\e634";
36 | }
37 | 
38 | .tongzhi:before {
39 |   content: "\e61e";
40 | }
41 | 
42 | .huangguan1:before {
43 |   content: "\e798";
44 | }
45 | 
46 | .huangguan2:before {
47 |   content: "\e870";
48 | }
49 | 
50 | .jiahao:before {
51 |   content: "\e640";
52 | }
53 | 
54 | .huangguan:before {
55 |   content: "\e603";
56 | }
57 | 
58 | .user:before {
59 |   content: "\e7ae";
60 | }
61 | 
62 | .bell:before {
63 |   content: "\e7c4";
64 | }
65 | 
66 | .home:before {
67 |   content: "\e7c6";
68 | }
69 | 
70 | .carryout:before {
71 |   content: "\e7d3";
72 | }
73 | 
74 | .fangdajing:before {
75 |   content: "\e60c";
76 | }
77 | 
78 | .zhibo:before {
79 |   content: "\e78b";
80 | }
81 | 
82 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="iconfont" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="iconfont"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="iconxlsx" unicode="&#58921;" d="M845.631 284.029l-12.565 12.684c-2.533 2.558-5.987 3.995-9.586 3.995s-7.055-1.437-9.585-3.995l-280.297-282.537v805.854c0 7.594-6.118 13.58-13.66 13.58h-15.876c-7.661 0-13.661-6.065-13.661-13.58v-805.852l-280.296 282.535c-5.062 5.117-14.108 5.117-19.171 0l-12.566-12.684c-5.222-5.274-5.222-13.752 0-19.015l324.046-326.628c2.533-2.558 5.987-3.995 9.586-3.995s7.055 1.437 9.585 3.995l324.045 326.628c5.222 5.262 5.222 13.74-0 19.015z"  horiz-adv-x="1024" />
24 | 
25 |     
26 |     <glyph glyph-name="jiazai" unicode="&#58923;" d="M512.032002 658.894819a29.310168 29.310168 0 0 0-29.310168 29.246172V866.689832a29.310168 29.310168 0 0 0 58.620336 0v-178.548841A29.310168 29.310168 0 0 0 512.032002 658.894819zM512.032002-128a29.310168 29.310168 0 0 0-29.310168 29.310168v178.484845a29.310168 29.310168 0 1 0 58.620336 0v-178.548841A29.310168 29.310168 0 0 0 512.032002-128z m482.657834 482.657834h-178.484845a29.310168 29.310168 0 1 0 0 58.620336h178.548841a29.310168 29.310168 0 1 0 0-58.620336z m-786.830823 0H29.310172a29.310168 29.310168 0 0 0 0 58.620336h178.548841a29.310168 29.310168 0 0 0 0-58.620336z m519.263546 215.090557a29.182176 29.182176 0 0 0-20.734704 49.980876l126.264108 126.264108a29.310168 29.310168 0 1 0 41.405412-41.405412l-126.264108-126.264108a29.182176 29.182176 0 0 0-20.670708-8.575464zM170.741333 13.431161a29.182176 29.182176 0 0 0-20.734704 49.980876l126.264108 126.264108a29.246172 29.246172 0 1 0 41.405412-41.405412L191.412041 21.942629a29.182176 29.182176 0 0 0-20.670708-8.575464z m682.581338 0a29.182176 29.182176 0 0 0-20.670708 8.575464l-126.264108 126.264108a29.310168 29.310168 0 1 0 41.405412 41.405412l126.264108-126.264108a29.310168 29.310168 0 0 0-20.734704-49.91688zM297.005441 569.748391a29.182176 29.182176 0 0 0-20.670708 8.575464L150.006629 704.587963a29.310168 29.310168 0 1 0 41.405412 41.405412l126.264108-126.264108a29.310168 29.310168 0 0 0-20.734704-49.91688z"  horiz-adv-x="1024" />
27 | 
28 |     
29 |     <glyph glyph-name="dui" unicode="&#58899;" d="M510.8 766.8c-211.9 0-383.7-171.8-383.7-383.7 0-211.9 171.8-383.7 383.7-383.7 211.9 0 383.7 171.8 383.7 383.7 0 211.9-171.8 383.7-383.7 383.7z m153.3-250.2S494.8 221.8 491.9 219.1c-9.7-9.1-24.8-8.6-33.9 1.1l-109.6 101c-9.1 9.7-8.6 24.8 1.1 33.9 9.7 9.1 24.8 8.6 33.9-1.1l85.8-79.1 153.4 265.7c6.6 11.5 21.3 15.4 32.8 8.8 11.4-6.7 15.3-21.4 8.7-32.8z"  horiz-adv-x="1024" />
30 | 
31 |     
32 |     <glyph glyph-name="shouye" unicode="&#58935;" d="M960 343.104 512 791.104 64 343.104 201.984 343.104 201.984-23.104 412.992-23.104 412.992 239.232 621.888 239.232 621.888-23.104 830.72-23.104 830.72 343.104ZM884.288 708.288 667.84 708.288 667.84 707.2 884.288 490.688Z"  horiz-adv-x="1024" />
33 | 
34 |     
35 |     <glyph glyph-name="yonghu" unicode="&#58932;" d="M592.896 306.858667c96.938667 34.816 166.570667 131.072 166.570667 244.053333 0 142.677333-110.933333 258.048-247.466667 258.048-136.533333 0-247.466667-115.712-247.466667-258.048 0-112.981333 69.632-208.896 166.570667-244.053333-162.816-40.96-284.672-202.069333-284.672-383.658667L877.226667-76.8C877.226667 104.789333 755.712 265.898667 592.896 306.858667L592.896 306.858667zM592.896 306.858667"  horiz-adv-x="1024" />
36 | 
37 |     
38 |     <glyph glyph-name="tongzhi" unicode="&#58910;" d="M512 760.1c10.6 0 20.9-0.9 31.1-2.5 1.6 4 2.6 8.3 2.6 12.8 0 18.6-15.1 33.6-33.6 33.6-18.6 0-33.6-15.1-33.6-33.6 0-4.5 0.9-8.9 2.6-12.8 10 1.6 20.3 2.5 30.9 2.5zM512 99.2H397.3c-1-6.2-1.7-12.4-1.7-18.9 0-64.3 52.1-116.4 116.4-116.4 64.3 0 116.4 52.1 116.4 116.4 0 6.4-0.7 12.7-1.7 18.9H512zM804.1 207.1c-39.5 0-53.3 31.1-53.3 77.3 0 18.1-3.7 257.8-3.7 257.8 0 113.7-106 211.7-235.1 211.7s-235.1-98-235.1-211.7c0 0-3.7-239.6-3.7-257.8 0-46.2-13.8-77.3-53.3-77.3-37.8 0-57.1-17.3-57.1-49.4 0-27.2 25.7-49.4 57.1-49.4h584.2c31.4 0 57.1 22.2 57.1 49.4 0 32.1-19.3 49.4-57.1 49.4z"  horiz-adv-x="1024" />
39 | 
40 |     
41 |     <glyph glyph-name="huangguan1" unicode="&#59288;" d="M663.742703 401.457569L512.00614 729.171747 360.25525 401.457569 109.308326 592.29356l67.638358-553.465307h670.05035L914.69065 592.29356 663.742703 401.457569z m133.479794-305.102227H226.747827l-45.136922 369.173346 200.190014-152.214446 130.206244 281.198865 130.163265-281.198865 200.219691 152.214446-45.167622-369.173346zM286.436135 211.435104h451.12466v-57.552672H286.436135z"  horiz-adv-x="1024" />
42 | 
43 |     
44 |     <glyph glyph-name="huangguan2" unicode="&#59504;" d="M102.4-25.6h819.2v-102.4H102.4zM703.488 513.024L512 896 320.512 513.024 0 793.6l102.4-716.8h819.2l102.4 716.8-320.512-280.576z"  horiz-adv-x="1024" />
45 | 
46 |     
47 |     <glyph glyph-name="jiahao" unicode="&#58944;" d="M0 896l0-1024 1024 0L1024 896 0 896zM832 338.304 557.696 338.304 557.696 64 466.304 64 466.304 338.304 192 338.304 192 429.696l274.304 0L466.304 704l91.456 0 0-274.304L832 429.696 832 338.304z"  horiz-adv-x="1024" />
48 | 
49 |     
50 |     <glyph glyph-name="huangguan" unicode="&#58883;" d="M1012.88 464.08a31.696 31.696 0 0 1-32.248 5.208L712.368 361 570.6 606.736c53.904 20.64 92.352 72.768 92.352 133.832 0 79.064-64.352 143.384-143.432 143.384-79.064 0-143.4-64.32-143.4-143.384 0-63.656 41.728-117.688 99.232-136.36L334.648 360.384 42.616 469.568a31.44 31.44 0 0 1-31.784-5.76 31.544 31.544 0 0 1-10.064-30.704l114.856-512.44A31.52 31.52 0 0 1 146.416-104h731.168a31.56 31.56 0 0 1 30.8 24.664l114.848 512.44a31.592 31.592 0 0 1-10.352 30.976zM439.256 740.568c0 44.248 36 80.256 80.272 80.256 44.28 0 80.296-36 80.296-80.256 0-44.264-36.016-80.272-80.296-80.272-44.272 0-80.272 36.008-80.272 80.272zM852.312-40H171.688L75.12 390.44l262.464-98.336a31.496 31.496 0 0 1 38.392 13.672l147.752 255.944 147.68-256.032a31.704 31.704 0 0 1 39.152-13.504l237.936 96.472L852.312-40z"  horiz-adv-x="1024" />
51 | 
52 |     
53 |     <glyph glyph-name="user" unicode="&#59310;" d="M858.5 132.4c-18.9 44.8-46.1 85-80.6 119.5-34.5 34.5-74.7 61.6-119.5 80.6-0.4 0.2-0.8 0.3-1.2 0.5C719.5 378 760 451.3 760 534c0 137-111 248-248 248S264 671 264 534c0-82.7 40.5-156 102.8-201.1-0.4-0.2-0.8-0.3-1.2-0.5-44.8-18.9-85-46-119.5-80.6-34.5-34.5-61.6-74.7-80.6-119.5C146.9 88.5 137 42 136-5.8c-0.1-4.5 3.5-8.2 8-8.2h60c4.4 0 7.9 3.5 8 7.8 2 77.2 33 149.5 87.8 204.3 56.7 56.7 132 87.9 212.2 87.9s155.5-31.2 212.2-87.9C779 143.3 810 71 812-6.2c0.1-4.4 3.6-7.8 8-7.8h60c4.5 0 8.1 3.7 8 8.2-1 47.8-10.9 94.3-29.5 138.2zM512 362c-45.9 0-89.1 17.9-121.6 50.4S340 488.1 340 534c0 45.9 17.9 89.1 50.4 121.6S466.1 706 512 706s89.1-17.9 121.6-50.4S684 579.9 684 534c0-45.9-17.9-89.1-50.4-121.6S557.9 362 512 362z"  horiz-adv-x="1024" />
54 | 
55 |     
56 |     <glyph glyph-name="bell" unicode="&#59332;" d="M816 128h-24V468c0 141.1-104.3 257.7-240 277.1V784c0 22.1-17.9 40-40 40s-40-17.9-40-40v-38.9c-135.7-19.4-240-136-240-277.1v-340h-24c-17.7 0-32-14.3-32-32v-32c0-4.4 3.6-8 8-8h216c0-61.8 50.2-112 112-112s112 50.2 112 112h216c4.4 0 8 3.6 8 8v32c0 17.7-14.3 32-32 32zM512 8c-26.5 0-48 21.5-48 48h96c0-26.5-21.5-48-48-48zM304 128V468c0 55.6 21.6 107.8 60.9 147.1S456.4 676 512 676c55.6 0 107.8-21.6 147.1-60.9S720 523.6 720 468v-340H304z"  horiz-adv-x="1024" />
57 | 
58 |     
59 |     <glyph glyph-name="home" unicode="&#59334;" d="M946.5 391L560.1 777.2l-25.9 25.9c-12.3 12.2-32.1 12.2-44.4 0L77.5 391c-12.3-12.3-18.9-28.6-18.8-46 0.4-35.2 29.7-63.3 64.9-63.3h42.5V-44h691.8V281.7h43.4c17.1 0 33.2 6.7 45.3 18.8 12.1 12.1 18.7 28.2 18.7 45.3 0 17-6.7 33.1-18.8 45.2zM568 28H456V232h112v-204z m217.9 325.7V28H632V256c0 22.1-17.9 40-40 40H432c-22.1 0-40-17.9-40-40v-228H238.1V353.7h-96l370 369.7 23.1-23.1L882 353.7h-96.1z"  horiz-adv-x="1024" />
60 | 
61 |     
62 |     <glyph glyph-name="carryout" unicode="&#59347;" d="M880 712H712v64c0 4.4-3.6 8-8 8h-56c-4.4 0-8-3.6-8-8v-64H384v64c0 4.4-3.6 8-8 8h-56c-4.4 0-8-3.6-8-8v-64H144c-17.7 0-32-14.3-32-32v-664c0-17.7 14.3-32 32-32h736c17.7 0 32 14.3 32 32V680c0 17.7-14.3 32-32 32z m-40-656H184V640h128v-48c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v48h256v-48c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v48h128v-584zM688 476h-55.2c-5.1 0-10-2.5-13-6.6L468.9 261.6l-64.7 89c-3 4.1-7.8 6.6-13 6.6H336c-6.5 0-10.3-7.4-6.5-12.7l126.4-174c6.4-8.8 19.6-8.8 26 0l212.6 292.7c3.8 5.4 0 12.8-6.5 12.8z"  horiz-adv-x="1024" />
63 | 
64 |     
65 |     <glyph glyph-name="fangdajing" unicode="&#58892;" d="M781.7 168l-13.6-13.6-102 102c54.7 61.1 88.3 141.6 88.3 230.1C754.4 677.3 599.7 832 408.9 832S63.4 677.3 63.4 486.5 218.1 141 408.9 141c88.5 0 168.9 33.6 230.1 88.3l102-102-13.6-13.6 177.1-177.1 54.3 54.3L781.7 168z m-680 318.6c0 169.3 137.8 307.1 307.1 307.1s307.1-137.8 307.1-307.1-137.8-307.1-307.1-307.1c-169.3-0.1-307.1 137.7-307.1 307.1z"  horiz-adv-x="1024" />
66 | 
67 |     
68 |     <glyph glyph-name="zhibo" unicode="&#59275;" d="M656.32 736l60.48-36.608-85.152-154.656H832c35.36 0 64-28.704 64-64.096v-416.544A64.032 64.032 0 0 0 832 0H192c-35.36 0-64 28.704-64 64.096V480.64c0 35.392 28.64 64.096 64 64.096h200.32L307.2 699.392 367.68 736l104.736-190.272-1.664-0.992h82.464l-1.6 0.96L656.32 736zM832 480.64H192v-416.544h640V480.64z m-136.704-97.12l45.248-45.312-181.024-181.248-135.744 135.968-90.528-90.656L288 247.584l135.776 135.936 135.776-135.904 135.744 135.904z"  horiz-adv-x="1024" />
69 | 
70 |     
71 | 
72 | 
73 |   </font>
74 | </defs></svg>
75 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.js:
--------------------------------------------------------------------------------
1 | !function(i){var t,h='<svg><symbol id="iconxlsx" viewBox="0 0 1024 1024"><path d="M845.631078 611.970876l-12.565177-12.68388c-2.532683-2.558265-5.987365-3.994987-9.586332-3.994987s-7.054673 1.436722-9.585309 3.994987L533.597389 881.823883l0-805.853631c0-7.593955-6.118348-13.580297-13.660114-13.580297l-15.875572 0c-7.661494 0-13.661138 6.065136-13.661138 13.580297l0 805.851585-280.295847-282.534841c-5.062296-5.116531-14.108323-5.116531-19.170618 0l-12.5662 12.68388c-5.221932 5.27412-5.221932 13.752212 0 19.015076l324.046281 326.628082c2.532683 2.558265 5.987365 3.994987 9.586332 3.994987s7.054673-1.436722 9.585309-3.994987l324.045257-326.628082C850.85301 625.724111 850.85301 617.246019 845.631078 611.970876z"  ></path></symbol><symbol id="jiazai" viewBox="0 0 1024 1024"><path d="M512.032002 237.105181a29.310168 29.310168 0 0 1-29.310168-29.246172V29.310168a29.310168 29.310168 0 0 1 58.620336 0v178.548841A29.310168 29.310168 0 0 1 512.032002 237.105181zM512.032002 1024a29.310168 29.310168 0 0 1-29.310168-29.310168v-178.484845a29.310168 29.310168 0 1 1 58.620336 0v178.548841A29.310168 29.310168 0 0 1 512.032002 1024z m482.657834-482.657834h-178.484845a29.310168 29.310168 0 1 1 0-58.620336h178.548841a29.310168 29.310168 0 1 1 0 58.620336z m-786.830823 0H29.310172a29.310168 29.310168 0 0 1 0-58.620336h178.548841a29.310168 29.310168 0 0 1 0 58.620336z m519.263546-215.090557a29.182176 29.182176 0 0 1-20.734704-49.980876l126.264108-126.264108a29.310168 29.310168 0 1 1 41.405412 41.405412l-126.264108 126.264108a29.182176 29.182176 0 0 1-20.670708 8.575464zM170.741333 882.568839a29.182176 29.182176 0 0 1-20.734704-49.980876l126.264108-126.264108a29.246172 29.246172 0 1 1 41.405412 41.405412L191.412041 874.057371a29.182176 29.182176 0 0 1-20.670708 8.575464z m682.581338 0a29.182176 29.182176 0 0 1-20.670708-8.575464l-126.264108-126.264108a29.310168 29.310168 0 1 1 41.405412-41.405412l126.264108 126.264108a29.310168 29.310168 0 0 1-20.734704 49.91688zM297.005441 326.251609a29.182176 29.182176 0 0 1-20.670708-8.575464L150.006629 191.412037a29.310168 29.310168 0 1 1 41.405412-41.405412l126.264108 126.264108a29.310168 29.310168 0 0 1-20.734704 49.91688z"  ></path></symbol><symbol id="dui" viewBox="0 0 1024 1024"><path d="M510.8 129.2c-211.9 0-383.7 171.8-383.7 383.7 0 211.9 171.8 383.7 383.7 383.7 211.9 0 383.7-171.8 383.7-383.7 0-211.9-171.8-383.7-383.7-383.7z m153.3 250.2S494.8 674.2 491.9 676.9c-9.7 9.1-24.8 8.6-33.9-1.1l-109.6-101c-9.1-9.7-8.6-24.8 1.1-33.9 9.7-9.1 24.8-8.6 33.9 1.1l85.8 79.1 153.4-265.7c6.6-11.5 21.3-15.4 32.8-8.8 11.4 6.7 15.3 21.4 8.7 32.8z"  ></path></symbol><symbol id="shouye" viewBox="0 0 1024 1024"><path d="M960 552.896 512 104.896 64 552.896 201.984 552.896 201.984 919.104 412.992 919.104 412.992 656.768 621.888 656.768 621.888 919.104 830.72 919.104 830.72 552.896Z"  ></path><path d="M884.288 187.712 667.84 187.712 667.84 188.8 884.288 405.312Z"  ></path></symbol><symbol id="yonghu" viewBox="0 0 1024 1024"><path d="M592.896 589.141333c96.938667-34.816 166.570667-131.072 166.570667-244.053333 0-142.677333-110.933333-258.048-247.466667-258.048-136.533333 0-247.466667 115.712-247.466667 258.048 0 112.981333 69.632 208.896 166.570667 244.053333-162.816 40.96-284.672 202.069333-284.672 383.658667L877.226667 972.8C877.226667 791.210667 755.712 630.101333 592.896 589.141333L592.896 589.141333zM592.896 589.141333"  ></path></symbol><symbol id="tongzhi" viewBox="0 0 1024 1024"><path d="M512 135.9c10.6 0 20.9 0.9 31.1 2.5 1.6-4 2.6-8.3 2.6-12.8 0-18.6-15.1-33.6-33.6-33.6-18.6 0-33.6 15.1-33.6 33.6 0 4.5 0.9 8.9 2.6 12.8 10-1.6 20.3-2.5 30.9-2.5zM512 796.8H397.3c-1 6.2-1.7 12.4-1.7 18.9 0 64.3 52.1 116.4 116.4 116.4 64.3 0 116.4-52.1 116.4-116.4 0-6.4-0.7-12.7-1.7-18.9H512z"  ></path><path d="M804.1 688.9c-39.5 0-53.3-31.1-53.3-77.3 0-18.1-3.7-257.8-3.7-257.8 0-113.7-106-211.7-235.1-211.7s-235.1 98-235.1 211.7c0 0-3.7 239.6-3.7 257.8 0 46.2-13.8 77.3-53.3 77.3-37.8 0-57.1 17.3-57.1 49.4 0 27.2 25.7 49.4 57.1 49.4h584.2c31.4 0 57.1-22.2 57.1-49.4 0-32.1-19.3-49.4-57.1-49.4z"  ></path></symbol><symbol id="huangguan1" viewBox="0 0 1024 1024"><path d="M663.742703 494.542431L512.00614 166.828253 360.25525 494.542431 109.308326 303.70644l67.638358 553.465307h670.05035L914.69065 303.70644 663.742703 494.542431z m133.479794 305.102227H226.747827l-45.136922-369.173346 200.190014 152.214446 130.206244-281.198865 130.163265 281.198865 200.219691-152.214446-45.167622 369.173346z"  ></path><path d="M286.436135 684.564896h451.12466v57.552672H286.436135z"  ></path></symbol><symbol id="huangguan2" viewBox="0 0 1024 1024"><path d="M102.4 921.6h819.2v102.4H102.4zM703.488 382.976L512 0 320.512 382.976 0 102.4l102.4 716.8h819.2l102.4-716.8-320.512 280.576z"  ></path></symbol><symbol id="jiahao" viewBox="0 0 1024 1024"><path d="M0 0l0 1024 1024 0L1024 0 0 0zM832 557.696 557.696 557.696 557.696 832 466.304 832 466.304 557.696 192 557.696 192 466.304l274.304 0L466.304 192l91.456 0 0 274.304L832 466.304 832 557.696z"  ></path></symbol><symbol id="huangguan" viewBox="0 0 1024 1024"><path d="M1012.88 431.92a31.696 31.696 0 0 0-32.248-5.208L712.368 535 570.6 289.264c53.904-20.64 92.352-72.768 92.352-133.832 0-79.064-64.352-143.384-143.432-143.384-79.064 0-143.4 64.32-143.4 143.384 0 63.656 41.728 117.688 99.232 136.36L334.648 535.616 42.616 426.432a31.44 31.44 0 0 0-31.784 5.76 31.544 31.544 0 0 0-10.064 30.704l114.856 512.44A31.52 31.52 0 0 0 146.416 1000h731.168a31.56 31.56 0 0 0 30.8-24.664l114.848-512.44a31.592 31.592 0 0 0-10.352-30.976zM439.256 155.432c0-44.248 36-80.256 80.272-80.256 44.28 0 80.296 36 80.296 80.256 0 44.264-36.016 80.272-80.296 80.272-44.272 0-80.272-36.008-80.272-80.272zM852.312 936H171.688L75.12 505.56l262.464 98.336a31.496 31.496 0 0 0 38.392-13.672l147.752-255.944 147.68 256.032a31.704 31.704 0 0 0 39.152 13.504l237.936-96.472L852.312 936z" fill="#888888" ></path></symbol><symbol id="user" viewBox="0 0 1024 1024"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"  ></path></symbol><symbol id="bell" viewBox="0 0 1024 1024"><path d="M816 768h-24V428c0-141.1-104.3-257.7-240-277.1V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.9c-135.7 19.4-240 136-240 277.1v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48zM304 768V428c0-55.6 21.6-107.8 60.9-147.1S456.4 220 512 220c55.6 0 107.8 21.6 147.1 60.9S720 372.4 720 428v340H304z"  ></path></symbol><symbol id="home" viewBox="0 0 1024 1024"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"  ></path></symbol><symbol id="carryout" viewBox="0 0 1024 1024"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32z m-40 656H184V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v584z"  ></path><path d="M688 420h-55.2c-5.1 0-10 2.5-13 6.6L468.9 634.4l-64.7-89c-3-4.1-7.8-6.6-13-6.6H336c-6.5 0-10.3 7.4-6.5 12.7l126.4 174c6.4 8.8 19.6 8.8 26 0l212.6-292.7c3.8-5.4 0-12.8-6.5-12.8z"  ></path></symbol><symbol id="fangdajing" viewBox="0 0 1024 1024"><path d="M781.7 728l-13.6 13.6-102-102c54.7-61.1 88.3-141.6 88.3-230.1C754.4 218.7 599.7 64 408.9 64S63.4 218.7 63.4 409.5 218.1 755 408.9 755c88.5 0 168.9-33.6 230.1-88.3l102 102-13.6 13.6 177.1 177.1 54.3-54.3L781.7 728z m-680-318.6c0-169.3 137.8-307.1 307.1-307.1s307.1 137.8 307.1 307.1-137.8 307.1-307.1 307.1c-169.3 0.1-307.1-137.7-307.1-307.1z" fill="#060001" ></path></symbol><symbol id="zhibo" viewBox="0 0 1024 1024"><path d="M656.32 160l60.48 36.608-85.152 154.656H832c35.36 0 64 28.704 64 64.096v416.544A64.032 64.032 0 0 1 832 896H192c-35.36 0-64-28.704-64-64.096V415.36c0-35.392 28.64-64.096 64-64.096h200.32L307.2 196.608 367.68 160l104.736 190.272-1.664 0.992h82.464l-1.6-0.96L656.32 160zM832 415.36H192v416.544h640V415.36z m-136.704 97.12l45.248 45.312-181.024 181.248-135.744-135.968-90.528 90.656L288 648.416l135.776-135.936 135.776 135.904 135.744-135.904z"  ></path></symbol></svg>',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(l=t,c=i.document,o=!1,(h=function(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}a()})(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,a())});function a(){o||(o=!0,l())}var l,c,o,h}(function(){var t,e,a,l,c,o;(t=document.createElement("div")).innerHTML=h,h=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",a=e,(l=document.body).firstChild?(c=a,(o=l.firstChild).parentNode.insertBefore(c,o)):l.appendChild(a))})}(window);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue3.0
  2 | 
  3 | > Vue3.0是2020年4月刚刚发布了beta版本的全新Vue版本
  4 | ## 项目地址:
  5 | https://github.com/kaiqiangren/vue-next-ts-preview
  6 | 
  7 | ## 一、Vue3.0与Vue2.0的对比:
  8 | ### 优点：
  9 | 1. 将Vue内部的绝大部分api对外暴露，使Vue具备开发大型项目的能力，例如compile编译api等
 10 | 2. webpack的treeshaking支持度友好
 11 | 3. 使用Proxy进行响应式变量定义，性能提高2-3倍
 12 | 4. 可在Vue2.0中单独使用composition-api插件，或者直接用它开发插件
 13 | 5. 对typescript支持更加友好
 14 | 6. 面向未来：对于尤雨溪最近创新的vite开发服务器（舍弃webpack、底层为Koa框架的高性能开发服务器）,直接使用的Vue3.0语法
 15 | ### 缺点:
 16 | 1. 只支持IE11及以上
 17 | 2. 对于习惯了Vue2.0开发模式的开发者来说，增加了心智负担，对开发者代码组织能力有考验
 18 | > 同时也是能力提升的机会吧，特别喜欢Vue作者的设计初心:让开发者随着框架一起成长!
 19 | 
 20 | 
 21 | ## 二、Vue3.0正确的打开方式
 22 | ### 1、项目搭建
 23 | 1. 需要安装vue-cli4代最新脚手架，可以通过执行如下npm 命令安装/更新脚手架版本
 24 | ```npm
 25 | npm i @vue/cli -g
 26 | ```
 27 | 2. 然后在创建项目后，执行vue add vue-next向项目添加Vue3.0
 28 | ```npm
 29 | vue create [projectName]
 30 | cd [projectName]
 31 | vue add vue-next
 32 | ```
 33 | 3. 如下例子为使用typescript + Vue3.0 开发的项目依赖，也可以直接使用
 34 | ```json
 35 | {
 36 |   "name": "vue-next-ts-preview",
 37 |   "version": "0.1.0",
 38 |   "private": true,
 39 |   "scripts": {
 40 |     "build": "vue-cli-service build",
 41 |     "lint": "vue-cli-service lint",
 42 |     "dev": "vue-cli-service serve"
 43 |   },
 44 |   "dependencies": {
 45 |     "core-js": "^3.6.4",
 46 |      "normalize.css": "^8.0.1",
 47 |      "vue": "^3.0.0-beta.14",
 48 |      "vue-router": "^4.0.0-alpha.12",
 49 |      "vuex": "^4.0.0-beta.2"
 50 |   },
 51 |   "devDependencies": {
 52 |     "@typescript-eslint/eslint-plugin": "^2.26.0",
 53 |     "@typescript-eslint/parser": "^2.26.0",
 54 |     "@vue/cli-plugin-babel": "~4.3.0",
 55 |     "@vue/cli-plugin-eslint": "~4.3.0",
 56 |     "@vue/cli-plugin-router": "~4.3.0",
 57 |     "@vue/cli-plugin-typescript": "~4.3.0",
 58 |     "@vue/cli-plugin-vuex": "~4.3.0",
 59 |     "@vue/cli-service": "~4.3.0",
 60 |     "@vue/compiler-sfc": "^3.0.0-beta.1",
 61 |     "@vue/eslint-config-typescript": "^5.0.2",
 62 |     "eslint": "^6.7.2",
 63 |     "eslint-plugin-vue": "^7.0.0-alpha.0",
 64 |     "node-sass": "^4.12.0",
 65 |     "sass-loader": "^8.0.2",
 66 |     "typescript": "~3.8.3",
 67 |     "vue-cli-plugin-vue-next": "~0.1.2"
 68 |   }
 69 | }
 70 | ```
 71 | 
 72 | ### 2、使用文档
 73 | 1. 项目入口main.ts
 74 | ```typescript
 75 | import { createApp } from 'vue';
 76 | import App from './App.vue'
 77 | import router from './router'
 78 | 
 79 | const app = createApp(App)
 80 | app.use(router)
 81 | app.mount('#app')
 82 | ```
 83 | 
 84 | ### 3、语法相关
 85 | 1. 响应式变量声明
 86 | ```js
 87 | import { ref, reactive } from 'vue'
 88 | // 方式一： 可传入任意类型的值，改变值的时候必须使用其value属性,例 refData.value = 2
 89 | const refData = ref(0)
 90 | 
 91 | // 方式二： 只能传入引用类型的值
 92 | const data = reactive({
 93 |   tableData: [
 94 |     {
 95 |       name: '姓名1'
 96 |     }
 97 |   ]
 98 | })
 99 | 
100 | // 使用响应式变量前，必须在Vue文件的setup函数中 执行/return 出去
101 | setup (props, context){
102 |   return {
103 |     refData,
104 |     data
105 |   }
106 | }
107 | ```
108 | 
109 | 2. computed
110 | ```js
111 | import { watch, watchEffect, computed } from 'vue'
112 | 
113 | // 1、创建只读的计算属性
114 | const computedCount = computed(() => count.value + 1)
115 | 
116 | 
117 | // 2、创建可读可写的计算属性
118 | const computedCount2 = computed({
119 |       get: () => writeCount.value + 2,
120 |       set: (val) => {
121 |         return writeCount.value =  val + 2
122 |       }
123 | })
124 | 
125 | // 可以直接修改computed的值，在Vue2.x中无法修改
126 | // computedCount2 = 123 
127 | ```
128 | 
129 | 3. watch & watchEffect
130 | ```js
131 | import { ref, watch, watchEffect } from 'vue'
132 | const count = ref(0)
133 | // watchEffect会自动收集响应式依赖
134 | watchEffect(() => console.log(count.value))
135 | 
136 | // 监听指定基础类型数据
137 | watch(count, (now, prev) => {
138 |       console.log(now, prev, 'count')
139 | })
140 | 
141 | const data = reactive({
142 |   tableData: [
143 |     {
144 |       name: '姓名1'
145 |     }
146 |   ]
147 | })
148 | // 监听reactive创建的响应式变量,可以直接监听对象，必须使用内联函数
149 | watch(() => data.tableData, (now, prev) => {
150 |    console.log(now, prev, 'tableData')
151 | })
152 | 
153 | // 监听多个参数- composition-api中无法使用
154 | let position = reactive({
155 |     x: 1,
156 |     y: 1
157 |   })
158 |  watch([
159 |         () => position.x,
160 |         () => position.y,
161 |       ], ([x1, y1], [nx1, ny1]) => {
162 |         console.log('x1,y1', x1, y1)
163 |         console.log('nx1,ny1', nx1, ny1)
164 |       },
165 |       {
166 |         flush: 'post', // 默认, 在视图渲染后触发
167 |         // flush: 'pre', // 在视图渲染之前触发
168 |         // flush: 'sync' // 无阻塞，异步触发
169 |       })
170 | ```
171 | 
172 | 4. provide & inject
173 | ```js
174 | import { reactive, provide , inject} from 'vue'
175 | 
176 | const data = reactive({
177 |   tableData: [
178 |     {
179 |       name: '姓名1'
180 |     }
181 |   ]
182 | })
183 | // 根级/父级组件
184 | // provide 这里如果提供的是响应式变量，inject也会触发响应
185 | provide('provideName', 'provideData')
186 | provide('provideReactive', data.tableData)
187 | 
188 | 
189 | // 子级/孙级组件
190 | setup () {
191 |   const provideData = inject('provideName')
192 |   const provideReactive = inject('provideReactive')
193 |   return {
194 |     provideData,
195 |     provideReactive
196 |   }
197 | }
198 | ```
199 | 
200 | 5. 生命周期
201 | ```html
202 | Vue3.0生命周期         说明                                                   对应的Vue2.0生命周期
203 | setup               | 初始化数据阶段的生命周期，介于beforeCreate与created之间  相当于beforeCreate、created的合并
204 | onBeforeMount       | 组件挂载前                                          beforeMount
205 | onMounted           | 实例挂载完毕                                         mounted
206 | onBeforeUpdate      | 响应式数据变化前                                      beforeUpdate
207 | onUpdated           | 响应式数据变化完成                                    updated
208 | onBeforeUnmount     | 实例销毁前                                           beforeDestroy
209 | onUnmounted         | 实例已销毁                                           destroyed
210 | onErrorCaptured     | 错误数据捕捉                                            --
211 | ```
212 | 
213 | 
214 | 6. 路由
215 | ```js
216 | // 组件内部路由拦截器的使用方式
217 | import { useRouter, useRoute } from "vue-router"
218 | 
219 | setup() {
220 |   // 组件内路由
221 |   const router = useRouter()
222 |   router.beforeEach((to, from, next) => {
223 |     next()
224 |   })
225 |   // 组件内路由信息
226 |   const route = useRoute()
227 | }
228 | 
229 | ```
230 | 
231 | 7.vuex
232 | > 创建Store
233 | ```js
234 | import { createStore } from 'vuex'
235 | 
236 | const store = createStore({
237 |   state: {
238 |     userInfo: {
239 |       name:'renkq'
240 |     }
241 |   },
242 |   mutations: {
243 |     getUserInfo (state, name) {
244 |       state.userInfo.name = name
245 |     }
246 |   },
247 |   actions: {
248 |     asyncGetUserInfo ({ commit }) {
249 |       setTimeout(() => {
250 |         commit("getUserInfo", +new Date() + 'action')
251 |       },2000)
252 |     }
253 |   },
254 |   getters: {
255 |     userInfoGetter (state) {
256 |       return state.userInfo.name
257 |     }
258 |   }
259 | })
260 | 
261 | export default store
262 | 
263 | ```
264 | > 组件内使用store
265 | ```js
266 | import {
267 |   useStore,
268 |   // mapState,
269 |   // mapMutations,
270 |   // mapActions,
271 |   // mapGetters
272 | } from 'vuex'
273 | 
274 | export default {
275 |   name: 'self',
276 |   setup() {
277 |     const store = useStore()
278 |     console.log(store, 'store')
279 |     console.log(store.getters, 'getters')
280 |     const state = store.state
281 |     const getters = store.getters
282 |     // console.log(mapState(store.state),'mapState')
283 |     // console.log(mapMutations(store._mutations),'mapMutations')
284 |     // console.log(mapActions(store._actions),'mapActions')
285 |     // console.log(mapGetters(store.getters),'mapGetters')
286 |     const methods = {
287 |       // 处理commit
288 |       handleMutation: () => {
289 |         store.commit('getUserInfo', +new Date)
290 |       },
291 |       // 处理dispatch
292 |       handleAction: () => {
293 |         store.dispatch('asyncGetUserInfo')
294 |       }
295 |     }
296 |     return {
297 |       state,
298 |       getters,
299 |       ...methods
300 |     }
301 |   }
302 | }
303 | ```
304 | 
305 | 8. v-model
306 | 
307 | ```js
308 | // 自定义v-model组件时，需要使用update:modelValue事件进行触发
309 | setup(props, { emit }){
310 |    const handleClick = () => {
311 |       emit('update:modelValue', params)
312 |    }
313 |    return {
314 |       handleClick
315 |   }
316 | }
317 | ```
318 | 
319 | 9. directive
320 | > 定义指令
321 | ```js
322 | import { ObjectDirective } from 'vue'
323 | // 使用ObjectDirective声明指令类型即可，因为源码内部指定了默认类型说明
324 | export const customDirective: ObjectDirective = {
325 |   beforeMount(el, binding, vnode, prevVnode) {
326 |     console.log(el, binding, vnode, prevVnode)
327 |   },
328 |   mounted() { console.log('mounted') },
329 |   beforeUpdate() { console.log('beforeUpdate') },
330 |   updated() { console.log('updated') },
331 |   beforeUnmount() { console.log('beforeUnmount') },
332 |   unmounted() { console.log('unmounted') }
333 | }
334 | 
335 | 
336 | ```
337 | > 全局注册指令
338 | ```js
339 | const app = createApp(App)
340 | app.use(router)
341 | app.use(store)
342 | app.directive('custom', customDirective)
343 | app.mount('#app')
344 | 
345 | ```
346 | 
347 | > 组件内使用指令
348 | ```js
349 | import { customDirective } from '../../directive/directive'
350 | export default {
351 |   setup() {
352 |     return {}
353 |   },
354 |   directives: {
355 |     custom: customDirective
356 |   }
357 | }
358 | ```
359 | 
360 | 10. nextTick
361 | ```js
362 | import { nextTick, onBeforeMount } from 'vue'
363 | 
364 | {
365 |   setup () {
366 |     
367 |     onBeforeMount(() => {
368 |       nextTick(() => {
369 |         
370 |       })
371 |     })
372 |     
373 |   }
374 | }
375 | ```
376 | 
377 | 11. 定义组件defineAsyncComponent & defineComponent
378 | 
379 | > 同步组件与异步组件的区别:
380 | > 同步组件：在组件加载时自动加载；
381 | > 异步组件：在渲染时加载;
382 | 
383 | ```js
384 | // 一、定义同步组件
385 | const syncComponent = defineComponent({
386 |   setup () {
387 |     return () => `我是同步组件`
388 |   }
389 | })
390 | 
391 | 
392 | // 二、定义异步组件
393 | // 方式1 
394 | const asyncComponent = defineAsyncComponent({
395 |   loader: () => import("./asyncComponents.vue"),
396 |   loadingComponent: loadingComponent,
397 |   errorComponent: loadingComponent,
398 |   delay: 2000,
399 |   timeout: 3000
400 | });
401 | // 方式2
402 | const asyncComponent = defineAsyncComponent(() => import('./syncComponents.vue'));
403 | ```
404 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/demo.css:
--------------------------------------------------------------------------------
  1 | /* Logo 字体 */
  2 | @font-face {
  3 |   font-family: "iconfont logo";
  4 |   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  5 |   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
  6 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
  7 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
  8 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
  9 | }
 10 | 
 11 | .logo {
 12 |   font-family: "iconfont logo";
 13 |   font-size: 160px;
 14 |   font-style: normal;
 15 |   -webkit-font-smoothing: antialiased;
 16 |   -moz-osx-font-smoothing: grayscale;
 17 | }
 18 | 
 19 | /* tabs */
 20 | .nav-tabs {
 21 |   position: relative;
 22 | }
 23 | 
 24 | .nav-tabs .nav-more {
 25 |   position: absolute;
 26 |   right: 0;
 27 |   bottom: 0;
 28 |   height: 42px;
 29 |   line-height: 42px;
 30 |   color: #666;
 31 | }
 32 | 
 33 | #tabs {
 34 |   border-bottom: 1px solid #eee;
 35 | }
 36 | 
 37 | #tabs li {
 38 |   cursor: pointer;
 39 |   width: 100px;
 40 |   height: 40px;
 41 |   line-height: 40px;
 42 |   text-align: center;
 43 |   font-size: 16px;
 44 |   border-bottom: 2px solid transparent;
 45 |   position: relative;
 46 |   z-index: 1;
 47 |   margin-bottom: -1px;
 48 |   color: #666;
 49 | }
 50 | 
 51 | 
 52 | #tabs .active {
 53 |   border-bottom-color: #f00;
 54 |   color: #222;
 55 | }
 56 | 
 57 | .tab-container .content {
 58 |   display: none;
 59 | }
 60 | 
 61 | /* 页面布局 */
 62 | .main {
 63 |   padding: 30px 100px;
 64 |   width: 960px;
 65 |   margin: 0 auto;
 66 | }
 67 | 
 68 | .main .logo {
 69 |   color: #333;
 70 |   text-align: left;
 71 |   margin-bottom: 30px;
 72 |   line-height: 1;
 73 |   height: 110px;
 74 |   margin-top: -50px;
 75 |   overflow: hidden;
 76 |   *zoom: 1;
 77 | }
 78 | 
 79 | .main .logo a {
 80 |   font-size: 160px;
 81 |   color: #333;
 82 | }
 83 | 
 84 | .helps {
 85 |   margin-top: 40px;
 86 | }
 87 | 
 88 | .helps pre {
 89 |   padding: 20px;
 90 |   margin: 10px 0;
 91 |   border: solid 1px #e7e1cd;
 92 |   background-color: #fffdef;
 93 |   overflow: auto;
 94 | }
 95 | 
 96 | .icon_lists {
 97 |   width: 100% !important;
 98 |   overflow: hidden;
 99 |   *zoom: 1;
100 | }
101 | 
102 | .icon_lists li {
103 |   width: 100px;
104 |   margin-bottom: 10px;
105 |   margin-right: 20px;
106 |   text-align: center;
107 |   list-style: none !important;
108 |   cursor: default;
109 | }
110 | 
111 | .icon_lists li .code-name {
112 |   line-height: 1.2;
113 | }
114 | 
115 | .icon_lists .icon {
116 |   display: block;
117 |   height: 100px;
118 |   line-height: 100px;
119 |   font-size: 42px;
120 |   margin: 10px auto;
121 |   color: #333;
122 |   -webkit-transition: font-size 0.25s linear, width 0.25s linear;
123 |   -moz-transition: font-size 0.25s linear, width 0.25s linear;
124 |   transition: font-size 0.25s linear, width 0.25s linear;
125 | }
126 | 
127 | .icon_lists .icon:hover {
128 |   font-size: 100px;
129 | }
130 | 
131 | .icon_lists .svg-icon {
132 |   /* 通过设置 font-size 来改变图标大小 */
133 |   width: 1em;
134 |   /* 图标和文字相邻时，垂直对齐 */
135 |   vertical-align: -0.15em;
136 |   /* 通过设置 color 来改变 SVG 的颜色/fill */
137 |   fill: currentColor;
138 |   /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
139 |       normalize.css 中也包含这行 */
140 |   overflow: hidden;
141 | }
142 | 
143 | .icon_lists li .name,
144 | .icon_lists li .code-name {
145 |   color: #666;
146 | }
147 | 
148 | /* markdown 样式 */
149 | .markdown {
150 |   color: #666;
151 |   font-size: 14px;
152 |   line-height: 1.8;
153 | }
154 | 
155 | .highlight {
156 |   line-height: 1.5;
157 | }
158 | 
159 | .markdown img {
160 |   vertical-align: middle;
161 |   max-width: 100%;
162 | }
163 | 
164 | .markdown h1 {
165 |   color: #404040;
166 |   font-weight: 500;
167 |   line-height: 40px;
168 |   margin-bottom: 24px;
169 | }
170 | 
171 | .markdown h2,
172 | .markdown h3,
173 | .markdown h4,
174 | .markdown h5,
175 | .markdown h6 {
176 |   color: #404040;
177 |   margin: 1.6em 0 0.6em 0;
178 |   font-weight: 500;
179 |   clear: both;
180 | }
181 | 
182 | .markdown h1 {
183 |   font-size: 28px;
184 | }
185 | 
186 | .markdown h2 {
187 |   font-size: 22px;
188 | }
189 | 
190 | .markdown h3 {
191 |   font-size: 16px;
192 | }
193 | 
194 | .markdown h4 {
195 |   font-size: 14px;
196 | }
197 | 
198 | .markdown h5 {
199 |   font-size: 12px;
200 | }
201 | 
202 | .markdown h6 {
203 |   font-size: 12px;
204 | }
205 | 
206 | .markdown hr {
207 |   height: 1px;
208 |   border: 0;
209 |   background: #e9e9e9;
210 |   margin: 16px 0;
211 |   clear: both;
212 | }
213 | 
214 | .markdown p {
215 |   margin: 1em 0;
216 | }
217 | 
218 | .markdown>p,
219 | .markdown>blockquote,
220 | .markdown>.highlight,
221 | .markdown>ol,
222 | .markdown>ul {
223 |   width: 80%;
224 | }
225 | 
226 | .markdown ul>li {
227 |   list-style: circle;
228 | }
229 | 
230 | .markdown>ul li,
231 | .markdown blockquote ul>li {
232 |   margin-left: 20px;
233 |   padding-left: 4px;
234 | }
235 | 
236 | .markdown>ul li p,
237 | .markdown>ol li p {
238 |   margin: 0.6em 0;
239 | }
240 | 
241 | .markdown ol>li {
242 |   list-style: decimal;
243 | }
244 | 
245 | .markdown>ol li,
246 | .markdown blockquote ol>li {
247 |   margin-left: 20px;
248 |   padding-left: 4px;
249 | }
250 | 
251 | .markdown code {
252 |   margin: 0 3px;
253 |   padding: 0 5px;
254 |   background: #eee;
255 |   border-radius: 3px;
256 | }
257 | 
258 | .markdown strong,
259 | .markdown b {
260 |   font-weight: 600;
261 | }
262 | 
263 | .markdown>table {
264 |   border-collapse: collapse;
265 |   border-spacing: 0px;
266 |   empty-cells: show;
267 |   border: 1px solid #e9e9e9;
268 |   width: 95%;
269 |   margin-bottom: 24px;
270 | }
271 | 
272 | .markdown>table th {
273 |   white-space: nowrap;
274 |   color: #333;
275 |   font-weight: 600;
276 | }
277 | 
278 | .markdown>table th,
279 | .markdown>table td {
280 |   border: 1px solid #e9e9e9;
281 |   padding: 8px 16px;
282 |   text-align: left;
283 | }
284 | 
285 | .markdown>table th {
286 |   background: #F7F7F7;
287 | }
288 | 
289 | .markdown blockquote {
290 |   font-size: 90%;
291 |   color: #999;
292 |   border-left: 4px solid #e9e9e9;
293 |   padding-left: 0.8em;
294 |   margin: 1em 0;
295 | }
296 | 
297 | .markdown blockquote p {
298 |   margin: 0;
299 | }
300 | 
301 | .markdown .anchor {
302 |   opacity: 0;
303 |   transition: opacity 0.3s ease;
304 |   margin-left: 8px;
305 | }
306 | 
307 | .markdown .waiting {
308 |   color: #ccc;
309 | }
310 | 
311 | .markdown h1:hover .anchor,
312 | .markdown h2:hover .anchor,
313 | .markdown h3:hover .anchor,
314 | .markdown h4:hover .anchor,
315 | .markdown h5:hover .anchor,
316 | .markdown h6:hover .anchor {
317 |   opacity: 1;
318 |   display: inline-block;
319 | }
320 | 
321 | .markdown>br,
322 | .markdown>p>br {
323 |   clear: both;
324 | }
325 | 
326 | 
327 | .hljs {
328 |   display: block;
329 |   background: white;
330 |   padding: 0.5em;
331 |   color: #333333;
332 |   overflow-x: auto;
333 | }
334 | 
335 | .hljs-comment,
336 | .hljs-meta {
337 |   color: #969896;
338 | }
339 | 
340 | .hljs-string,
341 | .hljs-variable,
342 | .hljs-template-variable,
343 | .hljs-strong,
344 | .hljs-emphasis,
345 | .hljs-quote {
346 |   color: #df5000;
347 | }
348 | 
349 | .hljs-keyword,
350 | .hljs-selector-tag,
351 | .hljs-type {
352 |   color: #a71d5d;
353 | }
354 | 
355 | .hljs-literal,
356 | .hljs-symbol,
357 | .hljs-bullet,
358 | .hljs-attribute {
359 |   color: #0086b3;
360 | }
361 | 
362 | .hljs-section,
363 | .hljs-name {
364 |   color: #63a35c;
365 | }
366 | 
367 | .hljs-tag {
368 |   color: #333333;
369 | }
370 | 
371 | .hljs-title,
372 | .hljs-attr,
373 | .hljs-selector-id,
374 | .hljs-selector-class,
375 | .hljs-selector-attr,
376 | .hljs-selector-pseudo {
377 |   color: #795da3;
378 | }
379 | 
380 | .hljs-addition {
381 |   color: #55a532;
382 |   background-color: #eaffea;
383 | }
384 | 
385 | .hljs-deletion {
386 |   color: #bd2c00;
387 |   background-color: #ffecec;
388 | }
389 | 
390 | .hljs-link {
391 |   text-decoration: underline;
392 | }
393 | 
394 | /* 代码高亮 */
395 | /* PrismJS 1.15.0
396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
397 | /**
398 |  * prism.js default theme for JavaScript, CSS and HTML
399 |  * Based on dabblet (http://dabblet.com)
400 |  * @author Lea Verou
401 |  */
402 | code[class*="language-"],
403 | pre[class*="language-"] {
404 |   color: black;
405 |   background: none;
406 |   text-shadow: 0 1px white;
407 |   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
408 |   text-align: left;
409 |   white-space: pre;
410 |   word-spacing: normal;
411 |   word-break: normal;
412 |   word-wrap: normal;
413 |   line-height: 1.5;
414 | 
415 |   -moz-tab-size: 4;
416 |   -o-tab-size: 4;
417 |   tab-size: 4;
418 | 
419 |   -webkit-hyphens: none;
420 |   -moz-hyphens: none;
421 |   -ms-hyphens: none;
422 |   hyphens: none;
423 | }
424 | 
425 | pre[class*="language-"]::-moz-selection,
426 | pre[class*="language-"] ::-moz-selection,
427 | code[class*="language-"]::-moz-selection,
428 | code[class*="language-"] ::-moz-selection {
429 |   text-shadow: none;
430 |   background: #b3d4fc;
431 | }
432 | 
433 | pre[class*="language-"]::selection,
434 | pre[class*="language-"] ::selection,
435 | code[class*="language-"]::selection,
436 | code[class*="language-"] ::selection {
437 |   text-shadow: none;
438 |   background: #b3d4fc;
439 | }
440 | 
441 | @media print {
442 | 
443 |   code[class*="language-"],
444 |   pre[class*="language-"] {
445 |     text-shadow: none;
446 |   }
447 | }
448 | 
449 | /* Code blocks */
450 | pre[class*="language-"] {
451 |   padding: 1em;
452 |   margin: .5em 0;
453 |   overflow: auto;
454 | }
455 | 
456 | :not(pre)>code[class*="language-"],
457 | pre[class*="language-"] {
458 |   background: #f5f2f0;
459 | }
460 | 
461 | /* Inline code */
462 | :not(pre)>code[class*="language-"] {
463 |   padding: .1em;
464 |   border-radius: .3em;
465 |   white-space: normal;
466 | }
467 | 
468 | .token.comment,
469 | .token.prolog,
470 | .token.doctype,
471 | .token.cdata {
472 |   color: slategray;
473 | }
474 | 
475 | .token.punctuation {
476 |   color: #999;
477 | }
478 | 
479 | .namespace {
480 |   opacity: .7;
481 | }
482 | 
483 | .token.property,
484 | .token.tag,
485 | .token.boolean,
486 | .token.number,
487 | .token.constant,
488 | .token.symbol,
489 | .token.deleted {
490 |   color: #905;
491 | }
492 | 
493 | .token.selector,
494 | .token.attr-name,
495 | .token.string,
496 | .token.char,
497 | .token.builtin,
498 | .token.inserted {
499 |   color: #690;
500 | }
501 | 
502 | .token.operator,
503 | .token.entity,
504 | .token.url,
505 | .language-css .token.string,
506 | .style .token.string {
507 |   color: #9a6e3a;
508 |   background: hsla(0, 0%, 100%, .5);
509 | }
510 | 
511 | .token.atrule,
512 | .token.attr-value,
513 | .token.keyword {
514 |   color: #07a;
515 | }
516 | 
517 | .token.function,
518 | .token.class-name {
519 |   color: #DD4A68;
520 | }
521 | 
522 | .token.regex,
523 | .token.important,
524 | .token.variable {
525 |   color: #e90;
526 | }
527 | 
528 | .token.important,
529 | .token.bold {
530 |   font-weight: bold;
531 | }
532 | 
533 | .token.italic {
534 |   font-style: italic;
535 | }
536 | 
537 | .token.entity {
538 |   cursor: help;
539 | }
540 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/demo_index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8"/>
  5 |   <title>IconFont Demo</title>
  6 |   <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  7 |   <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  8 |   <link rel="stylesheet" href="demo.css">
  9 |   <link rel="stylesheet" href="iconfont.css">
 10 |   <script src="iconfont.js"></script>
 11 |   <!-- jQuery -->
 12 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
 13 |   <!-- 代码高亮 -->
 14 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
 15 | </head>
 16 | <body>
 17 |   <div class="main">
 18 |     <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
 19 |     <div class="nav-tabs">
 20 |       <ul id="tabs" class="dib-box">
 21 |         <li class="dib active"><span>Unicode</span></li>
 22 |         <li class="dib"><span>Font class</span></li>
 23 |         <li class="dib"><span>Symbol</span></li>
 24 |       </ul>
 25 |       
 26 |       <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1784116" target="_blank" class="nav-more">查看项目</a>
 27 |       
 28 |     </div>
 29 |     <div class="tab-container">
 30 |       <div class="content unicode" style="display: block;">
 31 |           <ul class="icon_lists dib-box">
 32 |           
 33 |             <li class="dib">
 34 |               <span class="icon iconfont">&#xe629;</span>
 35 |                 <div class="name">下拉</div>
 36 |                 <div class="code-name">&amp;#xe629;</div>
 37 |               </li>
 38 |           
 39 |             <li class="dib">
 40 |               <span class="icon iconfont">&#xe62b;</span>
 41 |                 <div class="name">加载</div>
 42 |                 <div class="code-name">&amp;#xe62b;</div>
 43 |               </li>
 44 |           
 45 |             <li class="dib">
 46 |               <span class="icon iconfont">&#xe613;</span>
 47 |                 <div class="name">对</div>
 48 |                 <div class="code-name">&amp;#xe613;</div>
 49 |               </li>
 50 |           
 51 |             <li class="dib">
 52 |               <span class="icon iconfont">&#xe637;</span>
 53 |                 <div class="name">首页</div>
 54 |                 <div class="code-name">&amp;#xe637;</div>
 55 |               </li>
 56 |           
 57 |             <li class="dib">
 58 |               <span class="icon iconfont">&#xe634;</span>
 59 |                 <div class="name">用户</div>
 60 |                 <div class="code-name">&amp;#xe634;</div>
 61 |               </li>
 62 |           
 63 |             <li class="dib">
 64 |               <span class="icon iconfont">&#xe61e;</span>
 65 |                 <div class="name">通知</div>
 66 |                 <div class="code-name">&amp;#xe61e;</div>
 67 |               </li>
 68 |           
 69 |             <li class="dib">
 70 |               <span class="icon iconfont">&#xe798;</span>
 71 |                 <div class="name">皇冠</div>
 72 |                 <div class="code-name">&amp;#xe798;</div>
 73 |               </li>
 74 |           
 75 |             <li class="dib">
 76 |               <span class="icon iconfont">&#xe870;</span>
 77 |                 <div class="name">皇冠</div>
 78 |                 <div class="code-name">&amp;#xe870;</div>
 79 |               </li>
 80 |           
 81 |             <li class="dib">
 82 |               <span class="icon iconfont">&#xe640;</span>
 83 |                 <div class="name">加号</div>
 84 |                 <div class="code-name">&amp;#xe640;</div>
 85 |               </li>
 86 |           
 87 |             <li class="dib">
 88 |               <span class="icon iconfont">&#xe603;</span>
 89 |                 <div class="name">皇冠</div>
 90 |                 <div class="code-name">&amp;#xe603;</div>
 91 |               </li>
 92 |           
 93 |             <li class="dib">
 94 |               <span class="icon iconfont">&#xe7ae;</span>
 95 |                 <div class="name">user</div>
 96 |                 <div class="code-name">&amp;#xe7ae;</div>
 97 |               </li>
 98 |           
 99 |             <li class="dib">
100 |               <span class="icon iconfont">&#xe7c4;</span>
101 |                 <div class="name">bell</div>
102 |                 <div class="code-name">&amp;#xe7c4;</div>
103 |               </li>
104 |           
105 |             <li class="dib">
106 |               <span class="icon iconfont">&#xe7c6;</span>
107 |                 <div class="name">home</div>
108 |                 <div class="code-name">&amp;#xe7c6;</div>
109 |               </li>
110 |           
111 |             <li class="dib">
112 |               <span class="icon iconfont">&#xe7d3;</span>
113 |                 <div class="name">carry out</div>
114 |                 <div class="code-name">&amp;#xe7d3;</div>
115 |               </li>
116 |           
117 |             <li class="dib">
118 |               <span class="icon iconfont">&#xe60c;</span>
119 |                 <div class="name">放大镜</div>
120 |                 <div class="code-name">&amp;#xe60c;</div>
121 |               </li>
122 |           
123 |             <li class="dib">
124 |               <span class="icon iconfont">&#xe78b;</span>
125 |                 <div class="name">直播</div>
126 |                 <div class="code-name">&amp;#xe78b;</div>
127 |               </li>
128 |           
129 |           </ul>
130 |           <div class="article markdown">
131 |           <h2 id="unicode-">Unicode 引用</h2>
132 |           <hr>
133 | 
134 |           <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
135 |           <ul>
136 |             <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
137 |             <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
138 |             <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
139 |           </ul>
140 |           <blockquote>
141 |             <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
142 |           </blockquote>
143 |           <p>Unicode 使用步骤如下：</p>
144 |           <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
145 | <pre><code class="language-css"
146 | >@font-face {
147 |   font-family: 'iconfont';
148 |   src: url('iconfont.eot');
149 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
150 |       url('iconfont.woff2') format('woff2'),
151 |       url('iconfont.woff') format('woff'),
152 |       url('iconfont.ttf') format('truetype'),
153 |       url('iconfont.svg#iconfont') format('svg');
154 | }
155 | </code></pre>
156 |           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
157 | <pre><code class="language-css"
158 | >.iconfont {
159 |   font-family: "iconfont" !important;
160 |   font-size: 16px;
161 |   font-style: normal;
162 |   -webkit-font-smoothing: antialiased;
163 |   -moz-osx-font-smoothing: grayscale;
164 | }
165 | </code></pre>
166 |           <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
167 | <pre>
168 | <code class="language-html"
169 | >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
170 | </code></pre>
171 |           <blockquote>
172 |             <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
173 |           </blockquote>
174 |           </div>
175 |       </div>
176 |       <div class="content font-class">
177 |         <ul class="icon_lists dib-box">
178 |           
179 |           <li class="dib">
180 |             <span class="icon iconfont iconxlsx"></span>
181 |             <div class="name">
182 |               下拉
183 |             </div>
184 |             <div class="code-name">.iconxlsx
185 |             </div>
186 |           </li>
187 |           
188 |           <li class="dib">
189 |             <span class="icon iconfont jiazai"></span>
190 |             <div class="name">
191 |               加载
192 |             </div>
193 |             <div class="code-name">.jiazai
194 |             </div>
195 |           </li>
196 |           
197 |           <li class="dib">
198 |             <span class="icon iconfont dui"></span>
199 |             <div class="name">
200 |               对
201 |             </div>
202 |             <div class="code-name">.dui
203 |             </div>
204 |           </li>
205 |           
206 |           <li class="dib">
207 |             <span class="icon iconfont shouye"></span>
208 |             <div class="name">
209 |               首页
210 |             </div>
211 |             <div class="code-name">.shouye
212 |             </div>
213 |           </li>
214 |           
215 |           <li class="dib">
216 |             <span class="icon iconfont yonghu"></span>
217 |             <div class="name">
218 |               用户
219 |             </div>
220 |             <div class="code-name">.yonghu
221 |             </div>
222 |           </li>
223 |           
224 |           <li class="dib">
225 |             <span class="icon iconfont tongzhi"></span>
226 |             <div class="name">
227 |               通知
228 |             </div>
229 |             <div class="code-name">.tongzhi
230 |             </div>
231 |           </li>
232 |           
233 |           <li class="dib">
234 |             <span class="icon iconfont huangguan1"></span>
235 |             <div class="name">
236 |               皇冠
237 |             </div>
238 |             <div class="code-name">.huangguan1
239 |             </div>
240 |           </li>
241 |           
242 |           <li class="dib">
243 |             <span class="icon iconfont huangguan2"></span>
244 |             <div class="name">
245 |               皇冠
246 |             </div>
247 |             <div class="code-name">.huangguan2
248 |             </div>
249 |           </li>
250 |           
251 |           <li class="dib">
252 |             <span class="icon iconfont jiahao"></span>
253 |             <div class="name">
254 |               加号
255 |             </div>
256 |             <div class="code-name">.jiahao
257 |             </div>
258 |           </li>
259 |           
260 |           <li class="dib">
261 |             <span class="icon iconfont huangguan"></span>
262 |             <div class="name">
263 |               皇冠
264 |             </div>
265 |             <div class="code-name">.huangguan
266 |             </div>
267 |           </li>
268 |           
269 |           <li class="dib">
270 |             <span class="icon iconfont user"></span>
271 |             <div class="name">
272 |               user
273 |             </div>
274 |             <div class="code-name">.user
275 |             </div>
276 |           </li>
277 |           
278 |           <li class="dib">
279 |             <span class="icon iconfont bell"></span>
280 |             <div class="name">
281 |               bell
282 |             </div>
283 |             <div class="code-name">.bell
284 |             </div>
285 |           </li>
286 |           
287 |           <li class="dib">
288 |             <span class="icon iconfont home"></span>
289 |             <div class="name">
290 |               home
291 |             </div>
292 |             <div class="code-name">.home
293 |             </div>
294 |           </li>
295 |           
296 |           <li class="dib">
297 |             <span class="icon iconfont carryout"></span>
298 |             <div class="name">
299 |               carry out
300 |             </div>
301 |             <div class="code-name">.carryout
302 |             </div>
303 |           </li>
304 |           
305 |           <li class="dib">
306 |             <span class="icon iconfont fangdajing"></span>
307 |             <div class="name">
308 |               放大镜
309 |             </div>
310 |             <div class="code-name">.fangdajing
311 |             </div>
312 |           </li>
313 |           
314 |           <li class="dib">
315 |             <span class="icon iconfont zhibo"></span>
316 |             <div class="name">
317 |               直播
318 |             </div>
319 |             <div class="code-name">.zhibo
320 |             </div>
321 |           </li>
322 |           
323 |         </ul>
324 |         <div class="article markdown">
325 |         <h2 id="font-class-">font-class 引用</h2>
326 |         <hr>
327 | 
328 |         <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
329 |         <p>与 Unicode 使用方式相比，具有如下特点：</p>
330 |         <ul>
331 |           <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
332 |           <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
333 |           <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
334 |           <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
335 |         </ul>
336 |         <p>使用步骤如下：</p>
337 |         <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
338 | <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
339 | </code></pre>
340 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
341 | <pre><code class="language-html">&lt;span class="iconfont xxx"&gt;&lt;/span&gt;
342 | </code></pre>
343 |         <blockquote>
344 |           <p>"
345 |             iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
346 |         </blockquote>
347 |       </div>
348 |       </div>
349 |       <div class="content symbol">
350 |           <ul class="icon_lists dib-box">
351 |           
352 |             <li class="dib">
353 |                 <svg class="icon svg-icon" aria-hidden="true">
354 |                   <use xlink:href="#iconxlsx"></use>
355 |                 </svg>
356 |                 <div class="name">下拉</div>
357 |                 <div class="code-name">#iconxlsx</div>
358 |             </li>
359 |           
360 |             <li class="dib">
361 |                 <svg class="icon svg-icon" aria-hidden="true">
362 |                   <use xlink:href="#jiazai"></use>
363 |                 </svg>
364 |                 <div class="name">加载</div>
365 |                 <div class="code-name">#jiazai</div>
366 |             </li>
367 |           
368 |             <li class="dib">
369 |                 <svg class="icon svg-icon" aria-hidden="true">
370 |                   <use xlink:href="#dui"></use>
371 |                 </svg>
372 |                 <div class="name">对</div>
373 |                 <div class="code-name">#dui</div>
374 |             </li>
375 |           
376 |             <li class="dib">
377 |                 <svg class="icon svg-icon" aria-hidden="true">
378 |                   <use xlink:href="#shouye"></use>
379 |                 </svg>
380 |                 <div class="name">首页</div>
381 |                 <div class="code-name">#shouye</div>
382 |             </li>
383 |           
384 |             <li class="dib">
385 |                 <svg class="icon svg-icon" aria-hidden="true">
386 |                   <use xlink:href="#yonghu"></use>
387 |                 </svg>
388 |                 <div class="name">用户</div>
389 |                 <div class="code-name">#yonghu</div>
390 |             </li>
391 |           
392 |             <li class="dib">
393 |                 <svg class="icon svg-icon" aria-hidden="true">
394 |                   <use xlink:href="#tongzhi"></use>
395 |                 </svg>
396 |                 <div class="name">通知</div>
397 |                 <div class="code-name">#tongzhi</div>
398 |             </li>
399 |           
400 |             <li class="dib">
401 |                 <svg class="icon svg-icon" aria-hidden="true">
402 |                   <use xlink:href="#huangguan1"></use>
403 |                 </svg>
404 |                 <div class="name">皇冠</div>
405 |                 <div class="code-name">#huangguan1</div>
406 |             </li>
407 |           
408 |             <li class="dib">
409 |                 <svg class="icon svg-icon" aria-hidden="true">
410 |                   <use xlink:href="#huangguan2"></use>
411 |                 </svg>
412 |                 <div class="name">皇冠</div>
413 |                 <div class="code-name">#huangguan2</div>
414 |             </li>
415 |           
416 |             <li class="dib">
417 |                 <svg class="icon svg-icon" aria-hidden="true">
418 |                   <use xlink:href="#jiahao"></use>
419 |                 </svg>
420 |                 <div class="name">加号</div>
421 |                 <div class="code-name">#jiahao</div>
422 |             </li>
423 |           
424 |             <li class="dib">
425 |                 <svg class="icon svg-icon" aria-hidden="true">
426 |                   <use xlink:href="#huangguan"></use>
427 |                 </svg>
428 |                 <div class="name">皇冠</div>
429 |                 <div class="code-name">#huangguan</div>
430 |             </li>
431 |           
432 |             <li class="dib">
433 |                 <svg class="icon svg-icon" aria-hidden="true">
434 |                   <use xlink:href="#user"></use>
435 |                 </svg>
436 |                 <div class="name">user</div>
437 |                 <div class="code-name">#user</div>
438 |             </li>
439 |           
440 |             <li class="dib">
441 |                 <svg class="icon svg-icon" aria-hidden="true">
442 |                   <use xlink:href="#bell"></use>
443 |                 </svg>
444 |                 <div class="name">bell</div>
445 |                 <div class="code-name">#bell</div>
446 |             </li>
447 |           
448 |             <li class="dib">
449 |                 <svg class="icon svg-icon" aria-hidden="true">
450 |                   <use xlink:href="#home"></use>
451 |                 </svg>
452 |                 <div class="name">home</div>
453 |                 <div class="code-name">#home</div>
454 |             </li>
455 |           
456 |             <li class="dib">
457 |                 <svg class="icon svg-icon" aria-hidden="true">
458 |                   <use xlink:href="#carryout"></use>
459 |                 </svg>
460 |                 <div class="name">carry out</div>
461 |                 <div class="code-name">#carryout</div>
462 |             </li>
463 |           
464 |             <li class="dib">
465 |                 <svg class="icon svg-icon" aria-hidden="true">
466 |                   <use xlink:href="#fangdajing"></use>
467 |                 </svg>
468 |                 <div class="name">放大镜</div>
469 |                 <div class="code-name">#fangdajing</div>
470 |             </li>
471 |           
472 |             <li class="dib">
473 |                 <svg class="icon svg-icon" aria-hidden="true">
474 |                   <use xlink:href="#zhibo"></use>
475 |                 </svg>
476 |                 <div class="name">直播</div>
477 |                 <div class="code-name">#zhibo</div>
478 |             </li>
479 |           
480 |           </ul>
481 |           <div class="article markdown">
482 |           <h2 id="symbol-">Symbol 引用</h2>
483 |           <hr>
484 | 
485 |           <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
486 |             这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
487 |           <ul>
488 |             <li>支持多色图标了，不再受单色限制。</li>
489 |             <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
490 |             <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
491 |             <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
492 |           </ul>
493 |           <p>使用步骤如下：</p>
494 |           <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
495 | <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
496 | </code></pre>
497 |           <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
498 | <pre><code class="language-html">&lt;style&gt;
499 | .icon {
500 |   width: 1em;
501 |   height: 1em;
502 |   vertical-align: -0.15em;
503 |   fill: currentColor;
504 |   overflow: hidden;
505 | }
506 | &lt;/style&gt;
507 | </code></pre>
508 |           <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
509 | <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
510 |   &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
511 | &lt;/svg&gt;
512 | </code></pre>
513 |           </div>
514 |       </div>
515 | 
516 |     </div>
517 |   </div>
518 |   <script>
519 |   $(document).ready(function () {
520 |       $('.tab-container .content:first').show()
521 | 
522 |       $('#tabs li').click(function (e) {
523 |         var tabContent = $('.tab-container .content')
524 |         var index = $(this).index()
525 | 
526 |         if ($(this).hasClass('active')) {
527 |           return
528 |         } else {
529 |           $('#tabs li').removeClass('active')
530 |           $(this).addClass('active')
531 | 
532 |           tabContent.hide().eq(index).fadeIn()
533 |         }
534 |       })
535 |     })
536 |   </script>
537 | </body>
538 | </html>
539 | 


--------------------------------------------------------------------------------