|
|
@@ -1,2149 +1,2161 @@
|
|
|
<template>
|
|
|
- <div :class="pageStyle">
|
|
|
- <Headside></Headside>
|
|
|
- <div class="userList">
|
|
|
- <ul>
|
|
|
- <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
|
|
|
- v-if="students.length > 0">
|
|
|
- <div class="ltLi" v-if="students.length == 1"></div>
|
|
|
- <div class="centerLi">
|
|
|
- <div class="topLi">
|
|
|
- <div class="human">
|
|
|
- <span class="name">{{ s.Name }}</span>
|
|
|
- <!--<img src="../static/img/people/gc.png"/>-->
|
|
|
- <!--<img v-bind:src="require('../static/img/people/' + s.head)" alt="">-->
|
|
|
- <img :src="s.Head" alt="" v-if="s.Head">
|
|
|
- <img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">
|
|
|
- </div>
|
|
|
- <div class="cla">
|
|
|
- <em v-if="s.activePercent != 0">{{ s.activePercent |fmtNum}}</em>
|
|
|
- <em class="plus" v-if="s.activePercent == 0">
|
|
|
- ---
|
|
|
- </em>
|
|
|
- </div>
|
|
|
- <div class="lcla">
|
|
|
- <span>%</span>
|
|
|
- </div>
|
|
|
- <!--fastJump-->
|
|
|
- <!--heartJump-->
|
|
|
- <div>
|
|
|
- <div class="lhj">
|
|
|
- <div :class="[{'heartJump':true}]">
|
|
|
+ <div :class="pageStyle">
|
|
|
+ <Headside></Headside>
|
|
|
+ <div class="userList">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
|
|
|
+ v-if="students.length > 0">
|
|
|
+ <div class="ltLi" v-if="students.length == 1"></div>
|
|
|
+ <div class="centerLi">
|
|
|
+ <div class="topLi">
|
|
|
+ <div class="human">
|
|
|
+ <span class="name">{{ s.Name }}</span>
|
|
|
+ <!--<img src="../static/img/people/gc.png"/>-->
|
|
|
+ <!--<img v-bind:src="require('../static/img/people/' + s.head)" alt="">-->
|
|
|
+ <img :src="s.Head" alt="" v-if="s.Head">
|
|
|
+ <img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">
|
|
|
+ </div>
|
|
|
+ <div class="cla">
|
|
|
+ <em v-if="s.activePercent != 0">{{ s.activePercent |fmtNum }}</em>
|
|
|
+ <em class="plus" v-if="s.activePercent == 0">
|
|
|
+ ---
|
|
|
+ </em>
|
|
|
+ </div>
|
|
|
+ <div class="lcla">
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <!--fastJump-->
|
|
|
+ <!--heartJump-->
|
|
|
+ <div>
|
|
|
+ <div class="lhj">
|
|
|
+ <div :class="[{'heartJump':true}]">
|
|
|
<span class="fastJump" v-if="s.realHr != 0"
|
|
|
v-show="parseInt(s.activePercent) > 90">{{ s.realHr }}</span>
|
|
|
- <span class="normalJump" v-if="s.realHr != 0"
|
|
|
- v-show="parseInt(s.activePercent) <= 90 && parseInt(s.activePercent) > 30">{{ s.realHr }}</span>
|
|
|
- <span class="slowJump" v-if="s.realHr != 0"
|
|
|
- v-show="parseInt(s.activePercent) <= 30">{{ s.realHr }}</span>
|
|
|
-
|
|
|
- <span class="plus" v-if="s.realHr == 0">
|
|
|
+ <span class="normalJump" v-if="s.realHr != 0"
|
|
|
+ v-show="parseInt(s.activePercent) <= 90 && parseInt(s.activePercent) > 30">{{
|
|
|
+ s.realHr
|
|
|
+ }}</span>
|
|
|
+ <span class="slowJump" v-if="s.realHr != 0"
|
|
|
+ v-show="parseInt(s.activePercent) <= 30">{{ s.realHr }}</span>
|
|
|
+
|
|
|
+ <span class="plus" v-if="s.realHr == 0">
|
|
|
---
|
|
|
</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rhj">
|
|
|
- <img src="../static/img/heart.svg" class=""/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottomLi">
|
|
|
- <div class="btcla">
|
|
|
- <img src="../static/img/s1.svg"/>
|
|
|
- <span>{{ s.Cle |fmtInt }}</span>
|
|
|
- </div>
|
|
|
- <div class="btck">
|
|
|
- <img src="../static/img/s2.svg"/>
|
|
|
- <span>{{ s.PureCalorieNoVo2 |fmtInt }}</span>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <img src="../static/img/ck.svg"/>
|
|
|
- <span>{{ s.Ck |fmtFloat}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rtLi" v-if="students.length == 1"></div>
|
|
|
- <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!--图示-->
|
|
|
- <div class="levelIcon">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rhj">
|
|
|
+ <img src="../static/img/heart.svg" class=""/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomLi">
|
|
|
+ <div class="btcla">
|
|
|
+ <img src="../static/img/s1.svg"/>
|
|
|
+ <span>{{ s.Cle |fmtInt }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="btck">
|
|
|
+ <img src="../static/img/s2.svg"/>
|
|
|
+ <span>{{ s.PureCalorieNoVo2 |fmtInt }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="step">
|
|
|
+ <img src="../static/img/ck.svg"/>
|
|
|
+ <span>{{ s.Ck |fmtFloat }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rtLi" v-if="students.length == 1"></div>
|
|
|
+ <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!--图示-->
|
|
|
+ <div class="levelIcon">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
<span class="cube">
|
|
|
<div>
|
|
|
0%-<br>
|
|
|
39%
|
|
|
</div>
|
|
|
</span>
|
|
|
- <em>激活放松</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
+ <em>激活放松</em>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
<span class="cube">
|
|
|
<div>
|
|
|
40%-<br>54% </div>
|
|
|
</span>
|
|
|
- <em>动态热身</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
+ <em>动态热身</em>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
<span class="cube">
|
|
|
<div>
|
|
|
55%-<br>69% </div>
|
|
|
</span>
|
|
|
- <em>脂肪燃烧</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
+ <em>脂肪燃烧</em>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
<span class="cube">
|
|
|
<div>
|
|
|
70%-<br>79% </div>
|
|
|
</span>
|
|
|
- <em>糖分消耗</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
+ <em>糖分消耗</em>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
<span class="cube">
|
|
|
<div>
|
|
|
80%-<br>89% </div>
|
|
|
</span>
|
|
|
- <em>心肺训练</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
+ <em>心肺训练</em>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
<span class="cube">
|
|
|
<div>
|
|
|
≥90% </div>
|
|
|
</span>
|
|
|
- <em>峰值锻炼</em>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <newRecord :toper-info="toperInfo"></newRecord>
|
|
|
+ <em>峰值锻炼</em>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
+ <newRecord :toper-info="toperInfo"></newRecord>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import Headside from '@/components/Headside'
|
|
|
- import {getHello, getRecordBreak} from '@/api/getApiRes'
|
|
|
- import newRecord from '@/components/newRecord'
|
|
|
- import '../libs/rem';
|
|
|
- import '../Global'
|
|
|
- let qs = require('qs');
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pageStyle:RandomBg(),
|
|
|
- trueDate: true,//真实数据 true false
|
|
|
- totalTime: 4,
|
|
|
- times: 1,
|
|
|
- thisClassName: '',
|
|
|
- studentsClassName: [],
|
|
|
- students: [],
|
|
|
- single: [],
|
|
|
- dialogVisible: false,
|
|
|
- serachBtnStatus: false,
|
|
|
- dialogMsg: '',
|
|
|
- imgsrc: '../static/img/people/',
|
|
|
- toperInfo: {
|
|
|
- dialogVisible: false,
|
|
|
- toper: {},
|
|
|
- },
|
|
|
- // 本地绑定名字和头像路径
|
|
|
- headImg: [
|
|
|
- {name: 'ydy.png'},
|
|
|
- {name: 'sxf.png'},
|
|
|
- {name: 'lxl.png'},
|
|
|
- {name: 'lhs.png'},
|
|
|
- {name: 'jyq.png'},
|
|
|
- {name: 'lyh.png'},
|
|
|
- {name: 'slc.png'},
|
|
|
- {name: 'dcp.png'},
|
|
|
- {name: 'zw.png'},
|
|
|
- {name: 'zr.png'},
|
|
|
- {name: 'jy.png'},
|
|
|
- {name: 'wzx.png'},
|
|
|
- {name: 'gc.png'},
|
|
|
- {name: 'wfl.png'},
|
|
|
- {name: 'zjh.png'},
|
|
|
- {name: 'zy.png'},
|
|
|
- {name: 'zw.png'},
|
|
|
- {name: 'zw.png'},
|
|
|
- ],
|
|
|
- nameList: [
|
|
|
- {name: '杨东艳'},
|
|
|
- {name: '隋小飞'},
|
|
|
- {name: '刘晓蕾'},
|
|
|
- {name: '刘海生'},
|
|
|
- {name: '贾雨琦'},
|
|
|
- {name: '李延海'},
|
|
|
- {name: '宋凌晨'},
|
|
|
- {name: '段长鹏'},
|
|
|
- {name: '郑伟'},
|
|
|
- {name: '周睿'},
|
|
|
- {name: '贾奕'},
|
|
|
- {name: '王正祥'},
|
|
|
- {name: '高超'},
|
|
|
- {name: '武发鲁'},
|
|
|
- {name: '赵晋洪'},
|
|
|
- {name: '张岩'},
|
|
|
- {name: '郑伟'},
|
|
|
- {name: '郑伟'},
|
|
|
- ],
|
|
|
- fakeEgg: {
|
|
|
- Rs: {
|
|
|
- "DuId": 37,
|
|
|
- "UserId": 0,
|
|
|
- "UserName": "郑伟",
|
|
|
- "Sex": 1,
|
|
|
- // "Head": "http://192.168.0.2/zw.png",
|
|
|
- "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
|
|
|
- "Cle": 400,
|
|
|
- "CleTitle": "个人单次卡路里记录",
|
|
|
- "CleUnit": "千卡",
|
|
|
- "CkTitle": "个人单次CK记录",
|
|
|
- "Ck": 99.9,
|
|
|
- "CkUnit": "CK值"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.trueDate) {
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.GetgetUserList();
|
|
|
- }, 1000);
|
|
|
-
|
|
|
- this.timer2 = setInterval(() => {
|
|
|
- this.createEgg();
|
|
|
- }, 6000);
|
|
|
- this.GetgetUserList();
|
|
|
- this.createEgg();
|
|
|
- } else {
|
|
|
- this.OpenEgg(this.fakeEgg);
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.students = this.fakeNews();
|
|
|
- this.giveClassName(this.students);
|
|
|
- }, 1000);
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // this.alertInfo(document.body.clientWidth);
|
|
|
- // this.alertInfo(window.screen.height);
|
|
|
-
|
|
|
- // 倒计时
|
|
|
- let that = this;
|
|
|
- // that.serachBtnStatus = true;
|
|
|
- // let totalTime = 3
|
|
|
- // let clock = window.setInterval(() => {
|
|
|
- // totalTime--
|
|
|
- // if (totalTime < 0) {
|
|
|
- // totalTime = 3;
|
|
|
- // that.serachBtnStatus = false;
|
|
|
- // that.$router.push({path: '/rank'});
|
|
|
- // }
|
|
|
- // }
|
|
|
- // ,
|
|
|
- // 1000
|
|
|
- // )
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- fakeNews() {
|
|
|
- let item = [];
|
|
|
- // 1 2 3 5 9 11 13 16 21 30
|
|
|
- let fakeNums = 30;
|
|
|
- for (var i = 0; i < fakeNums; i++) {
|
|
|
- item.push(
|
|
|
- {
|
|
|
- "SvId": 1,
|
|
|
- "UserId": 1,
|
|
|
- "Cle": 999,
|
|
|
- "realHr1": parseInt(Math.random() * 100 + 50),
|
|
|
- "realHr": 100,
|
|
|
- "heartRate": 100,
|
|
|
- "activePercen1t": parseInt(Math.random() * 100 + 50),
|
|
|
- "activePercent": 100,
|
|
|
- "Steps": 9999,
|
|
|
- "PureCalorieNoVo2": 999,
|
|
|
- "Name": "东南西北",
|
|
|
- "updateTime": 1604568915582,
|
|
|
- "Ck": 99.9,
|
|
|
- "head": 'https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png',
|
|
|
- "Head": 'https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png',
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
- return item;
|
|
|
- },
|
|
|
- alertInfo(info) {
|
|
|
- alert(info);
|
|
|
- },
|
|
|
- // 启动一个成就彩蛋
|
|
|
- createEgg(msg) {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- token: localStorage.token,
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- getRecordBreak(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- this.OpenEgg(json);
|
|
|
- } else {
|
|
|
- // 并没有人破记录
|
|
|
- if (json.Code == 999) return false;
|
|
|
- if (json.Code != 999) that.$message.error(json.Memo);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- OpenEgg(msg) {
|
|
|
- this.toperInfo.toper = msg.Rs;
|
|
|
- this.toperInfo.dialogVisible = true;
|
|
|
- // 倒计时5秒自动关闭
|
|
|
- let that = this;
|
|
|
- this.totalTime = 4;
|
|
|
- let clock = window.setInterval(() => {
|
|
|
- this.totalTime--;
|
|
|
- if (parseInt(this.totalTime) < 0) {
|
|
|
- that.toperInfo.dialogVisible = false;
|
|
|
- clearInterval(clock);
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- GetgetUserList() {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- token: localStorage.token,
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
-
|
|
|
- getHello(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- // 返回空值不处理
|
|
|
-
|
|
|
- if (that.times == 1) {
|
|
|
- that.students = json.Rs;
|
|
|
- if (!json.Rs) return false;
|
|
|
- // 添加头像 和 姓名
|
|
|
- that.students.map(function (i, v) {
|
|
|
- i.head = that.headImg[v].name;
|
|
|
- i.userNmae = that.nameList[v].name
|
|
|
- });
|
|
|
- that.times++
|
|
|
- } else {
|
|
|
- if (localStorage.result != JSON.stringify(json.Rs)) {
|
|
|
- that.students = json.Rs;
|
|
|
- // this.createEgg(this.students[1]);
|
|
|
- if (!json.Rs) return false;
|
|
|
- // 添加头像 和 姓名
|
|
|
- that.students.map(function (i, v) {
|
|
|
- i.head = that.headImg[v].name;
|
|
|
- i.userNmae = that.nameList[v].name
|
|
|
- });
|
|
|
- }
|
|
|
- localStorage.res = JSON.stringify(json.Rs);
|
|
|
- }
|
|
|
-
|
|
|
- that.giveClassName(json.Rs);
|
|
|
- // test 启动一个成就彩蛋
|
|
|
- // this.createEgg(that.students[4]);
|
|
|
- } else {
|
|
|
- // 已下课
|
|
|
- console.log(json.Code);
|
|
|
- if (json.Code == '999') {
|
|
|
- that.$router.push({path: '/rank'});
|
|
|
- } else {
|
|
|
- // 已出错
|
|
|
- that.$message.error(json.Memo);
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 给每一个数据加类名，一次遍历全部赋值
|
|
|
- giveClassName(res) {
|
|
|
- let that = this;
|
|
|
- let numberClass = '';
|
|
|
- let colorClass = '';
|
|
|
- for (let i = 0; i < parseInt(res.length); i++) {
|
|
|
- switch (true) {
|
|
|
- case parseInt(res.length) == 1:
|
|
|
- numberClass = 'max';
|
|
|
- break;
|
|
|
- case parseInt(res.length) == 2:
|
|
|
- numberClass = 'two';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 4 && parseInt(res.length) > 2:
|
|
|
- numberClass = 'three';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 6 && parseInt(res.length) > 4:
|
|
|
- numberClass = 'six';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 9 && parseInt(res.length) > 6:
|
|
|
- numberClass = 'nine';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
|
|
|
- numberClass = 'ten';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
|
|
|
- numberClass = 'twelve';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
|
|
|
- numberClass = 'sixteen';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
|
|
|
- numberClass = 'twenty';
|
|
|
- break;
|
|
|
- case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
|
|
|
- numberClass = 'twentyFour';
|
|
|
- break;
|
|
|
- case parseInt(res.length) > 31:
|
|
|
- numberClass = 'thirtyFive';
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- let per = parseInt(res[i].activePercent);
|
|
|
- switch (true) {
|
|
|
- case per >= 90:
|
|
|
- colorClass = 'red';
|
|
|
- break;
|
|
|
- case per <= 89 && per > 79:
|
|
|
- colorClass = 'brown';
|
|
|
- break;
|
|
|
- case per <= 79 && per > 70:
|
|
|
- colorClass = 'yellow';
|
|
|
- break;
|
|
|
- case per <= 70 && per > 54:
|
|
|
- colorClass = 'green';
|
|
|
- break;
|
|
|
- case per <= 54 && per > 39:
|
|
|
- colorClass = 'violet';
|
|
|
- break;
|
|
|
- case per <= 39:
|
|
|
- colorClass = 'blue';
|
|
|
- break
|
|
|
- }
|
|
|
- that.studentsClassName[i] = {
|
|
|
- name: numberClass + ' ' + colorClass,
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- filters: {
|
|
|
- fmtNum(val) {
|
|
|
- if (val == 0) {
|
|
|
- return '--'
|
|
|
- } else {
|
|
|
- if (parseInt(val) < 0) return 0;
|
|
|
- if (parseInt(val) > 0) return val
|
|
|
- }
|
|
|
- },
|
|
|
- fmtFloat(val) {
|
|
|
- if (val == 0) {
|
|
|
- return '0'
|
|
|
- } else {
|
|
|
- return parseFloat(val).toFixed(1);
|
|
|
- }
|
|
|
- },
|
|
|
- fmtInt(val) {
|
|
|
- if (val == 0) {
|
|
|
- return '0'
|
|
|
- } else {
|
|
|
- return parseInt(val);
|
|
|
- // return parseFloat(val).toFixed(3);
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- '$route': function (val) {
|
|
|
- if (val.path == '/') {
|
|
|
- if (this.trueDate) {
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.GetgetUserList();
|
|
|
- }, 1000);
|
|
|
- this.GetgetUserList();
|
|
|
- } else {
|
|
|
- this.students = this.fakeNews();
|
|
|
- this.giveClassName(this.students);
|
|
|
- // this.createEgg(this.students[5]);
|
|
|
- }
|
|
|
- } else {
|
|
|
- clearInterval(this.timer);
|
|
|
- clearInterval(this.timer2);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- Headside, newRecord
|
|
|
+import Headside from '@/components/Headside'
|
|
|
+import {getHello, getRecordBreak} from '@/api/getApiRes'
|
|
|
+import newRecord from '@/components/newRecord'
|
|
|
+import '../libs/rem';
|
|
|
+import '../Global'
|
|
|
+
|
|
|
+let qs = require('qs');
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageStyle: RandomBg(),
|
|
|
+ trueDate: false,//真实数据 true false
|
|
|
+ totalTime: 4,
|
|
|
+ times: 1,
|
|
|
+ thisClassName: '',
|
|
|
+ studentsClassName: [],
|
|
|
+ students: [],
|
|
|
+ single: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ serachBtnStatus: false,
|
|
|
+ dialogMsg: '',
|
|
|
+ imgsrc: '../static/img/people/',
|
|
|
+ toperInfo: {
|
|
|
+ dialogVisible: false,
|
|
|
+ toper: {},
|
|
|
+ },
|
|
|
+ // 本地绑定名字和头像路径
|
|
|
+ headImg: [
|
|
|
+ {name: 'ydy.png'},
|
|
|
+ {name: 'sxf.png'},
|
|
|
+ {name: 'lxl.png'},
|
|
|
+ {name: 'lhs.png'},
|
|
|
+ {name: 'jyq.png'},
|
|
|
+ {name: 'lyh.png'},
|
|
|
+ {name: 'slc.png'},
|
|
|
+ {name: 'dcp.png'},
|
|
|
+ {name: 'zw.png'},
|
|
|
+ {name: 'zr.png'},
|
|
|
+ {name: 'jy.png'},
|
|
|
+ {name: 'wzx.png'},
|
|
|
+ {name: 'gc.png'},
|
|
|
+ {name: 'wfl.png'},
|
|
|
+ {name: 'zjh.png'},
|
|
|
+ {name: 'zy.png'},
|
|
|
+ {name: 'zw.png'},
|
|
|
+ {name: 'zw.png'},
|
|
|
+ ],
|
|
|
+ nameList: [
|
|
|
+ {name: '杨东艳'},
|
|
|
+ {name: '隋小飞'},
|
|
|
+ {name: '刘晓蕾'},
|
|
|
+ {name: '刘海生'},
|
|
|
+ {name: '贾雨琦'},
|
|
|
+ {name: '李延海'},
|
|
|
+ {name: '宋凌晨'},
|
|
|
+ {name: '段长鹏'},
|
|
|
+ {name: '郑伟'},
|
|
|
+ {name: '周睿'},
|
|
|
+ {name: '贾奕'},
|
|
|
+ {name: '王正祥'},
|
|
|
+ {name: '高超'},
|
|
|
+ {name: '武发鲁'},
|
|
|
+ {name: '赵晋洪'},
|
|
|
+ {name: '张岩'},
|
|
|
+ {name: '郑伟'},
|
|
|
+ {name: '郑伟'},
|
|
|
+ ],
|
|
|
+ fakeEgg: {
|
|
|
+ Rs: {
|
|
|
+ "DuId": 37,
|
|
|
+ "UserId": 0,
|
|
|
+ "UserName": "郑伟",
|
|
|
+ "Sex": 1,
|
|
|
+ // "Head": "http://192.168.0.2/zw.png",
|
|
|
+ "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
|
|
|
+ "Cle": 400,
|
|
|
+ "CleTitle": "个人单次卡路里记录",
|
|
|
+ "CleUnit": "千卡",
|
|
|
+ "CkTitle": "个人单次CK记录",
|
|
|
+ "Ck": 99.9,
|
|
|
+ "CkUnit": "CK值"
|
|
|
}
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .pages {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .bgStyle1 {
|
|
|
- background-color: #028fe1;
|
|
|
- background: url("../static/img/bg/bg_1.png");
|
|
|
- background-size: 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .bgStyle2 {
|
|
|
- background-color: #028fe1;
|
|
|
- background: url("../static/img/bg/bg_2.png");
|
|
|
- background-size: 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .bgStyle3 {
|
|
|
- background-color: #028fe1;
|
|
|
- background: url("../static/img/bg/bg_3.png");
|
|
|
- background-size: 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .bgStyle4 {
|
|
|
- background-color: #028fe1;
|
|
|
- background: url("../static/img/bg/bg_4.png");
|
|
|
- background-size: 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- ul, li {
|
|
|
- list-style: none;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .blue .centerLi {
|
|
|
- background: #028FE1;
|
|
|
- }
|
|
|
-
|
|
|
- .violet .centerLi {
|
|
|
- background: #6D26FA;
|
|
|
- }
|
|
|
-
|
|
|
- .green .centerLi {
|
|
|
- background: #0AB105;
|
|
|
- }
|
|
|
-
|
|
|
- .yellow .centerLi {
|
|
|
- background: #BACC01;
|
|
|
- }
|
|
|
-
|
|
|
- .brown .centerLi {
|
|
|
- background: #EA8813;
|
|
|
- }
|
|
|
-
|
|
|
- .red .centerLi {
|
|
|
- background: #CF1122;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon {
|
|
|
- position: absolute;
|
|
|
- bottom: 0.1rem;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- height: 5rem;
|
|
|
- padding-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon ul {
|
|
|
- width: 96%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0;
|
|
|
- margin-left: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li {
|
|
|
- width: 14.666666666667%;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- padding-left: 2.4%;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(1) {
|
|
|
- padding-left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li span {
|
|
|
- width: 5rem;
|
|
|
- height: 4rem;
|
|
|
- overflow: hidden;
|
|
|
- float: left;
|
|
|
- background: url("../static/img/t1.svg");
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-weight: normal;
|
|
|
- font-size: 1.2rem;
|
|
|
- letter-spacing: -0.05em;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- line-height: 0.4rem;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li span div {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 17%;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(2) span {
|
|
|
- background: url("../static/img/t2.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(3) span {
|
|
|
- background: url("../static/img/t3.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(4) span {
|
|
|
- background: url("../static/img/t4.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(5) span {
|
|
|
- background: url("../static/img/t5.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(6) span {
|
|
|
- background: url("../static/img/t6.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(6) span div {
|
|
|
- margin-top: 13%;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li em {
|
|
|
- float: right;
|
|
|
- width: 4rem;
|
|
|
- height: 42px;
|
|
|
- border-radius: 21px;
|
|
|
- background: rgba(2, 143, 225, 0.16);
|
|
|
- border: 1px solid #028fe1;
|
|
|
- box-shadow: 0px 0px 5px #028fe1;
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-weight: normal;
|
|
|
- font-size: 24px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-style: normal;
|
|
|
- line-height: 42px;
|
|
|
- margin-top: 15%;
|
|
|
- margin-left: 1%;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(2) em {
|
|
|
- background: rgba(109, 38, 250, 0.16);
|
|
|
- border: 1px solid #6d26fa;
|
|
|
- box-shadow: 0px 0px 5px #6d26fa;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(3) em {
|
|
|
- background: rgba(10, 177, 5, 0.16);
|
|
|
- border: 1px solid #0ab105;
|
|
|
- box-shadow: 0px 0px 5px #0ab105;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(4) em {
|
|
|
- background: rgba(186, 204, 1, 0.16);
|
|
|
- border: 1px solid #bacc01;
|
|
|
- box-shadow: 0px 0px 5px #bacc01;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(5) em {
|
|
|
- background: rgba(234, 136, 19, 0.16);
|
|
|
- border: 1px solid #ea8813;
|
|
|
- box-shadow: 0px 0px 5px #ea8813;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li:nth-child(6) em {
|
|
|
- background: rgba(209, 17, 34, 0.16);
|
|
|
- border: 1px solid #d11122;
|
|
|
- box-shadow: 0px 0px 5px #d11122;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon {
|
|
|
- height: 70px;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li span {
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- font-size: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li span div {
|
|
|
- font-size: 16px;
|
|
|
- padding-top: 0.19rem;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon ul {
|
|
|
- width: 98%;
|
|
|
- }
|
|
|
-
|
|
|
- .levelIcon li em {
|
|
|
- width: 45%;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 0.2rem;
|
|
|
- margin-top: 11%;
|
|
|
- margin-left: 3%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .slowJump {
|
|
|
- animation: mymove 3s infinite;
|
|
|
- -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
|
|
|
- animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
- animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
- /* Safari 和 Chrome */
|
|
|
- -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
- -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
- }
|
|
|
-
|
|
|
- .normalJump {
|
|
|
- animation: mymove 2s infinite;
|
|
|
- -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
|
|
|
- animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
- animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
- /* Safari 和 Chrome */
|
|
|
- -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
- -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
- }
|
|
|
-
|
|
|
- .fastJump {
|
|
|
- animation: mymove 1s infinite;
|
|
|
- -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
|
|
|
- animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
- animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
- /* Safari 和 Chrome */
|
|
|
- -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
- -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes mymove {
|
|
|
- 0% {
|
|
|
- transform: scale(1); /*开始为原始大小*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.trueDate) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.GetgetUserList();
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ this.timer2 = setInterval(() => {
|
|
|
+ this.createEgg();
|
|
|
+ }, 6000);
|
|
|
+ this.GetgetUserList();
|
|
|
+ this.createEgg();
|
|
|
+ } else {
|
|
|
+ this.OpenEgg(this.fakeEgg);
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.students = this.fakeNews();
|
|
|
+ this.giveClassName(this.students);
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // this.alertInfo(document.body.clientWidth);
|
|
|
+ // this.alertInfo(window.screen.height);
|
|
|
+
|
|
|
+ // 倒计时
|
|
|
+ let that = this;
|
|
|
+ // that.serachBtnStatus = true;
|
|
|
+ // let totalTime = 3
|
|
|
+ // let clock = window.setInterval(() => {
|
|
|
+ // totalTime--
|
|
|
+ // if (totalTime < 0) {
|
|
|
+ // totalTime = 3;
|
|
|
+ // that.serachBtnStatus = false;
|
|
|
+ // that.$router.push({path: '/rank'});
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // ,
|
|
|
+ // 1000
|
|
|
+ // )
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ fakeNews() {
|
|
|
+ let item = [];
|
|
|
+ // 1 2 3 5 9 11 13 16 21 30
|
|
|
+ let fakeNums = 30;
|
|
|
+ for (var i = 0; i < fakeNums; i++) {
|
|
|
+ item.push(
|
|
|
+ {
|
|
|
+ "SvId": 1,
|
|
|
+ "UserId": 1,
|
|
|
+ "Cle": 999,
|
|
|
+ "realHr1": parseInt(Math.random() * 100 + 50),
|
|
|
+ "realHr": 100,
|
|
|
+ "heartRate": 100,
|
|
|
+ "activePercen1t": parseInt(Math.random() * 100 + 50),
|
|
|
+ "activePercent": 100,
|
|
|
+ "Steps": 9999,
|
|
|
+ "PureCalorieNoVo2": 999,
|
|
|
+ "Name": "东南西北中",
|
|
|
+ "updateTime": 1604568915582,
|
|
|
+ "Ck": 99.9,
|
|
|
+ "head": 'https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png',
|
|
|
+ "Head": 'https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ },
|
|
|
+ alertInfo(info) {
|
|
|
+ alert(info);
|
|
|
+ },
|
|
|
+ // 启动一个成就彩蛋
|
|
|
+ createEgg(msg) {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ token: localStorage.token,
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+ getRecordBreak(postdata).then(res => {
|
|
|
+ let json = res;
|
|
|
+ if (json.Code == 0) {
|
|
|
+ this.OpenEgg(json);
|
|
|
+ } else {
|
|
|
+ // 并没有人破记录
|
|
|
+ if (json.Code == 999) return false;
|
|
|
+ if (json.Code != 999) that.$message.error(json.Memo);
|
|
|
}
|
|
|
- 25% {
|
|
|
- transform: scale(1.1); /*放大1.1倍*/
|
|
|
+ })
|
|
|
+ },
|
|
|
+ OpenEgg(msg) {
|
|
|
+ this.toperInfo.toper = msg.Rs;
|
|
|
+ this.toperInfo.dialogVisible = true;
|
|
|
+ // 倒计时5秒自动关闭
|
|
|
+ let that = this;
|
|
|
+ this.totalTime = 4;
|
|
|
+ let clock = window.setInterval(() => {
|
|
|
+ this.totalTime--;
|
|
|
+ if (parseInt(this.totalTime) < 0) {
|
|
|
+ that.toperInfo.dialogVisible = false;
|
|
|
+ clearInterval(clock);
|
|
|
}
|
|
|
- 50% {
|
|
|
- transform: scale(1);
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ GetgetUserList() {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ token: localStorage.token,
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+
|
|
|
+ getHello(postdata).then(res => {
|
|
|
+ let json = res;
|
|
|
+ if (json.Code == 0) {
|
|
|
+ // 返回空值不处理
|
|
|
+
|
|
|
+ if (that.times == 1) {
|
|
|
+ that.students = json.Rs;
|
|
|
+ if (!json.Rs) return false;
|
|
|
+ // 添加头像 和 姓名
|
|
|
+ that.students.map(function (i, v) {
|
|
|
+ i.head = that.headImg[v].name;
|
|
|
+ i.userNmae = that.nameList[v].name
|
|
|
+ });
|
|
|
+ that.times++
|
|
|
+ } else {
|
|
|
+ if (localStorage.result != JSON.stringify(json.Rs)) {
|
|
|
+ that.students = json.Rs;
|
|
|
+ // this.createEgg(this.students[1]);
|
|
|
+ if (!json.Rs) return false;
|
|
|
+ // 添加头像 和 姓名
|
|
|
+ that.students.map(function (i, v) {
|
|
|
+ i.head = that.headImg[v].name;
|
|
|
+ i.userNmae = that.nameList[v].name
|
|
|
+ });
|
|
|
+ }
|
|
|
+ localStorage.res = JSON.stringify(json.Rs);
|
|
|
+ }
|
|
|
+
|
|
|
+ that.giveClassName(json.Rs);
|
|
|
+ // test 启动一个成就彩蛋
|
|
|
+ // this.createEgg(that.students[4]);
|
|
|
+ } else {
|
|
|
+ // 已下课
|
|
|
+ console.log(json.Code);
|
|
|
+ if (json.Code == '999') {
|
|
|
+ that.$router.push({path: '/rank'});
|
|
|
+ } else {
|
|
|
+ // 已出错
|
|
|
+ that.$message.error(json.Memo);
|
|
|
+ }
|
|
|
}
|
|
|
- 75% {
|
|
|
- transform: scale(1.1);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 给每一个数据加类名，一次遍历全部赋值
|
|
|
+ giveClassName(res) {
|
|
|
+ let that = this;
|
|
|
+ let numberClass = '';
|
|
|
+ let colorClass = '';
|
|
|
+ for (let i = 0; i < parseInt(res.length); i++) {
|
|
|
+ switch (true) {
|
|
|
+ case parseInt(res.length) == 1:
|
|
|
+ numberClass = 'max';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) == 2:
|
|
|
+ numberClass = 'two';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 4 && parseInt(res.length) > 2:
|
|
|
+ numberClass = 'three';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 6 && parseInt(res.length) > 4:
|
|
|
+ numberClass = 'six';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 9 && parseInt(res.length) > 6:
|
|
|
+ numberClass = 'nine';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
|
|
|
+ numberClass = 'ten';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
|
|
|
+ numberClass = 'twelve';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
|
|
|
+ numberClass = 'sixteen';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
|
|
|
+ numberClass = 'twenty';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
|
|
|
+ numberClass = 'twentyFour';
|
|
|
+ break;
|
|
|
+ case parseInt(res.length) > 31:
|
|
|
+ numberClass = 'thirtyFive';
|
|
|
+ break;
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- @-webkit-keyframes mymove /*Safari and Chrome*/
|
|
|
- {
|
|
|
- 0% {
|
|
|
- transform: scale(1); /*开始为原始大小*/
|
|
|
- }
|
|
|
- 25% {
|
|
|
- transform: scale(1.1); /*放大1.1倍*/
|
|
|
+ let per = parseInt(res[i].activePercent);
|
|
|
+ switch (true) {
|
|
|
+ case per >= 90:
|
|
|
+ colorClass = 'red';
|
|
|
+ break;
|
|
|
+ case per <= 89 && per > 79:
|
|
|
+ colorClass = 'brown';
|
|
|
+ break;
|
|
|
+ case per <= 79 && per > 70:
|
|
|
+ colorClass = 'yellow';
|
|
|
+ break;
|
|
|
+ case per <= 70 && per > 54:
|
|
|
+ colorClass = 'green';
|
|
|
+ break;
|
|
|
+ case per <= 54 && per > 39:
|
|
|
+ colorClass = 'violet';
|
|
|
+ break;
|
|
|
+ case per <= 39:
|
|
|
+ colorClass = 'blue';
|
|
|
+ break
|
|
|
}
|
|
|
- 50% {
|
|
|
- transform: scale(1);
|
|
|
+ that.studentsClassName[i] = {
|
|
|
+ name: numberClass + ' ' + colorClass,
|
|
|
}
|
|
|
- 75% {
|
|
|
- transform: scale(1.1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ fmtNum(val) {
|
|
|
+ if (val == 0) {
|
|
|
+ return '--'
|
|
|
+ } else {
|
|
|
+ if (parseInt(val) < 0) return 0;
|
|
|
+ if (parseInt(val) > 0) return val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fmtFloat(val) {
|
|
|
+ if (val == 0) {
|
|
|
+ return '0'
|
|
|
+ } else {
|
|
|
+ return parseFloat(val).toFixed(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fmtInt(val) {
|
|
|
+ if (val == 0) {
|
|
|
+ return '0'
|
|
|
+ } else {
|
|
|
+ return parseInt(val);
|
|
|
+ // return parseFloat(val).toFixed(3);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route': function (val) {
|
|
|
+ if (val.path == '/') {
|
|
|
+ if (this.trueDate) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.GetgetUserList();
|
|
|
+ }, 1000);
|
|
|
+ this.GetgetUserList();
|
|
|
+ } else {
|
|
|
+ this.students = this.fakeNews();
|
|
|
+ this.giveClassName(this.students);
|
|
|
+ // this.createEgg(this.students[5]);
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*userList*/
|
|
|
-
|
|
|
- .userList {
|
|
|
- width: 100%;
|
|
|
- height: 76%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0.1rem auto;
|
|
|
- }
|
|
|
-
|
|
|
- .userList ul {
|
|
|
- /*width: 100%;*/
|
|
|
- height: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0.1rem;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .userList li {
|
|
|
- display: block;
|
|
|
- z-index: 666;
|
|
|
- }
|
|
|
-
|
|
|
- .centerLi {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- float: left;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .human img {
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 2px solid #fff;
|
|
|
- border-radius: 250px;
|
|
|
- /*box-shadow: 0px 0px 5px #fff;*/
|
|
|
- }
|
|
|
-
|
|
|
- s {
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-
|
|
|
- em {
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .cla {
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .centerLi .human {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .human .name {
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .lcla span {
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .cla em {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .heartJump {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .lhj span {
|
|
|
- position: relative;
|
|
|
- text-align: right;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .rhj {
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .rhj img {
|
|
|
- position: relative;
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .bottomLi {
|
|
|
- width: 96%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 0.4rem;
|
|
|
- font-weight: normal !important;
|
|
|
- color: #fff;
|
|
|
- text-align: left;
|
|
|
- line-height: 0.7rem;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomLi img {
|
|
|
- float: left;
|
|
|
- margin-left: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomLi .btcla {
|
|
|
- width: 33.333%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomLi .btck {
|
|
|
- width: 33.333%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomLi .step {
|
|
|
- width: 33.333%;
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomLi span {
|
|
|
- float: left;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .topLi {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- /*max*/
|
|
|
- .max {
|
|
|
- width: 12rem;
|
|
|
- height: 6rem;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .centerLi {
|
|
|
- width: 90%;
|
|
|
- }
|
|
|
-
|
|
|
- .max .ltLi {
|
|
|
- width: 5%;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- background: url("../static/img/ltCube.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .max .rtLi {
|
|
|
- width: 5%;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- background: url("../static/img/rtCube.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .max .human .name {
|
|
|
- font-size: 0.5rem;
|
|
|
- height: 1rem;
|
|
|
- line-height: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .human img {
|
|
|
- width: 3rem;
|
|
|
- height: 3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .cla {
|
|
|
- width: 3rem;
|
|
|
- height: 2rem;
|
|
|
- top: -2.4rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.55rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .lcla span {
|
|
|
- font-size: 0.7rem;
|
|
|
- top: -2.4rem;
|
|
|
- float: left;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .max .cla em {
|
|
|
- font-size: 1.5rem;
|
|
|
- left: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .lhj span {
|
|
|
- width: 3rem;
|
|
|
- height: 2rem;
|
|
|
- top: -2.4rem;
|
|
|
- left: 3.4rem;
|
|
|
- font-size: 1.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .rhj img {
|
|
|
- width: 0.5rem;
|
|
|
- top: -2.3rem;
|
|
|
- right: 0.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .longIcon {
|
|
|
- position: absolute;
|
|
|
- width: 1.96rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- bottom: 2rem;
|
|
|
- right: 3.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .topLi {
|
|
|
- height: 4.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi {
|
|
|
- font-size: 0.5rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .btck {
|
|
|
- /*text-indent: 1.6rem;*/
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi img {
|
|
|
- width: 0.5rem;
|
|
|
- height: 0.5rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .btck {
|
|
|
- width: 29%;
|
|
|
- padding-left: 1%;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .step {
|
|
|
- width: 24%;
|
|
|
- padding-right: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .max .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.5rem
|
|
|
- }
|
|
|
-
|
|
|
- .max .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 2.75rem
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .btcla img {
|
|
|
- width: 0.5rem;
|
|
|
- height: 0.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .btcla span {
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .btck span {
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .max .bottomLi .btck img {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.6rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*two*/
|
|
|
- .two {
|
|
|
- width: 49%;
|
|
|
- height: 5.33rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- border: 1px solid #fff;
|
|
|
- margin-top: 6%
|
|
|
- }
|
|
|
-
|
|
|
- .two:nth-child(2) {
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .two .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 1rem;
|
|
|
- font-size: 0.6rem;
|
|
|
- line-height: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .human img {
|
|
|
- width: 2.8rem;
|
|
|
- height: 2.8rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .cla {
|
|
|
- width: 2.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -2.4rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .lcla span {
|
|
|
- font-size: 0.55rem;
|
|
|
- top: -2.3rem;
|
|
|
- float: left;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .two .cla em {
|
|
|
- font-size: 1.5rem;
|
|
|
- left: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .lhj span {
|
|
|
- width: 3rem;
|
|
|
- height: 2rem;
|
|
|
- top: -2.4rem;
|
|
|
- left: 2.4rem;
|
|
|
- font-size: 1.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .rhj img {
|
|
|
- width: 0.45rem;
|
|
|
- top: -2.2rem;
|
|
|
- right: 0.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .topLi {
|
|
|
- height: 4.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi {
|
|
|
- font-size: 0.5rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi img {
|
|
|
- width: 0.5rem;
|
|
|
- height: 0.5rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi .btck {
|
|
|
- width: 29%;
|
|
|
- padding-left: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi .step {
|
|
|
- width: 26%;
|
|
|
- padding-right: 4%;
|
|
|
- }
|
|
|
-
|
|
|
- .two .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.5rem
|
|
|
- }
|
|
|
-
|
|
|
- .two .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 2.2rem
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi .btck img {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.6rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .two .bottomLi .btck span {
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*three*/
|
|
|
- .three {
|
|
|
- width: 50%;
|
|
|
- height: 4.1rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 1%
|
|
|
- }
|
|
|
-
|
|
|
- .three .centerLi {
|
|
|
- width: 96%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .three .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.8rem;
|
|
|
- font-size: 0.45rem;
|
|
|
- line-height: 0.8rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .human img {
|
|
|
- width: 2.1rem;
|
|
|
- height: 2.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .cla {
|
|
|
- width: 2.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.8rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .lcla span {
|
|
|
- font-size: 0.55rem;
|
|
|
- top: -1.8rem;
|
|
|
- float: left;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .three .cla em {
|
|
|
- font-size: 1.3rem;
|
|
|
- left: 1rem;
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ clearInterval(this.timer2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Headside, newRecord
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
- .three .lhj span {
|
|
|
- width: 3rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.7rem;
|
|
|
- left: 2.3rem;
|
|
|
- font-size: 1.2rem;
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
|
|
|
- .three .rhj img {
|
|
|
- width: 0.4rem;
|
|
|
- top: -1.7rem;
|
|
|
- right: 0.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .topLi {
|
|
|
- height: 3.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .bottomLi {
|
|
|
- font-size: 0.45rem;
|
|
|
- margin-top: 0rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .three .bottomLi img {
|
|
|
- width: 0.5rem;
|
|
|
- height: 0.5rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .bottomLi .btck {
|
|
|
- width: 30%;
|
|
|
- padding-left: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .three .bottomLi .step {
|
|
|
- width: 25%;
|
|
|
- padding-right: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .three .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.5rem
|
|
|
- }
|
|
|
-
|
|
|
- .three .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 1.9rem
|
|
|
- }
|
|
|
-
|
|
|
- .three .bottomLi .btck img {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.6rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .three .bottomLi .btck span {
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- /*six*/
|
|
|
- .six {
|
|
|
- width: 33.3333%;
|
|
|
- height: 3.6rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 1%
|
|
|
- }
|
|
|
-
|
|
|
- .six .centerLi {
|
|
|
- width: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .six .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.8rem;
|
|
|
- font-size: 0.4rem;
|
|
|
- line-height: 0.8rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .human img {
|
|
|
- width: 1.6rem;
|
|
|
- height: 1.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .cla {
|
|
|
- width: 2rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.3rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .lcla span {
|
|
|
- font-size: 0.45rem;
|
|
|
- top: -1.4rem;
|
|
|
- float: left;
|
|
|
- left: -0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .cla em {
|
|
|
- font-size: 0.9rem;
|
|
|
- left: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .lhj span {
|
|
|
- width: 2rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.3rem;
|
|
|
- left: 1.6rem;
|
|
|
- font-size: 0.9rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .rhj img {
|
|
|
- width: 0.3rem;
|
|
|
- top: -1.3rem;
|
|
|
- right: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .topLi {
|
|
|
- height: 2.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.35rem;
|
|
|
- margin-top: 0.3rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .btck {
|
|
|
- /*text-indent: 1.6rem;*/
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .six .bottomLi img {
|
|
|
- width: 0.4rem;
|
|
|
- margin-top: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .btcla img {
|
|
|
- width: 0.3rem;
|
|
|
- /*margin-top: 0.1rem;*/
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .btck img {
|
|
|
- width: 0.4rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .btck {
|
|
|
- width: 33%;
|
|
|
- padding-left: 5%;
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .step {
|
|
|
- width: 27%;
|
|
|
- padding-right: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .six .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.3rem
|
|
|
- }
|
|
|
-
|
|
|
- .six .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 1.3rem
|
|
|
- }
|
|
|
-
|
|
|
- .six .bottomLi .btck img {
|
|
|
- width: 0.5rem;
|
|
|
- height: 0.5rem;
|
|
|
- margin-top: 0.07rem;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*nine*/
|
|
|
- .nine {
|
|
|
- width: 33.3333%;
|
|
|
- height: 2.7rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.1rem
|
|
|
- }
|
|
|
-
|
|
|
- .nine .centerLi {
|
|
|
- width: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.6rem;
|
|
|
- font-size: 0.35rem;
|
|
|
- line-height: 0.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .human img {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .cla {
|
|
|
- width: 1.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.1rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.25rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .lcla span {
|
|
|
- font-size: 0.4rem;
|
|
|
- top: -1.1rem;
|
|
|
- float: left;
|
|
|
- left: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .cla em {
|
|
|
- font-size: 0.8rem;
|
|
|
- left: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .lhj span {
|
|
|
- width: 1.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.05rem;
|
|
|
- left: 1.6rem;
|
|
|
- font-size: 0.8rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .rhj img {
|
|
|
- width: 0.25rem;
|
|
|
- top: -1.0rem;
|
|
|
- right: 0.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .topLi {
|
|
|
- height: 1.9rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.3rem;
|
|
|
- margin-top: 0.15rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .nine .bottomLi img {
|
|
|
- width: 0.35rem;
|
|
|
- height: 0.35rem;
|
|
|
- margin-top: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .bottomLi .btck {
|
|
|
- width: 32%;
|
|
|
- padding-left: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .bottomLi .step {
|
|
|
- width: 27%;
|
|
|
- padding-right: 1%;
|
|
|
- }
|
|
|
-
|
|
|
- .nine .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.3rem
|
|
|
- }
|
|
|
-
|
|
|
- .nine .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 1.3rem
|
|
|
- }
|
|
|
-
|
|
|
- .nine .bottomLi .btck img {
|
|
|
- width: 0.45rem;
|
|
|
- height: 0.45rem;
|
|
|
- margin-top: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- /*ten*/
|
|
|
- .ten {
|
|
|
- width: 25%;
|
|
|
- height: 2.6rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.2rem
|
|
|
- }
|
|
|
-
|
|
|
- .ten .centerLi {
|
|
|
- width: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.5rem;
|
|
|
- font-size: 0.3rem;
|
|
|
- line-height: 0.55rem;
|
|
|
- margin-bottom: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .human img {
|
|
|
- width: 1.1rem;
|
|
|
- height: 1.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .cla {
|
|
|
- width: 1.4rem;
|
|
|
- height: 1.5rem;
|
|
|
- top: -0.95rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .lcla span {
|
|
|
- font-size: 0.3rem;
|
|
|
- top: -0.95rem;
|
|
|
- float: left;
|
|
|
- left: -0rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .cla em {
|
|
|
- font-size: 0.7rem;
|
|
|
- left: 0.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .lhj span {
|
|
|
- width: 1.4rem;
|
|
|
- height: 2.1rem;
|
|
|
- top: -0.9rem;
|
|
|
- left: 1.4rem;
|
|
|
- font-size: 0.7rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .rhj img {
|
|
|
- width: 0.2rem;
|
|
|
- top: -0.9rem;
|
|
|
- right: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .topLi {
|
|
|
- height: 1.75rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.25rem;
|
|
|
- margin-top: 0.2rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .bottomLi img {
|
|
|
- width: 0.3rem;
|
|
|
- height: 0.3rem;
|
|
|
- margin-top: 0.25rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .bottomLi .btck {
|
|
|
- width: 32%;
|
|
|
- padding-left: 5%;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .bottomLi .step {
|
|
|
- width: 27%;
|
|
|
- padding-right: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.3rem
|
|
|
- }
|
|
|
-
|
|
|
- .ten .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 1.2rem;
|
|
|
- line-height: 0.75rem;
|
|
|
- }
|
|
|
-
|
|
|
- .ten .btck img {
|
|
|
- width: 0.4rem;
|
|
|
- height: 0.4rem;
|
|
|
- margin-top: 0.18rem;
|
|
|
- }
|
|
|
-
|
|
|
- /*twelve*/
|
|
|
- .twelve {
|
|
|
- width: 20%;
|
|
|
- height: 2.4rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.3rem
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .centerLi {
|
|
|
- width: 98%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.5rem;
|
|
|
- font-size: 0.3rem;
|
|
|
- line-height: 0.7rem;
|
|
|
- margin-bottom: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .human img {
|
|
|
- width: 0.9rem;
|
|
|
- height: 0.9rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .cla {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.2rem;
|
|
|
- top: -0.8rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .lcla span {
|
|
|
- font-size: 0.25rem;
|
|
|
- top: -0.8rem;
|
|
|
- float: left;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .cla em {
|
|
|
- font-size: 0.6rem;
|
|
|
- left: 0.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .lhj span {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.2rem;
|
|
|
- top: -0.8rem;
|
|
|
- left: 1rem;
|
|
|
- font-size: 0.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .rhj img {
|
|
|
- width: 0.18rem;
|
|
|
- top: -0.75rem;
|
|
|
- right: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .topLi {
|
|
|
- height: 1.65rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.225rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .bottomLi img {
|
|
|
- width: 0.25rem;
|
|
|
- height: 0.25rem;
|
|
|
- margin-top: 0.25rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .bottomLi .btck {
|
|
|
- width: 32%;
|
|
|
- padding-left: 4%;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .bottomLi .step {
|
|
|
- width: 27%;
|
|
|
- padding-right: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.2rem
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 0.8rem
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .btck img {
|
|
|
- width: 0.3rem;
|
|
|
- height: 0.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twelve .btck img {
|
|
|
- width: 0.35rem;
|
|
|
- height: 0.35rem;
|
|
|
- margin-top: 0.22rem;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*sixteen*/
|
|
|
- .sixteen {
|
|
|
- width: 20%;
|
|
|
- height: 1.95rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.1rem
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .centerLi {
|
|
|
- width: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.4rem;
|
|
|
- font-size: 0.25rem;
|
|
|
- line-height: 0.45rem;
|
|
|
- margin-bottom: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .human img {
|
|
|
- width: 0.75rem;
|
|
|
- height: 0.75rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .cla {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.4rem;
|
|
|
- top: -0.7rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .lcla span {
|
|
|
- font-size: 0.275rem;
|
|
|
- top: -0.7rem;
|
|
|
- float: left;
|
|
|
- left: -0rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .cla em {
|
|
|
- font-size: 0.55rem;
|
|
|
- left: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .lhj span {
|
|
|
- width: 1rem;
|
|
|
- height: 1.8rem;
|
|
|
- top: -0.7rem;
|
|
|
- left: 1.1rem;
|
|
|
- font-size: 0.55rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .rhj img {
|
|
|
- width: 0.17rem;
|
|
|
- top: -0.65rem;
|
|
|
- right: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .topLi {
|
|
|
- height: 1.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.2rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .bottomLi img {
|
|
|
- width: 0.25rem;
|
|
|
- height: 0.25rem;
|
|
|
- margin-top: 0.25rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .bottomLi .btck {
|
|
|
- width: 32%;
|
|
|
- padding-left: 3%;
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .bottomLi .step {
|
|
|
- width: 27%;
|
|
|
- padding-right: 3%;
|
|
|
- /*text-align: center;*/
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.2rem
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 0.9rem
|
|
|
- }
|
|
|
-
|
|
|
- .sixteen .btck img {
|
|
|
- width: 0.3rem;
|
|
|
- height: 0.3rem;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*twenty*/
|
|
|
- .twenty {
|
|
|
- width: 16.66667%;
|
|
|
- height: 1.85rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.1rem
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .centerLi {
|
|
|
- width: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.4rem;
|
|
|
- font-size: 0.25rem;
|
|
|
- line-height: 0.5rem;
|
|
|
- margin-bottom: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .human img {
|
|
|
- width: 0.75rem;
|
|
|
- height: 0.75rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .cla {
|
|
|
- width: 1rem;
|
|
|
- height: 1.4rem;
|
|
|
- top: -0.65rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .lcla span {
|
|
|
- font-size: 0.225rem;
|
|
|
- top: -0.65rem;
|
|
|
- float: left;
|
|
|
- left: 0rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .cla em {
|
|
|
- font-size: 0.45rem;
|
|
|
- left: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .lhj span {
|
|
|
- width: 0.85rem;
|
|
|
- height: 2rem;
|
|
|
- top: -0.65rem;
|
|
|
- left: 0.9rem;
|
|
|
- font-size: 0.45rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .rhj img {
|
|
|
- width: 0.15rem;
|
|
|
- top: -0.6rem;
|
|
|
- right: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .topLi {
|
|
|
- height: 1.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.2rem;
|
|
|
- margin-top: 0rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .bottomLi img {
|
|
|
- width: 0.2rem;
|
|
|
- height: 0.2rem;
|
|
|
- margin-top: 0.275rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .bottomLi span {
|
|
|
- line-height: 0.8rem;
|
|
|
- text-indent: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .bottomLi .btck {
|
|
|
- width: 32%;
|
|
|
- padding-left: 3%;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .bottomLi .step {
|
|
|
- width: 28%;
|
|
|
- padding-right: 3%;
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.2rem
|
|
|
- }
|
|
|
-
|
|
|
- .twenty .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 0.8rem
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /*twentyFour*/
|
|
|
- .twentyFour {
|
|
|
- width: 16.6667%;
|
|
|
- height: 1.6rem;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.1rem
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .centerLi {
|
|
|
- width: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #fff;
|
|
|
- float: none;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.4rem;
|
|
|
- font-size: 0.225rem;
|
|
|
- line-height: 0.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .human img {
|
|
|
- width: 0.7rem;
|
|
|
- height: 0.7rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .cla {
|
|
|
- width: 1rem;
|
|
|
- height: 1.4rem;
|
|
|
- top: -0.6rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .lcla span {
|
|
|
- font-size: 0.2rem;
|
|
|
- top: -0.65rem;
|
|
|
- float: left;
|
|
|
- left: -0rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .cla em {
|
|
|
- font-size: 0.4rem;
|
|
|
- left: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .lhj span {
|
|
|
- width: 0.75rem;
|
|
|
- height: 2rem;
|
|
|
- top: -0.57rem;
|
|
|
- left: 1rem;
|
|
|
- font-size: 0.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .rhj img {
|
|
|
- width: 0.15rem;
|
|
|
- top: -0.65rem;
|
|
|
- right: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .topLi {
|
|
|
- height: 1.18rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.15rem;
|
|
|
- margin-top: 0rem;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .bottomLi img {
|
|
|
- width: 0.225rem;
|
|
|
- height: 0.225rem;
|
|
|
- margin-top: 0.15rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .bottomLi span {
|
|
|
- line-height: 0.55rem;
|
|
|
- text-indent: 0.05rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .bottomLi .btcla {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .bottomLi .btck {
|
|
|
- width: 32%;
|
|
|
- padding-left: 3%;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .bottomLi .step {
|
|
|
- width: 28%;
|
|
|
- padding-right: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .cla em.plus {
|
|
|
- position: relative;
|
|
|
- left: -0.2rem
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .lhj span.plus {
|
|
|
- position: relative;
|
|
|
- left: 0.8rem;
|
|
|
- line-height: 0.45rem;
|
|
|
- }
|
|
|
-
|
|
|
- .twentyFour .btck img {
|
|
|
- width: 0.3rem;
|
|
|
- height: 0.3rem;
|
|
|
- margin-top: 0.11rem;
|
|
|
- }
|
|
|
+@font-face {
|
|
|
+ font-family: vista;
|
|
|
+ src: url('../assets/font/vista.ttf');
|
|
|
+}
|
|
|
+* {
|
|
|
+ font-family: vista;
|
|
|
+}
|
|
|
+.pages {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-family: vista;
|
|
|
+}
|
|
|
+
|
|
|
+.bgStyle1 {
|
|
|
+ background-color: #028fe1;
|
|
|
+ background: url("../static/img/bg/bg_1.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.bgStyle2 {
|
|
|
+ background-color: #028fe1;
|
|
|
+ background: url("../static/img/bg/bg_2.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.bgStyle3 {
|
|
|
+ background-color: #028fe1;
|
|
|
+ background: url("../static/img/bg/bg_3.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.bgStyle4 {
|
|
|
+ background-color: #028fe1;
|
|
|
+ background: url("../static/img/bg/bg_4.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+ul, li {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.blue .centerLi {
|
|
|
+ background: #028FE1;
|
|
|
+}
|
|
|
+
|
|
|
+.violet .centerLi {
|
|
|
+ background: #6D26FA;
|
|
|
+}
|
|
|
+
|
|
|
+.green .centerLi {
|
|
|
+ background: #0AB105;
|
|
|
+}
|
|
|
+
|
|
|
+.yellow .centerLi {
|
|
|
+ background: #BACC01;
|
|
|
+}
|
|
|
+
|
|
|
+.brown .centerLi {
|
|
|
+ background: #EA8813;
|
|
|
+}
|
|
|
+
|
|
|
+.red .centerLi {
|
|
|
+ background: #CF1122;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0.1rem;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 5rem;
|
|
|
+ padding-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon ul {
|
|
|
+ width: 96%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0;
|
|
|
+ margin-left: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li {
|
|
|
+ width: 14.666666666667%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ padding-left: 2.4%;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(1) {
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li span {
|
|
|
+ width: 5rem;
|
|
|
+ height: 4rem;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ background: url("../static/img/t1.svg");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: top center;
|
|
|
+ font-family: vista;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ letter-spacing: -0.05em;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 0.4rem;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li span div {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 17%;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(2) span {
|
|
|
+ background: url("../static/img/t2.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: top center;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(3) span {
|
|
|
+ background: url("../static/img/t3.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: top center;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(4) span {
|
|
|
+ background: url("../static/img/t4.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: top center;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(5) span {
|
|
|
+ background: url("../static/img/t5.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: top center;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(6) span {
|
|
|
+ background: url("../static/img/t6.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: top center;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(6) span div {
|
|
|
+ margin-top: 13%;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li em {
|
|
|
+ float: right;
|
|
|
+ width: 4rem;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 21px;
|
|
|
+ background: rgba(2, 143, 225, 0.16);
|
|
|
+ border: 1px solid #028fe1;
|
|
|
+ box-shadow: 0px 0px 5px #028fe1;
|
|
|
+ font-family: vista;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-style: normal;
|
|
|
+ line-height: 42px;
|
|
|
+ margin-top: 15%;
|
|
|
+ margin-left: 1%;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(2) em {
|
|
|
+ background: rgba(109, 38, 250, 0.16);
|
|
|
+ border: 1px solid #6d26fa;
|
|
|
+ box-shadow: 0px 0px 5px #6d26fa;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(3) em {
|
|
|
+ background: rgba(10, 177, 5, 0.16);
|
|
|
+ border: 1px solid #0ab105;
|
|
|
+ box-shadow: 0px 0px 5px #0ab105;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(4) em {
|
|
|
+ background: rgba(186, 204, 1, 0.16);
|
|
|
+ border: 1px solid #bacc01;
|
|
|
+ box-shadow: 0px 0px 5px #bacc01;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(5) em {
|
|
|
+ background: rgba(234, 136, 19, 0.16);
|
|
|
+ border: 1px solid #ea8813;
|
|
|
+ box-shadow: 0px 0px 5px #ea8813;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li:nth-child(6) em {
|
|
|
+ background: rgba(209, 17, 34, 0.16);
|
|
|
+ border: 1px solid #d11122;
|
|
|
+ box-shadow: 0px 0px 5px #d11122;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon {
|
|
|
+ height: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li span {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ font-size: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li span div {
|
|
|
+ font-size: 16px;
|
|
|
+ padding-top: 0.19rem;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon ul {
|
|
|
+ width: 98%;
|
|
|
+}
|
|
|
+
|
|
|
+.levelIcon li em {
|
|
|
+ width: 45%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ margin-top: 11%;
|
|
|
+ margin-left: 3%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.slowJump {
|
|
|
+ animation: mymove 3s infinite;
|
|
|
+ -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
|
|
|
+ animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
+ animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
+ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
+}
|
|
|
+
|
|
|
+.normalJump {
|
|
|
+ animation: mymove 2s infinite;
|
|
|
+ -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
|
|
|
+ animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
+ animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
+ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
+}
|
|
|
+
|
|
|
+.fastJump {
|
|
|
+ animation: mymove 1s infinite;
|
|
|
+ -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
|
|
|
+ animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
+ animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
+ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes mymove {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1); /*开始为原始大小*/
|
|
|
+ }
|
|
|
+ 25% {
|
|
|
+ transform: scale(1.1); /*放大1.1倍*/
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes mymove /*Safari and Chrome*/
|
|
|
+{
|
|
|
+ 0% {
|
|
|
+ transform: scale(1); /*开始为原始大小*/
|
|
|
+ }
|
|
|
+ 25% {
|
|
|
+ transform: scale(1.1); /*放大1.1倍*/
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*userList*/
|
|
|
+
|
|
|
+.userList {
|
|
|
+ width: 100%;
|
|
|
+ height: 76%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0.1rem auto;
|
|
|
+}
|
|
|
+
|
|
|
+.userList ul {
|
|
|
+ /*width: 100%;*/
|
|
|
+ height: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0.1rem;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.userList li {
|
|
|
+ display: block;
|
|
|
+ z-index: 666;
|
|
|
+}
|
|
|
+
|
|
|
+.centerLi {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.human img {
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ border-radius: 250px;
|
|
|
+ /*box-shadow: 0px 0px 5px #fff;*/
|
|
|
+}
|
|
|
+
|
|
|
+s {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+em {
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.cla {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.centerLi .human {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.human .name {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.lcla span {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.cla em {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.heartJump {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.lhj span {
|
|
|
+ position: relative;
|
|
|
+ text-align: right;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.rhj {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.rhj img {
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.bottomLi {
|
|
|
+ width: 96%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 0.4rem;
|
|
|
+ font-weight: normal !important;
|
|
|
+ color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 0.7rem;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomLi img {
|
|
|
+ float: left;
|
|
|
+ margin-left: 10%;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomLi .btcla {
|
|
|
+ width: 33.333%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomLi .btck {
|
|
|
+ width: 33.333%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomLi .step {
|
|
|
+ width: 33.333%;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomLi span {
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.topLi {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/*max*/
|
|
|
+.max {
|
|
|
+ width: 12rem;
|
|
|
+ height: 6rem;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .centerLi {
|
|
|
+ width: 90%;
|
|
|
+}
|
|
|
+
|
|
|
+.max .ltLi {
|
|
|
+ width: 5%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ background: url("../static/img/ltCube.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.max .rtLi {
|
|
|
+ width: 5%;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ background: url("../static/img/rtCube.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.max .human .name {
|
|
|
+ font-size: 0.5rem;
|
|
|
+ height: 1rem;
|
|
|
+ line-height: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .human img {
|
|
|
+ width: 3rem;
|
|
|
+ height: 3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .cla {
|
|
|
+ width: 3rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -2.4rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.55rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .lcla span {
|
|
|
+ font-size: 0.7rem;
|
|
|
+ top: -2.4rem;
|
|
|
+ float: left;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.max .cla em {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ left: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .lhj span {
|
|
|
+ width: 3rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -2.4rem;
|
|
|
+ left: 3.4rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .rhj img {
|
|
|
+ width: 0.5rem;
|
|
|
+ top: -2.3rem;
|
|
|
+ right: 0.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .longIcon {
|
|
|
+ position: absolute;
|
|
|
+ width: 1.96rem;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ bottom: 2rem;
|
|
|
+ right: 3.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .topLi {
|
|
|
+ height: 4.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi {
|
|
|
+ font-size: 0.5rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .btck {
|
|
|
+ /*text-indent: 1.6rem;*/
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi img {
|
|
|
+ width: 0.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .btck {
|
|
|
+ width: 29%;
|
|
|
+ padding-left: 1%;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .step {
|
|
|
+ width: 24%;
|
|
|
+ padding-right: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.max .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.5rem
|
|
|
+}
|
|
|
+
|
|
|
+.max .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 2.75rem
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .btcla img {
|
|
|
+ width: 0.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .btcla span {
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .btck span {
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.max .bottomLi .btck img {
|
|
|
+ width: 0.6rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ margin-top: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*two*/
|
|
|
+.two {
|
|
|
+ width: 49%;
|
|
|
+ height: 5.33rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ margin-top: 6%
|
|
|
+}
|
|
|
+
|
|
|
+.two:nth-child(2) {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.two .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 1rem;
|
|
|
+ font-size: 0.6rem;
|
|
|
+ line-height: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .human img {
|
|
|
+ width: 2.8rem;
|
|
|
+ height: 2.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .cla {
|
|
|
+ width: 2.9rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -2.4rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .lcla span {
|
|
|
+ font-size: 0.55rem;
|
|
|
+ top: -2.3rem;
|
|
|
+ float: left;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.two .cla em {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ left: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .lhj span {
|
|
|
+ width: 3rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -2.4rem;
|
|
|
+ left: 2.4rem;
|
|
|
+ font-size: 1.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .rhj img {
|
|
|
+ width: 0.45rem;
|
|
|
+ top: -2.2rem;
|
|
|
+ right: 0.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .topLi {
|
|
|
+ height: 4.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi {
|
|
|
+ font-size: 0.5rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi img {
|
|
|
+ width: 0.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi .btck {
|
|
|
+ width: 29%;
|
|
|
+ padding-left: 0%;
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi .step {
|
|
|
+ width: 26%;
|
|
|
+ padding-right: 4%;
|
|
|
+}
|
|
|
+
|
|
|
+.two .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.5rem
|
|
|
+}
|
|
|
+
|
|
|
+.two .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 2.2rem
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi .btck img {
|
|
|
+ width: 0.6rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ margin-top: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.two .bottomLi .btck span {
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*three*/
|
|
|
+.three {
|
|
|
+ width: 50%;
|
|
|
+ height: 4.1rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 1%
|
|
|
+}
|
|
|
+
|
|
|
+.three .centerLi {
|
|
|
+ width: 96%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.three .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.8rem;
|
|
|
+ font-size: 0.45rem;
|
|
|
+ line-height: 0.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .human img {
|
|
|
+ width: 2.1rem;
|
|
|
+ height: 2.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .cla {
|
|
|
+ width: 2.9rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.8rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .lcla span {
|
|
|
+ font-size: 0.55rem;
|
|
|
+ top: -1.8rem;
|
|
|
+ float: left;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.three .cla em {
|
|
|
+ font-size: 1.3rem;
|
|
|
+ left: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .lhj span {
|
|
|
+ width: 3rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.7rem;
|
|
|
+ left: 2.3rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .rhj img {
|
|
|
+ width: 0.4rem;
|
|
|
+ top: -1.7rem;
|
|
|
+ right: 0.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .topLi {
|
|
|
+ height: 3.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .bottomLi {
|
|
|
+ font-size: 0.45rem;
|
|
|
+ margin-top: 0rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.three .bottomLi img {
|
|
|
+ width: 0.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .bottomLi .btck {
|
|
|
+ width: 30%;
|
|
|
+ padding-left: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.three .bottomLi .step {
|
|
|
+ width: 25%;
|
|
|
+ padding-right: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.three .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.5rem
|
|
|
+}
|
|
|
+
|
|
|
+.three .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 1.9rem
|
|
|
+}
|
|
|
+
|
|
|
+.three .bottomLi .btck img {
|
|
|
+ width: 0.6rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ margin-top: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.three .bottomLi .btck span {
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+/*six*/
|
|
|
+.six {
|
|
|
+ width: 33.3333%;
|
|
|
+ height: 3.6rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 1%
|
|
|
+}
|
|
|
+
|
|
|
+.six .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.six .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.8rem;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ line-height: 0.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .human img {
|
|
|
+ width: 1.6rem;
|
|
|
+ height: 1.6rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .cla {
|
|
|
+ width: 2rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.3rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .lcla span {
|
|
|
+ font-size: 0.45rem;
|
|
|
+ top: -1.4rem;
|
|
|
+ float: left;
|
|
|
+ left: -0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .cla em {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ left: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .lhj span {
|
|
|
+ width: 2rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.3rem;
|
|
|
+ left: 1.6rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .rhj img {
|
|
|
+ width: 0.3rem;
|
|
|
+ top: -1.3rem;
|
|
|
+ right: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .topLi {
|
|
|
+ height: 2.6rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.35rem;
|
|
|
+ margin-top: 0.3rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .btck {
|
|
|
+ /*text-indent: 1.6rem;*/
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.six .bottomLi img {
|
|
|
+ width: 0.4rem;
|
|
|
+ margin-top: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .btcla img {
|
|
|
+ width: 0.3rem;
|
|
|
+ /*margin-top: 0.1rem;*/
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .btck img {
|
|
|
+ width: 0.4rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .btck {
|
|
|
+ width: 33%;
|
|
|
+ padding-left: 5%;
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .step {
|
|
|
+ width: 27%;
|
|
|
+ padding-right: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.six .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.3rem
|
|
|
+}
|
|
|
+
|
|
|
+.six .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 1.3rem
|
|
|
+}
|
|
|
+
|
|
|
+.six .bottomLi .btck img {
|
|
|
+ width: 0.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ margin-top: 0.07rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*nine*/
|
|
|
+.nine {
|
|
|
+ width: 33.3333%;
|
|
|
+ height: 2.7rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 0.1rem
|
|
|
+}
|
|
|
+
|
|
|
+.nine .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.6rem;
|
|
|
+ font-size: 0.35rem;
|
|
|
+ line-height: 0.6rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .human img {
|
|
|
+ width: 1.2rem;
|
|
|
+ height: 1.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .cla {
|
|
|
+ width: 1.9rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.1rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .lcla span {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ top: -1.1rem;
|
|
|
+ float: left;
|
|
|
+ left: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .cla em {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ left: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .lhj span {
|
|
|
+ width: 1.9rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.05rem;
|
|
|
+ left: 1.6rem;
|
|
|
+ font-size: 0.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .rhj img {
|
|
|
+ width: 0.25rem;
|
|
|
+ top: -1.0rem;
|
|
|
+ right: 0.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .topLi {
|
|
|
+ height: 1.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ margin-top: 0.15rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.nine .bottomLi img {
|
|
|
+ width: 0.35rem;
|
|
|
+ height: 0.35rem;
|
|
|
+ margin-top: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .bottomLi .btck {
|
|
|
+ width: 32%;
|
|
|
+ padding-left: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .bottomLi .step {
|
|
|
+ width: 27%;
|
|
|
+ padding-right: 1%;
|
|
|
+}
|
|
|
+
|
|
|
+.nine .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.3rem
|
|
|
+}
|
|
|
+
|
|
|
+.nine .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 1.3rem
|
|
|
+}
|
|
|
+
|
|
|
+.nine .bottomLi .btck img {
|
|
|
+ width: 0.45rem;
|
|
|
+ height: 0.45rem;
|
|
|
+ margin-top: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+/*ten*/
|
|
|
+.ten {
|
|
|
+ width: 25%;
|
|
|
+ height: 2.6rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 0.2rem
|
|
|
+}
|
|
|
+
|
|
|
+.ten .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.5rem;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ line-height: 0.55rem;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .human img {
|
|
|
+ width: 1.1rem;
|
|
|
+ height: 1.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .cla {
|
|
|
+ width: 1.4rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ top: -0.95rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .lcla span {
|
|
|
+ font-size: 0.3rem;
|
|
|
+ top: -0.95rem;
|
|
|
+ float: left;
|
|
|
+ left: -0rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .cla em {
|
|
|
+ font-size: 0.7rem;
|
|
|
+ left: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .lhj span {
|
|
|
+ width: 1.4rem;
|
|
|
+ height: 2.1rem;
|
|
|
+ top: -0.9rem;
|
|
|
+ left: 1.4rem;
|
|
|
+ font-size: 0.7rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .rhj img {
|
|
|
+ width: 0.2rem;
|
|
|
+ top: -0.9rem;
|
|
|
+ right: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .topLi {
|
|
|
+ height: 1.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.25rem;
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .bottomLi img {
|
|
|
+ width: 0.3rem;
|
|
|
+ height: 0.3rem;
|
|
|
+ margin-top: 0.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .bottomLi .btck {
|
|
|
+ width: 32%;
|
|
|
+ padding-left: 5%;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .bottomLi .step {
|
|
|
+ width: 27%;
|
|
|
+ padding-right: 2%;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.3rem
|
|
|
+}
|
|
|
+
|
|
|
+.ten .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 1.2rem;
|
|
|
+ line-height: 0.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ten .btck img {
|
|
|
+ width: 0.4rem;
|
|
|
+ height: 0.4rem;
|
|
|
+ margin-top: 0.18rem;
|
|
|
+}
|
|
|
+
|
|
|
+/*twelve*/
|
|
|
+.twelve {
|
|
|
+ width: 20%;
|
|
|
+ height: 2.4rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 0.3rem
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.5rem;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ line-height: 0.7rem;
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .human img {
|
|
|
+ width: 0.9rem;
|
|
|
+ height: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .cla {
|
|
|
+ width: 1.2rem;
|
|
|
+ height: 1.2rem;
|
|
|
+ top: -0.8rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .lcla span {
|
|
|
+ font-size: 0.25rem;
|
|
|
+ top: -0.8rem;
|
|
|
+ float: left;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .cla em {
|
|
|
+ font-size: 0.6rem;
|
|
|
+ left: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .lhj span {
|
|
|
+ width: 1.2rem;
|
|
|
+ height: 1.2rem;
|
|
|
+ top: -0.8rem;
|
|
|
+ left: 1rem;
|
|
|
+ font-size: 0.6rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .rhj img {
|
|
|
+ width: 0.18rem;
|
|
|
+ top: -0.75rem;
|
|
|
+ right: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .topLi {
|
|
|
+ height: 1.65rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.225rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .bottomLi img {
|
|
|
+ width: 0.25rem;
|
|
|
+ height: 0.25rem;
|
|
|
+ margin-top: 0.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .bottomLi .btck {
|
|
|
+ width: 32%;
|
|
|
+ padding-left: 4%;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .bottomLi .step {
|
|
|
+ width: 27%;
|
|
|
+ padding-right: 0%;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.2rem
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 0.8rem
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .btck img {
|
|
|
+ width: 0.3rem;
|
|
|
+ height: 0.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twelve .btck img {
|
|
|
+ width: 0.35rem;
|
|
|
+ height: 0.35rem;
|
|
|
+ margin-top: 0.22rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*sixteen*/
|
|
|
+.sixteen {
|
|
|
+ width: 20%;
|
|
|
+ height: 1.95rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 0.1rem
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.4rem;
|
|
|
+ font-size: 0.25rem;
|
|
|
+ line-height: 0.45rem;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .human img {
|
|
|
+ width: 0.75rem;
|
|
|
+ height: 0.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .cla {
|
|
|
+ width: 1.2rem;
|
|
|
+ height: 1.4rem;
|
|
|
+ top: -0.7rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .lcla span {
|
|
|
+ font-size: 0.275rem;
|
|
|
+ top: -0.7rem;
|
|
|
+ float: left;
|
|
|
+ left: -0rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .cla em {
|
|
|
+ font-size: 0.55rem;
|
|
|
+ left: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .lhj span {
|
|
|
+ width: 1rem;
|
|
|
+ height: 1.8rem;
|
|
|
+ top: -0.7rem;
|
|
|
+ left: 1.1rem;
|
|
|
+ font-size: 0.55rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .rhj img {
|
|
|
+ width: 0.17rem;
|
|
|
+ top: -0.65rem;
|
|
|
+ right: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .topLi {
|
|
|
+ height: 1.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ margin-top: 0.05rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .bottomLi img {
|
|
|
+ width: 0.25rem;
|
|
|
+ height: 0.25rem;
|
|
|
+ margin-top: 0.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .bottomLi .btck {
|
|
|
+ width: 32%;
|
|
|
+ padding-left: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .bottomLi .step {
|
|
|
+ width: 27%;
|
|
|
+ padding-right: 3%;
|
|
|
+ /*text-align: center;*/
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.2rem
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 0.9rem
|
|
|
+}
|
|
|
+
|
|
|
+.sixteen .btck img {
|
|
|
+ width: 0.3rem;
|
|
|
+ height: 0.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*twenty*/
|
|
|
+.twenty {
|
|
|
+ width: 16.66667%;
|
|
|
+ height: 1.85rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 0.1rem
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.4rem;
|
|
|
+ font-size: 0.25rem;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .human img {
|
|
|
+ width: 0.75rem;
|
|
|
+ height: 0.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .cla {
|
|
|
+ width: 1rem;
|
|
|
+ height: 1.4rem;
|
|
|
+ top: -0.65rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .lcla span {
|
|
|
+ font-size: 0.225rem;
|
|
|
+ top: -0.65rem;
|
|
|
+ float: left;
|
|
|
+ left: 0rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .cla em {
|
|
|
+ font-size: 0.45rem;
|
|
|
+ left: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .lhj span {
|
|
|
+ width: 0.85rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -0.65rem;
|
|
|
+ left: 0.9rem;
|
|
|
+ font-size: 0.45rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .rhj img {
|
|
|
+ width: 0.15rem;
|
|
|
+ top: -0.6rem;
|
|
|
+ right: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .topLi {
|
|
|
+ height: 1.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ margin-top: 0rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .bottomLi img {
|
|
|
+ width: 0.2rem;
|
|
|
+ height: 0.2rem;
|
|
|
+ margin-top: 0.275rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .bottomLi span {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-indent: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .bottomLi .btck {
|
|
|
+ width: 32%;
|
|
|
+ padding-left: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .bottomLi .step {
|
|
|
+ width: 28%;
|
|
|
+ padding-right: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.2rem
|
|
|
+}
|
|
|
+
|
|
|
+.twenty .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 0.8rem
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*twentyFour*/
|
|
|
+.twentyFour {
|
|
|
+ width: 16.6667%;
|
|
|
+ height: 1.6rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 0.1rem
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .centerLi {
|
|
|
+ width: 98%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .human .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.4rem;
|
|
|
+ font-size: 0.225rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .human img {
|
|
|
+ width: 0.7rem;
|
|
|
+ height: 0.7rem;
|
|
|
+ margin-top: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .cla {
|
|
|
+ width: 1rem;
|
|
|
+ height: 1.4rem;
|
|
|
+ top: -0.6rem;
|
|
|
+ left: 0;
|
|
|
+ font-size: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .lcla span {
|
|
|
+ font-size: 0.2rem;
|
|
|
+ top: -0.65rem;
|
|
|
+ float: left;
|
|
|
+ left: -0rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .cla em {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ left: 0.2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .lhj span {
|
|
|
+ width: 0.75rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -0.57rem;
|
|
|
+ left: 1rem;
|
|
|
+ font-size: 0.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .rhj img {
|
|
|
+ width: 0.15rem;
|
|
|
+ top: -0.65rem;
|
|
|
+ right: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .topLi {
|
|
|
+ height: 1.18rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .bottomLi {
|
|
|
+ width: 98%;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ margin-top: 0rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .bottomLi img {
|
|
|
+ width: 0.225rem;
|
|
|
+ height: 0.225rem;
|
|
|
+ margin-top: 0.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .bottomLi span {
|
|
|
+ line-height: 0.55rem;
|
|
|
+ text-indent: 0.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .bottomLi .btcla {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .bottomLi .btck {
|
|
|
+ width: 32%;
|
|
|
+ padding-left: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .bottomLi .step {
|
|
|
+ width: 28%;
|
|
|
+ padding-right: 0%;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .cla em.plus {
|
|
|
+ position: relative;
|
|
|
+ left: -0.2rem
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .lhj span.plus {
|
|
|
+ position: relative;
|
|
|
+ left: 0.8rem;
|
|
|
+ line-height: 0.45rem;
|
|
|
+}
|
|
|
+
|
|
|
+.twentyFour .btck img {
|
|
|
+ width: 0.3rem;
|
|
|
+ height: 0.3rem;
|
|
|
+ margin-top: 0.11rem;
|
|
|
+}
|
|
|
|
|
|
</style>
|
