1
This commit is contained in:
username
parent
8133c3c0fb
commit
8c4bc4485e
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
17
.eslintrc.js
Normal file
17
.eslintrc.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'@vue/standard'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@babel/eslint-parser'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
24
README.md
24
README.md
@ -1,2 +1,24 @@
|
|||||||
# aabbcc
|
# boke-ui
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
9823
package-lock.json
generated
Normal file
9823
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
package.json
Normal file
37
package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "boke-ui",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.6.8",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
|
"element-ui": "^2.15.14",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"@vue/eslint-config-standard": "^6.1.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-import": "^2.25.3",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^5.1.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"less": "^4.0.0",
|
||||||
|
"less-loader": "^8.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
src/App.vue
Normal file
34
src/App.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view />
|
||||||
|
<trigger></trigger>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import trigger from '@/components/trigger.vue'
|
||||||
|
export default {
|
||||||
|
|
||||||
|
components: {
|
||||||
|
trigger
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
/* 针对 WebKit 浏览器 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px; /* 滚动条宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #2ee600; /* 滑块颜色 */
|
||||||
|
border-radius: 10px; /* 滑块圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1ef; /* 轨道颜色 */
|
||||||
|
border-radius: 10px; /* 轨道圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
9
src/api/MySQLCon.js
Normal file
9
src/api/MySQLCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getLMysql (data) {
|
||||||
|
return request({
|
||||||
|
url: '/mysqlList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/VueCon.js
Normal file
9
src/api/VueCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getVueCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/vueList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/cssCon.js
Normal file
9
src/api/cssCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getcssCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/cssList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/cyuyan.js
Normal file
9
src/api/cyuyan.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getCyuyan (data) {
|
||||||
|
return request({
|
||||||
|
url: '/cList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/dgCon.js
Normal file
9
src/api/dgCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getdgCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/dgList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/home.js
Normal file
9
src/api/home.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// import request from '../utils/request'
|
||||||
|
|
||||||
|
// export function getHome (data) {
|
||||||
|
// return request({
|
||||||
|
// url: '/bing',
|
||||||
|
// method: 'get',
|
||||||
|
// data: data
|
||||||
|
// })
|
||||||
|
// }
|
||||||
9
src/api/htmlCon.js
Normal file
9
src/api/htmlCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function gethtmlCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/htmlList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/javaCon.js
Normal file
9
src/api/javaCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getjavaCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/javaList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/jiwang.js
Normal file
9
src/api/jiwang.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getjiwang (data) {
|
||||||
|
return request({
|
||||||
|
url: '/jiwangList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/jquery.js
vendored
Normal file
9
src/api/jquery.js
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getJquery (data) {
|
||||||
|
return request({
|
||||||
|
url: '/jQueryList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/jsCon.js
Normal file
9
src/api/jsCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getjsCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/jsList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/linuxCon.js
Normal file
9
src/api/linuxCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getLinuxCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/LinuxList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/list.js
Normal file
9
src/api/list.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getlist (data) {
|
||||||
|
return request({
|
||||||
|
url: '/tags/:id',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/login.js
Normal file
9
src/api/login.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function login (data) {
|
||||||
|
return request({
|
||||||
|
url: '/login',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/nodeCon.js
Normal file
9
src/api/nodeCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getnodeCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/nodeList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/phpCon.js
Normal file
9
src/api/phpCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getphpCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/phpList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/pythonCon.js
Normal file
9
src/api/pythonCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getpythonCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/pythonList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
0
src/api/register.js
Normal file
0
src/api/register.js
Normal file
9
src/api/subject.js
Normal file
9
src/api/subject.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getSubject (id) {
|
||||||
|
return request({
|
||||||
|
url: '/users',
|
||||||
|
method: 'get',
|
||||||
|
params: { id }
|
||||||
|
})
|
||||||
|
}
|
||||||
11
src/api/tags.js
Normal file
11
src/api/tags.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getTags (id) {
|
||||||
|
return request({
|
||||||
|
url: '/tags',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/vsCon.js
Normal file
9
src/api/vsCon.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getvsCon (data) {
|
||||||
|
return request({
|
||||||
|
url: '/vsList',
|
||||||
|
method: 'get',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
BIN
src/assets/images/789.jpg
Normal file
BIN
src/assets/images/789.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
src/assets/images/899.jpg
Normal file
BIN
src/assets/images/899.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/images/Android.jpg
Normal file
BIN
src/assets/images/Android.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/images/AndroidAPP.jpg
Normal file
BIN
src/assets/images/AndroidAPP.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/images/Angular.jpg
Normal file
BIN
src/assets/images/Angular.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/Cocos.png
Normal file
BIN
src/assets/images/Cocos.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/images/Kami2.jpg
Normal file
BIN
src/assets/images/Kami2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/images/ThinkPHP.jpg
Normal file
BIN
src/assets/images/ThinkPHP.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
src/assets/images/UGUI.jpg
Normal file
BIN
src/assets/images/UGUI.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/assets/images/bg.jpg
Normal file
BIN
src/assets/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/images/cover.png
Normal file
BIN
src/assets/images/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
src/assets/images/default.jpg
Normal file
BIN
src/assets/images/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/disc.png
Normal file
BIN
src/assets/images/disc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/images/java.png
Normal file
BIN
src/assets/images/java.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/kecheng/C.jpg
Normal file
BIN
src/assets/images/kecheng/C.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/images/kecheng/CSS3.jpg
Normal file
BIN
src/assets/images/kecheng/CSS3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/kecheng/HTML.jpg
Normal file
BIN
src/assets/images/kecheng/HTML.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/kecheng/JavaScript.jpg
Normal file
BIN
src/assets/images/kecheng/JavaScript.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/images/kecheng/Linux.jpg
Normal file
BIN
src/assets/images/kecheng/Linux.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/images/kecheng/MySQL.jpg
Normal file
BIN
src/assets/images/kecheng/MySQL.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
src/assets/images/kecheng/diangon.jpg
Normal file
BIN
src/assets/images/kecheng/diangon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/images/kecheng/jQuery.jpg
Normal file
BIN
src/assets/images/kecheng/jQuery.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/kecheng/java.jpg
Normal file
BIN
src/assets/images/kecheng/java.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/images/kecheng/jiwang.jpg
Normal file
BIN
src/assets/images/kecheng/jiwang.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/images/kecheng/node.jpg
Normal file
BIN
src/assets/images/kecheng/node.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/kecheng/php.jpg
Normal file
BIN
src/assets/images/kecheng/php.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/images/kecheng/python.jpg
Normal file
BIN
src/assets/images/kecheng/python.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/images/kecheng/vscode.jpg
Normal file
BIN
src/assets/images/kecheng/vscode.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/images/kecheng/vue.jpg
Normal file
BIN
src/assets/images/kecheng/vue.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/images/line.png
Normal file
BIN
src/assets/images/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/line01.png
Normal file
BIN
src/assets/images/line01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/line02.png
Normal file
BIN
src/assets/images/line02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/login.jpg
Normal file
BIN
src/assets/images/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
src/assets/images/logo1.png
Normal file
BIN
src/assets/images/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/images/musicLogo.png
Normal file
BIN
src/assets/images/musicLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
src/assets/images/person.png
Normal file
BIN
src/assets/images/person.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/images/person01.png
Normal file
BIN
src/assets/images/person01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/play.png
Normal file
BIN
src/assets/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/player_bar.png
Normal file
BIN
src/assets/images/player_bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/player_title.png
Normal file
BIN
src/assets/images/player_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/shutoff.png
Normal file
BIN
src/assets/images/shutoff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/sub.jpg
Normal file
BIN
src/assets/images/sub.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 KiB |
BIN
src/assets/images/sub2.jpg
Normal file
BIN
src/assets/images/sub2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
src/assets/images/sub3.jpg
Normal file
BIN
src/assets/images/sub3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
src/assets/images/table.png
Normal file
BIN
src/assets/images/table.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/images/unity.png
Normal file
BIN
src/assets/images/unity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
src/assets/images/zoom.png
Normal file
BIN
src/assets/images/zoom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/图层 2.png
Normal file
BIN
src/assets/images/图层 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
48
src/assets/styles/compon.less
Normal file
48
src/assets/styles/compon.less
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
.kecheng {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
.empty{
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 79px,
|
||||||
|
#abced4 79px,
|
||||||
|
#abced4 81px,
|
||||||
|
transparent 81px
|
||||||
|
),
|
||||||
|
linear-gradient(#eee 0.1em, transparent 0.1em);
|
||||||
|
background-size: 100% 1.2em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 1100px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 10px 0 0 85px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1100px;
|
||||||
|
height: 40px;
|
||||||
|
text-indent: 2em;
|
||||||
|
margin-left: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
word-wrap: break-word; /* 适用于大多数浏览器 */
|
||||||
|
overflow-wrap: break-word; /* 适用于最新的浏览器 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
135
src/assets/styles/home.less
Normal file
135
src/assets/styles/home.less
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
.box-shadow-mixin() {
|
||||||
|
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1),
|
||||||
|
-5px -10px 20px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background: url("../images/sub.jpg") no-repeat center center fixed;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
height: 100vh;
|
||||||
|
margin-top: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
width: 1200px;
|
||||||
|
// height: 2200px;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
.head-left {
|
||||||
|
width: 800px;
|
||||||
|
// height: 2200px;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
.content-left {
|
||||||
|
width: 752px;
|
||||||
|
background-color: #fff;
|
||||||
|
.box-shadow-mixin();
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.con-title-left {
|
||||||
|
a:hover {
|
||||||
|
color: #006cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 200px;
|
||||||
|
// height: 200px;
|
||||||
|
margin-top: 10px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: gray;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-right {
|
||||||
|
float: right;
|
||||||
|
width: 390px;
|
||||||
|
// height: 2200px;
|
||||||
|
|
||||||
|
.develop {
|
||||||
|
width: 390px;
|
||||||
|
height: 215px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 390px;
|
||||||
|
height: 215px;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 390px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: white;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.develop:hover img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
/* 鼠标经过时图片放大到原始大小的 1.2 倍 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-right {
|
||||||
|
width: 390px;
|
||||||
|
height: 337px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.con-title-right {
|
||||||
|
.box-shadow-mixin();
|
||||||
|
h3 {
|
||||||
|
padding: 40px 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 50px;
|
||||||
|
margin: 10px 0 0 40px;
|
||||||
|
border: 1px solid black;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
margin: 10px;
|
||||||
|
|
||||||
|
.el-tag {
|
||||||
|
margin: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-right:hover p {
|
||||||
|
width: 80px;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/assets/styles/index.css
Normal file
14
src/assets/styles/index.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
*{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
441
src/components/CommentsChild.vue
Normal file
441
src/components/CommentsChild.vue
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
:class="count > 0 ? '' : 'comments-child-contain'"
|
||||||
|
v-for="(item, index) in comments"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="comments-child" :style="{ paddingLeft: 30 * count + 'px' }">
|
||||||
|
<div
|
||||||
|
:class="count > 0 ? 'comments-child-img-sm' : 'comments-child-img'"
|
||||||
|
>
|
||||||
|
<img v-if="item.senderAvatar" :src="item.senderAvatar" alt="" />
|
||||||
|
<img v-else :src="require('@/assets/images/default.jpg')" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="comments-child-content">
|
||||||
|
<!-- 用户信息 -->
|
||||||
|
<div class="comments-child-username-contain">
|
||||||
|
<h3 class="comments-child-username">{{ item.senderName }}</h3>
|
||||||
|
<div
|
||||||
|
v-if="item.receiverId && item.receiverId !== ''"
|
||||||
|
class="comments-child-replay"
|
||||||
|
>
|
||||||
|
<span class="reply-text">回复</span>
|
||||||
|
<h4 class="comments-child-at-username">
|
||||||
|
@{{ item.receiverName }}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<p class="comments-comments-child">
|
||||||
|
{{ item.text }}
|
||||||
|
</p>
|
||||||
|
<div class="comments-child-bottom-contain">
|
||||||
|
<!-- 发布时间 -->
|
||||||
|
<span class="comments-child-time"> {{ item.postDate }} </span>
|
||||||
|
<!--删除和回复-->
|
||||||
|
<div class="comments-child-right">
|
||||||
|
<span class="fa fa-thumbs-up delete" @click="commentLike(item)">{{
|
||||||
|
item.likes
|
||||||
|
}}</span>
|
||||||
|
<span
|
||||||
|
class="fa fa-trash-o delete"
|
||||||
|
@click="commentDelete(item, $event)"
|
||||||
|
v-show="false"
|
||||||
|
>删除</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="layerCount"
|
||||||
|
class="fa fa-comment-o comments"
|
||||||
|
@click="goReply(item, $event)"
|
||||||
|
>回复</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reply-comment">
|
||||||
|
<img v-if="userAvatar" :src="userAvatar" alt="" />
|
||||||
|
<img v-else :src="require('@/assets/images/default.jpg')" alt="" />
|
||||||
|
<input
|
||||||
|
:class="inputStatusClass"
|
||||||
|
type="text"
|
||||||
|
v-model="replyComment"
|
||||||
|
@keyup.enter="replySumbit(item, $event)"
|
||||||
|
/>
|
||||||
|
<button @click="replySumbit(item, $event)">回复</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--递归调用-->
|
||||||
|
<div v-if="item.children">
|
||||||
|
<comments-child
|
||||||
|
:comments="item.children"
|
||||||
|
:count="layerCount"
|
||||||
|
></comments-child>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CommentsChild',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 回复评论
|
||||||
|
replyComment: '',
|
||||||
|
// 非空验证
|
||||||
|
hasNoConent: false,
|
||||||
|
inputStatusClass: '',
|
||||||
|
layerCount: 0,
|
||||||
|
userAvatar: '',
|
||||||
|
// 点赞数
|
||||||
|
like: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.layerCount = this.count
|
||||||
|
this.layerCount++
|
||||||
|
// 子评论限制为一层
|
||||||
|
// if (_this.layerCount < 1) {
|
||||||
|
// _this.layerCount++
|
||||||
|
// } else {
|
||||||
|
// _this.layerCount = 1
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 卡片内容
|
||||||
|
comments: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 子评论计数
|
||||||
|
count: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
methods: {
|
||||||
|
// 删除
|
||||||
|
commentDelete (obj) {},
|
||||||
|
// 点赞
|
||||||
|
commentLike (obj) {
|
||||||
|
obj.likes++
|
||||||
|
},
|
||||||
|
// 显示回复输入框
|
||||||
|
goReply (obj, event) {
|
||||||
|
this.inputStatusClass = ''
|
||||||
|
this.replyComment = ''
|
||||||
|
const _thisDom = event.currentTarget
|
||||||
|
const replyDom = _thisDom.parentNode.parentNode.nextElementSibling
|
||||||
|
// 显示回复输入
|
||||||
|
if (replyDom.style.display === '' || replyDom.style.display === 'none') {
|
||||||
|
replyDom.style.display = 'flex'
|
||||||
|
const replyInput = replyDom.getElementsByTagName('input')[0]
|
||||||
|
// 添加回复人信息
|
||||||
|
const placeContent = '回复' + ' @ ' + obj.senderName
|
||||||
|
replyInput.setAttribute('placeholder', placeContent)
|
||||||
|
} else {
|
||||||
|
replyDom.style.display = 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 回复信息提交
|
||||||
|
replySumbit (obj, event) {
|
||||||
|
const _thisDom = event.currentTarget
|
||||||
|
const replyDom = _thisDom.parentNode
|
||||||
|
|
||||||
|
// 回复内容非空验证
|
||||||
|
if (!this.replyComment || this.replyComment === '') {
|
||||||
|
this.hasNoConent = true
|
||||||
|
this.inputStatusClass = 'no-content-warn'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.inputStatusClass = ''
|
||||||
|
const reply = {
|
||||||
|
objectId: obj.objectId,
|
||||||
|
parentId: obj.id,
|
||||||
|
type: 'Class',
|
||||||
|
text: this.replyComment,
|
||||||
|
senderId: obj.userId,
|
||||||
|
receiverId: obj.senderId,
|
||||||
|
senderAvatar: '',
|
||||||
|
children: [],
|
||||||
|
receiverName: obj.senderName,
|
||||||
|
senderName: obj.senderName,
|
||||||
|
postDate: obj.postDate,
|
||||||
|
id: obj.id,
|
||||||
|
likes: 0
|
||||||
|
}
|
||||||
|
// 更新回复数组，将新回复添加到数组尾部
|
||||||
|
this.$set(obj.children, obj.children.length, reply)
|
||||||
|
// 清空内容
|
||||||
|
this.replyComment = ''
|
||||||
|
replyDom.style.display = 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 评论内容区域 */
|
||||||
|
.msg-content .comments-child {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
padding: 18px 10px 18px 10px;
|
||||||
|
}
|
||||||
|
.comments-child-contain {
|
||||||
|
border-bottom: 1px solid #d3d9e1;
|
||||||
|
padding: 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 子评论头像 */
|
||||||
|
.comments-child .comments-child-img {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 20px 0 0;
|
||||||
|
}
|
||||||
|
/* 子评论头像 */
|
||||||
|
.comments-child-img > img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 子评论小头像 */
|
||||||
|
.comments-child .comments-child-img-sm {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 20px 0 0;
|
||||||
|
}
|
||||||
|
/* 子评论小头像 */
|
||||||
|
.comments-child-img-sm > img {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 子评论用户名 */
|
||||||
|
.comments-child-username {
|
||||||
|
color: #504f4f;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
width: auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 子评论回复用户名 */
|
||||||
|
.comments-child-at-username {
|
||||||
|
margin: 0;
|
||||||
|
color: #00a1d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child-username-contain {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 回复内容 */
|
||||||
|
.reply-text {
|
||||||
|
margin: 0 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000 !important;
|
||||||
|
font-family: "Lato", Verdana, sans-serif !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child-replay {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child-content {
|
||||||
|
flex: 9;
|
||||||
|
}
|
||||||
|
/* 回复时间 */
|
||||||
|
.comments-child-time {
|
||||||
|
color: #767575;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.comments-comments-child {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000 !important;
|
||||||
|
font-family: "Lato", Verdana, sans-serif !important;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child-bottom-contain {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
/* 右边点赞和评论 */
|
||||||
|
.comments-child-right {
|
||||||
|
position: absolute;
|
||||||
|
right: 1.5%;
|
||||||
|
top: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.comments-child-right span {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
/* 删除评论 */
|
||||||
|
.delete:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.delete::before {
|
||||||
|
/* 想使用的icon的十六制编码，去掉&#x之后的 */
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
/* 评论字体图标 */
|
||||||
|
.comments::before {
|
||||||
|
/* 想使用的icon的十六制编码，去掉&#x之后的 */
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
/* 点赞字体图标 */
|
||||||
|
.praise::before {
|
||||||
|
/* 想使用的icon的十六制编码，去掉&#x之后的 */
|
||||||
|
content: "\ec7f";
|
||||||
|
/* 必须加 */
|
||||||
|
font-family: "iconfont";
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.to_reply {
|
||||||
|
color: rgb(106, 106, 106);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 评论 */
|
||||||
|
.reply-comment {
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* 评论输入框头像 */
|
||||||
|
.reply-comment > img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
/* 评论输入框 */
|
||||||
|
.reply-comment input {
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
outline: none;
|
||||||
|
width: 70%;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0 10px;
|
||||||
|
/* border: 2px solid #f8f8f8; */
|
||||||
|
border: 2px solid skyblue;
|
||||||
|
}
|
||||||
|
/* 发布评论按钮 */
|
||||||
|
.reply-comment button {
|
||||||
|
width: 100px;
|
||||||
|
height: 43px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #00a1d6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* 鼠标经过字体加粗 */
|
||||||
|
/* .reply-comment button:hover {
|
||||||
|
} */
|
||||||
|
/* 评论点赞颜色 */
|
||||||
|
.comment-like {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-content-warn {
|
||||||
|
border: 1px solid red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.comments-child-right {
|
||||||
|
position: inherit;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child > img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-comment button {
|
||||||
|
width: 50px;
|
||||||
|
height: 43px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #00a1d6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-comment input {
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
outline: none;
|
||||||
|
width: 50%;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin: 0 10px;
|
||||||
|
/* border: 2px solid #f8f8f8; */
|
||||||
|
border: 2px solid skyblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child-right span {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-comment {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.container-fluid {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-child-username-contain {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.comments-child-username {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.comments-child-replay {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.reply-text {
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
}
|
||||||
|
.msg-class {
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
411
src/components/music.vue
Normal file
411
src/components/music.vue
Normal file
@ -0,0 +1,411 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<!-- 播放器主体区域 -->
|
||||||
|
<div class="play_wrap" id="player">
|
||||||
|
<div class="search_bar">
|
||||||
|
<img src="../assets/images/player_title.png" alt="" />
|
||||||
|
<!-- 搜索歌曲 -->
|
||||||
|
<input type="text" autocomplete="off" v-model="query" placeholder="歌手名或歌曲名" @keyup.enter="searchMusic" />
|
||||||
|
</div>
|
||||||
|
<div class="center_con">
|
||||||
|
<!-- 搜索歌曲列表 -->
|
||||||
|
<div class='song_wrapper'>
|
||||||
|
<ul class="song_list">
|
||||||
|
<li v-for="(item, index) in musicList" :key="index">
|
||||||
|
<a href="javascript:;" @click="playMusic(item.id)"></a>
|
||||||
|
<b>{{ item.name }}</b>
|
||||||
|
<span v-if="item.mvid!=0" @click="playMV(item.mvid);play()"><i></i></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<img src="../assets/images/line.png" class="switch_btn" alt="">
|
||||||
|
</div>
|
||||||
|
<!-- 歌曲信息容器 -->
|
||||||
|
<div class="player_con" :class="{playing:isPlaying}">
|
||||||
|
<img src="../assets/images/player_bar.png" class="play_bar" />
|
||||||
|
<!-- 黑胶碟片 -->
|
||||||
|
<img src="../assets/images/disc.png" class="disc autoRotate" />
|
||||||
|
<img :src="musicCover" class="cover autoRotate" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio_con">
|
||||||
|
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
|
||||||
|
</div>
|
||||||
|
<div class="video_con" v-show="isShow" style="display: none;">
|
||||||
|
<video :src="mvUrl" controls="controls"></video>
|
||||||
|
<div class="mask" @click="hide"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
export default {
|
||||||
|
name: 'musIc',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 查询关键字
|
||||||
|
query: '',
|
||||||
|
// 歌曲数组
|
||||||
|
musicList: [],
|
||||||
|
// 歌曲地址
|
||||||
|
musicUrl: '',
|
||||||
|
// 歌曲封面
|
||||||
|
musicCover: require('@/assets/images/musicLogo.png'),
|
||||||
|
// 歌曲评论
|
||||||
|
hotComments: [],
|
||||||
|
// 动画播放状态
|
||||||
|
isPlaying: false,
|
||||||
|
// 遮罩层的显示状态
|
||||||
|
isShow: false,
|
||||||
|
// mv地址
|
||||||
|
mvUrl: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 歌曲搜索
|
||||||
|
async searchMusic () {
|
||||||
|
const that = this
|
||||||
|
axios.get('https://autumnfish.cn/search' + this.query).then(
|
||||||
|
function (response) {
|
||||||
|
// console.log(response);
|
||||||
|
that.musicList = response.data.result.songs
|
||||||
|
console.log(response.data.result.songs)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// 歌曲播放
|
||||||
|
playMusic (musicId) {
|
||||||
|
const that = this
|
||||||
|
that.musicUrl = 'http://music.163.com/song/media/outer/url?id=' + musicId + '.mp3'
|
||||||
|
// 歌曲详情获取
|
||||||
|
axios.get('https://song.ddmt.top/cloudmusic/?type=detail&id=' + musicId).then(
|
||||||
|
function (response) {
|
||||||
|
console.log(response)
|
||||||
|
// console.log(response.data.songs[0].al.picUrl);
|
||||||
|
that.musicCover = response.data.songs[0].al.picUrl
|
||||||
|
})
|
||||||
|
// 歌曲评论获取
|
||||||
|
axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(
|
||||||
|
function (response) {
|
||||||
|
// console.log(response);
|
||||||
|
// console.log(response.data.hotComments);
|
||||||
|
that.hotComments = response.data.hotComments
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// 歌曲播放
|
||||||
|
play () {
|
||||||
|
this.isPlaying = true
|
||||||
|
},
|
||||||
|
// 歌曲暂停
|
||||||
|
pause () {
|
||||||
|
this.isPlaying = false
|
||||||
|
},
|
||||||
|
// 播放mv
|
||||||
|
playMV (mvid) {
|
||||||
|
const that = this
|
||||||
|
axios.get('https://autumnfish.cn/mv/url?id=' + mvid).then(
|
||||||
|
function (response) {
|
||||||
|
// console.log(response);
|
||||||
|
console.log(response.data.data.url)
|
||||||
|
that.isShow = true
|
||||||
|
that.mvUrl = response.data.data.url
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// 隐藏
|
||||||
|
hide () {
|
||||||
|
this.isShow = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
width: 600px;
|
||||||
|
height: 544px;
|
||||||
|
margin: 60px auto;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play_wrap {
|
||||||
|
width: 600px;
|
||||||
|
height: 544px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_bar {
|
||||||
|
height: 60px;
|
||||||
|
background-color: #1eacda;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_bar img {
|
||||||
|
margin-left: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_bar input {
|
||||||
|
margin-right: 23px;
|
||||||
|
width: 296px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 17px;
|
||||||
|
border: 0px;
|
||||||
|
background: url("../assets/images/zoom.png") 265px center no-repeat
|
||||||
|
rgba(255, 255, 255, 0.45);
|
||||||
|
text-indent: 15px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center_con {
|
||||||
|
height: 435px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_wrapper {
|
||||||
|
width: 200px;
|
||||||
|
height: 435px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
list-style: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_stretch {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list {
|
||||||
|
width: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.song_list::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list li {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
width: 580px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list li:nth-child(odd) {
|
||||||
|
background-color: rgba(240, 240, 240, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list li a {
|
||||||
|
display: block;
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
background-image: url("../assets/images/play.png");
|
||||||
|
background-size: 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list li b {
|
||||||
|
font-weight: normal;
|
||||||
|
width: 122px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_stretch .song_list li b {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_stretch .song_list li em {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list li span {
|
||||||
|
width: 23px;
|
||||||
|
height: 17px;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
.song_list li span i {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url("../assets/images/table.png") left -48px no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song_list li em,
|
||||||
|
.song_list li i {
|
||||||
|
font-style: normal;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_con {
|
||||||
|
width: 400px;
|
||||||
|
height: 435px;
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_con2 {
|
||||||
|
width: 400px;
|
||||||
|
height: 435px;
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_con2 video {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 30px;
|
||||||
|
width: 355px;
|
||||||
|
height: 265px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disc {
|
||||||
|
position: absolute;
|
||||||
|
left: 73px;
|
||||||
|
top: 60px;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
.cover {
|
||||||
|
position: absolute;
|
||||||
|
left: 125px;
|
||||||
|
top: 112px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 75px;
|
||||||
|
z-index: 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio_con {
|
||||||
|
height: 50px;
|
||||||
|
background-color: #f1f3f4;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
.myaudio {
|
||||||
|
width: 600px;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 5px;
|
||||||
|
outline: none;
|
||||||
|
background-color: #f1f3f4;
|
||||||
|
}
|
||||||
|
/* 旋转的动画 */
|
||||||
|
@keyframes Rotate {
|
||||||
|
from {
|
||||||
|
transform: rotateZ(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 旋转的类名 */
|
||||||
|
.autoRotate {
|
||||||
|
animation-name: Rotate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-play-state: paused;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-duration: 5s;
|
||||||
|
}
|
||||||
|
/* 是否正在播放 */
|
||||||
|
.player_con.playing .disc,
|
||||||
|
.player_con.playing .cover {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play_bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
top: -10px;
|
||||||
|
z-index: 10;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
transform-origin: 12px 12px;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
/* 播放杆 转回去 */
|
||||||
|
.player_con.playing .play_bar {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
/* 搜索历史列表 */
|
||||||
|
.search_history {
|
||||||
|
position: absolute;
|
||||||
|
width: 296px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
list-style: none;
|
||||||
|
right: 23px;
|
||||||
|
top: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 17px;
|
||||||
|
}
|
||||||
|
.search_history li {
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.switch_btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.right_line {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.video_con video {
|
||||||
|
position: fixed;
|
||||||
|
width: 600px;
|
||||||
|
height: 546px;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -273px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 990;
|
||||||
|
}
|
||||||
|
.video_con .mask {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 980;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.video_con .shutoff {
|
||||||
|
position: fixed;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: url("../assets/images/shutoff.png") no-repeat;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: 400px;
|
||||||
|
margin-top: -273px;
|
||||||
|
top: 50%;
|
||||||
|
z-index: 995;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
193
src/components/navigationBar.vue
Normal file
193
src/components/navigationBar.vue
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
<template>
|
||||||
|
<div class="nav" :class="{ fixed: isFixed }">
|
||||||
|
<div class="navList">
|
||||||
|
<p>
|
||||||
|
<router-link to="/home">墨思留痕</router-link>
|
||||||
|
</p>
|
||||||
|
<ul class="nackground">
|
||||||
|
<li>
|
||||||
|
<router-link to="/home" exact-active-class="active">首页</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/labelpage" exact-active-class="active"
|
||||||
|
>标签</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/subject" exact-active-class="active"
|
||||||
|
>专题</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/messageboard" exact-active-class="active"
|
||||||
|
>留言板</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/interlinkage" exact-active-class="active"
|
||||||
|
>友情链接</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/about" exact-active-class="active"
|
||||||
|
>个人中心</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="search">
|
||||||
|
<el-input
|
||||||
|
v-model="input"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
clearable
|
||||||
|
style="width: 230px; margin-right: 10px"
|
||||||
|
></el-input>
|
||||||
|
<el-button icon="el-icon-search" circle></el-button>
|
||||||
|
<el-avatar style="margin-left: 10px; position: absolute; top: 10px">
|
||||||
|
<router-link to="/about">user</router-link>
|
||||||
|
</el-avatar>
|
||||||
|
<div class="out" @click="handleOut">退出</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
input: '',
|
||||||
|
Search: 'Search',
|
||||||
|
isFixed: false // 导航栏是否固定的数据属性
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('scroll', this.handleScroll)
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('scroll', this.handleScroll)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleScroll () {
|
||||||
|
const scrollTop = window.scrollY || document.documentElement.scrollTop
|
||||||
|
this.isFixed = scrollTop > 60
|
||||||
|
},
|
||||||
|
// 退出
|
||||||
|
handleOut () {
|
||||||
|
// 清除localStorage中的token
|
||||||
|
localStorage.removeItem('user-token')
|
||||||
|
// 清除Vuex中的状态（如果有的话）
|
||||||
|
this.$store.commit('logout')
|
||||||
|
// 重定向到登录页面
|
||||||
|
this.$router.push({ path: '/login' })
|
||||||
|
this.$message({
|
||||||
|
message: '退出成功',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
.navList {
|
||||||
|
width: 1200px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 60px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 88px;
|
||||||
|
height: 29px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #006cff;
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nackground {
|
||||||
|
width: 600px;
|
||||||
|
height: 60px;
|
||||||
|
float: left;
|
||||||
|
margin-left: 100px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
float: left;
|
||||||
|
margin-left: 40px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a.active {
|
||||||
|
color: #006cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1000000;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: slidein;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slidein {
|
||||||
|
from {
|
||||||
|
top: -60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 380px;
|
||||||
|
height: 60px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.out {
|
||||||
|
position: absolute;
|
||||||
|
right: -50px;
|
||||||
|
top: 15px;
|
||||||
|
color: #006cff;
|
||||||
|
width: 50px;
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid #006cff;
|
||||||
|
border-radius: 5px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.out:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #006cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
190
src/components/trigger.vue
Normal file
190
src/components/trigger.vue
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="isShow"
|
||||||
|
width="800px"
|
||||||
|
:before-close="handleClose"
|
||||||
|
>
|
||||||
|
<div class="dialog">
|
||||||
|
<p
|
||||||
|
class="dialog-body"
|
||||||
|
v-for="(item, index) in colorS"
|
||||||
|
:key="index"
|
||||||
|
:style="{ backgroundColor: item }"
|
||||||
|
@click="handleColorClick(item)"
|
||||||
|
:class="{ selected: item === tempColor }"
|
||||||
|
></p>
|
||||||
|
</div>
|
||||||
|
<div class="image-picker">
|
||||||
|
<input type="file" @change="handleImageUpload" accept="image/*" />
|
||||||
|
<span class="upload-hint">{{ uploadHint }}</span>
|
||||||
|
<div class="preview" v-if="imageUrl">
|
||||||
|
<img :src="imageUrl" :class="{ 'selected-image': imageUrl }" />
|
||||||
|
<el-button @click="removeSelectedImage">移 除</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleConfirm">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'triggEr',
|
||||||
|
props: {
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isShow: this.visible,
|
||||||
|
title: '切换背景',
|
||||||
|
colorS: [
|
||||||
|
'#eeeeee',
|
||||||
|
'aqua',
|
||||||
|
'palegoldenrod',
|
||||||
|
'palegreen',
|
||||||
|
'paleturquoise',
|
||||||
|
'palevioletred',
|
||||||
|
'peru',
|
||||||
|
'powderblue'
|
||||||
|
],
|
||||||
|
selectedColor: null,
|
||||||
|
imageUrl: null, // 用于显示所选图片的URL
|
||||||
|
tempColor: null, // 临时记录所选颜色
|
||||||
|
fileName: '未选择文件', // 文件名
|
||||||
|
uploadHint: '请选择图片文件(建议高清图)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.restoreImageData()
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.restoreImageData() // 恢复图片信息
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
// 只在用户选择了新的图片后才保存
|
||||||
|
if (this.imageUrl) {
|
||||||
|
this.saveImageData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible (val) {
|
||||||
|
this.isShow = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClose () {
|
||||||
|
this.$emit('update:visible', false)
|
||||||
|
},
|
||||||
|
handleColorClick (color) {
|
||||||
|
this.tempColor = color
|
||||||
|
this.imageUrl = null
|
||||||
|
this.fileName = '未选择文件'
|
||||||
|
this.uploadHint = '已选择颜色'
|
||||||
|
},
|
||||||
|
handleImageUpload (event) {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
if (!file) return
|
||||||
|
this.imageUrl = URL.createObjectURL(file)
|
||||||
|
this.fileName = file.name
|
||||||
|
this.tempColor = null
|
||||||
|
this.uploadHint = '已选择图片'
|
||||||
|
localStorage.setItem('selectedImage', this.imageUrl)
|
||||||
|
},
|
||||||
|
removeSelectedImage () {
|
||||||
|
this.imageUrl = null
|
||||||
|
this.fileName = '未选择文件'
|
||||||
|
this.uploadHint = '请选择图片文件(建议高清图)'
|
||||||
|
// 移除本地存储中保存的图片
|
||||||
|
localStorage.removeItem('selectedImage')
|
||||||
|
document.body.style.backgroundColor = ''
|
||||||
|
},
|
||||||
|
handleConfirm () {
|
||||||
|
if (this.tempColor) { // 如果选择了颜色
|
||||||
|
this.selectedColor = this.tempColor
|
||||||
|
document.body.style.backgroundImage = 'none'
|
||||||
|
document.body.style.backgroundColor = this.selectedColor
|
||||||
|
localStorage.setItem('selectedColor', this.selectedColor)
|
||||||
|
} else if (this.imageUrl) {
|
||||||
|
this.setBodyBackground('#fff', this.imageUrl)
|
||||||
|
localStorage.removeItem('selectedColor')
|
||||||
|
this.saveImageData()
|
||||||
|
}
|
||||||
|
this.handleClose()
|
||||||
|
},
|
||||||
|
saveImageData () {
|
||||||
|
if (this.imageUrl) {
|
||||||
|
localStorage.setItem('selectedImage', this.imageUrl)
|
||||||
|
localStorage.setItem('selectedFileName', this.fileName)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
restoreImageData () {
|
||||||
|
const savedColor = localStorage.getItem('selectedColor')
|
||||||
|
if (savedColor && this.colorS.includes(savedColor)) {
|
||||||
|
this.selectedColor = savedColor
|
||||||
|
this.tempColor = savedColor
|
||||||
|
this.setBodyBackground(savedColor, null) // 清除背景图片并设置背景颜色
|
||||||
|
}
|
||||||
|
|
||||||
|
const savedImage = localStorage.getItem('selectedImage')
|
||||||
|
if (savedImage) {
|
||||||
|
this.imageUrl = savedImage
|
||||||
|
this.setBodyBackground('#fff', savedImage) // 清除背景颜色并设置背景图片
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 设置 body 的背景
|
||||||
|
setBodyBackground (color, imageUrl) {
|
||||||
|
if (color) {
|
||||||
|
document.body.style.backgroundColor = color
|
||||||
|
document.body.style.backgroundImage = 'none'
|
||||||
|
}
|
||||||
|
if (imageUrl) {
|
||||||
|
document.body.style.backgroundColor = '#fff'
|
||||||
|
document.body.style.backgroundImage = `url(${imageUrl})`
|
||||||
|
document.body.style.backgroundSize = 'cover'
|
||||||
|
document.body.style.backgroundRepeat = 'no-repeat'
|
||||||
|
document.body.style.backgroundAttachment = 'fixed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dialog {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-body {
|
||||||
|
flex: 1 0 20%;
|
||||||
|
height: 200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 180px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: burlywood;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-image,.selected {
|
||||||
|
border: 2px solid springgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview button {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
21
src/main.js
Normal file
21
src/main.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router/index'
|
||||||
|
import store from './store'
|
||||||
|
import '@/router/permission'
|
||||||
|
import '@/assets/styles/index.css'
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
|
import navigationBar from '@/components/navigationBar.vue'
|
||||||
|
import music from '@/components/music.vue'
|
||||||
|
Vue.use(ElementUI)
|
||||||
|
Vue.component('navigationBar', navigationBar)
|
||||||
|
Vue.component('musIc', music)
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
154
src/router/index.js
Normal file
154
src/router/index.js
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Home from '../views/Home.vue'
|
||||||
|
// import CSSContent from '@/views/CSS3/index.vue'
|
||||||
|
// import cyuyan from '@/views/Cyuyan/index.vue'
|
||||||
|
// import diangong from '@/views/diangong/index.vue'
|
||||||
|
// import HTMLContent from '@/views/HTML5/index.vue'
|
||||||
|
// import javaContent from '@/views/java/index.vue'
|
||||||
|
// import jqueryContent from '@/views/jQuery/index.vue'
|
||||||
|
// import LinuxContent from '@/views/linuxxitong/index.vue'
|
||||||
|
// import MySQLContent from '@/views/MySQLjishu/index.vue'
|
||||||
|
// import NodeContent from '@/views/Node/index.vue'
|
||||||
|
// import PHPContent from '@/views/PHPsheji/index.vue'
|
||||||
|
// import pythonContent from '@/views/python/index.vue'
|
||||||
|
// import vsContent from '@/views/vscodejis/index.vue'
|
||||||
|
// import VueContent from '@/views/Vue/index.vue'
|
||||||
|
// import jiwang from '@/views/jiwang/jiwang.vue'
|
||||||
|
// import jsContent from '@/views/JavaScript/index.vue'
|
||||||
|
import NoteDetail from '@/views/particulars/list'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
name: 'Home',
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'AboutUs',
|
||||||
|
component: (resolve) => require(['@/views/AboutUs'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/labelpage',
|
||||||
|
name: 'labelPage',
|
||||||
|
component: (resolve) => require(['@/views/labelPage'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/subject',
|
||||||
|
name: 'subject',
|
||||||
|
component: (resolve) => require(['@/views/subject'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/messageboard',
|
||||||
|
name: 'messageBoard',
|
||||||
|
component: (resolve) => require(['@/views/messageBoard'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Login',
|
||||||
|
component: (resolve) => require(['@/views/login'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/TopicDetails',
|
||||||
|
name: 'TopicDetails',
|
||||||
|
component: (resolve) => require(['@/views/particulars/TopicDetails'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/interlinkage',
|
||||||
|
name: 'interlinkage',
|
||||||
|
component: (resolve) => require(['@/views/interlinkage'], resolve)
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: '/jiwang',
|
||||||
|
// name: 'jiwang',
|
||||||
|
// component: jiwang
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/jsContent',
|
||||||
|
// name: 'jsContent',
|
||||||
|
// component: jsContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/CSSContent',
|
||||||
|
// name: 'CSSContent',
|
||||||
|
// component: CSSContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/cyuyan',
|
||||||
|
// name: 'cyuyan',
|
||||||
|
// component: cyuyan
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/diangong',
|
||||||
|
// name: 'diangong',
|
||||||
|
// component: diangong
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/HTMLContent',
|
||||||
|
// name: 'HTMLContent',
|
||||||
|
// component: HTMLContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/javaContent',
|
||||||
|
// name: 'javaContent',
|
||||||
|
// component: javaContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/jqueryContent',
|
||||||
|
// name: 'jqueryContent',
|
||||||
|
// component: jqueryContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/LinuxContent',
|
||||||
|
// name: 'LinuxContent',
|
||||||
|
// component: LinuxContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/MySQLContent',
|
||||||
|
// name: 'MySQLContent',
|
||||||
|
// component: MySQLContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/NodeContent',
|
||||||
|
// name: 'NodeContent',
|
||||||
|
// component: NodeContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/PHPContent',
|
||||||
|
// name: 'PHPContent',
|
||||||
|
// component: PHPContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/vsContent',
|
||||||
|
// name: 'vsContent',
|
||||||
|
// component: vsContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/VueContent',
|
||||||
|
// name: 'VueContent',
|
||||||
|
// component: VueContent
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/pythonContent',
|
||||||
|
// name: 'pythonContent',
|
||||||
|
// component: pythonContent
|
||||||
|
// },
|
||||||
|
{ path: '/note/:id', component: NoteDetail }
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history', // 去掉url中的#
|
||||||
|
scrollBehavior (to, from, savedPosition) {
|
||||||
|
if (savedPosition) {
|
||||||
|
return savedPosition
|
||||||
|
} else {
|
||||||
|
return { x: 0, y: 0 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
21
src/router/permission.js
Normal file
21
src/router/permission.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import router from './index'
|
||||||
|
import store from '@/store/index'
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
// 判断是否需要登录
|
||||||
|
if (to.meta.requireAuth) {
|
||||||
|
// 判断是否登录
|
||||||
|
if (store.state.user.token) {
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
next({
|
||||||
|
path: '/login',
|
||||||
|
query: {
|
||||||
|
redirect: to.fullPath
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
38
src/store/index.js
Normal file
38
src/store/index.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
user: null, // 初始用户状态为null
|
||||||
|
token: null, // 初始token状态为null
|
||||||
|
isLoggedIn: false // 初始登录状态为false
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
setLoggedIn (state, isLoggedIn) {
|
||||||
|
state.isLoggedIn = isLoggedIn
|
||||||
|
},
|
||||||
|
setToken (state, token) {
|
||||||
|
state.token = token
|
||||||
|
},
|
||||||
|
setUser (state, user) {
|
||||||
|
state.user = user
|
||||||
|
},
|
||||||
|
logout (state) {
|
||||||
|
// 清除用户信息
|
||||||
|
state.token = null
|
||||||
|
state.user = null
|
||||||
|
// ... 清除其他与用户相关的状态
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async setUser ({ commit }, user) {
|
||||||
|
commit('setLoggedIn', user)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
37
src/utils/request.js
Normal file
37
src/utils/request.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
// 创建一个 axios 实例
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: 'http://localhost:5000/', // API 基础 URL
|
||||||
|
timeout: 5000 // 请求超时时间
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
// 从 localStorage 中获取 token
|
||||||
|
const token = localStorage.getItem('user-token')
|
||||||
|
if (token) {
|
||||||
|
// 将 token 添加到请求头中
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// 对请求错误做些什么
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
// 对响应数据做点什么
|
||||||
|
return response
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default service
|
||||||
131
src/views/AboutUs.vue
Normal file
131
src/views/AboutUs.vue
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AboutUs">
|
||||||
|
<navigationBar />
|
||||||
|
<div class="box">
|
||||||
|
<div class="AboutUs-left">
|
||||||
|
<h3>个人信息</h3>
|
||||||
|
<hr />
|
||||||
|
<div class="AboutUs-img">
|
||||||
|
<img src="../assets/images/sub.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p v-for="(item, index) in users" :key="index">
|
||||||
|
{{ item.name }}
|
||||||
|
<span>{{ item.date }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="AboutUs-right">
|
||||||
|
<p @click="isShow = true">切换背景</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<trigger :visible.sync="isShow"></trigger>
|
||||||
|
<musIc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import trigger from '@/components/trigger.vue'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
users: [
|
||||||
|
{
|
||||||
|
name: '用户名称',
|
||||||
|
date: '创建日期'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '用户名称',
|
||||||
|
date: '创建日期'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dialogVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
trigger
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.AboutUs {
|
||||||
|
.box {
|
||||||
|
width: 1220px;
|
||||||
|
// height: 500px;
|
||||||
|
margin: 100px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AboutUs-left {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
float: left;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-right: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 10px #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #333;
|
||||||
|
margin: 0 0 5px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AboutUs-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 8%;
|
||||||
|
margin-left: 38%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
margin: 10px 0 0 20px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 20px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.AboutUs-right {
|
||||||
|
width: 700px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: #fff;
|
||||||
|
float: left;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 10px #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
p{
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
margin: 10px 0 0 20px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
src/views/CSS3/index.vue
Normal file
34
src/views/CSS3/index.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="kecheng">
|
||||||
|
<div class="empty" v-if="!conList.length">
|
||||||
|
暂无内容
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="con" v-for="(item, index) in conList" :key="index">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="content">{{ item.content }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getcssCon } from '@/api/cssCon'
|
||||||
|
export default {
|
||||||
|
name: 'css3-kecheng',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
conList: [],
|
||||||
|
empty: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
getcssCon().then(res => {
|
||||||
|
this.conList = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import url("@/assets/styles/compon.less");
|
||||||
|
</style>
|
||||||
34
src/views/Cyuyan/index.vue
Normal file
34
src/views/Cyuyan/index.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="kecheng">
|
||||||
|
<div class="empty" v-if="!conList.length">
|
||||||
|
暂无内容
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="con" v-for="(item, index) in conList" :key="index">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="content">{{ item.content }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getCyuyan } from '@/api/cyuyan'
|
||||||
|
export default {
|
||||||
|
name: 'c-kecheng',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
conList: [],
|
||||||
|
empty: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
getCyuyan().then(res => {
|
||||||
|
this.conList = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import url("@/assets/styles/compon.less");
|
||||||
|
</style>
|
||||||
35
src/views/HTML5/index.vue
Normal file
35
src/views/HTML5/index.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="kecheng">
|
||||||
|
<div class="empty" v-if="!conList.length">
|
||||||
|
暂无内容
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="con" v-for="(item, index) in conList" :key="index">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="content" v-html="item.content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { gethtmlCon } from '@/api/htmlCon'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HTML5',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
conList: [],
|
||||||
|
empty: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
gethtmlCon().then(res => {
|
||||||
|
this.conList = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import url("@/assets/styles/compon.less");
|
||||||
|
</style>
|
||||||
160
src/views/Home.vue
Normal file
160
src/views/Home.vue
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Home">
|
||||||
|
<navigationBar />
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="head">
|
||||||
|
<div class="head-left">
|
||||||
|
|
||||||
|
<div class="content-left" v-for="(item, index) in contList" :key="index">
|
||||||
|
<div class="con-title-left">
|
||||||
|
<h3>
|
||||||
|
<router-link to="/">{{ item.title }}</router-link>
|
||||||
|
</h3>
|
||||||
|
<img :src="item.img" />
|
||||||
|
<p class="time">{{ item.date }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="head-right">
|
||||||
|
<div class="develop">
|
||||||
|
<img src="../assets/images/789.jpg" alt="" />
|
||||||
|
<div class="title">
|
||||||
|
<p>123</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="develop">
|
||||||
|
<img src="../assets/images/789.jpg" alt="" />
|
||||||
|
<div class="title">
|
||||||
|
<p>123</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-right">
|
||||||
|
<div class="con-title-right">
|
||||||
|
<h3>标签云</h3>
|
||||||
|
<p></p>
|
||||||
|
<div class="flex gap-2 mt-4">
|
||||||
|
<el-tag
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item.label"
|
||||||
|
:type="item.type"
|
||||||
|
effect="light"
|
||||||
|
round
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-backtop :right="100" :bottom="100" />
|
||||||
|
<musIc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { getHome } from '@/api/home'
|
||||||
|
export default {
|
||||||
|
name: 'HoMe',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
slideList: [
|
||||||
|
{ img: require('@/assets/images/789.jpg') },
|
||||||
|
{ img: require('@/assets/images/899.jpg') },
|
||||||
|
{ img: require('@/assets/images/789.jpg') }
|
||||||
|
],
|
||||||
|
currentIndex: 0, // 当前显示的图片的索引
|
||||||
|
timer: null, // 自动切换的定时器
|
||||||
|
contList: [
|
||||||
|
{
|
||||||
|
img: require('@/assets/images/789.jpg'),
|
||||||
|
title: '',
|
||||||
|
date: '2024-04-24'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/images/789.jpg'),
|
||||||
|
title: '',
|
||||||
|
date: '2024-04-24'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/images/789.jpg'),
|
||||||
|
title: '',
|
||||||
|
date: '2024-04-24'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/images/789.jpg'),
|
||||||
|
title: '',
|
||||||
|
date: '2024-04-24'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/images/789.jpg'),
|
||||||
|
title: '',
|
||||||
|
date: '2024-04-24'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/images/789.jpg'),
|
||||||
|
title: '',
|
||||||
|
date: '2024-04-24'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
items: [
|
||||||
|
{ type: 'success', label: '后端技术' },
|
||||||
|
{ type: 'success', label: '前端技术' },
|
||||||
|
{ type: 'info', label: '架构1' },
|
||||||
|
{ type: 'warning', label: '项目管理' },
|
||||||
|
{ type: 'danger', label: '开发规范' },
|
||||||
|
{ type: 'success', label: '组织' },
|
||||||
|
{ type: 'success', label: 'JAVA' },
|
||||||
|
{ type: 'info', label: 'Redis' },
|
||||||
|
{ type: 'warning', label: 'c++基础' },
|
||||||
|
{ type: 'danger', label: 'Aop' },
|
||||||
|
{ type: 'success', label: 'HTML5' },
|
||||||
|
{ type: 'success', label: 'Rabbitmq' },
|
||||||
|
{ type: 'info', label: 'ElmenuUI-plus' },
|
||||||
|
{ type: 'warning', label: '云资源' },
|
||||||
|
{ type: 'danger', label: 'VUE' },
|
||||||
|
{ type: 'danger', label: '业务' },
|
||||||
|
{ type: 'danger', label: '123' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// mounted () {
|
||||||
|
// this.getData()
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
// getData () {
|
||||||
|
// getHome().then(res => {
|
||||||
|
// console.log(res)
|
||||||
|
// this.contList = res.data.result
|
||||||
|
// console.log(this.contList)
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
play () {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.currentIndex++
|
||||||
|
if (this.currentIndex >= this.slideList.length) {
|
||||||
|
this.currentIndex = 0
|
||||||
|
}
|
||||||
|
}, 3000)
|
||||||
|
},
|
||||||
|
stop () {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
},
|
||||||
|
go () {
|
||||||
|
this.play()
|
||||||
|
},
|
||||||
|
change (index) {
|
||||||
|
this.currentIndex = index
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
// 页面加载完成后，开始自动播放
|
||||||
|
this.go()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import url('../assets/styles/home.less');
|
||||||
|
</style>
|
||||||
35
src/views/JavaScript/index.vue
Normal file
35
src/views/JavaScript/index.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="kecheng">
|
||||||
|
<div class="empty" v-if="!conList.length">
|
||||||
|
暂无内容
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="con" v-for="(item, index) in conList" :key="index">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="content" v-html="item.content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getjsCon } from '@/api/jsCon'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'js-component',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
conList: [],
|
||||||
|
empty: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
getjsCon().then(res => {
|
||||||
|
this.conList = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import url("@/assets/styles/compon.less");
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user