|
|
@@ -1,47 +1,371 @@
|
|
|
<template>
|
|
|
<div class="sunshineRun">
|
|
|
- <div class="sunshineRun-left">
|
|
|
- <div class="sunshineRun-title">智慧阳光跑</div>
|
|
|
- <div class="list-box">
|
|
|
- <div class="sunshineRun-columns-title">
|
|
|
- <div class="title">实时数据</div>
|
|
|
+ <div class="sunshineRun-top">
|
|
|
+ <div class="sunshineRun-top-center">
|
|
|
+ <div class="logo">
|
|
|
+ <img v-if="userInfo?.logo_url" :src="userInfo.logo_url" />
|
|
|
+ <img v-else src="@/assets/images/common/logo.png" />
|
|
|
</div>
|
|
|
- <div class="testList">
|
|
|
- <ul>
|
|
|
- <li></li>
|
|
|
- </ul>
|
|
|
+ <div class="sunshineRun-title"><img src="@/assets/images/common/logo.png" /></div>
|
|
|
+ <div class="toolList">
|
|
|
+ <div class="li">{{ date }}</div>
|
|
|
+ <div class="li btn screen" :class="{ 'on': screen, 'off': !screen }" @click="getFullScreen"></div>
|
|
|
+ <div class="li btn closeBtn" @click="confirmExit"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="sunshineRun-right">
|
|
|
- <div class="toolList">
|
|
|
- <div class="li">{{ date }}</div>
|
|
|
- <div class="li btn screen" :class="{ 'on': screen, 'off': !screen }" @click="getFullScreen"></div>
|
|
|
- <div class="li btn closeBtn" @click="confirmExit"></div>
|
|
|
- </div>
|
|
|
- <div class="list-box">
|
|
|
- <div class="sunshineRun-columns-title">
|
|
|
- <div class="title">排行榜</div>
|
|
|
+ <div class="sunshineRun-main">
|
|
|
+ <div class="sunshineRun-left">
|
|
|
+ <div class="list-box">
|
|
|
+ <div class="sunshineRun-columns-title">
|
|
|
+ <div class="title">实时数据</div>
|
|
|
+ </div>
|
|
|
+ <div class="testList">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="@/assets/images/common/logo.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="name">我是测试</div>
|
|
|
+ <div class="score">
|
|
|
+ 99999<span>{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="reportList">
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in reportList" :key="index">
|
|
|
- <div class="left">
|
|
|
- <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
|
|
|
- <div class="txt">
|
|
|
- <div>
|
|
|
- <div class="name">{{ item.student_name }}</div>
|
|
|
- <div class="className">{{ item.class_name }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="score">{{ item.result }}
|
|
|
- </div>
|
|
|
- <div class="unit">{{ unit }}</div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </div>
|
|
|
+ <div class="sunshineRun-right">
|
|
|
+ <div class="list-box">
|
|
|
+ <div class="sunshineRun-columns-title">
|
|
|
+ <div class="title">排行榜</div>
|
|
|
+ </div>
|
|
|
+ <div class="reportList">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in reportList" :key="index">
|
|
|
+ <div class="left">
|
|
|
+ <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
|
|
|
+ <div class="txt">
|
|
|
+ <div>
|
|
|
+ <div class="name">{{ item.student_name }}</div>
|
|
|
+ <div class="className">{{ item.class_name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="score">{{ item.result }}
|
|
|
+ </div>
|
|
|
+ <div class="unit">{{ unit }}</div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -51,9 +375,11 @@
|
|
|
<script setup name="SunshineRun" lang="ts">
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
|
const router = useRouter();
|
|
|
+const myInfo: any = localStorage.getItem("userInfo");
|
|
|
|
|
|
const data = reactive<any>({
|
|
|
timerManager: {},//计时器管理
|
|
|
+ userInfo: {},//用户信息
|
|
|
reportList: [],//排行榜
|
|
|
date: "",//当前时间
|
|
|
unit: "",//单位
|
|
|
@@ -62,6 +388,7 @@ const data = reactive<any>({
|
|
|
|
|
|
const {
|
|
|
timerManager,
|
|
|
+ userInfo,
|
|
|
reportList,
|
|
|
date,
|
|
|
unit,
|
|
|
@@ -149,6 +476,8 @@ const getClearTimer = (data?: any) => {
|
|
|
onBeforeMount(() => {
|
|
|
//获取当前时间
|
|
|
setDate();
|
|
|
+ //用户信息
|
|
|
+ userInfo.value = JSON.parse(myInfo);
|
|
|
//屏幕
|
|
|
let screenData = localStorage.getItem("screen");
|
|
|
if (screenData != undefined && screenData == 'false') {
|
|
|
@@ -157,7 +486,7 @@ onBeforeMount(() => {
|
|
|
screen.value = true;
|
|
|
}
|
|
|
//单位
|
|
|
- unit.value = "米";
|
|
|
+ unit.value = "M";
|
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -174,227 +503,300 @@ onBeforeUnmount(() => {
|
|
|
height: 100%;
|
|
|
padding: 1.5vw 0 1vw 0;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
- justify-content: space-evenly;
|
|
|
background: #3BDDCE url("@/assets/images/sunshineRun/bg.png") top center no-repeat;
|
|
|
background-size: cover;
|
|
|
|
|
|
- .sunshineRun-title {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- top: -1vw;
|
|
|
- font-size: 38px;
|
|
|
- // font-weight: bold;
|
|
|
- line-height: normal;
|
|
|
- letter-spacing: 6px;
|
|
|
- color: #0E1824;
|
|
|
- padding-left: 10%;
|
|
|
- }
|
|
|
+ .sunshineRun-top {
|
|
|
+ padding: 0px 1vw;
|
|
|
|
|
|
- .sunshineRun-columns-title {
|
|
|
- display: flex;
|
|
|
+ .sunshineRun-top-center {
|
|
|
+ height: 45px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sunshineRun-title {
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolList {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ color: #09111B;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .li {
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .closeBtn {
|
|
|
+ background-image: url("@/assets/images/sunshineRun/close.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen.on {
|
|
|
+ background-image: url("@/assets/images/sunshineRun/screen1.png");
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- border-top-left-radius: 18px;
|
|
|
- border-top-right-radius: 18px;
|
|
|
- background: radial-gradient(374% 336% at 36% 50%, #FFFFFF 0%, #07FFE7 100%);
|
|
|
- box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
|
|
|
- font-size: 28px;
|
|
|
- padding: 4px 35px;
|
|
|
- letter-spacing: 5px;
|
|
|
+ .screen.off {
|
|
|
+ background-image: url("@/assets/images/sunshineRun/screen2.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .sunshineRun-left {
|
|
|
- width: 76%;
|
|
|
+ .sunshineRun-main {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .list-box {
|
|
|
+ .sunshineRun-columns-title {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100%;
|
|
|
|
|
|
- .testList {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 18px;
|
|
|
- background: linear-gradient(170deg, #276066 -13%, #09111B 87%);
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #FFFFFF;
|
|
|
- box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
|
|
|
- border-top-left-radius: 0px;
|
|
|
+ .title {
|
|
|
+ height: 35px;
|
|
|
+ border-top-left-radius: 12px;
|
|
|
+ border-top-right-radius: 12px;
|
|
|
+ background: radial-gradient(374% 336% at 36% 50%, #FFFFFF 0%, #07FFE7 100%);
|
|
|
+ box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
|
|
|
+ font-size: 22px;
|
|
|
+ padding: 0px 25px;
|
|
|
+ letter-spacing: 3px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- .sunshineRun-right {
|
|
|
- width: 21%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .list-box {
|
|
|
+ .sunshineRun-left {
|
|
|
+ width: 76%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .reportList {
|
|
|
- width: 100%;
|
|
|
- border-radius: 18px;
|
|
|
- background: radial-gradient(90% 90% at 50% 100%, #38869E 0%, #38869E 50%, #17323D 100%);
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .list-box {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 100%;
|
|
|
- border-top-left-radius: 0px;
|
|
|
|
|
|
- .title {
|
|
|
- height: 7.05vh;
|
|
|
- line-height: 7.05vh;
|
|
|
+ .testList {
|
|
|
width: 100%;
|
|
|
- text-align: center;
|
|
|
- color: #1A293A;
|
|
|
- font-size: 1.65rem;
|
|
|
- background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
|
|
|
- }
|
|
|
-
|
|
|
- ul {
|
|
|
height: 100%;
|
|
|
- overflow-y: scroll;
|
|
|
-
|
|
|
- li {
|
|
|
- border-bottom: 1px solid #48677E;
|
|
|
- padding: 8px 30px;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: linear-gradient(170deg, #276066 -13%, #09111B 87%);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
|
|
|
+ border-top-left-radius: 0px;
|
|
|
+
|
|
|
+ ul {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .pic {
|
|
|
- width: 7.5vh;
|
|
|
- height: 7.5vh;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
- margin-right: 13px;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10px 5px 0px 5px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ width: calc((100% / 7) - 10px);
|
|
|
+ height: calc(((100vh - 1.5vw - 1vw - 35px - 45px - 10px) / 5) - 10px);
|
|
|
+ margin: 0px 5px 10px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 2px solid #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
- .txt {
|
|
|
+ .con {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 6px 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.87) 45%, rgba(18, 133, 124, 0.7367) 135%);
|
|
|
|
|
|
.name {
|
|
|
- color: #F9F9F9;
|
|
|
- font-size: 1.38rem;
|
|
|
+ font-size: 0.9vw;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
- .className {
|
|
|
- color: #13ED84;
|
|
|
- font-size: 1.1rem;
|
|
|
+ .score {
|
|
|
+ font-size: 1.3vw;
|
|
|
+ color: #00FFE8;
|
|
|
+ font-family: 'Saira-ExtraBold';
|
|
|
+ font-style: italic;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 0.6vw;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sunshineRun-right {
|
|
|
+ width: 21%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .list-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .right {
|
|
|
+ .reportList {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: radial-gradient(90% 90% at 50% 100%, #38869E 0%, #38869E 50%, #17323D 100%);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ border-top-left-radius: 0px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 7.05vh;
|
|
|
+ line-height: 7.05vh;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #1A293A;
|
|
|
+ font-size: 1.65rem;
|
|
|
+ background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ li {
|
|
|
+ border-bottom: 1px solid #48677E;
|
|
|
+ padding: 8px 30px;
|
|
|
display: flex;
|
|
|
- font-weight: bold;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
|
|
|
- .score {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 1.1rem;
|
|
|
- font-family: 'Saira-ExtraBold';
|
|
|
+ &:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
}
|
|
|
|
|
|
- .unit {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 0.8rem;
|
|
|
- margin-left: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
|
|
|
- }
|
|
|
+ .pic {
|
|
|
+ width: 7.5vh;
|
|
|
+ height: 7.5vh;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
+ margin-right: 13px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: 0px;
|
|
|
- }
|
|
|
+ .txt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- border-width: 2px;
|
|
|
- border-radius: 4px;
|
|
|
- border-style: dashed;
|
|
|
- border-color: transparent;
|
|
|
- background-color: rgba(216, 216, 216, 0.8);
|
|
|
- background-clip: padding-box;
|
|
|
- }
|
|
|
+ .name {
|
|
|
+ color: #F9F9F9;
|
|
|
+ font-size: 1.38rem;
|
|
|
+ }
|
|
|
|
|
|
- &::-webkit-scrollbar-button:hover {
|
|
|
- border-radius: 6px;
|
|
|
- background: rgba(216, 216, 216, 0.8);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .className {
|
|
|
+ color: #13ED84;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .toolList {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: -1vw;
|
|
|
- color: #09111B;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .li {
|
|
|
- margin-left: 15px;
|
|
|
- }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ font-weight: bold;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .btn {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- display: block;
|
|
|
- cursor: pointer;
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
+ .score {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-family: 'Saira-ExtraBold';
|
|
|
+ }
|
|
|
|
|
|
- .closeBtn {
|
|
|
- background-image: url("@/assets/images/sunshineRun/close.png");
|
|
|
- }
|
|
|
+ .unit {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .screen.on {
|
|
|
- background-image: url("@/assets/images/sunshineRun/screen1.png");
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ border-width: 2px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border-style: dashed;
|
|
|
+ border-color: transparent;
|
|
|
+ background-color: rgba(216, 216, 216, 0.8);
|
|
|
+ background-clip: padding-box;
|
|
|
+ }
|
|
|
|
|
|
- .screen.off {
|
|
|
- background-image: url("@/assets/images/sunshineRun/screen2.png");
|
|
|
+ &::-webkit-scrollbar-button:hover {
|
|
|
+ border-radius: 6px;
|
|
|
+ background: rgba(216, 216, 216, 0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</style>
|
