@ -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> |
||||