├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── views
    │   ├── Admin
    │   │   ├── setting
    │   │   │   ├── index.vue
    │   │   │   ├── reset.vue
    │   │   │   └── profile.vue
    │   │   ├── analyse
    │   │   │   ├── chart.vue
    │   │   │   └── table.vue
    │   │   ├── dashboard.vue
    │   │   ├── manageMoment.vue
    │   │   └── index.vue
    │   ├── Login.vue
    │   ├── Home.vue
    │   └── Init.vue
    ├── scss
    │   └── _viewport.scss
    ├── utils
    │   └── index.js
    ├── assets
    │   ├── css
    │   │   └── loading.css
    │   ├── 2.svg
    │   ├── 0.svg
    │   └── 1.svg
    ├── api
    │   ├── upload.js
    │   ├── options.js
    │   ├── master.js
    │   └── moment.js
    ├── components
    │   ├── Home
    │   │   ├── overlay.vue
    │   │   ├── form
    │   │   │   ├── bubbleNotice.vue
    │   │   │   └── form-item.vue
    │   │   ├── skill-item.vue
    │   │   ├── responsive
    │   │   │   └── swiper-page.vue
    │   │   ├── showImg.vue
    │   │   ├── slide.vue
    │   │   ├── information.vue
    │   │   ├── swiper.vue
    │   │   ├── headerNav.vue
    │   │   ├── showContent.vue
    │   │   └── postDialog.vue
    │   └── Admin
    │   │   ├── card.vue
    │   │   ├── layout.vue
    │   │   ├── sidebar
    │   │       └── item.vue
    │   │   ├── Table
    │   │       └── table.vue
    │   │   └── item-card.vue
    ├── store
    │   ├── getters.js
    │   ├── store.js
    │   └── modules
    │   │   ├── post.js
    │   │   ├── options.js
    │   │   ├── moments.js
    │   │   └── user.js
    ├── plugins
    │   ├── axios.js
    │   └── bubble.vue
    ├── main.js
    ├── App.vue
    └── router.js
├── .prettierrc
├── postcss.config.js
├── vue.config.js
├── babel.config.js
├── .browserslistrc
├── .gitignore
├── .eslintrc.js
├── LICENSE
├── package.json
├── deploy.sh
├── README.md
└── DEV.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Innei/Moment/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/views/Admin/setting/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view></router-view>
3 | </template>


--------------------------------------------------------------------------------
/src/scss/_viewport.scss:
--------------------------------------------------------------------------------
1 | $small: 700px;
2 | $medium: 800px;
3 | $desktop-small: 1024px;
4 | $desktop-big: 1440px;


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": false,
4 |   "endOfLine": "lf",
5 |   "tabWidth": 2
6 | }
7 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {
4 |       grid: true,
5 |       
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: '/',
3 |   outputDir: '/home/wwwroot/www',
4 |   productionSourceMap: false
5 | }
6 | 


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


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 提取某个对象中的指定属性
 3 |  * @param {Object} obj 被提取的对象
 4 |  * @param {Array<string>} arr 要提取的属性
 5 |  * @return {Object}
 6 |  */
 7 | 
 8 | export const pick = (obj, arr) =>
 9 |   arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {})
10 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | [production]
 2 | chrome >= 70
 3 | last 10 firefox version
 4 | last 2 Safari version
 5 | 
 6 | [modern]
 7 | chrome > 75
 8 | last 5 firefox version
 9 | last 1 Safari version
10 | 
11 | [development]
12 | chrome > 75
13 | last 5 firefox version
14 | Safari >= 12
15 | 
16 | [ssr]
17 | node 12
18 | 


--------------------------------------------------------------------------------
/src/assets/css/loading.css:
--------------------------------------------------------------------------------
 1 | #loader-wrapper {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   left: 0;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   z-index: 99;
 8 |   display: flex;
 9 |   align-items: center;
10 | }
11 | #loader-wrapper .loader-container {
12 |   text-align: center;
13 |   width: 100%;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/api/upload.js:
--------------------------------------------------------------------------------
 1 | import http from '@/plugins/axios'
 2 | 
 3 | const baseUrl = 'upload'
 4 | 
 5 | const api = {}
 6 | 
 7 | api.upload = file =>
 8 |   http.post(baseUrl, file, {
 9 |     headers: {
10 |       'Content-Type': 'multipart/form-data;charset=UTF-8'
11 |     }
12 |   })
13 | 
14 | export default api
15 | 


--------------------------------------------------------------------------------
/.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/components/Home/overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="overlay"></div>
 3 | </template>
 4 | 
 5 | <style scoped>
 6 | .overlay {
 7 |   position: fixed;
 8 |   top: 0;
 9 |   left: 0;
10 |   bottom: 0;
11 |   right: 0;
12 |   z-index: 55;
13 |   background: rgba(0, 0, 0, .5);
14 |   backdrop-filter: blur(2px);
15 | }
16 | </style>


--------------------------------------------------------------------------------
/src/store/getters.js:
--------------------------------------------------------------------------------
 1 | const getters = {
 2 |   user: state => state.user.user,
 3 |   token: state => state.user.token,
 4 |   moments: state => state.moments.moments,
 5 |   total: state => state.moments.total,
 6 |   isPost: state => state.post.isPost,
 7 |   isLogged: state => state.user.isLogged,
 8 |   sidebar: state => state.options.sidebar
 9 | }
10 | export default getters


--------------------------------------------------------------------------------
/src/api/options.js:
--------------------------------------------------------------------------------
 1 | import http from '../plugins/axios.js'
 2 | 
 3 | const baseUrl = 'options'
 4 | 
 5 | export const getAccessData = ({ from, to, page, size } = {}) =>
 6 |   http.get(`${baseUrl}/access`, {
 7 |     params: { from, to, size, page }
 8 |   })
 9 | 
10 | export const getAnalytics = () => http.get(`${baseUrl}/analytics`)
11 | 
12 | export default { getAccessData, getAnalytics }
13 | 


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


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import user from './modules/user'
 4 | import moments from './modules/moments'
 5 | import post from './modules/post'
 6 | import options from './modules/options'
 7 | import getters from './getters'
 8 | Vue.use(Vuex)
 9 | 
10 | const store = new Vuex.Store({
11 |   modules: {
12 |     user,
13 |     moments,
14 |     post,
15 |     options
16 |   },
17 |   getters
18 | })
19 | 
20 | export default store
21 | 


--------------------------------------------------------------------------------
/src/store/modules/post.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   isPost: false
 3 | }
 4 | 
 5 | const actions = {
 6 |   togglePost({ commit }) {
 7 |     commit('toggleState')
 8 |   },
 9 |   resetPost({ commit }) {
10 |     commit('resetState')
11 |   }
12 | }
13 | 
14 | const mutations = {
15 |   toggleState(state) {
16 |     state.isPost = !state.isPost
17 |   },
18 |   resetState(state) {
19 |     state.isPost = false
20 |   }
21 | }
22 | 
23 | export default {
24 |   state,
25 |   actions,
26 |   mutations
27 | }
28 | 


--------------------------------------------------------------------------------
/src/store/modules/options.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   sidebar: false
 3 | }
 4 | 
 5 | const actions = {
 6 |   toggleSidebar({ commit }) {
 7 |     commit('toggleSidebar')
 8 |   },
 9 |   closeSidebar({ commit }) {
10 |     commit('closeSidebar')
11 |   }
12 | }
13 | 
14 | const mutations = {
15 |   toggleSidebar (state) {
16 |     state.sidebar = !state.sidebar
17 |   },
18 |   closeSidebar (state) {
19 |     state.sidebar = false
20 |   }
21 | }
22 | 
23 | export default {
24 |   state,
25 |   actions,
26 |   mutations
27 | }
28 | 


--------------------------------------------------------------------------------
/src/store/modules/moments.js:
--------------------------------------------------------------------------------
 1 | import momentApi from '@/api/moment'
 2 | 
 3 | const state = {
 4 |   moments: {},
 5 |   total: 0
 6 | }
 7 | 
 8 | const actions = {
 9 |   loadRecentlyMoments({ commit }) {
10 |     return new Promise(async (r, j) => {
11 |       try {
12 |         const data = (await momentApi.getRecentlyMoment({ size: 5 })).data
13 |         if (data.ok === 1) {
14 |           commit('storeMoments', data.data)
15 |           commit('storeTotalNum', data.pageOptions.total)
16 |         }
17 |         r(data)
18 |       } catch (e) {
19 |         j(e)
20 |       }
21 |     })
22 |   }
23 | }
24 | 
25 | const mutations = {
26 |   storeMoments(state, moments) {
27 |     state.moments = moments
28 |   },
29 |   storeTotalNum (state, num) {
30 |     state.total = num
31 |   }
32 | }
33 | 
34 | export default {
35 |   state,
36 |   actions,
37 |   mutations
38 | }
39 | 


--------------------------------------------------------------------------------
/src/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import Vue from 'vue'
 3 | import router from '../router'
 4 | const http = axios.create({
 5 |   baseURL:
 6 |     process.env.NODE_ENV === 'development'
 7 |       ? 'http://localhost:3000/api'
 8 |       : '/api',
 9 |   withCredentials: true
10 | })
11 | 
12 | http.interceptors.request.use(
13 |   config => {
14 |     if (localStorage.token) {
15 |       config.headers.Authorization = localStorage.token
16 |     }
17 |     return config
18 |   },
19 |   err => {
20 |     console.log(err)
21 |   }
22 | )
23 | 
24 | http.interceptors.response.use(
25 |   res => {
26 |     return res
27 |   },
28 |   err => {
29 |     if (err.response.data.msg) {
30 |       Vue.prototype.$msg({
31 |         msg: err.response.data.msg,
32 |         type: 'error'
33 |       })
34 |     }
35 | 
36 |     if (err.response.status === 401) {
37 |       router.push('/login')
38 |     }
39 |     return Promise.reject(err)
40 |   }
41 | )
42 | export default http
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Innei
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store/store.js'
 5 | import msg from './plugins/bubble.vue'
 6 | import { PerfectScrollbar } from 'vue2-perfect-scrollbar'
 7 | import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
 8 | Vue.component('ps', PerfectScrollbar)
 9 | Vue.use(msg)
10 | 
11 | // https://www.jianshu.com/p/1191388be882
12 | import { library } from '@fortawesome/fontawesome-svg-core'
13 | import { fas } from '@fortawesome/free-solid-svg-icons'
14 | import { far } from '@fortawesome/free-regular-svg-icons'
15 | import { fab } from '@fortawesome/free-brands-svg-icons'
16 | 
17 | import {
18 |   FontAwesomeIcon,
19 |   FontAwesomeLayers,
20 |   FontAwesomeLayersText
21 | } from '@fortawesome/vue-fontawesome'
22 | 
23 | library.add(fas, far, fab)
24 | 
25 | Vue.component('font-awesome-icon', FontAwesomeIcon)
26 | Vue.component('font-awesome-layers', FontAwesomeLayers)
27 | Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
28 | 
29 | Vue.config.productionTip = false
30 | 
31 | const app = new Vue({
32 |   router,
33 |   store,
34 |   render: h => h(App)
35 | }).$mount('#app')
36 | 
37 | export default app


--------------------------------------------------------------------------------
/src/api/master.js:
--------------------------------------------------------------------------------
 1 | import http from '@/plugins/axios'
 2 | 
 3 | const baseUrl = 'master'
 4 | 
 5 | export const getUserInfo = () => {
 6 |   return http.get(`${baseUrl}`)
 7 | }
 8 | 
 9 | export const getUserIntroduce = () => http.get(`${baseUrl}/introduce`)
10 | 
11 | export const checkPass = password =>
12 |   http.post(`${baseUrl}/check_pass`, {
13 |     password
14 |   })
15 | 
16 | export const completeInit = master =>
17 |   http.post(`${baseUrl}/init`, { ...master })
18 | 
19 | export const checkInit = () => http.get(`${baseUrl}/init`)
20 | 
21 | export const login = master => http.post(`${baseUrl}/login`, { ...master })
22 | 
23 | export const checkLogged = () => http.get(`${baseUrl}/check_logged`)
24 | 
25 | export const checkToken = () => http.post(`${baseUrl}/check_token`, {
26 |   token: localStorage.token
27 | })
28 | 
29 | export const signOut = () => http.get(`${baseUrl}/sign_out`)
30 | 
31 | export const resetPass = ({ password, oldPassword }) =>
32 |   http.post(`${baseUrl}/reset_password`, {
33 |     password,
34 |     oldPassword
35 |   })
36 | 
37 | export const modifyIntro = data => http.put(`${baseUrl}/introduce`, data)
38 | 
39 | export default {
40 |   getUserInfo,
41 |   getUserIntroduce,
42 |   checkPass,
43 |   login,
44 |   checkLogged,
45 |   signOut,
46 |   completeInit,
47 |   checkInit,
48 |   checkToken
49 | }
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "moment",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@fortawesome/fontawesome-svg-core": "^1.2.28",
12 |     "@fortawesome/free-brands-svg-icons": "^5.11.2",
13 |     "@fortawesome/free-regular-svg-icons": "^5.11.2",
14 |     "@fortawesome/free-solid-svg-icons": "^5.11.2",
15 |     "@fortawesome/vue-fontawesome": "^0.1.7",
16 |     "axios": "^0.19.2",
17 |     "core-js": "^3.1.2",
18 |     "echarts": "^4.7.0",
19 |     "moment": "^2.24.0",
20 |     "v-charts": "^1.19.0",
21 |     "vue": "^2.6.11",
22 |     "vue-avatar-cropper": "^1.0.6",
23 |     "vue-awesome-swiper": "^3.1.3",
24 |     "vue-router": "^3.1.6",
25 |     "vue2-perfect-scrollbar": "^1.2.4",
26 |     "vuex": "^3.1.1"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
30 |     "@vue/cli-plugin-babel": "^4.1.2",
31 |     "@vue/cli-plugin-eslint": "^4.1.2",
32 |     "@vue/cli-service": "^4.3.1",
33 |     "babel-eslint": "^10.0.1",
34 |     "eslint": "^5.16.0",
35 |     "eslint-plugin-vue": "^5.0.0",
36 |     "sass": "^1.26.3",
37 |     "sass-loader": "^8.0.2",
38 |     "vue-template-compiler": "^2.6.11"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/Home/form/bubbleNotice.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="notice-list">
 3 |     <div
 4 |       class="bubble"
 5 |       :style="{ backgroundColor: msg.color}"
 6 |       v-for="(msg, index) in msgList"
 7 |       :key="index"
 8 |     >
 9 |       <div class="content">{{msg.msg}}</div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     msgList: {
18 |       type: Array,
19 |       required: true
20 |     }
21 |   }
22 | }
23 | </script>
24 | 
25 | <style scoped>
26 | .notice-list {
27 |   top: 2em;
28 |   left: 0;
29 |   right: 0;
30 |   z-index: 60;
31 |   position: fixed;
32 |   user-select: none;
33 |   pointer-events: none;
34 |   /* display: flex;
35 |   justify-content: center;
36 |   align-items: center; */
37 | }
38 | .bubble {
39 |   color: #fff;
40 |   display: table;
41 |   background: #333;
42 |   border-radius: 3em;
43 |   pointer-events: auto;
44 |   margin: 0 auto 1em auto;
45 |   box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
46 |   transform: scale(0);
47 |   animation: scale 0.5s forwards, close 0.5s forwards 2.5s;
48 |   background-color: #7e7af8;
49 | }
50 | .bubble .content {
51 |   padding: 0.5em 1em;
52 |   display: table-cell;
53 | }
54 | 
55 | @keyframes scale {
56 |   to {
57 |     transform: scale(1);
58 |   }
59 | }
60 | @keyframes close {
61 |   to {
62 |     transform: scale(0);
63 |   }
64 | }
65 | </style>


--------------------------------------------------------------------------------
/src/components/Home/skill-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span class="name">{{ name }}</span>
 4 |     <span class="process">
 5 |       <transition name="move">
 6 |         <span class="up" :style="'right: '+ val " v-show="val"></span>
 7 |       </transition>
 8 |     </span>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     props: {
15 |       name: String,
16 |       score: Number
17 |     },
18 |     data() {
19 |       return { val: 0 }
20 |     },
21 |     mounted() {
22 |       this.val = `${ 100 - this.score }%`
23 |     }
24 |   }
25 | </script>
26 | 
27 | <style scoped>
28 |   * {
29 |     user-select: none;
30 |   }
31 |   div {
32 |     display: flex;
33 |     position: relative;
34 |     margin-bottom: 2rem;
35 |     align-items: center;
36 |   }
37 | 
38 |   .name {
39 |     color: #043046;
40 |     flex: 0.4;
41 |   }
42 | 
43 |   .process {
44 |     flex: 0.6;
45 |     background-color: #c7cbca;
46 |     height: 4px;
47 |     border-radius: 12px;
48 |     position: relative;
49 |     overflow: hidden;
50 |   }
51 | 
52 |   .process .up {
53 |     position: absolute;
54 |     top: 0;
55 |     bottom: 0;
56 |     left: 0;
57 |     right: 100%;
58 |     transition: 1.5s;
59 |     background-color: #fbd2d5;
60 |   }
61 |   .move-enter-active, .move-leave-active {
62 |     transition: .5s;
63 |   }
64 |   .move-enter, .move-leave-to /* move-leave-active below version 2.1.8 */ {
65 |     transform: translateX(-100%);
66 |   }
67 | </style>


--------------------------------------------------------------------------------
/src/api/moment.js:
--------------------------------------------------------------------------------
 1 | import http from '../plugins/axios.js'
 2 | 
 3 | const baseUrl = 'moments'
 4 | 
 5 | export const getRecentlyMoment = function({ size, page }) {
 6 |   return http.get(baseUrl, {
 7 |     params: {
 8 |       size,
 9 |       page
10 |     }
11 |   })
12 | }
13 | 
14 | export const postNewMoment = momentData =>
15 |   http.post(baseUrl, {
16 |     ...pickContent(momentData)
17 |   })
18 | 
19 | export const deleteOneMoment = id => http.delete(`${baseUrl}/${id}`)
20 | 
21 | export const modifyOneMoment = (id, data) =>
22 |   http.put(`${baseUrl}/${id}`, {
23 |     ...pickContent(data)
24 |   })
25 | 
26 | export default {
27 |   getRecentlyMoment,
28 |   postNewMoment,
29 |   deleteOneMoment,
30 |   modifyOneMoment
31 | }
32 | 
33 | function pickContent(momentData) {
34 |   let data
35 |   const { title, body, mood, weather, source, src, comment } = momentData
36 |   switch (momentData.type) {
37 |     case 'moment':
38 |       data = {
39 |         title,
40 |         body,
41 |         mood,
42 |         weather
43 |       }
44 |       break
45 |     case 'hitokoto':
46 |       data = {
47 |         source,
48 |         body
49 |       }
50 |       break
51 |     case 'idea':
52 |       data = {
53 |         body
54 |       }
55 |       break
56 |     case 'picture':
57 |       data = {
58 |         comment,
59 |         src
60 |       }
61 | 
62 |       break
63 |     default:
64 |       break
65 |   }
66 |   return Object.assign({}, { content: { ...data } }, { type: momentData.type })
67 | }
68 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { mapActions } from 'vuex'
 7 | import api from '@/api/master'
 8 | 
 9 | export default {
10 |   methods: {
11 |     ...mapActions(['loadUser', 'checkLogged', 'setToken'])
12 |   },
13 |   async created () {
14 |     const { ok } = (await api.checkInit()).data
15 | 
16 |     if (ok) {
17 |       return this.$router.push('/init')
18 |     }
19 |     this.loadUser()
20 |     this.setToken(localStorage.token || null)
21 |     this.checkLogged()
22 |   }
23 | }
24 | </script>
25 | 
26 | <style>
27 | body,
28 | html {
29 |   margin: 0;
30 |   padding: 0;
31 |   background-color: #fafafa;
32 | }
33 | 
34 | body {
35 |   min-height: 100vh;
36 | }
37 | 
38 | a {
39 |   color: unset;
40 | }
41 | 
42 | a:active {
43 |   color: unset;
44 | }
45 | 
46 | a:hover {
47 |   color: unset;
48 | }
49 | 
50 | ::-webkit-scrollbar {
51 |   width: 0;
52 |   height: 0;
53 | }
54 | 
55 | * {
56 |   scrollbar-width: none;
57 | }
58 | 
59 | html {
60 |   font-size: 16px;
61 | }
62 | @media (max-width: 500px) {
63 |   html {
64 |     font-size: 0.8rem;
65 |   }
66 | }
67 | 
68 | .notice-list {
69 |   top: 2em;
70 |   left: 0;
71 |   right: 0;
72 |   z-index: 60;
73 |   position: fixed;
74 |   user-select: none;
75 |   pointer-events: none;
76 |   /* display: flex;
77 |       justify-content: center;
78 |       align-items: center; */
79 | }
80 | 
81 | img[src=''],
82 | img:not([src]) {
83 |   opacity: 0;
84 | }
85 | button {
86 |   border: 0;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/Admin/card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card" :style="mStyle">
 3 |     <div class="con">
 4 |       <div class="left" :style="lStyle">
 5 |         <slot name="left" />
 6 |       </div>
 7 |     </div>
 8 |     <div class="con">
 9 |       <div class="right" :style="rStyle">
10 |         <slot name="right" />
11 |       </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | <script>
16 | export default {
17 |   props: {
18 |     lStyle: String,
19 |     rStyle: String,
20 |     mStyle: String
21 |   }
22 | }
23 | </script>
24 | <style lang="scss" scoped>
25 | .con {
26 |   height: 100%;
27 |   width: 100%;
28 |   position: relative;
29 | }
30 | .card {
31 |   
32 |   border-radius: 12px;
33 |   display: grid;
34 |   grid-template-columns: 40% auto;
35 |   background: #f4f4f7;
36 |   color: #020720;
37 |   .left,
38 |   .right {
39 |     padding: 1.118rem;
40 |     // background: url(../../assets/1.svg);
41 |     background-position: center;
42 |     background-size: cover;
43 |     background-repeat: no-repeat;
44 |     background-size: 100%;
45 |     position: absolute;
46 |     top: 0;
47 |     bottom: 0;
48 |     right: 0;
49 |     left: 0;
50 |     box-sizing: border-box;
51 |   }
52 | 
53 |   .text {
54 |     .num {
55 |       font-size: 3rem;
56 |       display: inline;
57 |       padding: 0 0.5em;
58 |       font-weight: 800;
59 |     }
60 |     .num ~ * {
61 |       display: inline-block;
62 |     }
63 |   }
64 |   .text {
65 |     line-height: 1.5;
66 |   }
67 |   .info {
68 |     margin-bottom: 0.618rem;
69 |     font-size: 1.18rem;
70 |   }
71 | }
72 | </style>


--------------------------------------------------------------------------------
/src/components/Home/form/form-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item">
 3 |     <label :for="$slots.default[0].data.attrs.id" class="name">{{name}}</label>
 4 |     <slot class="input"></slot>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     name: {
12 |       type: String,
13 |       required: true
14 |     },
15 |   }
16 | }
17 | </script>
18 | 
19 | <style scoped>
20 | .item {
21 |   display: grid;
22 |   margin: 1rem 0;
23 |   grid-template-columns: 30% 70%;
24 | }
25 | .name {
26 |   user-select: none;
27 | }
28 | textarea,
29 | input[type='text'] {
30 |   border: 1px solid #dcdfe6;
31 |   border-radius: 4px;
32 |   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
33 |   padding: 5px 15px;
34 |   line-height: 1.5;
35 |   font-size: 1rem
36 | }
37 | 
38 | textarea:focus,
39 | input[type='text']:focus {
40 |   outline: none;
41 |   border-color: #409eff;
42 | }
43 | 
44 | select:focus {
45 |   outline: 1px #409eff solid;
46 | }
47 | 
48 | input[type='file'] {
49 |   display: none;
50 | }
51 | 
52 | button {
53 |   padding: 9px 15px;
54 |   font-size: 12px;
55 |   border-radius: 3px;
56 |   color: #fff;
57 |   text-align: center;
58 |   box-sizing: border-box;
59 |   outline: none;
60 |   margin: 0;
61 |   transition: 0.1s;
62 |   font-weight: 500;
63 |   -webkit-appearance: none;
64 |   display: inline-block;
65 |   line-height: 1;
66 |   white-space: nowrap;
67 |   cursor: pointer;
68 |   border: 1px solid #dcdfe6;
69 |   width: 8rem;
70 | }
71 | button.primary {
72 |   background-color: #409eff;
73 |   border-color: #409eff;
74 | }
75 | </style>


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | # For Ubuntu
 2 | curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
 3 | curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
 4 | echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
 5 | sudo apt-get install gnupg -y
 6 | wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -
 7 | echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list
 8 | sudo apt update
 9 | sudo apt-get install -y nodejs  yarn redis mongodb-org git nginx screen
10 | 
11 | cd ~
12 | git clone https://github.com/Innei/moment.git
13 | git clone https://github.com/Innei/moment-server.git
14 | 
15 | mkdir -p /home/wwwroot/www
16 | cd moment
17 | yarn
18 | yarn build --modern
19 | cd ../moment-server
20 | yarn
21 | cp .env.example .env
22 | yarn global add pm2
23 | sudo echo "server {
24 | 
25 | 	server_name _; #在这里输入你绑定的域名
26 | 	root /home/wwwroot/www;
27 | 
28 | 	location / {
29 | 		try_files $uri $uri/ /index.html;
30 | 	}
31 | 
32 | 	# 反代
33 | 	location /api {
34 | 		proxy_set_header Host $host;
35 | 		proxy_set_header X-Real-IP $remote_addr;
36 | 		proxy_set_header REMOTE-HOST $remote_addr;
37 | 		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
38 | 		proxy_pass http://127.0.0.1:3000;
39 | 	}
40 |     
41 | 
42 | # gzip
43 | gzip on;
44 | gzip_vary on;
45 | gzip_proxied any;
46 | gzip_comp_level 6;
47 | gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
48 | 
49 | }" >> /etc/nginx/sites-enabled/moment.conf
50 | 
51 | nginx -s reload
52 | 
53 | pm2 start ecosystem.config.js --env production


--------------------------------------------------------------------------------
/src/store/modules/user.js:
--------------------------------------------------------------------------------
 1 | import masterApi from '@/api/master'
 2 | const state = {
 3 |   user: {
 4 |     username: null,
 5 |     avatar: null,
 6 |     userId: null,
 7 |     nickname: null,
 8 |     githubUrl: null,
 9 |     userUrl: null
10 |   },
11 |   token: localStorage.token || null,
12 |   isLogged: false
13 | }
14 | 
15 | const actions = {
16 |   loadUser({ commit }) {
17 |     return new Promise(async (r, j) => {
18 |       try {
19 |         const { data } = await masterApi.getUserInfo()
20 |         commit('storeData', data)
21 |         r(data)
22 |       } catch (e) {
23 |         j(e)
24 |       }
25 |     })
26 |   },
27 |   async checkLogged({ commit, state }) {
28 |     // return new Promise(async (r, j) => {
29 |     //   try {
30 |     //     // const { data } = await masterApi.checkLogged()
31 |     //     // commit('storeLogged', data.ok ? true : false)
32 |     //     // r(data)
33 | 
34 |     //   } catch (e) {
35 |     //     j(e)
36 |     //   }
37 |     // })
38 |     if (state.token) {
39 |       if ((await masterApi.checkToken()).data.ok === 1) {
40 |         commit('storeLogged', true)
41 |         return true
42 |       } else {
43 |         delete localStorage.token
44 |         state.token = null
45 |         return false
46 |       }
47 |     } else {
48 |       commit('storeLogged', false)
49 |       return false
50 |     }
51 |   },
52 |   setLogged({ commit }, status) {
53 |     commit('storeLogged', status)
54 |   },
55 |   setToken({ commit }, token) {
56 |     commit('SET_TOKEN', token)
57 |   }
58 | }
59 | 
60 | const mutations = {
61 |   storeData(state, user) {
62 |     state.user = user
63 |   },
64 |   SET_TOKEN(state, token) {
65 |     state.token = token
66 |   },
67 |   storeLogged(state, status) {
68 |     state.isLogged = status
69 |   }
70 | }
71 | 
72 | export default {
73 |   state,
74 |   actions,
75 |   mutations
76 | }
77 | 


--------------------------------------------------------------------------------
/src/components/Home/responsive/swiper-page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <swiper :options="swiperOption" ref="pageSwiper">
 3 |     <swiper-slide class="page">
 4 |       <information :skill="skill" :showPostBtn="hideSwiper" @post-new="$emit('post-new')">
 5 |         <template v-slot:introduce>
 6 |           <p>{{ intro }}</p>
 7 |         </template>
 8 |       </information>
 9 |     </swiper-slide>
10 |     <swiper-slide>
11 |       <div class="content">
12 |         <slot></slot>
13 |       </div>
14 |     </swiper-slide>
15 |   </swiper>
16 | </template>
17 | 
18 | <script>
19 | import 'swiper/dist/css/swiper.css'
20 | import information from '@/components/Home/information'
21 | import { swiper, swiperSlide } from 'vue-awesome-swiper'
22 | 
23 | export default {
24 |   props: {
25 |     skill: {
26 |       require: true,
27 |       type: Object
28 |     },
29 |     content: {
30 |       type: Object,
31 |       require: true
32 |     },
33 |     toSec: {
34 |       type: Boolean,
35 |       default: false
36 |     },
37 |     intro: {},
38 |     hideSwiper: {
39 |       type: Boolean
40 |     }
41 |   },
42 |   components: {
43 |     swiper,
44 |     swiperSlide,
45 |     information
46 |   },
47 |   computed: {
48 |     swiper () {
49 |       return this.$refs.pageSwiper.swiper
50 |     }
51 |   },
52 |   data () {
53 |     return {
54 |       swiperOption: {
55 |         width: window.innerWidth,
56 |         observer: true,
57 |         observeParents: true,
58 |         on: {
59 |           resize () {
60 |             this.params.width = window.innerWidth
61 |             this.update()
62 |           },
63 |         }
64 |       }
65 |     }
66 |   },
67 |   watch: {
68 |     toSec (n) {
69 |       if (n === true) {
70 |         this.swiper.slideTo(2, 1000, false)
71 |       }
72 |     }
73 |   }
74 | }
75 | </script>
76 | 
77 | <style scoped>
78 | .content {
79 |   height: 100%;
80 |   position: relative;
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/components/Home/showImg.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="fade">
 3 |     <div class="overlay" v-if="src">
 4 |       <img :src="src" :alt="comment" @click="handleClick" />
 5 |       <div class="comment">{{ comment }}</div>
 6 |     </div>
 7 |   </transition>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     src: {
14 |       type: String,
15 |       default: ""
16 |     },
17 |     comment: {
18 |       type: String,
19 |       default: ""
20 |     }
21 |   },
22 |   methods: {
23 |     handleClick() {
24 |       this.$emit("zoomOut");
25 |     }
26 |   }
27 | };
28 | </script>
29 | 
30 | <style scoped>
31 | .overlay {
32 |   backdrop-filter: blur(8px);
33 |   height: 100vh;
34 |   width: 100vw;
35 |   z-index: 50;
36 |   position: fixed;
37 |   left: 0;
38 |   top: 0;
39 |   background: rgba(255, 255, 255, 0.5);
40 |   display: flex;
41 |   justify-content: center;
42 |   align-items: center;
43 |   flex-direction: column;
44 | }
45 | 
46 | img {
47 |   padding: 12px;
48 |   background: #eee;
49 |   border: 6px solid #fff;
50 |   max-width: 80%;
51 |   position: relative;
52 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
53 |   cursor: zoom-out;
54 | }
55 | 
56 | img::after {
57 |   content: "";
58 |   height: 50vh;
59 |   width: 80vw;
60 |   position: absolute;
61 |   left: 0;
62 |   top: 0;
63 |   background: #eee;
64 |   border: 6px solid #fff;
65 | }
66 | 
67 | .comment {
68 |   user-select: none;
69 |   margin-top: 12px;
70 |   font-size: 1.2rem;
71 |   position: relative;
72 | }
73 | 
74 | .comment::before {
75 |   content: "";
76 |   position: absolute;
77 |   bottom: 0;
78 |   height: 0.6rem;
79 |   left: 0;
80 |   right: 0;
81 |   background: rgba(255, 255, 255, 0.4);
82 |   z-index: -99;
83 | }
84 | 
85 | .fade-enter-active,
86 | .fade-leave-active {
87 |   transition: opacity 0.8s;
88 | }
89 | 
90 | .fade-enter,
91 | .fade-leave-to {
92 |   opacity: 0;
93 | }
94 | </style>


--------------------------------------------------------------------------------
/src/views/Admin/analyse/chart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <layout>
 3 |     <template #main>
 4 |       <!-- <h1>最近 7 天 访客数据</h1> -->
 5 |       <div class="chart">
 6 |         <ve-line
 7 |         @ready-once="handleRenderChart"
 8 |           :title="{text: '最近 7 天 访客数据'}"
 9 |           :loading="loading"
10 |           :data="PVchartData"
11 |           :settings="chartSettings"
12 |         />
13 |       </div>
14 |       <!-- <ve-pie :data="WeekChartData"></ve-pie> -->
15 |       <div class="chart">
16 |         <ve-line
17 |         @ready-once="handleRenderChart"
18 |           :title="{text: '今天 访客数据'}"
19 |           :loading="loading"
20 |           :data="dayChartData"
21 |           :settings="chartSettings"
22 |         />
23 |       </div>
24 |     </template>
25 |   </layout>
26 | </template>
27 | 
28 | <script>
29 | import VeLine from 'v-charts/lib/line.common'
30 | import 'echarts/lib/component/title'
31 | import 'v-charts/lib/style.css'
32 | 
33 | import { getAnalytics } from '@/api/options'
34 | export default {
35 |   components: {
36 |     layout: () => import('@/components/Admin/layout.vue'),
37 |     VeLine
38 |   },
39 |   async created () {
40 |     const { data } = await getAnalytics()
41 |     if (data.ok === 1) {
42 |       this.PVchartData.rows = data.weekNum
43 |       this.dayChartData.rows = data.dayNum
44 |       this.loading = false
45 |     }
46 |   },
47 |   methods: {
48 |     handleRenderChart (e) {
49 |       // console.log(e);
50 |       setTimeout(() => {
51 |         e.resize()
52 |       }, 1500);
53 |     },
54 |   },
55 |   data () {
56 |     return {
57 |       PVchartData: {
58 |         columns: ['day', 'PV', 'IP'],
59 |         rows: []
60 |       },
61 |       dayChartData: {
62 |         columns: ['hour', 'PV', 'IP'],
63 |         rows: []
64 |       },
65 |       chartSettings: {
66 |         labelMap: {
67 |           PV: 'PV',
68 |           day: '日期',
69 |           IP: 'IP'
70 |         }
71 |       },
72 |       loading: true
73 |     }
74 |   }
75 | }
76 | </script>
77 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-Hans">
 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 |     <style>
 9 |       #loader-wrapper {
10 |         position: fixed;
11 |         top: 0;
12 |         left: 0;
13 |         width: 100vw;
14 |         height: 100vh;
15 |         z-index: 99;
16 |         display: flex;
17 |         align-items: center;
18 |       }
19 |       #loader-wrapper .loader-container {
20 |         text-align: center;
21 |         width: 100%;
22 |       }
23 |     </style>
24 |     <title>Moment</title>
25 |   </head>
26 |   <body>
27 |     <noscript>
28 |       <strong
29 |         >We're sorry but moment doesn't work properly without JavaScript
30 |         enabled. Please enable it to continue.</strong
31 |       >
32 |     </noscript>
33 |     <div id="app">
34 |       <div id="loader-wrapper">
35 |         <div class="loader-container">
36 |           <svg
37 |             xmlns="http://www.w3.org/2000/svg"
38 |             xmlns:xlink="http://www.w3.org/1999/xlink"
39 |             style="margin:auto;display:block;visibility: unset"
40 |             width="78px"
41 |             height="78px"
42 |             viewBox="0 0 100 100"
43 |             preserveAspectRatio="xMidYMid"
44 |           >
45 |             <circle cx="50" cy="33.847" r="15" fill="#e15b64">
46 |               <animate
47 |                 attributeName="cy"
48 |                 dur="0.9803921568627451s"
49 |                 repeatCount="indefinite"
50 |                 calcMode="spline"
51 |                 keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9"
52 |                 keyTimes="0;0.5;1"
53 |                 values="25;75;25"
54 |               />
55 |             </circle>
56 |           </svg>
57 |           <div class="loader-title">数据正在加载中...</div>
58 |         </div>
59 |       </div>
60 |       <!-- built files will be auto injected -->
61 |     </div>
62 |     <div class="notice-list"></div>
63 |   </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/src/plugins/bubble.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="bubble"
 4 |     :style="{ backgroundColor: color }"
 5 |     :class="{red:type === 'error',green: type === 'success', yellow: type === 'warning'}"
 6 |   >
 7 |     <div class="content">{{msg}}</div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | 
13 | export default {
14 |   data () {
15 |     return {
16 |       msg: '',
17 |       color: '',
18 |       type: ''
19 |     }
20 |   },
21 |   install (Vue) {
22 |     Vue.prototype.$msg = (config) => {   //通过原型注册一个方法
23 |       if (!config.msg) {
24 |         return
25 |       }
26 |       const MessageConstructor = Vue.extend(this);  //生成一个Vue子类，子类就是这个组件
27 |       const instance = new MessageConstructor({ data: config });   //生成该子类的实例
28 |       instance.vm = instance.$mount();  //将该实例手动挂载
29 |       this.dom = document.body.querySelector('.notice-list').appendChild(instance.vm.$el);    //将实例挂载到body上
30 |     }
31 |   },
32 |   created () {
33 |     setTimeout(() => {
34 |       this.$el.parentNode.removeChild(this.$el)
35 |     }, 3000)
36 |   }
37 | }
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 | .bubble {
42 |   color: #fff;
43 |   display: table;
44 |   background: #333;
45 |   border-radius: 3em;
46 |   pointer-events: auto;
47 |   margin: 0 auto 1em auto;
48 |   box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
49 |   transform: scale(0);
50 |   animation: scale 0.5s forwards, close 0.2s forwards 2.4s;
51 |   background-color: #7e7af8;
52 | 
53 |   &.red {
54 |     background-image: linear-gradient(
55 |       269deg,
56 |       #f37878 0%,
57 |       #ff4242 100%
58 |     ) !important;
59 |   }
60 |   &.yellow {
61 |     background-image: linear-gradient(
62 |       90deg,
63 |       #f1c40f 0%,
64 |       #f29441 100%
65 |     ) !important;
66 |   }
67 |   &.green {
68 |     background-image: linear-gradient(
69 |       90deg,
70 |       #2ecc71 0%,
71 |       #27ae60 100%
72 |     ) !important;
73 |   }
74 | }
75 | .bubble .content {
76 |   padding: 0.5em 1em;
77 |   display: table-cell;
78 | }
79 | 
80 | @keyframes scale {
81 |   to {
82 |     transform: scale(1);
83 |   }
84 | }
85 | @keyframes close {
86 |   to {
87 |     transform: scale(0);
88 |   }
89 | }
90 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 一瞬
  2 | 
  3 | 一瞬 (Moment)，目的显而易见，就是希望它能够记录下生活中的美好瞬间。
  4 | 
  5 | <del>后端正在测试和完善，咕咕咕咕</del>
  6 | 
  7 | 后端使用 Express + MongoDB 开发。
  8 | 
  9 | 后端仓库地址： <https://github.com/Innei/Moment-server>
 10 | 
 11 | 即刻体验：<http://111.229.4.42/#/>
 12 | 
 13 | 后台： <http://111.229.4.42/#/master>
 14 | 
 15 | 用户名： `Innei`
 16 | 
 17 | 密码： `qaz123..qqaa`
 18 | 
 19 | 
 20 | preview: 
 21 | 
 22 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191020211642.png)
 23 | 
 24 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152019.png)
 25 | 
 26 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152039.png)
 27 | 
 28 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152106.png)
 29 | 
 30 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152131.png)
 31 | 
 32 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119153624.png)
 33 | 
 34 | ## 快速构建
 35 | 
 36 | 以 `yarn` 为例
 37 | 
 38 | ```bash
 39 | cd
 40 | # 构建前端
 41 | git clone https://github.com/Innei/moment.git
 42 | cd moment
 43 | yarn
 44 | 
 45 | # 构建后端
 46 | # 注意 您已正确安装了 redis 和 MongoDB
 47 | cd 
 48 | git clone http://github.com/Innei/moment-server.git
 49 | cd moment-server
 50 | yarn
 51 | 
 52 | ```
 53 | 
 54 | 经过以上的步骤，已经正确的搭建完了主要的环境。接下你可以配合 nginx 等把该项目托管到网站上。
 55 | 
 56 | ## 托管生产环境
 57 | 
 58 | 接下来，我会以 nginx 为例，简要的说明如何构建。
 59 | 
 60 | ```bash
 61 | cd ~/moment
 62 | mkdir -p /home/wwwroot/www
 63 | yarn build --modern
 64 | cd ~/moment-server
 65 | cp .env.example .env
 66 | yarn prod
 67 | ```
 68 | 
 69 | 通过以上的步骤已经把前端编译成静态页面，后端监听在本地 3000 端口上。使用 `yarn build --modern` 可以编译一个速度更快，体积更小的仅支持现代浏览器的版本，你也可以去掉 `--modern` 参数来编译一个兼容更多浏览器的版本。
 70 | 
 71 | 接下来我们使用 `nginx` 来启用反向代理，将 `/api` 反向代理到本地的 3000 端口。
 72 | 
 73 | ```bash
 74 | sudo vim /etc/nginx/sites-enabled/moment.conf
 75 | ```
 76 | 
 77 | 在该文件中写入
 78 | 
 79 | ```
 80 | 
 81 | 
 82 | server {
 83 | 
 84 | 	server_name example.com; #在这里输入你绑定的域名
 85 | 	root /home/wwwroot/www;
 86 | 
 87 | 	location / {
 88 | 		try_files $uri $uri/ /index.html;
 89 | 	}
 90 | 
 91 | 	# 反代
 92 | 	location /api {
 93 | 		proxy_set_header Host $host;
 94 | 		proxy_set_header X-Real-IP $remote_addr;
 95 | 		proxy_set_header REMOTE-HOST $remote_addr;
 96 | 		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 97 | 		proxy_pass http://127.0.0.1:3000;
 98 | 	}
 99 |     
100 | 
101 | # gzip
102 | gzip on;
103 | gzip_vary on;
104 | gzip_proxied any;
105 | gzip_comp_level 6;
106 | gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
107 | 
108 | }
109 | ```
110 | 
111 | ```
112 | nginx -s reload
113 | ```
114 | 
115 | 即刻访问你的绑定的网址，开始初始化。
116 | 
117 | ## 浏览器兼容性
118 | 
119 | 此项目使用 ES6 以及最新 CSS 规范编写，顾不支持旧版浏览器。
120 | 
121 | ```
122 | Chrome >= 76
123 | Firefox >= 70
124 | Safari >= 12
125 | etc.
126 | ```
127 | 
128 | ## 做出贡献
129 | 
130 | 接下来，我们来构建开发环境。
131 | 
132 | ```bash
133 | cd ~/moment
134 | yarn serve .
135 | cd ~/moment-server
136 | yarn start
137 | ```
138 | 
139 | ## 环境变量
140 | 
141 | 
142 | 


--------------------------------------------------------------------------------
/src/views/Admin/analyse/table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <layout>
  3 |     <template #header>
  4 |       <div @click="handleReflesh">
  5 |         <div class="name">Reflesh</div>
  6 |         <div class="icon">
  7 |           <font-awesome-icon :icon="['fas', 'sync']"></font-awesome-icon>
  8 |         </div>
  9 |       </div>
 10 |     </template>
 11 |     <template #main>
 12 |       <Table :data="data" :cols="cols" :options="options" :page="page" @to="handleTo" class="table"></Table>
 13 |     </template>
 14 |   </layout>
 15 | </template>
 16 | 
 17 | <script>
 18 | import Table from '@/components/Admin/Table/table.vue'
 19 | import { pick } from '@/utils'
 20 | import { getAccessData } from '../../../api/options.js'
 21 | export default {
 22 |   components: {
 23 |     Table,
 24 |     layout: () => import('@/components/Admin/layout.vue'),
 25 |   },
 26 |   data () {
 27 |     return {
 28 |       size: 50,
 29 |       page: null,
 30 |       oData: null,
 31 |       cols: [{
 32 |         name: '访问时间',
 33 |         prop: 'formatTime',
 34 |         width: '10rem'
 35 |       }, {
 36 |         name: '方式',
 37 |         prop: 'method',
 38 |         width: '4rem'
 39 |       }, {
 40 |         name: 'IP',
 41 |         prop: 'ip',
 42 |         width: '8rem'
 43 |       }, {
 44 |         name: '路径',
 45 |         prop: 'path',
 46 |         width: '300px',
 47 |         tips: true
 48 |       },
 49 |       {
 50 |         name: '浏览器',
 51 |         prop: 'browser',
 52 |         width: '8rem',
 53 |       },
 54 |       {
 55 |         name: '访客系统',
 56 |         prop: 'os',
 57 |         width: '8rem',
 58 |       },
 59 |       {
 60 |         name: '用户代理',
 61 |         prop: 'userAgent',
 62 |         // width: '15rem',
 63 |         tips: true
 64 |       }],
 65 |       options: {
 66 |         showID: true
 67 |       },
 68 |       data: [],
 69 |     }
 70 |   },
 71 |   async created () {
 72 |     const { data } = await getAccessData({ size: this.size })
 73 |     this.data = this.filterData(data)
 74 |   },
 75 |   methods: {
 76 |     filterData (data) {
 77 |       this.oData = data.data // 原始数据挂载 不需要响应式
 78 |       this.page = Object.assign({}, data.pageOptions)
 79 | 
 80 |       const filter = []
 81 | 
 82 |       for (const d of data.data) {
 83 |         filter.push(pick(d, ['ip', 'formatTime', 'method', 'path', '_id']))
 84 |       }
 85 | 
 86 |       filter.map((item, i) => {
 87 |         if (data.data[i].userAgent) {
 88 |           item.userAgent = data.data[i].userAgent.source
 89 |           item.browser = data.data[i].userAgent.browser
 90 |           item.os = data.data[i].userAgent.os
 91 |         }
 92 |       })
 93 |       return filter
 94 |     },
 95 |     async handleTo (page) {
 96 |       // console.log(page)
 97 |       if (!isNaN(page) && page !== this.page.currentPage) {
 98 |         const { data } = await getAccessData({ size: this.size, page })
 99 |         this.data = this.filterData(data)
100 |       }
101 |     },
102 |     async handleReflesh () {
103 |       const { data } = await getAccessData({ size: this.size, page: this.page.currentPage })
104 |       this.data = this.filterData(data)
105 |     }
106 |   }
107 | }
108 | </script>
109 | 
110 | <style scoped>
111 | .icon {
112 |   animation: rotate 1s;
113 | }
114 | .icon:hover {
115 |   animation: rotate 1s reverse linear infinite;
116 | }
117 | @keyframes rotate {
118 |   to {
119 |     transform: rotate(360deg);
120 |   }
121 | }
122 | </style>


--------------------------------------------------------------------------------
/src/components/Home/slide.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <swiper-slide class="card" :class="{active: isActive, btn: !data.type && data.icon }">
  3 |     <div class="normal" v-if="data.type">
  4 |       <div class="header">
  5 |         <div class="date">{{ date.date || 'N'}}</div>
  6 |         <div class="type">
  7 |           <div class="top">{{ data.type }}</div>
  8 |           <div class="bottom" v-if="date.my">{{ date.my }}</div>
  9 |         </div>
 10 |       </div>
 11 |       <div class="body">{{ user.username + ' posted a ' + data.type }}</div>
 12 |     </div>
 13 |     <div class="btn next_btn prev_btn" v-else>
 14 |       <font-awesome-icon :icon="data.icon" />
 15 |     </div>
 16 |   </swiper-slide>
 17 | </template>
 18 | 
 19 | <script>
 20 | import { swiperSlide } from 'vue-awesome-swiper'
 21 | import { mapGetters } from 'vuex'
 22 | 
 23 | export default {
 24 |   props: {
 25 |     isActive: {
 26 |       type: Boolean,
 27 |       default: false
 28 |     },
 29 |     date: {
 30 |       type: Object,
 31 |       default () {
 32 |         return {}
 33 |       }
 34 |     },
 35 |     data: {
 36 |       type: Object,
 37 |       required: true
 38 |     }
 39 |   },
 40 |   components: {
 41 |     swiperSlide
 42 |   },
 43 |   computed: {
 44 |     ...mapGetters(['user'])
 45 |   }
 46 | }
 47 | </script>
 48 | 
 49 | <style lang="scss" scoped>
 50 | .card {
 51 |   box-sizing: border-box;
 52 |   width: 15rem;
 53 |   height: 12rem;
 54 |   border-radius: 48px;
 55 |   background-color: #fff;
 56 |   will-change: backgroud;
 57 |   transition: background-color ease-in-out 0.8s, height 0.8s;
 58 |   color: #989fa7;
 59 |   padding: 2rem;
 60 |   user-select: none;
 61 | 
 62 |   &.active {
 63 |     background-color: #6467f6;
 64 |     color: #fff;
 65 |     height: 15rem;
 66 | 
 67 |     .header {
 68 |       .date {
 69 |         color: #fff;
 70 |       }
 71 | 
 72 |       .type {
 73 |         .top {
 74 |           color: #c7caff;
 75 |         }
 76 | 
 77 |         .bottom {
 78 |           color: #b0b3f3;
 79 |         }
 80 |       }
 81 |     }
 82 |   }
 83 | 
 84 |   .header {
 85 |     display: flex;
 86 |     align-items: center;
 87 | 
 88 |     .date {
 89 |       font-size: 3rem;
 90 |       color: #09233a;
 91 |     }
 92 | 
 93 |     .type {
 94 |       margin-left: 1rem;
 95 |       display: flex;
 96 |       flex-direction: column;
 97 | 
 98 |       .top {
 99 |         flex: 1;
100 |         color: #acb3b7;
101 |       }
102 | 
103 |       .bottom {
104 |         color: #072b47;
105 |       }
106 |     }
107 |   }
108 | 
109 |   &.active .body {
110 |     color: #c7caff;
111 |   }
112 | 
113 |   .body {
114 |     line-height: 1.8;
115 |     color: #9599a0;
116 |   }
117 | }
118 | .btn {
119 |   background: transparent !important;
120 | 
121 |   &.next_btn.prev_btn {
122 |     display: flex;
123 |     align-items: center;
124 |     justify-content: center;
125 |     font-weight: 800;
126 |     font-size: 3rem;
127 |     height: 100%;
128 |     width: 100%;
129 |     position: relative;
130 |     transition: color 0.5s;
131 |   }
132 | 
133 |   &.next_btn.prev_btn:hover {
134 |     color: #eee;
135 |   }
136 | 
137 |   &.next_btn.prev_btn::before {
138 |     content: '';
139 |     position: absolute;
140 |     height: 12rem;
141 |     width: 12rem;
142 |     z-index: -1;
143 |     transition: opacity 0.5s;
144 |     opacity: 0;
145 |     background: radial-gradient(9rem circle, #9599a0 30%, transparent 31%);
146 |     background-position: center center;
147 |   }
148 | 
149 |   &.next_btn.prev_btn:hover::before {
150 |     opacity: 0.5;
151 |   }
152 | }
153 | </style>


--------------------------------------------------------------------------------
/src/views/Admin/dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <layout>
  3 |     <template #main>
  4 |       <!-- header start -->
  5 |       <div class="header">
  6 |         <div class="card-wrap">
  7 |           <card>
  8 |             <template #left>
  9 |               <div class="bg svg welcome"></div>
 10 |             </template>
 11 |             <template #right>
 12 |               <div class="text info">欢迎回来主人，{{user.username}} ～</div>
 13 |               <ps class="text hitokoto">
 14 |                 <div>{{hitokoto.id ? hitokoto.hitokoto + ' ———— ' + hitokoto.from : '请稍后 ...'}}</div>
 15 |               </ps>
 16 |             </template>
 17 |           </card>
 18 |           <card
 19 |             :mStyle="'grid-template-columns: 60% auto;background: #4D63BC;color: #fff!important'"
 20 |           >
 21 |             <template #left>
 22 |               <div class="text info" style="margin-top: 15px;">
 23 |                 <div>当前已有</div>
 24 |                 <div class="num">{{total || 0}}</div>
 25 |                 <div>条瞬间</div>
 26 |               </div>
 27 |             </template>
 28 |             <template #right>
 29 |               <div class="bg svg clock"></div>
 30 |             </template>
 31 |           </card>
 32 |         </div>
 33 |       </div>
 34 |       <!-- end header -->
 35 | 
 36 |       <!-- body card start  -->
 37 |       <div class="body">
 38 |         <div class v-for="moment in moments" :key="moment._id">
 39 |           <keep-alive>
 40 |             <item-card
 41 |               :time="{createdTime: moment.createdTime,modifiedTime:moment.modifiedTime}"
 42 |               :type="moment.type"
 43 |               :title="moment.content.title"
 44 |               :content="moment.content"
 45 |             />
 46 |           </keep-alive>
 47 |         </div>
 48 |       </div>
 49 |     </template>
 50 |   </layout>
 51 | </template>
 52 | 
 53 | <script>
 54 | import { mapGetters } from 'vuex'
 55 | // import MomentApi from '@/api/moment'
 56 | 
 57 | export default {
 58 |   data () {
 59 |     return {
 60 |       hitokoto: {
 61 |         hitokoto: null,
 62 |         id: null,
 63 |         from: null,
 64 |         creator: null
 65 |       }
 66 |     }
 67 |   },
 68 |   computed: {
 69 |     ...mapGetters(['user']),
 70 |     ...mapGetters(['moments']),
 71 |     ...mapGetters(['total'])
 72 |   },
 73 |   components: {
 74 |     layout: () => import('@/components/Admin/layout.vue'),
 75 |     card: () => import('@/components/Admin/card.vue'),
 76 |     itemCard: () => import('@/components/Admin/item-card.vue')
 77 |   },
 78 |   created () {
 79 |     // get hitokoto
 80 |     import('axios').then(axios => {
 81 |       axios.get('https://v1.hitokoto.cn/').then(res => {
 82 |         this.hitokoto = res.data
 83 |       })
 84 |     })
 85 |   }
 86 | }
 87 | </script>
 88 | 
 89 | <style lang="scss" scoped>
 90 | .header {
 91 |   margin-bottom: 50px;
 92 | }
 93 | .card-wrap {
 94 |   display: grid;
 95 |   grid-template-columns: 61.8% auto;
 96 |   grid-gap: 20px;
 97 |   height: 150px;
 98 | }
 99 | 
100 | .bg.svg {
101 |   position: absolute;
102 |   top: 0;
103 |   bottom: 0;
104 |   right: 0;
105 |   left: 0;
106 |   background-position: center;
107 |   background-size: cover;
108 |   background-repeat: no-repeat;
109 |   background-size: 100%;
110 | 
111 |   &.welcome {
112 |     background-image: url('./../../assets/1.svg');
113 |   }
114 |   &.clock {
115 |     background-image: url('./../../assets/2.svg');
116 |   }
117 | }
118 | .hitokoto {
119 |   max-height: 90px;
120 | }
121 | @import '@/scss/_viewport.scss';
122 | @media (max-width: $small) {
123 |   .card-wrap {
124 |     grid-template-columns: auto;
125 |     grid-template-rows: repeat(2, 133px);
126 |     grid-gap: 20px;
127 |     height: unset
128 |   }
129 | }
130 | </style>


--------------------------------------------------------------------------------
/src/views/Admin/setting/reset.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <layout>
  3 |     <template #main>
  4 |       <small>忘记了什么都不能忘记我哦</small>
  5 | 
  6 |       <form action method="post" @submit.prevent="submit">
  7 |         <input type="password" name="oldPassword" v-model="master.oldPassword" placeholder=" " />
  8 |         <label for>原密码</label>
  9 |         <input
 10 |           type="password"
 11 |           name="password"
 12 |           @blur="checkPass"
 13 |           v-model="master.password"
 14 |           placeholder=" "
 15 |         />
 16 |         <label for>重置密码</label>
 17 |         <input type="password" name="confirmPass" v-model="master.confirmPass" placeholder=" " />
 18 |         <label for>重复一遍</label>
 19 |         <div class="btn-nav">
 20 |           <div class="btn" @click="submit">提交</div>
 21 |         </div>
 22 |       </form>
 23 |     </template>
 24 |   </layout>
 25 | </template>
 26 | 
 27 | <script>
 28 | import { checkPass, resetPass } from '@/api/master'
 29 | export default {
 30 |   components: {
 31 |     layout: () => import('@/components/Admin/layout.vue')
 32 |   },
 33 |   data () {
 34 |     return {
 35 |       master: {
 36 |         oldPassword: '',
 37 |         password: '',
 38 |         confirmPass: '',
 39 |       },
 40 |     }
 41 |   },
 42 |   methods: {
 43 |     async submit () {
 44 | 
 45 |       if (this.master.password !== this.master.confirmPass) {
 46 |         this.$msg({ msg: '两次密码输入不匹配', type: 'error' })
 47 |         throw new Error('请输入用户名')
 48 |       }
 49 |       const { data } = await resetPass(this.master)
 50 |       if (data.ok === 1) {
 51 |         this.$msg({ msg: data.msg })
 52 |         this.$router.push('/login')
 53 |       }
 54 |     },
 55 |     async checkPass () {
 56 |       const { data } = await checkPass(this.master.password)
 57 |       if (data.ok === 1) {
 58 |         return
 59 |       } else {
 60 |         this.$msg({ msg: data.msg, type: 'error' })
 61 |         throw new Error(data.msg)
 62 |       }
 63 |     }
 64 |   }
 65 | }
 66 | </script>
 67 | 
 68 | <style lang="scss" scoped>
 69 | small {
 70 |   color: #cccccc;
 71 | }
 72 | form {
 73 |   margin-top: 4rem;
 74 |   padding: 0 1rem;
 75 |   line-height: 1.5;
 76 |   max-width: 500px;
 77 |   label {
 78 |     font-family: Arial, Helvetica, sans-serif;
 79 |     display: inline-block;
 80 |     transform: translateY(-200%);
 81 |     transition: transform 0.5s, opacity 0.5s;
 82 |     cursor: text;
 83 |     user-select: none;
 84 |     position: relative;
 85 |     // z-index: -1;
 86 |     pointer-events: none;
 87 |     color: #bcbcbb;
 88 |   }
 89 |   input:focus + label,
 90 |   textarea:focus + label {
 91 |     transform: translateY(-300%);
 92 |   }
 93 |   input[type='text'],
 94 |   input[type='password'] {
 95 |     font-family: Arial, Helvetica, sans-serif;
 96 |     &:not(:focus):not(:placeholder-shown) + label {
 97 |       opacity: 0;
 98 |     }
 99 |   }
100 | }
101 | 
102 | input:focus,
103 | textarea:focus {
104 |   background: linear-gradient(90deg, #794af5 16%, #92d6fe 84%) no-repeat;
105 |   background-position: bottom;
106 |   background-size: 100% 2px;
107 |   animation: toright 0.5s forwards;
108 | }
109 | input,
110 | textarea {
111 |   outline: none;
112 |   border: none;
113 |   background: linear-gradient(to bottom, transparent 90%, #f2f2f2 91%);
114 |   width: 100%;
115 |   line-height: 2;
116 |   font-size: 16px;
117 |   margin-bottom: 1rem;
118 | }
119 | .btn-nav {
120 |   text-align: center;
121 | }
122 | .btn {
123 |   padding: 0.5rem 2rem;
124 |   background: #65c1ff;
125 |   display: inline-block;
126 |   border-radius: 48px;
127 |   color: #fff;
128 |   cursor: pointer;
129 |   user-select: none;
130 |   transition: cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
131 | }
132 | .btn:hover {
133 |   background: #2ecc71;
134 | }
135 | </style>


--------------------------------------------------------------------------------
/DEV.md:
--------------------------------------------------------------------------------
  1 | # 一瞬
  2 | 
  3 | 一瞬 (Moment), 是我接下来要做的一个项目，目的显而易见，就是希望它能够记录下生活中的美好瞬间。
  4 | 
  5 | <del>这个项目是一个未成品，它仅仅是一个前端，所有的数据全部来自于 Mock.js 的接口模拟。但是它将作为一瞬的前端。</del>
  6 | 
  7 | 后端开始开发。开发中..... <del>咕咕咕咕</del>
  8 | 
  9 | 后端使用 Express + MongoDB 开发。存档地址： <https://github.com/Innei/Moment-server>
 10 | 
 11 | preview: (前端+后台)
 12 | 
 13 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191020211642.png)
 14 | 
 15 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152019.png)
 16 | 
 17 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152039.png)
 18 | 
 19 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152106.png)
 20 | 
 21 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119152131.png)
 22 | 
 23 | ![](https://raw.githubusercontent.com/Innei/img-bed/master/20191119153624.png)
 24 | 
 25 | Demo 地址: （Mock.js模拟，或页面已过期，请手动构建）
 26 | 
 27 | [Moment](https://preview.shizuri.net/moment)
 28 | 
 29 | ## 快速开始
 30 | 
 31 | 即刻构建此项目，你只需要
 32 | 
 33 | ```bash
 34 | git clone https://github.com/Innei/moment.git
 35 | cd moment
 36 | yarn
 37 | yarn serve
 38 | ```
 39 | 
 40 | 打开访问 `http://localhost:8080`
 41 | 
 42 | 要使用开发模式，请 clone 后端配合使用。
 43 | 
 44 | [Moment-server](https://github.com/Innei/Moment-server)
 45 | 
 46 | ## 接口格式
 47 | 
 48 | 所有接口格式位于 `mock` 目录中，更为详细的 `json` 位于 `@api`
 49 | 
 50 | <span style="color=red">接口格式可能有更新!!</span>
 51 | 
 52 | 所有接口前缀统一为 `api`, 接口地址为 `api/` 加上 `baseUrl`
 53 | 
 54 | 
 55 | 
 56 | **以下接口在后端中已全部实现，更多接口正在开发**
 57 | 
 58 | 
 59 | 
 60 | ### 获取主人信息
 61 | 
 62 | 基本信息:
 63 | 
 64 | baseUrl: `/master`
 65 | 
 66 | ```jsonc
 67 | // get /
 68 | {
 69 |   "username": "Innei", // 主人名
 70 |   "userId": "1", // id
 71 |   "avatar": "http://q1.qlogo.cn/g?b=qq&nk=1003521738&s=640", // 头像地址
 72 |   "nickname": "Moment", // 别名
 73 |   "githubUrl": "https://github.com/Innei" // 可选 GitHub 地址
 74 | }
 75 | ```
 76 | 
 77 | 首页介绍:
 78 | 
 79 | ```jsonc
 80 | // get /introduce
 81 | {
 82 |   "ok": 1, // 状态
 83 |   "userId": 1, // uid
 84 |   "introduce": "我是一个练习时长两年半的个人练习生, xxx", // 介绍
 85 |   "skill": { // 技能树 (0 - 100)
 86 |     "Java": 70,
 87 |     "JavaScript": 50,
 88 |     "Vue": 90
 89 |   }
 90 | }
 91 | ```
 92 | 
 93 | ### 获取瞬间列表
 94 | 
 95 | baseUrl: `/moments`
 96 | 
 97 | 请求方式为 `GET`
 98 | 
 99 | 携带参数可选 `size` `page`
100 | 
101 | ```jsonc
102 | {
103 |   "ok": 1,                               // 状态
104 |   "pageOptions": {
105 |     "size": 10,                          // 页大小
106 |     "currentPage": 1,                    // 当前页
107 |     "totalPage": 1,                      // 总页
108 |     "hasNextPage": false,                // 是否有下一页
109 |     "hasPrevPage": false,                // 是否有上一页
110 |   },
111 |   "data": [ // 数据
112 |     {
113 |       "_id": 1, // MongoDB objectID 或者 其他 ID
114 |       "createdTime": 1571299457065, // 13位时间截 创建时间
115 |       "modifiedTime": 1571299777065,
116 |       "type": "moment", // 类型 moment picture idea hitokoto 4选1, content 有所不同
117 |       "content": {
118 |         "title": "这是一条瞬间", 
119 |         "body": "今天的天气真好",
120 |         "mood": "开心",
121 |         "weather": "Sunny"
122 |       }
123 |     },
124 |     {
125 |       "_id": 2,
126 |       "createdTime": 1571399457065,
127 |       "modifiedTime": 1571399777065,
128 |       "type": "hitokoto",
129 |       "content": {
130 |         "source": "yiny",
131 |         "body": "今天的天气真好"
132 |       }
133 |     },
134 |     {
135 |       "_id": 3,
136 |       "createdTime": 1571299457065,
137 |       "modifiedTime": 1571299777065,
138 |       "type": "idea",
139 |       "content": {
140 |         "body": "今天的天气真好"
141 |       }
142 |     },
143 |     {
144 |       "_id": 4,
145 |       "createdTime": 1571299457065,
146 |       "modifiedTime": 1571299777065,
147 |       "type": "picture",
148 |       "content": {
149 |         "src": "https://i.loli.net/2019/08/18/vGNB4oOepVA6lPQ.jpg"
150 |       }
151 |     }]
152 | }
153 | 
154 | ```
155 | 
156 | 欢迎大佬们，能参与到一瞬的开发中去。
157 | 


--------------------------------------------------------------------------------
/src/components/Admin/layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layout">
  3 |     <div class="toggle" @click="toggleSidebar" :class="{active: sidebar}">
  4 |       <font-awesome-icon :icon="['fas', 'sliders-h']"></font-awesome-icon>
  5 |     </div>
  6 |     <header :style="options.noPadding ? 'padding: 0.5rem 0;' : ''">
  7 |       <span class="title">{{$route.meta.title.split('--')[0]}}</span>
  8 |       <div class="btn" @click="$emit('btn-click')" v-if="$slots.header">
  9 |         <slot name="header"></slot>
 10 |         <!-- <div class="name">
 11 |         </div>
 12 |         <div class="add">
 13 |           <font-awesome-icon :icon="['fas', 'plus']"></font-awesome-icon>
 14 |         </div>-->
 15 |       </div>
 16 |     </header>
 17 | 
 18 |     <main @click="handleClick">
 19 |       <slot name="main" />
 20 |     </main>
 21 | 
 22 |     <footer></footer>
 23 |   </div>
 24 | </template>
 25 | <script>
 26 | import { mapGetters, mapActions } from 'vuex'
 27 | export default {
 28 |   computed: {
 29 |     ...mapGetters(['sidebar'])
 30 |   },
 31 |   methods: {
 32 |     ...mapActions(['toggleSidebar', 'closeSidebar']),
 33 |     handleClick () {
 34 |       this.closeSidebar()
 35 |     }
 36 |   },
 37 |   props: {
 38 |     options: {
 39 |       type: Object,
 40 |       default () {
 41 |         return {}
 42 |       }
 43 |     }
 44 |   }
 45 | }
 46 | </script>
 47 | <style lang="scss" scoped>
 48 | .layout {
 49 |   position: absolute;
 50 |   top: 0;
 51 |   bottom: 0;
 52 |   right: 0;
 53 |   left: 0;
 54 |   overflow: auto;
 55 |   margin: 0 3rem 0;
 56 | 
 57 |   header {
 58 |     position: sticky;
 59 |     background: rgba($color: #fff, $alpha: 0.3);
 60 |     backdrop-filter: blur(5px);
 61 |     z-index: 3;
 62 |     padding: 3rem 0.8rem 0.5rem;
 63 |     border-radius: 0 0 12px 12px;
 64 |     top: -1rem;
 65 |     display: flex;
 66 |     justify-content: space-between;
 67 |     margin-bottom: 2.5rem;
 68 |     .title {
 69 |       font-size: 1.5rem;
 70 |       user-select: none;
 71 |       align-items: center;
 72 |       display: flex;
 73 |     }
 74 | 
 75 |     .btn {
 76 |       background: #1188e8;
 77 |       padding: 1rem 2rem;
 78 |       border-radius: 24px;
 79 |       color: #fff;
 80 |       user-select: none;
 81 |       cursor: pointer;
 82 |       display: flex;
 83 |       justify-content: space-between;
 84 |       position: relative;
 85 |       .name {
 86 |         margin-right: 2rem;
 87 |       }
 88 |       .icon {
 89 |         position: absolute;
 90 |         top: 0;
 91 |         bottom: 0;
 92 |         right: 0;
 93 |         z-index: 1;
 94 |         padding: 1rem;
 95 |         font-size: 16px;
 96 |       }
 97 |       .icon::before {
 98 |         content: '';
 99 |         position: absolute;
100 |         top: 1px;
101 |         bottom: 1px;
102 |         right: 0;
103 |         left: 0;
104 |         // margin: 0.3rem;
105 |         border-radius: 50%;
106 |         background: #379af1;
107 |         z-index: -1;
108 |         height: 36px;
109 |         width: 36px;
110 |         display: flex;
111 |         margin: auto;
112 |       }
113 |       // line-height: 1.5;
114 |     }
115 |   }
116 | }
117 | footer {
118 |   margin-bottom: 50px;
119 | }
120 | .toggle {
121 |   display: none;
122 | }
123 | @import '@/scss/_viewport.scss';
124 | @media (max-width: $small) {
125 |   .layout {
126 |     margin: 0;
127 |     header {
128 |       border-radius: unset;
129 |       .title {
130 |         margin-left: 15px;
131 |       }
132 |     }
133 |     main {
134 |       margin: 0 30px;
135 |     }
136 |   }
137 | 
138 |   .toggle {
139 |     display: flex;
140 |     justify-content: center;
141 |     align-items: center;
142 |     position: fixed;
143 |     top: 0;
144 |     left: 0;
145 |     height: 30px;
146 |     width: 30px;
147 |     z-index: 9;
148 |     padding: 12px;
149 |     border-radius:  0 0 12px 0;
150 |     box-sizing: border-box;
151 |     background: #1188e8;
152 |     color: #fff;
153 |     transition: background 0.5s, left 0.5s;
154 |     &.active {
155 |       background: #25b282;
156 |       left: 175px;
157 |     }
158 |   }
159 | }
160 | </style>


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Router from 'vue-router'
  3 | import Home from './views/Home.vue'
  4 | import master from '@/api/master'
  5 | 
  6 | Vue.use(Router)
  7 | 
  8 | const router = new Router({
  9 |   routes: [
 10 |     {
 11 |       name: 'home',
 12 |       path: '/',
 13 |       component: Home,
 14 |       meta: { title: 'Moment' }
 15 |     },
 16 |     {
 17 |       name: 'init',
 18 |       path: '/init',
 19 |       component: () =>
 20 |         import(/* webpackChunkName: "init" */ '@/views/Init.vue'),
 21 |       meta: { once: true, title: 'おかえりなさいご主人様 -- Moment' }
 22 |     },
 23 |     {
 24 |       name: 'login',
 25 |       path: '/login',
 26 |       component: () =>
 27 |         import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
 28 |       meta: { title: '登陆 -- Moment' }
 29 |     },
 30 |     {
 31 |       name: 'admin',
 32 |       path: '/master',
 33 |       meta: { private: true, title: ' -- Moment' },
 34 |       component: () =>
 35 |         import(/* webpackChunkName: "master" */ '@/views/Admin/index.vue'),
 36 |       redirect: '/master/dashboard',
 37 |       children: [
 38 |         {
 39 |           path: 'dashboard',
 40 |           component: () =>
 41 |             import(
 42 |               /* webpackChunkName: "dashboard" */ '@/views/Admin/dashboard.vue'
 43 |             ),
 44 |           meta: { title: '仪表盘' }
 45 |         },
 46 |         {
 47 |           path: 'moments',
 48 |           component: () =>
 49 |             import(
 50 |               /* webpackChunkName: "manageMoment" */ '@/views/Admin/manageMoment.vue'
 51 |             ),
 52 |           meta: { title: '管理瞬间' }
 53 |         },
 54 |         {
 55 |           path: 'analytics',
 56 |           component: () =>
 57 |             import(
 58 |               /* webpackChunkName: "analyse" */ '@/views/Admin/setting/index.vue'
 59 |             ),
 60 |           redirect: '/master/analytics/chart',
 61 |           children: [
 62 |             {
 63 |               path: 'chart',
 64 |               meta: { title: '图表' },
 65 |               component: () =>
 66 |                 import(
 67 |                   /* webpackChunkName: "chart" */ '@/views/Admin/analyse/chart.vue'
 68 |                 )
 69 |             },
 70 |             {
 71 |               path: 'table',
 72 |               meta: { title: '访客数据' },
 73 |               component: () =>
 74 |                 import(
 75 |                   /* webpackChunkName: "table" */ '@/views/Admin/analyse/table.vue'
 76 |                 )
 77 |             }
 78 |           ]
 79 |         },
 80 |         {
 81 |           path: 'setting',
 82 |           component: () =>
 83 |             import(
 84 |               /* webpackChunkName: "setting" */ '@/views/Admin/setting/index.vue'
 85 |             ),
 86 |           redirect: '/master/setting/profile',
 87 |           children: [
 88 |             {
 89 |               path: 'profile',
 90 |               meta: { title: '主人信息' },
 91 |               component: () =>
 92 |                 import(
 93 |                   /* webpackChunkName: "profile" */ '@/views/Admin/setting/profile.vue'
 94 |                 )
 95 |             },
 96 |             {
 97 |               path: 'reset',
 98 |               meta: { title: '修改密码' },
 99 |               component: () =>
100 |                 import(
101 |                   /* webpackChunkName: "reset" */ '@/views/Admin/setting/reset.vue'
102 |                 )
103 |             }
104 |           ]
105 |         }
106 |       ]
107 |     }
108 |   ]
109 | })
110 | 
111 | router.beforeEach(async (to, from, next) => {
112 |   // 用这种方式去获取父路由的 meta 信息
113 |   if (to.matched.some(r => r.meta.private)) {
114 |     const { data } = await master.checkLogged()
115 |     if (data.ok === 1) {
116 |       return next()
117 |     } else {
118 |       return next({ name: 'login' })
119 |     }
120 |   }
121 |   next()
122 | })
123 | 
124 | router.afterEach(to => {
125 |   const titleArr = []
126 |   to.matched.map(i => titleArr.unshift(i.meta.title))
127 | 
128 |   if (to.meta.title) {
129 |     // document.title = to.meta.title
130 |     document.title = titleArr.join('')
131 |   }
132 | })
133 | export default router
134 | 


--------------------------------------------------------------------------------
/src/components/Home/information.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="info">
  3 |     <div class="header">
  4 |       <div class="name">
  5 |         <div class="nick-name">{{ data.nickname}}</div>
  6 |         <div class="username">{{ data.username }}</div>
  7 |       </div>
  8 |       <a :href="data.githubUrl" v-if="data.githubUrl">
  9 |         <div class="link">
 10 |           <font-awesome-icon :icon="['fab','github']" />
 11 |         </div>
 12 |       </a>
 13 |     </div>
 14 |     <!--    end header  -->
 15 |     <div class="body">
 16 |       <p class="title" v-if="$slots.introduce">introduce</p>
 17 |       <slot name="introduce"></slot>
 18 |       <div class="skill" v-if="!ObjectIsEmpty(skill)">
 19 |         <p class="title">Skill</p>
 20 |         <skill v-for="(val,name) in skill" :key="name" :name="name" :score="Number(val)"></skill>
 21 |       </div>
 22 |     </div>
 23 |     <div class="post-new" @click="$emit('post-new')" v-if="showPostBtn && isLogged">
 24 |       <font-awesome-icon :icon="['fas', 'edit']" />
 25 |     </div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import { mapGetters } from 'vuex'
 31 | import skill from '@/components/Home/skill-item.vue'
 32 | 
 33 | export default {
 34 |   props: {
 35 |     skill: {
 36 |       type: Object,
 37 |       default () {
 38 |         return {}
 39 |       }
 40 |     },
 41 |     showPostBtn: {
 42 |       type: Boolean,
 43 |       require: true
 44 |     }
 45 |   },
 46 |   components: {
 47 |     skill
 48 |   },
 49 |   computed: {
 50 |     ...mapGetters({
 51 |       data: 'user',
 52 |       isLogged: 'isLogged'
 53 |     })
 54 |   },
 55 |   methods: {
 56 |     ObjectIsEmpty (obj) {
 57 |       return JSON.stringify(obj) === '{}'
 58 |     }
 59 |   }
 60 | }
 61 | </script>
 62 | 
 63 | <style lang="scss" scoped>
 64 | .title {
 65 |   text-align: center;
 66 |   user-select: none;
 67 | }
 68 | .skill {
 69 |   margin-top: 4rem;
 70 | }
 71 | .info {
 72 |   display: flex;
 73 |   align-items: center;
 74 |   flex-direction: column;
 75 |   height: calc(100vh - 6.875rem);
 76 |   overflow: scroll;
 77 |   position: relative;
 78 | 
 79 |   .header {
 80 |     display: flex;
 81 |     flex-direction: row;
 82 |     position: relative;
 83 |     margin-bottom: 4rem;
 84 | 
 85 |     .name {
 86 |       flex: 0.8;
 87 |       display: flex;
 88 |       flex-direction: column;
 89 | 
 90 |       .nick-name {
 91 |         color: #4c5f6a;
 92 |         font-size: 2.1rem;
 93 |         margin-bottom: 1rem;
 94 |         /*margin-left: .5rem;*/
 95 |       }
 96 | 
 97 |       .username {
 98 |         color: #043046;
 99 |         font-size: 3rem;
100 |       }
101 |     }
102 | 
103 |     .link {
104 |       flex: 1;
105 |       position: absolute;
106 |       top: 50%;
107 |       transform: translateY(-50%);
108 |       right: -3rem;
109 |       font-size: 2rem;
110 |     }
111 | 
112 |     @media (max-width: 756px) {
113 |       .link {
114 |         /*right: 0;*/
115 |         top: 30%;
116 |       }
117 |     }
118 |   }
119 | 
120 |   .body {
121 |     color: #c7cbca;
122 |     min-width: 13rem;
123 |   }
124 | 
125 |   .post-new {
126 |     cursor: pointer;
127 |     position: absolute;
128 |     right: 15px;
129 |     bottom: 15px;
130 |     height: 3rem;
131 |     width: 3rem;
132 |     background: #6467f6;
133 |     border-radius: 50%;
134 |     color: #eee;
135 |     display: flex;
136 |     justify-content: center;
137 |     align-items: center;
138 |     font-weight: 800;
139 |     font-size: 1.3rem;
140 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
141 |     transition: box-shadow 0.5s;
142 |     animation: scale 0.5s forwards ease-in-out;
143 | 
144 |     &:hover {
145 |       box-shadow: none;
146 |     }
147 |     svg {
148 |       transform: translateX(1.7px);
149 |     }
150 | 
151 |     @media (max-width: 568px) {
152 |       & {
153 |         right: 30px;
154 |         bottom: 50px;
155 |         height: 5rem;
156 |         width: 5rem;
157 |         font-size: 2rem;
158 |       }
159 |     }
160 |   }
161 | }
162 | 
163 | @keyframes scale {
164 |   0% {
165 |     transform: scale(0);
166 |   }
167 |   to {
168 |     transform: scale(1);
169 |   }
170 | }
171 | </style>


--------------------------------------------------------------------------------
/src/components/Home/swiper.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <swiper :options="swiperOption" class="swiper" ref="swiper">
  3 |     <!--      <card-slide :isActive="true" :data="data.data[0]" :date="parseDate(data.data[0].createdTime)"></card-slide>-->
  4 |     <card-slide
  5 |       :data="{ icon: ['fas','arrow-left'] }"
  6 |       v-if="pageOptions.hasPrevPage"
  7 |       @click.native="$emit('slide_btn-clicked', 'prev')"
  8 |     />
  9 |     <card-slide
 10 |       v-for="item in moments.data"
 11 |       :key="item._id"
 12 |       :data="item"
 13 |       :isActive="activeItem === -1 ? false : item.index === activeItem % pageOptions.size"
 14 |       :date="parseDate(item.createdTime)"
 15 |       @click.native="handleClick(item.index)"
 16 |       class="slide"
 17 |     ></card-slide>
 18 |     <card-slide
 19 |       :data="{ icon: ['fas','arrow-right'] }"
 20 |       v-if="pageOptions.hasNextPage"
 21 |       @click.native="$emit('slide_btn-clicked', 'next')"
 22 |     />
 23 |   </swiper>
 24 | </template>
 25 | 
 26 | <script>
 27 | import 'swiper/dist/css/swiper.css'
 28 | 
 29 | import { swiper } from 'vue-awesome-swiper'
 30 | import cardSlide from '@/components/Home/slide.vue'
 31 | 
 32 | export default {
 33 |   components: {
 34 |     swiper,
 35 |     cardSlide
 36 |   },
 37 |   props: {
 38 |     moments: {                   // 这个 data 是响应数据, data.data 是瞬间列表
 39 |       type: Object,
 40 |       required: true
 41 |     },
 42 |     swiperOptions: {
 43 |       type: Object
 44 |     },
 45 |     viewport: {
 46 |       type: Object
 47 |     },
 48 |     pageOptions: {
 49 |       type: Object,
 50 |       required: true
 51 |     }
 52 |   },
 53 |   data () {
 54 |     return {
 55 |       activeItem: this.viewport.is768 || this.viewport.is568 ? -1 : 0,
 56 |       swiperOption: {
 57 |         slidesPerView: 6,
 58 |         spaceBetween: 16,
 59 |         slideToClickedSlide: true,
 60 |         centeredSlides: true,
 61 |         observer: true,
 62 |         observeParents: true,
 63 |         autoplay: false,
 64 |         delay: 3000,
 65 |         mousewheel: true,
 66 |         ...this.swiperOptions
 67 |         // freeMode: true,
 68 |       },
 69 |       interval: null
 70 |     }
 71 |   },
 72 |   created () {
 73 |     let index = 0
 74 |     if (this.moments.data)
 75 |       this.moments.data.map(item => {
 76 |         item.index = index++
 77 |       })
 78 | 
 79 |     if (this.swiperOption.autoplay) {
 80 |       this.interval = setInterval(() => {
 81 |         this.activeItem++
 82 |         this.$emit('switch', this.activeItem)
 83 |       }, this.swiperOption.delay || 3000)
 84 |     }
 85 | 
 86 |   },
 87 |   mounted () {
 88 |     this.updateSlidesPerview(this.viewport)
 89 |   },
 90 |   watch: {
 91 |     moments (n) {
 92 |       let index = 0
 93 |       n.data.map(item => {
 94 |         item.index = index++
 95 |       })
 96 |       this.data = n
 97 |       this.$refs.swiper.swiper.slideTo(this.pageOptions.hasPrevPage ? 1 : 0)
 98 |       this.activeItem = 0
 99 |     },
100 |     viewport (n) {
101 |       this.updateSlidesPerview(n)
102 |     }
103 |   },
104 |   methods: {
105 |     updateSlidesPerview (n) {
106 |       if (n.is568) this.swiperOption.slidesPerView = 2
107 |       else if (n.is768) this.swiperOption.slidesPerView = 3
108 |       else if (n.is1024) this.swiperOption.slidesPerView = 4
109 |       else if (n.is1600) this.swiperOption.slidesPerView = 8
110 |       else this.swiperOption.slidesPerView = 6
111 |       this.$refs.swiper.swiper.destroy()   //先销毁
112 |       this.$refs.swiper.mountInstance()   //后在加载
113 |     },
114 |     parseDate (date) {
115 |       const d = new Date(date)
116 |       const dateObj = {
117 |         date: d.getDate(),
118 |         my: `${d.getMonth() + 1} / ${d.getFullYear() - 2000}`
119 |       }
120 |       return dateObj
121 |     },
122 |     handleClick (index) {
123 |       this.activeItem = index
124 |       this.$emit('switch', this.activeItem)
125 |       this.interval = clearInterval(this.interval)
126 |     },
127 | 
128 |   },
129 |   destroyed () {
130 |     clearInterval(this.interval)
131 |     this.interval = null
132 |   }
133 | }
134 | </script>
135 | 
136 | <style lang="scss">
137 | .swiper-wrapper {
138 |   @for $var from 0 to 6 {
139 |     & > div.card:nth-child(#{$var + 1}n) {
140 |       animation: scale 0.5s forwards;
141 |       animation-delay: $var * 0.1s;
142 |       transform: scale(0);
143 |     }
144 |   }
145 | }
146 | @keyframes scale {
147 |   0% {
148 |     transform: scale(0);
149 |   }
150 |   to {
151 |     transform: scale(1);
152 |   }
153 | }
154 | </style>
155 | <style lang="scss" scoped>
156 | .swiper {
157 |   padding: 0 1rem;
158 | }
159 | </style>


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrap">
  3 |     <header>
  4 |       <span>MOMENT</span>
  5 |     </header>
  6 |     <main>
  7 |       <h1>ご主人様、おかえり</h1>
  8 | 
  9 |       <h2>Login</h2>
 10 |       <form class="form" :action="postUrl" method="post">
 11 |         <input
 12 |           type="text"
 13 |           name="username"
 14 |           id="username"
 15 |           v-model="master.username"
 16 |           autocomplete="off"
 17 |           placeholder=" "
 18 |         />
 19 |         <label for="username">Master Name</label>
 20 | 
 21 |         <input
 22 |           type="password"
 23 |           name="password"
 24 |           id="password"
 25 |           v-model="master.password"
 26 |           autocomplete="off"
 27 |           placeholder=" "
 28 |           @keyup.enter="login"
 29 |         />
 30 |         <label for="password">Password</label>
 31 |       </form>
 32 |       <div class="nav">
 33 |         <button class="btn next" @click.prevent="login">Login</button>
 34 |       </div>
 35 |     </main>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | import masterApi from '@/api/master'
 41 | import { mapGetters, mapActions } from 'vuex'
 42 | export default {
 43 |   data () {
 44 |     return {
 45 |       postUrl: process.env.development ? 'http://localhost:3000/api/master/login' : '/api/master/login',
 46 |       master: {
 47 |         username: '',
 48 |         password: ''
 49 |       }
 50 |     }
 51 |   },
 52 |   async beforeRouteEnter (to, from, next) {
 53 |     const { data } = await masterApi.checkToken()
 54 | 
 55 |     if (data.ok === 1) {
 56 |       return next({ name: 'admin' })
 57 |     }
 58 |     next()
 59 |   },
 60 |   methods: {
 61 |     async login () {
 62 |       const { data } = await masterApi.login(this.master)
 63 |       if (data.ok === 1) {
 64 |         this.$msg({ msg: '登陆成功' })
 65 |         localStorage.token = data.token
 66 |         this.setToken(data.token)
 67 |         this.$router.push({ name: 'admin' })
 68 |         this.setLogged(true)
 69 |       }
 70 |     },
 71 |     ...mapActions(['checkLogged', 'setLogged', 'setToken'])
 72 |   },
 73 |   computed: {
 74 |     ...mapGetters(['isLogged'])
 75 |   }
 76 | }
 77 | </script>
 78 | 
 79 | 
 80 | <style lang="scss" scoped>
 81 | // #BCBBBB
 82 | .wrap {
 83 |   padding: 4rem 3rem;
 84 |   position: relative;
 85 |   min-height: 100vh;
 86 | }
 87 | input:focus,
 88 | textarea:focus {
 89 |   background: linear-gradient(90deg, #794af5 16%, #92d6fe 84%) no-repeat;
 90 |   background-position: bottom;
 91 |   background-size: 100% 2px;
 92 |   animation: toright 0.5s forwards;
 93 | }
 94 | input,
 95 | textarea {
 96 |   outline: none;
 97 |   border: none;
 98 |   background: linear-gradient(to bottom, transparent 90%, #f2f2f2 91%);
 99 |   width: 100%;
100 |   line-height: 2;
101 |   font-size: 16px;
102 |   margin-bottom: 1rem;
103 | }
104 | main {
105 |   margin-top: calc(20vh - 4rem) !important;
106 |   max-width: 90vw;
107 |   margin: auto;
108 |   width: calc(1.5rem * 20);
109 | 
110 |   @media (max-width: 578px) {
111 |     width: auto;
112 |   }
113 |   small,
114 |   label {
115 |     color: #bcbcbb;
116 |   }
117 |   form {
118 |     margin-top: 4rem;
119 |     padding: 0 1rem;
120 |     line-height: 1.5;
121 |     label {
122 |       font-family: Arial, Helvetica, sans-serif;
123 |       display: block;
124 |       transform: translateY(-200%);
125 |       transition: transform 0.5s, opacity 0.5s;
126 |       cursor: text;
127 |       user-select: none;
128 |       position: relative;
129 |       pointer-events: none;
130 |     }
131 |     input:focus + label,
132 |     textarea:focus + label {
133 |       transform: translateY(-300%);
134 |     }
135 |     input[type='text'],
136 |     input[type='password'] {
137 |       font-family: Arial, Helvetica, sans-serif;
138 |       &:not(:focus):not(:placeholder-shown) + label {
139 |         opacity: 0;
140 |       }
141 |     }
142 |   }
143 | }
144 | .nav {
145 |   display: flex;
146 |   justify-content: center;
147 |   align-items: center;
148 |   padding: 0 1rem;
149 |   .btn {
150 |     width: 48%;
151 |     padding: 0.5rem 1rem;
152 |     font-size: 1.5rem;
153 |     line-height: 1.5;
154 |     border-radius: 6px;
155 |     outline: none;
156 |     font-family: Arial, Helvetica, sans-serif;
157 |     margin-right: 2rem;
158 |     &:last-child {
159 |       margin: 0;
160 |     }
161 | 
162 |     &.next,
163 |     &.submit {
164 |       background-image: linear-gradient(90deg, #7e7af8 16%, #58a8fb 84%);
165 |       color: #fff;
166 |     }
167 |   }
168 | }
169 | 
170 | @keyframes toright {
171 |   0% {
172 |     background-position: -30rem 100%;
173 |   }
174 |   to {
175 |     background-position: bottom;
176 |   }
177 | }
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/views/Admin/manageMoment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <layout
  3 |     @btn-click="
  4 |       $parent.$data.dialogs.post = true
  5 |       $parent.$data.editData = null
  6 |     "
  7 |   >
  8 |     <template #header>
  9 |       <div class="name">
 10 |         <div class>New Moment</div>
 11 |       </div>
 12 |       <div class="icon">
 13 |         <font-awesome-icon :icon="['fas', 'plus']"></font-awesome-icon>
 14 |       </div>
 15 |     </template>
 16 | 
 17 |     <template #main>
 18 |       <Table
 19 |         :data="data"
 20 |         :cols="cols"
 21 |         :options="options"
 22 |         :page="page"
 23 |         @to="handleTo"
 24 |         @v-edit="handleEdit"
 25 |         @v-del="handleDel"
 26 |         class="table"
 27 |       ></Table>
 28 |     </template>
 29 |   </layout>
 30 | </template>
 31 | 
 32 | <script>
 33 | import api from '@/api/moment'
 34 | import moment from 'moment'
 35 | import { pick } from '@/utils'
 36 | 
 37 | import { mapGetters, mapActions } from 'vuex'
 38 | export default {
 39 |   components: {
 40 |     layout: () => import('@/components/Admin/layout.vue'),
 41 |     Table: () => import('@/components/Admin/Table/table.vue')
 42 |   },
 43 |   computed: {
 44 |     ...mapGetters(['isPost'])
 45 |   },
 46 |   async created() {
 47 |     const { data } = await api.getRecentlyMoment({ size: this.size, page: 1 })
 48 |     this.data = this.filterData(data)
 49 |   },
 50 |   watch: {
 51 |     isPost(val) {
 52 |       if (val) {
 53 |         this.reload()
 54 |         this.resetPost()
 55 |       }
 56 |     }
 57 |   },
 58 |   methods: {
 59 |     ...mapActions(['togglePost', 'resetPost']),
 60 |     filterData(data) {
 61 |       this.oData = data.data // 原始数据挂载 不需要响应式
 62 |       this.page = Object.assign({}, data.pageOptions)
 63 | 
 64 |       const filter = []
 65 | 
 66 |       for (const d of data.data) {
 67 |         filter.push(pick(d, ['createdTime', 'modifiedTime', 'type', '_id']))
 68 |       }
 69 | 
 70 |       filter.map((item, i) => {
 71 |         item.createdTime = this.parseDate(item.createdTime)
 72 |         item.modifiedTime = this.parseDate(item.modifiedTime)
 73 |         item.desc =
 74 |           data.data[i].content.body || data.data[i].content.comment || ''
 75 |       })
 76 |       return filter
 77 |     },
 78 |     parseDate(date) {
 79 |       return moment(new Date(Number(date))).format('YYYY-MM-DD HH:mm:ss')
 80 |     },
 81 |     async handleTo(page) {
 82 |       // console.log(page)
 83 |       if (!isNaN(page) && page !== this.page.currentPage) {
 84 |         const { data } = await api.getRecentlyMoment({ size: this.size, page })
 85 |         this.data = this.filterData(data)
 86 |       }
 87 |     },
 88 |     async handleEdit(i) {
 89 |       // console.log(i, name, id);
 90 |       this.$parent.$data.editData = Object.assign({}, this.oData[i])
 91 |       this.$parent.$data.dialogs.post = true
 92 |     },
 93 |     async handleDel(i, name, id) {
 94 |       // console.log(i, name, id);
 95 |       const { data } = await api.deleteOneMoment(id)
 96 |       if (data.ok === 1) {
 97 |         this.$msg({ msg: '删除成功' })
 98 |         this.data.splice(i, 1)
 99 |         if (!this.data.length) {
100 |           if (this.page.currentPage === 1) {
101 |             return
102 |           }
103 |           const { data } = await api.getRecentlyMoment({
104 |             size: this.size,
105 |             page: this.page.currentPage - 1
106 |           })
107 |           this.data = this.filterData(data)
108 |           return
109 |         }
110 |         const { data } = await api.getRecentlyMoment({
111 |           size: this.size,
112 |           page: this.page.currentPage
113 |         })
114 |         this.data = this.filterData(data)
115 |       }
116 |     },
117 |     async reload() {
118 |       const { data } = await api.getRecentlyMoment({
119 |         size: this.size,
120 |         page: this.page.currentPage
121 |       })
122 |       this.data = this.filterData(data)
123 |     }
124 |   },
125 |   data() {
126 |     return {
127 |       size: 10,
128 |       page: null,
129 |       oData: null,
130 |       cols: [
131 |         {
132 |           name: '创建时间',
133 |           prop: 'createdTime',
134 |           width: '200px'
135 |         },
136 |         {
137 |           name: '类型',
138 |           prop: 'type',
139 |           width: '100px'
140 |         },
141 |         {
142 |           name: '描述',
143 |           prop: 'desc',
144 |           width: '500px',
145 |           auto: true,
146 |           tips: true
147 |         },
148 |         {
149 |           name: '操作',
150 |           actions: [
151 |             { name: '编辑', alias: 'v-edit' },
152 |             { name: '删除', color: '#e74c3c', alias: 'v-del' }
153 |           ],
154 |           width: '80px'
155 |         }
156 |       ],
157 |       options: {
158 |         showID: true
159 |       },
160 |       data: []
161 |     }
162 |   }
163 | }
164 | </script>
165 | 
166 | <style lang="scss" scoped>
167 | .table {
168 |   // max-height: 60vh;
169 | }
170 | </style>
171 | 


--------------------------------------------------------------------------------
/src/components/Admin/sidebar/item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-item" :class="{active: active,extend:extend}" ref="row-item">
  3 |     <div class="item" @click="handleClick">
  4 |       <div class="icon">
  5 |         <font-awesome-icon :icon="item.icon" />
  6 |       </div>
  7 |       <div class="title">{{item.title}}</div>
  8 |       <div v-if="hasChild" style="justify-content: left;">
  9 |         <div class="down">
 10 |           <font-awesome-icon :icon="['fas','chevron-down']" />
 11 |         </div>
 12 |       </div>
 13 |     </div>
 14 |     <div
 15 |       class="insider"
 16 |       :style="extend ? 'max-height: '+ height : ''"
 17 |       ref="insider"
 18 |       v-if="hasChild"
 19 |     >
 20 |       <item
 21 |         :active="activeItems === index ? true : false"
 22 |         :item="item"
 23 |         :index="index"
 24 |         v-for="(item, index) in item.subItems"
 25 |         :key="index"
 26 |         ref="item"
 27 |       />
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | export default {
 34 |   name: 'item',
 35 |   props: {
 36 |     active: Boolean,
 37 |     item: {
 38 |       type: Object,
 39 |       required: true,
 40 |       validator (val) {
 41 |         return typeof (val.title) === "string"
 42 |           && val.icon instanceof Array
 43 |           && val.icon.length !== 0
 44 |       }
 45 |     },
 46 |     index: Number
 47 |   },
 48 |   data () {
 49 |     return {
 50 |       height: 0,
 51 |       activeItems: 0,
 52 |       extend: false
 53 |     }
 54 |   },
 55 |   watch: {
 56 |     active (val) {
 57 | 
 58 |       if (!val) {
 59 |         this.extend = false
 60 |       }
 61 |     }
 62 |   },
 63 |   computed: {
 64 |     hasChild () {
 65 |       return !(JSON.stringify(this.item.subItems) === '{}' || this.item.subItems === undefined)
 66 |     }
 67 |   },
 68 |   methods: {
 69 |     handleClick () {
 70 |       if (!this.item.subItems) {
 71 |         this.$parent.activeItems = this.index
 72 | 
 73 |         const activeItems = []
 74 |         for (let i = this; i.$props && i.$props.index > -1; i = i.$parent) {
 75 |           activeItems.push(i.$props.index)
 76 |         }
 77 |         // console.log(activeItems);
 78 |         // console.log(this.$parent.$data);
 79 | 
 80 |         for (let vm = this.$parent; vm.$data && vm.$data.activeItems > -1; vm = vm.$parent) {
 81 |           vm.$data.activeItems = activeItems.shift()
 82 |           // console.log(vm.$data.activeItems);
 83 |         }
 84 |       } else {
 85 |         this.extend = !this.extend
 86 |       }
 87 |       if (this.$parent.activeItems === this.index) {
 88 | 
 89 |         this.$refs['row-item'].classList.toggle('hide')
 90 |       }
 91 |       if (!this.hasChild) {
 92 |         let path = this.item.path
 93 |         let item = this.$parent
 94 |         for (; ;) {
 95 |           // path += item.path
 96 |           if (item.item && item.item.path) {
 97 |             path = item.item.path + path
 98 |             item = item.$parent
 99 |           } else break
100 |         }
101 |         // console.log(path);
102 |         path = this.$root.$data.route + path
103 | 
104 |         if (path === this.$route.fullPath) {
105 |           return
106 |         }
107 | 
108 |         this.$router.push(path)
109 |       }
110 |     },
111 |   },
112 |   mounted () {
113 |     try {
114 |       this.height = [...this.$refs.insider.querySelectorAll('.item')].length * 5 + 'rem'
115 |     } catch (e) {
116 |       console.log('没有子元素')
117 |     }
118 |   }
119 | }
120 | </script>
121 | 
122 | <style lang="scss" scoped>
123 | .row-item.extend:not(.hide) {
124 |   > .item .down {
125 |     transform: rotate(180deg);
126 |   }
127 | }
128 | .row-item:not(.extend) {
129 |   > .item .down {
130 |     transform: rotate(0) !important;
131 |   }
132 | }
133 | .row-item.active {
134 |   background: rgba(16, 133, 211, 0.5);
135 | }
136 | .row-item {
137 |   transition: background 0.5s;
138 |   border-radius: 24px 0 0 24px;
139 | }
140 | .row-item.hide .insider {
141 |   max-height: 0 !important;
142 |   opacity: 0;
143 | }
144 | .row-item.active:not(.hide) {
145 |   > .item .down {
146 |     transform: rotate(180deg);
147 |   }
148 | }
149 | .insider {
150 |   overflow: hidden;
151 |   max-height: 0;
152 |   transition: max-height 0.5s, opacity 0.5s;
153 | }
154 | 
155 | .item {
156 |   * {
157 |     font-family: 'Nunito', sans-serif;
158 |   }
159 |   display: grid;
160 |   grid-template-columns: 50px auto 30px;
161 |   padding: 1rem 0 1rem 1rem;
162 |   transition: 0.5s;
163 |   line-height: 1.5;
164 |   user-select: none;
165 |   opacity: 0.8;
166 | 
167 |   > * {
168 |     display: flex;
169 |     align-items: center;
170 |     justify-content: left;
171 |   }
172 | 
173 |   .down {
174 |     opacity: 0;
175 |     transition: opacity 0.5s, transform 0.5s;
176 |     // transform-origin: 8px 10px;
177 |   }
178 | 
179 |   &:hover {
180 |     background: #1a9cf3;
181 |     border-radius: 24px 0 0 24px;
182 |     opacity: 1;
183 |     .down {
184 |       opacity: 0.8;
185 |     }
186 |   }
187 | }
188 | </style>


--------------------------------------------------------------------------------
/src/components/Home/headerNav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="header" v-if="data.username">
  3 |     <div class="left">
  4 |       <span class="username">{{ data.username }}</span>
  5 |       <!-- <div class="btn" style="padding: .2rem 1rem;display: inline-block;" @click="handleShowItems">
  6 |         <div class="btn-flex">
  7 |           <span>
  8 |           <font-awesome-icon :icon="['fas','sliders-h']"/>
  9 |           </span>
 10 |           <span>
 11 |           <font-awesome-icon :icon="['fas','chevron-down']" v-if="!options.showItems"/>
 12 |            <font-awesome-icon :icon="['fas','chevron-up']" v-else/>
 13 |           </span>
 14 |         </div>
 15 | 
 16 |         <transition name="slide">
 17 |           <div class="items" v-if="options.showItems">
 18 |             <div class="item" >
 19 |               信息
 20 |             </div>
 21 |             <div class="item" >
 22 |               瞬间
 23 |             </div>
 24 |           </div>
 25 |         </transition>
 26 |       </div>-->
 27 |       <div class="btn" style="background: none;margin-left: 1rem" @click="$emit('hideSwiper')">
 28 |         <font-awesome-icon :icon="['fas','dot-circle']" />
 29 |       </div>
 30 |     </div>
 31 |     <div class="right">
 32 |       <input
 33 |         v-model="search"
 34 |         type="text"
 35 |         class="search-bar"
 36 |         :class="options.showSearchBar ? 'active' : ''"
 37 |       />
 38 |       <span class="btn" @click="handleSearch">
 39 |         <font-awesome-icon :icon="['fas','search']" />
 40 |       </span>
 41 |       <span class="line"></span>
 42 | 
 43 |       <div class="btn" @click="handleClickUser">
 44 |         <div class="btn-flex">
 45 |           <div class="img">
 46 |             <img :src="data.avatar" />
 47 |           </div>
 48 |           <!-- <div class="btn" style="display: inline-block" v-if="objectIsEmpty(data.userUrl)">
 49 |             <font-awesome-icon :icon="['fas','chevron-down']" />
 50 |           </div>-->
 51 |         </div>
 52 |       </div>
 53 |     </div>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script>
 58 | import { mapGetters } from 'vuex'
 59 | 
 60 | export default {
 61 |   computed: {
 62 |     ...mapGetters({
 63 |       data: 'user',
 64 |       isLogged: 'isLogged'
 65 |     })
 66 |   },
 67 |   data () {
 68 |     return {
 69 |       options: {
 70 |         showSearchBar: false,
 71 |         showItems: false,
 72 |         showUser: false
 73 |       },
 74 |       search: ''
 75 |     }
 76 |   },
 77 |   methods: {
 78 |     handleSearch () {
 79 |       this.options.showSearchBar = !this.options.showSearchBar
 80 |       this.search = ''
 81 |       this.$msg({ msg: '接口未完成' })
 82 |     },
 83 |     handleShowItems () {
 84 |       this.options.showItems = !this.options.showItems
 85 |     },
 86 |     handleClickUser () {
 87 |       if (this.isLogged) {
 88 |         this.$router.push('/master')
 89 |       }
 90 |       else {
 91 |         this.$router.push('/login')
 92 |       }
 93 |     },
 94 |     objectIsEmpty (obj) {
 95 |       return JSON.stringify(obj) === '{}'
 96 |     }
 97 |   }
 98 | }
 99 | </script>
100 | 
101 | <style scoped>
102 | .header {
103 |   display: flex;
104 |   justify-content: space-between;
105 |   align-items: center;
106 |   color: #d0d3d6;
107 | }
108 | 
109 | .header .username {
110 |   margin-right: 1rem;
111 |   color: #363c42;
112 |   user-select: none;
113 | }
114 | 
115 | .left,
116 | .right {
117 |   padding: 2.5rem;
118 |   display: flex;
119 |   align-items: center;
120 |   justify-content: space-between;
121 |   position: relative;
122 | }
123 | 
124 | .left .btn {
125 |   background-color: #e9ebf0;
126 |   border-radius: 24px;
127 | }
128 | 
129 | .btn {
130 |   cursor: pointer;
131 |   position: relative;
132 |   display: inline-block;
133 |   user-select: none;
134 | }
135 | 
136 | .btn-flex {
137 |   display: flex;
138 |   justify-content: center;
139 |   align-items: center;
140 | }
141 | 
142 | .left .btn span:nth-child(1) {
143 |   margin-right: 1rem;
144 | }
145 | 
146 | @media (max-width: 500px) {
147 |   .left .btn span:nth-child(1) {
148 |     margin-right: 0;
149 |   }
150 | 
151 |   .left .btn span:nth-child(2) {
152 |     display: none;
153 |   }
154 | }
155 | 
156 | .right img {
157 |   border-radius: 88%;
158 |   max-width: 30px;
159 |   margin-right: 1rem;
160 |   user-select: none;
161 | }
162 | 
163 | .img {
164 |   position: relative;
165 |   width: 30px;
166 |   height: 30px;
167 |   overflow: hidden;
168 | }
169 | 
170 | .right .search-bar {
171 |   width: 0rem;
172 |   height: 1.5rem;
173 |   border-radius: 24px;
174 |   background: #fff;
175 |   border: 1px solid #d0d3d6;
176 |   margin-right: 1rem;
177 |   outline: none;
178 |   padding-left: 1rem;
179 |   transition: width 0.5s, opacity 0.3s;
180 |   opacity: 0;
181 | }
182 | 
183 | .right .search-bar.active {
184 |   width: 10rem;
185 |   opacity: 1;
186 | }
187 | 
188 | .line {
189 |   position: relative;
190 |   margin: 0 1rem;
191 |   width: 1px;
192 | }
193 | 
194 | .line::before {
195 |   content: '';
196 |   position: absolute;
197 |   left: 0;
198 |   top: 0;
199 |   transform: translateY(-50%);
200 |   height: 0.8rem;
201 |   border-left: 1px solid #d0d3d6;
202 | }
203 | 
204 | .items {
205 |   position: absolute;
206 | }
207 | 
208 | .items .item {
209 |   position: relative;
210 |   z-index: 2;
211 |   text-align: center;
212 |   padding: 1rem 0;
213 | }
214 | 
215 | .items .item::before {
216 |   content: '';
217 |   bottom: 0;
218 |   left: 3px;
219 |   right: 3px;
220 |   position: absolute;
221 |   z-index: -1;
222 |   height: 0.2rem;
223 |   background: #eee;
224 | }
225 | 
226 | .slide-enter-active,
227 | .slide-leave-active {
228 |   transition: 0.5s;
229 |   transform: translateY(0);
230 | }
231 | 
232 | .slide-enter,
233 | .slide-leave-to {
234 |   opacity: 0;
235 |   transform: translateY(-10%);
236 | }
237 | 
238 | a {
239 |   text-decoration: none;
240 | }
241 | 
242 | a:hover {
243 |   text-decoration: none;
244 | }
245 | </style>


--------------------------------------------------------------------------------
/src/components/Admin/Table/table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="table" v-if="data">
  3 |     <ps style="width: 100%;height: calc(100vh - 13rem)">
  4 |       <div class="theader">
  5 |         <div class="status_bar">
  6 |           <div class="col" style="width: 18px" v-if="options.showID">#</div>
  7 |           <div
  8 |             class="col"
  9 |             v-for="col in cols"
 10 |             :key="col.prop"
 11 |             :style="{width: col.width,flex: col.auto ? '1' : ''}"
 12 |           >{{col.name}}</div>
 13 |           <div class="col" v-if="action" :style="{width: action.width}">{{action.name}}</div>
 14 |         </div>
 15 |       </div>
 16 | 
 17 |       <div class="tbody">
 18 |         <div class="row" v-for="(row, i) in data" :key="row._id">
 19 |           <div
 20 |             class="col"
 21 |             v-show="options.showID"
 22 |             :style="{overflow: 'hidden', width: '18px'}"
 23 |           >{{i + 1}}</div>
 24 |           <div
 25 |             class="col"
 26 |             :style="{width: col.width, overflow: 'hidden', textOverflow: 'ellipsis', flex: col.auto? '1' : ''}"
 27 |             v-for="col in cols"
 28 |             :key="col.prop"
 29 |             :title="col.tips ? row[col.prop]: ''"
 30 |           >{{row[col.prop]}}</div>
 31 |           <div class="col" v-if="action" :style="{width: action.width}">
 32 |             <span
 33 |               v-for="action in action.actions"
 34 |               :key="action.name"
 35 |               class="action_btn"
 36 |               @click="$emit(action.alias, i, action.name, row._id)"
 37 |               :style="{color: action.color}"
 38 |             >{{action.name}}</span>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </ps>
 43 | 
 44 |     <div class="tfooter">
 45 |       <div class="page_nav" v-if="page && page.totalPage > 1">
 46 |         <div class="page_wrap">
 47 |           <div
 48 |             class="prev btn"
 49 |             :class="{hide: page.currentPage === 1}"
 50 |             @click="$emit('to', page.currentPage - 1)"
 51 |           >
 52 |             <font-awesome-icon :icon="['fas', 'chevron-left']"></font-awesome-icon>
 53 |           </div>
 54 |           <div class="page">
 55 |             <span
 56 |               v-for="n in pages"
 57 |               :key="n"
 58 |               class="page_num"
 59 |               :class="{active: n === page.currentPage}"
 60 |               @click="$emit('to', n)"
 61 |             >{{n}}</span>
 62 |           </div>
 63 |           <div
 64 |             class="next btn"
 65 |             :class="{hide: page.currentPage + 1 > page.totalPage}"
 66 |             @click="$emit('to', page.currentPage + 1)"
 67 |           >
 68 |             <font-awesome-icon :icon="['fas', 'chevron-right']"></font-awesome-icon>
 69 |           </div>
 70 |         </div>
 71 |       </div>
 72 |     </div>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script>
 77 | 
 78 | export default {
 79 |   props: {
 80 |     data: {
 81 |       type: Array,
 82 |       required: true
 83 |     },
 84 |     cols: {
 85 |       type: Array,
 86 |       required: true
 87 |     },
 88 |     options: {
 89 |       type: Object,
 90 |       default () {
 91 |         return {}
 92 |       }
 93 |     },
 94 |     page: {
 95 |       type: Object,
 96 |       default () {
 97 |         return null
 98 |       }
 99 |     }
100 |   },
101 |   mounted () {
102 |     if (this.cols[this.cols.length - 1].actions) {
103 |       const action = this.cols.splice(-1, 1)[0]
104 |       this.action = Object.assign({}, action)
105 |     }
106 | 
107 |     setTimeout(() => {
108 |       this.pageNav()
109 |     }, 100);
110 |   },
111 |   data () {
112 |     return {
113 |       action: null,
114 |       pages: []
115 |     }
116 |   },
117 |   methods: {
118 |     pageNav () {
119 |       // 页数大于5的处理
120 |       // 先清空数组
121 |       this.pages.splice(0)
122 |       if (this.page && this.page.totalPage > 5) {
123 |         this.pages.push(...[1, 2, 3, '...', this.page.totalPage])
124 |       } else {
125 |         for (let i = 1; i <= this.page.totalPage; i++) {
126 |           this.pages.push(i)
127 |         }
128 |       }
129 |     },
130 |   },
131 |   watch: {
132 |     page: {
133 |       deep: true,
134 |       handler () {
135 |         this.pageNav()
136 |       }
137 |     }
138 |   }
139 | }
140 | </script>
141 | 
142 | <style lang="scss" scoped>
143 | // @import url(https://fonts.googleapis.com/css?family=Overpass+Mono&display=swap);
144 | $table-col-gap: 20px;
145 | .table {
146 |   overflow: auto;
147 | }
148 | * {
149 |   // font-family: 'Overpass Mono', monospace;
150 |   user-select: none;
151 | }
152 | .table::-webkit-scrollbar {
153 |   height: 5px;
154 |   width: 5px;
155 | }
156 | 
157 | .table {
158 |   .theader {
159 |     display: inline-block;
160 |     min-width: 100%;
161 |     background: rgba(255, 255, 255, 0.568);
162 |     backdrop-filter: blur(5px);
163 |     position: sticky;
164 |     top: 0;
165 |   }
166 |   .status_bar {
167 |     white-space: nowrap;
168 |     display: inline-block;
169 |     padding: 12px;
170 |     border-bottom: 1px #eee solid;
171 |     color: #909399;
172 |     font-weight: 800;
173 |     width: 100%;
174 |     display: flex;
175 |     box-sizing: border-box;
176 |   }
177 |   .tbody {
178 |     display: inline-block;
179 |     height: calc(100vh - 17rem);
180 |     min-width: 100%;
181 |     .row {
182 |       white-space: nowrap;
183 |       // display: inline-block;
184 |       padding: 12px;
185 |       border-bottom: 1px #eee solid;
186 |       display: flex;
187 |       align-items: center;
188 |       // min-width: 100%;
189 |     }
190 |   }
191 | }
192 | .col {
193 |   display: flex;
194 |   align-items: flex-end;
195 |   margin-right: $table-col-gap;
196 | }
197 | 
198 | .action_btn {
199 |   margin-right: 12px;
200 |   color: #1188e8;
201 |   transition: color 0.5s;
202 |   cursor: pointer;
203 | }
204 | .action_btn:hover {
205 |   color: #1187e8c2;
206 | }
207 | 
208 | .tfooter {
209 |   margin-top: 20px;
210 |   padding-bottom: 20px;
211 | }
212 | .page_nav {
213 |   display: flex;
214 |   justify-content: center;
215 |   align-items: center;
216 | 
217 |   .page_num.active {
218 |     color: rgb(255, 204, 168);
219 |   }
220 |   .page_num,
221 |   .btn {
222 |     transition: color 0.5s;
223 |     margin-right: 30px;
224 |     cursor: pointer;
225 |     color: #1188e8;
226 |     &:hover {
227 |       color: #1187e8c2;
228 |     }
229 |   }
230 | 
231 |   .page_wrap {
232 |     display: flex;
233 |     justify-content: space-between;
234 |     align-items: center;
235 | 
236 |     // .page {
237 |     //   width: 15rem;
238 |     // }
239 |   }
240 | }
241 | .hide {
242 |   opacity: 0;
243 |   cursor: unset;
244 |   pointer-events: none;
245 | }
246 | </style>


--------------------------------------------------------------------------------
/src/components/Admin/item-card.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrap" ref="wrap">
  3 |     <div class="outside card" @click="active = !active;updateWrapHeight()">
  4 |       <div class="time">{{parseDate(this.Time.created)}}</div>
  5 |       <div class="title_type">
  6 |         <div class="type">{{type}}</div>
  7 |         <div class="title">{{title || content.body}}</div>
  8 |       </div>
  9 |       <div>
 10 |         <div class="down" :class="{active: active}">
 11 |           <font-awesome-icon :icon="['fas','chevron-down']" />
 12 |         </div>
 13 |       </div>
 14 |     </div>
 15 |     <div class="inside card" ref="inside">
 16 |       <div class="time">{{parseDate(this.Time.created)}}</div>
 17 |       <div class="body">
 18 |         <div class="card white" ref="body">
 19 |           <div class="info">
 20 |             <div>
 21 |               <div class="title" v-if="type === 'moment'">标题: {{title}}</div>
 22 |               <div class="type">类型: {{type}}</div>
 23 |               <div
 24 |                 class="ctime"
 25 |               >创建时间: {{parseDate(this.Time.created)}} {{parseTime(this.Time.created)}}</div>
 26 |               <div
 27 |                 class="comment"
 28 |                 v-if="type==='picture' && content.comment"
 29 |               >注释: {{content.comment}}</div>
 30 |             </div>
 31 |             <div class="icon">
 32 |               <div class>
 33 |                 <font-awesome-icon :icon="['far', 'clock']" v-if="type === 'moment'"></font-awesome-icon>
 34 |                 <font-awesome-icon :icon="['far', 'sun']" v-if="type === 'hitokoto'"></font-awesome-icon>
 35 |                 <font-awesome-icon :icon="['far', 'lightbulb']" v-if="type === 'idea'"></font-awesome-icon>
 36 |                 <font-awesome-icon :icon="['far', 'image']" v-if="type === 'picture'"></font-awesome-icon>
 37 |               </div>
 38 |             </div>
 39 |           </div>
 40 | 
 41 |           <div class="content" style="position: relative">
 42 |             <pre v-if="type !== 'picture'">
 43 |              {{ content.body }}
 44 |             </pre>
 45 |             <img :src="content.src" v-if="type==='picture'" @load="handleImgOnload" />
 46 |           </div>
 47 |         </div>
 48 |       </div>
 49 |     </div>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script>
 54 | import moment from 'moment'
 55 | export default {
 56 |   props: {
 57 |     time: {
 58 |       type: Object,
 59 |       required: true
 60 |     },
 61 |     type: {
 62 |       type: String,
 63 |       required: true
 64 |     },
 65 |     title: String,
 66 |     content: {}
 67 |   },
 68 |   data () {
 69 |     return {
 70 |       active: false,
 71 |       overflowHeight: null,
 72 |       Time: {
 73 |         created: null,
 74 |         modified: null
 75 |       },
 76 | 
 77 |     }
 78 |   },
 79 |   created () {
 80 |     this.Time.created = new Date(this.time.createdTime)
 81 |     this.Time.modified = new Date(this.time.modifiedTime)
 82 |   },
 83 |   methods: {
 84 |     parseDate (date) {
 85 |       return moment(date).format('MMM DD YYYY')
 86 |     },
 87 |     parseTime (time) {
 88 |       return moment(time).format('HH:mm')
 89 |     },
 90 |     handleImgOnload () {
 91 |       console.log('img onload')
 92 |       try {
 93 |         this.updateWrapHeight()
 94 |       } catch (e) {
 95 |         e
 96 |       }
 97 |     },
 98 |     updateWrapHeight () {
 99 |       this.overflowHeight = this.$refs.body.offsetHeight + 100
100 |       this.$refs.inside.setAttribute('style', 'transform: translateY(-' + this.overflowHeight + 'px)')
101 |       this.$refs.wrap.removeAttribute('style')
102 |     }
103 |   },
104 |   mounted () {
105 |     this.updateWrapHeight()
106 |   },
107 |   watch: {
108 |     active (val) {
109 |       if (val === false) {
110 |         this.$refs.inside.setAttribute('style', 'transform: translateY(-' + this.overflowHeight + 'px)')
111 |         this.$refs.wrap.removeAttribute('style')
112 |       } else {
113 |         this.$refs.wrap.setAttribute('style', 'height: ' + (98 + this.overflowHeight) + 'px')
114 |         this.$refs.inside.setAttribute('style', 'transform: translateY(0px);height: calc(' + this.$refs.wrap.style.height + ' - 98px)')
115 |       }
116 |     }
117 |   },
118 |   destroyed () {
119 |     this.$off()
120 |   }
121 | }
122 | </script>
123 | <style lang="scss" scoped>
124 | .wrap {
125 |   overflow: hidden;
126 |   width: 100%;
127 |   height: 98px;
128 |   background: #f4f4f7;
129 |   border-radius: 12px;
130 |   position: relative;
131 |   transition: height 0.5s;
132 |   margin-bottom: 3rem;
133 |   position: relative;
134 | }
135 | .card {
136 |   border-radius: 12px;
137 |   display: grid;
138 |   background: #f4f4f7;
139 |   color: #020720;
140 |   // height: 100%;
141 | 
142 |   width: 100%;
143 |   position: relative;
144 |   transition: 0.5s;
145 | 
146 |   &.outside {
147 |     height: 98px;
148 |     cursor: pointer;
149 |     user-select: none;
150 |     grid-template-columns: 10rem auto 100px;
151 |     box-shadow: 0px 20px 41px -9px rgba(0, 0, 0, 0.2);
152 |     z-index: 1;
153 |     * {
154 |       display: flex;
155 |       justify-content: center;
156 |       align-items: center;
157 |     }
158 |     .time {
159 |       font-weight: 800;
160 |     }
161 |   }
162 |   &.inside {
163 |     grid-template-columns: 10rem auto;
164 |   }
165 | 
166 |   .title_type {
167 |     display: grid;
168 |     grid-template-columns: 8rem minmax(auto, 20rem);
169 |     justify-content: flex-start;
170 |     font-weight: 100;
171 |     .type {
172 |       margin-right: 3rem;
173 |     }
174 |     .title {
175 |       white-space: nowrap;
176 |       justify-content: flex-start;
177 |       overflow: hidden;
178 |     }
179 |   }
180 |   .down {
181 |     color: #1a9cf3;
182 |     transition: transform 0.5s;
183 |     &.active {
184 |       transform: rotate(180deg);
185 |     }
186 |   }
187 | }
188 | 
189 | .inside {
190 |   border-radius: 0 0 12px 12px;
191 |   .time {
192 |     display: flex;
193 |     justify-content: center;
194 |     font-weight: 100;
195 |     font-size: 0.8rem;
196 |     padding-top: 1rem;
197 |   }
198 |   .time {
199 |     padding: 3rem 0;
200 |   }
201 |   .body {
202 |     padding: 3rem 2rem;
203 |     // height: calc(100% - 88px);
204 |   }
205 |   .info {
206 |     display: grid;
207 |     grid-template-columns: 80% auto;
208 |     line-height: 2.5;
209 |     margin-bottom: 3rem;
210 |     .icon {
211 |       font-size: 4rem;
212 |     }
213 |   }
214 |   .card.white {
215 |     background: #fff;
216 |     padding: 3rem;
217 |     box-sizing: border-box;
218 | 
219 |     display: grid;
220 |     grid-template-rows: 9rem auto;
221 |   }
222 | }
223 | pre {
224 |   white-space: pre-wrap;
225 | }
226 | img {
227 |   max-width: 100%;
228 |   border-radius: 12px;
229 | }
230 | 
231 | @import '@/scss/_viewport.scss';
232 | @media (max-width: $small) {
233 |   .card {
234 |     .info {
235 |       .icon {
236 |         display: none;
237 |       }
238 |     }
239 |   }
240 |   .inside.card {
241 |     display: flex;
242 |     .time {
243 |       display: none;
244 |     }
245 |   }
246 |   .outside.card {
247 |     .type {
248 |       display: none
249 |     }
250 |   }
251 | }
252 | </style>


--------------------------------------------------------------------------------
/src/components/Home/showContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="position: relative; height: 100%">
  3 |     <transition name="ease-in" mode="out-in">
  4 |       <div class="container" v-show="show">
  5 |         <div class="date">
  6 |           <div class="year">{{ createdTime.year }}</div>
  7 |           <div class="md">{{ createdTime.month }} / {{ createdTime.day }}</div>
  8 |         </div>
  9 |         <!--    if type is moment  -->
 10 |         <div class="moment" v-if="data.type === 'moment'">
 11 |           <p>{{ user.username }} posted a moment.</p>
 12 |           <div class="moment-inner moment-wrap">
 13 |             <article>
 14 |               <div class="title" v-if="data.content.title">
 15 |                 <div class="b">
 16 |                   <font-awesome-icon :icon="['fas','cloud']" v-if="data.content.weather" />
 17 |                   {{ data.content.weather }}
 18 |                 </div>
 19 |                 <div class="b">
 20 |                   <font-awesome-icon :icon="['fas','pen']" v-if="data.content.title" />
 21 |                   {{ data.content.title }}
 22 |                 </div>
 23 |                 <div class="b">
 24 |                   <font-awesome-icon :icon="['far','smile']" v-if="data.content.mood" />
 25 |                   {{ data.content.mood }}
 26 |                 </div>
 27 |               </div>
 28 |               <!-- {{ data.content.body }} -->
 29 |               <pre v-text="parseArticle(data.content.body)"></pre>
 30 |             </article>
 31 |           </div>
 32 |         </div>
 33 |         <!--      if type is hitokoto  -->
 34 |         <div class="moment hitokoto" v-else-if="data.type === 'hitokoto'">
 35 |           <p>{{ user.username }} posted a hitokoto.</p>
 36 |           <div class="moment-inner hitokoto-inner">
 37 |             <div class="body">{{ data.content.body }}</div>
 38 |             <div class="source">{{ data.content.source }}</div>
 39 |           </div>
 40 |         </div>
 41 |         <!--      if type is idea  -->
 42 |         <div class="moment idea" v-else-if="data.type === 'idea'">
 43 |           <p>{{ user.username }} posted a idea.</p>
 44 |           <div class="moment-inner idea-inner">
 45 |             <div class="body">{{ data.content.body }}</div>
 46 |           </div>
 47 |         </div>
 48 |         <!--      if type is picture  -->
 49 |         <div class="moment pic" v-else-if="data.type === 'picture'">
 50 |           <p>{{ user.username }} posted a picture.</p>
 51 |           <div class="moment-inner pic-inner">
 52 |             <img
 53 |               :src="data.content.src"
 54 |               :alt="data.content.comment"
 55 |               @click="handleDisplayImg(data.content.src)"
 56 |             />
 57 |           </div>
 58 |         </div>
 59 |       </div>
 60 |     </transition>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | import { mapGetters } from "vuex";
 66 | 
 67 | export default {
 68 |   props: {
 69 |     content: {
 70 |       type: Object,
 71 |       require: true
 72 |     }
 73 |   },
 74 |   data () {
 75 |     return {
 76 |       show: true,
 77 |       data: {}
 78 |     };
 79 |   },
 80 |   created () {
 81 |     this.data = this.content;
 82 |   },
 83 |   watch: {
 84 |     content (newVal) {
 85 |       this.show = false;
 86 | 
 87 |       setTimeout(() => {
 88 |         this.data = newVal;
 89 |         this.show = true;
 90 |       }, 500);
 91 |     }
 92 |   },
 93 |   methods: {
 94 |     parseDate (date) {
 95 |       const d = new Date(date);
 96 |       const dateObj = {
 97 |         day: d.getDate(),
 98 |         month: d.getMonth() + 1,
 99 |         year: d.getFullYear(),
100 |         hour: d.getHours(),
101 |         minute: d.getMinutes(),
102 |         second: d.getSeconds()
103 |       };
104 |       return dateObj;
105 |     },
106 |     handleDisplayImg (src) {
107 |       this.$emit(
108 |         "showImg",
109 |         JSON.stringify({
110 |           src,
111 |           comment: this.data.content.comment
112 |         })
113 |       );
114 |     },
115 |     parseArticle (body) {
116 |       return body.replace(/\n|\r\n/g, "\n\n");
117 |     }
118 |   },
119 |   computed: {
120 |     createdTime () {
121 |       return this.parseDate(this.data.createdTime);
122 |     },
123 |     ...mapGetters(['user'])
124 |   }
125 | };
126 | </script>
127 | 
128 | <style lang="scss" scoped>
129 | .container {
130 |   padding: 0 5rem;
131 |   height: 100%;
132 |   position: relative;
133 |   @media (max-width: 468px) {
134 |     padding: 0 2rem;
135 |   }
136 | 
137 |   .date {
138 |     color: #043046;
139 |     user-select: none;
140 | 
141 |     .year {
142 |       font-size: 3rem;
143 |       font-weight: 800;
144 |     }
145 | 
146 |     .md {
147 |       font-weight: 100;
148 |       font-size: 1.2rem;
149 |     }
150 |   }
151 | 
152 |   .moment {
153 |     height: calc(100% - 5rem);
154 |     overflow: hidden;
155 | 
156 |     .moment-inner {
157 |       color: #c7cbca;
158 |       height: calc(100% - 6rem);
159 | 
160 |       &.moment-wrap {
161 |         overflow: scroll;
162 |       }
163 | 
164 |       &.moment-wrap::-webkit-scrollbar {
165 |         width: 3px;
166 |       }
167 | 
168 |       &.moment-wrap::-webkit-scrollbar-thumb {
169 |         background: #eee;
170 |         border-radius: 12px;
171 |       }
172 | 
173 |       &.moment-wrap::-webkit-scrollbar-track:hover {
174 |         border-radius: 0;
175 |         box-shadow: inset 2px 0 0 rgba(158, 158, 158, 0.116);
176 |       }
177 | 
178 |       article {
179 |         color: #043046;
180 | 
181 |         .title {
182 |           display: flex;
183 |           justify-content: space-between;
184 |           align-items: center;
185 |           margin-bottom: 0.5rem;
186 |           user-select: none;
187 |           margin: 0 2rem;
188 |         }
189 | 
190 |         @media (max-width: 425px) {
191 |           .title {
192 |             margin-left: 0;
193 |           }
194 |         }
195 |       }
196 |     }
197 |   }
198 | 
199 |   .hitokoto .hitokoto-inner {
200 |     margin: 3rem 10%;
201 |     font-size: 2rem;
202 |     text-align: center;
203 |     position: relative;
204 | 
205 |     .body {
206 |       margin-bottom: 3rem;
207 |       position: relative;
208 |       padding: 1rem 0;
209 |     }
210 | 
211 |     .body::before {
212 |       content: '“';
213 |       color: #fbd2d5;
214 |       font-size: 4rem;
215 |       font-weight: 800;
216 |       position: absolute;
217 |       font-family: -apple-system, 'Microsoft Sans Serif';
218 |       left: -0.5rem;
219 |       top: -0.5rem;
220 |       line-height: 1.5rem;
221 |     }
222 | 
223 |     .source {
224 |       position: absolute;
225 |       right: 0;
226 |     }
227 | 
228 |     .source::before {
229 |       content: '-- ';
230 |     }
231 |   }
232 | 
233 |   .pic .pic-inner {
234 |     animation: fade-up 1s ease-in forwards;
235 |     position: relative;
236 | 
237 |     img[src] {
238 |       max-width: 90%;
239 |       max-height: 90%;
240 |       margin-left: 3rem;
241 |       padding: 6px;
242 |       background: #e9ecee;
243 |       border: 3px solid #ecf0f1;
244 |       box-sizing: border-box;
245 |       box-shadow: 1px 4px 7px #d2d7d9;
246 |       cursor: zoom-in;
247 |     }
248 | 
249 |     @media (max-width: 768px) {
250 |       img[src] {
251 |         margin-left: 0.3rem;
252 |       }
253 |     }
254 | 
255 |     p {
256 |       z-index: 99;
257 |       position: absolute;
258 |       right: 10%;
259 |       top: 3rem;
260 |     }
261 |   }
262 | }
263 | 
264 | .ease-in-enter-active,
265 | .ease-in-leave-active {
266 |   transition: 0.5s;
267 | }
268 | 
269 | .ease-in-enter,
270 | .ease-in-leave-to {
271 |   transform: translateX(20%);
272 |   opacity: 0;
273 | }
274 | 
275 | @keyframes fade-up {
276 |   0% {
277 |     bottom: -5px;
278 |     transform: rotate(0);
279 |     opacity: 0;
280 |   }
281 |   100% {
282 |     bottom: 0;
283 |     transform: rotate(-1deg);
284 |     opacity: 1;
285 |   }
286 | }
287 | 
288 | pre {
289 |   word-break: break-all;
290 |   white-space: pre-line;
291 | }
292 | </style>


--------------------------------------------------------------------------------
/src/components/Home/postDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="form-wrap">
  3 |     <form action="#" method="post" class="form" ref="form">
  4 |       <div class="title">{{editData ? '编辑' : '发布'}}一个瞬间</div>
  5 |       <item :name="'类型'">
  6 |         <select
  7 |           name="type"
  8 |           id="type"
  9 |           v-model="moment.type"
 10 |           style="width: 5rem"
 11 |           :disabled="editData"
 12 |         >
 13 |           <option value="moment">瞬间</option>
 14 |           <option value="hitokoto">一言</option>
 15 |           <option value="idea">想法</option>
 16 |           <option value="picture">照片</option>
 17 |         </select>
 18 |       </item>
 19 |       <item :name="'标题'" v-if="moment.type === 'moment'">
 20 |         <input type="text" v-model="moment.title" />
 21 |       </item>
 22 |       <item :name="'内容'" v-if="moment.type !== 'picture'">
 23 |         <textarea name="body" id="body" rows="10" style="resize: vertical;" v-model="moment.body"></textarea>
 24 |       </item>
 25 |       <item :name="'来源'" v-if="moment.type === 'hitokoto'">
 26 |         <input type="text" v-model="moment.source" />
 27 |       </item>
 28 |       <item :name="'心情'" v-if="moment.type === 'moment'">
 29 |         <input type="text" v-model="moment.mood" />
 30 |       </item>
 31 |       <item :name="'天气'" v-if="moment.type === 'moment'">
 32 |         <input type="text" v-model="moment.weather" />
 33 |       </item>
 34 |       <item :name="'注释'" v-if="moment.type === 'picture'">
 35 |         <input type="text" v-model="moment.comment" />
 36 |       </item>
 37 |       <item :name="'上传图片'" v-if="moment.type === 'picture'">
 38 |         <input type="file" name="src" id="picture" accept="image/*" multiple ref="file" />
 39 |         <div class="files">
 40 |           <button @click.prevent.stop="$refs.file.click()" class="primary" ref="btn">点击上传</button>
 41 |           <ul v-if="files.length !== 0" style="padding: 0;">
 42 |             <li
 43 |               v-for="file in files"
 44 |               :key="file"
 45 |               style="display:flex; justify-content:space-between; list-style: none"
 46 |               class="file-item"
 47 |             >
 48 |               <div style="color: #2c3e50">
 49 |                 <font-awesome-icon :icon="['fas', 'file']" style="margin-right: .5rem"></font-awesome-icon>
 50 |                 {{ file }}
 51 |               </div>
 52 |               <font-awesome-icon :icon="['far', 'check-circle']" style="color: #2ecc71"></font-awesome-icon>
 53 |             </li>
 54 |           </ul>
 55 |         </div>
 56 |       </item>
 57 |       <div class="nav">
 58 |         <input type="submit" value="提交" @click.prevent="handleSubmit" />
 59 |         <input type="reset" value="取消" @click.prevent="handleCancelOrCompleted" />
 60 |       </div>
 61 |     </form>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import { mapActions } from 'vuex'
 67 | import item from './form/form-item.vue'
 68 | 
 69 | import uploadApi from '@/api/upload'
 70 | import momentApi from '@/api/moment'
 71 | export default {
 72 |   components: {
 73 |     item
 74 |   },
 75 |   props: {
 76 |     editData: Object
 77 |   },
 78 |   data () {
 79 |     return {
 80 |       moment: {
 81 |         type: 'moment',
 82 |         title: '',
 83 |         mood: '',
 84 |         source: '',
 85 |         body: '',
 86 |         weather: '',
 87 |         // TODO 多张图片的渲染
 88 |         src: '',
 89 |         comment: ''
 90 |       },
 91 |       files: []
 92 |     }
 93 |   },
 94 |   created () {
 95 |     if (this.editData) {
 96 |       this.moment = Object.assign({}, this.editData.content)
 97 |       this.$set(this.moment, 'type', this.editData.type)
 98 |     }
 99 |   },
100 |   methods: {
101 |     ...mapActions(['togglePost']),
102 |     handleSubmit () {
103 |       if (!this.editData) {
104 |         momentApi.postNewMoment(this.moment).then(({ data }) => {
105 | 
106 |           if (data.ok === 0) {
107 |             return this.$msg({ msg: '提交失败了', type: 'error' })
108 |           }
109 |           // if (data.ok === 1) {
110 |           //   // this.$refs.form.classList.remove('active')
111 |           //   // setTimeout(() => {
112 |           //   //   this.$emit('cancel-post')
113 |           //   // }, 250);
114 |           //   this.handleCancelOrCompleted()
115 |           //   this.$msg({ msg: '提交成功' })
116 |           //   this.$emit('submit-ok')
117 |           //   this.togglePost()
118 |           // }
119 |         })
120 |       } else {
121 |         momentApi.modifyOneMoment(this.editData._id, this.moment).then(({ data }) => {
122 |           if (data.ok === 0) {
123 |             return this.$msg({ msg: '提交失败了', type: 'error' })
124 |           }
125 |         })
126 |       }
127 |       this.handleCancelOrCompleted()
128 |       this.$msg({ msg: !this.editData ? '提交成功' : '更新成功' })
129 |       this.$emit('submit-ok')
130 |       this.togglePost()
131 | 
132 |     },
133 |     handleCancelOrCompleted () {
134 |       this.$refs.form.classList.add('remove')
135 |       setTimeout(() => {
136 |         this.$emit('cancel-post')
137 |       }, 400)
138 |     }
139 |   },
140 |   mounted () {
141 |     this.$refs.form.classList.add('active')
142 | 
143 |     this.$watch('moment.type', {
144 |       deep: true, // 深度监听 对象中属性的变化
145 |       handler (newVal) {
146 |         if (newVal === 'picture') {
147 |           this.$nextTick(() => {
148 |             this.$refs.file.onchange = e => {
149 |               const file = e.target.files[0]
150 |               this.files.push(file.name)
151 | 
152 |               let formdata = new FormData()
153 |               formdata.append('pic', file)
154 | 
155 |               uploadApi.upload(formdata).then(({ data }) => {
156 |                 const { src } = data
157 |                 this.moment.src = src
158 |                 this.$msg({ msg: '上传成功' })
159 |               })
160 |             }
161 |           })
162 |         }
163 |       }
164 |     })
165 |   }
166 | }
167 | </script>
168 | 
169 | <style lang="scss" scoped>
170 | .form-wrap {
171 |   position: absolute;
172 |   top: 0;
173 |   left: 0;
174 |   right: 0;
175 |   bottom: 0;
176 |   z-index: 99;
177 |   display: flex;
178 |   align-items: center;
179 |   justify-content: center;
180 | }
181 | .form {
182 |   padding: 1.5rem 3rem;
183 |   background: #fff;
184 |   border-radius: 12px;
185 |   border: 1px #eee solid;
186 |   box-sizing: border-box;
187 |   min-width: 50vw;
188 |   transition: height 0.5s, transform 0.2s cubic-bezier(0.06, 1.14, 0.36, 1.11);
189 |   // transform: scale(0.2);
190 |   animation: IGCoreModalShow .1s ease-out;
191 |   &.remove {
192 |     animation: scaleS 0.2s forwards ease !important;
193 |   }
194 |   .title {
195 |     text-align: center;
196 |     font-size: 1.4rem;
197 |     font-weight: 100;
198 |     margin-bottom: 2rem;
199 |   }
200 | }
201 | .file-item {
202 |   padding: 0;
203 |   cursor: pointer;
204 | }
205 | .nav {
206 |   display: flex;
207 |   justify-content: space-around;
208 | }
209 | 
210 | input[type='submit'],
211 | input[type='reset'] {
212 |   padding: 9px 15px;
213 |   font-size: 12px;
214 |   border-radius: 3px;
215 |   text-align: center;
216 |   box-sizing: border-box;
217 |   outline: none;
218 |   margin: 0;
219 |   transition: 0.1s;
220 |   font-weight: 500;
221 |   -webkit-appearance: none;
222 |   display: inline-block;
223 |   line-height: 1;
224 |   white-space: nowrap;
225 |   cursor: pointer;
226 |   border: 1px solid #dcdfe6;
227 |   width: 8rem;
228 |   color: #fff;
229 | }
230 | input[type='submit'] {
231 |   background-color: #2ecc71;
232 | }
233 | input[type='reset'] {
234 |   background-color: #e74c3c;
235 | }
236 | 
237 | @keyframes scale {
238 |   0% {
239 |     transform: scale(0.2);
240 |   }
241 |   to {
242 |     transform: scale(1);
243 |   }
244 | }
245 | 
246 | @keyframes scaleS {
247 |   0% {
248 |     transform: scale(1);
249 |   }
250 |   to {
251 |     transform: scale(0);
252 |   }
253 | }
254 | 
255 | @keyframes IGCoreModalShow {
256 |   0% {
257 |     transform: scale(1.2)
258 |   } to {
259 |     transform: scale(1)
260 |   }
261 | }
262 | </style>
263 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="position: relative; height: 100%">
  3 |     <transition name="fade">
  4 |       <div class="wrap" v-if="moments.ok === 1" key="page1">
  5 |         <header>
  6 |           <header-nav @hideSwiper="handleHideSwiper" />
  7 |         </header>
  8 |         <main
  9 |           :style="hideSwiper ? 'height: calc(100vh - 8rem)' : ''"
 10 |           v-if="viewport.is1024 || viewport.isDesktop || viewport.is1600 "
 11 |         >
 12 |           <information
 13 |             class="i"
 14 |             :skill="information.skill"
 15 |             :showPostBtn="hideSwiper"
 16 |             @post-new="handlePostNew"
 17 |           >
 18 |             <template v-slot:introduce>
 19 |               <p>{{ information.introduce }}</p>
 20 |             </template>
 21 |           </information>
 22 | 
 23 |           <div class="content">
 24 |             <showContent
 25 |               :content="moments.data[activeItem]"
 26 |               v-if="moments.data"
 27 |               @showImg="handleImg"
 28 |             />
 29 |           </div>
 30 |         </main>
 31 |         <!--    for responsive design  -->
 32 |         <main
 33 |           v-if="viewport.is768 || viewport.is568"
 34 |           :style="hideSwiper ? 'height: calc(100vh - 8rem)' : ''"
 35 |         >
 36 |           <info-res
 37 |             :hideSwiper="hideSwiper"
 38 |             @post-new="handlePostNew"
 39 |             :toSec="toSec"
 40 |             :skill="information.skill"
 41 |             :content="moments.data[activeItem]"
 42 |             :intro="information.introduce"
 43 |           >
 44 |             <div class="content">
 45 |               <showContent
 46 |                 :content="moments.data[activeItem]"
 47 |                 v-if="moments.data"
 48 |                 @showImg="handleImg"
 49 |               />
 50 |             </div>
 51 |           </info-res>
 52 |         </main>
 53 |         <transition name="slide-down">
 54 |           <div id="swiper" style="position: relative" v-show="!hideSwiper">
 55 |             <swiper
 56 |               :moments="moments"
 57 |               :viewport="viewport"
 58 |               :pageOptions="pageOptions"
 59 |               @switch="handleSwitch"
 60 |               @slide_btn-clicked="handleSwitchPage"
 61 |               class="swiper"
 62 |             />
 63 |           </div>
 64 |         </transition>
 65 |       </div>
 66 |       <!--    show img  -->
 67 |       <div class="message" v-else key="page2">
 68 |         <div id="loader-wrapper">
 69 |           <div class="loader-container">
 70 |             <svg
 71 |               xmlns="http://www.w3.org/2000/svg"
 72 |               xmlns:xlink="http://www.w3.org/1999/xlink"
 73 |               style="margin:auto;display:block;visibility: unset"
 74 |               width="78px"
 75 |               height="78px"
 76 |               viewBox="0 0 100 100"
 77 |               preserveAspectRatio="xMidYMid"
 78 |             >
 79 |               <circle cx="50" cy="33.847" r="15" fill="#e15b64">
 80 |                 <animate
 81 |                   attributeName="cy"
 82 |                   dur="0.9803921568627451s"
 83 |                   repeatCount="indefinite"
 84 |                   calcMode="spline"
 85 |                   keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9"
 86 |                   keyTimes="0;0.5;1"
 87 |                   values="25;75;25"
 88 |                 />
 89 |               </circle>
 90 |             </svg>
 91 |             <div class="loader-title">数据正在加载中...</div>
 92 |           </div>
 93 |         </div>
 94 |       </div>
 95 |     </transition>
 96 | 
 97 |     <!-- full screen components  -->
 98 |     <transition name="fade">
 99 |       <show-img :src="img.src" :comment="img.comment" @zoomOut="handleZoomOut" v-if="img.src" />
100 |     </transition>
101 |     <postDialog v-if="dialogs.post" @cancel-post="dialogs.post = false" @submit-ok="handleSubmit" />
102 |     <transition name="fade">
103 |       <overlay v-if="overlay" />
104 |     </transition>
105 |     <!-- end -->
106 |   </div>
107 | </template>
108 | 
109 | <script>
110 | import headerNav from '@/components/Home/headerNav.vue'
111 | import swiper from '@/components/Home/swiper.vue'
112 | import information from '@/components/Home/information'
113 | import showContent from '@/components/Home/showContent.vue'
114 | import showImg from '@/components/Home/showImg.vue'
115 | import infoRes from '@/components/Home/responsive/swiper-page.vue'
116 | import overlay from '@/components/Home/overlay.vue'
117 | import postDialog from '@/components/Home/postDialog.vue'
118 | 
119 | import momentApi from '@/api/moment'
120 | import masterApi from '@/api/master'
121 | 
122 | import { mapGetters } from 'vuex'
123 | 
124 | export default {
125 |   components: {
126 |     headerNav,
127 |     swiper,
128 |     information,
129 |     showContent,
130 |     infoRes,
131 |     showImg,
132 |     overlay,
133 |     postDialog
134 |   },
135 |   data () {
136 |     return {
137 |       moments: {},
138 |       pageOptions: {
139 |         size: 10,
140 |         currentPage: 1,
141 |         totalPage: 1,
142 |         hasNextPage: false,
143 |         hasPrevPage: false
144 |       },
145 |       information: {},
146 |       viewport: {},
147 |       activeItem: 0,
148 |       toSec: false, // 前往第二页，响应式视图
149 |       img: {
150 |         displayImg: '',
151 |         comment: ''
152 |       },
153 |       hideSwiper: false,
154 |       overlay: false, // 遮罩
155 |       dialogs: {
156 |         post: false
157 |       }
158 |     }
159 |   },
160 |   async created () {
161 |     const moments = (await momentApi.getRecentlyMoment({
162 |       size: 10,
163 |       page: this.pageOptions.currentPage
164 |     })).data
165 |     this.pageOptions = moments.pageOptions
166 |     const informations = (await masterApi.getUserIntroduce()).data
167 |     this.moments = moments
168 |     this.information = informations
169 |   },
170 |   mounted () {
171 |     this.updateViewport()
172 |     window.addEventListener('resize', this.throttle(this.updateViewport, 100))
173 |   },
174 |   methods: {
175 |     throttle (func, delay) {
176 |       let timer = null;
177 |       return function () {
178 |         if (!timer) {
179 |           timer = setTimeout(() => {
180 |             func.apply(this, arguments)
181 |             timer = null;
182 |           }, delay);
183 |         }
184 |       };
185 |     },
186 |     updateViewport () {
187 |       this.viewport = {
188 |         w: window.innerWidth,
189 |         h: window.innerHeight,
190 |         is568: window.innerWidth <= 568,
191 |         is768: window.innerWidth <= 768 && window.innerWidth > 568,
192 |         is1024: window.innerWidth <= 1024 && window.innerWidth > 768,
193 |         isDesktop: window.innerWidth > 1024 && window.innerWidth < 1600,
194 |         is1600: window.innerWidth >= 1600
195 |       }
196 |     },
197 |     handleSwitch (e = 0) {
198 |       this.activeItem = e
199 | 
200 |       if (this.viewport.is768 || this.viewport.is568) {
201 |         this.toSec = true
202 |         setTimeout(() => {
203 |           this.toSec = false
204 |         })
205 |       }
206 |     },
207 |     handleImg (json) {
208 |       const parse = JSON.parse(json)
209 |       this.img = parse
210 |     },
211 |     handleZoomOut () {
212 |       this.img = {}
213 |     },
214 |     handleHideSwiper () {
215 |       this.hideSwiper = !this.hideSwiper
216 |     },
217 |     async handleSubmit () {
218 |       this.moments = (await momentApi.getRecentlyMoment({
219 |         size: 10,
220 |         page: this.pageOptions.currentPage
221 |       })).data
222 |     },
223 |     async handleSwitchPage (e) {
224 |       let page = this.pageOptions.currentPage
225 |       if (e === 'next') {
226 |         page + 1 > this.pageOptions.totalPage ? page : ++page
227 |       } else {
228 |         page === 1 ? 1 : --page
229 |       }
230 |       const moments = (await momentApi.getRecentlyMoment({
231 |         size: 10,
232 |         page
233 |       })).data
234 |       this.pageOptions = moments.pageOptions
235 |       this.moments = moments
236 |       this.activeItem = 0
237 |     },
238 |     async handlePostNew () {
239 |       this.dialogs.post = true
240 |     }
241 |   },
242 |   watch: {
243 |     dialogs: {
244 |       deep: true,
245 |       handler (val) {
246 |         let overlay = false
247 |         for (const flag of Object.values(val)) {
248 | 
249 |           if (flag === true) {
250 |             overlay = true
251 |             break
252 |           }
253 |         }
254 |         this.overlay = overlay
255 |       }
256 |     }
257 |   },
258 |   computed: {
259 |     ...mapGetters(['isLogged'])
260 |   }
261 | }
262 | </script>
263 | 
264 | <style>
265 | @import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
266 | 
267 | * {
268 |   font-family: 'Josefin Sans', sans-serif;
269 | }
270 | </style>
271 | <style lang="scss" scoped>
272 | main {
273 |   height: calc(100vh - 22rem);
274 |   display: flex;
275 |   transition: height 0.5s;
276 | 
277 |   .i {
278 |     flex: 0.28;
279 |   }
280 | 
281 |   .content {
282 |     flex: 0.72;
283 |     height: 100%;
284 |     position: relative;
285 |     overflow: hidden;
286 | 
287 |     &::before {
288 |       content: '';
289 |       position: absolute;
290 |       top: 0;
291 |       left: 0;
292 |       right: 0;
293 |       bottom: 0;
294 |       background: url('./../assets/0.svg') fixed no-repeat;
295 |       background-size: 25% 25%;
296 |       background-position: right bottom;
297 |       opacity: 0.25;
298 |     }
299 | 
300 |     @media (max-width: 468px) {
301 |       .content {
302 |         background-size: 50% 50%;
303 |         background-position: bottom;
304 |       }
305 |     }
306 |   }
307 | }
308 | 
309 | .wrap {
310 |   min-height: 100vh;
311 |   position: relative;
312 | }
313 | 
314 | @media (min-width: 1024px) {
315 |   .wrap::before {
316 |     content: '';
317 |     position: absolute;
318 |     width: 1px;
319 |     top: 0;
320 |     bottom: 0;
321 |     border-left: 1px solid #eee;
322 |     left: 28%;
323 |   }
324 | }
325 | 
326 | @import '../assets/css/loading.css';
327 | 
328 | .fade-enter-active,
329 | .fade-leave-active {
330 |   transition: opacity 0.2s;
331 | }
332 | 
333 | .fade-enter,
334 | .fade-leave-to {
335 |   opacity: 0;
336 | }
337 | 
338 | .slide-down-enter-active,
339 | .slide-down-leave-active {
340 |   transition: transform 0.5s;
341 |   transform: translateY(0);
342 | }
343 | 
344 | .slide-down-enter,
345 | .slide-down-leave-to {
346 |   transform: translateY(100%);
347 | }
348 | </style>


--------------------------------------------------------------------------------
/src/assets/2.svg:
--------------------------------------------------------------------------------
1 | <svg id="3cd38589-f6b5-4ced-9f2c-9a4b79f01fae" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="835.61" height="660.05" viewBox="0 0 835.61 660.05"><defs><linearGradient id="459c4fc8-d836-433f-a197-0a2a91cd58e2" x1="435.61" y1="529" x2="435.61" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="342ea0e6-6062-49b7-bc20-c734cb7a73a4" x1="435.61" y1="488" x2="435.61" y2="95" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="763d00b7-5a07-4818-8ebb-d18341e18e84" x1="171.55" y1="660.05" x2="171.55" y2="316.95" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="92069d5c-e5f8-43fe-b38d-e54af900eab7" x1="171.55" y1="496.61" x2="171.55" y2="480.38" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="cc2cb1f8-9965-47fb-9589-218376181648" x1="194.61" y1="489.5" x2="194.61" y2="382.5" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="21b9629b-50a9-4ebb-aca6-e4e0185f53fc" x1="187.61" y1="544.5" x2="187.61" y2="488.5" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="fcd1d80a-fd87-48d8-ac9f-c26a469979c7" x1="509.54" y1="778.88" x2="509.54" y2="769.85" gradientTransform="translate(1170.3 491.9) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="103b5314-699c-4416-ba96-f0315aa2be6d" x1="246.07" y1="679.17" x2="246.07" y2="670.14" gradientTransform="translate(370.3 -32.65) rotate(30)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="f7eccc56-af47-4388-bae2-3610c4149eb5" x1="364.44" y1="766.03" x2="364.44" y2="756.99" gradientTransform="translate(110.34 -349.73) rotate(30)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="bcd8726a-d7c5-49b1-9a44-0b3978539435" x1="643.63" y1="719.48" x2="643.63" y2="710.44" gradientTransform="translate(1232.03 299.71) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="391a46f9-b208-48d2-be26-d2096ab99e61" x1="627.41" y1="656.89" x2="627.41" y2="647.85" gradientTransform="translate(1232.3 266.24) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="83f8f054-eb9c-442d-b51f-167d68b16295" x1="643.63" y1="594.29" x2="643.63" y2="585.26" gradientTransform="translate(1248.8 237.12) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="ae1ae34d-eb1b-4711-a510-1c391231e596" x1="690" y1="547.93" x2="690" y2="538.89" gradientTransform="translate(1278.2 220.15) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="9891a10d-f6cd-4be8-8439-1a188b457eca" x1="818.66" y1="549.09" x2="818.66" y2="540.05" gradientTransform="translate(1342.37 237.96) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="fc0ab291-1c38-49b0-9137-a4534010b0cb" x1="863.87" y1="596.61" x2="863.87" y2="587.58" gradientTransform="translate(1358.61 267.78) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="28dee737-f47b-4c6f-813e-2c0be0b581eb" x1="877.78" y1="656.89" x2="877.78" y2="647.85" gradientTransform="translate(1357.49 299.78) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/><linearGradient id="228de15d-ea7a-43bb-9b48-ae33db5c4fe2" x1="863.87" y1="717.16" x2="863.87" y2="708.13" gradientTransform="translate(1342.46 328.06) rotate(120)" xlink:href="#459c4fc8-d836-433f-a197-0a2a91cd58e2"/></defs><title>calendar</title><rect x="35.61" width="800" height="529" fill="url(#459c4fc8-d836-433f-a197-0a2a91cd58e2)"/><rect x="42.61" y="62.5" width="784" height="450.5" fill="#fff"/><rect x="42.61" y="11" width="784" height="51.5" fill="#ff6347"/><rect x="53.61" y="95" width="764" height="393" fill="url(#342ea0e6-6062-49b7-bc20-c734cb7a73a4)"/><rect x="63.11" y="102" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="156.11" y="102" width="92" height="73.5" fill="#fff"/><rect x="249.11" y="102" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="342.11" y="102" width="92" height="73.5" fill="#fff"/><rect x="435.11" y="102" width="92" height="73.5" fill="#fff"/><rect x="528.11" y="102" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="621.11" y="102" width="92" height="73.5" fill="#fff"/><rect x="714.11" y="102" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="63.11" y="177" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="156.11" y="177" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="249.11" y="177" width="92" height="73.5" fill="#fff"/><rect x="342.11" y="177" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="435.11" y="177" width="92" height="73.5" fill="#fff"/><rect x="528.11" y="177" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="621.11" y="177" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="714.11" y="177" width="92" height="73.5" fill="#fff"/><rect x="63.11" y="251" width="92" height="73.5" fill="#fff"/><rect x="156.11" y="251" width="92" height="73.5" fill="#fff"/><rect x="249.11" y="251" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="342.11" y="251" width="92" height="73.5" fill="#fff"/><rect x="435.11" y="251" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="528.11" y="251" width="92" height="73.5" fill="#fff"/><rect x="621.11" y="251" width="92" height="73.5" fill="#fff"/><rect x="714.11" y="251" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="63.11" y="325" width="92" height="73.5" fill="#fff"/><rect x="156.11" y="325" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="249.11" y="325" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="342.11" y="325" width="92" height="73.5" fill="#fff"/><rect x="435.11" y="325" width="92" height="73.5" fill="#fff"/><rect x="528.11" y="325" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="621.11" y="325" width="92" height="73.5" fill="#fff"/><rect x="714.11" y="325" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="63.11" y="400" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="156.11" y="400" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="249.11" y="400" width="92" height="73.5" fill="#fff"/><rect x="342.11" y="400" width="92" height="73.5" fill="#ff6347" opacity="0.5"/><rect x="435.11" y="400" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="528.11" y="400" width="92" height="73.5" fill="#fff"/><rect x="621.11" y="400" width="92" height="73.5" fill="#ff6347" opacity="0.2"/><rect x="714.11" y="400" width="92" height="73.5" fill="#fff"/><rect x="70.61" y="258" width="28" height="28" fill="#69f0ae"/><rect x="348.61" y="110" width="28" height="28" fill="#69f0ae"/><rect x="345.61" y="258" width="28" height="28" fill="#69f0ae"/><rect x="440.61" y="329" width="28" height="28" fill="#69f0ae"/><rect x="625.61" y="258" width="28" height="28" fill="#69f0ae"/><circle cx="171.55" cy="488.5" r="171.55" fill="url(#763d00b7-5a07-4818-8ebb-d18341e18e84)"/><circle cx="171.55" cy="488.5" r="166.92" fill="#ff6347"/><circle cx="171.55" cy="488.5" r="135.62" fill="#fff"/><circle cx="171.55" cy="488.5" r="8.11" fill="url(#92069d5c-e5f8-43fe-b38d-e54af900eab7)"/><line x1="216.76" y1="384.18" x2="172.71" y2="488.5" fill="#ff6347"/><polygon points="174.61 489.5 169.61 487.82 214.61 382.5 219.61 384.85 174.61 489.5" fill="url(#cc2cb1f8-9965-47fb-9589-218376181648)"/><rect x="320.31" y="554.57" width="113.24" height="3.48" transform="translate(-464.39 567.17) rotate(-67.11)" fill="#2196f3"/><line x1="172.71" y1="489.66" x2="201.69" y2="542.98" fill="#ff6347"/><polygon points="199.61 544.5 170.61 490.5 174.61 488.5 204.61 541.5 199.61 544.5" fill="url(#21b9629b-50a9-4ebb-aca6-e4e0185f53fc)"/><rect x="367.66" y="605.95" width="3.48" height="60.69" transform="translate(-441.2 133.65) rotate(-28.52)" fill="#2196f3"/><circle cx="297.9" cy="491.98" r="3.48" fill="#ff6347"/><circle cx="244.91" cy="545.99" r="4.52" transform="translate(-532.58 365.12) rotate(-60)" fill="url(#fcd1d80a-fd87-48d8-ac9f-c26a469979c7)"/><circle cx="246.07" cy="674.66" r="4.52" transform="translate(-486.56 93.44) rotate(-30)" fill="url(#103b5314-699c-4416-ba96-f0315aa2be6d)"/><circle cx="45.21" cy="491.98" r="4.52" fill="url(#f7eccc56-af47-4388-bae2-3610c4149eb5)"/><circle cx="291.04" cy="499.63" r="4.52" transform="translate(-393.02 92.48) rotate(-30)" fill="url(#bcd8726a-d7c5-49b1-9a44-0b3978539435)"/><circle cx="353.63" cy="483.41" r="4.52" transform="translate(-376.52 121.6) rotate(-30)" fill="url(#391a46f9-b208-48d2-be26-d2096ab99e61)"/><circle cx="416.23" cy="499.63" r="4.52" transform="translate(-376.25 155.08) rotate(-30)" fill="url(#83f8f054-eb9c-442d-b51f-167d68b16295)"/><circle cx="462.59" cy="546" r="4.52" transform="translate(-393.22 184.47) rotate(-30)" fill="url(#ae1ae34d-eb1b-4711-a510-1c391231e596)"/><circle cx="461.43" cy="674.66" r="4.52" transform="translate(-457.7 201.13) rotate(-30)" fill="url(#9891a10d-f6cd-4be8-8439-1a188b457eca)"/><circle cx="413.91" cy="719.87" r="4.52" transform="translate(-486.68 183.42) rotate(-30)" fill="url(#fc0ab291-1c38-49b0-9137-a4534010b0cb)"/><circle cx="353.63" cy="733.78" r="4.52" transform="translate(-501.71 155.15) rotate(-30)" fill="url(#28dee737-f47b-4c6f-813e-2c0be0b581eb)"/><circle cx="293.36" cy="719.87" r="4.52" transform="translate(-502.83 123.15) rotate(-30)" fill="url(#228de15d-ea7a-43bb-9b48-ae33db5c4fe2)"/><circle cx="171.55" cy="363.31" r="3.48" fill="#69f0ae"/><circle cx="416.34" cy="500.06" r="3.48" transform="translate(-407.09 490.61) rotate(-60)" fill="#69f0ae"/><circle cx="462.16" cy="545.88" r="3.48" transform="translate(-393.22 184.24) rotate(-30)" fill="#69f0ae"/><circle cx="461.43" cy="674.66" r="3.48" transform="translate(-535.75 616.96) rotate(-60)" fill="#69f0ae"/><circle cx="413.91" cy="719.63" r="3.48" transform="translate(-486.56 183.39) rotate(-30)" fill="#69f0ae"/><circle cx="291.15" cy="500.06" r="3.48" transform="translate(-393.22 92.6) rotate(-30)" fill="#69f0ae"/><circle cx="245.33" cy="545.88" r="3.48" transform="translate(-532.27 365.43) rotate(-60)" fill="#69f0ae"/><circle cx="479.98" cy="612.07" r="4.52" transform="translate(-423.92 202.02) rotate(-30)" fill="#69f0ae"/><circle cx="246.07" cy="674.66" r="3.48" transform="translate(-486.56 93.44) rotate(-30)" fill="#69f0ae"/><circle cx="293.58" cy="719.63" r="3.48" transform="translate(-658.62 494.09) rotate(-60)" fill="#69f0ae"/><circle cx="45.21" cy="491.98" r="3.48" fill="#69f0ae"/><circle cx="171.55" cy="613.68" r="3.48" fill="#69f0ae"/><path d="M225.08,621.22a135.64,135.64,0,0,1,253.28-67.48A135.64,135.64,0,1,0,236.08,674.8,135.16,135.16,0,0,1,225.08,621.22Z" transform="translate(-182.19 -119.97)" fill="#ff6347" opacity="0.2"/><circle cx="171.55" cy="488.5" r="5.8" fill="#69f0ae"/></svg>


--------------------------------------------------------------------------------
/src/views/Init.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrap">
  3 |     <header>
  4 |       <span>MOMENT</span>
  5 |     </header>
  6 | 
  7 |     <main>
  8 |       <h1>おかえりなさいご主人様</h1>
  9 | 
 10 |       <h2>Welcome My Master</h2>
 11 | 
 12 |       <small>This will take a few steps to complete the initialization</small>
 13 | 
 14 |       <swiper :options="swiperOption" ref="stepSwiper">
 15 |         <swiper-slide class="swiper-no-swiping">
 16 |           <form class="form" :action="postUrl" method="post">
 17 |             <input
 18 |               type="text"
 19 |               name="username"
 20 |               id="username"
 21 |               v-model="master.username"
 22 |               autocomplete="off"
 23 |               placeholder=" "
 24 |             />
 25 |             <label for="username">Master Name</label>
 26 | 
 27 |             <input
 28 |               type="password"
 29 |               name="password"
 30 |               id="password"
 31 |               v-model="master.password"
 32 |               autocomplete="off"
 33 |               placeholder=" "
 34 |             />
 35 |             <label for="password">Password</label>
 36 | 
 37 |             <input
 38 |               type="password"
 39 |               name="confirmPass"
 40 |               id="confirmPass"
 41 |               v-model="master.confirmPass"
 42 |               autocomplete="off"
 43 |               placeholder=" "
 44 |               @keyup.enter="handleNext"
 45 |             />
 46 |             <label for="confirmPass">Confirm Password</label>
 47 |           </form>
 48 |         </swiper-slide>
 49 |         <!-- second step -->
 50 |         <swiper-slide class="swiper-no-swiping">
 51 |           <form class="form" :action="postUrl" method="post">
 52 |             <input
 53 |               type="text"
 54 |               name="nickname"
 55 |               id="nickname"
 56 |               v-model="master.nickname"
 57 |               placeholder=" "
 58 |             />
 59 |             <label for="nickname">Nickname</label>
 60 | 
 61 |             <input
 62 |               type="text"
 63 |               name="githubUrl"
 64 |               id="githubUrl"
 65 |               v-model="master.githubUrl"
 66 |               placeholder=" "
 67 |             />
 68 |             <label for="githubUrl">GitHub Url</label>
 69 | 
 70 |             <input
 71 |               type="text"
 72 |               name="avatar"
 73 |               id="avatar"
 74 |               v-model="master.avatar"
 75 |               placeholder=" "
 76 |               @keyup.enter="handleNext"
 77 |             />
 78 |             <label for="avatar">Avatar Icon Url</label>
 79 |           </form>
 80 |         </swiper-slide>
 81 | 
 82 |         <!-- third step -->
 83 |         <swiper-slide class="swiper-no-swiping">
 84 |           <form class="form" :action="postUrl" method="post">
 85 |             <textarea
 86 |               placeholder="一两句话, 介绍一下自己"
 87 |               rows="5"
 88 |               style="background: #eee;resize: none; padding: 1rem;margin: auto;width:90%; "
 89 |               v-model="master.userIntro.introduce"
 90 |             />
 91 |           </form>
 92 |         </swiper-slide>
 93 | 
 94 |         <!-- fourth step -->
 95 |         <swiper-slide class="swiper-no-swiping">
 96 |           <form class="form" style :action="postUrl" method="post">
 97 |             <div style="columns:2" v-for="i in [0,1,2]" :key="i">
 98 |               <input
 99 |                 type="text"
100 |                 name="skill"
101 |                 autocomplete="off"
102 |                 placeholder=" "
103 |                 v-model="skillUnparsed[i][0]"
104 |               />
105 |               <label for>Skill {{i + 1}}</label>
106 |               <input
107 |                 type="text"
108 |                 name="score"
109 |                 autocomplete="off"
110 |                 placeholder=" "
111 |                 v-model="skillUnparsed[i][1]"
112 |               />
113 |               <label for>Score</label>
114 |             </div>
115 |           </form>
116 |         </swiper-slide>
117 |       </swiper>
118 | 
119 |       <div class="nav">
120 |         <button
121 |           class="btn next"
122 |           @click.prevent="handleNext"
123 |         >{{currentStep !== totalStep ? 'Next': 'Finish'}}</button>
124 |       </div>
125 |     </main>
126 |   </div>
127 | </template>
128 | 
129 | <script>
130 | import 'swiper/dist/css/swiper.css'
131 | 
132 | import masterApi from '@/api/master'
133 | import { swiper, swiperSlide } from 'vue-awesome-swiper'
134 | import Vue from 'vue'
135 | import { mapActions } from 'vuex'
136 | // import router from '../router'
137 | 
138 | const orgin = window.location.href.split('#').slice(0, 2).join('#')
139 | export default {
140 |   components: {
141 |     swiper,
142 |     swiperSlide
143 |   },
144 |   data () {
145 |     return {
146 |       postUrl: process.env.development ? 'http://localhost:3000/api/master/init' : '/api/master/init',
147 |       currentStep: 1,
148 |       totalStep: 4,
149 |       master: {
150 |         username: '',
151 |         password: '',
152 |         confirmPass: '',
153 |         avatar: '',
154 |         nickname: '',
155 |         githubUrl: '',
156 |         userIntro: {
157 |           introduce: '',
158 |           skill: {}
159 |         }
160 |       },
161 |       skillUnparsed: [['', ''], ['', ''], ['', '']],
162 |       swiperOption: {
163 |         noSwiping: true,
164 |       }
165 |     }
166 |   },
167 |   created () {
168 |     window.history.pushState(null, '', orgin + '#1')
169 |   },
170 |   watch: {
171 |     currentStep (val) {
172 |       this.$refs.stepSwiper.swiper.slideTo(val - 1)
173 |       window.history.pushState(null, '', `${orgin}#${this.currentStep}`)
174 |     },
175 |     $route: {
176 |       deep: true,
177 |       handler (val) {
178 |         if (/#(\d*)/.test(val.hash)) {
179 |           const step = Number(val.hash.split('#').join(''))
180 |           if (step < this.currentStep) {
181 |             this.currentStep = step
182 |           }
183 |         }
184 |       }
185 |     }
186 |   },
187 |   methods: {
188 |     ...mapActions(['loadUser']),
189 |     async handleNext () {
190 |       switch (this.currentStep) {
191 |         case 1:
192 |           await this.checkPass()
193 |           break;
194 |         case 2:
195 |           if (!this.checkUrl(this.master.avatar)) {
196 |             this.$msg({ msg: '头像地址不正确', type: 'error' })
197 |             throw new Error('头像地址不正确')
198 |           }
199 |           if (!this.checkUrl(this.master.githubUrl)) {
200 |             this.$msg({ msg: 'GitHub 个人地址不正确', type: 'error' })
201 |             throw new Error('GitHub 个人地址不正确')
202 |           }
203 |           break;
204 |         case 3:
205 |           break;
206 |         case 4:
207 |           for (const i of this.skillUnparsed)
208 |             if (i[0] && i[1] && (i[1] == Number(i[1])))
209 |               this.master.userIntro.skill[i[0]] = Number(i[1]) <= 100 ? Number(i[1]) : 100
210 |           break;
211 |         default:
212 |           break;
213 |       }
214 |       if (this.currentStep < this.totalStep)
215 |         this.currentStep++
216 |       else if (this.currentStep === this.totalStep) {
217 |         masterApi.completeInit(this.master).then(({ data }) => {
218 |           if (data.ok === 1) {
219 |             this.$msg({ msg: '初始化成功' })
220 |             this.loadUser()
221 |             this.$router.push({ name: 'login' })
222 |           }
223 |         })
224 |       }
225 |     },
226 |     async checkPass () {
227 |       if (!this.master.username) {
228 |         this.$msg({ msg: '请输入用户名', type: 'error' })
229 |         throw new Error('请输入用户名')
230 |       }
231 |       if (this.master.password !== this.master.confirmPass) {
232 |         this.$msg({ msg: '两次密码输入不匹配', type: 'error' })
233 |         throw new Error('请输入用户名')
234 |       }
235 |       const { data } = await masterApi.checkPass(this.master.password)
236 |       if (data.ok === 1) {
237 |         return
238 |       } else {
239 |         this.$msg({ msg: data.msg, type: 'error' })
240 |         throw new Error(data.msg)
241 |       }
242 |     },
243 |     checkUrl (URL) {
244 |       return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/.test(URL);
245 |     },
246 |   },
247 |   // 路由到达前 检测是否完成初始化
248 |   async beforeRouteEnter (to, from, next) {
249 |     const { data } = await masterApi.checkInit()
250 |     if (data.ok === 0) {
251 |       // 因为无法获取到 this
252 |       Vue.prototype.$msg({ type: 'error', msg: data.msg })
253 |       return next('/')
254 |     }
255 |     next()
256 |   }
257 | }
258 | </script>
259 | 
260 | <style lang="scss" scoped>
261 | // #BCBBBB
262 | .wrap {
263 |   padding: 4rem 3rem;
264 |   position: relative;
265 |   min-height: 100vh;
266 | }
267 | input:focus,
268 | textarea:focus {
269 |   background: linear-gradient(90deg, #794af5 16%, #92d6fe 84%) no-repeat;
270 |   background-position: bottom;
271 |   background-size: 100% 2px;
272 |   animation: toright 0.5s forwards;
273 | }
274 | input,
275 | textarea {
276 |   outline: none;
277 |   border: none;
278 |   background: linear-gradient(to bottom, transparent 90%, #f2f2f2 91%);
279 |   width: 100%;
280 |   line-height: 2;
281 |   font-size: 16px;
282 |   margin-bottom: 1rem;
283 | }
284 | main {
285 |   margin-top: calc(20vh - 4rem) !important;
286 |   max-width: 90vw;
287 |   margin: auto;
288 |   width: calc(1.5rem * 20);
289 | 
290 |   @media (max-width: 578px) {
291 |     width: auto;
292 |   }
293 |   small,
294 |   label {
295 |     color: #bcbcbb;
296 |   }
297 |   form {
298 |     // height: 13.875rem;
299 |     // overflow: scroll;
300 |     margin-top: 4rem;
301 |     padding: 0 1rem;
302 |     line-height: 1.5;
303 |     label {
304 |       font-family: Arial, Helvetica, sans-serif;
305 |       display: block;
306 |       transform: translateY(-200%);
307 |       transition: transform 0.5s, opacity 0.5s;
308 |       z-index: -1;
309 |       cursor: text;
310 |       user-select: none;
311 |       position: relative;
312 |       pointer-events: none;
313 |     }
314 |     input:focus + label,
315 |     textarea:focus + label {
316 |       transform: translateY(-300%);
317 |     }
318 |     input[type='text'],
319 |     input[type='password'],
320 |     textarea {
321 |       font-family: Arial, Helvetica, sans-serif;
322 |       z-index: 2;
323 | 
324 |       &:not(:focus):not(:placeholder-shown) + label {
325 |         // 实现输入框中有字时 隐藏 label ps: 需要在文本框加入placeholder并且不为空
326 |         opacity: 0;
327 |       }
328 |     }
329 |   }
330 | }
331 | .nav {
332 |   display: flex;
333 |   justify-content: center;
334 |   align-items: center;
335 |   padding: 0 1rem;
336 |   .btn {
337 |     width: 48%;
338 |     padding: 0.5rem 1rem;
339 |     font-size: 1.5rem;
340 |     line-height: 1.5;
341 |     border-radius: 6px;
342 |     outline: none;
343 |     font-family: Arial, Helvetica, sans-serif;
344 |     margin-right: 2rem;
345 |     &:last-child {
346 |       margin: 0;
347 |     }
348 | 
349 |     &.next,
350 |     &.submit {
351 |       background-image: linear-gradient(90deg, #7e7af8 16%, #58a8fb 84%);
352 |       color: #fff;
353 |     }
354 |   }
355 | }
356 | 
357 | @keyframes toright {
358 |   0% {
359 |     background-position: -30rem 100%;
360 |   }
361 |   to {
362 |     background-position: bottom;
363 |   }
364 | }
365 | </style>


--------------------------------------------------------------------------------
/src/views/Admin/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg">
  3 |     <div class="wrap" ref="wrap">
  4 |       <div class="side-bar" :class="{active: sidebar}">
  5 |         <div class="title" @click="$refs.wrap.classList.toggle('full')">
  6 |           Moment
  7 |           <!-- <div class="icon" @click="$refs.wrap.classList.add('full')">
  8 |             <font-awesome-icon :icon="['fas','arrows-alt-v']"></font-awesome-icon>
  9 |           </div>-->
 10 |         </div>
 11 |         <div class="items">
 12 |           <item
 13 |             :active="activeItems === index ? true : false"
 14 |             :item="item"
 15 |             :index="index"
 16 |             v-for="(item, index) in items"
 17 |             :key="index"
 18 |           />
 19 |         </div>
 20 |         <div class="user">
 21 |           <div class="block user-select" @click="$refs.user.classList.toggle('active')">
 22 |             <div class="img">
 23 |               <img :src="user.avatar" />
 24 |             </div>
 25 |             <!-- <div class="username" style="transform: translateY(5px)"> windows 上样式加了偏移并不好看 垃圾windows渲染-->
 26 |             <div class="username">{{user.username}}</div>
 27 |             <div class="dot" style="cursor: pointer">.</div>
 28 | 
 29 |             <div class="select-menu" ref="user">
 30 |               <div class="i">
 31 |                 <a href="https://github.com/innei/moment" target="_blank">
 32 |                   <font-awesome-icon :icon="['fab','github']"></font-awesome-icon>
 33 |                 </a>
 34 |               </div>
 35 |               <div class="i" @click="$router.push('/')">
 36 |                 <font-awesome-icon :icon="['fas', 'globe-asia']"></font-awesome-icon>
 37 |               </div>
 38 |               <div class="i" @click="handleLogout">
 39 |                 <font-awesome-icon :icon="['fas', 'sign-out-alt']"></font-awesome-icon>
 40 |               </div>
 41 |             </div>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 | 
 46 |       <div class="content">
 47 |         <router-view></router-view>
 48 |       </div>
 49 |     </div>
 50 |     <postDialog
 51 |       v-if="dialogs.post && $route.fullPath === '/master/moments'"
 52 |       @cancel-post="dialogs.post = false"
 53 |       :editData="editData"
 54 |     />
 55 |     <transition name="fade">
 56 |       <overlay v-if="overlay" />
 57 |     </transition>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <script>
 62 | import { mapGetters, mapActions } from 'vuex'
 63 | import item from '@/components/Admin/sidebar/item.vue'
 64 | import { signOut } from '@/api/master'
 65 | export default {
 66 |   name: 'admin',
 67 |   computed: {
 68 |     ...mapGetters(['user', 'isLogged', 'sidebar']),
 69 |   },
 70 |   components: {
 71 |     item,
 72 |     postDialog: () => import('@/components/Home/postDialog.vue'),
 73 |     overlay: () => import('@/components/Home/overlay.vue')
 74 |   },
 75 |   methods: {
 76 |     ...mapActions(['loadRecentlyMoments', 'setLogged', 'setToken']),
 77 |     async handleLogout () {
 78 |       const { data } = await signOut()
 79 |       if (data.ok === 1) {
 80 |         this.$msg({ msg: data.msg })
 81 |         localStorage.clear()
 82 |         this.setToken(null)
 83 | 
 84 |         this.setLogged(false)
 85 |         this.$router.push('/login')
 86 |       }
 87 |     }
 88 |   },
 89 |   mounted () {
 90 |     setTimeout(() => {
 91 |       this.$refs.wrap.classList.toggle('full')
 92 |     }, 1000);
 93 |   },
 94 |   created () {
 95 |     this.$root.$data.route = '/master'
 96 |     this.loadRecentlyMoments()
 97 |   },
 98 |   beforeDestroy () {
 99 |     this.$root.$data.route = null
100 |     delete this.$root.$data.route
101 |   },
102 |   beforeRouteEnter (to, from, next) {
103 |     next(vm => {
104 |       if (!vm.isLogged) {
105 |         return next('/login')
106 |       }
107 | 
108 |       const path = to.fullPath.replace(vm.$root.$data.route, '').split('/').map(item => '/' + item).slice(1)
109 | 
110 |       vm.items.forEach((item, index) => {
111 |         if (item.path === path[0]) {
112 |           vm.activeItems = index
113 |           next()
114 |         }
115 |       });
116 |     })
117 |   },
118 |   beforeRouteUpdate (to, from, next) {
119 |     const path = to.fullPath.replace(this.$root.$data.route, '').split('/').map(item => '/' + item).slice(1)
120 |     this.items.forEach((item, index) => {
121 |       if (item.path === path[0]) {
122 |         this.activeItems = index
123 |         return next()
124 |       }
125 |     });
126 |   },
127 |   data () {
128 |     return {
129 |       path: '/',
130 |       items: [{
131 |         title: 'Dashboard',
132 |         icon: ['fas', 'tachometer-alt'],
133 |         path: '/dashboard'
134 |       },
135 |       {
136 |         title: 'Moment',
137 |         icon: ['far', 'clock'],
138 |         path: '/moments'
139 |       },
140 |       {
141 |         title: 'Analytics',
142 |         icon: ['fas', 'chart-pie'],
143 |         path: '/analytics',
144 |         subItems: [{
145 |           path: '/chart',
146 |           title: 'Chart',
147 |           icon: ['fas', 'chart-line']
148 |         }, {
149 |           path: '/table',
150 |           title: 'Table',
151 |           icon: ['fas', 'chart-bar']
152 |         }]
153 |       },
154 |       {
155 |         title: 'Setting',
156 |         icon: ['fas', 'cogs'],
157 |         path: '/setting',
158 |         subItems: [{
159 |           title: 'Profile',
160 |           icon: ['fas', 'user-cog'],
161 |           path: '/profile',
162 | 
163 |         }, {
164 |           title: 'Reset',
165 |           icon: ['fas', 'key'],
166 |           path: '/reset',
167 | 
168 |         }]
169 |       }
170 |       ],
171 |       activeItems: 0,
172 |       overlay: false, // 遮罩
173 |       dialogs: {
174 |         post: false
175 |       },
176 |       editData: null
177 |     }
178 |   },
179 |   watch: {
180 |     dialogs: {
181 |       deep: true,
182 |       handler (val) {
183 |         let overlay = false
184 |         for (const flag of Object.values(val)) {
185 | 
186 |           if (flag === true) {
187 |             overlay = true
188 |             break
189 |           }
190 |         }
191 |         this.overlay = overlay
192 |         this.loadRecentlyMoments()
193 |       }
194 |     }
195 |   }
196 | }
197 | </script>
198 | 
199 | <style lang="scss" scoped>
200 | @import url(https://fonts.googleapis.com/css?family=Nunito&display=swap);
201 | 
202 | $deepBg: #1681e1;
203 | $shallowbg: #1a9cf3;
204 | .bg {
205 |   position: fixed;
206 |   top: 0;
207 |   left: 0;
208 |   bottom: 0;
209 |   right: 0;
210 |   background-color: $deepBg;
211 | }
212 | .wrap.full {
213 |   margin: 0;
214 |   border-radius: 0;
215 |   .title .icon {
216 |     display: none;
217 |   }
218 | }
219 | .wrap {
220 |   position: fixed;
221 |   top: 0;
222 |   left: 0;
223 |   right: 0;
224 |   bottom: 0;
225 |   margin: 5rem;
226 |   background: linear-gradient(to bottom, #1188e8, #16aae7);
227 |   border-radius: 24px;
228 |   display: grid;
229 |   grid-template-columns: 15rem auto;
230 |   box-shadow: 5px 24px 133px rgba(0, 0, 0, 0.3);
231 |   transition: margin 0.5s, border-radius 0.4s 0.1s;
232 | 
233 |   .side-bar {
234 |     $left-margin: 1.5rem;
235 |     color: #fff;
236 |     display: grid;
237 |     grid-template-rows: 6rem auto 6rem;
238 |     // overflow: hidden;
239 |     > .title {
240 |       display: flex;
241 |       font-family: 'Josefin Sans', sans-serif;
242 |       justify-content: center;
243 |       align-items: center;
244 |       font-size: 1.4rem;
245 |       user-select: none;
246 |       cursor: pointer;
247 |     }
248 | 
249 |     .items {
250 |       margin-left: $left-margin;
251 |       box-sizing: border-box;
252 |       overflow: scroll;
253 |       height: calc(100vh - 10rem - 12.875rem);
254 |       transition: height 0.5s;
255 |       border-radius: 0 0 24px 24px;
256 |     }
257 | 
258 |     .user {
259 |       margin: $left-margin;
260 |       background: #13afea;
261 |       border-radius: 12px;
262 |       position: relative;
263 |       .block {
264 |         max-height: 100%;
265 |         display: grid;
266 |         grid-template-columns: 50px auto 20px;
267 |         margin: 0.5rem;
268 |         user-select: none;
269 |         * {
270 |           display: flex;
271 |           align-items: center;
272 |           justify-content: center;
273 |         }
274 |         .username {
275 |           font-family: 'Josefin Sans', sans-serif;
276 |         }
277 |         .img {
278 |           width: 30px;
279 |           height: 30px;
280 |           overflow: hidden;
281 |           position: relative;
282 |         }
283 |         img {
284 |           max-width: 30px;
285 |           border-radius: 50%;
286 |         }
287 |       }
288 |     }
289 |   }
290 |   .content {
291 |     background-color: #fff !important;
292 |     border-radius: 0 24px 24px 0;
293 |     transition: border-radius 0.5s;
294 |     position: relative;
295 |   }
296 |   &.full .content {
297 |     border-radius: 0;
298 |   }
299 |   &.full .items {
300 |     height: calc(100vh - 12.875rem);
301 |   }
302 | }
303 | 
304 | .user-select {
305 |   position: relative;
306 | 
307 |   .select-menu {
308 |     position: absolute;
309 |     right: -100px;
310 |     z-index: 9;
311 |     .i {
312 |       width: 40px;
313 |       height: 40px;
314 |       background: $shallowbg;
315 |       border-radius: 50%;
316 |       position: absolute;
317 |       display: flex;
318 |       justify-content: center;
319 |       align-items: center;
320 |       box-shadow: 5px 5px 8px -5px #1188e89c;
321 |       transition: transform 0.2s, background 0.3s;
322 |       transform: scale(0);
323 |       cursor: pointer;
324 |     }
325 |     .i:hover {
326 |       background: $deepBg;
327 |     }
328 |     &.active .i {
329 |       transform: scale(1);
330 |       transition-timing-function: cubic-bezier(0.49, 0.02, 0.73, 1.75);
331 |       transition-duration: 0.5s;
332 |     }
333 |     .i:nth-child(1) {
334 |       top: -40px;
335 |       left: -60px;
336 |     }
337 |     .i:nth-child(2) {
338 |       top: 0;
339 |       transition-delay: 0.15s;
340 |     }
341 |     .i:nth-child(3) {
342 |       top: 40px;
343 |       left: -60px;
344 |       transition-delay: 0.3s;
345 |     }
346 |   }
347 | }
348 | 
349 | // 响应式
350 | @import '@/scss/_viewport.scss';
351 | @media (max-width: $small) {
352 |   .wrap {
353 |     display: flex;
354 |     .side-bar {
355 |       // display: none;
356 |       left: 0;
357 |       width: 175px;
358 |       position: fixed;
359 |       left: 0;
360 |       z-index: 4;
361 |       background: linear-gradient(to bottom, #1188e8, #16aae7);
362 |       transform: translateX(-100%);
363 |       transition: transform 0.5s, box-shadow 0.5s;
364 |       height: 500px;
365 |       border-radius: 0 0 24px 0;
366 |       display: flex;
367 |       flex-direction: column;
368 |       &.active {
369 |         box-shadow: 1px 1px 43px -9px #000;
370 |         transform: translateX(0);
371 |       }
372 |       .title {
373 |         padding: 2rem 0;
374 |       }
375 |     }
376 | 
377 |     .content {
378 |       width: 100%;
379 |       height: 100%;
380 |       border-radius: 24px;
381 |     }
382 |   }
383 | }
384 | .fade-enter-active,
385 | .fade-leave-active {
386 |   transition: opacity 0.2s;
387 | }
388 | 
389 | .fade-enter,
390 | .fade-leave-to {
391 |   opacity: 0;
392 | }
393 | </style>


--------------------------------------------------------------------------------
/src/assets/0.svg:
--------------------------------------------------------------------------------
1 | <svg id="b982bec5-b5e3-4679-8fe1-e58d73638aca" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1153.08838" height="830.28275" viewBox="0 0 1153.08838 830.28275"><title>social_sharing</title><path d="M118.2196,383.74864c0,16.22-8.98,28.33-22.2,28.33-4.45,0-8.62-2.42-10.05-5.15,0,0-2.39,9.52-2.9,11.37a34.17266,34.17266,0,0,1-4.06,8.73c-.79-.4-2.88-1.28-4.91-2.11a35.637,35.637,0,0,1,.73-9.04c.78-3.36,5.28-22.54,5.28-22.54a15.80978,15.80978,0,0,1-1.32-6.53c0-6.12006,3.53-10.7,7.93-10.7,3.75,0,5.55,2.82,5.55,6.2,0,3.78-2.41,9.43-3.64,14.67a6.38728,6.38728,0,0,0,6.51,7.95c7.78,0,13.03-10.05,13.03-21.97,0-9.07-6.07-15.84-17.11-15.84-12.47,0-20.26,9.36-20.26,19.8a11.94851,11.94851,0,0,0,2.72,8.1,2.04935,2.04935,0,0,1,.59,2.31c-.2.76-.64,2.58-.85,3.32a1.414,1.414,0,0,1-2.05,1.04c-5.75-2.37-8.43-8.68-8.43-15.8,0-11.74,9.86-25.82,29.4-25.82C107.87958,360.06859,118.2196,371.48863,118.2196,383.74864Z" transform="translate(-23.45581 -34.85863)" fill="#6c63ff"/><path d="M1114.5296,140.50859h-27.08a18.85316,18.85316,0,0,0-18.95,18.63v26.61005a18.8447,18.8447,0,0,0,18.95,18.62h27.08a18.84465,18.84465,0,0,0,18.94995-18.62v-26.61A18.85311,18.85311,0,0,0,1114.5296,140.50859Zm-13.54,42.58a10.64657,10.64657,0,1,1,10.83-10.65A10.75591,10.75591,0,0,1,1100.98956,183.08861Zm17.6-23.95a3.99059,3.99059,0,1,1,4.06-3.99A4.01643,4.01643,0,0,1,1118.5896,159.13859Z" transform="translate(-23.45581 -34.85863)" fill="#6c63ff"/><path d="M633.35474,810.85863H328.78442a36.05646,36.05646,0,0,1-19.37841-5.58008,32.54235,32.54235,0,0,1-15.33643-27.31348V67.77464c0-18.1499,15.57324-32.916,34.71484-32.916H400.363v6.53271c0,13.94189,12.00195,25.28467,26.75439,25.28467H528.02417A27.48739,27.48739,0,0,0,543.908,61.72972a25.17836,25.17836,0,0,0,10.8706-20.33838V34.85863h78.57618c19.1416,0,34.71484,14.76611,34.71484,32.916V777.96507A32.15329,32.15329,0,0,1,655.846,803.011,35.77463,35.77463,0,0,1,633.35474,810.85863Zm-304.57032-774c-18.03906,0-32.71484,13.86914-32.71484,30.916V777.96507a30.5492,30.5492,0,0,0,14.4126,25.62793,34.052,34.052,0,0,0,18.30224,5.26563H633.35474a33.7674,33.7674,0,0,0,21.23339-7.40235,30.165,30.165,0,0,0,11.48145-23.49121V67.77464c0-17.04687-14.67578-30.916-32.71484-30.916H556.77856v4.53271a27.17792,27.17792,0,0,1-11.73144,21.98193A29.46553,29.46553,0,0,1,528.02417,68.676H427.11743c-15.85547,0-28.75439-12.23975-28.75439-27.28467V36.85863Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M643.35283,95.229V743.429a29.13909,29.13909,0,0,1-29.13,29.11005h-263.15a29.07906,29.07906,0,0,1-29.13-29.11V95.229a29.12748,29.12748,0,0,1,29.13-29.13h39.38v5.05a23.987,23.987,0,0,0,23.98,23.99h133.84a23.78919,23.78919,0,0,0,14.22-4.68,22.28425,22.28425,0,0,0,2.36-1.98,23.917,23.917,0,0,0,7.4-17.33v-5.05h41.97A29.12108,29.12108,0,0,1,643.35283,95.229Z" transform="translate(-23.45581 -34.85863)" fill="#f2f2f2"/><path d="M571.04082,586.64541H395.164V397.28319H571.04082Zm-173.622-2.2549h171.367V399.53809h-171.367Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><rect x="394.77403" y="168.39848" width="115.46684" height="2.2549" fill="#3f3d56"/><rect x="394.77403" y="199.09179" width="115.46684" height="2.2549" fill="#3f3d56"/><rect x="394.77403" y="229.78511" width="115.46684" height="2.2549" fill="#3f3d56"/><path d="M383.44826,811.12552l-1.07325-.40234c-.23584-.08887-23.70849-9.082-34.7041-29.47364-10.99609-20.39257-5.61181-44.94531-5.55615-45.19043l.25342-1.11816,1.07275.40234c.23584.08887,23.708,9.082,34.7041,29.47364,10.9961,20.39257,5.61182,44.94531,5.55616,45.19043Zm-34.01661-30.8252c9.29639,17.24122,27.84522,26.07911,32.54493,28.09668.89355-5.03711,3.6958-25.40625-5.59229-42.63086-9.28711-17.22265-27.84326-26.07421-32.54492-28.09667C342.94533,742.7095,340.14406,763.07669,349.43165,780.30032Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M356.0741,774.0965c19.76057,11.88861,27.371,35.50266,27.371,35.50266s-24.42779,4.33881-44.18836-7.5498-27.371-35.50266-27.371-35.50266S336.31353,762.20788,356.0741,774.0965Z" transform="translate(-23.45581 -34.85863)" fill="#6c63ff"/><polygon points="554.114 758.5 524.114 756.5 534.114 801.5 568.114 787.5 554.114 758.5" fill="#ffb9b9"/><polygon points="829.114 674.5 759.114 606.5 719.114 637.5 640.114 732.5 649.114 746.5 745.114 681.5 810.114 766.5 872.114 735.5 829.114 674.5" fill="#2f2e41"/><polygon points="829.114 674.5 759.114 606.5 719.114 637.5 640.114 732.5 649.114 746.5 745.114 681.5 810.114 766.5 872.114 735.5 829.114 674.5" opacity="0.1"/><path d="M858.56958,754.35863l-9,7-73-25-17-7-34,7s0-28,32-27l33,8,39,3Z" transform="translate(-23.45581 -34.85863)" fill="#ffb9b9"/><polygon points="900.114 793.5 878.114 807.5 852.114 807.5 731.114 762.5 554.114 794.5 549.114 756.5 711.114 685.5 853.114 732.5 900.114 793.5" fill="#2f2e41"/><path d="M781.56958,650.35863l-15,3-3.26873-3.81352a20.20619,20.20619,0,0,1-2.73128-22.18647h0l42-55s12-27,31-16-16,29-16,29l-21,33,2,17Z" transform="translate(-23.45581 -34.85863)" fill="#ffb9b9"/><circle cx="853.11377" cy="511.5" r="39" fill="#ffb9b9"/><path d="M859.06958,574.85863l18,43,43-18s-14-34-14-35S859.06958,574.85863,859.06958,574.85863Z" transform="translate(-23.45581 -34.85863)" fill="#ffb9b9"/><path d="M977.47955,702.06859a224.07967,224.07967,0,0,1-10.99,69.31l-2.92,8.98-14,64-15,4-11-14-22-16-16-26-13.72-22.86-4.28-7.14-15-75-57-32-19-3,4-11,17-23,17-2,5-4,4,2,16-9,5,2,29.24,2.72,17.76-3.72,25.54-13.71,10.46,1.71,36,30A223.883,223.883,0,0,1,977.47955,702.06859Z" transform="translate(-23.45581 -34.85863)" fill="#575a89"/><path d="M556.77841,808.84314s8.95672-15.1802,5.1736-16.95245-19.84944-8.83742-19.84944-8.83742l-23.561-7.80812s-33.99706-50.52658-34.7433-6.58794,24.754,54.50058,24.754,54.50058,22.74316,48.94521,35.62616,41.14036,25.77439-34.29908,25.77439-34.29908S546.72082,817.51025,556.77841,808.84314Z" transform="translate(-23.45581 -34.85863)" fill="#2f2e41"/><polygon points="943.114 658.5 905.114 683.5 848.394 734.64 844.114 727.5 832.114 667.5 835.114 667.5 866.114 610.5 943.114 658.5" opacity="0.1"/><polygon points="866.114 604.5 835.114 661.5 824.114 661.5 817.114 681.5 801.114 685.5 844.114 732.5 905.114 677.5 943.114 652.5 866.114 604.5" fill="#575a89"/><path d="M846.23553,517.36044,842.01,518.98622a5.89887,5.89887,0,0,1-1.508-8.292l-7.80871-.36541a58.965,58.965,0,0,1,88.02685-7.09517c.35552-1.22442,4.23105,1.15782,5.8133,3.57335.53165-1.99246,4.16545,7.63918,5.4507,14.44745.595-2.26687,2.88291,1.39269.87853,4.9042,1.27-.18555,1.84363,3.0637.86049,4.87388,1.38932-.65272,1.15517,3.22594-.35123,5.818,1.98254-.17615-15.63561,27.16738-22.76891,43.14727-2.07127-9.51695-4.40015-19.53847-11.079-26.62758-1.13524-1.205-2.37842-2.3025-3.61958-3.39808l-6.713-5.92559c-7.80593-6.89033-14.90676-15.39442-25.3056-17.96964-7.14637-1.76976-11.665-2.16933-7.77042-10.2221-3.51866,1.46835-6.80449,3.65195-10.35469,5.01575C845.80842,519.74536,846.30459,518.48624,846.23553,517.36044Z" transform="translate(-23.45581 -34.85863)" fill="#2f2e41"/><circle cx="872.61377" cy="516" r="7" fill="#ffb9b9"/><path d="M510.90245,471.42564c.03849.769.05762,1.55741.05762,2.34568,0,23.99576-18.266,51.664-51.664,51.664a50.67957,50.67957,0,0,1-27.76437-8.21013,35.792,35.792,0,0,0,4.32616.26921,36.38447,36.38447,0,0,0,22.53457-7.76783,18.19006,18.19006,0,0,1-16.95858-12.61317,18.2801,18.2801,0,0,0,3.42254.32684,17.82892,17.82892,0,0,0,4.76836-.63454,18.15677,18.15677,0,0,1-14.55516-17.80447v-.2116a17.80528,17.80528,0,0,0,8.24851,2.26882,18.20367,18.20367,0,0,1-5.65286-24.24572,51.42737,51.42737,0,0,0,37.39732,18.97744,18.457,18.457,0,0,1-.46144-4.15307,18.13349,18.13349,0,0,1,31.37913-12.4017,36.26328,36.26328,0,0,0,11.53644-4.403,18.32528,18.32528,0,0,1-7.97942,10.05589,36.87982,36.87982,0,0,0,10.40209-2.86486A36.86223,36.86223,0,0,1,510.90245,471.42564Z" transform="translate(-23.45581 -34.85863)" fill="#6c63ff"/><path d="M483.22046,568.14183a72.1416,72.1416,0,1,1,72.14111-72.1416A72.22326,72.22326,0,0,1,483.22046,568.14183Zm0-142.2832a70.1416,70.1416,0,1,0,70.14111,70.1416A70.22128,70.22128,0,0,0,483.22046,425.85863ZM466.77905,532.97386a51.74177,51.74177,0,0,1-28.3125-8.36914l-3.58691-2.335,4.25.5039a35.84261,35.84261,0,0,0,4.21045.25586A35.13631,35.13631,0,0,0,463.14575,517.01a19.141,19.141,0,0,1-15.17529-13.06054l-.51856-1.624,1.67041.33985a16.435,16.435,0,0,0,3.63282.31152A19.22462,19.22462,0,0,1,441.553,485.54515v-1.93262l1.48926.83594a16.76083,16.76083,0,0,0,4.416,1.709,19.17109,19.17109,0,0,1-3.16553-23.31738l.72706-1.25293.91357,1.124a50.57909,50.57909,0,0,0,35.38916,18.53223,19.50193,19.50193,0,0,1-.23584-3.06152,19.13352,19.13352,0,0,1,32.72266-13.49219,35.02072,35.02072,0,0,0,10.67382-4.1748l2.26172-1.3418-.79883,2.50586a19.04861,19.04861,0,0,1-5.0332,8.02148,35.69964,35.69964,0,0,0,6.11133-2.06347l3.14355-1.39063L528.261,469.1057a37.767,37.767,0,0,1-8.85987,9.34082c.023.61132.03418,1.23242.03418,1.85254C519.4353,506.19163,499.7395,532.97386,466.77905,532.97386Zm-23.68457-7.94531a49.82715,49.82715,0,0,0,23.68457,5.94531c31.7085,0,50.65625-25.76563,50.65625-50.6748,0-.77051-.01806-1.541-.05517-2.293l-.02637-.541.43848-.31738a35.85215,35.85215,0,0,0,6.79345-6.42188,37.95313,37.95313,0,0,1-7.45263,1.68457l-4.67285.57325,4.03662-2.42286a17.23133,17.23133,0,0,0,6.50976-6.96679,36.86028,36.86028,0,0,1-9.34521,3.166l-.543.10547-.37793-.40332a17.13409,17.13409,0,0,0-29.65381,11.71973,16.8298,16.8298,0,0,0,.44092,3.9082l.31054,1.29785-1.333-.0664a52.5606,52.5606,0,0,1-37.15674-18.19336,17.175,17.175,0,0,0,6.00488,21.62793l2.86524,1.917-3.44629-.08594a18.83976,18.83976,0,0,1-7.16016-1.61816,17.19859,17.19859,0,0,0,13.6958,15.3955l4.15479.835-4.08936,1.11035a19.18189,19.18189,0,0,1-6.92041.57715,17.15381,17.15381,0,0,0,15.4458,10.36718l2.80518.05371-2.20655,1.73243a37.13564,37.13564,0,0,1-23.15722,7.98925C443.25854,525.02952,443.17651,525.02952,443.09448,525.02855Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M1111.98853,190.08372a11.6443,11.6443,0,1,1,11.83007-11.64257A11.75042,11.75042,0,0,1,1111.98853,190.08372Zm0-21.28564a9.6446,9.6446,0,1,0,9.83007,9.64307A9.74909,9.74909,0,0,0,1111.98853,168.79808Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M1125.52563,206.04808h-27.07421a14.61668,14.61668,0,0,1-10.25879-4.1919,14.0324,14.0324,0,0,1-4.27832-10.11181V165.13743a14.14074,14.14074,0,0,1,4.27343-10.10644,14.49287,14.49287,0,0,1,10.26368-4.19727h27.07421a14.61175,14.61175,0,0,1,10.25879,4.19287,14.02777,14.02777,0,0,1,4.27832,10.11084v26.60694a14.14267,14.14267,0,0,1-4.27343,10.10693A14.49407,14.49407,0,0,1,1125.52563,206.04808Zm-27.07421-53.21436a12.50463,12.50463,0,0,0-8.85743,3.61914,12.156,12.156,0,0,0-3.67968,8.68457v26.60694a12.05029,12.05029,0,0,0,3.6748,8.68066,12.6284,12.6284,0,0,0,8.86231,3.62305h27.07421a12.50962,12.50962,0,0,0,8.85743-3.61865,12.15794,12.15794,0,0,0,3.67968-8.68506V165.13743a12.04252,12.04252,0,0,0-3.6748-8.67968,12.62554,12.62554,0,0,0-8.86231-3.624Zm13.53711,42.57178a16.96664,16.96664,0,1,1,17.24511-16.96435A17.12608,17.12608,0,0,1,1111.98853,195.4055Zm0-31.92871a14.96694,14.96694,0,1,0,15.24511,14.96436A15.12371,15.12371,0,0,0,1111.98853,163.47679Zm17.59863,2.66064a4.99144,4.99144,0,1,1,5.06055-4.99121A5.03251,5.03251,0,0,1,1129.58716,166.13743Zm0-7.98193a2.99176,2.99176,0,1,0,3.06055,2.99072A3.03006,3.03006,0,0,0,1129.58716,158.1555Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M1111.29321,243.14134c-35.97851,0-65.25-28.77344-65.25-64.14111s29.27149-64.1416,65.25-64.1416c35.9795,0,65.251,28.77392,65.251,64.1416S1147.27271,243.14134,1111.29321,243.14134Zm0-126.28271c-34.876,0-63.25,27.87646-63.25,62.1416,0,34.26465,28.374,62.14111,63.25,62.14111,34.877,0,63.251-27.87646,63.251-62.14111C1174.54419,144.73509,1146.17017,116.85863,1111.29321,116.85863Zm14.23242,94.51074h-27.07421a19.81281,19.81281,0,0,1-19.95215-19.625V165.13743a19.81281,19.81281,0,0,1,19.95215-19.625h27.07421a19.81281,19.81281,0,0,1,19.95215,19.625v26.60694A19.81281,19.81281,0,0,1,1125.52563,211.36937Zm-27.07421-63.85694a17.81137,17.81137,0,0,0-17.95215,17.625v26.60694a17.81137,17.81137,0,0,0,17.95215,17.625h27.07421a17.81137,17.81137,0,0,0,17.95215-17.625V165.13743a17.81137,17.81137,0,0,0-17.95215-17.625Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M94.1814,462.00023c-38.998,0-70.72559-31.88233-70.72559-71.0708s31.72754-71.0708,70.72559-71.0708S164.907,351.741,164.907,390.92943,133.17944,462.00023,94.1814,462.00023Zm0-140.1416c-37.89551,0-68.72559,30.98486-68.72559,69.0708s30.83008,69.0708,68.72559,69.0708,68.72558-30.98487,68.72558-69.0708S132.0769,321.85863,94.1814,321.85863Zm.41748,110.99121a42.18941,42.18941,0,0,1-11.94336-1.73877l-1.26465-.373.70019-1.1167a32.89138,32.89138,0,0,0,4.01368-8.58838c.50683-1.81933,2.873-11.25488,2.89648-11.3501l.63818-2.54394,1.21778,2.32275c1.189,2.26758,4.93994,4.61328,9.15918,4.61328,12.48291,0,21.20117-11.2373,21.20117-27.32763,0-11.147-9.36572-22.67725-25.03906-22.67725-19.58936,0-28.40039,14.5127-28.40039,24.81787,0,7.41211,2.84619,12.83252,7.80908,14.87207a.61356.61356,0,0,0,.46338.04639.62549.62549,0,0,0,.24609-.4082c.10986-.40186.28418-1.10205.4541-1.78223.15039-.60254.29688-1.18994.3916-1.54443.1792-.67188.18995-.71192-.39013-1.4087a12.97188,12.97188,0,0,1-2.94922-8.74121c0-10.084,7.44922-20.80175,21.25488-20.80175,11.0044,0,18.11524,6.60791,18.11524,16.834,0,13.1001-6.03516,22.979-14.03809,22.979a7.76208,7.76208,0,0,1-6.15625-2.853,7.29737,7.29737,0,0,1-1.31836-6.32862c.45606-1.94336,1.06738-3.92822,1.6582-5.84765,1.00342-3.26123,1.95166-6.34131,1.95166-8.59571,0-1.22021-.32763-5.20068-4.54589-5.20068-3.8877,0-6.93311,4.26221-6.93311,9.70361a15.06177,15.06177,0,0,0,1.21728,6.08692l.15967.32226-.08105.35205s-4.499,19.17481-5.28858,22.53321a35.20405,35.20405,0,0,0-.69043,9.21875l.061,1.6001-1.46484-.64747A42.37441,42.37441,0,0,1,94.61743,348.1555a42.21555,42.21555,0,0,1,42.11572,42.35742A42.28407,42.28407,0,0,1,94.59888,432.84984Zm-10.11866-3.30713a40.33534,40.33534,0,1,0-7.40869-2.7666,34.81472,34.81472,0,0,1,.77979-8.12793c.72851-3.09815,4.6123-19.65088,5.21094-22.20264a17.4243,17.4243,0,0,1-1.271-6.63477c0-6.563,3.92383-11.70361,8.93311-11.70361,3.97656,0,6.54589,2.82666,6.54589,7.20068,0,2.55518-.99121,5.77491-2.04052,9.18409-.58106,1.8872-1.18164,3.83886-1.62207,5.71582a5.33488,5.33488,0,0,0,.93847,4.62939,5.77383,5.77383,0,0,0,4.58887,2.0957c6.86279,0,12.03809-9.019,12.03809-20.979,0-9.1499-6.17481-14.834-16.11524-14.834-12.50635,0-19.25488,9.687-19.25488,18.80175a11.06109,11.06109,0,0,0,2.48193,7.45655,2.97568,2.97568,0,0,1,.79,3.209c-.09277.34815-.23633.92334-.38379,1.5127-.17383.69775-.353,1.415-.46289,1.81591a2.40281,2.40281,0,0,1-3.40332,1.69288c-5.66406-2.32715-9.04687-8.57813-9.04687-16.72071,0-13.18261,11.37109-26.81787,30.40039-26.81787,16.92529,0,27.03906,12.54688,27.03906,24.67725,0,16.99365-9.75732,29.32763-23.20117,29.32763a13.90283,13.90283,0,0,1-9.58887-3.86132c-.73291,2.91113-2.02588,8.02734-2.394,9.34912A32.94765,32.94765,0,0,1,84.48022,429.54271Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M1025.2688,388.63255a92.1722,92.1722,0,0,1-35.43652-6.937c-31.35352-13.06982-52.11719-41.21387-72.19629-68.43164-10.84082-14.69385-22.04981-29.8877-34.8545-42.68067-20.51757-20.5-44.32128-33.74365-68.83691-38.2998-27.55176-5.12207-55.62793,1.50195-75.10156,17.7124a70.484,70.484,0,0,0-6.94434,6.63916q4.2627.51783,8.50293,1.10547c29.7334,4.12061,67.02539,15.54932,75.82324,46.59668,3.37793,11.91748.97364,25.40772-6.59375,37.01123-8.10937,12.43311-21.01562,20.98242-34.52246,22.86865a47.9961,47.9961,0,0,1-6.64258.4585c-24.32617.00146-48.293-18.08057-55.38964-42.936-6.00977-21.04931.05371-45.57666,14.84082-63.56a524.84389,524.84389,0,0,0-53.83887-3.34571l.02148-2a526.67386,526.67386,0,0,1,55.375,3.51221,72.51129,72.51129,0,0,1,8.08887-7.88721c19.92578-16.58691,48.61621-23.36816,76.74609-18.14209,24.915,4.63037,49.08106,18.06494,69.88575,38.85157,12.91113,12.89941,24.165,28.15478,35.0498,42.9082,20.835,28.24121,40.51367,54.9165,71.35645,67.77344,31.001,12.92334,69.0664,7.04394,94.72265-14.627,25.65918-21.67041,37.82227-58.21728,30.26758-90.9414l1.94922-.4502c7.71875,33.436-4.71,70.77783-30.92578,92.91992C1069.67212,381.06175,1047.43091,388.63206,1025.2688,388.63255ZM730.29126,258.45628c-14.98828,17.56641-21.23633,41.9126-15.291,62.73438,7.47852,26.1958,34.32227,44.60742,59.83106,41.0459,12.94336-1.80811,25.32617-10.02491,33.124-21.981,7.252-11.11914,9.56543-24.01221,6.34571-35.37354-8.50391-30.0083-45.03028-41.12158-74.17481-45.16015Q735.22485,259.04222,730.29126,258.45628Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/><path d="M250.22241,375.86253a121.197,121.197,0,0,1-26.69385-2.8833,99.228,99.228,0,0,1-55.582-33.74316c-4.69091-5.61768-8.96338-11.92432-13.09472-18.02393-6.272-9.2583-12.75733-18.83252-20.72412-25.95654-7.92725-7.08838-18.36426-10.8169-27.23047-9.74121a22.17081,22.17081,0,0,0-16.00147,9.83691l-1.65234-1.12695A24.116,24.116,0,0,1,106.655,283.529c9.561-1.16309,20.33545,2.66064,28.80566,10.23535,8.15088,7.28906,14.707,16.96679,21.04688,26.32617,4.104,6.05859,8.34765,12.32324,12.97412,17.86328,26.98047,32.30762,69.83545,43.59717,117.57959,30.97461l.51074,1.93359A146.55469,146.55469,0,0,1,250.22241,375.86253Z" transform="translate(-23.45581 -34.85863)" fill="#3f3d56"/></svg>


--------------------------------------------------------------------------------
/src/views/Admin/setting/profile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <layout>
  3 |     <template #main>
  4 |       <!-- avatar cropper -->
  5 |       <div class="text-center">
  6 |         <avatar-cropper
  7 |           upload-form-name="pic"
  8 |           :upload-headers="{Authorization: token}"
  9 |           @uploaded="handleUploaded"
 10 |           @changed="$refs.upload.classList.add('active')"
 11 |           @uploading="$msg({ msg: '正在上传中', type: 'warning'})"
 12 |           trigger="#upload_btn"
 13 |           :upload-url="avatarUrl"
 14 |         />
 15 |       </div>
 16 |       <!-- end -->
 17 |       <div class="grid top">
 18 |         <div class="left">
 19 |           <img
 20 |             class="before"
 21 |             @load="$refs.avatar.classList.remove('before')"
 22 |             @error="$refs.avatar.classList.add('before')"
 23 |             :src="user.avatar"
 24 |             ref="avatar"
 25 |           />
 26 |           <div class="add" @click="$refs.upload.classList.toggle('active')">
 27 |             <font-awesome-icon :icon="['fas','plus']" style="font-size: .8rem"></font-awesome-icon>
 28 |           </div>
 29 |           <div class="avatar" ref="upload">
 30 |             <label>修改头像地址</label>
 31 |             <div class="upload_text" style="position: relative;min-width: 18rem;">
 32 |               <input
 33 |                 type="text"
 34 |                 name="avatar"
 35 |                 @blur="$refs.upload.classList.remove('active')"
 36 |                 v-model="userAvatar"
 37 |                 @keydown.enter="handleAvatarUpdate"
 38 |               />
 39 |               <div class="image_upload" id="upload_btn">
 40 |                 <font-awesome-icon :icon="['fas','image']"></font-awesome-icon>
 41 |               </div>
 42 |             </div>
 43 |           </div>
 44 |         </div>
 45 | 
 46 |         <div class="right">
 47 |           <form action="#">
 48 |             <div class="row">
 49 |               <label>主人昵称</label>
 50 |               <div
 51 |                 class="master input master_name"
 52 |                 ref="name"
 53 |                 @click="$refs.name.classList.add('hidden')"
 54 |               >{{ user.username }}</div>
 55 |               <input
 56 |                 type="text"
 57 |                 name="username"
 58 |                 class="master_name"
 59 |                 v-model="data.user.username"
 60 |                 data-origin="name"
 61 |                 @blur="handleBlur"
 62 |                 @keyup.enter="handleBlur"
 63 |               />
 64 |             </div>
 65 |             <div class="row">
 66 |               <label>主人别名</label>
 67 |               <div
 68 |                 class="master input nickname"
 69 |                 ref="nickname"
 70 |                 @click="$refs.nickname.classList.add('hidden')"
 71 |               >{{ user.nickname }}</div>
 72 |               <input
 73 |                 type="text"
 74 |                 name="nickname"
 75 |                 class="master_nickname hidden"
 76 |                 data-origin="nickname"
 77 |                 v-model="data.user.nickname"
 78 |                 @blur="handleBlur"
 79 |                 @keyup.enter="handleBlur"
 80 |               />
 81 |             </div>
 82 |             <div class="row">
 83 |               <div class="has-github" v-if="user.githubUrl">
 84 |                 <label>主人的 GitHub 地址</label>
 85 |                 <div
 86 |                   class="master input"
 87 |                   ref="github"
 88 |                   @click="$refs.github.classList.add('hidden')"
 89 |                 >{{ user.githubUrl }}</div>
 90 |                 <input
 91 |                   type="text"
 92 |                   name="githubUrl"
 93 |                   class="github hidden"
 94 |                   data-origin="github"
 95 |                   v-model="data.user.githubUrl"
 96 |                   @blur="handleBlur"
 97 |                   @keyup.enter="handleBlur"
 98 |                 />
 99 |               </div>
100 |             </div>
101 |           </form>
102 |         </div>
103 |       </div>
104 | 
105 |       <!-- end top grid -->
106 | 
107 |       <div class="body grid">
108 |         <div class="left">
109 |           <label>主人介绍</label>
110 |           <div class="info master input" ref="intro" @click="handleTextarea">{{info.introduce}}</div>
111 |           <textarea
112 |             name="introduce"
113 |             v-model="info.introduce"
114 |             ref="textarea"
115 |             data-origin="intro"
116 |             @blur="handleBlur"
117 |           ></textarea>
118 |         </div>
119 |         <div class="right">
120 |           <label style="text-align: center">技能总览</label>
121 |           <div class="chart">
122 |             <!-- <pie /> -->
123 |             <pie :data="skill" @ready-once="handleRenderChart" />
124 |           </div>
125 |         </div>
126 |       </div>
127 | 
128 |       <div class="skill-wrap">
129 |         <div class="top">
130 |           <label>技能树</label>
131 |           <span @click="$refs.add.classList.toggle('active')">新增</span>
132 |         </div>
133 |         <div class="skill-item" v-for="(score, name) in info.skill" :key="name">
134 |           <div class="skill-top">
135 |             <div class="skill-name">{{name}}</div>
136 |             <div class="skill-score-wrap">
137 |               <div class="skill-score" @click="handleReadyToModifySkill(name)">{{score}}</div>
138 |               <div class="modify-wrap toggle">
139 |                 <input
140 |                   type="text"
141 |                   class="score-text"
142 |                   :placeholder="score"
143 |                   @keyup.enter="handleModifySkill(name)"
144 |                   :ref="'skill-' + name"
145 |                   @blur="handleBlurSkill(name)"
146 |                 />
147 |                 <font-awesome-icon
148 |                   class="del icon"
149 |                   :icon="['fas','trash-alt']"
150 |                   @click="handleModifySkill(name, true)"
151 |                 ></font-awesome-icon>
152 |               </div>
153 |             </div>
154 |           </div>
155 | 
156 |           <div class="process">
157 |             <transition name="move">
158 |               <span class="up" :style="`right: ${100-score}%`"></span>
159 |             </transition>
160 |           </div>
161 |         </div>
162 | 
163 |         <div class="skill-item add" ref="add">
164 |           <input class="skill-name" name="add-name" placeholder="name" v-model="add.name" />
165 |           <input
166 |             class="skill-score"
167 |             name="add-score"
168 |             placeholder="score"
169 |             v-model="add.score"
170 |             @keyup.enter="handleAdd"
171 |           />
172 |         </div>
173 |       </div>
174 |     </template>
175 |   </layout>
176 | </template>
177 | 
178 | <script>
179 | import { mapGetters, mapActions } from 'vuex'
180 | import { getUserIntroduce, modifyIntro } from '@/api/master'
181 | import pie from 'v-charts/lib/pie.common.js'
182 | import AvatarCropper from "vue-avatar-cropper"
183 | export default {
184 |   data () {
185 |     return {
186 |       info: {},
187 |       data: {
188 |         user: {}
189 |       },
190 |       skill: {},
191 |       add: {
192 |         name: null,
193 |         score: null
194 |       },
195 |       userAvatar: '', // 用户头像地址
196 |       avatarUrl: process.env.NODE_ENV === 'production' ? '/api/upload' : 'http://localhost:3000/api/upload' // 提交接口
197 |     }
198 |   },
199 |   async created () {
200 |     const { data } = await getUserIntroduce()
201 |     if (data.ok) {
202 |       this.info = data
203 |       this.data.user = Object.assign({}, this.user)
204 |       this.skill = Object.assign({}, this.parseChart(data.skill))
205 |     }
206 |   },
207 |   components: {
208 |     layout: () => import('@/components/Admin/layout.vue'),
209 |     pie, AvatarCropper
210 |   },
211 |   computed: {
212 |     ...mapGetters(['user', 'token'])
213 |   },
214 |   methods: {
215 |     ...mapActions(['loadUser']),
216 |     parseChart (data) {
217 |       const lang = Object.keys(data)
218 |       const columns = ['语言', '分数']
219 |       const rows = Object.values(data).map((v, i) => Object.assign({}, { '语言': lang[i], '分数': v, id: i }))
220 |       // JSON.stringify({ colums, rows })
221 |       return { columns, rows }
222 |     },
223 |     async handleBlur (e) {
224 |       // console.log(e, e.target.dataset, e.target.name)
225 | 
226 |       const value = e.target.value
227 |       const name = e.target.name
228 |       const origin = this.$refs[e.target.dataset['origin']]
229 |       // console.log(this.data.user[name], value);
230 | 
231 |       if (value === this.user[name]) {
232 |         origin.classList.remove('hidden')
233 |         return
234 |       }
235 |       const { data } = await modifyIntro({ [name]: value })
236 |       if (data.ok) {
237 |         origin.innerText = value
238 |         origin.classList.remove('hidden')
239 |         this.loadUser()
240 |         this.$msg({ msg: '更新成功~' })
241 |       }
242 |     },
243 |     handleRenderChart (e) {
244 |       // console.log(e);
245 |       setTimeout(() => {
246 |         e.resize()
247 |       }, 1500);
248 |     },
249 |     handleTextarea () {
250 |       const intro = this.$refs.intro
251 |       intro.classList.add('hidden')
252 |       console.log(this.$refs.textarea);
253 |       // this.$refs.textarea.style = Object.assign({ height: intro.offsetHeight, width: intro.offsetWidth })
254 |       this.$refs.textarea.setAttribute('style', `height: ${intro.offsetHeight}px;width: ${intro.offsetWidth}px`)
255 | 
256 |     },
257 |     async handleAdd () {
258 |       if (this.add.score > 100 || this.add.score < 0)
259 |         return this.$msg({ msg: '分值需在 0 - 100 之间', type: 'error' })
260 |       if (this.add.name.length > 30)
261 |         return this.$msg({ msg: '内容过长', type: 'error' })
262 |       const { data } = await modifyIntro({ skill: Object.assign(this.info.skill, { [this.add.name]: Number(this.add.score) }) })
263 |       if (data.ok) {
264 |         this.info.skill = Object.assign({}, this.info.skill, { [this.add.name]: Number(this.add.score) })
265 |         this.add = Object.assign({}, { name: null, score: null })
266 |         this.skill = Object.assign({}, this.parseChart(this.info.skill))
267 |         this.$refs.add.classList.toggle('active')
268 |       }
269 |     },
270 |     handleReadyToModifySkill (name) {
271 |       const ref = this.$refs[`skill-${name}`][0]
272 |       ref.parentNode.classList.add('active');
273 |       ref.parentNode.parentNode.querySelector('.skill-score').style = 'visibility: hidden;';
274 |       setTimeout(() => {
275 |         ref.focus()
276 |       }, 300);
277 |     },
278 |     handleBlurSkill (name) {
279 |       const ref = this.$refs[`skill-${name}`][0]
280 |       ref.parentNode.classList.remove('active');
281 |       ref.parentNode.parentNode.querySelector('.skill-score').style = '';
282 |     },
283 |     async handleModifySkill (name, del = false) {
284 |       // console.log(name, del, this.$refs[`skill-${name}`][0].value);
285 |       const ref = this.$refs[`skill-${name}`][0]
286 |       if (!del) {
287 |         const score = Number(ref.value)
288 | 
289 |         if (score > 100 || score < 0)
290 |           return this.$msg({ msg: '分值需在 0 - 100 之间', type: 'error' })
291 |         this.info.skill[name] = score
292 |       } else {
293 |         delete this.info.skill[name]
294 |       }
295 |       ref.parentNode.classList.remove('active')
296 |       ref.parentNode.parentNode.querySelector('.skill-score').style = 'visibility: visible;'
297 |       const { data } = await modifyIntro({ skill: this.info.skill })
298 |       if (data.ok) {
299 |         this.skill = Object.assign({}, this.parseChart(this.info.skill))
300 |       }
301 |     },
302 |     handleUploaded (resp) {
303 |       this.$msg({ msg: '上传成功! 在输入框回车确定' })
304 |       this.userAvatar = resp.src
305 |     },
306 |     async handleAvatarUpdate () {
307 |       const { data } = await modifyIntro({ avatar: this.userAvatar })
308 |       if (data.ok) {
309 |         this.loadUser()
310 |         this.$msg({ msg: '修改成功!' })
311 |         this.userAvatar = ''
312 |         this.$refs.upload.classList.remove('active')
313 |       }
314 |     }
315 |   }
316 | }
317 | </script>
318 | 
319 | <style lang="scss" scoped>
320 | .grid {
321 |   display: grid;
322 |   grid-template-columns: 250px auto;
323 |   grid-template-rows: repeat(2, 100px);
324 | }
325 | .left,
326 | .right {
327 |   position: relative;
328 | }
329 | .grid.top {
330 |   .left {
331 |     grid-row: 1 / 3;
332 |   }
333 |   .right {
334 |     margin: 0 10rem;
335 |     line-height: 2;
336 |   }
337 |   margin-bottom: 100px;
338 | }
339 | img {
340 |   max-width: 100px;
341 |   border-radius: 50%;
342 |   box-sizing: border-box;
343 |   border: 3px solid #eee;
344 |   transition: border 0.8s;
345 |   transform: scale(2);
346 |   transform-origin: left top;
347 |   margin: 0 50px;
348 |   position: relative;
349 | }
350 | img.before {
351 |   width: 50px;
352 |   height: 50px;
353 |   border: 53px solid #eee;
354 | }
355 | img:not([before]) + .add {
356 |   border-radius: 50%;
357 |   background: #00a0d7;
358 |   position: absolute;
359 |   bottom: 10px;
360 |   right: 0;
361 |   height: 2rem;
362 |   width: 2rem;
363 |   display: flex;
364 |   justify-content: center;
365 |   align-items: center;
366 |   color: #fff;
367 |   font-size: 1.4rem;
368 |   font-weight: 800;
369 |   user-select: none;
370 |   cursor: pointer;
371 |   box-shadow: 2px 2px 7px -4px #123;
372 |   transition: box-shadow 0.5s;
373 | }
374 | .add:hover {
375 |   box-shadow: none !important;
376 | }
377 | .row {
378 |   overflow: hidden;
379 |   margin-bottom: 2.5rem;
380 | }
381 | label {
382 |   display: block;
383 |   color: #333;
384 |   font-weight: 800;
385 | }
386 | input,
387 | textarea,
388 | .input {
389 |   position: absolute;
390 | }
391 | .hidden {
392 |   visibility: hidden;
393 | }
394 | 
395 | .master:not(.hidden) + input,
396 | .master:not(.hidden) + textarea {
397 |   visibility: hidden;
398 | }
399 | .master.hidden + input,
400 | .master.hidden + textarea {
401 |   visibility: visible !important;
402 | }
403 | .master {
404 |   cursor: pointer;
405 | }
406 | 
407 | input,
408 | textarea {
409 |   border-radius: 12px;
410 |   border: 1px solid #eee;
411 |   outline: none;
412 |   transition: 0.5s;
413 |   box-sizing: border-box;
414 |   padding: 0.5rem;
415 |   min-width: 18rem;
416 | }
417 | textarea {
418 |   resize: none;
419 | }
420 | input:focus,
421 | textarea:focus {
422 |   border-color: #00a0d7;
423 | }
424 | 
425 | .body {
426 |   grid-template-rows: 100px;
427 |   grid-gap: 120px;
428 |   line-height: 2;
429 |   margin-bottom: 100px;
430 |   .left {
431 |     margin-left: 50px;
432 |   }
433 | }
434 | .toggle {
435 |   opacity: 0;
436 |   visibility: hidden;
437 |   &.active {
438 |     opacity: 1;
439 |     visibility: visible;
440 |     display: block;
441 |   }
442 | }
443 | 
444 | .skill-wrap {
445 |   margin: 0 auto 0 50px;
446 |   width: 300px;
447 |   line-height: 2;
448 |   transition: 0.5s;
449 |   .skill-score {
450 |     cursor: pointer;
451 |   }
452 | 
453 |   .score-text {
454 |     position: absolute;
455 |     min-width: unset;
456 |     width: 3rem;
457 |     top: 0;
458 |     right: 1.3rem;
459 |   }
460 |   .del.icon {
461 |     position: absolute;
462 |     top: 0;
463 |     right: 0;
464 |     transform: translateY(50%);
465 |     color: #e74c3c;
466 |     cursor: pointer;
467 | 
468 |     // margin-left: 12px
469 |   }
470 |   .top {
471 |     display: flex;
472 |     justify-content: space-between;
473 |     cursor: pointer;
474 |     span {
475 |       opacity: 0;
476 |       color: #00a0d7;
477 |       transition: opacity 0.5s;
478 |     }
479 |     span:hover {
480 |       opacity: 1;
481 |     }
482 |   }
483 | 
484 |   .skill-top {
485 |     display: flex;
486 |     justify-content: space-between;
487 |     position: relative;
488 |   }
489 |   .process {
490 |     background-color: #c7cbca;
491 |     height: 4px;
492 |     border-radius: 12px;
493 |     position: relative;
494 |     overflow: hidden;
495 |     margin: 10px 0;
496 |   }
497 | 
498 |   .process .up {
499 |     position: absolute;
500 |     top: 0;
501 |     bottom: 0;
502 |     left: 0;
503 |     right: 100%;
504 |     transition: 1.5s;
505 |     background-color: #fbd2d5;
506 |   }
507 | }
508 | .move-enter-active,
509 | .move-leave-active {
510 |   transition: 0.5s;
511 | }
512 | .move-enter, .move-leave-to /* move-leave-active below version 2.1.8 */ {
513 |   transform: translateX(-100%);
514 | }
515 | .avatar {
516 |   visibility: hidden;
517 |   transition: 1s;
518 |   opacity: 0;
519 |   transform: translateY(0);
520 | }
521 | .avatar.active {
522 |   visibility: visible;
523 |   margin-top: 100px;
524 |   // animation: slide 1s forwards;
525 |   opacity: 1;
526 |   transform: translateY(5px);
527 | }
528 | .skill-item.add {
529 |   &.active {
530 |     visibility: visible;
531 |   }
532 |   visibility: hidden;
533 |   display: grid;
534 |   grid-template-columns: 50% auto;
535 |   grid-gap: 20px;
536 |   position: relative;
537 |   input {
538 |     position: relative;
539 |     // width: 100%;
540 |     min-width: unset;
541 |     display: flex;
542 |   }
543 | }
544 | 
545 | .image_upload {
546 |   position: absolute;
547 |   right: 10px;
548 |   top: 1rem;
549 |   bottom: 0;
550 |   display: flex;
551 |   align-items: center;
552 |   cursor: pointer;
553 | }
554 | 
555 | @import '@/scss/_viewport.scss';
556 | @media (max-width: $small) {
557 |   .grid {
558 |     grid-template-columns: auto;
559 |   }
560 |   .grid.top {
561 |     grid-template-rows: repeat(2, 100px);
562 | 
563 |     .right {
564 |       margin: 5rem 5rem 0 50px;
565 |     }
566 |   }
567 |   .skill-wrap {
568 |     margin: 0 50px;
569 |     width: unset;
570 |   }
571 |   .avatar.active {
572 |     margin-left: 50px;
573 |   }
574 | }
575 | </style>
576 | 
577 | <style>
578 | .avatar-cropper .avatar-cropper-mark {
579 |   backdrop-filter: blur(3px);
580 | }
581 | </style>


--------------------------------------------------------------------------------
/src/assets/1.svg:
--------------------------------------------------------------------------------
1 | <svg id="5b47b5ee-1e8e-415c-b0a6-55d807c2d849" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1043.39" height="696.02" viewBox="0 0 1043.39 696.02"><defs><linearGradient id="4cef746e-0e8f-4707-9de6-a2d9a59d3521" x1="790.81" y1="795.21" x2="790.81" y2="252" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>target</title><path d="M1094.67,749.94c-11,9.12-24.28,15.62-38.62,20.43q-3.13,1.07-6.35,2c-5.54,1.65-11.21,3.08-16.93,4.33-2.82.63-5.66,1.21-8.5,1.75-4.83.93-9.68,1.76-14.5,2.52-17.89,2.81-35.9,4.89-54,6.47q-8.37.74-16.75,1.33l-2.23.16-4,.27-2.46.16c-3.74.25-7.48.47-11.21.68-14.95.84-29.92,1.45-44.89,2-11,.38-21.89.7-32.83,1l-22.25.65-5.75.17-2.52.07q-9.88.3-19.78.57l-1.86.05-5.8.17-11,.3-3.28.09-3,.08c-69.83,1.88-139.71,3.25-209.5,2.66q-8.38-.06-16.75-.18c-51.82-.67-103.58-2.48-155.25-6-18.16-1.24-36.44-2.74-54.62-4.81q-8.4-.95-16.75-2.07c-44.66-6-88.22-16.12-127.24-35-29.39-14.25-56.52-34.52-67.9-61.49-11.49-27.22-5.41-57.79,7.71-84.47s32.86-50.59,49.88-75.66c5.85-8.63,11.38-17.62,16.39-26.86.3-.56.61-1.13.9-1.69q3.85-7.23,7.26-14.64h0q3.24-7.06,6-14.26.83-2.15,1.59-4.29c.06-.16.12-.32.17-.48s.13-.36.19-.54a185.14,185.14,0,0,0,7.54-27.87l.24-1.32c.11-.63.22-1.25.32-1.88s.19-1.17.28-1.76h0a138,138,0,0,0,1.55-26.85c0-.33,0-.66,0-1A113.94,113.94,0,0,0,216.67,391h0c-.06-.39-.12-.77-.2-1.15a107.52,107.52,0,0,0-5.27-19.1c-.1-.27-.21-.55-.32-.83,0-.12-.09-.25-.14-.37-.75-1.91-1.55-3.8-2.43-5.69h0c-.14-.32-.3-.65-.45-1h0c-.29-.61-.58-1.22-.89-1.82h0q-2.11-4.31-4.7-8.51c-2-3.33-4.27-6.59-6.6-9.79l-.33-.45-.27-.38c-3.06-4.17-6.26-8.27-9.38-12.41-2.45-3.23-4.85-6.48-7.1-9.79l-.4-.6a99.75,99.75,0,0,1-7.28-12.53c-.42-.89-.83-1.78-1.21-2.68-.68-1.58-1.31-3.17-1.87-4.77-7.68-21.7-5.35-45.4-1.66-68,5.47-33.58,15.65-69.77,47.16-90.73,27.51-18.31,64.74-20.45,100-16,5.65.7,11.24,1.57,16.75,2.57l3,.57c44.6,8.55,86.78,23.69,128.44,39.9,9.73,3.79,19.44,7.64,29.14,11.47q11.37,4.49,22.75,8.93,13.15,5.12,26.5,10,8.34,3.06,16.75,6,13.49,4.69,27.16,8.91,9.68,3,19.46,5.65c31,8.44,62.8,14.29,95.35,15.42a291.28,291.28,0,0,0,73.81-6.84c5.65-1.28,11.25-2.75,16.75-4.41a218,218,0,0,0,22.6-8.19c18.61-8,35.34-18.56,48.58-32l.11-.11c19.61-19.89,48.36-30,78.48-31.69a164.14,164.14,0,0,1,16.75-.09,166.26,166.26,0,0,1,60.68,14.2c47.64,21.6,78.45,67.33,76.13,113-3.37,66.48-67.46,117.51-105.7,175.67-2.7,4.1-5.27,8.33-7.66,12.65-.88,1.58-1.72,3.17-2.54,4.77-9.42,18.4-15.08,38.27-12,57.36a61.25,61.25,0,0,0,2.44,9.91c.47,1.41,1,2.82,1.59,4.22,4.39,10.46,11.33,19.33,19.89,27.22a136,136,0,0,0,12.23,9.94c35.68,25.94,87.36,42.3,110.19,77.74C1130.06,686.56,1123,726.41,1094.67,749.94Z" transform="translate(-78.3 -101.99)" fill="#ff6347" opacity="0.1"/><path d="M955.79,624.76V470.67H976.7c.82-1.6,1.66-3.19,2.54-4.77H955.79v-162h82c-.18-1.59-.38-3.2-.58-4.77H955.79V150.38a164.14,164.14,0,0,0-16.75.09V299.1H789.27V222.49c-5.5,1.66-11.1,3.13-16.75,4.41v72.2H558.73l-.51-.91,45.14-79.87q-9.78-2.65-19.46-5.65l-27.16,48.05v-57q-8.41-2.92-16.75-6V266l-49.25-87.14c-9.7-3.83-19.41-7.68-29.14-11.47l74,130.85-.52.91H330.12V126.87c-5.51-1-11.1-1.87-16.75-2.57V299.1H167.83c.56,1.6,1.19,3.19,1.87,4.77H313.37v162H208.11c-.05.16-.11.32-.17.48q-.76,2.14-1.59,4.29h107V624.76H162.69q.7,2.38,1.45,4.77H313.37V787.21q8.4,2.22,16.75,4.64V629.53H540V797.69q8.37.12,16.75.18V629.53H772.52V795l11-.3,5.8-.17v-165H939V788.79q8.38-.6,16.75-1.33V629.53h65.5c-.18-1.59-.35-3.18-.52-4.77Zm-415.8,0H330.12V470.67H540Zm0-158.86H330.12v-162H537l3,4.33ZM772.52,624.76H556.74V470.67H772.52Zm0-158.86H556.74v-162H772.52ZM939,624.76H789.27V470.67H939Zm0-158.86H789.27v-162H939Z" transform="translate(-78.3 -101.99)" fill="#ff6347" opacity="0.1"/><path d="M872.57,198.26a5.78,5.78,0,0,1-5.54,6H855.85a5.92,5.92,0,0,1,4.24,5.8,5.78,5.78,0,0,1-5.54,6H815.71a5.29,5.29,0,0,1-3.84-1.68c18.61-8,35.34-18.56,48.58-32l.11-.11h1.22a5.33,5.33,0,0,1,3.91,1.75,6.26,6.26,0,0,1,0,8.38H867A5.78,5.78,0,0,1,872.57,198.26Z" transform="translate(-78.3 -101.99)" fill="#ff6347" opacity="0.1"/><path d="M446.14,249.1h-1.29a6.19,6.19,0,0,0,1.58-4.16h0a5.78,5.78,0,0,0-5.54-6H402.05a5.78,5.78,0,0,0-5.54,6h0a5.78,5.78,0,0,0,5.54,6h1.3a6.19,6.19,0,0,0-1.59,4.16,5.93,5.93,0,0,0,4.24,5.8H394.82a6,6,0,0,0,0,11.93h38.84a5.78,5.78,0,0,0,5.54-6A5.91,5.91,0,0,0,435,261h11.18a6,6,0,0,0,0-11.94Z" transform="translate(-78.3 -101.99)" fill="#ff6347" opacity="0.1"/><path d="M926.6,492.25h-1.3a6.14,6.14,0,0,0,1.58-4.16h0a5.78,5.78,0,0,0-5.54-6H882.5a5.79,5.79,0,0,0-5.54,6h0a5.79,5.79,0,0,0,5.54,6h1.3a6.18,6.18,0,0,0-1.58,4.16,5.9,5.9,0,0,0,4.24,5.79H875.28a6,6,0,0,0,0,11.94h38.84a5.79,5.79,0,0,0,5.54-6,5.91,5.91,0,0,0-4.24-5.79H926.6a6,6,0,0,0,0-11.94Z" transform="translate(-78.3 -101.99)" fill="#ff6347" opacity="0.1"/><ellipse cx="225.54" cy="409.09" rx="79.9" ry="105.91" transform="translate(-134.33 -65.65) rotate(-8.2)" opacity="0.1"/><ellipse cx="227.6" cy="408.24" rx="79.9" ry="105.91" transform="translate(-134.18 -65.37) rotate(-8.2)" fill="#3a3768"/><path d="M301.25,422.17A114.05,114.05,0,0,1,295.79,451a85.53,85.53,0,0,1-16.48,29.63c-9,10.29-20.44,17.1-33.42,19a50.47,50.47,0,0,1-6.47.5c-35.1.48-67.88-36-74.95-85.07C157,363,181.25,316.35,218.71,311c11.15-1.61,22.2.61,32.43,5.91,14.73,7.6,27.76,21.58,36.88,39.64h0a126.76,126.76,0,0,1,12.11,39A129.4,129.4,0,0,1,301.25,422.17Z" transform="translate(-78.3 -101.99)" fill="#ff6347"/><path d="M248.18,409.4l-4.84,44.09s15.48-1.45,20-9.19l-14.27-35.64Z" transform="translate(-78.3 -101.99)" fill="#ff6347"/><path d="M248.18,409.4l-4.84,44.09s15.48-1.45,20-9.19l-14.27-35.64Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><path d="M180.07,407.93l24.35-1.64s2.53,18.5,10.22,28.91L197.35,454S179.42,425.43,180.07,407.93Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><rect x="171.26" y="436.31" width="84.22" height="1" transform="translate(-329.9 192.93) rotate(-47)" fill="#fff" opacity="0.3"/><polygon points="85.49 307.66 85.41 306.66 165.29 300.84 165.37 301.83 85.49 307.66" fill="#fff" opacity="0.3"/><path d="M288,356.51h0l-6.91,8.38c-17.09-32.71-31.35-34.55-31.35-34.55l1.38-13.48C265.87,324.47,278.9,338.45,288,356.51Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><path d="M212.41,366.9l31.54,33-2.21.93-36.68-14.42S208,374.68,212.41,366.9Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><rect x="203.38" y="344.53" width="1" height="81.76" transform="translate(-307.7 332.24) rotate(-68.55)" fill="#fff" opacity="0.3"/><path d="M250.79,402.64,276.51,399s1.81,10.64.85,13.75a2.33,2.33,0,0,1-.11.28Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><path d="M192.14,346.34s10.75-15.53,24.14-19.65L228.12,355s-11.54,4.27-15.58,12.79Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><path d="M246.43,397.3l-.86-.11c-.19,0-.4-.06-.54-.66l-35.25-83.4.92-.39,34.11,80.72c0-4.49.54-14.49,2.41-36.78,1.65-19.68,3.57-39.58,3.59-39.78l1,.1c-2.86,29.61-6.68,74-5.92,79Z" transform="translate(-78.3 -101.99)" fill="#fff" opacity="0.3"/><rect x="211.45" y="322.63" width="1" height="88.47" transform="translate(-274.03 149.51) rotate(-44.18)" fill="#fff" opacity="0.3"/><path d="M269.87,376.67l10.77-12.2s10.23,25.23,9.08,32.73L276.93,399S272.33,377.35,269.87,376.67Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><rect x="240.61" y="377.3" width="56.97" height="1" transform="translate(-270.38 226.16) rotate(-48.39)" fill="#fff" opacity="0.3"/><path d="M277.4,399.45l-.06-.53c0-.16,0-.31-.07-.46s0-.41-.08-.62a66.13,66.13,0,0,0-6.62-20.95c-.11-.21-.22-.42-.34-.63a2.19,2.19,0,0,0-.16-.3c-5.38-10-13.1-17.47-21.71-21-.32-.14-.64-.26-1-.38a28.24,28.24,0,0,0-14-1.59,26.65,26.65,0,0,0-5.16,1.27,2.43,2.43,0,0,0-.38.13l-.57.21a32.77,32.77,0,0,0-14.78,12.12l-.11.16-.29.43h0a2.2,2.2,0,0,0-.17.25c-.42.63-.83,1.27-1.22,1.94s-.74,1.28-1.09,2a53.16,53.16,0,0,0-4.9,13.74c-.08.33-.15.67-.21,1a65.62,65.62,0,0,0-.78,19.52l.06.59c0,.13,0,.27.05.4.07.55.14,1.1.22,1.65a64.41,64.41,0,0,0,10.1,26.82c.06.1.13.19.2.29s.25.37.39.55c.34.5.69,1,1.06,1.46,7,9.31,16.37,15.24,26.19,15.94.43,0,.87.05,1.31.06h1a26.2,26.2,0,0,0,3.52-.27,29.08,29.08,0,0,0,15.89-8c.26-.24.52-.49.77-.75a43.42,43.42,0,0,0,9.35-14.74c.14-.34.27-.68.4-1a59.44,59.44,0,0,0,3.34-14.88l.09-1.05A67.71,67.71,0,0,0,277.4,399.45ZM273.49,428c-.12.35-.25.7-.38,1a42.78,42.78,0,0,1-9,14.51c-.25.26-.5.52-.76.76a28.15,28.15,0,0,1-15.62,7.94,24.31,24.31,0,0,1-3.29.26h-1c-10.27-.21-20.11-6.4-27.34-16.32l-.62-.87c-.2-.28-.39-.56-.57-.85a63.29,63.29,0,0,1-9.81-26.22c-.08-.53-.15-1.06-.21-1.58,0-.34-.08-.67-.11-1a64.63,64.63,0,0,1,.73-19.07c.06-.34.12-.67.2-1a52.07,52.07,0,0,1,4.85-13.65l.66-1.21c.47-.83,1-1.64,1.47-2.41.15-.23.3-.46.46-.68a1.63,1.63,0,0,1,.11-.17,31.91,31.91,0,0,1,14.46-11.93l.94-.35h0a26.55,26.55,0,0,1,10.55-1.39,28.69,28.69,0,0,1,8.11,1.82l1,.39c8.38,3.52,15.87,10.92,21.09,20.75.17.31.33.63.49.95A65.5,65.5,0,0,1,276.2,398l.09.61h0c0,.12,0,.25,0,.37s.05.41.07.62a66,66,0,0,1,.31,12.83c0,.11,0,.22,0,.32l-.06.73h0A57.91,57.91,0,0,1,273.49,428Z" transform="translate(-78.3 -101.99)" fill="#fff" opacity="0.3"/><path d="M301.25,422.17A114.05,114.05,0,0,1,295.79,451l-10.27-10.39c2.8-4.22,4.52-22.4,4.52-22.4l.59.41C291.15,419.73,296.83,421.18,301.25,422.17Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><rect x="273.08" y="397.4" width="1" height="62.76" transform="translate(-301.65 218.32) rotate(-45.15)" fill="#fff" opacity="0.3"/><polygon points="222.71 321.35 171.41 300.61 221.75 293.04 221.9 294.03 175.18 301.05 223.08 320.42 222.71 321.35" fill="#fff" opacity="0.3"/><path d="M279.31,480.67c-9,10.29-20.44,17.1-33.42,19a50.47,50.47,0,0,1-6.47.5l2.1-21s19.23.29,30.37-15.23Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><rect x="263.8" y="406.81" width="1" height="77.01" transform="translate(-229.72 34.56) rotate(-22.71)" fill="#fff" opacity="0.3"/><rect x="198.63" y="454.76" width="90.1" height="1" transform="translate(-309.25 556.67) rotate(-85.04)" fill="#fff" opacity="0.3"/><path d="M290.3,397.51c0-.33-.07-.66-.12-1-.09-.82-.2-1.64-.32-2.46a106.11,106.11,0,0,0-8.55-29.27l0-.09-.42-.89c-7.33-15.45-18.05-27.51-30.24-34.13-.24-.14-.49-.27-.74-.4l-.21-.11a42.84,42.84,0,0,0-26-4.75,40,40,0,0,0-7.31,1.77l-.94.34h0a47.36,47.36,0,0,0-20.37,15.35q-1.5,1.89-2.87,3.94c-.19.28-.38.56-.56.85a80.42,80.42,0,0,0-11.19,29c-.07.33-.13.66-.18,1a104.88,104.88,0,0,0-.71,30.82c0,.33.08.66.13,1s.12.95.19,1.43c.11.77.23,1.55.36,2.31,0,0,0,0,0,.07.49,3,1.1,5.91,1.82,8.77a.29.29,0,0,0,0,.09,97,97,0,0,0,14.74,32.69c.19.28.38.55.59.83a77.44,77.44,0,0,0,6.4,7.71c1.34,1.42,2.72,2.75,4.12,4,9.07,8.13,19.2,12.75,29.47,13.48,1.2.08,2.41.11,3.61.08h.42a5.68,5.68,0,0,0,.59,0,38.53,38.53,0,0,0,4-.36c9.84-1.42,18.75-6.38,26-14.35.09-.09.17-.19.25-.28l.49-.54a64,64,0,0,0,8.87-13.22,77.16,77.16,0,0,0,4.08-9.53,5.52,5.52,0,0,0,.18-.53,5.52,5.52,0,0,0,.18-.53,91.59,91.59,0,0,0,4.44-21.45c0-.16,0-.31.05-.47s0-.38.05-.57q.31-4.08.32-8.25A109.44,109.44,0,0,0,290.3,397.51Zm-.69,21.22a90.45,90.45,0,0,1-4.26,21.06q-.17.52-.36,1a76.57,76.57,0,0,1-4.18,9.86,62.92,62.92,0,0,1-8.42,12.64c-.23.28-.48.56-.73.83-7.2,8-16,13-25.76,14.39q-1.89.27-3.78.36l-1,0c-11.39.24-22.77-4.47-32.81-13.59-1.27-1.15-2.52-2.38-3.75-3.67a78.67,78.67,0,0,1-6.44-7.76l-.29-.42-.3-.42c-8.49-12-14.3-27-16.65-43.33-.07-.45-.13-.9-.19-1.35,0-.17,0-.34-.07-.52s0-.31-.05-.47a104,104,0,0,1,.65-30.38l.18-1a79.39,79.39,0,0,1,11-28.64q.15-.25.33-.51c.07-.12.15-.24.23-.35.88-1.33,1.81-2.61,2.77-3.83a46.48,46.48,0,0,1,20.16-15.26l.67-.24.28-.1a38.87,38.87,0,0,1,7.06-1.7,39.55,39.55,0,0,1,8.34-.3,43.84,43.84,0,0,1,17.38,5.13l.2.1.75.41a63.73,63.73,0,0,1,18,15.27,87,87,0,0,1,11.66,18.6c.05.09.09.19.13.28l.33.7h0a105.64,105.64,0,0,1,8.28,28.6c.12.82.23,1.63.33,2.45,0,.2,0,.39.07.59s0,.27,0,.41a105.92,105.92,0,0,1,.39,20Q289.67,418.2,289.61,418.73Z" transform="translate(-78.3 -101.99)" fill="#fff" opacity="0.3"/><ellipse cx="246.62" cy="403.54" rx="5.03" ry="6.92" transform="translate(-133.32 -62.7) rotate(-8.2)" fill="#ff6347"/><ellipse cx="246.62" cy="403.54" rx="5.03" ry="6.92" transform="translate(-133.32 -62.7) rotate(-8.2)" opacity="0.2"/><circle cx="670.45" cy="45.86" r="13.54" fill="#ff6347" opacity="0.1"/><circle cx="47.39" cy="190.8" r="13.54" fill="#ff6347" opacity="0.1"/><circle cx="999.19" cy="286.97" r="13.54" fill="#ff6347" opacity="0.1"/><circle cx="944.41" cy="368.68" r="13.54" fill="#ff6347" opacity="0.1"/><circle cx="710.3" cy="25.4" r="6.24" fill="#ff6347" opacity="0.1"/><circle cx="6.24" cy="159.36" r="6.24" fill="#ff6347" opacity="0.1"/><circle cx="991.89" cy="445.73" r="6.24" fill="#ff6347" opacity="0.1"/><circle cx="744.28" cy="4.41" r="4.41" fill="#ff6347" opacity="0.1"/><circle cx="33.85" cy="253.03" r="4.41" fill="#ff6347" opacity="0.1"/><path d="M1045.21,742.79s-7.48-32.17-12.46-71.28-43.59-104.1-43.59-104.1c-.17-.33-.35-.67-.53-1a177.52,177.52,0,0,0-21.48-31.85c-17-20.07-32.42-29.09-33.19-29.53h0c-1.22-1.86-2.53-3.91-3.91-6.1-5.18-8.19-11.34-18.49-17.22-29.61,0-.26-.09-.51-.14-.77h0c-2.62-15.84-2.72-32.5,5.16-46.18,3.89-6.75,9.5-12.31,13.78-18.81,7-10.6,10.18-23.25,12.75-35.73,1.81-8.73,3.37-17.63,2.91-26.52,0-.14,0-.27,0-.4v0c0-.62-.08-1.24-.14-1.86-1.47-16.12-9.92-30.6-18.16-44.47-4.34-7.3-8.9-14.83-15.89-19.55-14.54-9.81-32.36-3.67-47.9-9.29-16.51-6-31.6-11.59-49.57-13.43-6.37-.65-13.37-.81-18.53,3-5.42,4-7.22,11.3-10.82,17.07-6.87,11-19.83,16-30.77,22.92-8.31,5.21-16.28,13.54-18,22.71,0,0,0-.05,0-.08a20.22,20.22,0,0,0-.32,3c0,.06,0,.13,0,.19v.3a18.17,18.17,0,0,0,.74,5.47c.62.32,1.25.6,1.89.88-.4.65-.8,1.3-1.18,2l-.84,1.49A97.36,97.36,0,0,0,786.41,468.7h0c.59,1.44,1.2,2.93,1.8,4.47a226.44,226.44,0,0,1,16,81.58h0c0,.26,0,.52,0,.78,0,1,0,2,0,3.05h0c-9,11.4-18.33,25.54-18,35.32.54,16.38-21.3,54.49-27.19,64.45l-1.18,2h0c-5.88-4.26-12.87-8.09-16.26-5.4l-2.84-1.82c-14.36-9.22-40-26.3-49.67-36.51-13.7-14.51-40.48-27.76-40.48-27.76s-21.17-25.24-19.92-34.7c.62-4.71-7.88-42.31-18.41-69.9,7.69.81,15.59,1.78,18,2.08l.59.52.83.13c29.11,25.58,35.48,14.18,35.48,14.18,2.38-1.61,3.19-6.46,3.42-8.32,0-.18,0-.32,0-.44l.15,0c0-.15,0-.27,0-.37a2.68,2.68,0,0,0,.16-.34l.07-.13.05-.1c0-.08.07-.17.11-.26a4.63,4.63,0,0,0,.39-1l-.08,0a37.45,37.45,0,0,0,.61-6.34,7.2,7.2,0,0,0-5.64-7.06c0-.05,0-.1-.05-.16-3.78-11.24-31.27,5.43-34.31,7.32l-.74.08c-5.51-1.1-14-3.11-21.19-4.85-9.75-23.72-20.81-37-27.9-7.81l-6.52-1.12a6,6,0,0,0-4.66,1.1,7.91,7.91,0,0,0-2.23,2.54l-28.29-4.48-6.67.23,5.65,2.73.42.2,28.29,4.61a6.13,6.13,0,0,0,5.25,5.29l6.35.92c-11.34,66.19,14,87.79,14,87.79s30.51,29.92,30.51,37c0,6,59.56,77.27,77.66,98.78,3.24,3.86,5.16,6.12,5.16,6.12,7.11,8.17,41.3,36.08,57.21,48.94h0c1.56,13,3,26,3.83,33.13l3-.08,14.23-.39,7.66-.23q9.9-.27,19.78-.57l2.52-.07,5.75-.18q11.13-.32,22.25-.66c10.94-.33,21.88-.65,32.83-1,15-.53,29.94-1.14,44.89-2,3.73-.21,7.47-.43,11.21-.68l2.46-.17,4-.27c24.46-1.73,48.82-4.22,73-8.06,4.82-.77,9.67-1.61,14.5-2.56,2.84-.54,5.68-1.13,8.5-1.77,5.72-1.27,11.39-2.72,16.93-4.39C1047.32,755.19,1045.21,742.79,1045.21,742.79Z" transform="translate(-78.3 -101.99)" fill="url(#4cef746e-0e8f-4707-9de6-a2d9a59d3521)"/><path d="M632.76,490.57l-3.72-.13s-25.23-3.13-33.31-3.32a5.58,5.58,0,0,0-2.43.19l1.79-7.22,2.19.54c7.69,1.9,33.18,8.14,37.28,8.28C639.41,489.07,632.76,490.57,632.76,490.57Z" transform="translate(-78.3 -101.99)" fill="#ff6347"/><path d="M629.83,488.17s30.6-19.14,34.6-7.39S658,494.26,658,494.26Z" transform="translate(-78.3 -101.99)" fill="#ff6347"/><path d="M629.83,488.17s30.6-19.14,34.6-7.39S658,494.26,658,494.26Z" transform="translate(-78.3 -101.99)" opacity="0.2"/><path d="M665.15,505S658.7,516.42,629,490.44l.41-.53,1.23-1.59s38.44-17.67,39.44-.41a33.31,33.31,0,0,1-.72,6.68,3.46,3.46,0,0,1-.61,1.32l-.14.13s0,.27-.08.73C668.34,498.61,667.53,503.39,665.15,505Z" transform="translate(-78.3 -101.99)" fill="#ff6347"/><path d="M665.15,505S658.7,516.42,629,490.44l.41-.53.69-.71,38.65,6.71-.14.13s0,.27-.08.73C668.34,498.61,667.53,503.39,665.15,505Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M668.77,496.36,629.23,490l-2-1.7,3.62-.42,38.71,6.27a2.87,2.87,0,0,1-.74,1.45S668.83,495.9,668.77,496.36Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M668.38,497.18l-39.54-6.33-2-1.69,3.61-.43L669.2,495a2.79,2.79,0,0,1-.75,1.45S668.44,496.73,668.38,497.18Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M668.57,496.77,629,490.44l-2-1.69,3.61-.43,38.72,6.27a3,3,0,0,1-.75,1.45S668.63,496.31,668.57,496.77Z" transform="translate(-78.3 -101.99)" fill="#4c4c56"/><path d="M595.73,487.12a5.58,5.58,0,0,0-2.43.19l1.79-7.22,2.19.54A27,27,0,0,1,595.73,487.12Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M596,478.24l-22.21-3.76a6.05,6.05,0,0,0-4.66,1.09,6.29,6.29,0,0,0-2.87,5.5,6.08,6.08,0,0,0,5.29,5.47l22.27,3.16S597.84,479.89,596,478.24Z" transform="translate(-78.3 -101.99)" fill="#d1d9ec"/><path d="M532.33,474.08l6.68-.24,28.79,4.51a1.59,1.59,0,0,1,1.32,1.87h0a1.59,1.59,0,0,1-1.81,1.26L538,476.77Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M531.92,473.88l6.67-.23,28.8,4.5A1.59,1.59,0,0,1,568.7,480h0a1.59,1.59,0,0,1-1.8,1.27l-29.32-4.72Z" transform="translate(-78.3 -101.99)" fill="#dfe6f5"/><path d="M748.79,661.28,705.2,714.21s-1.92-2.23-5.16-6.05c-18.1-21.23-77.66-91.54-77.66-97.5,0-7-30.51-36.56-30.51-36.56s-27.4-23-12.46-94.68,50.44,68.52,49.2,77.86,19.92,34.25,19.92,34.25,26.78,13.08,40.48,27.4c9.64,10.08,35.31,26.94,49.67,36C744.74,658.81,748.79,661.28,748.79,661.28Z" transform="translate(-78.3 -101.99)" fill="#fdc2cc"/><path d="M748.79,661.28,705.2,714.21s-1.92-2.23-5.16-6.05c.7-14.82,32-47.52,37.54-52.49a4,4,0,0,1,1.1-.7C744.74,658.81,748.79,661.28,748.79,661.28Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M767.47,670s-19.93-18.68-26.15-13.07-45.46,46.7-36.12,57.29S770.58,769,770.58,769Z" transform="translate(-78.3 -101.99)" fill="#5f5d7e"/><path d="M767.47,670s-19.93-18.68-26.15-13.07-45.46,46.7-36.12,57.29S770.58,769,770.58,769Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M942.45,521.17S923,539.94,898.64,560.3l-.92.76-1.42,1.18h0c-38.86,32.14-88.94,66.82-94.1,37.14a41.27,41.27,0,0,1-.07-11.69c.06-.57.14-1.16.22-1.76s.16-1.16.22-1.73a196.11,196.11,0,0,0,1.61-22.55c0-1.27,0-2.53,0-3.78a221,221,0,0,0-16-80.53c-.6-1.52-1.21-3-1.8-4.41h0c-8-19.08-15.83-30.22-15.83-30.22s11.57-7,27.61-16c5.89-3.28,12.37-6.81,19.11-10.35,37-19.4,81.49-38.8,75.33-16-2.91,10.79-.21,25.11,5.15,40.1.3.83.6,1.64.91,2.46a246.42,246.42,0,0,0,12,26.49l.3.58c6.43,12.32,13.36,23.83,19.1,32.78,1.38,2.16,2.69,4.18,3.91,6C939,516.47,942.45,521.17,942.45,521.17Z" transform="translate(-78.3 -101.99)" fill="#fdc2cc"/><path d="M898.69,442.92c-.29.43-.6.86-.91,1.28-9.34,12.7-20.15,20.26-33,24.52-8.86,2.95-18.72,4.34-29.77,4.78-2.75.1-5.56.15-8.46.15a169.19,169.19,0,0,1-20-1.15c-3.49-.55-7.14,1.8-10.67,3.52-2.63,1.27-5.2,2.2-7.6,1.32-.6-1.52-1.21-3-1.8-4.41h0c-8-19.08-15.83-30.22-15.83-30.22s11.57-7,27.61-16c5.89-3.28,12.37-6.81,19.11-10.35,37-19.4,81.49-38.8,75.33-16-2.91,10.79-.21,25.11,5.15,40.1C898.08,441.29,898.38,442.1,898.69,442.92Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M916.3,384c0,1.46,0,2.9-.1,4.34a95.37,95.37,0,0,1-75.92,89.08,96,96,0,0,1-34.48.77,91.46,91.46,0,0,1-10-2.14,93.92,93.92,0,0,1-9.4-3.09h0a95.46,95.46,0,0,1-48.71-135.6l.84-1.47A95.4,95.4,0,0,1,916.3,384Z" transform="translate(-78.3 -101.99)" fill="#fdc2cc"/><path d="M942.45,521.17S791.13,667.5,802.34,585.93a202.11,202.11,0,0,0,1.86-28.06,246.86,246.86,0,0,1,16.71-18.64l21.26-15.37a119.06,119.06,0,0,1,75.76-22.76,55,55,0,0,1,12.12,1.67C937.18,513.94,942.45,521.17,942.45,521.17Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M1049.7,772.39c-5.54,1.65-11.21,3.08-16.93,4.33-2.82.63-5.66,1.21-8.5,1.75-4.83.93-9.68,1.76-14.5,2.52-24.14,3.79-48.5,6.25-73,8l-4,.27-2.46.16c-3.74.25-7.48.47-11.21.68-14.95.84-29.92,1.45-44.89,2-11,.38-21.89.7-32.83,1l-22.25.65-5.75.17-2.52.07q-9.88.3-19.78.57l-7.66.22-14.23.39-3,.08c-.8-7.06-2.27-19.89-3.83-32.7h0l-.36-3c-1.72-14.13-3.5-27.7-4.53-32.84-2.49-12.45,0-64.14,0-64.14l.27-.43h0l1.18-2c5.89-9.83,27.73-47.45,27.19-63.62-.32-9.65,9-23.61,18-34.86,1.18-1.46,2.35-2.88,3.5-4.23C814.78,549,820.92,543,820.92,543l21.25-15.38a119.21,119.21,0,0,1,75.77-22.74c8,.41,14.38,1.53,16,3.94h0c.69.39,16.19,9.29,33.19,29.15a175.34,175.34,0,0,1,21.48,31.44c.18.32.36.65.53,1,0,0,38.61,64.14,43.59,102.75s12.46,70.36,12.46,70.36S1047.32,755.71,1049.7,772.39Z" transform="translate(-78.3 -101.99)" fill="#5f5d7e"/><path d="M926.89,737.87c-3.39,5.51-.14,33.59,3.47,51.51-3.74.25-7.48.47-11.21.68-14.95.84-29.92,1.45-44.89,2-11,.38-21.89.7-32.83,1l-22.25.65-5.75.17-2.52.07c1.17-4.23,1.4-8.65-1.71-10.62-6.85-4.36-19.93-32.39-19.93-32.39s-11.2,2.5-12.45-89a132.21,132.21,0,0,1,5.57-41.45,102.12,102.12,0,0,1,4.71-12.34,0,0,0,0,1,0,0,96.42,96.42,0,0,1,15.46-23.89h0c21.4-24.22,48.34-30,48.34-30a80.32,80.32,0,0,1,14.17-1.08h.12a73.44,73.44,0,0,1,32.5,8A84.61,84.61,0,0,1,910,568.69a98.62,98.62,0,0,1,10.32,8.82c34.92,34,43.18,87.09,21.61,130.82C935.05,722.34,928.82,734.73,926.89,737.87Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M934.36,742.85c-3.07,5-.7,28.41,2.45,46.1l-4,.27-2.46.16c-3.74.25-7.48.47-11.21.68-14.95.84-29.92,1.45-44.89,2-11,.38-21.89.7-32.83,1l-22.25.65c0-2.28-.7-4.25-2.51-5.4a15.5,15.5,0,0,1-3.32-3.25c-.29-.35-.59-.73-.89-1.12-6.93-9.2-15.71-28-15.71-28s-11.21,2.49-12.46-89c-.4-29.82,7.32-51.64,17.91-67.51,21.94-32.86,56.19-40.22,56.19-40.22a75.79,75.79,0,0,1,37.9,3.09A77,77,0,0,1,910,568.69,95.07,95.07,0,0,1,926.23,581l1.6,1.53c34.92,34,43.17,87.09,21.6,130.82C942.52,727.32,936.29,739.71,934.36,742.85Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M929.38,737.87c-3.38,5.5-.16,33.43,3.44,51.35l-2.46.16c-3.74.25-7.48.47-11.21.68-14.95.84-29.92,1.45-44.89,2-11,.38-21.89.7-32.83,1l-22.25.65-5.75.17c.88-3.23,1.21-6.56-.08-8.82a4.83,4.83,0,0,0-.89-1.12,3.91,3.91,0,0,0-.77-.61c-6.85-4.36-19.93-32.39-19.93-32.39s-11.2,2.5-12.45-89c-.46-34.26,9.8-58,22.82-74.22,21.78-27.17,51.28-33.51,51.28-33.51a81.32,81.32,0,0,1,11.68-1.08h.12a73.62,73.62,0,0,1,33.42,7.2,90.85,90.85,0,0,1,24.21,17.22c1.16,1.13,2.3,2.28,3.39,3.45,32,34.09,39.08,85.1,18.22,127.37C937.54,722.34,931.31,734.73,929.38,737.87Z" transform="translate(-78.3 -101.99)" fill="#5f5d7e"/><path d="M852.35,676.39S790.9,720,796.14,726,852.35,676.39,852.35,676.39Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M938.58,692.1s-19.2-17.1-17.81-10.47S938.58,692.1,938.58,692.1Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M919.15,790.06c-14.95.84-29.92,1.45-44.89,2-25.63-3-52.28-7.41-52.28-7.41C824.29,783.3,906.06,781.67,919.15,790.06Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M1032.77,776.72c-2.82.63-5.66,1.21-8.5,1.75-1.11-17.89-1.55-33.3-1.55-33.3A317.53,317.53,0,0,1,1032.77,776.72Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M791.13,794.52l-7.66.22c-6.1-16.66-11.34-36.42-13.48-44.81-.66-2.59-1-4.1-1-4.1l.95,2C773.09,754.4,783.53,776.32,791.13,794.52Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M910,418.07a94.75,94.75,0,0,1-12.24,22.39c.3.83.6,1.64.91,2.46a246.42,246.42,0,0,0,12,26.49l.3.58c.52,4,1.24,8,2.07,11.9q-22.8,1.2-45.65,1.05c-6.62,0-13.34-.19-19.65-2.17a34,34,0,0,1-7.44-3.38A37.37,37.37,0,0,1,835,473.5a45,45,0,0,1-14.58-28.66c-.91-8.59.39-17.49-2.1-25.76a28.2,28.2,0,0,0-1-2.71A29.88,29.88,0,0,0,794,398.63a6.39,6.39,0,0,0-4.34.59,7.25,7.25,0,0,0-2.35,3.64L777,429.75c-7.34,1.84-12.52-7.75-11.91-15.29s4-15.26,1.49-22.4c-.77-2.21-2.08-4.22-2.64-6.48-2.23-8.91,7.35-16.82,7.43-26,.06-7.55-6.4-13.65-13.26-16.79-6.29-2.88-13.24-4.12-19.54-6.93A95.4,95.4,0,0,1,916.3,384c0,1.46,0,2.9-.1,4.34A94.8,94.8,0,0,1,910,418.07Z" transform="translate(-78.3 -101.99)" opacity="0.1"/><path d="M815.59,259.39c-6.37-.64-13.37-.8-18.53,3-5.42,4-7.22,11.16-10.82,16.85-6.87,10.88-19.83,15.85-30.77,22.62s-21.3,18.86-17.64,31.2c6.74,3.4,14.39,4.59,21.25,7.73s13.32,9.24,13.26,16.79c-.08,9.18-9.66,17.09-7.43,26,.56,2.26,1.87,4.27,2.64,6.48,2.49,7.14-.88,14.86-1.49,22.4s4.57,17.13,11.91,15.29l10.38-26.89a7.25,7.25,0,0,1,2.35-3.64,6.39,6.39,0,0,1,4.34-.59,29.77,29.77,0,0,1,24.24,20.45c2.49,8.27,1.19,17.17,2.1,25.76,1.67,15.84,12.14,31.16,27.34,35.93,6.31,2,13,2.13,19.65,2.17q22.83.17,45.65-1.05c-3.75-17.64-5.28-37.13,3.81-52.69,3.89-6.66,9.5-12.15,13.78-18.57,7-10.46,10.18-22.95,12.75-35.26,2-9.33,3.63-18.87,2.75-28.36-1.47-15.91-9.92-30.21-18.16-43.89-4.34-7.21-8.9-14.65-15.89-19.31-14.54-9.68-32.36-3.61-47.9-9.17C848.65,266.75,833.56,261.21,815.59,259.39Z" transform="translate(-78.3 -101.99)" fill="#865a61"/><g opacity="0.1"><path d="M768.19,392.42a20.6,20.6,0,0,0-.65-9.53c-.7-2-1.83-3.85-2.46-5.87a12.57,12.57,0,0,0-.17,6.39c.56,2.26,1.87,4.27,2.63,6.48A15.42,15.42,0,0,1,768.19,392.42Z" transform="translate(-78.3 -101.99)"/><path d="M771.87,353.91a15.27,15.27,0,0,0,.46-3.5c.06-7.54-6.39-13.65-13.25-16.79s-14.51-4.33-21.25-7.73a17.3,17.3,0,0,1-.41-1.69,18.35,18.35,0,0,0,.41,8.69c6.74,3.4,14.39,4.59,21.25,7.73C764.85,343.26,770.3,348,771.87,353.91Z" transform="translate(-78.3 -101.99)"/><path d="M868.36,473.77c-6.61,0-13.33-.19-19.64-2.17-15.2-4.77-25.67-20.09-27.34-35.93-.91-8.59.39-17.48-2.1-25.76A29.77,29.77,0,0,0,795,389.46a6.39,6.39,0,0,0-4.34.59,7.18,7.18,0,0,0-2.35,3.64L778,420.58c-5.9,1.48-10.4-4.42-11.63-10.71-.11.81-.22,1.62-.28,2.42-.62,7.54,4.57,17.13,11.91,15.29l10.38-26.89a7.18,7.18,0,0,1,2.35-3.64,6.39,6.39,0,0,1,4.34-.59,29.77,29.77,0,0,1,24.24,20.45c2.49,8.28,1.19,17.17,2.1,25.76,1.67,15.84,12.14,31.16,27.34,35.93,6.31,2,13,2.13,19.64,2.17q22.85.17,45.66-1c-.48-2.29-.93-4.61-1.33-6.94Q890.55,473.92,868.36,473.77Z" transform="translate(-78.3 -101.99)"/><path d="M944.36,366.2c-2.58,12.31-5.77,24.8-12.75,35.26-4.28,6.42-9.89,11.91-13.78,18.57-5.56,9.51-7.14,20.49-6.68,31.62.38-8.69,2.29-17.11,6.68-24.62,3.89-6.66,9.5-12.15,13.78-18.57,7-10.46,10.17-22.95,12.75-35.26,1.82-8.69,3.4-17.56,2.9-26.41A129.17,129.17,0,0,1,944.36,366.2Z" transform="translate(-78.3 -101.99)"/></g></svg>


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