@ -0,0 +1,23 @@ |
|||||||
|
.DS_Store |
||||||
|
node_modules |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 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? |
||||||
@ -1,2 +1,24 @@ |
|||||||
# lingyunge_uni |
# lingyunge |
||||||
|
|
||||||
|
## 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/). |
||||||
|
|||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
presets: [ |
||||||
|
'@vue/cli-plugin-babel/preset' |
||||||
|
], |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
#app,body,html{width:100%;height:100%;margin:0;padding:0} |
||||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 360 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
@ -0,0 +1 @@ |
|||||||
|
<!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"><link rel="icon" href="/web/favicon.ico"><title>lingyunge</title><script defer="defer" src="/web/js/chunk-vendors.1de1bcc8.js"></script><script defer="defer" src="/web/js/app.56767b63.js"></script><link href="/web/css/app.4e64690e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but lingyunge doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "es5", |
||||||
|
"module": "esnext", |
||||||
|
"baseUrl": "./", |
||||||
|
"moduleResolution": "node", |
||||||
|
"paths": { |
||||||
|
"@/*": [ |
||||||
|
"src/*" |
||||||
|
] |
||||||
|
}, |
||||||
|
"lib": [ |
||||||
|
"esnext", |
||||||
|
"dom", |
||||||
|
"dom.iterable", |
||||||
|
"scripthost" |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
{ |
||||||
|
"name": "lingyunge", |
||||||
|
"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.5.0", |
||||||
|
"core-js": "^3.8.3", |
||||||
|
"sass": "^1.66.1", |
||||||
|
"sass-loader": "^13.3.2", |
||||||
|
"swiper": "^10.2.0", |
||||||
|
"vue": "^3.2.13", |
||||||
|
"vue-router": "^4.2.4" |
||||||
|
}, |
||||||
|
"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-service": "~5.0.0", |
||||||
|
"eslint": "^7.32.0", |
||||||
|
"eslint-plugin-vue": "^8.0.3", |
||||||
|
"image-webpack-loader": "^8.1.0" |
||||||
|
}, |
||||||
|
"eslintConfig": { |
||||||
|
"root": true, |
||||||
|
"env": { |
||||||
|
"node": true |
||||||
|
}, |
||||||
|
"extends": [ |
||||||
|
"plugin:vue/vue3-essential", |
||||||
|
"eslint:recommended" |
||||||
|
], |
||||||
|
"parserOptions": { |
||||||
|
"parser": "@babel/eslint-parser" |
||||||
|
}, |
||||||
|
"rules": {} |
||||||
|
}, |
||||||
|
"browserslist": [ |
||||||
|
"> 1%", |
||||||
|
"last 2 versions", |
||||||
|
"not dead", |
||||||
|
"not ie 11" |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -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> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
<template> |
||||||
|
<router-view> |
||||||
|
</router-view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'App', |
||||||
|
components: { |
||||||
|
|
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
/* 全局样式 */ |
||||||
|
html, |
||||||
|
body, |
||||||
|
#app { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
// 导入axios实例
|
||||||
|
import httpRequest from '@/http/axios' |
||||||
|
|
||||||
|
// //post示例
|
||||||
|
// export function postDemo() {
|
||||||
|
// return httpRequest({
|
||||||
|
// url: '',
|
||||||
|
// method: 'post',
|
||||||
|
// data: param,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// //get示例
|
||||||
|
// export function getDemo(id) {
|
||||||
|
// return httpRequest({
|
||||||
|
// url: `xxx?id=${id}`,
|
||||||
|
// method: 'get',
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
//lingyungeJS
|
||||||
|
|
||||||
|
let base_ling = "https://lyg.tsl3060.com/index.php/api"; |
||||||
|
export function getList() { |
||||||
|
return httpRequest({ |
||||||
|
url: `${base_ling}/index/index`, |
||||||
|
method: 'get', |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//lingyungeJS结束
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 706 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 776 B |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 MiB |
|
After Width: | Height: | Size: 360 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,58 @@ |
|||||||
|
<template> |
||||||
|
<div class="hello"> |
||||||
|
<h1>{{ msg }}</h1> |
||||||
|
<p> |
||||||
|
For a guide and recipes on how to configure / customize this project,<br> |
||||||
|
check out the |
||||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
||||||
|
</p> |
||||||
|
<h3>Installed CLI Plugins</h3> |
||||||
|
<ul> |
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
||||||
|
</ul> |
||||||
|
<h3>Essential Links</h3> |
||||||
|
<ul> |
||||||
|
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
||||||
|
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
||||||
|
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
||||||
|
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
||||||
|
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
||||||
|
</ul> |
||||||
|
<h3>Ecosystem</h3> |
||||||
|
<ul> |
||||||
|
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
||||||
|
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
||||||
|
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
||||||
|
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
||||||
|
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'HelloWorld', |
||||||
|
props: { |
||||||
|
msg: String |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||||
|
<style scoped> |
||||||
|
h3 { |
||||||
|
margin: 40px 0 0; |
||||||
|
} |
||||||
|
ul { |
||||||
|
list-style-type: none; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
li { |
||||||
|
display: inline-block; |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
a { |
||||||
|
color: #42b983; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
module.exports = { |
||||||
|
ROUTER_BASEURL:"/web/",//路由根目录baseUrl,
|
||||||
|
BASE_URL:"/web/",//发布BaseUrl
|
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import axios from 'axios' |
||||||
|
// 创建一个 axios 实例
|
||||||
|
const service = axios.create({ |
||||||
|
baseURL: '/api', // 所有的请求地址前缀部分
|
||||||
|
timeout: 60000, // 请求超时时间毫秒
|
||||||
|
withCredentials: true, // 异步请求携带cookie
|
||||||
|
headers: { |
||||||
|
// 设置后端需要的传参类型
|
||||||
|
'Content-Type': 'application/json', |
||||||
|
// 'token': 'token',
|
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
// 添加请求拦截器
|
||||||
|
service.interceptors.request.use( |
||||||
|
function (config) { |
||||||
|
// 在发送请求之前做些什么
|
||||||
|
return config |
||||||
|
}, |
||||||
|
function (error) { |
||||||
|
// 对请求错误做些什么
|
||||||
|
console.log(error,'请求错误') |
||||||
|
return Promise.reject(error) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 添加响应拦截器
|
||||||
|
service.interceptors.response.use( |
||||||
|
function (response) { |
||||||
|
console.log(response) |
||||||
|
// 成功码范围内的状态码都会触发该函数。
|
||||||
|
// 对响应数据做点什么
|
||||||
|
// dataAxios 是 axios 返回数据中的 data
|
||||||
|
const dataAxios = response.data |
||||||
|
// 这个状态码是和后端约定的
|
||||||
|
const code = dataAxios.reset |
||||||
|
return dataAxios |
||||||
|
}, |
||||||
|
function (error) { |
||||||
|
// 超出成功码范围的状态码都会触发该函数。
|
||||||
|
// 对响应错误做点什么
|
||||||
|
console.log(error) |
||||||
|
return Promise.reject(error) |
||||||
|
} |
||||||
|
) |
||||||
|
export default service |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import { createApp } from 'vue' |
||||||
|
import App from './App.vue' |
||||||
|
//引入router
|
||||||
|
import router from "./router"; |
||||||
|
//
|
||||||
|
createApp(App).use(router).mount('#app') |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
<template> |
||||||
|
<view class="pdd"> |
||||||
|
<div class="text"> |
||||||
|
{{ text }} |
||||||
|
</div> |
||||||
|
<input type="text" :value="value" /> |
||||||
|
<button @click="queryClick">点击发送</button> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import axios from 'axios'; |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
text: '', |
||||||
|
value: '', |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
onShow() { }, |
||||||
|
methods: { |
||||||
|
async query(data) { |
||||||
|
// axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; |
||||||
|
// axios.post('/api/v1/prediction/cf4f7471-7301-4bd6-aaa3-87c16e615b84', JSON.stringify(data), { |
||||||
|
// headers: { |
||||||
|
// 'Authorization': 'Bearer ZT1v19tYfMb4+2Y6VX7gtf9oacNEy6J03SabP8yfa6w=', |
||||||
|
// 'Content-Type': 'application/json', |
||||||
|
// } |
||||||
|
// }).then(function (resp) { |
||||||
|
// console.log(resp) |
||||||
|
// }).catch(function (error) { |
||||||
|
// console.log(error); |
||||||
|
// }) |
||||||
|
// axios |
||||||
|
// .post('v1/prediction/cf4f7471-7301-4bd6-aaa3-87c16e615b84', JSON.stringify(data), { |
||||||
|
// headers: { |
||||||
|
// 'Authorization': 'Bearer ZT1v19tYfMb4+2Y6VX7gtf9oacNEy6J03SabP8yfa6w=', |
||||||
|
// 'Content-Type': 'application/json', |
||||||
|
// }, |
||||||
|
// }) |
||||||
|
|
||||||
|
// .then(function (response) { |
||||||
|
// console.log(response); |
||||||
|
// }) |
||||||
|
// .catch(function (error) { |
||||||
|
// console.log(error); |
||||||
|
// }); |
||||||
|
const response = await fetch('/api/v1/prediction/cf4f7471-7301-4bd6-aaa3-87c16e615b84', { |
||||||
|
headers: { |
||||||
|
'Authorization': 'Bearer ZT1v19tYfMb4+2Y6VX7gtf9oacNEy6J03SabP8yfa6w=', |
||||||
|
'Content-Type': 'application/json', |
||||||
|
}, |
||||||
|
method: 'POST', |
||||||
|
body: JSON.stringify(data), |
||||||
|
}); |
||||||
|
const result = await response.json(); |
||||||
|
return result; |
||||||
|
}, |
||||||
|
queryClick() { |
||||||
|
let msg = this.query('hello'); |
||||||
|
console.log(msg); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
||||||
@ -0,0 +1,517 @@ |
|||||||
|
<template> |
||||||
|
<div class='content'> |
||||||
|
<div class="bg"> |
||||||
|
<div class="cnt"> |
||||||
|
<div class="cntBg"></div> |
||||||
|
<div class="cntRank"> |
||||||
|
<div class="rank1"> |
||||||
|
<img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank01.webp" alt=""> |
||||||
|
<img class="rankAva" :src="top01.avatar" alt=""> |
||||||
|
<div class="rankNum">{{ top01.score }}</div> |
||||||
|
<div class="rankName">{{ top01.position_name }}-{{ top01.name }}</div> |
||||||
|
</div> |
||||||
|
<div class="rank2"> |
||||||
|
<img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank02.webp" alt=""> |
||||||
|
<img class="rankAva" :src="top02.avatar" alt=""> |
||||||
|
<div class="rankNum">{{ top02.score }}</div> |
||||||
|
<div class="rankName">{{ top02.position_name }}-{{ top02.name }}</div> |
||||||
|
</div> |
||||||
|
<div class="rank3"> |
||||||
|
<img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank03.webp" alt=""> |
||||||
|
<img class="rankAva" :src="top03.avatar" alt=""> |
||||||
|
<div class="rankNum">{{ top03.score }}</div> |
||||||
|
<div class="rankName">{{ top03.position_name }}-{{ top03.name }}</div> |
||||||
|
</div> |
||||||
|
<div class="rank4"> |
||||||
|
<img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank04.webp" alt=""> |
||||||
|
<img class="rankAva" :src="top04.avatar" alt=""> |
||||||
|
<div class="rankNum">{{ top04.score }}</div> |
||||||
|
<div class="rankName">{{ top04.position_name }}-{{ top04.name }}</div> |
||||||
|
</div> |
||||||
|
<div class="rank5"> |
||||||
|
<img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank05.webp" alt=""> |
||||||
|
<img class="rankAva" :src="top05.avatar" alt=""> |
||||||
|
<div class="rankNum">{{ top05.score }}</div> |
||||||
|
<div class="rankName">{{ top05.position_name }}-{{ top05.name }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="line"></div> |
||||||
|
<div class="list"> |
||||||
|
<div class="rule" @click="mask = true"> |
||||||
|
<img class="ruleImg" src="../../../assets/lingyungeImages/mobile/rule.webp" alt=""> |
||||||
|
积分说明 |
||||||
|
</div> |
||||||
|
<div style="overflow: hidden;height: 310px;"> |
||||||
|
<div class="listItem" :class="{ 'animate-up': animateUp }" v-for="(item, index) in topList" |
||||||
|
:key="index"> |
||||||
|
<div class="itemBg">{{ item.index }}</div> |
||||||
|
<div class="itemAva"> |
||||||
|
<img class="itemAvaImg" :src="item.avatar" alt=""> |
||||||
|
</div> |
||||||
|
<div class="itemText">{{ item.position_name }}-{{ item.name }}</div> |
||||||
|
<div class="itemNum">{{ item.score }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- mask --> |
||||||
|
<div class="mask" v-if="mask"> |
||||||
|
<div class="maskContent"> |
||||||
|
<div class="title">积分说明</div> |
||||||
|
<div class="tips">此积分为各成员参与凌云阁活动累计积分。</div> |
||||||
|
<div class="btn" @click="mask = false">知道了</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="js"> |
||||||
|
import { ref, onMounted } from "vue"; |
||||||
|
const mask = ref(false); |
||||||
|
const showMask = () => { |
||||||
|
console.log(mask) |
||||||
|
} |
||||||
|
//滚动播放 |
||||||
|
const animateUp = ref(false); |
||||||
|
import { getList } from '../../../api/lingyuge' |
||||||
|
const defaultImg = require('../../../assets/lingyungeImages/tx.png') |
||||||
|
const top01 = ref({}); |
||||||
|
const top02 = ref({}); |
||||||
|
const top03 = ref({}); |
||||||
|
const top04 = ref({}); |
||||||
|
const top05 = ref({}); |
||||||
|
const topList = ref([]); |
||||||
|
const getListArray = () => { |
||||||
|
getList().then((res) => { |
||||||
|
let data = res.data; |
||||||
|
for (let i in data) { |
||||||
|
data[i].index = Number(i) + 1; |
||||||
|
if (data[i].avatar.indexOf('storage') < 0) { |
||||||
|
data[i].avatar = defaultImg; |
||||||
|
} |
||||||
|
} |
||||||
|
data.forEach((item, index) => { |
||||||
|
if (index == 0) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top01.value = item }; |
||||||
|
if (index == 1) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top02.value = item }; |
||||||
|
if (index == 2) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top03.value = item }; |
||||||
|
if (index == 3) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top04.value = item }; |
||||||
|
if (index == 4) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top05.value = item }; |
||||||
|
if (index > 4) { |
||||||
|
topList.value.push(item); |
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
} |
||||||
|
getListArray(); |
||||||
|
const scrollAnimate = () => { |
||||||
|
animateUp.value = true; |
||||||
|
setTimeout(() => { |
||||||
|
animateUp.value = false |
||||||
|
topList.value.push(topList.value[0]); |
||||||
|
topList.value.shift(); |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
onMounted(() => { |
||||||
|
const timer = setInterval(scrollAnimate, 1500); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.animate-up { |
||||||
|
transition: all 1s ease-in-out; |
||||||
|
transform: translateY(-50px); |
||||||
|
} |
||||||
|
|
||||||
|
.bg { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/bg.webp"); |
||||||
|
width: 100%; |
||||||
|
height: 100vh; |
||||||
|
overflow: hidden; |
||||||
|
background-size: 100% 100%; |
||||||
|
padding: 0 12px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-top: 33px; |
||||||
|
|
||||||
|
.cnt { |
||||||
|
border: 1px solid #F8BE5E; |
||||||
|
border-radius: 12px 12px 0 0; |
||||||
|
// width: 350px; |
||||||
|
margin: 0 auto; |
||||||
|
background: rgba(18, 44, 90, 0.6); |
||||||
|
margin-top: 30px; |
||||||
|
max-width: 350px; |
||||||
|
} |
||||||
|
|
||||||
|
.cntBg { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/title.webp"); |
||||||
|
width: 327px; |
||||||
|
height: 48px; |
||||||
|
background-size: 327px 48px; |
||||||
|
margin: 0 auto; |
||||||
|
display: block; |
||||||
|
position: relative; |
||||||
|
top: -24px; |
||||||
|
} |
||||||
|
@media screen and (max-width:320px){ |
||||||
|
.bg{ |
||||||
|
padding: 0 12rpx; |
||||||
|
} |
||||||
|
.cntBg{ |
||||||
|
left:-15px; |
||||||
|
} |
||||||
|
} |
||||||
|
.cntRank { |
||||||
|
position: relative; |
||||||
|
min-height: 265px; |
||||||
|
max-width: 350px; |
||||||
|
margin: 0 auto; |
||||||
|
.rank1 { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/rank001.webp"); |
||||||
|
width: 153px; |
||||||
|
height: 168px; |
||||||
|
background-size: 153px 168px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
margin-left: -76px; |
||||||
|
z-index: 5; |
||||||
|
|
||||||
|
.rankBg { |
||||||
|
width: 58px; |
||||||
|
height: 62px; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -29px; |
||||||
|
margin-top: 17px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankAva { |
||||||
|
width: 34px; |
||||||
|
height: 34px; |
||||||
|
border-radius: 50%; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -46px; |
||||||
|
top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankNum { |
||||||
|
font-size: 18px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.rankName { |
||||||
|
font-size: 13px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rank2 { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/rank002.webp"); |
||||||
|
width: 119px; |
||||||
|
height: 134px; |
||||||
|
background-size: 119px 134px; |
||||||
|
position: absolute; |
||||||
|
z-index: 4; |
||||||
|
left: 5px; |
||||||
|
top: 30px; |
||||||
|
|
||||||
|
.rankBg { |
||||||
|
width: 50px; |
||||||
|
height: 54px; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -25px; |
||||||
|
margin-top: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankAva { |
||||||
|
width: 28px; |
||||||
|
height: 28px; |
||||||
|
border-radius: 50%; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -40px; |
||||||
|
top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankNum { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.rankName { |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rank3 { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/rank002.webp"); |
||||||
|
width: 119px; |
||||||
|
height: 134px; |
||||||
|
background-size: 119px 134px; |
||||||
|
position: absolute; |
||||||
|
z-index: 4; |
||||||
|
right: 5px; |
||||||
|
top: 30px; |
||||||
|
|
||||||
|
.rankBg { |
||||||
|
width: 50px; |
||||||
|
height: 54px; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -25px; |
||||||
|
margin-top: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankAva { |
||||||
|
width: 28px; |
||||||
|
height: 28px; |
||||||
|
border-radius: 50%; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -40px; |
||||||
|
top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankNum { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.rankName { |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rank4 { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/rank003.webp"); |
||||||
|
width: 110px; |
||||||
|
height: 123px; |
||||||
|
background-size: 110px 123px; |
||||||
|
position: absolute; |
||||||
|
z-index: 3; |
||||||
|
left: 18%; |
||||||
|
top: 139px; |
||||||
|
|
||||||
|
.rankBg { |
||||||
|
width: 46px; |
||||||
|
height: 51px; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -23px; |
||||||
|
margin-top: 9px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankAva { |
||||||
|
width: 26px; |
||||||
|
height: 26px; |
||||||
|
border-radius: 50%; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -37px; |
||||||
|
top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankNum { |
||||||
|
font-size: 13px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.rankName { |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rank5 { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/rank003.webp"); |
||||||
|
width: 110px; |
||||||
|
height: 123px; |
||||||
|
background-size: 110px 123px; |
||||||
|
position: absolute; |
||||||
|
z-index: 3; |
||||||
|
right: 18%; |
||||||
|
top: 139px; |
||||||
|
|
||||||
|
.rankBg { |
||||||
|
width: 46px; |
||||||
|
height: 51px; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -23px; |
||||||
|
margin-top: 9px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankAva { |
||||||
|
width: 26px; |
||||||
|
height: 26px; |
||||||
|
border-radius: 50%; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
margin-left: -37px; |
||||||
|
top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.rankNum { |
||||||
|
font-size: 13px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.rankName { |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.line { |
||||||
|
// width: 330px; |
||||||
|
height: 3px; |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/line.webp"); |
||||||
|
width: 331px; |
||||||
|
height: 24px; |
||||||
|
background-size: 331px 24px; |
||||||
|
margin: 0 auto; |
||||||
|
position: relative; |
||||||
|
top: -10px; |
||||||
|
// background: linear-gradient(79deg, rgba(93, 175, 254, 0) 0%, rgba(115, 193, 254, 0.5) 19%, #C0FEFF 46%, rgba(120, 213, 255, 0.5) 80%, rgba(96, 199, 255, 0) 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.list { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 12px; |
||||||
|
margin-top:-10px; |
||||||
|
.rule { |
||||||
|
height: 20px; |
||||||
|
text-align: right; |
||||||
|
color: #F8BE5E; |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
.ruleImg { |
||||||
|
width: 17px; |
||||||
|
height: 17px; |
||||||
|
position: relative; |
||||||
|
top: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.listItem { |
||||||
|
display: flex; |
||||||
|
margin: 10px 0; |
||||||
|
|
||||||
|
.itemBg { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/tips.webp"); |
||||||
|
width: 27px; |
||||||
|
height: 30px; |
||||||
|
background-size: 27px 30px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
font-weight: bold; |
||||||
|
position: relative; |
||||||
|
top: 7px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.itemAva { |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/avaBg.webp"); |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
background-size: 40px 40px; |
||||||
|
position: relative; |
||||||
|
margin-left: 20px; |
||||||
|
|
||||||
|
.itemAvaImg { |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
border-radius: 50%; |
||||||
|
position: absolute; |
||||||
|
top: 5px; |
||||||
|
left: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.itemText { |
||||||
|
font-size: 15px; |
||||||
|
color: #fff; |
||||||
|
flex: 1; |
||||||
|
line-height: 40px; |
||||||
|
padding: 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.itemNum { |
||||||
|
font-size: 18px; |
||||||
|
// font-weight: bold; |
||||||
|
color: #F8BE5E; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// mask |
||||||
|
.mask { |
||||||
|
background: rgba(60, 61, 63, 0.8); |
||||||
|
width: 100%; |
||||||
|
min-height: 100%; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
z-index: 5; |
||||||
|
|
||||||
|
.maskContent { |
||||||
|
background: #fff; |
||||||
|
width: 320px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 12px; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 50%; |
||||||
|
|
||||||
|
.title { |
||||||
|
text-align: center; |
||||||
|
font-size: 17px; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.tips { |
||||||
|
color: #3C3D3F; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 120px; |
||||||
|
height: 40px; |
||||||
|
background-size: 120px 40px; |
||||||
|
background-image: url("../../../assets/lingyungeImages/mobile/btn.webp"); |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 15px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 40px; |
||||||
|
display: block; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||