|
|
@@ -1,50 +1,24 @@
|
|
|
<template>
|
|
|
<ul>
|
|
|
- <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
|
|
|
- v-if="students.length > 0">
|
|
|
+ <li v-for="(s,i) in students" :class="studentsClassName[i].name">
|
|
|
<div class="centerLi">
|
|
|
- <div class="topLi">
|
|
|
- <div class="human">
|
|
|
- <span class="name">
|
|
|
- <div class="nameLt">
|
|
|
- </div>
|
|
|
- <!-- <div class="nameMd">{{ s.Name }}</div>-->
|
|
|
- <div class="namert" v-if="s.RealHr != 0">
|
|
|
- <power :cur-power="s.PowerPercent"></power>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
+ <div class="power" v-if="s.RealHr != 0">
|
|
|
+ <power :cur-power="s.PowerPercent"></power>
|
|
|
+ </div>
|
|
|
+ <div class="userinfo">
|
|
|
+ <div class="lt">
|
|
|
+ <span>
|
|
|
+ <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
|
|
|
+ <s>%</s>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="md">
|
|
|
<div class="head">
|
|
|
- <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
|
|
|
- <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
|
|
|
- <!-- 生日快乐 -->
|
|
|
- <div class="birth" v-if="s.IsBirthday == 1">
|
|
|
- <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
|
|
|
- <img src="../assets/img/birth/birthText.png" class="birthText"/>
|
|
|
- </div>
|
|
|
- <!--私有心率带-->
|
|
|
- <div class="isPrivate" v-if="s.IsPrivate == 1">
|
|
|
- <i></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="names">
|
|
|
- <span>
|
|
|
- {{ s.Name }}
|
|
|
- </span>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="cla">
|
|
|
- <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
|
|
|
- <em class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">
|
|
|
- ---
|
|
|
- </em>
|
|
|
- </div>
|
|
|
- <div class="lcla">
|
|
|
- <span>%</span>
|
|
|
- </div>
|
|
|
- <!--fastJump-->
|
|
|
- <!--heartJump-->
|
|
|
- <div>
|
|
|
- <div class="lhj">
|
|
|
+ <div class="rt">
|
|
|
+ <span>
|
|
|
<div :class="[{'heartJump':true}]">
|
|
|
<span class="fastJump" v-if="s.RealHr != 0"
|
|
|
v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}</span>
|
|
|
@@ -57,37 +31,28 @@
|
|
|
---
|
|
|
</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="rhj">
|
|
|
- <img src="../assets/imgs/stduents/heart.svg" class=""/>
|
|
|
- </div>
|
|
|
+ <img src="../assets/imgs/student/heart.svg" class=""/>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="bottomLi">
|
|
|
- <div class="btcla">
|
|
|
- <img src="../assets/imgs/stduents/calc.svg" class=""/>
|
|
|
- <span>{{ s.Cle |fmtInt }}</span>
|
|
|
- </div>
|
|
|
- <div class="btck">
|
|
|
- <img src="../assets/imgs/stduents/sport.svg" class=""/>
|
|
|
- <span>{{ s.PureCalorieNoVo2 |fmtInt }}</span>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <img src="../assets/imgs/stduents/ck.svg" class=""/>
|
|
|
- <span>{{ s.Ck |fmtFloat }}</span>
|
|
|
- </div>
|
|
|
+ <div class="userSport">
|
|
|
+ <span>
|
|
|
+ <img src="../assets/imgs/student/calc.svg" class=""/>
|
|
|
+ <em>{{ s.Cle |fmtInt }}</em>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <img src="../assets/imgs/student/sport.svg" class=""/>
|
|
|
+ <em>{{ s.PureCalorieNoVo2 |fmtInt }}</em>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <img src="../assets/imgs/student/ck.svg" class=""/>
|
|
|
+ <em>{{ s.Ck |fmtFloat }}</em>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="(s,i) in studentsFake" :class="studentsClassName[i].name" v-show="students"
|
|
|
- v-if="students.length > 0">
|
|
|
- <div class="fakePart">
|
|
|
-
|
|
|
- </div>
|
|
|
- </li>
|
|
|
</ul>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import power from '@/components/power'
|
|
|
|
|
|
@@ -98,24 +63,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
props: ['students', 'studentsClassName'],
|
|
|
- watch: {
|
|
|
- 'studentsClassName': {
|
|
|
- // 自动计算补全空白处
|
|
|
- handler(newName, oldName) {
|
|
|
- let sum = 0;
|
|
|
- let that = this;
|
|
|
- sum = newName.length;
|
|
|
- if (sum == 3) {
|
|
|
- that.studentsFake = 1;
|
|
|
- }
|
|
|
- if (sum == 5) {
|
|
|
- that.studentsFake = 1;
|
|
|
- }
|
|
|
- },
|
|
|
- deep: true,
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
filters: {
|
|
|
fmtNum(val) {
|
|
|
if (val == 0) {
|
|
|
@@ -153,58 +100,62 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
-ul, li {
|
|
|
- list-style: none;
|
|
|
+
|
|
|
+@mixin cube {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+em, i, ul, li {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ font-style: normal;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+ul {
|
|
|
+ @include cube;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
.blue .centerLi {
|
|
|
- border-radius: 16px;
|
|
|
- background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
|
|
|
- box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
|
|
|
+ background: #028fe1;
|
|
|
}
|
|
|
|
|
|
.violet .centerLi {
|
|
|
- border-radius: 16px;
|
|
|
- background: linear-gradient(#3500ac 0%, #3500ac 33%, #4c53fc 100%);
|
|
|
- box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
|
|
|
+ background: #6d26fa;
|
|
|
}
|
|
|
|
|
|
.green .centerLi {
|
|
|
- border-radius: 16px;
|
|
|
- background: linear-gradient(#05a200 0%, #05a200 30.05%, #31d92d 100%);
|
|
|
- box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
|
|
|
-
|
|
|
+ background: #059f00;
|
|
|
}
|
|
|
|
|
|
.yellow .centerLi {
|
|
|
- border-radius: 16px;
|
|
|
- background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
|
|
|
- box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
|
|
|
+ background: #dfb200;
|
|
|
}
|
|
|
|
|
|
.brown .centerLi {
|
|
|
- border-radius: 16px;
|
|
|
- background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
|
|
|
- box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
|
|
|
-
|
|
|
+ background: #ea8813;
|
|
|
}
|
|
|
|
|
|
.red .centerLi {
|
|
|
- border-radius: 16px;
|
|
|
- background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
|
|
|
- box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
|
|
|
-
|
|
|
+ background: #cf1122;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.slowJump {
|
|
|
- animation: mymove 3s infinite;
|
|
|
- -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
|
|
|
+ animation: moveAct 3s infinite;
|
|
|
+ -webkit-animation: moveAct 3s infinite; /*Safari and Chrome*/
|
|
|
animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
/* Safari 和 Chrome */
|
|
|
@@ -213,8 +164,8 @@ ul, li {
|
|
|
}
|
|
|
|
|
|
.normalJump {
|
|
|
- animation: mymove 2s infinite;
|
|
|
- -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
|
|
|
+ animation: moveAct 2s infinite;
|
|
|
+ -webkit-animation: moveAct 2s infinite; /*Safari and Chrome*/
|
|
|
animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
/* Safari 和 Chrome */
|
|
|
@@ -223,8 +174,8 @@ ul, li {
|
|
|
}
|
|
|
|
|
|
.fastJump {
|
|
|
- animation: mymove 1s infinite;
|
|
|
- -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
|
|
|
+ animation: moveAct 1s infinite;
|
|
|
+ -webkit-animation: moveAct 1s infinite; /*Safari and Chrome*/
|
|
|
animation-direction: alternate; /*轮流反向播放动画。*/
|
|
|
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
/* Safari 和 Chrome */
|
|
|
@@ -232,7 +183,7 @@ ul, li {
|
|
|
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
|
|
}
|
|
|
|
|
|
-@keyframes mymove {
|
|
|
+@keyframes moveAct {
|
|
|
0% {
|
|
|
transform: scale(1); /*开始为原始大小*/
|
|
|
}
|
|
|
@@ -245,10 +196,9 @@ ul, li {
|
|
|
75% {
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-@-webkit-keyframes mymove /*Safari and Chrome*/
|
|
|
+@-webkit-keyframes moveAct /*Safari and Chrome*/
|
|
|
{
|
|
|
0% {
|
|
|
transform: scale(1); /*开始为原始大小*/
|
|
|
@@ -264,1688 +214,27 @@ ul, li {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-/*userList*/
|
|
|
-
|
|
|
-.userList {
|
|
|
- width: 100%;
|
|
|
- /*min-height: 76%;*/
|
|
|
- /*height: 76%;*/
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: scroll;
|
|
|
- display: block;
|
|
|
- margin: 0.1rem auto;
|
|
|
-}
|
|
|
-
|
|
|
-.userList ul {
|
|
|
- /*width: 100%;*/
|
|
|
- height: 98%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0.1rem;
|
|
|
- margin-bottom: 0;
|
|
|
- overflow-y: scroll;
|
|
|
-}
|
|
|
-
|
|
|
-.userList li {
|
|
|
- display: block;
|
|
|
- z-index: 666;
|
|
|
-}
|
|
|
-
|
|
|
.centerLi {
|
|
|
width: 99.8%;
|
|
|
+ height: 100%;
|
|
|
overflow: hidden;
|
|
|
float: left;
|
|
|
color: #fff;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.human img {
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border-radius: 33rem;
|
|
|
-}
|
|
|
-
|
|
|
-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;
|
|
|
-}
|
|
|
-
|
|
|
-.human .name div {
|
|
|
- float: left;
|
|
|
- width: 20%;
|
|
|
- text-align: left;
|
|
|
- text-indent: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.human .name .nameMd {
|
|
|
- width: 60%;
|
|
|
- text-align: center;
|
|
|
- text-indent: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.human .name .namert {
|
|
|
- float: right;
|
|
|
-}
|
|
|
-
|
|
|
-.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.3rem;
|
|
|
- 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: 5.6rem;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.max .centerLi {
|
|
|
- width: 90%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
- margin-top: 6%
|
|
|
-}
|
|
|
-
|
|
|
-.two .centerLi {
|
|
|
- /*border: 1px solid #fff;*/
|
|
|
-}
|
|
|
-
|
|
|
-.two:nth-child(2) {
|
|
|
- float: right;
|
|
|
-}
|
|
|
-
|
|
|
-.two .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 1rem;
|
|
|
- font-size: 0.5rem;
|
|
|
- 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.3rem;
|
|
|
- left: 1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.two .lhj span {
|
|
|
- width: 3rem;
|
|
|
- height: 2rem;
|
|
|
- top: -2.4rem;
|
|
|
- left: 2.4rem;
|
|
|
- font-size: 1.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.two .rhj img {
|
|
|
- width: 0.45rem;
|
|
|
- top: -2.2rem;
|
|
|
- right: 0.3rem;
|
|
|
-}
|
|
|
-
|
|
|
-.two .topLi {
|
|
|
- height: 4.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.two .bottomLi {
|
|
|
- font-size: 0.4rem;
|
|
|
- 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: 1%;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 4rem;
|
|
|
- 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.4rem;
|
|
|
- line-height: 0.8rem;
|
|
|
-}
|
|
|
-
|
|
|
-.three .human img {
|
|
|
- width: 2.1rem;
|
|
|
- height: 2.1rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.three .cla {
|
|
|
- width: 2.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.8rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.three .lcla span {
|
|
|
- font-size: 0.45rem;
|
|
|
- top: -1.8rem;
|
|
|
- float: left;
|
|
|
- left: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.three .cla em {
|
|
|
- font-size: 1.2rem;
|
|
|
- left: 1rem;
|
|
|
+ height: 5rem;
|
|
|
+ margin-top: 2rem;
|
|
|
}
|
|
|
|
|
|
-.three .lhj span {
|
|
|
- width: 3rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.70rem;
|
|
|
- left: 2.3rem;
|
|
|
- font-size: 1.1rem;
|
|
|
+.userinfo {
|
|
|
+ @include cube;
|
|
|
}
|
|
|
|
|
|
-.three .rhj img {
|
|
|
- width: 0.4rem;
|
|
|
- top: -1.7rem;
|
|
|
- right: 0.4rem;
|
|
|
+.userSport {
|
|
|
+ @include cube;
|
|
|
}
|
|
|
|
|
|
-.three .topLi {
|
|
|
- /*height: 3.26rem;*/
|
|
|
- height: 3.18rem;
|
|
|
-}
|
|
|
-
|
|
|
-.three .bottomLi {
|
|
|
- font-size: 0.4rem;
|
|
|
- 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.35rem;
|
|
|
- line-height: 0.8rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .human img {
|
|
|
- width: 1.6rem;
|
|
|
- height: 1.6rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .cla {
|
|
|
- width: 2rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.3rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.3rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .lcla span {
|
|
|
- font-size: 0.4rem;
|
|
|
- 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.85rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .rhj img {
|
|
|
- width: 0.3rem;
|
|
|
- top: -1.3rem;
|
|
|
- right: 0.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .topLi {
|
|
|
- height: 2.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.325rem;
|
|
|
- margin-top: 0.3rem;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 3%;
|
|
|
-}
|
|
|
-
|
|
|
-.six .bottomLi .step {
|
|
|
- width: 28%;
|
|
|
- padding-right: 0%;
|
|
|
-}
|
|
|
-
|
|
|
-.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.12rem;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/*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.3rem;
|
|
|
- line-height: 0.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .human img {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.2rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .cla {
|
|
|
- width: 1.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.1rem;
|
|
|
- left: 0;
|
|
|
- font-size: 0.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .lcla span {
|
|
|
- font-size: 0.35rem;
|
|
|
- top: -1.1rem;
|
|
|
- float: left;
|
|
|
- left: 0.05rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .cla em {
|
|
|
- font-size: 0.7rem;
|
|
|
- left: 1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .lhj span {
|
|
|
- width: 1.9rem;
|
|
|
- height: 2rem;
|
|
|
- top: -1.1rem;
|
|
|
- left: 1.6rem;
|
|
|
- font-size: 0.7rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .rhj img {
|
|
|
- width: 0.25rem;
|
|
|
- top: -1.0rem;
|
|
|
- right: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .topLi {
|
|
|
- height: 2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.3rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
- 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: 5%;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .bottomLi .step {
|
|
|
- width: 28%;
|
|
|
- padding-right: 0%;
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
- margin-top: 0.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.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.6rem;
|
|
|
- left: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .lhj span {
|
|
|
- width: 1.4rem;
|
|
|
- height: 2.1rem;
|
|
|
- top: -0.9rem;
|
|
|
- left: 1.4rem;
|
|
|
- font-size: 0.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .rhj img {
|
|
|
- width: 0.2rem;
|
|
|
- top: -0.9rem;
|
|
|
- right: 0.15rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .topLi {
|
|
|
- height: 1.85rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.25rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- 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: 3%;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .bottomLi .step {
|
|
|
- width: 29%;
|
|
|
- padding-right: 0%;
|
|
|
-}
|
|
|
-
|
|
|
-.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.25rem;
|
|
|
- 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.1rem;
|
|
|
- font-size: 0.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .lcla span {
|
|
|
- font-size: 0.25rem;
|
|
|
- top: -0.8rem;
|
|
|
- float: left;
|
|
|
- left: -0.07rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .cla em {
|
|
|
- font-size: 0.5rem;
|
|
|
- left: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .lhj span {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.2rem;
|
|
|
- top: -0.8rem;
|
|
|
- left: 0.9rem;
|
|
|
- font-size: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .rhj img {
|
|
|
- width: 0.18rem;
|
|
|
- top: -0.75rem;
|
|
|
- right: 0.15rem;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 2%;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .bottomLi .step {
|
|
|
- width: 27%;
|
|
|
- padding-right: 1%;
|
|
|
-}
|
|
|
-
|
|
|
-.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.22rem;
|
|
|
- line-height: 0.45rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
- 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.5rem;
|
|
|
- left: 0.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .lhj span {
|
|
|
- width: 1rem;
|
|
|
- height: 1.8rem;
|
|
|
- top: -0.7rem;
|
|
|
- left: 1rem;
|
|
|
- font-size: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .rhj img {
|
|
|
- width: 0.17rem;
|
|
|
- top: -0.65rem;
|
|
|
- right: 0.15rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .topLi {
|
|
|
- height: 1.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 2%;
|
|
|
- /*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.22rem;
|
|
|
- line-height: 0.5rem;
|
|
|
- margin-bottom: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .human img {
|
|
|
- width: 0.75rem;
|
|
|
- height: 0.75rem;
|
|
|
- margin-top: 0.15rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .cla {
|
|
|
- width: 0.95rem;
|
|
|
- height: 1.4rem;
|
|
|
- top: -0.69rem;
|
|
|
- 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.4rem;
|
|
|
- left: 0.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .lhj span {
|
|
|
- width: 0.85rem;
|
|
|
- height: 2rem;
|
|
|
- top: -0.65rem;
|
|
|
- left: 0.9rem;
|
|
|
- font-size: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .rhj img {
|
|
|
- width: 0.15rem;
|
|
|
- top: -0.6rem;
|
|
|
- right: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .topLi {
|
|
|
- height: 1.35rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.2rem;
|
|
|
- margin-top: -0.1rem;
|
|
|
- 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: 2%;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 96%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- /*border: 1px solid #fff;*/
|
|
|
- /*border: 0.03rem solid rgba(255,255,255,0.1);*/
|
|
|
- /*box-shadow:inset 0 0 6px rgba(0,0,0,0.4);*/
|
|
|
- float: none;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .human .name {
|
|
|
- width: 100%;
|
|
|
- height: 0.4rem;
|
|
|
- font-size: 0.2rem;
|
|
|
- line-height: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .human img {
|
|
|
- width: 0.7rem;
|
|
|
- height: 0.7rem;
|
|
|
- margin-top: 0.05rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .cla {
|
|
|
- width: 0.9rem;
|
|
|
- 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.6rem;
|
|
|
- right: 0.15rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .topLi {
|
|
|
- height: 1.19rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .bottomLi {
|
|
|
- width: 98%;
|
|
|
- font-size: 0.17rem;
|
|
|
- margin-top: 0rem;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .bottomLi img {
|
|
|
- width: 0.2rem;
|
|
|
- height: 0.2rem;
|
|
|
- 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: 2%;
|
|
|
-}
|
|
|
-
|
|
|
-.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.25rem;
|
|
|
- height: 0.25rem;
|
|
|
- margin-top: 0.12rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .bottomLi .step img {
|
|
|
- margin-top: 0.16rem;
|
|
|
-}
|
|
|
-
|
|
|
-.birth {
|
|
|
- position: relative;
|
|
|
- top: -3.3rem;
|
|
|
- width: 40%;
|
|
|
- height: 1px;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.birth img.birthCrow {
|
|
|
- position: relative;
|
|
|
- top: -0.1rem;
|
|
|
- width: 1.2rem;
|
|
|
- height: 0.7rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-.birth img.birthText {
|
|
|
- position: relative;
|
|
|
- top: 1.8rem;
|
|
|
- width: 1.8rem;
|
|
|
- height: 0.8rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-.two .birth img.birthCrow {
|
|
|
- top: 0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.three .birth img.birthCrow {
|
|
|
- top: 0.8rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .birth img.birthCrow {
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.5rem;
|
|
|
- top: 1.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .birth img.birthText {
|
|
|
- top: 2rem;
|
|
|
- width: 1.5rem;
|
|
|
- height: 0.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .birth img.birthCrow {
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.5rem;
|
|
|
- top: 1.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .birth img.birthText {
|
|
|
- top: 2.1rem;
|
|
|
- width: 1.2rem;
|
|
|
- height: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .birth img.birthCrow {
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.5rem;
|
|
|
- top: 1.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .birth img.birthText {
|
|
|
- top: 2.1rem;
|
|
|
- width: 1.2rem;
|
|
|
- height: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .birth img.birthCrow {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.3rem;
|
|
|
- top: 2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .birth img.birthText {
|
|
|
- top: 2.4rem;
|
|
|
- width: 1rem;
|
|
|
- height: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .birth img.birthCrow {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.3rem;
|
|
|
- top: 2.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .birth img.birthText {
|
|
|
- top: 2.45rem;
|
|
|
- width: 1rem;
|
|
|
- height: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .birth img.birthCrow {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.3rem;
|
|
|
- top: 2.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .birth img.birthText {
|
|
|
- top: 2.45rem;
|
|
|
- width: 1rem;
|
|
|
- height: 0.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .birth {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .birth img.birthCrow {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.3rem;
|
|
|
- top: 2.2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .birth img.birthText {
|
|
|
- top: 2.5rem;
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.3rem;
|
|
|
-}
|
|
|
-
|
|
|
-/*isPrivate*/
|
|
|
-.isPrivate {
|
|
|
- position: relative;
|
|
|
- float: right;
|
|
|
- top: -3.3rem;
|
|
|
- width: 75%;
|
|
|
- height: 1px;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- overflow: visible;
|
|
|
-}
|
|
|
-
|
|
|
-.isPrivate i {
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 0.1rem;
|
|
|
- width: 1rem !important;
|
|
|
- height: 1rem !important;
|
|
|
- border: none !important;
|
|
|
- background: url("../static/img/privateSign.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: top center;
|
|
|
-}
|
|
|
-
|
|
|
-.two .isPrivate {
|
|
|
- top: -3.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.three .isPrivate {
|
|
|
- top: -2.4rem;
|
|
|
- left: -0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .isPrivate {
|
|
|
- top: -1.9rem;
|
|
|
-}
|
|
|
-
|
|
|
-.six .isPrivate i {
|
|
|
- width: 0.8rem !important;
|
|
|
- height: 0.8rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .isPrivate {
|
|
|
- top: -1.4rem;
|
|
|
- left: -0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.nine .isPrivate i {
|
|
|
- width: 0.6rem !important;
|
|
|
- height: 0.6rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .isPrivate {
|
|
|
- top: -1.4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ten .isPrivate i {
|
|
|
- width: 0.6rem !important;
|
|
|
- height: 0.6rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .isPrivate {
|
|
|
- top: -1.15rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twelve .isPrivate i {
|
|
|
- width: 0.5rem !important;
|
|
|
- height: 0.5rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .isPrivate {
|
|
|
- top: -1rem;
|
|
|
- left: -0.1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.sixteen .isPrivate i {
|
|
|
- width: 0.4rem !important;
|
|
|
- height: 0.4rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .isPrivate {
|
|
|
- top: -1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twenty .isPrivate i {
|
|
|
- width: 0.4rem !important;
|
|
|
- height: 0.4rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .isPrivate {
|
|
|
- top: -0.92rem;
|
|
|
-}
|
|
|
-
|
|
|
-.twentyFour .isPrivate i {
|
|
|
- width: 0.4rem !important;
|
|
|
- height: 0.4rem !important;
|
|
|
-}
|
|
|
-
|
|
|
-.boy {
|
|
|
- border: 0.03rem solid #39B6FF;
|
|
|
-}
|
|
|
-
|
|
|
-.girl {
|
|
|
- border: 0.03rem solid #EA26EA;
|
|
|
-}
|
|
|
-
|
|
|
-.names {
|
|
|
- position: relative;
|
|
|
- bottom: 0.5rem;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- span {
|
|
|
- width: 20%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- font-size: 0.2rem;
|
|
|
- color: #fff;
|
|
|
- border-radius: 28.5px;
|
|
|
- background-color: rgba(0, 0, 0, 0.63);
|
|
|
- padding: 0.1rem 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.fakePart {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- //background: url("../assets/imgs/stduents/fakepart.svg");
|
|
|
- //background-size: 100% 100%;
|
|
|
- //background-position: top center;
|
|
|
- //background-repeat: no-repeat;
|
|
|
- background-color: rgba(255, 255, 255, 0.13);
|
|
|
- border-radius: 16px;
|
|
|
-}
|
|
|
|
|
|
</style>
|
