├── .github
    └── workflows
    │   ├── push-to-everything411-repo.yml
    │   └── vite-gh-pages.yml
├── .gitignore
├── .vscode
    └── extensions.json
├── README.md
├── doc
    └── docs.md
├── index.html
├── package-lock.json
├── package.json
├── public
    └── vite.svg
├── src
    ├── App.vue
    ├── assets
    │   ├── QRWechat.jpg
    │   ├── QRWechat.png
    │   ├── banner
    │   │   ├── 1.svg
    │   │   ├── 2.svg
    │   │   ├── 3.svg
    │   │   ├── 4.svg
    │   │   └── 5.svg
    │   ├── cover3.png
    │   ├── example1.gif
    │   ├── fonts
    │   │   └── abhaya-libre-v13-latin
    │   │   │   ├── abhaya-libre-v13-latin-regular.eot
    │   │   │   ├── abhaya-libre-v13-latin-regular.svg
    │   │   │   ├── abhaya-libre-v13-latin-regular.ttf
    │   │   │   ├── abhaya-libre-v13-latin-regular.woff
    │   │   │   └── abhaya-libre-v13-latin-regular.woff2
    │   ├── ico.png
    │   └── vue.svg
    ├── components
    │   ├── footers.vue
    │   └── headers.vue
    ├── main.js
    ├── router
    │   └── main.js
    ├── style.css
    └── views
    │   ├── about-us
    │       ├── aboutUs.vue
    │       └── assets
    │       │   ├── about-us-background-image.jpg
    │       │   └── about-us-background.jpg
    │   ├── admin
    │       └── admin.vue
    │   ├── common-links
    │       └── Common-Links.vue
    │   └── home
    │       ├── assets
    │           ├── 1.psd
    │           ├── 101.svg
    │           ├── 101shortcut.webp
    │           ├── bb2.svg
    │           ├── bb3 - org.svg
    │           ├── bb3.svg
    │           ├── bb3s.svg
    │           ├── bbburst.svg
    │           ├── bg.png
    │           ├── clinic.svg
    │           ├── clinic2.svg
    │           ├── live.svg
    │           ├── live2.svg
    │           ├── map.svg
    │           ├── md.svg
    │           ├── mirror.svg
    │           ├── temp_news.png
    │           ├── temp_news.psd
    │           ├── temp_news2.png
    │           ├── temp_news3.webp
    │           ├── thesis.svg
    │           ├── wiki.svg
    │           └── wiki2.svg
    │       ├── home.vue
    │       ├── home2.vue
    │       ├── home3.vue
    │       └── timeLine.vue
└── vite.config.js


/.github/workflows/push-to-everything411-repo.yml:
--------------------------------------------------------------------------------
 1 | name: push-to-everything411-repo
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | jobs:
 7 |   gitee:
 8 |     name: Sync to everything411 repo
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v4
12 |         with:
13 |           token: ${{ secrets.E411_GITHUB_TOKEN }}
14 |           fetch-depth: 0
15 |       - name: Push
16 |         uses: wangchucheng/git-repo-sync@v0.1.0
17 |         with:
18 |           target-url: https://github.com/everything411/bitnp-website.git
19 |           target-username: everything411
20 |           target-token: ${{ secrets.E411_GITHUB_TOKEN }}
21 | 


--------------------------------------------------------------------------------
/.github/workflows/vite-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages
 2 | name: Deploy to GitHub Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["master"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Build job
25 |   build:
26 |     runs-on: ubuntu-latest
27 |     steps:
28 |       - name: Checkout
29 |         uses: actions/checkout@v3
30 |       - name: Setup Pages
31 |         uses: actions/configure-pages@v3
32 |       - name: Use Node.js 18
33 |         uses: actions/setup-node@v3
34 |         with:
35 |           node-version: 18
36 |       - name: Build with vite
37 |         run: |
38 |           npm install
39 |           npm run build
40 |           mv dist _site
41 |       - name: Upload artifact
42 |         uses: actions/upload-pages-artifact@v3
43 | 
44 |   # Deployment job
45 |   deploy:
46 |     environment:
47 |       name: github-pages
48 |       url: ${{ steps.deployment.outputs.page_url }}
49 |     runs-on: ubuntu-latest
50 |     needs: build
51 |     steps:
52 |       - name: Deploy to GitHub Pages
53 |         id: deployment
54 |         uses: actions/deploy-pages@v4
55 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BITNP 新网站主页
 2 | 
 3 | ## 开发者文档见本仓库doc/docs.md
 4 | 
 5 | ## Vue
 6 | 
 7 | - vue
 8 | - vue-router
 9 | - vuex
10 | - vite
11 | 
12 | ## 依赖库
13 | 
14 | - naive ui 2.32.1
15 | - vfonts 0.0.3
16 | - vicons 此处建议添加网站给出的8种图标库 从[xicons](https://www.xicons.org/#/)获取。
17 | - axios 0.27.2
18 | clipboard.js 2.0.11  
19 | 
20 | ## 对象存储采用腾讯云cos形式
21 | 
22 | - 可参阅 [cos文档](https://cloud.tencent.com/document/product/436).
23 | - 静态的放在/static文件夹中
24 | 


--------------------------------------------------------------------------------
/doc/docs.md:
--------------------------------------------------------------------------------
 1 | # **BITNP网站 开发者文档**
 2 | 
 3 | ## 协作开发守则
 4 | ### 文件命名、组织形式
 5 |   - 根目录下的src/assets、src/components主要是页眉、页脚等页面共用的内容，每个页面各自的assets、components分开放置，如about-us页面的素材放在"src/views/about-us/assets/"里。
 6 | ### git守则
 7 | 
 8 |   - 少用`git add -A`，多用`git add [the-file-to-add]`
 9 |   - 多commit，避免一次commit包含过多修改
10 |   - 多fetch、pull、push，除了每次开工写代码前pull一次，写代码过程中也可以隔一段时间fetch或pull、push一次（vscode有自动fetch插件）
11 |   - commit尽量以  home页面: 或者 VIEW home: 开头
12 | 
13 | ## API
14 | ***
15 | ### 整体说明
16 | * 所有API返回json格式的数据，并返回状态码，状态码参考[MDN](https://developer.mozilla.org/zh-CN/docs/web/http/status)的文章.
17 | ### 时间轴部分
18 | #### 主页时间轴获取信息   
19 |   - 接口地址： `GET /`
20 |   - 参数说明： 
21 |     - `title`: 事件的标题
22 |     - `time`: 事件发生的事件
23 |     - `context`:事件的详细描述
24 |   - 示例：  
25 |     “left”对应的是左边轴，“right”对应的是右边轴
26 |     ```json
27 |     {
28 |       "left": [
29 |         {
30 |         "title": "LOREM",
31 |         "time": "2011 - NOW",
32 |         "context": "ituum vel, ultricies eget nibh. Duis et felis lectus. Donec orci libero, auctor eget sodales at, euismod venenatis nibh."
33 |         },
34 |         {
35 |         "title": "IPSUM",
36 |         "time": "2013",
37 |         "context": "ero in nibh convallis sollici blandit neque in, ornare libero."
38 |         }
39 |       ],
40 |     "right": [
41 |         {
42 |         "title": "ORNARE",
43 |         "time": "2012 - 06.2013",
44 |         "context": "ipsum pulvinar, blandit neque in, ornare libero."
45 |         }
46 |       ]
47 |     }
48 |     ```


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/ico.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>BitNP|网络开拓者协会</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app" style=""></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "indexx",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "clipboard": "^2.0.11",
13 |     "vue": "^3.2.37",
14 |     "vue-router": "^4.0.13",
15 |     "vuex": "^4.0.2"
16 |   },
17 |   "devDependencies": {
18 |     "@vicons/antd": "^0.12.0",
19 |     "@vicons/carbon": "^0.12.0",
20 |     "@vicons/fa": "^0.12.0",
21 |     "@vicons/fluent": "^0.12.0",
22 |     "@vicons/ionicons4": "^0.12.0",
23 |     "@vicons/ionicons5": "^0.12.0",
24 |     "@vicons/material": "^0.12.0",
25 |     "@vicons/tabler": "^0.12.0",
26 |     "@vicons/utils": "^0.1.4",
27 |     "@vitejs/plugin-vue": "^3.0.0",
28 |     "axios": "^0.27.2",
29 |     "naive-ui": "^2.32.1",
30 |     "vfonts": "^0.0.3",
31 |     "vite": "^3.0.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | 
 3 | import {NButton,NLayout,NLayoutContent,NLayoutFooter,NLayoutHeader,NSpace,NConfigProvider,NMessageProvider,NScrollbar,NBackTop,NAffix} from 'naive-ui';
 4 | import {useRouter,useRoute} from 'vue-router'
 5 | import headers from './components/headers.vue'
 6 | import footers from './components/footers.vue'
 7 | 
 8 | const router=useRouter();
 9 | const route =useRoute();
10 | </script>
11 | 
12 | <template>
13 | 
14 | <!--<n-config-provider :theme="themecheck" >-->
15 |   <n-message-provider>
16 |       <n-back-top :right="100" :visibility-height="100"></n-back-top>
17 |       <n-layout >
18 |         <n-config-provider :theme-overrides="GlobTheme">
19 |           <headers ></headers>
20 |         </n-config-provider>
21 |         <n-layout-content>
22 |           <router-view></router-view>
23 |           <n-theme-editor></n-theme-editor>
24 |         </n-layout-content>
25 |         <n-layout-footer>
26 |           <n-config-provider :theme-overrides="GlobTheme">
27 |           <footers></footers>
28 |           </n-config-provider>
29 |         </n-layout-footer>
30 |       </n-layout>
31 |   </n-message-provider>
32 | <!--</n-config-provider>-->
33 | </template>
34 | 
35 | <script>
36 | import {defineComponent} from "vue";
37 | import {darkTheme, NThemeEditor,useMessage} from 'naive-ui'
38 | 
39 | const GlobTheme={
40 |   "Button": {
41 |     "textColorHover": "#4680FFFF",
42 |     "textColorPressed": "#1C81CFFF",
43 |     "textColorTextHover": "#4680FFFF",
44 |     "textColorFocus": "#4680FFFF",
45 |     "textColorTextFocus": "#4680FFFF",
46 |     "textColorTextPressed": "#1C81CFFF"
47 |   }
48 | };
49 | 
50 | export default defineComponent({
51 |   setup(){
52 | 
53 |     return{
54 |       darkTheme
55 |     }
56 |   },
57 |   computed:{
58 |     // themecheck(){
59 |     //   // console.log('themecheck')
60 |     //   return (this.$store.state.theme)?darkTheme:null
61 |     // }
62 |   },
63 |   components:{
64 |     NThemeEditor
65 |   }
66 | })
67 | 
68 | </script>
69 | 
70 | <style scoped>
71 | 
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/assets/QRWechat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/QRWechat.jpg


--------------------------------------------------------------------------------
/src/assets/QRWechat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/QRWechat.png


--------------------------------------------------------------------------------
/src/assets/banner/1.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="banner-circle-shadow-1"><feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgba(0,0,0,0.05)"></feDropShadow></filter><linearGradient id="banner-circle-fill-1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color: rgb(250, 252, 254);"></stop><stop offset="100%" style="stop-color: rgb(249, 252, 254);"></stop></linearGradient></defs><circle cx="170" cy="170" r="140" fill="url(#banner-circle-fill-1)" filter="url(#banner-circle-shadow-1)"></circle></svg>


--------------------------------------------------------------------------------
/src/assets/banner/2.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="banner-circle-shadow-2"><feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgba(0,0,0,0.05)"></feDropShadow></filter><linearGradient id="banner-circle-fill-2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color: rgb(250, 252, 254);"></stop><stop offset="50%" style="stop-color: rgb(243, 249, 252);"></stop></linearGradient></defs><circle cx="230" cy="230" r="200" fill="url(#banner-circle-fill-2)" filter="url(#banner-circle-shadow-2)"></circle></svg>


--------------------------------------------------------------------------------
/src/assets/banner/3.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="banner-rect-shadow-1"><feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgba(0,0,0,0.05)"></feDropShadow></filter><linearGradient id="banner-rect-fill-1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="25%" style="stop-color: rgb(248, 252, 255);"></stop><stop offset="100%" style="stop-color: rgb(248, 251, 255);"></stop></linearGradient></defs><rect x="30" y="30" width="180" height="180" fill="url(#banner-rect-fill-1)" filter="url(#banner-rect-shadow-1)"></rect></svg>


--------------------------------------------------------------------------------
/src/assets/banner/4.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="860" height="860"><defs><filter id="banner-diamond-shadow-1"><feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgba(0,0,0,0.05)"></feDropShadow></filter><linearGradient id="banner-diamond-fill-1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="60%" style="stop-color: rgb(252, 253, 255);"></stop><stop offset="100%" style="stop-color: rgb(252, 253, 254);"></stop></linearGradient></defs><path d="M 30 430 430 30 830 430 430 830 Z" fill="url(#banner-diamond-fill-1)" filter="url(#banner-diamond-shadow-1)"></path></svg>


--------------------------------------------------------------------------------
/src/assets/banner/5.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 1440 1080" style="enable-background:new 0 0 1440 1080;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
 7 | 	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);}
 8 | 	.st2{filter:url(#Adobe_OpacityMaskFilter);}
 9 | 	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
10 | 	.st4{mask:url(#mask-4_1_);}
11 | 	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:url(#path-7_1_);}
12 | 	.st6{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_3_);}
13 | 	.st7{filter:url(#Adobe_OpacityMaskFilter_1_);}
14 | 	.st8{mask:url(#mask-4_2_);fill-rule:evenodd;clip-rule:evenodd;fill:url(#矩形_1_);}
15 | </style>
16 | <title>编组 5备份</title>
17 | <desc>Created with Sketch.</desc>
18 | <g id="页面-1">
19 | 	<g id="导航方案备份">
20 | 		<g id="编组-5备份">
21 | 			<g id="路径备份">
22 | 				<g id="蒙版">
23 | 					<g transform="translate(0.000000, 0.000000)">
24 | 						<g>
25 | 							<g>
26 | 								
27 | 									<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="435.5743" y1="681.2054" x2="436.5876" y2="681.1113" gradientTransform="matrix(1440 0 0 -448 -627404 305694.125)">
28 | 									<stop  offset="0" style="stop-color:#FBFCFD"/>
29 | 									<stop  offset="1" style="stop-color:#F8FCFF"/>
30 | 								</linearGradient>
31 | 								<rect y="0" class="st0" width="1440" height="1080"/>
32 | 							</g>
33 | 							<g>
34 | 								
35 | 									<radialGradient id="SVGID_2_" cx="435.6062" cy="679.9913" r="0.9483" gradientTransform="matrix(2.743208e-14 1080 447.9998 -6.613093e-14 -303923.875 -469914.6563)" gradientUnits="userSpaceOnUse">
36 | 									<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.5"/>
37 | 									<stop  offset="1" style="stop-color:#EDF6FF;stop-opacity:0.5782"/>
38 | 								</radialGradient>
39 | 								<rect y="0" class="st1" width="1440" height="1080"/>
40 | 							</g>
41 | 						</g>
42 | 						<defs>
43 | 							<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="259" width="1440" height="189">
44 | 								<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
45 | 							</filter>
46 | 						</defs>
47 | 						<mask maskUnits="userSpaceOnUse" x="0" y="259" width="1440" height="189" id="mask-4_1_">
48 | 							<g class="st2">
49 | 								<rect id="path-3_1_" y="0" class="st3" width="1440" height="448"/>
50 | 							</g>
51 | 						</mask>
52 | 						<g id="矩形备份-32" class="st4">
53 | 							<g>
54 | 								
55 | 									<linearGradient id="path-7_1_" gradientUnits="userSpaceOnUse" x1="436.1972" y1="683.4449" x2="436.1972" y2="680.612" gradientTransform="matrix(1440 0 0 -189 -627404 129453.8047)">
56 | 									<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
57 | 									<stop  offset="1" style="stop-color:#9FD7FF;stop-opacity:0.3831"/>
58 | 								</linearGradient>
59 | 								<rect id="path-7" y="259" class="st5" width="1440" height="189"/>
60 | 							</g>
61 | 							<g>
62 | 								
63 | 									<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="435.8731" y1="683.0185" x2="435.7654" y2="683.0013" gradientTransform="matrix(1440 0 0 -189 -627404 129453.8047)">
64 | 									<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
65 | 									<stop  offset="1" style="stop-color:#F2F7FC"/>
66 | 								</linearGradient>
67 | 								<rect y="259" class="st6" width="1440" height="189"/>
68 | 							</g>
69 | 						</g>
70 | 						<defs>
71 | 							<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="0" y="0" width="1440" height="1080">
72 | 								<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
73 | 							</filter>
74 | 						</defs>
75 | 						<mask maskUnits="userSpaceOnUse" x="0" y="0" width="1440" height="1080" id="mask-4_2_">
76 | 							<g class="st7">
77 | 								<rect id="path-3_2_" y="0" class="st3" width="1440" height="448"/>
78 | 							</g>
79 | 						</mask>
80 | 						
81 | 							<linearGradient id="矩形_1_" gradientUnits="userSpaceOnUse" x1="436.1972" y1="681.6666" x2="436.1972" y2="680.7098" gradientTransform="matrix(1440 0 0 -1080 -627404 736379.75)">
82 | 							<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
83 | 							<stop  offset="1" style="stop-color:#D2ECFF;stop-opacity:0.2254"/>
84 | 						</linearGradient>
85 | 						<rect id="矩形" y="0" class="st8" width="1440" height="1080"/>
86 | 					</g>
87 | 				</g>
88 | 			</g>
89 | 		</g>
90 | 	</g>
91 | </g>
92 | </svg>
93 | 


--------------------------------------------------------------------------------
/src/assets/cover3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/cover3.png


--------------------------------------------------------------------------------
/src/assets/example1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/example1.gif


--------------------------------------------------------------------------------
/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.eot


--------------------------------------------------------------------------------
/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.woff


--------------------------------------------------------------------------------
/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/fonts/abhaya-libre-v13-latin/abhaya-libre-v13-latin-regular.woff2


--------------------------------------------------------------------------------
/src/assets/ico.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/assets/ico.png


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/footers.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from 'vue';
  3 | import { NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NSpace, NGradientText, NGrid, NGi, NImage, NIcon, NButton, NDivider, NConfigProvider, NModal, NCard } from 'naive-ui';
  4 | import ConnectWithoutContactRound from '@vicons/material/ConnectWithoutContactRound';
  5 | import LogoWechat from '@vicons/carbon/LogoWechat';
  6 | import AlternateEmailFilled from '@vicons/material/AlternateEmailFilled';
  7 | import DeviceTv from '@vicons/tabler/DeviceTv';
  8 | import IosLink from '@vicons/ionicons4/IosLink';
  9 | import Github from '@vicons/fa/Github';
 10 | import Affiliate from '@vicons/tabler/Affiliate';
 11 | const showWCMod = ref(false);
 12 | const showQQRMod = ref(false);
 13 | function jumpTo(url) {
 14 |   window.open(url);
 15 | }
 16 | </script>
 17 | 
 18 | <template>
 19 |   <n-config-provider :theme-overrides="responseTheme">
 20 |     <div style="margin-top: 30px;">
 21 |       <n-layout style="overflow: hidden!important;">
 22 |         <!--        <n-layout-header></n-layout-header>-->
 23 |         <n-layout-content content-style="padding-bottom:20px;">
 24 |           <n-grid cols="2 s:6 l:8" x-gap="5px" item-responsive responsive="screen">
 25 |             <!--          Left-->
 26 |             <n-gi offset="0 s:1 l:1" span="2">
 27 |               <n-space justify="center">
 28 |                 <n-image width="40"
 29 |                   src="https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/ico.png"></n-image>
 30 |               </n-space>
 31 |               <n-space justify="center">
 32 |                 <span id="footName1"><b>北京理工大学网络开拓者协会</b></span>
 33 |               </n-space>
 34 |               <n-space justify="center">
 35 |                 <span id="footName2">Net Pioneer Association of BIT</span>
 36 |               </n-space>
 37 |               <n-space justify="center">
 38 |                 <span id="footName3">网络无限 · 开拓不懈</span>
 39 |               </n-space>
 40 |             </n-gi>
 41 |             <!--          Mid-->
 42 |             <n-gi offset="0" span="2" style="margin-top: 10px;">
 43 |               <n-space justify="center">
 44 |                 <n-space vertical style="">
 45 |                   <!--                    title-->
 46 |                   <n-space justify="center">
 47 |                     <div style="padding-bottom: 10px;">
 48 |                       <n-icon size="20" color="#3366FFFF">
 49 |                         <ConnectWithoutContactRound />
 50 |                       </n-icon>
 51 |                       <span style="font-size: large">
 52 |                         <b style="text-align: center">
 53 |                           Contact us
 54 |                         </b>
 55 |                       </span>
 56 |                     </div>
 57 |                   </n-space>
 58 |                   <!--              <n-divider></n-divider>-->
 59 |                   <!--                      qq-->
 60 |                   <n-space justify="center">
 61 |                     <div style="padding-bottom: 10px;">
 62 |                       <n-button text @click="showQQRMod = true;">
 63 |                         <n-icon size="18" color="#EB6969">
 64 |                           <AlternateEmailFilled />
 65 |                         </n-icon>
 66 |                         <span style="font-size: medium">
 67 |                           2024迎新QQ群：694320039
 68 |                         </span>
 69 |                         <n-icon size="18">
 70 |                           <IosLink />
 71 |                         </n-icon>
 72 |                       </n-button>
 73 |                       <n-modal v-model:show="showQQRMod">
 74 |                         <n-card style="width: 600px" title=" " :bordered="false" size="huge" role="dialog"
 75 |                           aria-modal="true" class="glassmorphism">
 76 |                           <template #header-extra>
 77 |                             使用手机QQ扫描二维码或搜索群号：694320039
 78 |                           </template>
 79 |                           <img src="https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/QRQQ.png"
 80 |                             style="width: 100%; height: 100%;">
 81 |                         </n-card>
 82 |                       </n-modal>
 83 |                     </div>
 84 |                   </n-space>
 85 |                   <!--                    wechat-->
 86 |                   <n-space justify="center">
 87 |                     <div style="padding-bottom: 10px;">
 88 |                       <n-button text @click="showWCMod = true" style="text-align: center;">
 89 |                         <n-icon size="18" color="#00D98D">
 90 |                           <LogoWechat />
 91 |                         </n-icon>
 92 |                         <span style="font-size: medium; text-align: center;">
 93 |                           Wechat: bitwangxie
 94 |                         </span>
 95 |                         <n-icon size="18">
 96 |                           <IosLink />
 97 |                         </n-icon>
 98 |                       </n-button>
 99 |                       <!--                        show QRcode-->
100 |                       <n-modal v-model:show="showWCMod">
101 |                         <n-card style="width: 600px" title=" " :bordered="false" size="huge" role="dialog"
102 |                           aria-modal="true" class="glassmorphism">
103 |                           <template #header-extra>
104 |                             微信公众号搜索 “NetPioneer” 即可关注公众号
105 |                           </template>
106 |                           <img src="https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/QRWechat.png"
107 |                             style="width: 100%; height: 100%;">
108 |                         </n-card>
109 |                       </n-modal>
110 |                     </div>
111 |                   </n-space>
112 |                   <!--                    bilibili-->
113 |                   <n-space justify="center">
114 |                     <div style="padding-bottom: 10px;">
115 |                       <n-button text @click="jumpTo('https://space.bilibili.com/89756733')">
116 |                         <n-icon size="18" color="#23ADE5">
117 |                           <DeviceTv />
118 |                         </n-icon>
119 |                         <span style="font-size: medium;">
120 |                           Bilibili: 网络开拓者
121 |                         </span>
122 |                         <n-icon size="18">
123 |                           <IosLink />
124 |                         </n-icon>
125 |                       </n-button>
126 |                     </div>
127 |                   </n-space>
128 |                   <!--                    github-->
129 |                   <n-space justify="center">
130 |                     <div style="padding-bottom: 10px;">
131 |                       <n-button text @click="jumpTo('https://github.com/BITNP')">
132 |                         <n-icon size="18">
133 |                           <Github />
134 |                         </n-icon>
135 |                         <span style="font-size: medium;">
136 |                           Github: bitnp
137 |                         </span>
138 |                         <n-icon size="18">
139 |                           <IosLink />
140 |                         </n-icon>
141 |                       </n-button>
142 |                     </div>
143 |                   </n-space>
144 |                 </n-space>
145 |               </n-space>
146 |             </n-gi>
147 |             <!--          Right-->
148 |             <n-gi offset="0" span="2 s:0 l:2">
149 |               <n-space justify="center">
150 |                 <n-space vertical>
151 |                   <!--                Title-->
152 |                   <n-space justify="center">
153 |                     <div style="padding-bottom: 10px;">
154 |                       <n-icon size="20" color="#5D95E8">
155 |                         <Affiliate />
156 |                       </n-icon>
157 |                       <span style="font-size: large">
158 |                         <b>
159 |                           Related Links
160 |                         </b>
161 |                       </span>
162 |                     </div>
163 |                   </n-space>
164 |                   <!--                Col1-->
165 |                   <n-space justify="space-between">
166 | 
167 |                     <n-space justify="center">
168 |                       <div style="padding-bottom: 10px;">
169 |                         <n-button text @click="jumpTo('https://www.bit.edu.cn/')">
170 |                           <!--                      <n-icon size="18">-->
171 |                           <!--                        <AirplayFilled/>-->
172 |                           <!--                      </n-icon>-->
173 |                           <span style="font-size: medium">
174 |                             &nbsp; 北京理工大学
175 |                           </span>
176 |                           <n-icon size="18">
177 |                             <IosLink />
178 |                           </n-icon>
179 |                         </n-button>
180 |                       </div>
181 |                     </n-space>
182 |                     <n-space justify="start">
183 |                       <div style="padding-bottom: 10px;">
184 |                         <n-button text @click="jumpTo('https://login.bit.edu.cn/')">
185 |                           <!--                      <n-icon size="18">-->
186 |                           <!--                        <ReminderMedical/>-->
187 |                           <!--                      </n-icon>-->
188 |                           <span style="font-size: medium">
189 |                             &nbsp; 乐学
190 |                           </span>
191 |                           <n-icon size="18">
192 |                             <IosLink />
193 |                           </n-icon>
194 |                         </n-button>
195 |                       </div>
196 |                     </n-space>
197 |                   </n-space>
198 |                   <!--                Col2-->
199 |                   <n-space justify="space-between">
200 |                     <n-space justify="center">
201 |                       <div style="padding-bottom: 10px;">
202 |                         <n-button text @click="jumpTo('https://bit101.cn/#/')">
203 |                           <!--                      <n-icon size="18">-->
204 |                           <!--                        <AirplayFilled/>-->
205 |                           <!--                      </n-icon>-->
206 |                           <span style="font-size: medium">
207 |                             &nbsp; BIT101
208 |                           </span>
209 |                           <n-icon size="18">
210 |                             <IosLink />
211 |                           </n-icon>
212 |                         </n-button>
213 |                       </div>
214 |                     </n-space>
215 |                     <n-space justify="start">
216 |                       <div style="padding-bottom: 10px;">
217 |                         <n-button text @click="jumpTo(' https://bithesis.bitnp.net')">
218 |                           <!--                      <n-icon size="18">-->
219 |                           <!--                        <AirplayFilled/>-->
220 |                           <!--                      </n-icon>-->
221 |                           <span style="font-size: medium">
222 |                             &nbsp;BIThesis
223 |                           </span>
224 |                           <n-icon size="18">
225 |                             <IosLink />
226 |                           </n-icon>
227 |                         </n-button>
228 |                       </div>
229 |                     </n-space>
230 |                   </n-space>
231 |                   <!--                Col3-->
232 |                   <n-space justify="space-between">
233 |                     <n-space justify="center">
234 |                       <div style="padding-bottom: 10px;">
235 |                         <n-button text @click="jumpTo('https://git.bitnp.net')">
236 |                           <span style="font-size: medium">
237 |                             &nbsp; 网协Gitlab
238 |                           </span>
239 |                           <n-icon size="18">
240 |                             <IosLink />
241 |                           </n-icon>
242 |                         </n-button>
243 |                       </div>
244 |                     </n-space>
245 |                     <!--                      <n-space justify="start" >-->
246 |                     <!--                        <div style="padding-bottom: 10px;">-->
247 |                     <!--                          <n-button text @click="jumpTo(' https://bithesis.bitnp.net')">-->
248 |                     <!--                            &lt;!&ndash;                      <n-icon size="18">&ndash;&gt;-->
249 |                     <!--                            &lt;!&ndash;                        <AirplayFilled/>&ndash;&gt;-->
250 |                     <!--                            &lt;!&ndash;                      </n-icon>&ndash;&gt;-->
251 |                     <!--                            <span style="font-size: medium">-->
252 |                     <!--                              &nbsp;BIThesis-->
253 |                     <!--                            </span>-->
254 |                     <!--                            <n-icon size="18">-->
255 |                     <!--                              <IosLink/>-->
256 |                     <!--                            </n-icon>-->
257 |                     <!--                          </n-button>-->
258 |                     <!--                        </div>-->
259 |                     <!--                      </n-space>-->
260 |                   </n-space>
261 |                 </n-space>
262 |               </n-space>
263 |             </n-gi>
264 |           </n-grid>
265 |         </n-layout-content>
266 |         <n-layout-footer bordered>
267 |           <div id="ffoot">
268 |             <span>
269 |               <n-gradient-text gradient="linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)">
270 |                 Copyright &copy; 1997&ndash;2025 <br id="ffot_br"> Net Pioneer Association of BIT All Rights Reserved. Contact us: webmaster AT bitnp.net
271 |               </n-gradient-text>
272 |             </span>
273 |           </div>
274 |         </n-layout-footer>
275 |       </n-layout>
276 |     </div>
277 |   </n-config-provider>
278 | </template>
279 | 
280 | <script>
281 | 
282 | export default {
283 |   name: "footers"
284 | };
285 | const responseTheme = {
286 |   breakpoints: { s: 767 }
287 | }
288 | 
289 | </script>
290 | 
291 | <style scoped>
292 | @media not (max-width:767px) {
293 |   #ffot_br {
294 |     display: none;
295 |   }
296 | }
297 | 
298 | .glassmorphism {
299 |   backdrop-filter: blur(7px) saturate(180%);
300 |   -webkit-backdrop-filter: blur(7px) saturate(180%);
301 |   background-color: rgba(255, 255, 255, 0.7);
302 |   border-radius: 12px;
303 |   border: 1px solid rgba(209, 213, 219, 0.3);
304 | }
305 | 
306 | .fontIngerdient {
307 |   -webkit-background-clip: text;
308 |   -webkit-text-fill-color: transparent;
309 | }
310 | 
311 | .n-layout-footer {
312 |   background: transparent;
313 | }
314 | 
315 | #ffoot {
316 |   width: 100vw;
317 |   /*padding: 10px;*/
318 |   padding-left: 0;
319 |   padding-right: 0;
320 |   padding-top: 15px;
321 |   padding-bottom: 18px;
322 |   font-size: 15px;
323 |   /*white-space: normal;*/
324 |   /*word-break: break-all;*/
325 |   /*word-wrap: break-word;*/
326 |   /*overflow: hidden;*/
327 |   /*text-overflow: ellipsis;*/
328 | }
329 | 
330 | #footName1 {
331 |   font-size: large;
332 | 
333 |   /*-webkit-background-clip: text;*/
334 |   /*-webkit-text-fill-color: transparent;*/
335 |   /*background-color: #FFE53B;*/
336 |   /*background-image: linear-gradient(270deg, #FFE53B 0%, #ff6225 74%);*/
337 | 
338 | }
339 | 
340 | #footName2 {
341 |   font-family: Calibri;
342 |   font-size: medium;
343 | 
344 |   /*-webkit-background-clip: text;*/
345 |   /*-webkit-text-fill-color: transparent;*/
346 |   /*background-color: #FFE53B;*/
347 |   /*background-image: linear-gradient(90deg, #ffdd3f 0%, #ff6225 74%);*/
348 | }
349 | 
350 | #footName3 {
351 |   font-size: medium;
352 | 
353 |   /*-webkit-background-clip: text;*/
354 |   /*-webkit-text-fill-color: transparent;*/
355 |   /*background-image: radial-gradient( circle 597px at 93% 9.8%,  rgba(255,61,89,1) 1.7%, rgba(252,251,44,1) 97% );*/
356 | }
357 | </style>
358 | 


--------------------------------------------------------------------------------
/src/components/headers.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {
  3 |   NLayoutHeader,
  4 |   NImage,
  5 |   NGrid,
  6 |   NGi,
  7 |   NButton,
  8 |   NSpace,
  9 |   NIcon,
 10 |   NH3,
 11 |   NText,
 12 |   NSwitch,
 13 |   NAvatar,
 14 |   NDropdown,
 15 |   useMessage
 16 | } from 'naive-ui'
 17 |   import News16Regular from '@vicons/fluent/News16Regular'
 18 |   // import GitlabOutlined from '@vicons/antd/GitlabOutlined'
 19 |   import CodepenOutlined from '@vicons/antd/CodepenOutlined'
 20 |   import Atom from '@vicons/tabler/Atom'
 21 |   import Github from '@vicons/fa/Github'
 22 |   import ShareSocialOutline from '@vicons/ionicons5/ShareSocialOutline'
 23 |   import ManageAccountsOutlined from '@vicons/material/ManageAccountsOutlined'
 24 |   import BarsOutlined from '@vicons/antd/BarsOutlined'
 25 |   import ApiApp from '@vicons/tabler/ApiApp'
 26 | import {useRoute, useRouter} from "vue-router";
 27 | 
 28 | window.$message=useMessage();
 29 | const $route=useRoute();
 30 | const $router=useRouter();
 31 | 
 32 | function jumpTo(url){
 33 |   window.open(url);
 34 | }
 35 | </script>
 36 | 
 37 | <template>
 38 |   <n-config-provider :theme-overrides="responseTheme">
 39 |     <n-layout-header bordered >
 40 |       <n-grid cols="48 m:48 l:48" x-gap="5px" item-responsive responsive="screen">
 41 |         <!--icon-->
 42 |         <n-gi offset="4" span="4 s:3 l:3">
 43 |           <!--          <n-image @click="$router.push('/')" width="54" src="./src/assets/ico.png"></n-image>-->
 44 |           <img src="https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/ico.png"  style="width: 28px;" id="headerIco" @click="$router.push('/')">
 45 |           <!--          BitNP-->
 46 |         </n-gi>
 47 |         <!--news-->
 48 |         <n-gi offset="0" span="0 s:5 l:3">
 49 |           <n-button text @click="jumpTo('https://status.bitnp.net')">
 50 |             <n-icon :size="propstyle.icons" >
 51 |               <News16Regular/>
 52 |             </n-icon>
 53 |             <span style="font-size: 17px;">News</span>
 54 |           </n-button>
 55 |         </n-gi>
 56 |         <!--space-->
 57 |         <n-gi offset="0" span="0 s:5 l:3">
 58 |           <n-dropdown trigger="hover" size="large" :options="options1" @select="handleSelect">
 59 |             <n-button text >
 60 |               <n-icon :size="propstyle.icons" >
 61 |                 <CodepenOutlined/>
 62 |               </n-icon>
 63 |               <span style="font-size: 17px;">Space</span>
 64 |             </n-button>
 65 |           </n-dropdown>
 66 |         </n-gi>
 67 |         <!--meta-->
 68 |         <n-gi offset="0" span="0 s:5 l:3">
 69 |           <n-dropdown trigger="hover" size="large" :options="options2" @select="handleSelect">
 70 |             <n-button text >
 71 |               <n-icon :size="propstyle.icons" >
 72 |                 <Atom/>
 73 |               </n-icon>
 74 |               <span style="font-size: 17px;">Meta</span>
 75 |             </n-button>
 76 |           </n-dropdown>
 77 |           <!--about格-->
 78 |         </n-gi>
 79 |         <!--about-->
 80 |         <n-gi offset="0" span="0 s:5 l:3">
 81 |           <n-button text @click="$router.push('about-us')">
 82 |             <n-icon :size="propstyle.icons">
 83 |               <ApiApp/>
 84 |             </n-icon>
 85 |             <span style="font-size: 17px;">About</span>
 86 |           </n-button>
 87 |         </n-gi>
 88 |         <!--admin-->
 89 |         <n-gi offset="22 s:14 l:22" span="0 s:2 l:1">
 90 |           <n-button text @click="$router.push('')">
 91 |             <n-icon :size="propstyle.icons">
 92 |               <ManageAccountsOutlined/>
 93 |             </n-icon>
 94 |           </n-button>
 95 |         </n-gi>
 96 |         <!--github-->
 97 |         <n-gi offset="0" span="0 s:2 l:1">
 98 |           <n-button text @click="jumpTo('https://github.com/BITNP')" >
 99 |             <n-icon :size="propstyle.icons">
100 |               <Github/>
101 |             </n-icon>
102 |           </n-button>
103 |         </n-gi>
104 |         <!--share-->
105 |         <n-gi offset="0" span="0 s:2 l:1">
106 |           <n-button class="clipbtn" :data-clipboard-text="Urlhandle" text>
107 |             <n-icon :size="propstyle.icons">
108 |               <ShareSocialOutline/>
109 |             </n-icon>
110 |           </n-button>
111 |         </n-gi>
112 |         <!--Title for mobile-->
113 |         <n-gi offset="0" span="15 s:0 l:0">
114 |             <span style="font-size: 1rem; display: inline-block; padding-top: 0.6rem; ">
115 |               Net Pioneer
116 |             </span>
117 |         </n-gi>
118 |         <!--dropdown for mobile-->
119 |         <n-gi offset="18 m:25" span="4 s:0 l:0">
120 |           <n-dropdown :options="optionsM" @select="handleSelect" size="huge" style="width: 50vw;">
121 |             <n-button text>
122 |               <n-icon :size="propstyle.icons-2">
123 |                 <BarsOutlined></BarsOutlined>
124 |               </n-icon>
125 |             </n-button>
126 |           </n-dropdown>
127 |         </n-gi>
128 |         <input id="clipbundle" class="clptar" style="visibility: hidden;">
129 |       </n-grid>
130 |     </n-layout-header>
131 |   </n-config-provider>
132 | </template>
133 | 
134 | <script>
135 | import {h} from "vue"
136 | import {defineComponent,reactive} from "vue";
137 | 
138 | import {NAvatar, NText} from 'naive-ui'
139 | import Clipboard from 'clipboard'
140 | 
141 | import DnsServices from '@vicons/carbon/DnsServices'
142 | import BrandGithub from '@vicons/tabler/BrandGithub'
143 | import CalendarLtr16Regular from '@vicons/fluent/CalendarLtr16Regular'
144 | import DevicesPc from '@vicons/tabler/DevicesPc'
145 | import PlanetOutline from '@vicons/ionicons5/PlanetOutline'
146 | import MdContacts from '@vicons/ionicons4/MdContacts'
147 | import LinkSquare12Regular from '@vicons/fluent/LinkSquare12Regular'
148 | // import News16Regular from '@vicons/fluent/News16Regular'
149 | 
150 | const responseTheme={
151 |   breakpoints:{s:767}
152 | }
153 | 
154 | const renderIcon = (icon) => {
155 |   return () => {
156 |     return h(NIcon, null, {
157 |       default: () => h(icon)
158 |     });
159 |   };
160 | };
161 | 
162 | export default defineComponent({
163 |   name: "headers",
164 |   setup(){
165 |     let clipUrl=reactive({e:window.location.href});
166 |     return{
167 |       clipUrl,
168 |     }
169 |   },
170 |   data(){
171 |     return{
172 |       propstyle:{
173 |         icons:25,
174 |       },
175 |       options1:[
176 |         {
177 |           label: '组织部芝士虾',
178 |           key: 'activities',
179 |           icon:renderIcon(CalendarLtr16Regular)
180 |         },
181 |         {
182 |           label: "BITNP Blog",
183 |           key: 'blogs',
184 |           icon:renderIcon(DnsServices)
185 |         },
186 |         {
187 |           label: "BITNP知识库",
188 |           key: 'wiki',
189 |           icon:renderIcon(DnsServices)
190 |         },
191 |       ],
192 |       options2:[
193 |         {
194 |           label: '网协GitHub',
195 |           key:'github',
196 |           icon:renderIcon(BrandGithub)
197 |         },
198 |         {
199 |           label: '学校常用网址',
200 |           key: 'address',
201 |           icon:renderIcon(LinkSquare12Regular)
202 |         },
203 |         {
204 |           label: '电脑推荐表',
205 |           key: 'PCcommands',
206 |           icon:renderIcon(DevicesPc)
207 |         },
208 |       ],
209 |       // 移动端下拉菜单，因此和上方会有重复
210 |       optionsM:[
211 |         {
212 |           label:'News',
213 |           key:'news',
214 |           icon:renderIcon(News16Regular)
215 |         },
216 |         {
217 |           label: 'Space',
218 |           key: 'space',
219 |           icon:renderIcon(CodepenOutlined),
220 |           children:[
221 |             {
222 |               label: '组织部芝士虾',
223 |               key: 'activities',
224 |               icon:renderIcon(CalendarLtr16Regular)
225 |             },
226 |             {
227 |               label: "BITNP Blog",
228 |               key: 'blogs',
229 |               icon:renderIcon(DnsServices)
230 |             },
231 |             {
232 |               label: "BITNP知识库",
233 |               key: 'wiki',
234 |               icon:renderIcon(DnsServices)
235 |             },
236 |           ]
237 |         },
238 |         {
239 |           label: 'Meta',
240 |           key: 'meta',
241 |           icon:renderIcon(Atom),
242 |           children: [
243 |             {
244 |               label: '网协GitHub',
245 |               key:'github',
246 |               icon:renderIcon(BrandGithub)
247 |             },
248 |             {
249 |               label: '学校常用网址',
250 |               key: 'address',
251 |               icon:renderIcon(LinkSquare12Regular)
252 |             },
253 |             {
254 |               label: '电脑推荐表',
255 |               key: 'PCcommands',
256 |               icon:renderIcon(DevicesPc)
257 |             },
258 |           ]
259 |         },
260 |         {
261 |           label: 'About',
262 |           key: 'about',
263 |           icon:renderIcon(ApiApp)
264 |         }
265 |       ]
266 |     }
267 |   },
268 |   components:{
269 |     Clipboard
270 |   },
271 |   methods:{
272 |       // Changetheme(value){
273 |       //   this.$store.commit('ChangeTheme')
274 |       // },
275 |     handleSelect(key){
276 |       const map ={
277 |         news:'https://status.bitnp.net',
278 |         github:'https://github.com/BITNP',
279 |         activities:'https://cheesy-shrimp.bitnp.net',
280 |         blogs:'https://blog.bitnp.net',
281 |         wiki:'https://wiki.bitnp.net',
282 |         address:'common-links',
283 |         PCcommands:'https://docs.qq.com/aio/p/scmzu718dzus0zl',
284 |         about:'about-us'
285 |       }
286 |       //pollyfill
287 |       if (map[key].indexOf('http')!=-1)window.open(map[key]);
288 |       else this.$router.push(map[key]);
289 |     }
290 |   },
291 |   mounted() {
292 |     var clipboard=new Clipboard('.clipbtn');
293 |     clipboard.on('success',()=>{
294 |       window.$message.success('已粘贴到剪贴板，快去分享吧~');
295 |       // console.log('copy text successfully.')
296 |     });
297 |   },
298 |   computed:{
299 |     Urlhandle(){
300 |       // return window.location.href;
301 |       // console.log(this.$route.path);
302 |       return document.location.host+'/#'+this.$route.path;
303 |     }
304 |   }
305 | })
306 | </script>
307 | 
308 | <style scoped>
309 | html {
310 |   font-size : 20px;
311 | }
312 | @media only screen and (min-width: 401px){
313 |   html {
314 |     font-size: 25px !important;
315 |   }
316 | }
317 | @media only screen and (min-width: 428px){
318 |   html {
319 |     font-size: 26.75px !important;
320 |   }
321 | }
322 | @media only screen and (min-width: 481px){
323 |   html {
324 |     font-size: 30px !important;
325 |   }
326 | }
327 | @media only screen and (min-width: 569px){
328 |   html {
329 |     font-size: 35px !important;
330 |   }
331 | }
332 | @media only screen and (min-width: 641px){
333 |   html {
334 |     font-size: 40px !important;
335 |   }
336 | }
337 | .n-layout-header{
338 |   padding-top: 4px;
339 |   padding-bottom: 3px;
340 | }
341 | .n-avatar{
342 |   padding-top: 12px;
343 | }
344 | .n-button{
345 |   padding-top: 12px;
346 |   padding-bottom: 14px;
347 | }
348 | .n-button:focus{
349 |   border: transparent;
350 | }
351 | .n-switch{
352 |   padding-top: 15px;
353 | }
354 | #headerIco{
355 |   padding-top: 0.6rem;
356 |   /*width:  1.1rem;*/
357 | }
358 | #headerIco:hover{
359 |   cursor: pointer;
360 | }
361 | </style>
362 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import './style.css'
 3 | import App from './App.vue'
 4 | import {createStore} from "vuex"
 5 | import router from './router/main.js'
 6 | import axios from 'axios'
 7 | 
 8 | const app= createApp(App);
 9 | 
10 | 
11 | const stores =createStore({
12 |     state(){
13 |         return{
14 |             // theme:false
15 |         }
16 |     },
17 |     mutations:{
18 |         // ChangeTheme(state){
19 |         //     state.theme=!state.theme
20 |         //     // console.log(state.theme)
21 |         // }
22 |     }
23 | })
24 | 
25 | app.use(stores);
26 | app.use(router);
27 | app.mount('#app');
28 | 


--------------------------------------------------------------------------------
/src/router/main.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router'
 2 | 
 3 | const routes = [
 4 |     {
 5 |         path: '/',
 6 |         name: 'home',
 7 |         component: () => import('../views/home/home3.vue')
 8 |     },
 9 |     // {
10 |     //     path: '/home2',
11 |     //     name: 'home2',
12 |     //     component:()=>import('../views/home/home.vue')
13 |     // },
14 |     {
15 |         path: '/admin',
16 |         name: 'admin',
17 |         component: () => import('../views/admin/admin.vue')
18 |     },
19 |     {
20 |         path: '/about-us',
21 |         name: 'about-us',
22 |         component: () => import('@/views/about-us/aboutUs.vue')
23 |     },
24 |     {
25 |         path: '/common-links',
26 |         name: 'common-links',
27 |         component: () => import('@/views/common-links/Common-Links.vue')    
28 |     },
29 | ];
30 | 
31 | const router = createRouter({
32 |     history: createWebHashHistory(),
33 |     routes
34 | });
35 | 
36 | export default router;


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   line-height: 24px;
 5 |   font-weight: 400;
 6 | 
 7 |   color-scheme: light dark;
 8 |   color: rgba(255, 255, 255, 0.87);
 9 |   background-color: #242424;
10 | 
11 |   font-synthesis: none;
12 |   text-rendering: optimizeLegibility;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-text-size-adjust: 100%;
16 | }
17 | 
18 | body {
19 |   margin: 0;
20 |   display: flex;
21 |   /*place-items: center;*/
22 |   /*align-items: center;*/
23 |   /*justify-items: center;*/
24 |   /* min-width: 320px; */
25 |   min-height: 100vh;
26 | }
27 | 
28 | h1 {
29 |   font-size: 3.2em;
30 |   line-height: 1.1;
31 | }
32 | 
33 | button {
34 |   border-radius: 8px;
35 |   border: 1px solid transparent;
36 |   padding: 0.6em 1.2em;
37 |   font-size: 1em;
38 |   font-weight: 500;
39 |   font-family: inherit;
40 |   background-color: #1a1a1a;
41 |   cursor: pointer;
42 |   transition: border-color 0.25s;
43 | }
44 | button:hover {
45 |   border-color: #646cff;
46 | }
47 | button:focus,
48 | button:focus-visible {
49 |   /*outline: 4px auto -webkit-focus-ring-color;*/
50 | }
51 | 
52 | .card {
53 |   padding: 2em;
54 | }
55 | 
56 | #app {
57 |   /*max-width: 1280px;*/
58 |   /*margin: 0 auto;*/
59 |   /*padding: 2rem;*/
60 |   text-align: center;
61 |   margin: 0 0!important;
62 |   width: 100vw;
63 |   max-width:none;
64 |   /*min-width: 1200px;*/
65 |   padding: 0.1rem;
66 | }
67 | 
68 | @media (prefers-color-scheme: light) {
69 |   :root {
70 |     color: #213547;
71 |     background-color: #ffffff;
72 |   }
73 |   a:hover {
74 |     color: #747bff;
75 |   }
76 |   button {
77 |     background-color: #f9f9f9;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/views/about-us/aboutUs.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from 'vue';
  3 | import { NSpace, NGridItem, NGrid, NButton, NImage, NIcon, NAnchor } from 'naive-ui';
  4 | import Neos from '@vicons/fa/Neos'
  5 | import Chess from '@vicons/fa/Chess'
  6 | import DrawImage20Regular from '@vicons/fluent/DrawImage20Regular'
  7 | import ConstructOutline from '@vicons/ionicons5/ConstructOutline'
  8 | import CodeOutlined from '@vicons/antd/CodeOutlined'
  9 | import ContainerServices from '@vicons/carbon/ContainerServices'
 10 | import HomeRepairServiceOutlined from '@vicons/material/HomeRepairServiceOutlined'
 11 | import Video from '@vicons/carbon/Video'
 12 | import HandshakeRegular from '@vicons/fa/HandshakeRegular'
 13 | const glassColor = "rgba(255, 255, 255, 0.91)";
 14 | const glassAnimationDurationSec = 0.67;
 15 | const showRail = ref(false);
 16 | const regex = /about-us(?!.)/g;
 17 | 
 18 | 
 19 | window.addEventListener("scroll", function () {
 20 |     //http://127.0.0.1:5173/#/about-us
 21 |     // if(window.location.href.match(regex))
 22 |     // console.log(window.location.href.match(regex) !== null);
 23 |     if (window.location.href.match(regex) !== null) {
 24 |         if (window.scrollY > 3) {
 25 |             document.getElementById("background-decorator")
 26 |                 .className = "glass-appearing";
 27 |             showRail.value = true;
 28 |             document.getElementById("bitnp-intro1").style.backgroundColor = "rgba(255, 255, 255, 0)";
 29 |             // console.log("background-decorator class property: " + document.getElementById("background-decorator").className);
 30 |         }
 31 |         else {
 32 |             document.getElementById("background-decorator")
 33 |                 .className = "glass-disappearing";
 34 |             showRail.value = false;
 35 |             document.getElementById("bitnp-intro1").style.backgroundColor = "rgba(255, 255, 255, 0.9)";
 36 |             // console.log("background-decorator class property: " + document.getElementById("background-decorator").className);
 37 |         }
 38 |     }
 39 | });
 40 | </script>
 41 | 
 42 | <template>
 43 |     <div id="background-container">
 44 |         <!-- <div style="backdrop-filter: blur(1px);"> -->
 45 |         <div class="glass" id="background-decorator">
 46 |             <div style="margin:0px 30px; padding-top:30%; padding-bottom: 100px;">
 47 | 
 48 |                 <div class="introduction-container" style="margin-bottom: 90px; padding: 40px; animation-duration: 0.8s"
 49 |                     id="bitnp-intro1">
 50 |                     <n-icon size="50">
 51 |                         <Neos />
 52 |                     </n-icon>
 53 |                     <span class="introduction-title">
 54 |                         网络开拓者协会</span>
 55 |                     <span class="introduction-content">
 56 |                         (Net Pioneer Association of
 57 |                         BIT，以下简称网协)，成立于1997年，是北京理工大学校内规模最大的社团之一，本着“网络无限，开拓不懈”的精神，不断摸索、引领校园网络建设，后成为校团委领导的全校唯一IT类学生组织。经过20年的不断成长，各项规章制度和硬件设备基本完善，成长为北理最大的网络服务提供团体，拥有每日最高的访问量，从学校学生工作，到日常娱乐服务，协会的服务范围仍然在继续的扩大。同时，协会自身也在不断努力的增强实力，拓展业务。
 58 |                     </span>
 59 |                 </div>
 60 | 
 61 |                 <div style="margin-bottom: 55px;">
 62 |                     <n-grid cols="1 1050:3" x-gap="45px" y-gap="55px">
 63 |                         <n-grid-item offset="0" span="1">
 64 |                             <n-space justify="start">
 65 | 
 66 |                                 <div class="introduction-container">
 67 |                                     <n-icon size="50">
 68 |                                         <HomeRepairServiceOutlined />
 69 |                                     </n-icon>
 70 | 
 71 |                                     <span class="introduction-title" style="display:block; margin-bottom: 15px;">
 72 |                                         服务</span>
 73 |                                     <n-anchor :show-rail="showRail">
 74 |                                         <span class="introduction-content" style="display:block; margin-left: 20px;">
 75 |                                             作为北京理工大学校团委领导的唯一校级IT类学生组织，秉持“网络无限，开拓不懈”的宗旨，坚定“不仅是代码与技术，更有思考与情怀”的信念，不断摸索、引领校园网络建设。有专业服务器和独立机房，为在校师生提供专业的校园网络咨询资讯，网络开发和维护技术教学，计算机设备故障咨询等服务。
 76 |                                         </span>
 77 |                                     </n-anchor>
 78 |                                 </div>
 79 |                             </n-space>
 80 |                         </n-grid-item>
 81 | 
 82 |                         <n-grid-item offset="0" span="1">
 83 |                             <n-space justify="start">
 84 | 
 85 |                                 <div class="introduction-container">
 86 |                                     <n-icon size="50">
 87 |                                         <Video />
 88 |                                     </n-icon>
 89 | 
 90 |                                     <span class="introduction-title" style="display:block; margin-bottom: 15px;">
 91 |                                         直播</span>
 92 |                                     <n-anchor :show-rail="showRail">
 93 |                                         <span class="introduction-content" style="display:block; margin-left: 20px;">
 94 |                                             NPLive是网协自主开发和维护的一套校园网直播系统，运用网协搭建的高可用高拓展性的视频流分发系统，不仅可以向校园网用户提供免流量高清视频直播服务，同时也可以在自主开发的外网平台上提供直播服务。与学电合作负责直播深秋歌会，军理课，毕业晚会，火红的青春五四舞蹈展演，北湖音乐节等学校大型活动；也与足协等组织合作提供球赛直播等服务。
 95 |                                         </span>
 96 |                                     </n-anchor>
 97 |                                 </div>
 98 |                             </n-space>
 99 |                         </n-grid-item>
100 | 
101 |                         <n-grid-item offset="0" span="1">
102 |                             <n-space justify="start">
103 | 
104 |                                 <div class="introduction-container">
105 |                                     <n-icon size="50">
106 |                                         <HandshakeRegular />
107 |                                     </n-icon>
108 | 
109 |                                     <span class="introduction-title" style="display:block; margin-bottom: 15px;">
110 |                                         合作</span>
111 |                                     <n-anchor :show-rail="showRail">
112 |                                         <span class="introduction-content" style="display:block; margin-left: 20px;">
113 |                                             网协现有各类技术骨干43名，部员100余人，微信公众号关注量5000以上。涉猎广泛，可进行服务器开发，网页设计，安卓&IOS开发，可承接各类外场活动，微信软文推广，文化活动企划，欢迎合作咨询。
114 |                                         </span>
115 |                                     </n-anchor>
116 |                                 </div>
117 |                             </n-space>
118 |                         </n-grid-item>
119 | 
120 |                     </n-grid>
121 |                 </div>
122 | 
123 |                 <div style="margin-top: 200px;">
124 |                     <div class="introduction-container" style="margin-bottom: 90px;">
125 |                         <span class="introduction-title" style="font-size: 62px;">
126 |                             组织结构</span>
127 |                     </div>
128 | 
129 | 
130 |                     <div style="margin-bottom: 90px;">
131 |                         <n-grid cols="1 1000:2" x-gap="150px" y-gap="55px">
132 | 
133 |                             <n-grid-item offset="0" span="1">
134 |                                 <n-space justify="start">
135 |                                     <div class="introduction-container">
136 |                                         <n-icon size="50">
137 |                                             <Chess />
138 |                                         </n-icon>
139 |                                         <span class="introduction-title">
140 |                                             主席团</span>
141 |                                         <span class="introduction-content">
142 |                                             ，网协的核心管理层，主要的职能有：统筹兼顾网协的发展规划，选择取舍适合的项目及方向；在各个部门之间进行串联，团结成员关系，提高组织凝聚力；主席团成员也会按照自己的技术能力，参与各个项目的进行；并且，主席团成员也会为大家讲授课程，帮助大家了解更多与网络有关的技术知识，管理网协活动正常有序进行。
143 |                                         </span>
144 |                                     </div>
145 |                                 </n-space>
146 |                             </n-grid-item>
147 | 
148 |                             <n-grid-item offset="0" span="1">
149 |                                 <n-space justify="start">
150 |                                     <div class="introduction-container">
151 |                                         <n-icon size="50">
152 |                                             <DrawImage20Regular />
153 |                                         </n-icon>
154 |                                         <span class="introduction-title">
155 |                                             数字媒体部</span>
156 |                                         <span class="introduction-content">
157 |                                             ，昵称「树莓」，非典型技术部门。不止关注技术本身，而是着眼于新媒体运营、宣传造势、做与人有关，与美有关的事业。在这里，你可以得到基础的PS、AE、PR软件使用培训，掌握微信公众号等新媒体平台的运作经营、学习信息传媒和艺术设计的基本知识。如果你不甘心成为一个程序猿，如果你对于美已然自有见解，如果你想体验技术之外的磅礴力量，请加入我们。
158 |                                         </span>
159 |                                     </div>
160 |                                 </n-space>
161 |                             </n-grid-item>
162 |                         </n-grid>
163 |                     </div>
164 | 
165 |                     <div style="margin-bottom: 55px;">
166 |                         <n-grid cols="1 1300:3" x-gap="105px" y-gap="55px">
167 |                             <n-grid-item offset="0" span="1">
168 |                                 <n-space justify="start">
169 |                                     <div class="introduction-container">
170 |                                         <n-icon size="50">
171 |                                             <ConstructOutline />
172 |                                         </n-icon>
173 |                                         <span class="introduction-title">
174 |                                             电脑诊所</span>
175 |                                         <span class="introduction-content">
176 |                                             ，北理唯一一个专业维修以及推荐电脑和手机的部门。我们在徐特立图书馆有一个自己独立的阅览室——三楼自然科学第二阅览室311G。加入我们，你可以碰到会修各种电脑小问题的部长们，以及会各种编程语言以及debug的大神们，同时也会遇到各种各样的妹子来向你寻求帮助。同时，这里也可以给你提供一个能够亲自动手实践，亲自遇到问题并亲自解决的平台，这里可以让你增强动手能力，也可以让你增强交际能力。懂得更多，遇到更多，学到更多，就在北理网协电脑诊所。
177 |                                         </span>
178 |                                     </div>
179 |                                 </n-space>
180 |                             </n-grid-item>
181 | 
182 |                             <n-grid-item offset="0" span="1">
183 |                                 <n-space justify="start">
184 |                                     <div class="introduction-container">
185 |                                         <n-icon size="50">
186 |                                             <CodeOutlined />
187 |                                         </n-icon>
188 |                                         <span class="introduction-title">
189 |                                             技术部</span>
190 |                                         <span class="introduction-content">
191 |                                             ，作为网络开拓者协会最大部门之一，一直是协会内技术精英、高干的聚集地。技术部以分享、创新、完善、发展技术为理念，最主要的任务就是为网协提供技术支持。参加技术部，技术部提供基础的C语言讲座，进阶的unity游戏制作和安卓端APP开发，还有亲自参与制作项目的机会。技多不压身，技术部也和诊所合作，为学习系统维护和硬件组装提供平台。在网协学习技术的过程中，没有持之以恒的毅力和踏实肯干的性格是很难做好的。技术并不是照猫画虎的模仿，研究技术是学生在校学习中对能力发展的一大助力。
192 |                                         </span>
193 |                                     </div>
194 |                                 </n-space>
195 |                             </n-grid-item>
196 | 
197 |                             <n-grid-item offset="0" span="1">
198 |                                 <n-space justify="start">
199 |                                     <div class="introduction-container">
200 |                                         <n-icon size="50">
201 |                                             <ContainerServices />
202 |                                         </n-icon>
203 |                                         <span class="introduction-title">
204 |                                             组织部</span>
205 |                                         <span class="introduction-content">
206 |                                             ，网络开拓者协会的很重要的部门，内外兼修，掌管着网协的经济大权。内负责与各部门之间的交流合作以及一些日常事务的管理如人员考核，会议记录，内部活动策划，最重要的是我们也管理经济支出。外负责联系社会和学校，主要是拉赞助为网协的一些活动筹集资金，是我们接触社会，了解社会，融入社会的锻炼平台。如果你觉得自己交际能力和语言表达能力还不错，想在一个技术氛围浓厚的组织提升自己的能力，那么组织部将是你的不二选择，欢迎加入我们！
207 |                                         </span>
208 |                                     </div>
209 |                                 </n-space>
210 |                             </n-grid-item>
211 |                         </n-grid>
212 |                     </div>
213 |                 </div>
214 | 
215 |             </div>
216 |         </div>
217 |     </div>
218 | </template>
219 | 
220 | <style scoped>
221 | .introduction-container {
222 |     text-align: start;
223 | }
224 | 
225 | #bitnp-intro1 {
226 |     background-color: rgba(255, 255, 255, 0.9);
227 | }
228 | 
229 | .introduction-title {
230 |     font: 35px Karla, 'Helvetica Neue', Helvetica, Arial, sans-serif;
231 | }
232 | 
233 | .introduction-content {
234 |     margin-top: 0;
235 |     font: 1.3rem Karla, 'Helvetica Neue', Helvetica, Arial, sans-serif;
236 | }
237 | 
238 | #background-container {
239 |     margin: 0;
240 |     padding: 0;
241 |     box-sizing: border-box;
242 | 
243 |     top: 0;
244 |     left: 0;
245 |     width: 100%;
246 |     height: 100%;
247 |     z-index: -2;
248 | 
249 |     background-image: url(https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/about-us-background.jpg);
250 |     /* background-image: url(https://bitnp-website-1258614279.cos.ap-beijing.myqcloud.com/static/bb3s.svg); */
251 |     background-repeat: no-repeat;
252 |     background-size: cover;
253 |     background-attachment: fixed;
254 | }
255 | 
256 | /* #background-container {
257 |     --glass-color: rgba(237, 237, 237, 0.91);
258 |     --glass-animation-duration: 0.8s;
259 | } */
260 | 
261 | .glass {
262 |     top: 0;
263 |     left: 0;
264 |     width: 100%;
265 |     height: 100%;
266 |     z-index: -1;
267 | 
268 |     background-color: rgba(237, 237, 237, 0);
269 | }
270 | 
271 | .glass-appearing {
272 |     top: 0;
273 |     left: 0;
274 |     background-color: v-bind(glassColor);
275 |     width: 100%;
276 |     height: 100%;
277 |     z-index: -1;
278 | 
279 |     animation-name: glass-appearing;
280 |     animation-duration: v-bind(glassAnimationDurationSec + "s");
281 |     animation-iteration-count: 1;
282 |     animation-timing-function: ease;
283 | }
284 | 
285 | @keyframes glass-appearing {
286 |     from {
287 |         background-color: rgba(237, 237, 237, 0);
288 |     }
289 | 
290 |     to {
291 |         background-color: v-bind(glassColor);
292 |     }
293 | }
294 | 
295 | .glass-disappearing {
296 |     top: 0;
297 |     left: 0;
298 |     background-color: rgba(237, 237, 237, 0);
299 |     width: 100%;
300 |     height: 100%;
301 |     z-index: -1;
302 |     animation-name: glass-disappearing;
303 |     animation-duration: v-bind(glassAnimationDurationSec + "s");
304 |     animation-iteration-count: 1;
305 | }
306 | 
307 | 
308 | @keyframes glass-disappearing {
309 |     from {
310 |         background-color: v-bind(glassColor);
311 |     }
312 | 
313 |     to {
314 |         background-color: rgba(237, 237, 237, 0);
315 |     }
316 | }
317 | </style>


--------------------------------------------------------------------------------
/src/views/about-us/assets/about-us-background-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/about-us/assets/about-us-background-image.jpg


--------------------------------------------------------------------------------
/src/views/about-us/assets/about-us-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/about-us/assets/about-us-background.jpg


--------------------------------------------------------------------------------
/src/views/admin/admin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "admin"
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/views/common-links/Common-Links.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 |   import { NButton,NDivider,NSpace,NLayout,NLayoutSider,NLayoutContent,NCard,NEllipsis,NH1,NH2,NH3,NH4,NH5,NH6} from 'naive-ui'
  3 | </script>
  4 | 
  5 | <template>
  6 |     <base target="_blank">
  7 |     <!-- 在新标签页中打开链接 -->
  8 | 
  9 |     <!-- 右边折叠的侧边栏提示 -->
 10 |     <n-layout has-sider sider-placement="right">
 11 |       <n-layout-content content-style="padding: 5%;" >
 12 |         
 13 |         <n-h3>本网页的作用是提供一些学校常用的网址和简单的功能介绍，
 14 |           更详细全面的功能请亲自打开网站后找到“关于我们”或“组织介绍”，
 15 |         <br>一个示例：<a href="/#/about-us" target="_blank">合理打广告</a>
 16 |         <br> 
 17 |         另外，一些网址可能需要使用校内网，但不用担心我们有<a href="https://webvpn.bit.edu.cn" target="_blank">资源控制访问系统</a>，
 18 |         即使是校外也仍然可以访问你所需要的网址
 19 |         <br>（在此请注意，webvpn需要使用校外网才能访问）
 20 |         <br>
 21 |         由于某些不可抗力，如果您在使用过程中发现有不能访问or已被弃用or值得收藏的网页，都可以直接联系网协相关人员进行更新。
 22 |         <br>感谢您对网协主页的支持与贡献！
 23 | 
 24 |         </n-h3>
 25 |       </n-layout-content>
 26 |       <n-layout-sider
 27 |         collapse-mode="transform"
 28 |         collapsed-width="0vw"
 29 |         width=15vw
 30 |         show-trigger="bar"
 31 |         content-style="padding: auto;"
 32 |         bordered
 33 |         text-align="center"
 34 |       >
 35 |       <h2>提示</h2>
 36 |       </n-layout-sider>
 37 |     </n-layout>
 38 | 
 39 |     <!-- 下面的都是左边折叠的侧边栏 -->
 40 |     <!-- 第一部分侧边栏 服务-->
 41 |     <n-layout has-sider>
 42 |       <n-layout-sider
 43 |         collapse-mode="transform"
 44 |         collapsed-width="0vw"
 45 |         width=15vw
 46 |         show-trigger="bar"
 47 |         content-style="padding: 50%;"
 48 |         bordered
 49 |         font="6em"
 50 |         text-align="center"
 51 |       >
 52 |       <h2>服务</h2>
 53 |       </n-layout-sider>
 54 | 
 55 |       <n-layout-content content-style="padding: 0%">
 56 |           <n-card title="校历" hoverable class="thumbnail">
 57 |             <!-- 悬浮卡片中的内容 -->
 58 |             <a href="https://jwb.bit.edu.cn/jxrl/bnjxrlst/index.htm">教学日历</a>       
 59 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
 60 |                提供各个学期的上课及放假安排
 61 |               </n-ellipsis>
 62 |           </n-card>
 63 |           <n-card title="i北理" hoverable class="thumbnail">
 64 |             <a href="https://i.bit.edu.cn/EIP/nonlogin/homePage.htm">智慧北理</a>
 65 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
 66 |                即网站版的i北理,可在此下载i北理,并且基本提供i北理的所有服务
 67 |               </n-ellipsis>
 68 |           </n-card>
 69 |           <n-card title="本科生招生" hoverable class="thumbnail">
 70 |             <a href="https://admission.bit.edu.cn/">招生网</a>
 71 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
 72 |                涉及本科生的招生与录取工作
 73 |               </n-ellipsis>
 74 |           </n-card>
 75 |       </n-layout-content>
 76 |     </n-layout>
 77 | 
 78 |     <!-- 第二部分侧边栏 教学-->
 79 |     <n-layout has-sider>
 80 |       <n-layout-sider
 81 |         collapse-mode="transform"
 82 |         collapsed-width="0vw"
 83 |         width=15vw
 84 |         show-trigger="bar"
 85 |         content-style="padding: 50%;"
 86 |         bordered
 87 |         font="6em"
 88 |         text-align="center"
 89 |       >
 90 |       <h2>教学</h2>
 91 |       </n-layout-sider>
 92 | 
 93 |       <n-layout-content content-style="padding: 0%;">
 94 |           <n-card title="教务部" hoverable class="thumbnail">
 95 |             <!-- 悬浮卡片中的内容 -->
 96 |             <a href="https://jwb.bit.edu.cn/">本科生培养</a>       
 97 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
 98 |                专业设置规划，可以在此查询到各个专业的培养方案及教学通知
 99 |               </n-ellipsis>
100 |           </n-card>
101 |           <n-card title="选课" hoverable class="thumbnail">
102 |             <a href="https://xk.bit.edu.cn/">选课系统</a>
103 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
104 |               选课通知会发布在教务处里，推荐课程可以通过一些其他渠道进行咨询
105 |               </n-ellipsis>
106 |           </n-card>
107 |           <n-card title="乐学" hoverable class="thumbnail">
108 |             <a href="http://lexue.bit.edu.cn/">在线教学服务</a>
109 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
110 |                课程作业的发布提交都会发布在这里，请大家及时按照老师要求加入课程。（乐学的评测系统向来是值得讨论的
111 |               </n-ellipsis>
112 |           </n-card>
113 |           <n-card title="延河课堂" hoverable class="thumbnail">
114 |             <a href="https://www.yanhekt.cn/liveCourse">直播及录播</a>
115 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
116 |               上网课及复习必备帮手，近日延河进行了升级给同学们带来了更好的体验
117 |               </n-ellipsis>
118 |           </n-card>
119 |           <n-card title="学科竞赛" hoverable class="thumbnail">
120 |             <a href="https://xkjs.bit.edu.cn">查看竞赛信息</a>
121 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
122 |             
123 |               </n-ellipsis>
124 |           </n-card>
125 |           <n-card title="本硕博一体化教学系统" hoverable class="thumbnail">
126 |             <a href="http://jxzxehall.bit.edu.cn">课表安排培养方案</a>
127 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
128 |             
129 |               </n-ellipsis>
130 |           </n-card>
131 |       </n-layout-content>
132 |     </n-layout>
133 | 
134 |     <!-- 第三部分侧边栏 教学教研机构 -->   
135 |     <n-layout has-sider>
136 |       <n-layout-sider
137 |         collapse-mode="transform"
138 |         collapsed-width="0vw"
139 |         width=15vw
140 |         show-trigger="bar"
141 |         content-style="padding: 50%;"
142 |         bordered
143 |         font="6em"
144 |         text-align="center"
145 |       >
146 |       <h2>教学教研机构</h2>
147 |       </n-layout-sider>
148 | 
149 |       <n-layout-content content-style="padding: 0%;">
150 |           <n-card title="官网" hoverable class="thumbnail">
151 | 
152 |             <!-- 悬浮卡片中的内容 -->
153 | 
154 |             <a href="https://www.bit.edu.cn/">官网</a>
155 |            
156 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
157 |                提供学校的基本概况以及工作成果
158 |               </n-ellipsis>
159 |           </n-card>
160 |           <n-card title="邮箱" hoverable class="thumbnail">
161 |             <a href="https://mail.bit.edu.cn/">邮箱内</a>
162 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
163 |                会收到学校的各种官方邮件，用学校的邮件可以注册一些软件或者网站，但一定要注意有使用期限哦
164 |               </n-ellipsis>
165 |           </n-card>
166 |           <n-card title="就业信息网" hoverable class="thumbnail">
167 |             <a href="http://job.bit.edu.cn/">该网站</a>           
168 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
169 |                提供毕业生与企业的双向选择渠道，以及招聘信息的汇总
170 |               </n-ellipsis>
171 |           </n-card>
172 |           <n-card title="计划财务部" hoverable class="thumbnail">
173 |             <a href="https://fad.bit.edu.cn/">会计核算</a>           
174 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
175 |                中心的业务包括工资查询税务中心以及网上缴费平台等等
176 |               </n-ellipsis>
177 |           </n-card>     
178 |           <n-card title="党委办公室" hoverable class="thumbnail">
179 |             <a href="https://dzb.bit.edu.cn/">党政办网</a>           
180 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
181 |                 会发布一些红头文件，学校工作的基本
182 |               </n-ellipsis>
183 |           </n-card>        
184 |       </n-layout-content>
185 |     </n-layout>
186 | 
187 |     <!-- 第四部分侧边栏 学院-->   
188 |     <n-layout has-sider>
189 |       <n-layout-sider
190 |         collapse-mode="transform"
191 |         collapsed-width="0vw"
192 |         width=15vw
193 |         show-trigger="bar"
194 |         content-style="padding: 50%;"
195 |         bordered
196 |         font="6em"
197 |         text-align="center"
198 |       >
199 |       <h2>提供学院概况以及工作情况</h2>
200 |       </n-layout-sider>
201 | 
202 |       <n-layout-content content-style="padding: 0%;">
203 |           <n-card title="徐特立学院" hoverable class="thumbnail">
204 |             <a href="https://xuteli.bit.edu.cn/">学院官网</a>           
205 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
206 |                
207 |               </n-ellipsis>
208 |           </n-card>        
209 |           <n-card title="宇航学院" hoverable class="thumbnail">
210 |             <a href="https://sae.bit.edu.cn/">学院官网</a>           
211 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
212 |                
213 |               </n-ellipsis>
214 |           </n-card>
215 |           <n-card title="机电学院" hoverable class="thumbnail">
216 |             <a href="https://smen.bit.edu.cn/">学院官网</a>           
217 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
218 |               </n-ellipsis>
219 |           </n-card>
220 |           <n-card title="机械与车辆" hoverable class="thumbnail">
221 |             <a href="https://me.bit.edu.cn/">学院官网</a>           
222 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
223 |               </n-ellipsis>
224 |           </n-card>
225 |           <n-card title="光电学院" hoverable class="thumbnail">
226 |             <a href="https://opt.bit.edu.cn/">学院官网</a>           
227 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
228 |               </n-ellipsis>
229 |           </n-card>   
230 |           <n-card title="信息与电子" hoverable class="thumbnail">
231 |             <a href="https://sie.bit.edu.cn/">学院官网</a>           
232 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
233 |               </n-ellipsis>
234 |           </n-card>   
235 |           <n-card title="自动化学院" hoverable class="thumbnail">
236 |             <a href="https://ac.bit.edu.cn/">学院官网</a>           
237 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
238 |               </n-ellipsis>
239 |           </n-card>   
240 |           <n-card title="计算机学院" hoverable class="thumbnail">
241 |             <a href="https://cs.bit.edu.cn/">学院官网</a>           
242 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
243 |               </n-ellipsis>
244 |           </n-card>      
245 |           <n-card title="网安学院" hoverable class="thumbnail">
246 |             <a href="https://www.bit.edu.cn/gbxxgk/gbgljg/index.htm">学院官网</a>           
247 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
248 |               </n-ellipsis>
249 |           </n-card> 
250 |           <n-card title="材料学院" hoverable class="thumbnail">
251 |             <a href="https://mse.bit.edu.cn/">学院官网</a>           
252 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
253 |               </n-ellipsis>
254 |           </n-card> 
255 |           <n-card title="化学与化工" hoverable class="thumbnail">
256 |             <a href="https://cce.bit.edu.cn/">学院官网</a>           
257 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
258 |               </n-ellipsis>
259 |           </n-card> 
260 |           <n-card title="生命学院" hoverable class="thumbnail">
261 |             <a href="https://ls.bit.edu.cn/">学院官网</a>           
262 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
263 |               </n-ellipsis>
264 |           </n-card> 
265 |           <n-card title="数学与统计" hoverable class="thumbnail">
266 |             <a href="https://math.bit.edu.cn/">学院官网</a>           
267 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
268 |               </n-ellipsis>
269 |           </n-card>     
270 |           <n-card title="物理学院" hoverable class="thumbnail">
271 |             <a href="https://physics.bit.edu.cn/">学院官网</a>           
272 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
273 |               </n-ellipsis>
274 |           </n-card>  
275 |           <n-card title="管理与经济" hoverable class="thumbnail">
276 |             <a href="https://sme.bit.edu.cn/">学院官网</a>           
277 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
278 |               </n-ellipsis>
279 |           </n-card>  
280 |           <n-card title="人文与社科" hoverable class="thumbnail">
281 |             <a href="https://rw.bit.edu.cn/">学院官网</a>           
282 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
283 |               </n-ellipsis>
284 |           </n-card>  
285 |           <n-card title="马院" hoverable class="thumbnail">
286 |             <a href="https://marx.bit.edu.cn/">学院官网</a>           
287 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
288 |               </n-ellipsis>
289 |           </n-card>  
290 |           <n-card title="法学院" hoverable class="thumbnail">
291 |             <a href="https://law.bit.edu.cn/">学院官网</a>           
292 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
293 |               </n-ellipsis>
294 |           </n-card>     
295 |           <n-card title="外国语学院" hoverable class="thumbnail">
296 |             <a href="https://sfl.bit.edu.cn/">学院官网</a>           
297 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
298 |               </n-ellipsis>
299 |           </n-card>   
300 |           <n-card title="设计与艺术" hoverable class="thumbnail">
301 |             <a href="https://design.bit.edu.cn/">学院官网</a>           
302 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
303 |               </n-ellipsis>
304 |           </n-card>         
305 |           <n-card title="北京学院" hoverable class="thumbnail">
306 |             <a href="https://bj.bit.edu.cn/">学院官网</a>           
307 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
308 |                
309 |               </n-ellipsis>
310 |           </n-card>                               
311 |       </n-layout-content>
312 |     </n-layout>    
313 | 
314 |     <!-- 第五部分侧边栏 管理机构-->   
315 |     <n-layout has-sider>
316 |       <n-layout-sider
317 |         collapse-mode="transform"
318 |         collapsed-width="0vw"
319 |         width=15vw
320 |         show-trigger="bar"
321 |         content-style="padding: 50%;"
322 |         bordered
323 |         font="6em"
324 |         text-align="center"
325 |       >
326 |       <h2>管理机构</h2>
327 |       </n-layout-sider>
328 | 
329 |       <n-layout-content content-style="padding: 0%;">
330 |           <n-card title="党委组织部" hoverable class="thumbnail">
331 |             <a href="https://zzb.bit.edu.cn/">党校及党建工作</a>           
332 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
333 |                
334 |               </n-ellipsis>
335 |           </n-card>
336 |           <n-card title="党委宣传部" hoverable class="thumbnail">
337 |             <a href="https://xcb.bit.edu.cn/">新闻中心</a>           
338 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
339 |               </n-ellipsis>
340 |           </n-card>
341 |           <n-card title="纪检委" hoverable class="thumbnail">
342 |             <a href="https://me.bit.edu.cn/">纪律检查委员会</a>           
343 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
344 |               </n-ellipsis>
345 |           </n-card>
346 |           <n-card title="保卫部" hoverable class="thumbnail">
347 |             <a href="https://bwc.bit.edu.cn/">维护校园秩序</a>           
348 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
349 |               </n-ellipsis>
350 |           </n-card>   
351 |           <n-card title="保密办公室" hoverable class="thumbnail">
352 |             <a href="https://bmc.bit.edu.cn/">第二校训</a>           
353 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
354 |               </n-ellipsis>
355 |           </n-card>   
356 |           <n-card title="人事处" hoverable class="thumbnail">
357 |             <a href="https://renshichu.bit.edu.cn/">人力资源管理</a>           
358 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
359 |               </n-ellipsis>
360 |           </n-card>   
361 |           <n-card title="学工部" hoverable class="thumbnail">
362 |             <a href="https://century.bit.edu.cn/">负责学生教育管理工作</a>           
363 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
364 |               </n-ellipsis>
365 |           </n-card>      
366 |           <n-card title="教务部" hoverable class="thumbnail">
367 |             <a href="https://jwc.bit.edu.cn/">本科生招生与培养管理</a>           
368 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
369 |               </n-ellipsis>
370 |           </n-card> 
371 |           <n-card title="研究生院" hoverable class="thumbnail">
372 |             <a href="https://grd.bit.edu.cn/">研究生培养管理</a>           
373 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
374 |               </n-ellipsis>
375 |           </n-card> 
376 |           <n-card title="计划财务部" hoverable class="thumbnail">
377 |             <a href="https://jhcwb.bit.edu.cn/">为学校发展建设提供财务保障</a>           
378 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
379 |               </n-ellipsis>
380 |           </n-card> 
381 |           <n-card title="科技研究院" hoverable class="thumbnail">
382 |             <a href="https://kjc.bit.edu.cn/">组织管理科研活动</a>           
383 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
384 |               </n-ellipsis>
385 |           </n-card> 
386 |           <n-card title="资实处" hoverable class="thumbnail">
387 |             <a href="https://zsc.bit.edu.cn/">资产与实验室管理处</a>           
388 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
389 |               </n-ellipsis>
390 |           </n-card>     
391 |           <n-card title="后勤基建处" hoverable class="thumbnail">
392 |             <a href="https://hqjjc.bit.edu.cn/">学校的后勤管理</a>           
393 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
394 |               </n-ellipsis>
395 |           </n-card>  
396 |           <n-card title="良乡管理处" hoverable class="thumbnail">
397 |             <a href="https://liangxiang.bit.edu.cn/">良乡校区相关业务</a>           
398 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
399 |               </n-ellipsis>
400 |           </n-card>  
401 |           <n-card title="国际交流合作" hoverable class="thumbnail">
402 |             <a href="https://rw.bit.edu.cn/">涉外政策</a>           
403 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
404 |               协调国际及港澳台交流与合作事务
405 |               </n-ellipsis>
406 |           </n-card>  
407 |           <n-card title="离退休工作" hoverable class="thumbnail">
408 |             <a href="https://ltx.bit.edu.cn/">离退休人员管理服务</a>           
409 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
410 |               
411 |               </n-ellipsis>
412 |           </n-card>  
413 |           <n-card title="工会网站" hoverable class="thumbnail">
414 |             <a href="https://gonghui.bit.edu.cn/">教职工管理</a>           
415 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
416 |               </n-ellipsis>
417 |           </n-card>     
418 |           <n-card title="机关党委" hoverable class="thumbnail">
419 |             <a href="https://jgdw.bit.edu.cn/">机关党</a>           
420 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
421 |                 领导学校思想政治工作和精神文明建设
422 |               </n-ellipsis>
423 |           </n-card>                 
424 |       </n-layout-content>
425 |     </n-layout>   
426 | 
427 |     <!-- 第六部分侧边栏 教学教研辅助机构-->
428 |     <n-layout has-sider>
429 |       <n-layout-sider
430 |         collapse-mode="transform"
431 |         collapsed-width="0vw"
432 |         width=15vw
433 |         show-trigger="bar"
434 |         content-style="padding: 50%;"
435 |         bordered
436 |         font="6em"
437 |         text-align="center"
438 |       >
439 |       <h2>教学教研辅助机构</h2>
440 |       </n-layout-sider>
441 | 
442 | 
443 |       <n-layout-content content-style="padding: 0%;">
444 |           <n-card title="图书馆" hoverable class="thumbnail">
445 |             <a href="http://lib.bit.edu.cn/">常用的数据库</a>
446 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
447 |                要合理利用图书馆的数据库，未来研究查文献的时候会用到的
448 |               </n-ellipsis>
449 |           </n-card>
450 |           <n-card title="网信中心" hoverable class="thumbnail">
451 |             <a href="https://itc.bit.edu.cn/">为学校信息建设工作</a>
452 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
453 |                提供技术支持与保障
454 |               </n-ellipsis>
455 |           </n-card>
456 |           <n-card title="教师发展中心" hoverable class="thumbnail">
457 |             <a href="http://cfd.bit.edu.cn/">教学科研辅助机构</a>           
458 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
459 |                教师素质能力提升平台和教师公共事务服务平台
460 |               </n-ellipsis>
461 |           </n-card>
462 |           <n-card title="学生事务中心" hoverable class="thumbnail">
463 |             <a href="https://student.bit.edu.cn/">学生事务</a>           
464 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
465 |                学生资助，办事指南以及校园服务
466 |               </n-ellipsis>
467 |           </n-card>     
468 |           <n-card title="教学运行与考务中心" hoverable class="thumbnail">
469 |             <a href="https://jxzx.bit.edu.cn/">提供教学辅助</a>           
470 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
471 |                 课表编排，选退课，教师调停课，考试安排及保障工作
472 |               </n-ellipsis>
473 |           </n-card>        
474 |           <n-card title="留学生中心" hoverable class="thumbnail">
475 |             <a href="https://isc.bit.edu.cn/">外国留学生的招生与培养管理</a>           
476 |           </n-card>   
477 |           <n-card title="技术转移中心" hoverable class="thumbnail">
478 |             <a href="https://ttc.bit.edu.cn/">负责科技成果的转移转化</a>           
479 |               <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
480 |               </n-ellipsis>
481 |           </n-card>                       
482 |       </n-layout-content>
483 |     </n-layout>
484 | </template>
485 | <style scoped>
486 |   .n-card {
487 |   /* 卡片的大小 */
488 |   max-width: 15vw;
489 |   max-height: 15vh;
490 |   }
491 |   .thumbnail 
492 |   {
493 |   /* 控制卡片横向排列 */
494 | 	float:left;
495 | 	width:25vw;
496 | 	height:15vh;
497 | 	margin:2%;
498 |   /* font:30em; ????*/
499 |  }
500 |   a:link {text-decoration:none;}    /* unvisited link */
501 |   a:visited {text-decoration:none;} /*visited link */
502 |   a:hover {text-decoration:underline;
503 |   color:rgb(10, 119, 83)}   /* mouse over link*/
504 |   a:active {text-decoration:underline;
505 |     color: rgb(76, 9, 40);
506 |   }  /* selected link*/
507 |   a{
508 |     color:rgb(249, 131, 45)
509 | 
510 |   }
511 | .n-layout-sider{
512 |   margin:auto;
513 | }
514 | </style>


--------------------------------------------------------------------------------
/src/views/home/assets/1.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/1.psd


--------------------------------------------------------------------------------
/src/views/home/assets/101shortcut.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/101shortcut.webp


--------------------------------------------------------------------------------
/src/views/home/assets/bb2.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1120" height="760" viewBox="0 0 1120 760" fill="none"><defs><rect id="path_0" x="0" y="0" width="1120" height="760" /><filter id="filter_3" x="0" y="0" width="1120" height="1184" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/>
2 |           <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
3 |           <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" /></filter><filter id="filter_5" x="0" y="0" width="1452" height="374" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/>
4 |           <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
5 |           <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" /></filter><filter id="filter_7" x="0" y="0" width="1998" height="854" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/>
6 |           <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
7 |           <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" /></filter><linearGradient id="linear_0" x1="5.566%" y1="36.11%" x2="75.785%" y2="90.277%" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#F0844C" stop-opacity="1" /><stop offset="0.481" stop-color="#FDB28E" stop-opacity="1" /><stop offset="1" stop-color="#FAEDEC" stop-opacity="1" /></linearGradient><linearGradient id="linear_1" x1="5.566%" y1="36.11%" x2="75.785%" y2="90.277%" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#F0844C" stop-opacity="1" /><stop offset="0.481" stop-color="#FDB28E" stop-opacity="1" /><stop offset="1" stop-color="#FAEDEC" stop-opacity="1" /></linearGradient></defs><g opacity="1" transform="translate(0 0)  rotate(0 560 380)"><rect fill="#FADAC5" opacity="1" transform="translate(0 0)  rotate(0 560 380)" x="0" y="0" width="1120" height="760" rx="0" /><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><g id="圆形 1" filter="url(#filter_3)"><path id="圆形 1" fill-rule="evenodd" style="fill:#FB8144" transform="translate(287 319)  rotate(0 273 273)" opacity="1" d="M273,0C122.23,0 0,122.23 0,273C0,423.77 122.23,546 273,546C423.77,546 546,423.77 546,273C546,122.23 423.77,0 273,0Z " /></g><g id="圆形 1" filter="url(#filter_5)"><path id="圆形 1" fill-rule="evenodd" style="fill:#FB8144" transform="translate(453 -86)  rotate(0 273 273)" opacity="1" d="M273,0C122.23,0 0,122.23 0,273C0,423.77 122.23,546 273,546C423.77,546 546,423.77 546,273C546,122.23 423.77,0 273,0Z " /></g><g id="圆形 1" filter="url(#filter_7)"><path id="圆形 1" fill-rule="evenodd" style="fill:#F8A24F" transform="translate(726 154)  rotate(0 273 273)" opacity="1" d="M273,0C122.23,0 0,122.23 0,273C0,423.77 122.23,546 273,546C423.77,546 546,423.77 546,273C546,122.23 423.77,0 273,0Z " /></g><path id="圆形 2 (轮廓)" fill-rule="evenodd" fill="url(#linear_0)" transform="translate(453 -345)  rotate(0 402.5 402.5)" opacity="0.5" d="M483.57 796.82C456.93 802.27 429.91 805 402.5 805C375.09 805 348.07 802.27 321.43 796.82C295.45 791.51 270.24 783.68 245.81 773.35C221.84 763.21 199.04 750.84 177.42 736.23C156.02 721.77 136.18 705.4 117.89 687.11C99.6 668.82 83.23 648.98 68.77 627.58C54.16 605.96 41.79 583.16 31.65 559.19C21.32 534.76 13.49 509.55 8.18 483.57C2.73 456.93 0 429.91 0 402.5C0 375.09 2.73 348.07 8.18 321.43C13.49 295.45 21.32 270.24 31.65 245.81C41.79 221.84 54.16 199.04 68.77 177.42C83.23 156.02 99.6 136.18 117.89 117.89C136.18 99.6 156.02 83.23 177.42 68.77C199.04 54.16 221.84 41.79 245.81 31.65C270.24 21.32 295.45 13.49 321.43 8.18C348.07 2.73 375.09 0 402.5 0C429.91 0 456.93 2.73 483.57 8.18C509.55 13.49 534.76 21.32 559.19 31.65C583.16 41.79 605.96 54.16 627.58 68.77C648.98 83.23 668.82 99.6 687.11 117.89C705.4 136.18 721.77 156.02 736.23 177.42C750.84 199.04 763.21 221.84 773.35 245.81C783.68 270.24 791.51 295.45 796.82 321.43C802.27 348.07 805 375.09 805 402.5C805 429.91 802.27 456.93 796.82 483.57C791.51 509.55 783.68 534.76 773.35 559.19C763.21 583.16 750.84 605.96 736.23 627.58C721.77 648.98 705.4 668.82 687.11 687.11C668.82 705.4 648.98 721.77 627.58 736.23C605.96 750.84 583.16 763.21 559.19 773.35C534.76 783.68 509.55 791.51 483.57 796.82ZM284.38 122.83C266.32 130.47 249.14 139.79 232.84 150.8C216.69 161.72 201.7 174.08 187.89 187.89C174.08 201.7 161.72 216.69 150.8 232.84C139.79 249.14 130.47 266.32 122.83 284.38C115.06 302.76 109.17 321.73 105.17 341.28C101.06 361.37 99 381.78 99 402.5C99 423.22 101.06 443.63 105.17 463.72C109.17 483.27 115.06 502.24 122.83 520.62C130.47 538.68 139.79 555.86 150.8 572.16C161.72 588.31 174.08 603.3 187.89 617.11C201.7 630.92 216.69 643.28 232.84 654.2C249.14 665.21 266.32 674.53 284.38 682.17C302.76 689.94 321.73 695.83 341.28 699.83C361.37 703.94 381.78 706 402.5 706C423.22 706 443.63 703.94 463.72 699.83C483.27 695.83 502.24 689.94 520.62 682.17C538.68 674.53 555.86 665.21 572.16 654.2C588.31 643.28 603.3 630.92 617.11 617.11C630.92 603.3 643.28 588.31 654.2 572.16C665.21 555.86 674.53 538.68 682.17 520.62C689.94 502.24 695.83 483.28 699.83 463.72C703.94 443.63 706 423.22 706 402.5C706 381.78 703.94 361.37 699.83 341.28C695.83 321.73 689.94 302.76 682.17 284.38C674.53 266.32 665.21 249.14 654.2 232.84C643.28 216.69 630.92 201.7 617.11 187.89C603.3 174.08 588.31 161.72 572.16 150.8C555.86 139.79 538.68 130.47 520.62 122.83C502.24 115.06 483.27 109.17 463.72 105.17C443.63 101.06 423.22 99 402.5 99C381.78 99 361.37 101.06 341.28 105.17C321.73 109.17 302.76 115.06 284.38 122.83Z" /><path id="圆形 2 (轮廓)" fill-rule="evenodd" fill="url(#linear_1)" transform="translate(-315 380)  rotate(0 402.5 402.5)" opacity="0.5" d="M483.57 796.82C456.93 802.27 429.91 805 402.5 805C375.09 805 348.07 802.27 321.43 796.82C295.45 791.51 270.24 783.68 245.81 773.35C221.84 763.21 199.04 750.84 177.42 736.23C156.02 721.77 136.18 705.4 117.89 687.11C99.6 668.82 83.23 648.98 68.77 627.58C54.16 605.96 41.79 583.16 31.65 559.19C21.32 534.76 13.49 509.55 8.18 483.57C2.73 456.93 0 429.91 0 402.5C0 375.09 2.73 348.07 8.18 321.43C13.49 295.45 21.32 270.24 31.65 245.81C41.79 221.84 54.16 199.04 68.77 177.42C83.23 156.02 99.6 136.18 117.89 117.89C136.18 99.6 156.02 83.23 177.42 68.77C199.04 54.16 221.84 41.79 245.81 31.65C270.24 21.32 295.45 13.49 321.43 8.18C348.07 2.73 375.09 0 402.5 0C429.91 0 456.93 2.73 483.57 8.18C509.55 13.49 534.76 21.32 559.19 31.65C583.16 41.79 605.96 54.16 627.58 68.77C648.98 83.23 668.82 99.6 687.11 117.89C705.4 136.18 721.77 156.02 736.23 177.42C750.84 199.04 763.21 221.84 773.35 245.81C783.68 270.24 791.51 295.45 796.82 321.43C802.27 348.07 805 375.09 805 402.5C805 429.91 802.27 456.93 796.82 483.57C791.51 509.55 783.68 534.76 773.35 559.19C763.21 583.16 750.84 605.96 736.23 627.58C721.77 648.98 705.4 668.82 687.11 687.11C668.82 705.4 648.98 721.77 627.58 736.23C605.96 750.84 583.16 763.21 559.19 773.35C534.76 783.68 509.55 791.51 483.57 796.82ZM284.38 122.83C266.32 130.47 249.14 139.79 232.84 150.8C216.69 161.72 201.7 174.08 187.89 187.89C174.08 201.7 161.72 216.69 150.8 232.84C139.79 249.14 130.47 266.32 122.83 284.38C115.06 302.76 109.17 321.73 105.17 341.28C101.06 361.37 99 381.78 99 402.5C99 423.22 101.06 443.63 105.17 463.72C109.17 483.27 115.06 502.24 122.83 520.62C130.47 538.68 139.79 555.86 150.8 572.16C161.72 588.31 174.08 603.3 187.89 617.11C201.7 630.92 216.69 643.28 232.84 654.2C249.14 665.21 266.32 674.53 284.38 682.17C302.76 689.94 321.73 695.83 341.28 699.83C361.37 703.94 381.78 706 402.5 706C423.22 706 443.63 703.94 463.72 699.83C483.27 695.83 502.24 689.94 520.62 682.17C538.68 674.53 555.86 665.21 572.16 654.2C588.31 643.28 603.3 630.92 617.11 617.11C630.92 603.3 643.28 588.31 654.2 572.16C665.21 555.86 674.53 538.68 682.17 520.62C689.94 502.24 695.83 483.28 699.83 463.72C703.94 443.63 706 423.22 706 402.5C706 381.78 703.94 361.37 699.83 341.28C695.83 321.73 689.94 302.76 682.17 284.38C674.53 266.32 665.21 249.14 654.2 232.84C643.28 216.69 630.92 201.7 617.11 187.89C603.3 174.08 588.31 161.72 572.16 150.8C555.86 139.79 538.68 130.47 520.62 122.83C502.24 115.06 483.27 109.17 463.72 105.17C443.63 101.06 423.22 99 402.5 99C381.78 99 361.37 101.06 341.28 105.17C321.73 109.17 302.76 115.06 284.38 122.83Z" /></g></g></svg>


--------------------------------------------------------------------------------
/src/views/home/assets/bb3 - org.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 4535.4 2778" style="enable-background:new 0 0 4535.4 2778;" xml:space="preserve">
  5 | <style type="text/css">
  6 | 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
  7 | 	.st1{opacity:0.93;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);enable-background:new    ;}
  8 | 	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_3_);}
  9 | 	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_4_);}
 10 | 	.st4{opacity:0.9;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_5_);enable-background:new    ;}
 11 | 	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_6_);}
 12 | 	.st6{opacity:0.88;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_7_);enable-background:new    ;}
 13 | 	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#EB1F5D;}
 14 | 	.st8{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_8_);}
 15 | 	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_9_);}
 16 | 	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#313EF2;}
 17 | 	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_10_);}
 18 | </style>
 19 | <g transform="translate(86.3207297124427 94.34741210937503)  rotate(0 1380.3778578739305 1201.8497314453125)">
 20 | 	
 21 | 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7593.3921" y1="61.7206" x2="7592.3765" y2="61.7966" gradientTransform="matrix(-444.9719 494.1913 -104.7834 -94.3474 3388385.75 -3746089.75)">
 22 | 		<stop  offset="0" style="stop-color:#5BA8E8"/>
 23 | 		<stop  offset="1" style="stop-color:#32EE71"/>
 24 | 	</linearGradient>
 25 | 	<path class="st0" d="M3525.1,164.4c-13.9-12.5-32.2-19-50.9-18s-36.2,9.3-48.7,23.2L3074.9,559c-12.5,13.9-19,32.2-18,50.9
 26 | 		s9.3,36.2,23.2,48.7l0,0c13.9,12.5,32.2,19,50.9,18s36.2-9.3,48.7-23.2L3530.3,264c12.5-13.9,19-32.2,18-50.9
 27 | 		S3539,176.9,3525.1,164.4z"/>
 28 | 	
 29 | 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="7588.9512" y1="-92.9787" x2="7587.9111" y2="-92.9787" gradientTransform="matrix(303.7619 -349.4381 69.4182 60.3443 -2295738.75 2657965.25)">
 30 | 		<stop  offset="0" style="stop-color:#73019C;stop-opacity:0.9098"/>
 31 | 		<stop  offset="1" style="stop-color:#2A46FC"/>
 32 | 	</linearGradient>
 33 | 	<path class="st1" d="M2737.2,835.3c19.2,16.7,48.2,14.6,64.9-4.5l243.4-280c16.7-19.2,14.6-48.2-4.5-64.9l0,0
 34 | 		c-19.2-16.7-48.2-14.6-64.9,4.5l-243.4,280C2716,789.6,2718,818.6,2737.2,835.3z"/>
 35 | 	
 36 | 		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="7589.7397" y1="-52.3466" x2="7588.7002" y2="-52.3466" gradientTransform="matrix(238.5124 -294.5383 126.2862 102.2646 -1801002.625 2242573.5)">
 37 | 		<stop  offset="0" style="stop-color:#F16310"/>
 38 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 39 | 	</linearGradient>
 40 | 	<path class="st2" d="M2395.3,2045.9c16.7,13.6,38.2,19.9,59.6,17.7c21.4-2.2,41.1-12.9,54.7-29.7l136.2-168.3
 41 | 		c13.6-16.7,19.9-38.2,17.7-59.6s-12.9-41.1-29.7-54.7l0,0c-16.7-13.6-38.2-19.9-59.6-17.7c-21.4,2.2-41.1,12.9-54.7,29.7
 42 | 		l-136.2,168.3c-13.6,16.7-19.9,38.2-17.7,59.6C2367.9,2012.7,2378.5,2032.3,2395.3,2045.9z"/>
 43 | 	
 44 | 		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="7590.4175" y1="-60.3965" x2="7589.3779" y2="-60.3965" gradientTransform="matrix(501.9272 -598.1735 108.0123 90.6331 -3800660.5 4547740)">
 45 | 		<stop  offset="0" style="stop-color:#F04071"/>
 46 | 		<stop  offset="1" style="stop-color:#FE642A"/>
 47 | 	</linearGradient>
 48 | 	<path class="st3" d="M2151,2477.5c14.3,12,32.8,17.9,51.5,16.2s35.8-10.6,47.9-24.9l411.3-490.2c12-14.3,17.9-32.8,16.2-51.5
 49 | 		c-1.6-18.6-10.6-35.8-24.9-47.9l0,0c-14.3-12-32.8-17.9-51.5-16.2c-18.6,1.6-35.8,10.6-47.9,24.9l-411.3,490.2
 50 | 		c-12,14.3-17.9,32.8-16.2,51.5C2127.7,2448.3,2136.7,2465.5,2151,2477.5z"/>
 51 | 	
 52 | 		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="7589.7803" y1="-68.9512" x2="7588.7407" y2="-68.9512" gradientTransform="matrix(513.7358 -550.9141 89.9565 83.8858 -3891196 4188734)">
 53 | 		<stop  offset="0" style="stop-color:#73019C"/>
 54 | 		<stop  offset="1" style="stop-color:#2A46FC;stop-opacity:0.8902"/>
 55 | 	</linearGradient>
 56 | 	<path class="st4" d="M1229.4,2183.6c11.9,11.1,27.8,17.1,44.1,16.5c16.3-0.6,31.7-7.6,42.8-19.5l429.8-461
 57 | 		c11.1-11.9,17.1-27.8,16.5-44.1c-0.6-16.3-7.6-31.7-19.5-42.8l0,0c-11.9-11.1-27.8-17.1-44.1-16.5c-16.3,0.6-31.7,7.6-42.8,19.5
 58 | 		l-429.8,461c-11.1,11.9-17.1,27.8-16.5,44.1C1210.4,2157.1,1217.5,2172.5,1229.4,2183.6z"/>
 59 | 	
 60 | 		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="7593.8892" y1="84.0083" x2="7592.8428" y2="83.9493" gradientTransform="matrix(-301.8381 335.2252 -77.2871 -69.5896 2300410.75 -2537897.75)">
 61 | 		<stop  offset="0" style="stop-color:#5AA6EE"/>
 62 | 		<stop  offset="1" style="stop-color:#1FF647"/>
 63 | 	</linearGradient>
 64 | 	<path class="st5" d="M2105.5,1576.6c-10.2-9.2-23.7-14-37.5-13.3s-26.7,6.9-35.9,17.1l-232.2,257.9c-9.2,10.2-14,23.7-13.3,37.5
 65 | 		s6.9,26.7,17.1,35.9l0,0c10.2,9.2,23.7,14,37.5,13.3s26.7-6.9,35.9-17.1l232.2-257.9c9.2-10.2,14-23.7,13.3-37.5
 66 | 		S2115.7,1585.8,2105.5,1576.6z"/>
 67 | 	
 68 | 		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="7594.2261" y1="91.8675" x2="7593.1797" y2="91.8086" gradientTransform="matrix(-265.0359 294.3522 -70.5988 -63.5674 2020456.875 -2227240)">
 69 | 		<stop  offset="0" style="stop-color:#5AA6EE"/>
 70 | 		<stop  offset="1" style="stop-color:#32F435;stop-opacity:0.9412"/>
 71 | 	</linearGradient>
 72 | 	<path class="st6" d="M1503.1,1996.8c-9.4-8.4-21.7-12.8-34.3-12.1c-12.6,0.7-24.4,6.3-32.8,15.7l-201.5,223.8
 73 | 		c-8.4,9.4-12.8,21.7-12.1,34.3c0.7,12.6,6.3,24.4,15.7,32.8l0,0c9.4,8.4,21.7,12.8,34.3,12.1c12.6-0.7,24.4-6.3,32.8-15.7
 74 | 		l201.5-223.8c8.4-9.4,12.8-21.7,12.1-34.3C1518.1,2017,1512.5,2005.2,1503.1,1996.8z"/>
 75 | 	<path class="st7" d="M2504.8,567.7c-30.1,0-54.5,24.4-54.5,54.5s24.4,54.5,54.5,54.5s54.5-24.4,54.5-54.5
 76 | 		C2559.3,592.1,2534.9,567.7,2504.8,567.7z"/>
 77 | 	
 78 | 		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="7593.1392" y1="72.5542" x2="7592.0996" y2="72.5542" gradientTransform="matrix(-568.3209 588.5135 -86.3208 -83.359 4322351.5 -4460354)">
 79 | 		<stop  offset="0" style="stop-color:#F04071"/>
 80 | 		<stop  offset="1" style="stop-color:#FE642A"/>
 81 | 	</linearGradient>
 82 | 	<path class="st8" d="M1316.9,1674.2c-11.4-11.1-26.8-17.1-42.7-16.8c-15.9,0.3-31.1,6.9-42.1,18.3l-485,502.2
 83 | 		c-11.1,11.4-17.1,26.8-16.8,42.7s6.9,31.1,18.3,42.1l0,0c11.4,11.1,26.8,17.1,42.7,16.8s31.1-6.9,42.1-18.3l485-502.2
 84 | 		c11.1-11.4,17.1-26.8,16.8-42.7C1334.9,1700.4,1328.3,1685.3,1316.9,1674.2z"/>
 85 | 	
 86 | 		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="7593.0464" y1="87.0894" x2="7592.0068" y2="87.0894" gradientTransform="matrix(-397.8856 474.1815 -77.1254 -64.7159 3030204 -3593892.75)">
 87 | 		<stop  offset="0" style="stop-color:#F36C12"/>
 88 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 89 | 	</linearGradient>
 90 | 	<path class="st9" d="M2721.4,479c-21.3-17.9-53.1-15.1-70.9,6.2l-333.2,397.1c-17.9,21.3-15.1,53.1,6.2,70.9l0,0
 91 | 		c21.3,17.9,53.1,15.1,70.9-6.2l333.2-397C2745.4,528.7,2742.6,496.9,2721.4,479z"/>
 92 | 	<path class="st10" d="M2415.8,382.7c-20.2,0-36.5,16.3-36.5,36.5s16.3,36.5,36.5,36.5s36.5-16.3,36.5-36.5
 93 | 		C2452.3,399.1,2436,382.7,2415.8,382.7z"/>
 94 | 	
 95 | 		<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="7592.0532" y1="-59.2111" x2="7591.0137" y2="-59.2111" gradientTransform="matrix(238.5124 -294.5383 126.2862 102.2646 -1801002.625 2242573.5)">
 96 | 		<stop  offset="0" style="stop-color:#F16310"/>
 97 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 98 | 	</linearGradient>
 99 | 	<path class="st11" d="M2080.2,662.5c16.7,13.6,38.2,19.9,59.6,17.7c21.4-2.2,41.1-12.9,54.7-29.7l136.2-168.3
100 | 		c13.6-16.7,19.9-38.2,17.7-59.6s-12.9-41.1-29.7-54.7l0,0c-16.7-13.6-38.2-19.9-59.6-17.7c-21.4,2.2-41.1,12.9-54.7,29.7
101 | 		l-136.2,168.3c-13.6,16.7-19.9,38.2-17.7,59.6C2052.8,629.3,2063.5,649,2080.2,662.5z"/>
102 | </g>
103 | </svg>
104 | 


--------------------------------------------------------------------------------
/src/views/home/assets/bb3.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 3886.2 2420" style="enable-background:new 0 0 3886.2 2420;" xml:space="preserve">
  5 | <style type="text/css">
  6 | 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
  7 | 	.st1{opacity:0.93;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);enable-background:new    ;}
  8 | 	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_3_);}
  9 | 	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_4_);}
 10 | 	.st4{opacity:0.9;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_5_);enable-background:new    ;}
 11 | 	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_6_);}
 12 | 	.st6{opacity:0.88;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_7_);enable-background:new    ;}
 13 | 	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#EB1F5D;}
 14 | 	.st8{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_8_);}
 15 | 	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_9_);}
 16 | 	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#313EF2;}
 17 | 	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_10_);}
 18 | </style>
 19 | <g transform="translate(86.3207297124427 94.34741210937503)  rotate(0 1380.3778578739305 1201.8497314453125)">
 20 | 	
 21 | 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9161.5518" y1="1177.4991" x2="9160.5361" y2="1177.5751" gradientTransform="matrix(-444.9719 494.1913 -104.7834 -94.3474 4202769.5 -4415976.5)">
 22 | 		<stop  offset="0" style="stop-color:#5BA8E8"/>
 23 | 		<stop  offset="1" style="stop-color:#32EE71"/>
 24 | 	</linearGradient>
 25 | 	<path class="st0" d="M3206.8-22.3c-13.9-12.5-32.2-19-50.9-18s-36.2,9.3-48.7,23.2l-350.6,389.4c-12.5,13.9-19,32.2-18,50.9
 26 | 		c1,18.7,9.3,36.2,23.2,48.7l0,0c13.9,12.5,32.2,19,50.9,18s36.2-9.3,48.7-23.2L3212,77.3c12.5-13.9,19-32.2,18-50.9
 27 | 		S3220.7-9.8,3206.8-22.3z"/>
 28 | 	
 29 | 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="9157.3379" y1="972.4955" x2="9156.2979" y2="972.4955" gradientTransform="matrix(303.7619 -349.4381 69.4182 60.3443 -2846436.5 3141537.5)">
 30 | 		<stop  offset="0" style="stop-color:#73019C;stop-opacity:0.9098"/>
 31 | 		<stop  offset="1" style="stop-color:#2A46FC"/>
 32 | 	</linearGradient>
 33 | 	<path class="st1" d="M2418.9,648.6c19.2,16.7,48.2,14.6,64.9-4.5l243.4-280c16.7-19.2,14.6-48.2-4.5-64.9l0,0
 34 | 		c-19.2-16.7-48.2-14.6-64.9,4.5l-243.4,280C2397.7,602.9,2399.7,631.9,2418.9,648.6z"/>
 35 | 	
 36 | 		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="9158.4238" y1="1026.3673" x2="9157.3838" y2="1026.3673" gradientTransform="matrix(238.5124 -294.5383 126.2862 102.2646 -2311698.25 2594110.25)">
 37 | 		<stop  offset="0" style="stop-color:#F16310"/>
 38 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 39 | 	</linearGradient>
 40 | 	<path class="st2" d="M2077,1859.2c16.7,13.6,38.2,19.9,59.6,17.7c21.4-2.2,41.1-12.9,54.7-29.7l136.2-168.3
 41 | 		c13.6-16.7,19.9-38.2,17.7-59.6c-2.2-21.4-12.9-41.1-29.7-54.7l0,0c-16.7-13.6-38.2-19.9-59.6-17.7c-21.4,2.2-41.1,12.9-54.7,29.7
 42 | 		L2065,1744.9c-13.6,16.7-19.9,38.2-17.7,59.6C2049.6,1826,2060.2,1845.6,2077,1859.2z"/>
 43 | 	
 44 | 		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="9158.7959" y1="1015.6745" x2="9157.7559" y2="1015.6745" gradientTransform="matrix(501.9272 -598.1735 108.0123 90.6331 -4704419 5388187.5)">
 45 | 		<stop  offset="0" style="stop-color:#F04071"/>
 46 | 		<stop  offset="1" style="stop-color:#FE642A"/>
 47 | 	</linearGradient>
 48 | 	<path class="st3" d="M1832.7,2290.8c14.3,12,32.8,17.9,51.5,16.2s35.8-10.6,47.9-24.9l411.3-490.2c12-14.3,17.9-32.8,16.2-51.5
 49 | 		c-1.6-18.6-10.6-35.8-24.9-47.9l0,0c-14.3-12-32.8-17.9-51.5-16.2c-18.6,1.6-35.8,10.6-47.9,24.9L1824,2191.4
 50 | 		c-12,14.3-17.9,32.8-16.2,51.5C1809.4,2261.6,1818.4,2278.8,1832.7,2290.8z"/>
 51 | 	
 52 | 		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="9157.9697" y1="1004.1896" x2="9156.9297" y2="1004.1896" gradientTransform="matrix(513.7358 -550.9141 89.9565 83.8858 -4793685 4962463.5)">
 53 | 		<stop  offset="0" style="stop-color:#73019C"/>
 54 | 		<stop  offset="1" style="stop-color:#2A46FC;stop-opacity:0.8902"/>
 55 | 	</linearGradient>
 56 | 	<path class="st4" d="M911.1,1996.9c11.9,11.1,27.8,17.1,44.1,16.5s31.7-7.6,42.8-19.5l429.8-461c11.1-11.9,17.1-27.8,16.5-44.1
 57 | 		c-0.6-16.3-7.6-31.7-19.5-42.8l0,0c-11.9-11.1-27.8-17.1-44.1-16.5c-16.3,0.6-31.7,7.6-42.8,19.5l-429.8,461
 58 | 		c-11.1,11.9-17.1,27.8-16.5,44.1C892.1,1970.4,899.2,1985.8,911.1,1996.9z"/>
 59 | 	
 60 | 		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="9162.0254" y1="1206.854" x2="9160.9785" y2="1206.7949" gradientTransform="matrix(-301.8381 335.2252 -77.2871 -69.5896 2860197 -2985624.5)">
 61 | 		<stop  offset="0" style="stop-color:#5AA6EE"/>
 62 | 		<stop  offset="1" style="stop-color:#1FF647"/>
 63 | 	</linearGradient>
 64 | 	<path class="st5" d="M1787.2,1389.9c-10.2-9.2-23.7-14-37.5-13.3s-26.7,6.9-35.9,17.1l-232.2,257.9c-9.2,10.2-14,23.7-13.3,37.5
 65 | 		s6.9,26.7,17.1,35.9l0,0c10.2,9.2,23.7,14,37.5,13.3s26.7-6.9,35.9-17.1l232.2-257.9c9.2-10.2,14-23.7,13.3-37.5
 66 | 		S1797.4,1399.1,1787.2,1389.9z"/>
 67 | 	
 68 | 		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="9162.3516" y1="1217.2643" x2="9161.3057" y2="1217.2053" gradientTransform="matrix(-265.0359 294.3522 -70.5988 -63.5674 2515199.75 -2617469.25)">
 69 | 		<stop  offset="0" style="stop-color:#5AA6EE"/>
 70 | 		<stop  offset="1" style="stop-color:#32F435;stop-opacity:0.9412"/>
 71 | 	</linearGradient>
 72 | 	<path class="st6" d="M1184.8,1810.1c-9.4-8.4-21.7-12.8-34.3-12.1c-12.6,0.7-24.4,6.3-32.8,15.7l-201.5,223.8
 73 | 		c-8.4,9.4-12.8,21.7-12.1,34.3c0.7,12.6,6.3,24.4,15.7,32.8l0,0c9.4,8.4,21.7,12.8,34.3,12.1c12.6-0.7,24.4-6.3,32.8-15.7
 74 | 		l201.5-223.8c8.4-9.4,12.8-21.7,12.1-34.3C1199.8,1830.3,1194.2,1818.5,1184.8,1810.1z"/>
 75 | 	<path class="st7" d="M2186.5,381c-30.1,0-54.5,24.4-54.5,54.5c0,30.1,24.4,54.5,54.5,54.5c30.1,0,54.5-24.4,54.5-54.5
 76 | 		S2216.6,381,2186.5,381z"/>
 77 | 	
 78 | 		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="9161.4277" y1="1191.8051" x2="9160.3877" y2="1191.8051" gradientTransform="matrix(-568.3209 588.5135 -86.3208 -83.359 5309938.5 -5290200)">
 79 | 		<stop  offset="0" style="stop-color:#F04071"/>
 80 | 		<stop  offset="1" style="stop-color:#FE642A"/>
 81 | 	</linearGradient>
 82 | 	<path class="st8" d="M998.6,1487.5c-11.4-11.1-26.8-17.1-42.7-16.8c-15.9,0.3-31.1,6.9-42.1,18.3l-485,502.2
 83 | 		c-11.1,11.4-17.1,26.8-16.8,42.7c0.3,15.9,6.9,31.1,18.3,42.1l0,0c11.4,11.1,26.8,17.1,42.7,16.8c15.9-0.3,31.1-6.9,42.1-18.3
 84 | 		l485-502.2c11.1-11.4,17.1-26.8,16.8-42.7C1016.6,1513.7,1010,1498.6,998.6,1487.5z"/>
 85 | 	
 86 | 		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="9161.0439" y1="1210.7959" x2="9160.0049" y2="1210.7959" gradientTransform="matrix(-397.8856 474.1815 -77.1254 -64.7159 3740435.75 -4264873)">
 87 | 		<stop  offset="0" style="stop-color:#F36C12"/>
 88 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 89 | 	</linearGradient>
 90 | 	<path class="st9" d="M2403.1,292.3c-21.3-17.9-53.1-15.1-70.9,6.2L1999,695.6c-17.9,21.3-15.1,53.1,6.2,70.9l0,0
 91 | 		c21.3,17.9,53.1,15.1,70.9-6.2l333.2-397C2427.1,342,2424.3,310.2,2403.1,292.3z"/>
 92 | 	<path class="st10" d="M2097.5,196c-20.2,0-36.5,16.3-36.5,36.5s16.3,36.5,36.5,36.5s36.5-16.3,36.5-36.5
 93 | 		C2134,212.4,2117.7,196,2097.5,196z"/>
 94 | 	
 95 | 		<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="9160.7373" y1="1019.5028" x2="9159.6973" y2="1019.5028" gradientTransform="matrix(238.5124 -294.5383 126.2862 102.2646 -2311698.25 2594110.25)">
 96 | 		<stop  offset="0" style="stop-color:#F16310"/>
 97 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 98 | 	</linearGradient>
 99 | 	<path class="st11" d="M1761.9,475.8c16.7,13.6,38.2,19.9,59.6,17.7c21.4-2.2,41.1-12.9,54.7-29.7l136.2-168.3
100 | 		c13.6-16.7,19.9-38.2,17.7-59.6s-12.9-41.1-29.7-54.7l0,0c-16.7-13.6-38.2-19.9-59.6-17.7c-21.4,2.2-41.1,12.9-54.7,29.7
101 | 		l-136.2,168.3c-13.6,16.7-19.9,38.2-17.7,59.6C1734.5,442.6,1745.2,462.3,1761.9,475.8z"/>
102 | </g>
103 | </svg>
104 | 


--------------------------------------------------------------------------------
/src/views/home/assets/bb3s.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 3886.2 2173.2" style="enable-background:new 0 0 3886.2 2173.2;" xml:space="preserve">
  5 | <style type="text/css">
  6 | 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
  7 | 	.st1{opacity:0.93;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);enable-background:new    ;}
  8 | 	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_3_);}
  9 | 	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_4_);}
 10 | 	.st4{opacity:0.9;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_5_);enable-background:new    ;}
 11 | 	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_6_);}
 12 | 	.st6{opacity:0.88;fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_7_);enable-background:new    ;}
 13 | 	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#EB1F5D;}
 14 | 	.st8{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_8_);}
 15 | 	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_9_);}
 16 | 	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#313EF2;}
 17 | 	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_10_);}
 18 | </style>
 19 | <g transform="translate(86.3207297124427 94.34741210937503)  rotate(0 1380.3778578739305 1201.8497314453125)">
 20 | 	
 21 | 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="10734.707" y1="65.8055" x2="10733.6914" y2="65.7296" gradientTransform="matrix(-444.9719 494.1913 104.7834 94.3474 4772501.5 -5310718.5)">
 22 | 		<stop  offset="0" style="stop-color:#5BA8E8"/>
 23 | 		<stop  offset="1" style="stop-color:#32EE71"/>
 24 | 	</linearGradient>
 25 | 	<path class="st0" d="M3206.8-22.3c-13.9-12.5-32.2-19-50.9-18s-36.2,9.3-48.7,23.2l-350.6,389.4c-12.5,13.9-19,32.2-18,50.9
 26 | 		c1,18.7,9.3,36.2,23.2,48.7l0,0c13.9,12.5,32.2,19,50.9,18s36.2-9.3,48.7-23.2L3212,77.3c12.5-13.9,19-32.2,18-50.9
 27 | 		S3220.7-9.8,3206.8-22.3z"/>
 28 | 	
 29 | 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="10729.4072" y1="305.8525" x2="10728.3672" y2="305.8525" gradientTransform="matrix(303.7619 -349.4381 -69.4182 -60.3443 -3235230.75 3768019.5)">
 30 | 		<stop  offset="0" style="stop-color:#73019C;stop-opacity:0.9098"/>
 31 | 		<stop  offset="1" style="stop-color:#2A46FC"/>
 32 | 	</linearGradient>
 33 | 	<path class="st1" d="M2418.9,648.6c19.2,16.7,48.2,14.6,64.9-4.5l243.4-280c16.7-19.2,14.6-48.2-4.5-64.9l0,0
 34 | 		c-19.2-16.7-48.2-14.6-64.9,4.5l-243.4,280C2397.7,602.9,2399.7,631.9,2418.9,648.6z"/>
 35 | 	
 36 | 		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="10730.5391" y1="242.8202" x2="10729.499" y2="242.8202" gradientTransform="matrix(238.5124 -294.5383 -126.2862 -102.2646 -2526386.25 3186951)">
 37 | 		<stop  offset="0" style="stop-color:#F16310"/>
 38 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 39 | 	</linearGradient>
 40 | 	<path class="st2" d="M2077,1859.2c16.7,13.6,38.2,19.9,59.6,17.7c21.4-2.2,41.1-12.9,54.7-29.7l136.2-168.3
 41 | 		c13.6-16.7,19.9-38.2,17.7-59.6s-12.9-41.1-29.7-54.7l0,0c-16.7-13.6-38.2-19.9-59.6-17.7c-21.4,2.2-41.1,12.9-54.7,29.7
 42 | 		L2065,1744.9c-13.6,16.7-19.9,38.2-17.7,59.6C2049.6,1826,2060.2,1845.6,2077,1859.2z"/>
 43 | 	
 44 | 		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="10731.1563" y1="255.3239" x2="10730.1162" y2="255.3239" gradientTransform="matrix(501.9272 -598.1735 -108.0123 -90.6331 -5356346.5 6443927)">
 45 | 		<stop  offset="0" style="stop-color:#F04071"/>
 46 | 		<stop  offset="1" style="stop-color:#FE642A"/>
 47 | 	</linearGradient>
 48 | 	<path class="st3" d="M1832.7,2290.8c14.3,12,32.8,17.9,51.5,16.2s35.8-10.6,47.9-24.9l411.3-490.2c12-14.3,17.9-32.8,16.2-51.5
 49 | 		c-1.6-18.6-10.6-35.8-24.9-47.9l0,0c-14.3-12-32.8-17.9-51.5-16.2c-18.6,1.6-35.8,10.6-47.9,24.9L1824,2191.4
 50 | 		c-12,14.3-17.9,32.8-16.2,51.5C1809.4,2261.6,1818.4,2278.8,1832.7,2290.8z"/>
 51 | 	
 52 | 		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="10730.1836" y1="268.7147" x2="10729.1436" y2="268.7147" gradientTransform="matrix(513.7358 -550.9141 -89.9565 -83.8858 -5486882 5935397)">
 53 | 		<stop  offset="0" style="stop-color:#73019C"/>
 54 | 		<stop  offset="1" style="stop-color:#2A46FC;stop-opacity:0.8902"/>
 55 | 	</linearGradient>
 56 | 	<path class="st4" d="M911.1,1996.9c11.9,11.1,27.8,17.1,44.1,16.5s31.7-7.6,42.8-19.5l429.8-461c11.1-11.9,17.1-27.8,16.5-44.1
 57 | 		c-0.6-16.3-7.6-31.7-19.5-42.8l0,0c-11.9-11.1-27.8-17.1-44.1-16.5c-16.3,0.6-31.7,7.6-42.8,19.5l-429.8,461
 58 | 		c-11.1,11.9-17.1,27.8-16.5,44.1C892.1,1970.4,899.2,1985.8,911.1,1996.9z"/>
 59 | 	
 60 | 		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="10735.4063" y1="31.5367" x2="10734.3594" y2="31.5958" gradientTransform="matrix(-301.8381 335.2252 77.2871 69.5896 3239391.5 -3599240.5)">
 61 | 		<stop  offset="0" style="stop-color:#5AA6EE"/>
 62 | 		<stop  offset="1" style="stop-color:#1FF647"/>
 63 | 	</linearGradient>
 64 | 	<path class="st5" d="M1787.2,1389.9c-10.2-9.2-23.7-14-37.5-13.3s-26.7,6.9-35.9,17.1l-232.2,257.9c-9.2,10.2-14,23.7-13.3,37.5
 65 | 		s6.9,26.7,17.1,35.9l0,0c10.2,9.2,23.7,14,37.5,13.3s26.7-6.9,35.9-17.1l232.2-257.9c9.2-10.2,14-23.7,13.3-37.5
 66 | 		S1797.4,1399.1,1787.2,1389.9z"/>
 67 | 	
 68 | 		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="10735.8301" y1="19.3526" x2="10734.7842" y2="19.4115" gradientTransform="matrix(-265.0359 294.3522 70.5988 63.5674 2844924.25 -3159234.5)">
 69 | 		<stop  offset="0" style="stop-color:#5AA6EE"/>
 70 | 		<stop  offset="1" style="stop-color:#32F435;stop-opacity:0.9412"/>
 71 | 	</linearGradient>
 72 | 	<path class="st6" d="M1184.8,1810.1c-9.4-8.4-21.7-12.8-34.3-12.1c-12.6,0.7-24.4,6.3-32.8,15.7l-201.5,223.8
 73 | 		c-8.4,9.4-12.8,21.7-12.1,34.3s6.3,24.4,15.7,32.8l0,0c9.4,8.4,21.7,12.8,34.3,12.1s24.4-6.3,32.8-15.7l201.5-223.8
 74 | 		c8.4-9.4,12.8-21.7,12.1-34.3C1199.8,1830.3,1194.2,1818.5,1184.8,1810.1z"/>
 75 | 	<path class="st7" d="M2186.5,381c-30.1,0-54.5,24.4-54.5,54.5s24.4,54.5,54.5,54.5s54.5-24.4,54.5-54.5S2216.6,381,2186.5,381z"/>
 76 | 	
 77 | 		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="10734.5762" y1="49.1866" x2="10733.5361" y2="49.1866" gradientTransform="matrix(-568.3209 588.5135 86.3208 83.359 6096868.5 -6319467)">
 78 | 		<stop  offset="0" style="stop-color:#F04071"/>
 79 | 		<stop  offset="1" style="stop-color:#FE642A"/>
 80 | 	</linearGradient>
 81 | 	<path class="st8" d="M998.6,1487.5c-11.4-11.1-26.8-17.1-42.7-16.8c-15.9,0.3-31.1,6.9-42.1,18.3l-485,502.2
 82 | 		c-11.1,11.4-17.1,26.8-16.8,42.7c0.3,15.9,6.9,31.1,18.3,42.1l0,0c11.4,11.1,26.8,17.1,42.7,16.8c15.9-0.3,31.1-6.9,42.1-18.3
 83 | 		l485-502.2c11.1-11.4,17.1-26.8,16.8-42.7C1016.6,1513.7,1010,1498.6,998.6,1487.5z"/>
 84 | 	
 85 | 		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="10734.124" y1="26.8783" x2="10733.085" y2="26.8783" gradientTransform="matrix(-397.8856 474.1815 77.1254 64.7159 4270885.5 -5090896)">
 86 | 		<stop  offset="0" style="stop-color:#F36C12"/>
 87 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 88 | 	</linearGradient>
 89 | 	<path class="st9" d="M2403.1,292.3c-21.3-17.9-53.1-15.1-70.9,6.2L1999,695.6c-17.9,21.3-15.1,53.1,6.2,70.9l0,0
 90 | 		c21.3,17.9,53.1,15.1,70.9-6.2l333.2-397C2427.1,342,2424.3,310.2,2403.1,292.3z"/>
 91 | 	<path class="st10" d="M2097.5,196c-20.2,0-36.5,16.3-36.5,36.5s16.3,36.5,36.5,36.5s36.5-16.3,36.5-36.5
 92 | 		C2134,212.4,2117.7,196,2097.5,196z"/>
 93 | 	
 94 | 		<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="10732.8525" y1="249.6847" x2="10731.8125" y2="249.6847" gradientTransform="matrix(238.5124 -294.5383 -126.2862 -102.2646 -2526386.25 3186951)">
 95 | 		<stop  offset="0" style="stop-color:#F16310"/>
 96 | 		<stop  offset="1" style="stop-color:#FCDF43"/>
 97 | 	</linearGradient>
 98 | 	<path class="st11" d="M1761.9,475.8c16.7,13.6,38.2,19.9,59.6,17.7c21.4-2.2,41.1-12.9,54.7-29.7l136.2-168.3
 99 | 		c13.6-16.7,19.9-38.2,17.7-59.6s-12.9-41.1-29.7-54.7l0,0c-16.7-13.6-38.2-19.9-59.6-17.7s-41.1,12.9-54.7,29.7l-136.2,168.3
100 | 		c-13.6,16.7-19.9,38.2-17.7,59.6C1734.5,442.6,1745.2,462.3,1761.9,475.8z"/>
101 | </g>
102 | </svg>
103 | 


--------------------------------------------------------------------------------
/src/views/home/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/bg.png


--------------------------------------------------------------------------------
/src/views/home/assets/clinic.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1731.33 1072.54" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1,.cls-12,.cls-13,.cls-14,.cls-24,.cls-3,.cls-30,.cls-5{fill:none;}.cls-2{fill:#edf3ff;}.cls-12,.cls-13,.cls-15,.cls-17,.cls-3,.cls-5{stroke:#016efc;}.cls-14,.cls-17,.cls-3,.cls-5{stroke-miterlimit:10;}.cls-13,.cls-14,.cls-15,.cls-24,.cls-3,.cls-5{stroke-width:1.77px;}.cls-3{opacity:0.25;isolation:isolate;}.cls-4{fill:#c6ddff;}.cls-17,.cls-6{fill:#8dbffc;}.cls-15,.cls-7{fill:#fff;}.cls-8{fill:#007bff;}.cls-9{fill:#ff5925;}.cls-10{fill:#6aacef;}.cls-11{fill:#e72822;}.cls-12,.cls-13,.cls-15,.cls-24,.cls-30{stroke-linecap:round;stroke-linejoin:round;}.cls-12,.cls-30{stroke-width:2.38px;}.cls-14,.cls-30{stroke:#fff;}.cls-16{fill:#d32502;}.cls-17{stroke-width:1.16px;}.cls-18{fill:#f38171;}.cls-19{fill:#fac897;}.cls-20{fill:#f29d59;}.cls-21{fill:#013bff;}.cls-22{fill:#5b2f2e;}.cls-23{fill:#2b0d0d;}.cls-24{stroke:#035c8e;}.cls-25{fill:#c7ddff;}.cls-26{fill:#dcecff;}.cls-27{fill:#5d9fff;}.cls-28{fill:#fcbc29;}.cls-29{fill:#ccd5dd;}</style></defs><g id="图层_2"><g id="图层_1-2"><g id="图层_2-2"><g id="图层_1-2-2"><rect height="1072.49" width="1731.33" class="cls-1"></rect><path d="M81.39,906.72s32-367.91,333.49-432.71c107.56-23.18,206-84.68,279.86-176.94,10.07-12.63,20.26-26,30.51-40.27C827.81,112.14,999.8,56.86,1152,122.58a394.75,394.75,0,0,1,140.32,102C1347.63,287,1383.5,368.34,1396.07,456c12.21,85.42,43.2,229.17,114.58,267.36a107.57,107.57,0,0,1,20.2,13.61c26,22.33,79.31,80.6,61.38,171.63Z" class="cls-2"></path><path d="M884.67,694.94h203" class="cls-3"></path><path d="M608.35,723.74H1016.7" class="cls-3"></path><path d="M738.61,752.6H978.87" class="cls-3"></path><path d="M826.77,666h152.1" class="cls-3"></path><path d="M826.77,815.38h152.1" class="cls-3"></path><path d="M890.77,784.2H1131" class="cls-3"></path><path d="M898.77,728.25V748" class="cls-3"></path><path d="M834.76,728.25V748" class="cls-3"></path><path d="M898.77,790.49V810.2" class="cls-3"></path><path d="M964,790.49V810.2" class="cls-3"></path><path d="M898.77,671.15v19.76" class="cls-3"></path><path d="M964,728.25V748" class="cls-3"></path><path d="M964,670.54V690.3" class="cls-3"></path><path d="M930.43,699.39v19.77" class="cls-3"></path><path d="M997.6,699.39v19.77" class="cls-3"></path><path d="M1005.78,170h203" class="cls-3"></path><path d="M976.19,198.9h162" class="cls-3"></path><path d="M930.43,227.7h217.75" class="cls-3"></path><path d="M948.12,141.06h152.11" class="cls-3"></path><path d="M1020.06,203.48v19.65" class="cls-3"></path><path d="M956.06,203.48v19.65" class="cls-3"></path><path d="M1020.06,146v19.77" class="cls-3"></path><path d="M1085.46,203.48v19.65" class="cls-3"></path><path d="M1085.46,145.7v19.71" class="cls-3"></path><path d="M1051.72,174.62v19.65" class="cls-3"></path><path d="M1119,174.62v19.65" class="cls-3"></path><path d="M276.08,841H451.49" class="cls-3"></path><path d="M113.73,869.87H408.35" class="cls-3"></path><path d="M218.36,812.09h152.1" class="cls-3"></path><path d="M290.29,817v19.71" class="cls-3"></path><path d="M355.76,816.66v19.77" class="cls-3"></path><path d="M322,845.64v19.65" class="cls-3"></path><path d="M389.13,845.64v19.65" class="cls-3"></path><path d="M997.6,758.33V778" class="cls-3"></path><path d="M1063.19,758.33V778" class="cls-3"></path><path d="M930.43,758.33V778" class="cls-3"></path><path d="M865.64,758.33V778" class="cls-3"></path><path d="M1590.46,907.27s388.28,39-274.19,97.07c0,0-55.4,4,20.8,21.11,74.2,16.53-39,24-46.55,24.41-206.46,10.61-981.13,46.67-1084-2.63,0,0-67.12-24.4,63.81-32.64,87.92-5.55,5.37-9.64,0-10.07-100.48-9-272.84-34.41-190.48-98.9Z" class="cls-4"></path><path d="M54.91,906.35H1677.4" class="cls-5"></path><path d="M1205.78,989.7c93.28,0,168.88-6.53,168.88-14.65s-75.6-14.58-168.88-14.58S1037.2,967,1037.2,975.05,1112.49,989.7,1205.78,989.7Z" class="cls-6"></path><path d="M466.13,979.69c80.6,0,146-6.53,146-14.58s-65.4-14.58-146-14.58-146,6.52-146,14.58S385.53,979.69,466.13,979.69Z" class="cls-6"></path><path d="M734.46,989.15c132,0,239-10.44,239-23.31s-107-23.25-239-23.25-239,10.44-239,23.25S602.43,989.15,734.46,989.15Z" class="cls-6"></path><path d="M639.83,476.21h-63v69h63Z" class="cls-6"></path><path d="M738.24,342.22H478.82v157H738.24Z" class="cls-4"></path><path d="M713.35,484.32H503.47A11.35,11.35,0,0,1,493,472.18V369.31a11.33,11.33,0,0,1,10.43-12.19H713.35a11.29,11.29,0,0,1,10.44,12.07.53.53,0,0,1,0,.13V472.36A11.27,11.27,0,0,1,713.35,484.32Z" class="cls-7"></path><path d="M566.92,379.08H513.17v61.44h53.75Z" class="cls-8"></path><path d="M533.91,402.69a6.11,6.11,0,0,1,12.21,0,6.54,6.54,0,0,1-6,7H540A6.64,6.64,0,0,1,533.91,402.69Zm16.29,12.2a14.37,14.37,0,0,0-5.49-4,9.9,9.9,0,0,0,3.66-7.87,8.42,8.42,0,1,0-16.71-2,8.53,8.53,0,0,0,0,2,9.93,9.93,0,0,0,3.66,7.87,13.59,13.59,0,0,0-5.49,4,17.64,17.64,0,0,0-4.21,11.65h2.32a12.2,12.2,0,1,1,24.4,0h2.26A18.28,18.28,0,0,0,550.2,414.89Z" class="cls-7"></path><path d="M566.92,448.45H513.17v12.93h53.75Z" class="cls-9"></path><path d="M589.25,382.61h50.58" class="cls-5"></path><path d="M589.25,393.6H703.59" class="cls-5"></path><path d="M589.25,404.46H703.59" class="cls-5"></path><path d="M589.25,415.44H703.59" class="cls-5"></path><path d="M589.25,426.3H703.59" class="cls-5"></path><path d="M589.25,437.22H703.59" class="cls-5"></path><path d="M589.25,448.08H703.59" class="cls-5"></path><path d="M589.25,459.06h93.41" class="cls-5"></path><path d="M680.71,594.76H794V901.17L680.71,816.54Z" class="cls-10"></path><path d="M794,901.17v63.27H680.71V816.54Z" class="cls-6"></path><path d="M831.29,947.11H635.62v21H831.29Z" class="cls-4"></path><path d="M608.35,532.89H447.83v12.2H608.35Z" class="cls-6"></path><path d="M416.89,594.76h635.2V562.12H416.89Z" class="cls-6"></path><path d="M400.91,562.05h667.22V540.7H400.91Z" class="cls-4"></path><path d="M1004.8,258A18.29,18.29,0,0,0,975,265.47l-1,2.32a31.22,31.22,0,0,0-2.62,15.31,1,1,0,0,1-1.89.79,25.86,25.86,0,0,0-10.68-9.76l-2.07-1c-11.72-5.49-23.86,1.77-27.09,16.23s3.84,30.5,15.55,35.75l43.26,19.1a1.47,1.47,0,0,0,1.89-.8L1012.8,297A33.72,33.72,0,0,0,1004.8,258Z" class="cls-11"></path><path d="M842,540.33H764.48a18.31,18.31,0,0,1,16.9-19.28h43.87A18.3,18.3,0,0,1,842,540.33Z" class="cls-6"></path><path d="M818.05,487.68H788.52v33.8h29.53Z" class="cls-4"></path><path d="M826.77,328.62h-12.2a12.2,12.2,0,0,0-11.29,13.05h0V486.52" class="cls-12"></path><path d="M865.76,326.48H821.59a25.14,25.14,0,0,0,2,9.64h40.14A22.73,22.73,0,0,0,865.76,326.48Z" class="cls-6"></path><path d="M823.66,336.12A18.31,18.31,0,0,0,840,347.78h7.44a18.3,18.3,0,0,0,16.29-11.41Z" class="cls-7"></path><path d="M1035.13,494.82,898.46,516.66v23.8h136.67" class="cls-4"></path><path d="M1035.25,494.82,898.58,516.66v23.8h136.67" class="cls-13"></path><path d="M902.43,521.48,1031.1,504.4" class="cls-14"></path><path d="M902.43,526.18l128.12-11.41" class="cls-14"></path><path d="M902.43,530.82l128.12-5.74" class="cls-14"></path><path d="M902.43,534.66h128.12" class="cls-14"></path><path d="M893.76,467.54h138l2.87,23.56-135.2,21.41" class="cls-4"></path><path d="M894.07,467.54H1032l2.93,23.56L899.56,512.51" class="cls-13"></path><path d="M1028.35,472.79l-129.28,3.48" class="cls-14"></path><path d="M1028.9,477.49l-128.12,9" class="cls-14"></path><path d="M1029.45,482,902.06,496.59" class="cls-14"></path><path d="M1029.94,485.85,903.4,506.41" class="cls-14"></path><path d="M735.74,0h-163V230.45h163Z" class="cls-6"></path><path d="M723.91,16.66H584.55V213.55H723.91Z" class="cls-7"></path><path d="M517.69,18.67h-136V210.92h136Z" class="cls-15"></path><path d="M368,961.45l-8.36-2.81,60.47-259.43,8.36,2.81Z" class="cls-16"></path><path d="M562.77,961.45l8.36-2.81L510.67,699.21,502.31,702Z" class="cls-16"></path><path d="M564.42,707.33h-188a10.08,10.08,0,0,1-9-9.34L330,423.43a11.1,11.1,0,0,1,7.51-12.81A9.41,9.41,0,0,1,347.74,419l0,.43,36.6,265.46H564.3A10.32,10.32,0,0,1,573.45,696,10.43,10.43,0,0,1,564.42,707.33Z" class="cls-9"></path><path d="M271.62,702.14H137.4V890.79H271.62Z" class="cls-4"></path><path d="M277.66,889.94H131.24v16.6H277.66Z" class="cls-10"></path><path d="M277.66,889.94H131.24v16.6H277.66Z" class="cls-6"></path><path d="M271.62,694.27H137.4c0-30.51,21.47-54.91,48.08-54.91h38.31C250.15,639.3,271.62,663.89,271.62,694.27Z" class="cls-4"></path><path d="M185.78,639.3h0v54.91h37.71V639.3Z" class="cls-6"></path><path d="M229.59,885.12H177.67v11.77h51.92Z" class="cls-17"></path><path d="M653.93,59a7.93,7.93,0,0,0,7.38-8.42,7.45,7.45,0,0,0-14.77-1.9,7.55,7.55,0,0,0,0,1.9A7.94,7.94,0,0,0,653.93,59Z" class="cls-4"></path><path d="M653.93,149.06a20.81,20.81,0,0,1-19.41-22.12V84.81a19.53,19.53,0,1,1,38.75-4.87,19.84,19.84,0,0,1,0,4.87v42.1A20.94,20.94,0,0,1,653.93,149.06Z" class="cls-4"></path><path d="M665.82,191.89a8.11,8.11,0,0,1-7.45-8.73s0-.08,0-.12V128.13a7.57,7.57,0,1,1,15-2.35,7.72,7.72,0,0,1,0,2.35V183a8.12,8.12,0,0,1-7.33,8.83Z" class="cls-4"></path><path d="M642,191.89a8.12,8.12,0,0,1-7.52-8.67c0-.06,0-.12,0-.18V128.13a7.57,7.57,0,1,1,15-2.35,7.72,7.72,0,0,1,0,2.35V183A8.3,8.3,0,0,1,642,191.89Z" class="cls-4"></path><path d="M680.65,128.13a4.16,4.16,0,0,1-3.85-4.4V79.32a4.16,4.16,0,0,1,3.85-4.4,4.22,4.22,0,0,1,3.84,4.4v44.41A4.15,4.15,0,0,1,680.65,128.13Z" class="cls-4"></path><path d="M627.38,128.13a4.16,4.16,0,0,1-3.84-4.4V79.32a4.16,4.16,0,0,1,3.84-4.4,4.22,4.22,0,0,1,3.85,4.4v44.41A4.16,4.16,0,0,1,627.38,128.13Z" class="cls-4"></path><path d="M680.65,117.39a2.56,2.56,0,1,0-2.14-2.14A2.57,2.57,0,0,0,680.65,117.39Z" class="cls-18"></path><path d="M680.65,88.1A2.56,2.56,0,1,0,678.51,86,2.56,2.56,0,0,0,680.65,88.1Z" class="cls-18"></path><path d="M642,166a2.33,2.33,0,0,0,2.2-2.43.22.22,0,0,0,0-.08,2.2,2.2,0,0,0-4.39,0A2.32,2.32,0,0,0,642,166Z" class="cls-18"></path><path d="M665.82,166a2.39,2.39,0,0,0,2.26-2.5h0a2.44,2.44,0,0,0-2.26-2.56,2.39,2.39,0,0,0-2.2,2.55h0a2.31,2.31,0,0,0,2.12,2.5Z" class="cls-18"></path><path d="M627.38,117.39a2.56,2.56,0,1,0-2.13-2.14A2.57,2.57,0,0,0,627.38,117.39Z" class="cls-18"></path><path d="M627.38,88.1A2.56,2.56,0,1,0,625.25,86,2.55,2.55,0,0,0,627.38,88.1Z" class="cls-18"></path><path d="M468,39.29H431.35V81H468Z" class="cls-4"></path><path d="M498.77,101H400.66a1.89,1.89,0,0,1-1.7-2,1.77,1.77,0,0,1,1.7-1.83h98.17A1.84,1.84,0,0,1,500.6,99,2.07,2.07,0,0,1,498.77,101Z" class="cls-8"></path><path d="M498.77,117.82H400.66a1.83,1.83,0,0,1-1.7-1.95h0A1.75,1.75,0,0,1,400.6,114h98.23a1.83,1.83,0,0,1,1.77,1.89h0A2,2,0,0,1,498.77,117.82Z" class="cls-8"></path><path d="M498.77,134.6H400.66a1.83,1.83,0,0,1-1.7-1.95h0a1.77,1.77,0,0,1,1.64-1.89h98.23a1.83,1.83,0,0,1,1.77,1.89h0A2,2,0,0,1,498.77,134.6Z" class="cls-8"></path><path d="M498.77,151.5H400.66a2,2,0,0,1,0-3.85h98.17a1.84,1.84,0,0,1,1.78,1.89.13.13,0,0,0,0,.06A2,2,0,0,1,498.77,151.5Z" class="cls-8"></path><path d="M498.77,168.27H400.66a2,2,0,0,1,0-3.84h98.17a1.84,1.84,0,0,1,1.78,1.89.13.13,0,0,0,0,.06A2,2,0,0,1,498.77,168.27Z" class="cls-8"></path><path d="M498.77,185.05H400.66a2,2,0,0,1,0-3.84h98.17a1.84,1.84,0,0,1,1.78,1.89.13.13,0,0,0,0,.06A2,2,0,0,1,498.77,185.05Z" class="cls-8"></path><path d="M1448.6,207.45c36.61,0,67.12-34.23,67.12-76.45s-30-76.45-67.12-76.45-67.11,34.22-67.11,76.45S1411.63,207.45,1448.6,207.45Z" class="cls-6"></path><path d="M1448.6,198.35c32.65,0,59.12-30.5,59.12-67.6s-26.47-67.54-59.12-67.54-59.12,30.51-59.12,67.54S1416,198.35,1448.6,198.35Z" class="cls-2"></path><path d="M1448.6,92v38.92h25.2" class="cls-5"></path><path d="M1048.79,378.59l-7-4.76a.38.38,0,0,1-.37-.31L1018.9,351h0a3.09,3.09,0,0,0-2-.92H1006.7a3.78,3.78,0,0,0,0,7.51h6.77a3.09,3.09,0,0,1-.37,1c-2,2.51-6.71,5.07-4.7,5.37a158.93,158.93,0,0,1-44.84-5.37,2.88,2.88,0,0,0-2.88,2.86,3.16,3.16,0,0,0,.13.87c1.84,8.78,11.78,30.5,79.32,36.6a2.67,2.67,0,0,0,2.56-1.52l7.45-13.91a3.49,3.49,0,0,0-1.17-4.78Z" class="cls-19"></path><path d="M1020.91,368.46a4.95,4.95,0,0,0-1.77-9.34c-2,0-4.15-.67-6.1-.85a2.58,2.58,0,0,1-2.26,1.28l-47.22-1.28a2.79,2.79,0,0,0-2.32,1.28C980.46,365.71,1001.08,377.49,1020.91,368.46Z" class="cls-20"></path><path d="M1166.79,944.67a34.21,34.21,0,0,0,26.72-31.24H1221a29.43,29.43,0,0,0-1,10.19,43.81,43.81,0,0,0,6.84,22.15,22.16,22.16,0,0,1,3.23,10.55h-84.38C1151.54,946.86,1166.79,944.67,1166.79,944.67Z" class="cls-21"></path><path d="M1230.06,956.44a30.28,30.28,0,0,1-1,10.07h-85.41a15,15,0,0,1,2.07-10.07Z" class="cls-7"></path><path d="M1230.61,552.23V919.9H1209l-21.72-367.67Z" class="cls-21"></path><path d="M1181.68,552.23h5.55l32.09,367.67h-39L1152,596.53l-3.85-44.6Z" class="cls-8"></path><path d="M1226.34,960.59A34.17,34.17,0,0,0,1253,929.35h27.46a32.74,32.74,0,0,0-1,10.19,44.62,44.62,0,0,0,6.83,22.15,24.34,24.34,0,0,1,3.3,11h-84.38C1210.78,962.79,1226.34,960.59,1226.34,960.59Z" class="cls-21"></path><path d="M1289.79,972.67a31.3,31.3,0,0,1-1.1,9.77h-85.41a14.91,14.91,0,0,1,2-9.77Z" class="cls-7"></path><path d="M1285.34,552.23l.3,53.39,2.08,328.43h-50.28l-27.27-322.94-4.94-58.88Z" class="cls-8"></path><path d="M1170.63,126.05a35.83,35.83,0,0,1,5-13.6c5.31-8.12,16-19,33.31-9.89a41.39,41.39,0,0,1,11.59,9.34,51.4,51.4,0,0,0,20.87,15,31.2,31.2,0,0,1,7.87,4.15c12.81,9.45,56.62,43.68,31.24,112.26a37,37,0,0,1-33.93,25.87c-2.68,0-5.3-4-8.11-4.82-4.76-20.32,2.62-29.53-.37-47.41-6.89-33.92-27.76-46.12-51.06-63.51a29.92,29.92,0,0,0-.55-9.76s-7.14-3.05-11.72,14.7C1174.78,158.27,1166.73,151.5,1170.63,126.05Z" class="cls-22"></path><path d="M1176.43,190.12a168.77,168.77,0,0,0,7.75-21.85c12.57,3.48,14.76,27.77,12.2,39.72-3.54,16.78,4.15,34-13.79,54.43a27.37,27.37,0,0,1-8.36-5.49C1164.41,247.47,1159.23,228.37,1176.43,190.12Z" class="cls-22"></path><path d="M1188.57,206.1a53.36,53.36,0,0,0-4.39-37.7,89.53,89.53,0,0,0,2.81-15c23.3,17.33,56.68,27.21,63.51,61a68.82,68.82,0,0,1-12.2,50.15,25.13,25.13,0,0,1-13.91-12.2,112.07,112.07,0,0,0-18.92,8.54,25.14,25.14,0,0,1-23,2.08C1179.48,245.15,1185,222.88,1188.57,206.1Z" class="cls-23"></path><path d="M1253.18,271.94s-23.12-4-23.3-39.91c-10.86-23.91-31-11.77-34.54,12.21a116.75,116.75,0,0,1-1.77,36.3s5,50.64,25.08,60.4C1218.65,340.7,1260.87,300.55,1253.18,271.94Z" class="cls-19"></path><path d="M1229.88,233.86a133,133,0,0,1,1.4-19.22,74.52,74.52,0,0,0-39,14.28,73.91,73.91,0,0,1,3.18,15.07C1206.08,268.89,1217.67,237.28,1229.88,233.86Z" class="cls-20"></path><path d="M1174.91,150.82s-3.6,73.22,25.38,85.91a9.61,9.61,0,0,0,6.1.55c6.1-1.52,21.23-7.44,28.49-31.6a21.62,21.62,0,0,0,11.71-9c2.87-6.1-.79-13.3-6.52-12.88a12.22,12.22,0,0,0-4.21,1.35,59.22,59.22,0,0,0-.86-11.29,12.51,12.51,0,0,0-7.93-9.15c-8.36-2.87-28.13-10.74-34-22.82a8.72,8.72,0,0,0-10.19-5.8C1179.12,136.67,1176.25,139.66,1174.91,150.82Z" class="cls-19"></path><path d="M1182,174.62s7.39-3.72,10.25,3.11l2,28.25,8.12-.73" class="cls-24"></path><path d="M1203.4,217.88a14.29,14.29,0,0,0,11-9.76" class="cls-24"></path><path d="M1195.41,266.57s6.1,55.4,41.85-6.59c0,0,62.11,15.68,65.34,99.27h-42.71l-2,225.32s-67.11,12.93-91.09-7.57l4.7-221.48s-26,3.05-38.56-8.35C1132.75,347.17,1158.25,265.1,1195.41,266.57Z" class="cls-8"></path><path d="M1039.46,398.29V370.78s75,15.56,94-32.71a189.28,189.28,0,0,0,6.65-19.52c3.9-13.36,16.29-51.13,55.46-52l5.18,53a242.05,242.05,0,0,1,1.53,27.45l.36,362s-55.58-8.23-81.45-51.92c0,0,41.43-186.76,36.61-262.36l-.49.61c-.3-4.39-.67-6.1-1.16-10.18C1131.59,428,1067.71,428.92,1039.46,398.29Z" class="cls-7"></path><path d="M1307.12,338.5c-12.63-41.24-37.59-65.59-71.69-74.37,1.16-2.63,1.71-4.15,1.71-4.15,21.84,4.15,49.48,24.4,61,37.7a113.16,113.16,0,0,1,21.48,51.25c7.5,43.2.91,73.22-2.93,100.37C1316.27,402.69,1317.86,373.71,1307.12,338.5Z" class="cls-25"></path><path d="M1218.83,306.35c6.59-18.31,13.43-34.72,16.6-42.22a104.26,104.26,0,0,1,74.13,74.37c8.24,31.73,12.2,88.78,4.7,123.74-7.2,26.66-17.39,54.91-17.39,54.91L1319,663.58c-35.76,34.84-107.26,45.64-107.26,45.64l-1.65-351.38A148.81,148.81,0,0,1,1218.83,306.35Z" class="cls-7"></path><path d="M1296.87,516.9,1319,663.34s-37-18.31-81.76-37.4a63.44,63.44,0,0,0,47.41-17l-4.52-57.59-17.57,10-5.74-8.54,25.57-7.69Z" class="cls-25"></path><path d="M1233.72,318.79l19.4-21.53-24.4,14Z" class="cls-26"></path><path d="M1191.07,276.33l-12.2,22.82,15.74,12.2-7.38,12,11.9,70.35" class="cls-5"></path><path d="M1146.66,562.54,1139,607.39a41.25,41.25,0,0,0,40.39,15.43l.91-32.64" class="cls-5"></path><path d="M1253,554.06l-7.87,23.13,27.33-14.65.92-14.7Z" class="cls-19"></path><path d="M1195.83,266.57s-27,16.78-28.37,83.34h-3.17s-3.17-62.66,32-89.2Z" class="cls-27"></path><path d="M1266.91,382.49c6.1-41.79,3.36-109.82-33.8-130.2l2.93,6.1s39.72,27,27.21,122.64a2.65,2.65,0,0,1-1.34,2.07c-12.2,5.74-19.83,28.43-24.41,50.46a2.33,2.33,0,0,0,1.53,2.75l3.29.91a2,2,0,0,0,2.35-1.45.32.32,0,0,0,0-.14,2.19,2.19,0,0,0-1.28-2.8l-1.89-.8c2.32-11,8.54-36.6,17.94-42.7a3.59,3.59,0,0,1,5,.95,3.83,3.83,0,0,1,.37.69,35.17,35.17,0,0,1,1.34,17.33,115,115,0,0,1-2.75,17l-2.8,12.21-1.53-.49a2.09,2.09,0,0,0-2.44,1.63v.81a2.32,2.32,0,0,0,1.34,2.74l3.3,1.22a2.07,2.07,0,0,0,2.54-1.45.25.25,0,0,0,0-.07c2.32-8.91,10.31-41.49,4.82-54.3A19.87,19.87,0,0,1,1266.91,382.49Z" class="cls-27"></path><path d="M1166.42,363.21a9.52,9.52,0,1,0-8.15-10.71,9.13,9.13,0,0,0-.08,1.38A8.83,8.83,0,0,0,1166.42,363.21Z" class="cls-27"></path><path d="M1166.42,358.45a4.76,4.76,0,1,0-4.1-5.33,3.33,3.33,0,0,0,0,.63A4.45,4.45,0,0,0,1166.42,358.45Z" class="cls-7"></path><path d="M1239,268.89l14.15,28.24-24.4,14,7.87,12.2s-19.16,39-21.17,70.35" class="cls-5"></path><path d="M1266.73,702.57c.67,24.4,1.34,49.3,2,73.95,1,39.29,2.2,78.58,3.24,117.93.3,9,.48,18.31.79,27.09a.69.69,0,0,0,.44.85.67.67,0,0,0,.84-.45.68.68,0,0,0,0-.4c-.67-24.4-1.4-49.23-2.07-73.94-1-39.24-2.2-78.53-3.24-117.88,0-9-.49-18.31-.79-27.15a.61.61,0,1,0-1.22,0Z" class="cls-7"></path><path d="M1156,374.19a128.72,128.72,0,0,1,2.2,20.63c-4.82,6.53-52.41,53.75-118.73,3.84v-5.49C1073.81,417,1132.44,414.52,1156,374.19Z" class="cls-25"></path><path d="M1474.72,798.36s3.23-36.61,33.74-52.9a42.74,42.74,0,0,0,21.6-30.51,38.64,38.64,0,0,0,0-14.46,92.6,92.6,0,0,1-3.12-31.91,43,43,0,0,1,8-21.53,63.41,63.41,0,0,0,12.2-33,41.61,41.61,0,0,0-7.69-26,58.58,58.58,0,0,1-9.76-41.37s5.37-43.56-20-47.29c0,0-28.8,2.57-25.14,53.21,0,0,3.91,25-4.94,41.91,0,0-19.1,21.6-7.38,63.09,0,0,8.84,23.12-4.58,39.48C1467.58,696.89,1446,723.43,1474.72,798.36Z" class="cls-28"></path><path d="M1448.48,820.63s3.18-56.19-35.81-80c0,0-11.29-29.84-4.21-52.23a131.68,131.68,0,0,0,7.69-57.47s-21.91-36-5.25-75.84c0,0,21.29-16.66,22.15-54.37,0,0,1.46-54.42,27.33-53.2,0,0,28.49,9.64,16.9,70.72,0,0-7.87,29.71-1.65,52.34,0,0,15.74,30.51-2.5,78.65,0,0-12.2,26.3-1.52,48.81C1471.54,698.42,1489.12,735.7,1448.48,820.63Z" class="cls-9"></path><path d="M1455.13,498l-7.5,347.1" class="cls-14"></path><path d="M1504.13,551.86,1470.39,841" class="cls-14"></path><path d="M1430.36,818.68s-3.66-33.5-31.66-47.29a38.86,38.86,0,0,1-20.38-27.58,33.68,33.68,0,0,1,0-13.12,83,83,0,0,0-.55-43,54.89,54.89,0,0,1-14.4-53.75,51.86,51.86,0,0,0,12.2-43.44s-5.73-39.48,17.27-43.57c0,0,26.3,1.53,23.92,47.84,0,0-3,22.94,5.3,38.07,0,0,17.82,19.22,7.87,57.29,0,0-7.62,21.36,4.89,35.82C1434.94,726.06,1455.13,749.67,1430.36,818.68Z" class="cls-28"></path><path d="M1397.6,612.33l32.76,206.35" class="cls-14"></path><path d="M1491.19,906.84h-79.31l-8.67-94.63h97Z" class="cls-29"></path><path d="M1491.19,906.84h-79.31l-8.67-94.63h97Z" class="cls-6"></path><path d="M1414,826.67h73.21" class="cls-14"></path><path d="M1414,893.36h73.21" class="cls-14"></path><path d="M1214.14,188.65l-11,.49a5.49,5.49,0,0,1,0-10.86l10.92-.49a5.19,5.19,0,0,1,4.89,5.31,5.07,5.07,0,0,1-4.55,5.53Z" class="cls-30"></path><path d="M1182.71,189.75l-10.92.49a5.49,5.49,0,0,1-.36-10.86l11-.49a5.18,5.18,0,0,1,4.88,5.31,5.07,5.07,0,0,1-4.53,5.55Z" class="cls-30"></path></g></g></g></g></svg>


--------------------------------------------------------------------------------
/src/views/home/assets/live.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg  viewBox="0 0 600 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <title>团队合作视频制作</title>
 4 |     <g id="团队合作视频制作" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 5 | <!--        <rect fill="#FFFFFF" x="0" y="0" width="600" height="400"></rect>-->
 6 |         <g id="plant_24_" transform="translate(45.701571, 87.581454)" fill-rule="nonzero">
 7 |             <path d="M116.644817,137.942376 C116.644817,137.942376 83.7198743,15.2993383 0.211623037,86.185193 L21.3514136,82.7526491 L14.4011728,90.2025739 L33.596733,103.813982 L50.337466,90.7271278 C50.337466,90.7271278 40.4560209,104.210772 36.0272461,108.248847 C39.9319162,112.600935 61.3859895,119.564095 61.3859895,119.564095 L65.702199,102.542637 C65.702199,102.542637 64.8863246,117.595444 62.4954346,123.894589 L82.922911,129.693474 L87.0283979,118.773216 L93.2384084,129.315579 L116.644817,137.942376 Z" id="Path" fill="#8AE6B9"></path>
 8 |             <path d="M114.829361,141.545872 C114.829361,141.545872 108.396921,8.24080451 15.6105759,40.3870501 L35.7877068,52.4409925 L35.2545969,60.4829524 L48.9686702,79.7924737 L61.8785759,66.7407093 C61.8785759,66.7407093 58.7969843,80.2756391 53.8206911,82.250589 C56.6240209,88.1790376 66.5036649,99.5329749 66.5036649,99.5329749 L73.9735079,84.9228446 C73.9735079,84.9228446 74.3346178,95.4966992 70.8234764,100.55599 L84.7446702,118.783113 L90.795288,109.995261 L86.9095288,121.546243 L114.829361,141.545872 Z" id="Path" fill="#1EAF69"></path>
 9 |             <path d="M114.888796,141.55487 C114.888796,141.55487 113.363309,-23.9765213 38.6765864,3.73306015 L52.7922932,26.2672832 L66.6666597,23.5185489 L52.2033508,31.2995815 L59.1788063,48.9661604 L77.9583246,47.6660226 L70.3921257,53.6259624 L75.7907644,76.890782 L86.1972147,70.1804511 C86.1972147,70.1804511 84.6402094,80.6508346 80.3897382,84.2111429 L90.3576335,107.488559 L97.694199,101.283887 L91.9200419,111.03807 L114.888796,141.55487 Z" id="Path" fill="#2CCD7F"></path>
10 |         </g>
11 |         <g id="cloud_4_" transform="translate(305.952880, 56.090226)" fill="#E7F4FE" fill-rule="nonzero">
12 |             <path d="M89.1887539,22.674584 C88.5142618,22.674584 87.8793927,22.8131454 87.2211099,22.8725288 C82.7121885,9.94133083 70.5335079,0.60373183 56.0539895,0.60373183 C41.5753717,0.60373183 29.3966911,9.94223058 24.8868691,22.8725288 C24.2285864,22.8131454 23.5928168,22.674584 22.9192251,22.674584 C10.7198325,22.674584 0.829382199,32.5556316 0.829382199,44.7454361 C0.829382199,56.9343409 10.7198325,66.8162882 22.9192251,66.8162882 C28.5556021,66.8162882 83.552377,66.8162882 89.1887539,66.8162882 C101.388147,66.8162882 111.278597,56.9343409 111.278597,44.7454361 C111.278597,32.5556316 101.389047,22.674584 89.1887539,22.674584 Z" id="Path"></path>
13 |         </g>
14 |         <g id="browser" transform="translate(124.947644, 110.075188)" fill-rule="nonzero">
15 |             <path d="M332.941571,26.3806516 L332.941571,214.878145 C332.941571,217.362353 330.925298,219.376892 328.438953,219.376892 L4.7547644,219.376892 C2.26841885,219.376892 0.252146597,217.362353 0.252146597,214.878145 L0.252146597,26.3806516 L332.941571,26.3806516 Z" id="Path" fill="#F3F9FF"></path>
16 |             <path d="M332.941571,8.36317043 L332.941571,28.6300251 L0.252146597,28.6300251 L0.252146597,8.36317043 C0.252146597,4.08216291 3.72546597,0.611829574 8.01015707,0.611829574 L325.18266,0.611829574 C329.468251,0.611829574 332.941571,4.08216291 332.941571,8.36317043 Z" id="Path" fill="#224380"></path>
17 |             <ellipse id="Oval" fill="#FFCB01" cx="24.0908063" cy="14.1890476" rx="4.9078534" ry="4.90363409"></ellipse>
18 |             <ellipse id="Oval" fill="#44D690" cx="41.5636649" cy="14.1890476" rx="4.9078534" ry="4.90363409"></ellipse>
19 |             <path d="M129.70601,179.338045 L43.7951623,179.338045 C38.1749948,179.338045 33.6201466,174.786213 33.6201466,169.171777 L33.6201466,83.334787 C33.6201466,77.7194511 38.1758953,73.1685188 43.7951623,73.1685188 L129.70601,73.1685188 C135.326178,73.1685188 139.881026,77.7203509 139.881026,83.334787 L139.881026,169.171777 C139.881026,174.786213 135.325277,179.338045 129.70601,179.338045 Z" id="Path" fill="#DAE7FF"></path>
20 |             <path d="M108.993969,171.465238 L23.0831204,171.465238 C17.4629529,171.465238 12.9081047,166.913406 12.9081047,161.29897 L12.9081047,75.4619799 C12.9081047,69.8466441 17.4638534,65.2957118 23.0831204,65.2957118 L108.993969,65.2957118 C114.614136,65.2957118 119.168984,69.8475439 119.168984,75.4619799 L119.168984,161.29897 C119.168984,166.913406 114.613236,171.465238 108.993969,171.465238 Z" id="Path" fill="#7266D5"></path>
21 |             <polygon id="Path" fill="#FFFFFF" points="51.906178 100.73414 51.906178 136.02591 80.1700105 118.380025"></polygon>
22 |             <g id="Group" transform="translate(152.188482, 68.380952)">
23 |                 <path d="M51.7801047,17.1033358 L4.93036649,17.1033358 C2.34226178,17.1033358 0.243141361,15.0069198 0.243141361,12.4201404 L0.243141361,4.76057393 C0.243141361,2.17469424 2.34136126,0.0773784461 4.93036649,0.0773784461 L51.7801047,0.0773784461 C54.3691099,0.0773784461 56.4673298,2.17379449 56.4673298,4.76057393 L56.4673298,12.4201404 C56.4673298,15.0069198 54.3691099,17.1033358 51.7801047,17.1033358 Z" id="Path" fill="#BADDFE"></path>
24 |                 <path d="M148.336942,17.1033358 L68.4397906,17.1033358 C65.8516859,17.1033358 63.7525654,15.0069198 63.7525654,12.4201404 L63.7525654,4.76057393 C63.7525654,2.17469424 65.8507853,0.0773784461 68.4397906,0.0773784461 L148.336942,0.0773784461 C150.925047,0.0773784461 153.024168,2.17379449 153.024168,4.76057393 L153.024168,12.4201404 C153.024168,15.0069198 150.925047,17.1033358 148.336942,17.1033358 Z" id="Path" fill="#BADDFE"></path>
25 |                 <path d="M150.322597,32.694193 L2.94471204,32.694193 C1.4525445,32.694193 0.243141361,31.4858296 0.243141361,29.9949449 L0.243141361,29.9949449 C0.243141361,28.5040602 1.4525445,27.2956967 2.94471204,27.2956967 L150.321696,27.2956967 C151.813864,27.2956967 153.023268,28.5040602 153.023268,29.9949449 L153.023268,29.9949449 C153.023268,31.4849298 151.813864,32.694193 150.322597,32.694193 Z" id="Path" fill="#DAE7FF"></path>
26 |                 <path d="M150.322597,47.9944311 L2.94471204,47.9944311 C1.4525445,47.9944311 0.243141361,46.7860677 0.243141361,45.295183 L0.243141361,45.295183 C0.243141361,43.8042982 1.4525445,42.5959348 2.94471204,42.5959348 L150.321696,42.5959348 C151.813864,42.5959348 153.023268,43.8042982 153.023268,45.295183 L153.023268,45.295183 C153.023268,46.7860677 151.813864,47.9944311 150.322597,47.9944311 Z" id="Path" fill="#DAE7FF"></path>
27 |                 <path d="M150.322597,63.2946692 L2.94471204,63.2946692 C1.4525445,63.2946692 0.243141361,62.0863058 0.243141361,60.5954211 L0.243141361,60.5954211 C0.243141361,59.1045363 1.4525445,57.8961729 2.94471204,57.8961729 L150.321696,57.8961729 C151.813864,57.8961729 153.023268,59.1045363 153.023268,60.5954211 L153.023268,60.5954211 C153.023268,62.0863058 151.813864,63.2946692 150.322597,63.2946692 Z" id="Path" fill="#DAE7FF"></path>
28 |                 <path d="M150.322597,78.595807 L2.94471204,78.595807 C1.4525445,78.595807 0.243141361,77.3874436 0.243141361,75.8965589 L0.243141361,75.8965589 C0.243141361,74.4056742 1.4525445,73.1973108 2.94471204,73.1973108 L150.321696,73.1973108 C151.813864,73.1973108 153.023268,74.4056742 153.023268,75.8965589 L153.023268,75.8965589 C153.023268,77.3874436 151.813864,78.595807 150.322597,78.595807 Z" id="Path" fill="#DAE7FF"></path>
29 |             </g>
30 |         </g>
31 |         <g id="woman_11_" transform="translate(43.000000, 213.546366)" fill-rule="nonzero">
32 |             <g id="Group" transform="translate(28.816754, 0.000000)">
33 |                 <g transform="translate(12.607330, 3.598997)" id="Path">
34 |                     <path d="M7.88948691,0.809774436 C-2.28102618,1.74371429 3.47962304,11.7300326 3.10500524,15.9831479 C2.73128796,20.2371629 0.38182199,26.6631729 0.38182199,26.6631729 L10.6252775,28.3385063 C10.6252775,28.3385063 11.1133613,24.8825689 11.0638325,23.0821704 C11.0143037,21.2817719 12.3551832,20.437807 14.5722723,20.5880652 C16.7893613,20.7383233 16.9649634,16.4258246 17.3062618,15.6385439 C17.8645864,14.3501028 20.029445,15.2669474 19.664733,13.7013835 C19.3000209,12.1358195 17.6259476,11.5518822 17.3918115,7.42833083 C17.1576754,3.30477945 12.7162932,0.366197995 7.88948691,0.809774436 Z" fill="#F1B282"></path>
35 |                     <path d="M14.0040419,20.5718697 C12.9432251,20.5808672 12.1273508,20.8624887 11.6248586,21.4032381 L10.5361257,19.1970526 C11.694199,19.9348471 13.3322513,20.5268822 14.0040419,20.5718697 Z" fill="#CD916A"></path>
36 |                 </g>
37 |                 <path d="M22.7580314,0.119666667 C9.26458639,-0.183548872 9.97960209,12.6567744 4.32341361,12.0512431 C1.32467016,11.7300326 0.886115183,10.9598471 0.886115183,10.9598471 C0.886115183,10.9598471 1.13015707,13.7598672 3.09509948,15.6745338 C2.21168586,15.806797 1.27874346,15.821193 0.377319372,15.6997268 C0.377319372,15.6997268 1.02389529,24.2851353 8.64412565,25.1021078 C14.1751414,25.6950426 16.4426597,22.8167444 17.3674974,20.3343358 C19.778199,20.6087594 23.5126702,20.154386 24.0772984,14.8962506 C24.3780733,12.0971303 24.8481466,10.0564987 25.3290262,8.57371178 C34.2757277,9.45906516 33.7038953,0.365298246 22.7580314,0.119666667 Z" id="Path" fill="#0B224E"></path>
38 |             </g>
39 |             <path d="M11.0440209,155.384917 C10.9467644,153.988506 12.3101571,150.439895 14.3615497,145.892561 L7.97233508,144.204632 C7.55629319,145.89706 7.10062827,147.635376 6.56931937,149.442972 C5.76875393,152.167414 5.13928796,153.260609 5.04023037,154.521158 C4.9420733,155.781707 9.70944503,161.661569 9.70944503,161.661569 L13.245801,161.339459 C13.245801,161.339459 11.3547016,159.839576 11.0440209,155.384917 Z" id="Path" fill="#F1B282"></path>
40 |             <path d="M58.5880628,158.144449 C57.6425131,156.63197 57.3939686,151.080516 57.3687539,144.204632 L49.4315393,144.204632 C50.2023874,147.593088 51.0389738,151.086815 51.8458429,154.997125 C52.4194764,157.778251 52.3762513,159.038799 52.8823455,160.198576 C53.3875393,161.358353 60.3593927,164.31313 60.3593927,164.31313 L63.3302199,162.369672 C63.3293194,162.368772 60.9555393,161.932393 58.5880628,158.144449 Z" id="Path" fill="#F1B282"></path>
41 |             <path d="M16.1670995,165.689747 C15.767267,166.441038 13.1791623,165.675351 13.1791623,165.675351 L5.71112042,161.707456 C4.93396859,161.294471 4.51522513,160.432511 4.66110995,159.565153 C4.89704712,158.165143 5.11587435,156.209987 4.55935079,155.955358 C3.68043979,155.552271 1.47415707,159.456283 1.47415707,159.456283 L0.00540314136,158.676201 C0.00540314136,158.676201 1.68758115,156.034536 2.40349738,154.809977 C3.11941361,153.585419 2.40349738,152.756749 3.33734031,151.001338 C4.27118325,149.246827 6.13886911,148.274198 6.74041885,148.593609 C7.34196859,148.91302 6.74672251,152.950195 7.28253403,154.703807 C7.96242932,156.926188 9.39966492,159.007308 12.308356,160.117599 C13.053089,160.40282 16.5669319,164.938456 16.1670995,165.689747 Z" id="Path" fill="#0B224E"></path>
42 |             <path d="M67.9535079,164.840383 C67.9535079,165.691546 65.3086702,166.228697 65.3086702,166.228697 L56.8500524,166.228697 C55.9702408,166.228697 55.1948901,165.664554 54.9166283,164.830486 C54.467267,163.483561 53.7423455,161.655271 53.1308901,161.691261 C52.1655288,161.747945 52.0520628,166.229596 52.0520628,166.229596 L50.3887958,166.229596 C50.3887958,166.229596 50.6328377,163.108366 50.6895707,161.691261 C50.7463037,160.274155 49.7242094,159.878266 49.7242094,157.890719 C49.7242094,155.903173 50.9165026,154.168456 51.598199,154.168456 C52.2798953,154.168456 53.6504921,158.013085 54.9481466,159.308724 C56.5934031,160.952566 58.8393089,162.115942 61.9290052,161.731749 C62.7196649,161.632777 67.9535079,163.989221 67.9535079,164.840383 Z" id="Path" fill="#0B224E"></path>
43 |             <path d="M40.9179895,68.2261955 C40.9179895,68.2261955 55.5496963,92.0767519 57.9423874,106.107444 C60.2972565,119.916797 57.7325654,150.283338 57.7325654,150.283338 L50.1609634,150.088992 C50.1609634,150.088992 43.323288,121.443672 45.7204817,113.080501 C40.1606492,103.279531 30.5691728,92.0083709 29.6344293,83.9133258 C29.2742199,80.7938947 36.1659267,70.672614 40.9179895,68.2261955 Z" id="Path" fill="#0B224E"></path>
44 |             <path d="M22.4518534,66.038005 C22.4518534,66.038005 18.6903665,71.0442105 17.5394974,80.7327118 C16.2148272,91.8833058 17.6250471,101.451241 16.627267,109.92418 C9.94808377,117.973338 6.78544503,147.008251 6.78544503,147.008251 L13.4123979,148.894125 C13.4123979,148.894125 26.9976963,121.273619 29.7226806,114.347348 C31.8506178,108.938055 40.1606492,89.1210752 38.5766283,71.0837995 C38.5766283,71.0828997 30.9464921,64.623599 22.4518534,66.038005 Z" id="Path" fill="#102B5E"></path>
45 |             <path d="M66.6540524,44.4008321 C66.6540524,44.4008321 70.4290471,50.8970226 73.3656545,51.6303183 C76.3022618,52.363614 87.3129634,52.1539724 89.6201047,51.6303183 C91.9272461,51.1066642 91.8822199,39.8076115 93.9795393,39.7032406 C96.0768586,39.5988697 96.3317068,54.2494887 94.3388482,56.6599173 C92.3459895,59.0694461 90.6683141,58.0221378 89.2004607,58.3361504 C87.7326073,58.6501629 75.0343246,61.7255063 68.9008586,60.4685564 C62.7664921,59.2116065 57.7325654,50.3931629 57.7325654,50.3931629 C57.7325654,50.3931629 61.7254869,44.2964612 66.6540524,44.4008321 Z" id="Path" fill="#F1B282"></path>
46 |             <path d="M63.0357487,43.1429825 C62.3450471,45.8188371 59.1202723,45.7936441 58.7645654,49.7723358 C58.6628063,50.9105188 58.4277696,51.8615539 58.0927749,52.6578321 C57.2904084,54.5886942 55.9108063,55.6117093 54.4609634,56.1884486 C52.0709738,57.1376842 49.4873717,56.8767569 48.963267,57.47599 C44.5597068,62.505589 47.7079372,75.2388421 45.1909738,75.5546541 C42.6740105,75.8686667 35.4554136,71.4005113 31.838911,71.2439549 C28.2206073,71.0873985 16.9235393,74.5793258 17.1333613,69.0260727 C17.2603351,65.6412155 29.3129424,59.5454135 31.3517277,51.6510125 C34.9232042,37.8254637 35.6652356,25.6464561 48.5337173,27.0707594 C57.6875393,28.0829774 64.2937801,38.2726391 63.0357487,43.1429825 Z" id="Path" fill="#1B90FB"></path>
47 |             <path d="M58.0927749,52.6578321 C57.2904084,54.5886942 55.9108063,55.6117093 54.4609634,56.1884486 C48.8570052,46.0518722 48.657089,36.643193 48.657089,36.643193 L58.0927749,52.6578321 Z" id="Path" fill="#1277D7"></path>
48 |             <path d="M56.5997068,31.3183718 C60.2432251,31.2788872 65.6040419,42.5149574 68.1741361,44.0868195 C69.3808377,44.8201153 60.466555,51.8408596 58.2647749,52.9925388 C56.0620942,54.1451178 51.0290681,45.0297569 49.5603141,41.7816617 C48.0924607,38.5335664 45.1189319,31.4444411 56.5997068,31.3183718 Z" id="Path" fill="#1B90FB"></path>
49 |         </g>
50 |         <g id="man_7_" transform="translate(315.858639, 264.832080)" fill-rule="nonzero">
51 |             <path d="M41.1413194,77.2146917 L1.28864921,12.0593409 C0.510596859,10.7870952 0.912230366,9.12615789 2.18467016,8.34877444 L2.18467016,8.34877444 C3.45801047,7.57139098 5.12037696,7.9726792 5.89842932,9.24402506 L45.7510995,74.3993759 C46.5291518,75.6716216 46.1275183,77.3325589 44.8550785,78.1099424 L44.8550785,78.1099424 C43.5817382,78.8873258 41.9193717,78.4860376 41.1413194,77.2146917 Z" id="Path" fill="#DAE7FF"></path>
52 |             <g id="man_6_" transform="translate(20.712042, 0.000000)">
53 |                 <g id="Group" transform="translate(41.424084, 0.000000)">
54 |                     <path d="M25.0822827,32.4098722 C25.0822827,32.4098722 17.3269738,26.8773133 17.7394136,24.0691955 C18.1518534,21.2619774 18.4157068,11.067817 14.714555,10.1860627 C11.0134031,9.30430827 3.73987435,9.27551629 2.51246073,11.8586967 C1.35618848,14.2925188 2.31074346,15.4666917 2.09281675,16.467213 C1.87489005,17.4677343 0.756439791,19.5506541 0.846492147,20.4800952 C0.936544503,21.4086366 2.36657592,21.4014386 2.86816754,22.5792105 C3.36975916,23.7569825 2.8285445,25.4053233 4.09197906,26.569599 C5.35541361,27.7338747 8.86475393,27.1580351 9.3681466,28.296218 C10.6090681,31.0962381 7.63553927,37.1596491 7.63553927,37.1596491 L8.14613613,45.4481404 C8.14703665,45.4499398 20.0492565,49.7048546 25.0822827,32.4098722 Z" id="Path" fill="#F1B282"></path>
55 |                     <path d="M24.6230157,13.0049774 C24.596,12.1160251 24.2177801,11.3242456 23.6306387,10.7457068 C24.1817592,10.1329774 24.5113508,9.31960401 24.4852356,8.43065163 C24.4294031,6.59696241 22.896712,5.15556391 21.0623455,5.21134837 C21.0470366,5.21134837 21.0326283,5.21674687 21.0173194,5.21674687 C20.7489634,3.60169674 19.3351414,2.38883459 17.6520628,2.43922055 C17.0586178,2.45721554 16.5147016,2.64256391 16.0401257,2.92958396 C15.5349319,1.67533333 14.2976126,0.801676692 12.8657801,0.844864662 C11.7842513,0.877255639 10.8486073,1.4306015 10.2659686,2.24847368 C9.63470157,1.46749123 8.66753927,0.971729323 7.58601047,1.00502005 C6.01639791,1.05270677 4.74125654,2.18369173 4.43868063,3.65658145 C4.40536126,3.65658145 4.37384293,3.64848371 4.34052356,3.64938346 C2.50525654,3.70516792 1.0626178,5.23654135 1.11845026,7.06933083 C1.12025131,7.12151629 1.13465969,7.16920301 1.13826178,7.22048872 C0.497089005,8.36137093 0.328691099,9.44826817 0.349403141,10.113183 C0.407036649,12.0071554 2.4386178,12.5380075 8.12452356,12.3661554 C13.8104293,12.1943033 12.994555,20.495391 14.0607749,20.463 C15.1269948,20.430609 14.3390366,17.9077118 16.3526073,17.8465288 C18.366178,17.7853459 15.9734869,24.9068622 18.1059267,24.8420802 C19.7881047,24.7907945 22.1555812,20.818401 22.9876649,15.9498571 C23.9926492,15.3533233 24.6608377,14.2556291 24.6230157,13.0049774 Z" id="Path" fill="#0B224E"></path>
56 |                 </g>
57 |                 <path d="M39.2862408,47.4914712 C39.2862408,47.4914712 35.4572147,51.5988271 32.9960838,54.0281504 C27.3516021,52.3690125 16.1166702,49.0111479 13.5618848,47.8270777 C10.1146806,46.2291228 9.19794764,43.5181779 7.9579267,44.3594436 C6.71790576,45.2007093 9.54374869,47.8909599 7.04569634,48.5738697 C6.09204188,48.834797 1.22741361,46.1247519 0.895120419,48.4802957 C0.563727749,50.8349398 4.33872251,54.3799524 5.91824084,54.8010351 C8.12812565,55.3903709 10.3263037,54.5985915 12.0111832,54.3934486 C13.6960628,54.1883058 29.3192461,62.9968521 34.5683979,62.9392682 C36.214555,62.9212732 42.8316021,59.9907895 48.5112042,53.3605363 C54.1926073,46.7284837 41.9346806,45.0036642 39.2862408,47.4914712 Z" id="Path" fill="#F1B282"></path>
58 |                 <path d="M93.6994764,92.0560576 L86.4052356,94.1542732 L84.412377,102.81886 L92.365801,100.782727 C92.3667016,100.783627 95.4906178,98.4172857 93.6994764,92.0560576 Z" id="Path" fill="#F1B282"></path>
59 |                 <path d="M92.7521257,92.3601729 C92.976356,91.5611955 94.3568586,91.1509098 96.9539686,92.1874211 C99.5510785,93.2239323 101.150408,93.2068371 100.471414,95.6847469 C100.044565,97.2413133 97.1052565,104.922474 94.9782199,110.419043 C94.2100733,112.404789 91.5409215,113.707627 89.5768796,114.422028 C89.1761466,114.567787 88.7258848,114.461617 88.4332147,114.151203 C88.1405445,113.840789 88.0603979,113.386416 88.2296963,112.995025 C90.1162932,108.63304 90.5125236,108.696922 89.7921047,104.301647 C89.5300524,102.705491 89.2328796,101.34417 89.4697173,100.645965 C89.9289843,99.2882431 91.3383037,99.127188 92.0163979,96.8886115 C92.6944921,94.6491353 92.3649005,93.7412882 92.7521257,92.3601729 Z" id="Path" fill="#0B224E"></path>
60 |                 <path d="M33.712,72.5314962 C22.8886073,76.9843559 44.2139058,103.501769 44.2139058,103.501769 L52.2834974,98.9103484 C52.2834974,98.9103484 50.6445445,91.4919148 49.0704293,85.9197669 C51.4325026,86.8231153 54.9922723,87.8425313 59.1436859,87.8992155 C66.660356,88.0008872 69.4780942,77.5386015 69.4780942,77.5386015 C69.4780942,77.5386015 44.5353927,68.0777368 33.712,72.5314962 Z" id="Path" fill="#0B224E"></path>
61 |                 <path d="M88.8060314,92.1145414 C87.6380524,91.2453835 80.2411518,93.354396 72.4813403,95.9267794 C79.8566283,90.3051454 85.5893613,83.1827293 83.363267,75.3837018 C80.6553927,67.0772155 74.1896335,71.8791779 74.1896335,71.8791779 C67.5212565,73.7173659 31.9406702,101.977594 34.6800628,111.539231 C37.4194555,121.100867 80.9390576,108.867875 82.520377,107.724293 C84.1007958,106.581612 91.3914346,94.040005 88.8060314,92.1145414 Z" id="Path" fill="#102B5E"></path>
62 |                 <path d="M72.718178,95.6919449 C72.718178,95.6919449 58.5772565,105.335459 56.072,106.76516 C56.072,106.76516 71.9797487,104.579669 75.5206073,102.252917 C79.0623665,99.9261654 80.0070157,94.0013158 80.0070157,94.0013158 L72.718178,95.6919449 Z" id="Path" fill="#0B224E"></path>
63 |                 <path d="M70.7802513,78.1819223 C63.1960419,78.4428496 59.014911,82.0922331 55.8954974,79.9220376 C52.7760838,77.7527419 59.0779476,72.0582281 49.689089,57.6262481 C49.2973613,56.4079875 48.8570052,55.1825288 48.3608168,53.9588697 C48.1771099,53.5044962 47.7844817,52.8683734 47.2900942,52.0900902 C44.3138639,47.4050952 37.6553927,37.5771328 50.7111832,31.4300451 C53.4694869,30.130807 56.7744084,28.2134411 60.1297592,28.1477594 C64.4423665,28.063183 68.837822,31.0404536 72.2580105,42.3269098 C78.337445,62.3922206 88.2414031,73.0992381 88.7033717,77.4054386 C89.1644398,81.7116391 78.3644607,77.9200952 70.7802513,78.1819223 Z" id="Path" fill="#FFCB01"></path>
64 |                 <path d="M56.6339267,39.1462957 C58.1981361,47.9728371 51.0056545,56.2055439 49.689089,57.6253484 C49.2973613,56.4070877 48.8570052,55.1816291 48.3608168,53.9579699 C48.1771099,53.5035965 47.7844817,52.8674737 47.2900942,52.0891905 C47.2963979,51.2623208 47.3855497,50.4102581 47.5647539,49.5770902 C48.3085864,46.1076566 56.6339267,39.1462957 56.6339267,39.1462957 Z" id="Path" fill="#F0B701"></path>
65 |                 <path d="M45.3071414,35.1703033 C45.3071414,35.1703033 40.5631832,44.7760276 37.5374241,47.4230902 C34.5116649,50.0701529 44.7713298,52.0019148 46.3400419,55.2734035 C47.9087539,58.5448922 53.9089424,48.533381 55.5650052,43.3274311 C57.2210681,38.1205815 60.2702408,24.7152155 45.3071414,35.1703033 Z" id="Path" fill="#FFCB01"></path>
66 |                 <path d="M49.0713298,85.9215664 C49.0713298,85.9215664 47.4683979,85.1936692 46.0266597,84.5323534 C46.0266597,84.5323534 48.5895497,89.4971704 50.5725026,91.4406291 L49.0713298,85.9215664 Z" id="Path" fill="#102B5E"></path>
67 |             </g>
68 |         </g>
69 |         <g id="bulb_3_" transform="translate(426.623037, 45.293233)" fill-rule="nonzero">
70 |             <path d="M62.4062827,31.7665514 C62.4062827,12.5425063 44.9568377,-2.60927318 25.0201466,1.26054887 C12.7748272,3.63678697 2.95551832,13.5619223 0.679895288,25.815609 C-0.896921466,34.3065439 0.986073298,42.318812 5.15729843,48.7079323 C10.684712,57.1754737 13.472733,67.133 13.472733,77.242584 L13.472733,78.4365514 L49.0614241,78.4365514 L49.0614241,78.5400226 C49.0614241,68.1074286 51.4685236,57.6064536 57.2408796,48.9130752 C60.5034764,43.9986441 62.4062827,38.1070852 62.4062827,31.7665514 Z" id="Path" fill="#FFCB01"></path>
71 |             <path d="M25.0201466,1.25964912 C24.7797068,1.30643609 24.5572775,1.40090977 24.3186387,1.45309524 C38.4244398,4.41866917 49.0605236,16.7893233 49.0605236,31.7656516 C49.0605236,38.1061855 47.1577173,43.9977444 43.8942199,48.9121754 C38.1407749,57.5758622 35.736377,68.0372481 35.7201675,78.4356516 L49.059623,78.4356516 L49.059623,78.5391228 C49.059623,68.1074286 51.4667225,57.6046541 57.2390785,48.9121754 C60.5025759,43.9977444 62.4053822,38.1061855 62.4053822,31.7656516 C62.4062827,12.5425063 44.9568377,-2.60927318 25.0201466,1.25964912 Z" id="Path" fill="#F0B701"></path>
72 |             <polygon id="Path" fill="#0B224E" points="40.1633508 107.058479 22.3690052 107.058479 17.9204188 98.1689549 44.6119372 98.1689549"></polygon>
73 |             <path d="M46.3049215,98.4379799 L16.2274346,98.4379799 C12.2489215,98.4379799 9.02324607,95.2150777 9.02324607,91.239985 L9.02324607,76.2141704 L53.5091099,76.2141704 L53.5091099,91.239985 C53.5091099,95.2150777 50.2834346,98.4379799 46.3049215,98.4379799 Z" id="Path" fill="#102B5E"></path>
74 |             <polygon id="Path" fill="#03193F" points="44.6128377 98.1716541 20.696733 103.728506 17.9213194 98.1716541"></polygon>
75 |         </g>
76 |         <g id="plant_23_" transform="translate(472.549738, 136.167920)" fill-rule="nonzero">
77 |             <path d="M50.396,142.005644 C77.1532565,139.157038 87.0554136,126.841268 85.8433089,101.084143 C84.6312042,75.3279173 67.5302618,64.8638321 63.4211728,45.4103509 C59.3120838,25.9559699 51.0731937,1.50438095 45.2017801,0.807974937 C39.329466,0.111568922 37.6707016,12.8646165 31.7128377,21.0649323 C22.8102618,33.318619 7.32395812,28.669614 15.710534,59.1972105 C22.9039162,85.380817 0.664586387,84.2174411 0.126973822,110.926501 C-0.398031414,136.936456 22.9849634,144.924431 50.396,142.005644 Z" id="Path" fill="#F3F9FF"></path>
78 |             <path d="M43.0297173,192.526571 C45.2954346,181.111451 47.3036021,167.806857 47.9051518,156.205489 C48.5364188,144.623915 48.275267,132.919975 46.6092984,121.182744 C46.2743037,119.241085 45.9140942,117.316521 45.5583874,115.388358 C54.1160628,105.815925 58.8816335,94.363015 59.5975497,82.519614 C58.0918743,93.4272757 52.9453822,103.658326 44.9712461,112.143862 C43.3728168,103.480175 41.8590366,94.9100627 41.6789319,86.2589724 C41.1962513,74.6711003 41.8779476,63.1012231 44.510178,51.9002431 C41.4267853,63.0040501 40.2786178,74.5478346 40.304733,86.1608997 C40.2678115,88.0071855 40.3830785,89.8705664 40.4605236,91.7294486 C36.9854031,89.1804586 34.035288,85.9494586 31.7740733,82.616787 C29.2129843,78.6812832 27.4380524,74.4749549 26.4609843,70.2101429 C26.9859895,74.4812531 28.3178639,78.7901529 30.5340524,82.954193 C32.8907225,87.0921404 35.8867644,91.0771303 40.5379686,94.4763835 C41.1278115,103.381203 42.7046283,112.3661 43.8744084,121.148554 C46.1365236,144.316201 43.1620942,170.34415 38.0444188,192.526571 L43.0297173,192.526571 L43.0297173,192.526571 Z" id="Path" fill="#D0E7FE"></path>
79 |         </g>
80 |         <path d="M155.111581,21.8952506 C167.680188,21.8952506 178.058723,31.1455739 179.872377,43.1986165 C182.498304,40.4705764 186.181445,38.7655514 190.268021,38.7655514 C197.254283,38.7655514 203.07977,43.7258697 204.413445,50.3129348 C207.514848,45.9203584 212.623518,43.0429599 218.412984,43.0429599 C227.874785,43.0429599 235.545445,50.7070251 235.545445,60.1606917 C235.545445,61.8963083 235.282492,63.5689424 234.801613,65.1471028 C236.462178,63.9099474 238.515372,63.1685539 240.745969,63.1685539 C246.250869,63.1685539 250.713864,67.6277118 250.713864,73.1278797 C250.713864,78.6280476 246.25177,83.0872055 240.745969,83.0872055 L128.666806,83.0872055 C121.340147,83.0872055 115.400293,77.1524586 115.400293,69.8320977 C115.400293,62.5117368 121.340147,56.57699 128.666806,56.57699 C129.887016,56.57699 131.063099,56.7551404 132.186052,57.0637544 C130.815455,53.9677168 130.039204,50.5495689 130.039204,46.9460727 C130.039204,33.1106266 141.26423,21.8952506 155.111581,21.8952506 Z" id="cloud_3_" fill="#F3F9FF" fill-rule="nonzero"></path>
81 |     </g>
82 | </svg>


--------------------------------------------------------------------------------
/src/views/home/assets/live2.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 700 634" style="enable-background:new 0 0 700 634;" xml:space="preserve">
  5 | <style type="text/css">
  6 | 	.st0{fill:#E5E6EB;}
  7 | 	.st1{fill:#3579FF;}
  8 | 	.st2{fill:#84A9FF;}
  9 | 	.st3{fill:#155DFF;}
 10 | 	.st4{fill:#FFFFFF;}
 11 | 	.st5{fill:#155BCD;}
 12 | 	.st6{fill:#050F64;}
 13 | 	.st7{opacity:0.81;}
 14 | 	.st8{fill:#FF654F;}
 15 | 	.st9{fill:#3615FF;}
 16 | 	.st10{opacity:0.6;}
 17 | 	.st11{fill:#0AA2FF;}
 18 | 	.st12{fill:#DA5544;}
 19 | 	.st13{fill:#F5BDC8;}
 20 | 	.st14{opacity:0;}
 21 | 	.st15{fill:#EA8096;}
 22 | </style>
 23 | <g>
 24 | 	<g>
 25 | 		<g>
 26 | 			<path class="st0" d="M685,541c-0.4,23.2-8.9,47.5-25.2,63.2c-3.1,3-6.4,5.6-10.1,7.9H94.4c-3.8-2.4-7.6-5.1-11.2-7.9
 27 | 				c-19.2-14.7-36.3-34-47.3-51.3c-28.8-45.2-27.6-106,2.2-150.3c11.8-17.6,28-33,34.3-53.3c6.9-22.1,0.9-45.9-1.2-69
 28 | 				s1.7-49.9,21.1-62.6c21.8-14.2,50.7-3.4,76.5-6.5c29-3.5,52.7-24.5,71.9-46.5s36.9-46.5,62-61.3c32.5-19.1,73.4-19,109.5-8.4
 29 | 				c89.8,26.3,155.3,119,150.1,212.4c-1.2,22.4-6,45.6,1.9,66.6c12.7,33.8,51.7,48,78.7,72C669.9,469.7,685.6,505.3,685,541z"/>
 30 | 		</g>
 31 | 		<g>
 32 | 			<g>
 33 | 				<path class="st1" d="M63.2,576.4L63.2,576.4c0,15.2,9.5,27.6,21.2,27.6h530.2c11.7,0,21.2-12.4,21.2-27.6l0,0H63.2z"/>
 34 | 			</g>
 35 | 			<g>
 36 | 				<rect x="119.8" y="264.9" class="st2" width="459.4" height="288.5"/>
 37 | 			</g>
 38 | 			<g>
 39 | 				<path class="st3" d="M587.2,234.4H111.8c-8.9,0-16.1,7.2-16.1,16.1v304.6c0,8.9,7.2,16.1,16.1,16.1h475.4
 40 | 					c8.9,0,16.1-7.2,16.1-16.1V250.5C603.3,241.6,596.1,234.4,587.2,234.4z"/>
 41 | 			</g>
 42 | 			<g>
 43 | 				<rect x="119.8" y="258.6" class="st4" width="459.4" height="288.5"/>
 44 | 			</g>
 45 | 			<g>
 46 | 				<g>
 47 | 					<polygon class="st0" points="283.3,576.4 167.7,576.4 168.1,571.3 168.7,565 282.3,565 					"/>
 48 | 				</g>
 49 | 				<g>
 50 | 					<polygon class="st0" points="531.3,576.4 415.8,576.4 416.2,571.3 416.7,565 530.4,565 					"/>
 51 | 				</g>
 52 | 			</g>
 53 | 		</g>
 54 | 		<g>
 55 | 			<rect x="149.4" y="146.8" class="st2" width="400.3" height="400.3"/>
 56 | 		</g>
 57 | 		<g>
 58 | 			<rect x="152.6" y="148.3" class="st4" width="393.8" height="398.8"/>
 59 | 		</g>
 60 | 		<g>
 61 | 			<rect x="149.4" y="146.8" class="st5" width="400.3" height="33.8"/>
 62 | 		</g>
 63 | 		<g>
 64 | 			<rect x="149.4" y="180.6" class="st6" width="400.3" height="33.8"/>
 65 | 		</g>
 66 | 		<g>
 67 | 			<circle class="st4" cx="176.2" cy="163.7" r="4.2"/>
 68 | 		</g>
 69 | 		<g>
 70 | 			<circle class="st4" cx="200.2" cy="163.7" r="4.2"/>
 71 | 		</g>
 72 | 		<g>
 73 | 			<circle class="st4" cx="224.1" cy="163.7" r="4.2"/>
 74 | 		</g>
 75 | 		<g>
 76 | 			<path class="st4" d="M483.1,205.3H196.2c-1.8,0-3.2-1.4-3.2-3.2v-10.8c0-1.8,1.4-3.2,3.2-3.2h286.9c1.8,0,3.2,1.4,3.2,3.2v10.8
 77 | 				C486.3,203.9,484.9,205.3,483.1,205.3z"/>
 78 | 		</g>
 79 | 		<g>
 80 | 			<g>
 81 | 				<path class="st4" d="M514,199.9c-1.6,0-3.3-0.6-4.5-1.9c-2.5-2.5-2.5-6.5,0-9s6.5-2.5,9,0l0,0l0,0c1.2,1.2,1.9,2.8,1.9,4.5
 82 | 					s-0.7,3.3-1.9,4.5C517.3,199.3,515.7,199.9,514,199.9z M514,189.1c-1.1,0-2.2,0.4-3.1,1.3c-1.7,1.7-1.7,4.5,0,6.2
 83 | 					c1.7,1.7,4.5,1.7,6.2,0c0.8-0.8,1.3-1.9,1.3-3.1c0-1.2-0.5-2.3-1.3-3.1l0,0C516.3,189.6,515.2,189.1,514,189.1z"/>
 84 | 			</g>
 85 | 			<g>
 86 | 				<path class="st4" d="M523.4,203.9c-0.3,0-0.5-0.1-0.7-0.3l-5.6-5.6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.6,5.6
 87 | 					c0.4,0.4,0.4,1,0,1.4C523.9,203.8,523.7,203.9,523.4,203.9z"/>
 88 | 			</g>
 89 | 		</g>
 90 | 		<g>
 91 | 			<g class="st7">
 92 | 				<rect x="172.8" y="237" class="st8" width="353.5" height="214.1"/>
 93 | 			</g>
 94 | 			<g>
 95 | 				<g>
 96 | 					<ellipse class="st4" cx="349.5" cy="331.2" rx="65.1" ry="65.1"/>
 97 | 				</g>
 98 | 				<g>
 99 | 					<polygon class="st8" points="381.6,331.2 333.5,303.4 333.5,358.9 					"/>
100 | 				</g>
101 | 			</g>
102 | 			<g>
103 | 				<rect x="187.6" y="416.4" class="st4" width="326.2" height="5.7"/>
104 | 			</g>
105 | 			<g>
106 | 				<circle class="st9" cx="432.8" cy="419.2" r="6.1"/>
107 | 			</g>
108 | 			<g>
109 | 				<rect x="187.6" y="416.4" class="st6" width="245.3" height="5.7"/>
110 | 			</g>
111 | 		</g>
112 | 		<g>
113 | 			<g>
114 | 				<g>
115 | 					<rect x="349.4" y="478.3" class="st0" width="176.6" height="5.6"/>
116 | 				</g>
117 | 				<g>
118 | 					<rect x="349.4" y="504.7" class="st0" width="176.6" height="5.6"/>
119 | 				</g>
120 | 				<g>
121 | 					<rect x="349.4" y="531.1" class="st0" width="176.6" height="5.6"/>
122 | 				</g>
123 | 			</g>
124 | 			<g>
125 | 				<rect x="172.8" y="465" class="st0" width="160.6" height="82"/>
126 | 			</g>
127 | 		</g>
128 | 		<g>
129 | 			<g>
130 | 				<g>
131 | 					<g>
132 | 						<path class="st0" d="M204.7,463.1v60.3c0,0.4,0,0.9-0.1,1.3c-0.1,0.6-0.2,1.3-0.5,1.8c-1.3,3.5-4.7,6.1-8.6,6.1H78.8
133 | 							c-5.1,0-9.2-4.1-9.2-9.2v-58.5c0-9.4,7.6-17,17-17h102.8c6.3,0,11.7,3.8,14,9.3c0.3,0.6,0.5,1.3,0.7,1.9
134 | 							C204.5,460.4,204.7,461.7,204.7,463.1z"/>
135 | 					</g>
136 | 				</g>
137 | 				<g>
138 | 					<g>
139 | 						<path class="st0" d="M338.7,464.9v58.5c0,5.1-4.1,9.2-9.2,9.2H212.8c-4,0-7.4-2.5-8.6-6.1c-0.2-0.6-0.4-1.2-0.5-1.8
140 | 							c-0.1-0.4-0.1-0.8-0.1-1.3v-60.3c0-1.4,0.2-2.8,0.5-4.1c0.2-0.7,0.4-1.3,0.7-1.9c2.3-5.4,7.7-9.3,14-9.3h102.8
141 | 							C331,447.9,338.7,455.5,338.7,464.9z"/>
142 | 					</g>
143 | 				</g>
144 | 				<g class="st10">
145 | 					<g>
146 | 						<rect x="69.8" y="524.7" class="st11" width="269.7" height="53.4"/>
147 | 					</g>
148 | 				</g>
149 | 				<g class="st10">
150 | 					<g>
151 | 						<path class="st11" d="M341.7,474.8h20.4c1.5,0,2.8,1.3,2.8,2.8v76.3c0,13.4-10.8,24.2-24.2,24.2h-3.2V479
152 | 							C337.6,476.7,339.4,474.8,341.7,474.8z"/>
153 | 					</g>
154 | 				</g>
155 | 				<g class="st10">
156 | 					<g>
157 | 						<path class="st11" d="M65.7,474.8H45.2c-1.5,0-2.8,1.3-2.8,2.8v76.3c0,13.4,10.8,24.2,24.2,24.2h3.2V479
158 | 							C69.8,476.7,68,474.8,65.7,474.8z"/>
159 | 					</g>
160 | 				</g>
161 | 				<g>
162 | 					<g>
163 | 						<g>
164 | 							<rect x="87.3" y="578.1" class="st2" width="9.5" height="25.9"/>
165 | 						</g>
166 | 					</g>
167 | 					<g>
168 | 						<g>
169 | 							<rect x="312.6" y="578.1" class="st2" width="9.5" height="25.9"/>
170 | 						</g>
171 | 					</g>
172 | 				</g>
173 | 			</g>
174 | 			<g>
175 | 				<g>
176 | 					<path class="st8" d="M299.1,469.3c6-2.3,12.8-1.4,19,0.4c5.9,1.7,11.8,4.4,15.4,9.4c3.3,4.4,4.3,10.1,4.1,15.6
177 | 						c-0.3,5.5-1.8,10.8-3.3,16.1c-1.5,5.4-3.4,11.2-8.2,14.2c-4.3,2.7-9.9,2.2-14.9,1.3c-6.5-1.2-13-2.8-19.2-4.8
178 | 						c-3.4-1.1-6.9-2.5-8.9-5.4c-3.4-4.7-1.5-11.3,1.1-16.5c3.1-6.2,4.2-10.5,4.7-17.2C289.3,476.3,293.5,471.4,299.1,469.3z"/>
179 | 				</g>
180 | 				<g>
181 | 					<path class="st12" d="M337.5,494.3c0,0.1,0,0.2,0,0.3c-0.2,3.1-0.7,6.2-1.5,9.3c-9.6-7.1-21.1-11.6-33-13.1
182 | 						c-5.1-0.6-10.3-0.7-15.4-1.2c0.5-2.2,0.8-4.6,1-7.4c0-0.4,0.1-0.8,0.2-1.2c10.4,0.1,21,0.6,30.7,4.2
183 | 						C325.9,487.5,331.7,491.1,337.5,494.3z"/>
184 | 				</g>
185 | 				<g>
186 | 					<path class="st12" d="M333.2,514c-0.8,2.5-1.8,4.9-3.2,7c-6.5-3-13.5-4.9-20.6-5.4c-6.7-0.5-13.6,0.2-20.1-1.6
187 | 						c-2.8-0.8-5.4-2-8.1-3.2c-0.2-3.1,0.7-6.4,2-9.3C299.8,505.6,316.5,509.8,333.2,514z"/>
188 | 				</g>
189 | 			</g>
190 | 		</g>
191 | 		<g>
192 | 			<g>
193 | 				<g>
194 | 					<g>
195 | 						<g>
196 | 							<path class="st13" d="M139.7,504.3L139.7,504.3c4.9,1.2,7.9,6.1,6.8,10.9c-1,4.3-4.9,7.1-9.2,6.9h-0.5
197 | 								c-0.4,0-0.8-0.1-1.2-0.2c-4.9-1.2-7.9-6-6.7-10.9c1.1-4.6,5.4-7.5,10-6.9l0,0C139.2,504.1,139.4,504.2,139.7,504.3z"/>
198 | 						</g>
199 | 						<g class="st14">
200 | 							<path class="st2" d="M137.7,513.1L137.7,513.1L137.7,513.1z"/>
201 | 						</g>
202 | 						<g>
203 | 							<polygon class="st13" points="139.8,504.3 137.3,522.1 211.7,523.9 211.8,519.5 							"/>
204 | 						</g>
205 | 					</g>
206 | 					<g>
207 | 						<g>
208 | 							<path class="st6" d="M141.8,503.7l-6.4,19.2c-14.6,0.4-44.1-5.6-55-15.8l12.9-19.4L141.8,503.7z"/>
209 | 						</g>
210 | 						<g>
211 | 							<ellipse class="st5" cx="88.7" cy="498.7" rx="11.9" ry="11.9"/>
212 | 						</g>
213 | 						<g class="st14">
214 | 							<path class="st5" d="M88.7,498.7L88.7,498.7L88.7,498.7z"/>
215 | 						</g>
216 | 					</g>
217 | 					<g>
218 | 						<path class="st5" d="M215.6,509.7c-0.5,0.4-0.8,1-0.9,1.6c-0.1,0.6-0.1,1.2-0.2,1.9c-0.1,1.5-0.7,3-1.5,4.3
219 | 							c-0.4,0.7-0.9,1.3-1.2,2.1l-0.1,4.4c0.6,0.6,1.5,1.1,2.3,1.3s1.6,0.3,2.4,0.2h0.9l0.7-16.1h-0.9l0,0
220 | 							C216.6,509.3,216.1,509.4,215.6,509.7z"/>
221 | 					</g>
222 | 				</g>
223 | 				<g>
224 | 					<g>
225 | 						<g>
226 | 							<path class="st15" d="M143.1,459.2c1,0.6,1.4,1.7,0.9,2.7c-1.4,2.7-2.9,5.5-4.5,8.2s-3.4,5.4-5.7,7.9
227 | 								c-1.1,1.3-2.4,2.5-3.9,3.6s-3.3,2.1-5.4,2.6s-4.3,0.6-6.4,0.2s-3.9-1.1-5.5-1.9c-1.7-0.8-3.1-1.7-4.5-2.7s-2.7-2-4-3
228 | 								c-2.5-2.1-4.9-4.2-7.2-6.3c-4.6-4.3-8.9-8.6-13.2-12.9c-2.7-2.8-2.2-7.4,1-10.2s7.9-2.5,10.2,0.5c3.6,4.9,7.3,9.7,10.9,14.4
229 | 								c1.8,2.3,3.7,4.6,5.6,6.7c1,1,1.9,2,2.9,3c1,0.9,2,1.8,3,2.4c1,0.7,2,1.2,2.9,1.6c0.9,0.3,1.8,0.5,2.7,0.4
230 | 								c1.8-0.1,4-1.3,6.1-3.1c2.1-1.7,4.1-3.9,5.9-6.2c1.9-2.3,3.7-4.7,5.4-7.1C141,458.9,142.2,458.7,143.1,459.2z"/>
231 | 						</g>
232 | 					</g>
233 | 					<g>
234 | 						<path class="st4" d="M96.5,471.9l-11.7-12.7c-3.5-3.8-4.1-9.3-0.8-12.3l0,0c3.2-3,9.1-2.4,12.6,1.4l11.7,12.7L96.5,471.9z"/>
235 | 					</g>
236 | 				</g>
237 | 				<g>
238 | 					<path class="st4" d="M76.4,444.4L76.4,444.4c13-3.4,26.1,5.5,27.6,18.9l3.5,29.1c-8.4,6-21,16.7-32.6,16.5l-11-40.8
239 | 						C60.3,458,66.1,447.1,76.4,444.4z"/>
240 | 				</g>
241 | 				<g>
242 | 					<path class="st2" d="M69,487.1l-0.6,0.2l5.3,19.7l0.6-0.2L69,487.1z M106.7,481.3h-0.6l1.3,11c-8.1,5.7-20,15.8-31.2,16.5
243 | 						l0.1,0.6c9.7-0.6,20-8.2,27.6-13.8c1.3-1,2.6-1.9,3.8-2.7l0.3-0.2L106.7,481.3z M103.9,463.3l0.8,6.3l0.6-0.2l-0.8-6.2
244 | 						c-0.7-6.5-4.1-12.1-9.1-15.8l-0.5,0.4C99.7,451.3,103.2,456.8,103.9,463.3z M82,443.7c2.3,0,4.5,0.4,6.6,1l0.1-0.6
245 | 						c-2.1-0.7-4.4-1-6.8-1c-1.7,0-3.3,0.2-5,0.6l0.1,0.6C78.8,443.8,80.4,443.7,82,443.7z M67.2,449.2c-1.1,1.2-2.1,2.5-2.8,4
246 | 						c-2.4,4.6-2.9,10.1-1.1,15l2.5,9.3l0.6-0.2l-2.5-9.3c-2.3-6.7-0.6-13.7,3.9-18.5L67.2,449.2z"/>
247 | 				</g>
248 | 				<g>
249 | 					<g>
250 | 						<path class="st13" d="M83.5,437.4v10.9c-3,1.9-5.9,1.8-8.8-0.2v-10.9L83.5,437.4z"/>
251 | 					</g>
252 | 					<g>
253 | 						<path class="st15" d="M83.5,440.7v1.2c-1.3,0.8-3,1.2-4.6,1.3c-0.1,0-0.2,0-0.3,0c-1.5,0-2.9-0.6-3.9-1.6v-3.2L83.5,440.7z"/>
254 | 					</g>
255 | 					<g>
256 | 						<path class="st13" d="M87.4,424.8l-0.3,7.9l-0.1,1.7c-0.2,4.4-3.8,7.8-8.1,7.9c-0.4,0-0.9,0-1.3-0.1c-0.2,0-0.3-0.1-0.5-0.2
257 | 							H77c-0.6-0.2-1.2-0.6-1.7-1.1c-1-1.1-1.7-2.3-2.3-3.6c-0.5-1.1-1-2.2-1.4-3.3c-0.4-1.3-0.6-2.7-0.5-4.1l-0.1-5.4l13.8-3
258 | 							L87.4,424.8z"/>
259 | 					</g>
260 | 					<g>
261 | 						<path class="st6" d="M87.7,437c0,0-0.3-4.6-0.6-6.9l0,0c-0.3-2.2-0.9-4.2-2.4-3.8c-3.1,0.7-4.4-1.8-4.4-1.8s0,0,0-0.1
262 | 							c-0.9,0.1-1.8,0.3-2.8,0.6c-4.6,1.4-5.3,0.3-5.9-0.4c-1,3.7-0.3,8.3-0.2,8.7l0,0l0,0c0.1,0.2,0.1,0.4,0.2,0.6
263 | 							c0.3,1.1,0.8,2.2,1.4,3.3c0.5,1,1,2,1.7,2.9v0.7c-3.3-0.4-7.6-3.7-8.7-6.6c-4-10.5,1.4-17.3,9.6-19.3
264 | 							c7.1-1.8,11.4,4.6,13.2,10.5C89.8,429.1,88.4,436.1,87.7,437z"/>
265 | 					</g>
266 | 					<g>
267 | 						
268 | 							<ellipse transform="matrix(0.7331 -0.6801 0.6801 0.7331 -274.4744 163.3593)" class="st13" cx="70.9" cy="431.4" rx="3.2" ry="3.2"/>
269 | 					</g>
270 | 				</g>
271 | 			</g>
272 | 			<g>
273 | 				<g>
274 | 					<g>
275 | 						<path class="st13" d="M146,510.9L146,510.9c1.6,4.8-1,9.9-5.7,11.5c-4.2,1.4-8.7-0.5-10.7-4.2l-0.3-0.5
276 | 							c-0.2-0.3-0.3-0.7-0.4-1.1c-1.6-4.7,1-9.9,5.7-11.4c4.4-1.5,9.2,0.7,11.1,4.9l0,0C145.8,510.3,145.9,510.6,146,510.9z"/>
277 | 					</g>
278 | 					<g class="st14">
279 | 						<path class="st2" d="M137.4,513.8L137.4,513.8L137.4,513.8z"/>
280 | 					</g>
281 | 					<g>
282 | 						<polygon class="st13" points="146,510.9 129.5,518.2 167.1,582.4 170.9,580.2 						"/>
283 | 					</g>
284 | 				</g>
285 | 				<g>
286 | 					<path class="st6" d="M89.2,496.9L89.2,496.9c-6.4-1.4-12.7,2.7-14.1,9.1c-1.1,4.9,1.1,9.7,5,12.3l0,0c0,0,0,0,0.1,0
287 | 						c0.3,0.2,0.6,0.4,0.9,0.5c13,7.5,38.2,8.4,52.1,5.5l6.7-20.6L89.2,496.9z"/>
288 | 				</g>
289 | 				<g>
290 | 					<path class="st5" d="M181.3,578.3c-0.6-0.2-1.2-0.2-1.8,0s-1.1,0.5-1.7,0.8c-1.4,0.7-2.9,1-4.4,1c-0.8,0-1.6-0.1-2.4,0
291 | 						l-3.8,2.2c-0.2,0.9-0.1,1.8,0.1,2.6c0.2,0.8,0.6,1.5,1.1,2.2l0.4,0.8l14.1-7.9l-0.4-0.8l0,0
292 | 						C182.1,578.9,181.8,578.5,181.3,578.3z"/>
293 | 				</g>
294 | 			</g>
295 | 			<g>
296 | 				<g>
297 | 					<path class="st8" d="M119.1,471.3c-6.2,1.8-11.1,6.5-15,11.7c-3.7,4.9-6.8,10.6-6.8,16.7c0,5.5,2.6,10.7,6.1,14.9
298 | 						s7.9,7.6,12.3,10.9c4.5,3.4,9.5,6.9,15,6.4c5.1-0.5,9.2-4.2,12.7-7.9c4.5-4.8,8.7-10,12.5-15.4c2-2.9,4-6.1,3.9-9.6
299 | 						c-0.1-5.8-5.6-9.9-10.8-12.5c-6.2-3.1-9.6-5.9-14.1-10.9C131.1,471.1,124.7,469.7,119.1,471.3z"/>
300 | 				</g>
301 | 				<g>
302 | 					<path class="st12" d="M103.3,514.4c0.1,0.1,0.1,0.2,0.2,0.2c2,2.4,4.3,4.6,6.8,6.6c3.5-11.4,9.9-22,18.6-30.2
303 | 						c3.7-3.5,7.8-6.7,11.5-10.2c-1.8-1.5-3.4-3.2-5.2-5.3c-0.3-0.3-0.6-0.6-0.9-0.9c-8.3,6.3-16.5,13-22.1,21.7
304 | 						C108.5,502,106,508.3,103.3,514.4z"/>
305 | 				</g>
306 | 				<g>
307 | 					<path class="st12" d="M118.5,527.6c2.1,1.5,4.4,2.8,6.8,3.7c3.4-6.3,7.9-12,13.3-16.7c5.1-4.4,11-8,15.1-13.4
308 | 						c1.8-2.3,3.1-4.9,4.5-7.4c-1.7-2.6-4.4-4.6-7.2-6.3C140.2,500.9,129.3,514.2,118.5,527.6z"/>
309 | 				</g>
310 | 			</g>
311 | 			<g>
312 | 				<g>
313 | 					<g>
314 | 						<path class="st13" d="M143.4,505.3c0.1-1.2-0.7-2.2-1.9-2.4c-3.4-0.6-6.8-1.2-10.2-1.8c-3.4-0.7-6.7-1.4-9.9-2.3
315 | 							c-3.2-0.9-6.3-2-9.2-3.3c-2.9-1.3-5.5-3-7.8-4.9c-4.6-3.9-8.2-9.2-11.5-14.9c-0.4-0.7-0.8-1.4-1.2-2.2l-1.2-2.2
316 | 							c-0.8-1.5-1.6-3-2.3-4.5c-1.5-3-3-6.1-4.5-9.2c-2-3.9-6.8-5.4-10.7-3.3c-3.9,2.1-5.2,7.1-2.9,10.9c1.9,3,3.9,5.9,5.9,8.9
317 | 							c1,1.5,2,2.9,3.1,4.4l1.6,2.2c0.5,0.7,1.1,1.5,1.6,2.2c2.2,2.9,4.6,5.8,7.3,8.5c2.7,2.7,5.6,5.3,8.9,7.4s6.9,3.7,10.6,4.9
318 | 							c3.6,1.1,7.3,1.8,10.8,2.3c3.6,0.5,7.1,0.8,10.6,1c3.5,0.2,7,0.4,10.5,0.5C142.3,507.3,143.3,506.4,143.4,505.3z"/>
319 | 					</g>
320 | 				</g>
321 | 				<g>
322 | 					<path class="st4" d="M78.5,482.4l-9-15.3c-2.7-4.6-1.6-10.5,3.1-13.2l0,0c4.6-2.7,11-1.2,13.7,3.4l9,15.3L78.5,482.4z"/>
323 | 				</g>
324 | 				<g>
325 | 					<path class="st2" d="M72.3,453.4c-1.8,1.1-3.2,2.6-4,4.4l0.5,0.3c0.7-1.7,2-3.2,3.7-4.2c1.4-0.8,3-1.3,4.6-1.3l0.1-0.6
326 | 						C75.5,452,73.8,452.5,72.3,453.4z M92.4,466.6L92,467l3.2,5.5l-4.4,2.6l0.3,0.5l4.9-2.9L92.4,466.6z M83,453.3l-0.4,0.5
327 | 						c1.5,0.8,2.8,2,3.7,3.5l2.5,4.3l0.4-0.5l-2.4-4.1C85.9,455.4,84.6,454.2,83,453.3z M78.5,482.4l-2-3.4l-0.6,0.2l2.4,4.1
328 | 						l9.6-5.6l-0.6-0.4L78.5,482.4z M68.2,463.5l-0.6-0.1c0.2,1.4,0.7,2.7,1.4,4l4.3,7.3l0.6-0.2l-4.4-7.4
329 | 						C68.9,465.9,68.4,464.7,68.2,463.5z"/>
330 | 				</g>
331 | 			</g>
332 | 		</g>
333 | 		<g>
334 | 			<g>
335 | 				<rect x="33.1" y="358.5" class="st8" width="46" height="33.4"/>
336 | 			</g>
337 | 			<g>
338 | 				<polygon class="st12" points="79.1,391.9 79.1,404.7 61,391.9 				"/>
339 | 			</g>
340 | 			<g>
341 | 				<g>
342 | 					<path class="st4" d="M47.9,376.5l8,8.2l8.2-8c7.1-7-1-15.1-8-8.2C49.2,361.4,41.1,369.5,47.9,376.5z"/>
343 | 				</g>
344 | 			</g>
345 | 		</g>
346 | 		<g>
347 | 			<g>
348 | 				<g>
349 | 					<g>
350 | 						<g>
351 | 							<path class="st5" d="M592.5,492.2c0-14.6,1.7-27.8,5.1-39.2c4-13.5,10.2-24.1,18.6-31.4l2,2.3
352 | 								c-19.7,17.3-22.6,50.3-22.6,68.4L592.5,492.2z"/>
353 | 						</g>
354 | 					</g>
355 | 					<g>
356 | 						<g>
357 | 							<g>
358 | 								<path class="st5" d="M644.2,387.3l-27.5,35.5c-2.1,2-4.4,3.6-6.9,4c-4.3,0.7-11.3-2.8-13.6-6.5c-1.8-2.9-1.9-6.7-0.9-10
359 | 									s2.9-6.3,4.8-9.2c1.5,5,4.5,9.5,8.5,12.8c1.2,1,2.6,1.9,4.1,2.1s3.3-0.6,3.8-2s-0.3-3-1.4-4c-1.1-1-2.5-1.7-3.6-2.6
360 | 									c-2.4-1.9-3.8-4.9-3.6-8c0.1-3,1.8-6,4.3-7.6c0.2,6.6,5.7,12.6,12.3,13.3c0.5-1.8-0.6-3.7-1.8-5.2c-1.3-1.4-2.8-2.7-3.7-4.3
361 | 									c-1.3-2.4-1.2-5.5,0.4-7.7c1.6-2.2,4.4-3.4,7.1-3c0.6,1.7,0.4,3.6,0.3,5.4c-0.1,1.8,0,3.8,1.1,5.2c1.1,1.4,3.6,1.8,4.7,0.3
362 | 									c1.1-1.5-0.1-3.6,0-5.5c0.2-2.4,2.5-4.1,4.9-4.4C639.7,385.6,642,386.5,644.2,387.3z"/>
363 | 							</g>
364 | 						</g>
365 | 						<g>
366 | 							<g>
367 | 								<path class="st2" d="M641.9,433.4c-2.3,2.6-4.7,5.2-7.7,7s-6.6,2.7-9.9,1.7c-4.1-1.3-9.3-7.2-9.7-11.6
368 | 									c-0.2-2.5,0.8-5.2,2.2-7.7l27.5-35.5c1.3,2,2.7,4,3,6.3s-0.8,5.1-3,5.8c-1.8,0.6-4.1,0-5.3,1.4s-0.2,3.7,1.5,4.4
369 | 									c1.7,0.7,3.6,0.3,5.3-0.3c1.7-0.6,3.5-1.3,5.3-1.1c1.1,2.5,0.7,5.5-1.1,7.6s-4.7,3-7.3,2.3c-1.8-0.5-3.4-1.7-5.1-2.5
370 | 									c-1.7-0.9-3.8-1.4-5.5-0.5c2.3,6.2,9.5,10.1,16,8.6c-1,2.9-3.4,5.2-6.3,6c-2.9,0.9-6.2,0.3-8.6-1.5
371 | 									c-1.2-0.9-2.2-2.1-3.4-2.9c-1.3-0.8-3-1.2-4.2-0.4c-1.3,0.8-1.6,2.7-1,4.2c0.6,1.4,1.8,2.5,3,3.4
372 | 									C631.6,431.4,636.7,433.2,641.9,433.4z"/>
373 | 							</g>
374 | 						</g>
375 | 					</g>
376 | 				</g>
377 | 				<g>
378 | 					<g>
379 | 						<g>
380 | 							<path class="st5" d="M597.3,492.7c2.6-19.9,24.6-27.3,43.5-31.6l0.7,2.9c-17.9,4-38.7,11-41.1,29L597.3,492.7z"/>
381 | 						</g>
382 | 					</g>
383 | 					<g>
384 | 						<g>
385 | 							<g>
386 | 								<path class="st5" d="M670.1,456.3l-30.1,6.5c-1.9,0.7-3.6,1.6-4.6,3.1c-1.7,2.5-1.6,7.9,0,10.4c1.3,2,3.6,3.1,6,3.5
387 | 									s4.7,0,7.1-0.3c-2.6-2.4-4.5-5.6-5.4-9.1c-0.3-1-0.4-2.1-0.1-3.2c0.3-1,1.3-1.9,2.4-1.7c1,0.1,1.7,1.1,2.1,2.1
388 | 									c0.3,1,0.3,2,0.5,3c0.5,2,1.9,3.8,3.9,4.6c1.9,0.8,4.2,0.7,6-0.4c-4.1-2.1-6.1-7.3-4.6-11.6c1.3,0.3,2.2,1.5,2.7,2.7
389 | 									s0.8,2.5,1.6,3.6c1.1,1.5,3,2.3,4.9,2c1.8-0.3,3.4-1.7,3.9-3.5c-0.9-0.9-2.1-1.3-3.3-1.8s-2.4-1.1-2.9-2.2
390 | 									c-0.6-1.1-0.1-2.8,1.2-3s2.2,1.2,3.4,1.6c1.5,0.6,3.3-0.4,4.1-1.7C669.8,459.6,670,457.9,670.1,456.3z"/>
391 | 							</g>
392 | 						</g>
393 | 						<g>
394 | 							<g>
395 | 								<path class="st2" d="M640.8,444.1c-2.3,0.7-4.6,1.4-6.6,2.7c-2,1.3-3.7,3.3-4,5.7c-0.4,3,1.7,7.9,4.3,9.5
396 | 									c1.5,0.9,3.4,1.1,5.4,0.9l30.1-6.5c-0.8-1.4-1.7-2.9-3-3.8c-1.4-0.9-3.4-1-4.5,0.1c-0.9,0.9-1.2,2.5-2.4,2.9
397 | 									c-1.2,0.3-2.3-1-2.3-2.2s0.9-2.3,1.7-3.2c0.9-0.9,1.8-1.8,2.2-3c-1.2-1.4-3.2-2-5-1.6c-1.8,0.5-3.3,2-3.6,3.9
398 | 									c-0.2,1.3,0,2.6,0.1,3.9c0,1.3-0.3,2.8-1.3,3.5c-3.2-3.2-3.5-8.9-0.6-12.4c-2.1-0.2-4.2,0.6-5.6,2.1c-1.4,1.5-2,3.8-1.6,5.8
399 | 									c0.2,1,0.6,2,0.8,3c0.1,1-0.1,2.2-1,2.7c-0.9,0.6-2.2,0.2-2.9-0.6c-0.7-0.8-1-1.9-1.2-2.9
400 | 									C639,451.1,639.4,447.4,640.8,444.1z"/>
401 | 							</g>
402 | 						</g>
403 | 					</g>
404 | 				</g>
405 | 				<g>
406 | 					<g>
407 | 						<g>
408 | 							<path class="st5" d="M593.9,492.9c-15.8-42.7-21.8-49-50.6-79.2l2.2-2.1c29.2,30.6,35.3,36.9,51.3,80.2L593.9,492.9z"/>
409 | 						</g>
410 | 					</g>
411 | 					<g>
412 | 						<g>
413 | 							<g>
414 | 								<path class="st5" d="M507.6,369.3l37.5,44.2c2,3.2,3.4,6.5,3.3,9.8c-0.3,5.7-6.6,13.6-11.9,15.5c-4.2,1.5-9,0.6-12.9-1.6
415 | 									s-7.1-5.4-10.3-8.5c6.7-0.6,13.2-3.2,18.4-7.4c1.6-1.3,3.1-2.7,3.7-4.6c0.6-1.9,0.2-4.3-1.6-5.3c-1.7-1-3.8-0.4-5.4,0.7
416 | 									c-1.6,1.1-2.8,2.7-4.3,3.9c-3,2.5-7.2,3.4-11,2.5c-3.8-1-7.1-3.8-8.5-7.4c8.4,1.6,17.5-3.9,20.1-12c-2.2-1.1-4.9-0.3-7,0.9
417 | 									c-2.1,1.2-4.1,2.8-6.4,3.5c-3.3,1-7.2,0-9.6-2.6s-3.1-6.5-1.8-9.8c2.3-0.3,4.6,0.5,6.9,1.1s4.8,1.1,6.9,0
418 | 									c2.1-1,3.3-4.1,1.7-5.8c-1.7-1.8-4.6-0.8-6.9-1.5c-2.9-0.8-4.5-4.3-4.2-7.3C504.3,374.6,506,371.9,507.6,369.3z"/>
419 | 							</g>
420 | 						</g>
421 | 						<g>
422 | 							<g>
423 | 								<path class="st2" d="M565.3,384.6c2.6,3.6,5.3,7.3,6.7,11.5c1.5,4.2,1.7,9.1-0.5,13c-2.8,4.9-11.6,9.8-17.2,9.2
424 | 									c-3.3-0.4-6.4-2.3-9.2-4.8l-37.5-44.2c2.8-1.2,5.8-2.3,8.8-2.1c3,0.2,6.2,2.3,6.5,5.3c0.3,2.4-1.1,5.2,0.3,7.1
425 | 									c1.4,1.9,4.6,1.2,6-0.7c1.4-1.9,1.3-4.4,1.1-6.8s-0.7-4.7,0-7c3.4-0.7,7.2,0.7,9.3,3.4c2.1,2.8,2.5,6.8,0.9,9.9
426 | 									c-1.1,2.2-3,3.9-4.6,5.8c-1.5,1.9-2.7,4.4-2,6.8c8.5-1.2,15.3-9.3,15.2-17.9c3.3,2,5.6,5.7,5.9,9.6
427 | 									c0.3,3.9-1.3,7.9-4.3,10.5c-1.5,1.3-3.2,2.2-4.5,3.6c-1.4,1.4-2.3,3.4-1.6,5.2c0.7,1.9,3,2.7,5,2.4c2-0.3,3.7-1.6,5.2-2.9
428 | 									C559.9,397.1,563.6,391.1,565.3,384.6z"/>
429 | 							</g>
430 | 						</g>
431 | 					</g>
432 | 				</g>
433 | 				<g>
434 | 					<g>
435 | 						<g>
436 | 							<path class="st5" d="M584,496.7c-5.3-19-28.7-31.4-47.2-36.1l0.8-2.9c19.2,5,43.7,18,49.3,38.3L584,496.7z"/>
437 | 						</g>
438 | 					</g>
439 | 					<g>
440 | 						<g>
441 | 							<g>
442 | 								<path class="st5" d="M505.3,448.2l33.1,9.7c2,0.9,3.8,2.1,4.8,3.8c1.7,2.9,1.2,8.9-0.8,11.6c-1.6,2.1-4.3,3.2-7,3.4
443 | 									c-2.7,0.2-5.3-0.3-7.9-0.9c3.1-2.5,5.5-5.9,6.7-9.7c0.4-1.1,0.6-2.4,0.3-3.5c-0.3-1.2-1.3-2.2-2.5-2.1
444 | 									c-1.1,0.1-2,1.1-2.5,2.1c-0.4,1.1-0.5,2.2-0.8,3.3c-0.7,2.2-2.5,4.1-4.7,4.8c-2.2,0.8-4.8,0.4-6.7-0.9
445 | 									c4.7-2,7.4-7.7,6.1-12.6c-1.4,0.2-2.5,1.5-3.2,2.8s-1.1,2.7-2,3.9c-1.3,1.6-3.6,2.4-5.6,1.9s-3.7-2.2-4.1-4.2
446 | 									c1-0.9,2.5-1.3,3.8-1.7c1.3-0.4,2.7-1,3.4-2.2s0.3-3.1-1.1-3.4c-1.4-0.3-2.6,1.1-3.9,1.5c-1.7,0.5-3.6-0.7-4.5-2.3
447 | 									C505.4,451.9,505.3,450,505.3,448.2z"/>
448 | 							</g>
449 | 						</g>
450 | 					</g>
451 | 				</g>
452 | 			</g>
453 | 			<g>
454 | 				<g>
455 | 					<g>
456 | 						<polygon class="st8" points="552.9,499.7 553.4,503.4 563.1,576.4 619.5,576.4 629.2,503.4 629.7,499.7 						"/>
457 | 					</g>
458 | 				</g>
459 | 				<g>
460 | 					<g>
461 | 						<rect x="546.5" y="484.1" class="st8" width="89.6" height="15.6"/>
462 | 					</g>
463 | 				</g>
464 | 				<g>
465 | 					<g>
466 | 						<polygon class="st12" points="552.9,499.7 553.4,503.4 629.2,503.4 629.7,499.7 						"/>
467 | 					</g>
468 | 				</g>
469 | 			</g>
470 | 		</g>
471 | 		<g>
472 | 			<path class="st2" d="M671.3,608.1c0,1.1-0.4,2.1-1.2,2.8c-0.7,0.7-1.7,1.2-2.8,1.2H32.6c-2.2,0-4-1.8-4-4c0-1.1,0.4-2.1,1.2-2.8
473 | 				c0.7-0.7,1.7-1.2,2.8-1.2h634.7C669.6,604.2,671.3,605.9,671.3,608.1z"/>
474 | 		</g>
475 | 	</g>
476 | </g>
477 | </svg>
478 | 


--------------------------------------------------------------------------------
/src/views/home/assets/temp_news.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/temp_news.png


--------------------------------------------------------------------------------
/src/views/home/assets/temp_news.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/temp_news.psd


--------------------------------------------------------------------------------
/src/views/home/assets/temp_news2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/temp_news2.png


--------------------------------------------------------------------------------
/src/views/home/assets/temp_news3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BITNP/bitnp-website/00562ad692295f5d2377129f630349391b416498/src/views/home/assets/temp_news3.webp


--------------------------------------------------------------------------------
/src/views/home/home2.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {NSpace,NImage,NInput,NIcon,NButton} from 'naive-ui'
  3 | import CloudLightning from '@vicons/carbon/CloudLightning'
  4 | </script>
  5 | 
  6 | <template>
  7 |   <div id="sec1_outer">
  8 |     <n-space justify="center">
  9 |       <div id="sec1_outer2">
 10 |         <n-image id="icon" width="110" src="./src/assets/cover3.png"></n-image><br>
 11 |           <span id="mainTitle">
 12 |             北京理工大学网络开拓者协会
 13 |           </span><br>
 14 |           <span id="subTitle">
 15 |             网络无限·开拓不懈
 16 |           </span><br>
 17 |           <n-input id="mainInput" size="large" placeholder="站内搜索">
 18 |             <template #prefix>
 19 |               <n-icon size="20">
 20 |                 <CloudLightning></CloudLightning>
 21 |               </n-icon>
 22 |             </template>
 23 |           </n-input>
 24 |         <n-space style="margin-top: 50px;" justify="center">
 25 |           <div id="guideBox">
 26 |           </div>
 27 |         </n-space>
 28 |       </div>
 29 |     </n-space>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | export default {
 35 |   name: "home2.vue"
 36 | }
 37 | </script>
 38 | 
 39 | <style scoped>
 40 | html {
 41 |   font-size : 20px;
 42 | }
 43 | @media only screen and (min-width: 401px){
 44 |   html {
 45 |     font-size: 25px !important;
 46 |   }
 47 | }
 48 | @media only screen and (min-width: 428px){
 49 |   html {
 50 |     font-size: 26.75px !important;
 51 |   }
 52 | }
 53 | @media only screen and (min-width: 481px){
 54 |   html {
 55 |     font-size: 30px !important;
 56 |   }
 57 | }
 58 | @media only screen and (min-width: 569px){
 59 |   html {
 60 |     font-size: 35px !important;
 61 |   }
 62 | }
 63 | @media only screen and (min-width: 641px){
 64 |   html {
 65 |     font-size: 40px !important;
 66 |   }
 67 | }
 68 | 
 69 | #guideBox{
 70 |   width: 40vw;
 71 |   height: 20vw;
 72 |   background: #535bf2;
 73 | }
 74 | 
 75 | #icon{
 76 |   filter: brightness(1.06) contrast(1.1) saturate(1.1);
 77 | }
 78 | #mainTitle{
 79 |   font-size: 3rem;
 80 |   font-weight: bolder;
 81 |   color: #000000;
 82 | }
 83 | #subTitle{
 84 |   font-size: 1.8rem;
 85 |   /*font-weight: bold;*/
 86 | }
 87 | #mainInput{
 88 |   width: 20%;
 89 |   border-radius: 10px;
 90 |   margin-top: 5vh;
 91 |   text-align: start;
 92 |   box-shadow:1px 1px 2px rgba(75,75,75,0.42);
 93 | }
 94 | #sec1_outer{
 95 |   /*width: 100vw;*/
 96 |   padding-top: 1%;
 97 |   height: 100vh;
 98 |   /*background: #ff8137;*/
 99 | }
100 | #sec1_outer2{
101 |   width: 96vw;
102 |   /*height: 75vh;*/
103 |   filter: opacity(0.75);
104 |   background:url("src/views/home/assets/bg.png") 0% 0% / cover no-repeat;
105 |   border-radius: 30px;
106 |   padding-top: 12vh;
107 |   box-shadow:
108 |       4.2px 2.9px 2.6px rgba(0, 0, 0, 0.028),
109 |       14.1px 9.6px 8.7px rgba(0, 0, 0, 0.042)
110 |   ;
111 |   -webkit-animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
112 |   animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
113 | }
114 | </style>


--------------------------------------------------------------------------------
/src/views/home/timeLine.vue:
--------------------------------------------------------------------------------
  1 | <script setup >
  2 | import {reactive,onMounted} from "vue";
  3 | 
  4 | let e=reactive({es:{}});
  5 | 
  6 | onMounted(()=>{
  7 |   setTimeout(()=>{e.es={
  8 |     left:[
  9 |       {
 10 |         title:'LOREM',
 11 |         time:'2011 - NOW',
 12 |         context:', ultricies eget nibh. Duis et felis lectus. Donec orci libero, auctor eget sodales at, euismod venenatis nibh.'
 13 |       },{
 14 |         title: 'IPSUM',
 15 |         time:'2013',
 16 |         context: 'ero in nibh convallis sollici blandit neque in, ornare libero.'
 17 |       },{
 18 |         title: 'CONSECTETUR',
 19 |         time: '2007 - 2010',
 20 |         context: 'ero in nibh convallis sollici blandit neque in, ornare libero.'
 21 |       }
 22 |     ],
 23 |     right:[
 24 |       {
 25 |         title:'ORNARE',
 26 |         time:'2012 - 06.2013',
 27 |         context:'ipsum pulvinar, blandit neque in, ornare libero.'
 28 |       },{
 29 |         title: 'LIBERO',
 30 |         time:'2010 - 2011',
 31 |         context: 'elit. Nam et ipsum pulvina rnare libero. Nam et ipsum pulvinar, blandit neque in, ornare libero.'
 32 |       },{
 33 |         title: 'ADIPISCING',
 34 |         time: '2010',
 35 |         context: 'Nam et ipsum pulvinar, blandit neque in, ornare libero.'
 36 |       }
 37 |     ]
 38 |   };},500);
 39 | });
 40 | 
 41 | </script>
 42 | 
 43 | <template>
 44 |   <section id="timeline">
 45 | <!--    <span style="float: contour;font-size: 2rem;  font-family:'Raleway';padding-left: 15px;padding-bottom: 3rem;color: #e9ceb2;">近期活动</span>-->
 46 |     <div class="timeline">
 47 |       <canvas id="cvs3" ></canvas>
 48 |       <article>
 49 |         <h2></h2>
 50 |         <figure v-for="items in e.es.left">
 51 |           <figcaption>{{items.title}}</figcaption>
 52 |           <h6>{{items.time}}</h6>
 53 |           <p>{{items.context}}</p>
 54 |         </figure>
 55 |       </article>
 56 | 
 57 |       <article>
 58 |         <h2></h2>
 59 |         <figure v-for="items in e.es.right">
 60 |           <figcaption>{{items.title}}</figcaption>
 61 |           <h6>{{items.time}}</h6>
 62 |           <p>{{items.context}}</p>
 63 |         </figure>
 64 |       </article>
 65 |       <br style="clear:both">
 66 |     </div>
 67 |   </section>
 68 | </template>
 69 | 
 70 | <script>
 71 | import {defineComponent} from "vue";
 72 | 
 73 | export default defineComponent({
 74 |   name: "timeLine",
 75 |   data(){
 76 |     return{
 77 | 
 78 |     }
 79 |   },
 80 |   updated() {
 81 |     try {
 82 |       new Timeline(document.querySelector('#cvs3')).toggle(true);
 83 |     }
 84 |     catch (err){
 85 |       console.log(err)
 86 |     }
 87 |   }
 88 | });
 89 | 
 90 | // timeline drawing handler
 91 | function Timeline(cvs) {
 92 |   // console.log('begin');
 93 |   let self = this,
 94 |       paused = true,
 95 |       rafid = 0,
 96 |       mouse = {x: 0, y: 0},
 97 |       canvas = cvs,
 98 |       ctx = null;
 99 |   if(document.querySelector('#cvs3')==null)return;
100 |   // console.log(canvas);
101 |   self.lines = [];
102 | 
103 |   self.isOK = false;
104 |   self.options = {
105 |     speed: 0.1,
106 |     density: 8,
107 |     radius: 600 };
108 | 
109 |   self.targets = [
110 |     [29, 32, 48, 68],
111 |     [29, 33, 38]];
112 | 
113 |   self.dotColors = [
114 |     ['#fb8c00', 'rgba(255,148,14,0.35)', 'rgba(232,138,17,0.11)'],
115 |     ['#c0d317', 'rgba(208,222,15,0.3)', 'rgba(159,164,22,0.12)']];
116 | 
117 | 
118 |   self.isPaused = function () {
119 |     return paused;
120 |   };
121 | 
122 |   function InitDots() {
123 |     const tl = document.getElementsByClassName('timeline');
124 |     const top =document.getElementById('timeline').querySelector('h2').offsetHeight;
125 |     // const top = document.getElementById('timeline').
126 |     // querySelector('article').querySelector('figure').
127 |     // querySelector('figcaption').offsetHeight;
128 |     self.lines[0].dots = [];
129 |     let y = top;
130 | 
131 |     document.getElementById('timeline').
132 |     querySelector('article').
133 |     querySelectorAll('figure').
134 |     forEach(function (e) {
135 | 
136 |       self.lines[0].dots.push([e.offsetWidth + 20, y + 20]);
137 |       // console.log(e);
138 |       y += e.offsetHeight;
139 |     });
140 | 
141 |     self.lines[1].dots = [];
142 |     y = top;
143 |     document.getElementById('timeline').
144 |     querySelector('article').
145 |     querySelectorAll('figure').
146 |     forEach(function (e) {
147 | 
148 |       self.lines[1].dots.push([canvas.width - e.offsetWidth - 20, y + 20]);
149 | 
150 |       y += e.offsetHeight;
151 |     });
152 |   }
153 | 
154 |   function OnResize() {
155 |     if(document.querySelector('#cvs3')==null)return;
156 |     canvas.width = canvas.offsetWidth;
157 |     canvas.height = canvas.offsetHeight;
158 | 
159 |     var wasPaused = paused;
160 |     self.toggle(false);
161 |     // Init lines
162 |     self.lines[0].reset(canvas.offsetWidth / 2 - 15);
163 |     self.lines[1].reset(canvas.offsetWidth / 2 + 15);
164 | 
165 |     InitDots();
166 | 
167 |     self.toggle(!wasPaused);
168 |   }
169 | 
170 |   function init() {
171 |     // console.log('init');
172 |     let result = false;
173 |     try {
174 |       // console.log(document.querySelector('canvas'));
175 |       result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));
176 | 
177 |       self.lines[0] = new Line(-90, canvas.offsetHeight - 90, '#ffc70f', self.options, mouse);
178 |       self.lines[1] = new Line(-90, canvas.offsetHeight - 90, '#e0e543', self.options, mouse);
179 | 
180 |     } catch (e) {
181 |       console.log(e);
182 |       return false;
183 |     }
184 | 
185 |     document.querySelector('canvas').addEventListener('mousemove',function (e) {
186 |       if(document.querySelector('#cvs3')==null)document.querySelector('canvas').removeEventListener('mousemove',()=>{});
187 |       if (e.offsetX) {
188 |         mouse.x = e.offsetX;
189 |         mouse.y = e.offsetY;
190 |         // console.log(e);
191 |       } else
192 |       if (e.layerX) {
193 |         mouse.x = e.layerX;
194 |         mouse.y = e.layerY;
195 |       } else
196 |       {
197 |         mouse.x = e.pageX - canvas.offsetLeft;
198 |         mouse.y = e.pageY - canvas.offsetTop;
199 |       }
200 |     });
201 | 
202 |     window.addEventListener('resize',OnResize);
203 | 
204 |     OnResize();
205 | 
206 |     return result;
207 |   }
208 | 
209 |   function Line(y, height, color, options, mouse) {
210 |     var self = this;
211 | 
212 |     self.color = color;
213 |     self.options = options;
214 |     self.mouse = mouse;
215 |     self.height = height;
216 |     self.dots = [];
217 |     self.y = y;
218 | 
219 |     self.points = [];
220 | 
221 |     self.reset = function (x, f) {
222 |       self.points = [];
223 |       for (let y = self.y; y < self.height; y += self.options.density)
224 |           // console.log(`push x[${y-self.y}]:${x}`);
225 |         self.points.push(new Point(x, y, self.color));
226 |     };
227 | 
228 |     self.update = function () {
229 |       for (let i = 0; i < self.points.length; i++)
230 |         self.points[i].update(self.mouse, self.options);
231 |     };
232 | 
233 |     function Point(x, y) {
234 |       this.y = y;
235 |       this.x = x;
236 |       this.base = { x: x, y: y };
237 | 
238 |       this.update = function (mouse, options) {
239 |         var dx = this.x - mouse.x / 1.4,
240 |             dy = this.y - mouse.y / 1.4,
241 |             alpha = Math.atan2(dx, dy),
242 |             alpha = alpha > 0 ? alpha : 2 * Math.PI + alpha,
243 |             d = options.radius / Math.sqrt(dx * dx + dy * dy);
244 | 
245 |         this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed;
246 |         this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed;
247 |       };
248 |     }
249 |   }
250 | 
251 |   function drawCircle(p, r, color) {
252 |     ctx.fillStyle = color;
253 |     ctx.beginPath();
254 |     ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true);
255 |     ctx.closePath();
256 |     ctx.fill();
257 |   }
258 | 
259 |   function drawLine(p1, p2) {
260 |     ctx.beginPath();
261 |     ctx.moveTo(p1.x, p1.y);
262 |     ctx.lineTo(p2.x, p2.y);
263 |     ctx.stroke();
264 |     ctx.closePath();
265 |   }
266 | 
267 |   function redraw() {
268 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
269 | 
270 |     for (var i = 0; i < 2; i++) {
271 |       var points = self.lines[i].points;
272 |       // console.log(self);
273 |       ctx.beginPath();
274 |       ctx.lineWidth = 2;
275 |       ctx.strokeStyle = self.lines[i].color;
276 |       ctx.moveTo(points[15].x, points[15].y);
277 | 
278 |       for (var j = 15; j < points.length - 2; j++) {
279 |         var point = points[j];
280 | 
281 |         var xc = (points[j + 1].x + point.x) / 2;
282 |         var yc = (points[j + 1].y + point.y) / 2;
283 | 
284 | 
285 |         ctx.quadraticCurveTo(point.x, point.y, xc, yc);
286 |       }
287 |       ctx.stroke();
288 |       ctx.closePath();
289 | 
290 | 
291 |       // Dots
292 |       ctx.lineWidth = 1.2;
293 |       ctx.strokeStyle = self.dotColors[i][2];
294 |       for (var j = 0; j < self.lines[i].dots.length; j++) {
295 |         var dot = self.lines[i].dots[j],
296 |             id = self.targets[i][j];
297 |         if(id==undefined){
298 |           // console.log(self.targets,`i:${i},j:${j}`,`dotslength:${self.lines[i].dots.length}`);
299 |           return;
300 |         }
301 |         try {
302 |           var dot2 = [
303 |             (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2,
304 |             (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2];
305 |         }catch (err){
306 |           // console.log(err)
307 |         }
308 | 
309 | 
310 |         var p1 = { x: dot[0], y: dot[1] };
311 |         var p2 = { x: dot2[0], y: dot2[1] };
312 | 
313 | 
314 |         drawLine(p1, p2);
315 |         drawCircle(p1, 3, self.dotColors[i][0]);
316 | 
317 |         drawCircle(p2, 11, self.dotColors[i][1]);
318 |         drawCircle(p2, 5.5, self.dotColors[i][0]);
319 |       }
320 |     }
321 |   }
322 | 
323 |   function animate() {
324 |     rafid = requestAnimationFrame(animate);
325 | 
326 |     self.lines[0].update();
327 |     self.lines[1].update();
328 | 
329 |     redraw();
330 |   }
331 | 
332 |   self.toggle = function (run) {
333 |     if(document.querySelector('#cvs3')==null)return;
334 |     if (!self.isOK) return false;
335 | 
336 |     if (run === undefined)
337 |       self.toggle(!paused);else
338 | 
339 |     if (!!run && paused) {
340 |       paused = false;
341 |       animate();
342 |     } else
343 |     if (!!!run) {
344 |       paused = true;
345 |       cancelAnimationFrame(rafid);
346 |     }
347 |     return true;
348 |   };
349 | 
350 | 
351 |   self.isOK = init();
352 | }
353 | 
354 | </script>
355 | 
356 | <style scoped>
357 | @font-face {
358 |   font-family: 'Lato';
359 |   font-style: normal;
360 |   font-weight: 400;
361 |   src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
362 | }
363 | @font-face {
364 |   font-family: 'Raleway';
365 |   font-style: normal;
366 |   font-weight: 400;
367 |   src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrQ.ttf) format('truetype');
368 | }
369 | * {
370 |   margin: 0;
371 |   padding: 0;
372 |   box-sizing: border-box;
373 | }
374 | #timeline {
375 |   padding-top: 5%;
376 |   /*height: 100%;*/
377 | }
378 | .timeline {
379 |   /*height: 78%;*/
380 |   position: relative;
381 | }
382 | .timeline canvas {
383 |   position: absolute;
384 |   width: 100%;
385 |   height: 100%;
386 |   left: 0;
387 |   top: 0;
388 | }
389 | .timeline figcaption {
390 |   font: 900 190% 'Lato';
391 |   text-transform: uppercase;
392 |   -webkit-text-stroke: 0.25px;
393 | }
394 | .timeline h2,h3 {
395 |   font: 400 400% 'Raleway';
396 |   padding-bottom: 3rem;
397 |   color: #e9cbb2;
398 | }
399 | .timeline h6 {
400 |   color: #f58300;
401 |   font: 400 80% Tahoma;
402 | }
403 | .timeline p,
404 | .timeline ol {
405 |   font: 400 95% 'Raleway';
406 |   padding: 3px 0 20px 0;
407 |   color: #575757;
408 |   text-align: justify;
409 |   width: 70%;
410 | }
411 | .timeline ol {
412 |   list-style: disc;
413 |   margin-top: -20px;
414 |   padding-left: 40px;
415 | }
416 | .timeline figure {
417 |   float: right;
418 |   width: 100%;
419 | }
420 | .timeline article {
421 |   position: relative;
422 |   width: 38%;
423 |   overflow: hidden;
424 |   margin-bottom: 100px;
425 | }
426 | .timeline article:first-of-type {
427 |   float: left;
428 |   text-align: right;
429 | }
430 | .timeline article:first-of-type p,
431 | .timeline article:first-of-type figure {
432 |   float: right;
433 | }
434 | .timeline article:last-of-type {
435 |   text-align:left;
436 |   float: right;
437 | }
438 | .timeline article:last-of-type h2 {
439 |   color: #e0ddaa;
440 | }
441 | .timeline article:last-of-type h6,
442 | .timeline article:last-of-type a {
443 |   color: #B3D600;
444 | }
445 | .timeline article:last-of-type a:hover {
446 |   color: #cdd40d;
447 | }
448 | </style>


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   // 路径代理
 8 |   resolve: {
 9 |     alias: [
10 |       { find: '@', replacement: '/src' },
11 |       { find: 'views', replacement: '/src/views' },
12 |       { find: 'components', replacement: '/src/components' },
13 |     ]
14 |   },
15 |   // server:{
16 |   //   host:'10.196.134.108',
17 |   //   port:80,
18 |   // }
19 | })
20 | 


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