|
|
@@ -0,0 +1,2117 @@
|
|
|
+<template>
|
|
|
+ <div class="context bgStyle1" id="online">
|
|
|
+ <div class="change">
|
|
|
+ <div class="basicInfo">
|
|
|
+ <em>课程名：{{classInfo.name}} </em>
|
|
|
+ <em>学员数：{{classInfo.len}} </em>
|
|
|
+ <em>（在线：{{classInfo.online}}人 离线：{{classInfo.offline}}人） </em>
|
|
|
+ <em>当前时间：{{classInfo.time}} </em>
|
|
|
+ </div>
|
|
|
+ <el-button @click="full_screen" v-if="!screen_full" icon="el-icon-full-screen" type="primary">全屏</el-button>
|
|
|
+ <el-button @click="cancle_screen" v-else icon="el-icon-full-screen" type="primary">缩小</el-button>
|
|
|
+ <el-button v-if="classState == 0" @click="" type="success">上课</el-button>
|
|
|
+ <el-button v-else @click="" type="danger">下课</el-button>
|
|
|
+ <el-button @click="" type="warning">排行版</el-button>
|
|
|
+ <!--<el-button @click="">隐藏信息 todo</el-button>-->
|
|
|
+ </div>
|
|
|
+ <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="centerLi">
|
|
|
+ <div class="topLi">
|
|
|
+ <div class="human">
|
|
|
+ <span class="name">
|
|
|
+ <div class="nameLt">
|
|
|
+ <i class="el-icon-male" v-if="s.Sex == 1"></i>
|
|
|
+ <i class="el-icon-female" v-if="s.Sex == 2"></i>
|
|
|
+ </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="head">
|
|
|
+ <img :src="s.Head" alt="" v-if="s.Head">
|
|
|
+ <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>
|
|
|
+ <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="[{'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>
|
|
|
+ </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>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!--图示-->
|
|
|
+ <levelIcon></levelIcon>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import levelIcon from '@/components/levelIcon'
|
|
|
+ import power from '@/components/power'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ classInfo: {
|
|
|
+ name: '',
|
|
|
+ len: '',
|
|
|
+ online: 0,
|
|
|
+ offline: 0,
|
|
|
+ time: '00：00：00',
|
|
|
+ },
|
|
|
+ classState: 0,//0 下课 1上课
|
|
|
+ students: [],
|
|
|
+ studentsClassName: [],
|
|
|
+ screen_full: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList(6);
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(to) {
|
|
|
+ console.log(to);
|
|
|
+ if (to.name != 'online') {
|
|
|
+ this.clearRem()
|
|
|
+ }else{
|
|
|
+ this.setRem();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clearRem(){
|
|
|
+ console.log(123);
|
|
|
+ //得到html的Dom元素
|
|
|
+ let htmlDom = document.getElementsByTagName('html')[0];
|
|
|
+ htmlDom.style.fontSize = '14px'
|
|
|
+ },
|
|
|
+ setRem(){
|
|
|
+ // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
|
|
|
+ let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
+ //得到html的Dom元素
|
|
|
+ let htmlDom = document.getElementsByTagName('html')[0];
|
|
|
+ //设置根元素字体大小
|
|
|
+ htmlDom.style.fontSize = htmlWidth / 20 + 'px';
|
|
|
+ },
|
|
|
+ // 全屏显示
|
|
|
+ full_screen() {
|
|
|
+ let that = this;
|
|
|
+ this.screen_full = true;
|
|
|
+ let elem = document.getElementById("online");
|
|
|
+ this.full_state = true;
|
|
|
+ if (elem.webkitRequestFullScreen) {
|
|
|
+ elem.webkitRequestFullScreen();
|
|
|
+ that.full_rule();
|
|
|
+ } else if (elem.mozRequestFullScreen) {
|
|
|
+ elem.mozRequestFullScreen();
|
|
|
+ that.full_rule();
|
|
|
+ } else if (elem.requestFullScreen) {
|
|
|
+ elem.requestFullscreen();
|
|
|
+ that.full_rule();
|
|
|
+ } else {
|
|
|
+ this.screen_full = false;
|
|
|
+ notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消全屏
|
|
|
+ cancle_screen() {
|
|
|
+ let that = this;
|
|
|
+ this.screen_full = false;
|
|
|
+ this.full_state = false;
|
|
|
+ var elem = document;
|
|
|
+ if (elem.webkitCancelFullScreen) {
|
|
|
+ elem.webkitCancelFullScreen();
|
|
|
+ that.cancle_full_rule();
|
|
|
+ } else if (elem.mozCancelFullScreen) {
|
|
|
+ elem.mozCancelFullScreen();
|
|
|
+ that.cancle_full_rule();
|
|
|
+ } else if (elem.cancelFullScreen) {
|
|
|
+ elem.cancelFullScreen();
|
|
|
+ that.cancle_full_rule();
|
|
|
+ } else if (elem.exitFullscreen) {
|
|
|
+ elem.exitFullscreen();
|
|
|
+ that.cancle_full_rule();
|
|
|
+ } else {
|
|
|
+ this.screen_full = true;
|
|
|
+ notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getList(len) {
|
|
|
+ let rs = {};
|
|
|
+ for (var i = 0; i < len; i++) {
|
|
|
+ rs = {
|
|
|
+ Age: 13,
|
|
|
+ AvgHr: 0,
|
|
|
+ BeginTime: 1608188579,
|
|
|
+ Ck: "99",
|
|
|
+ Cle: "159",
|
|
|
+ DuId: 119,
|
|
|
+ EndTime: 0,
|
|
|
+ GroupNo: 1,
|
|
|
+ Head: "http://192.168.0.2/gc.png",
|
|
|
+ Height: 160,
|
|
|
+ HrId: 41,
|
|
|
+ IsBirthday: 0,
|
|
|
+ IsBreaking: 0,
|
|
|
+ IsNewUser: 0,
|
|
|
+ MaxHr: 80,
|
|
|
+ PowerPercent: "80",
|
|
|
+ Name: "西门吹雪",
|
|
|
+ PkSucessnum: '1',//胜场数
|
|
|
+ PkTotalnum: '1',//总场数
|
|
|
+ PlanId: 60,
|
|
|
+ PureCalorieNoVo2: "500",
|
|
|
+ Sex: 1,
|
|
|
+ Sn: "22735",
|
|
|
+ StaticHr: 60,
|
|
|
+ Steps: "1280",
|
|
|
+ SvId: 20,
|
|
|
+ UserId: 104,
|
|
|
+ UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
|
|
|
+ Weight: 50,
|
|
|
+ ActivePercent: 70,
|
|
|
+ bmrMSjRmrcb: 66.00000000000001,
|
|
|
+ FormatCk: "12",
|
|
|
+ isAlive: true,
|
|
|
+ isFinish: false,
|
|
|
+ isOver: false,
|
|
|
+ IsPrivate: 1,
|
|
|
+ lastPushDataTime: 1608188947175,
|
|
|
+ lastUpdateTime: 1608188945184,
|
|
|
+ queuePushData: [],
|
|
|
+ RealHr: "100",
|
|
|
+ vo2Max: "123"
|
|
|
+ };
|
|
|
+ this.students.push(rs)
|
|
|
+ }
|
|
|
+ this.giveClassName( this.students);
|
|
|
+ },
|
|
|
+ // 给每一个数据加类名，一次遍历全部赋值
|
|
|
+ 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 = 'twentyFour';
|
|
|
+ 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 > 69:
|
|
|
+ colorClass = 'yellow';
|
|
|
+ break;
|
|
|
+ case per <= 69 && 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.0'
|
|
|
+ } else {
|
|
|
+ return parseFloat(val).toFixed(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fmtInt(val) {
|
|
|
+ if (val == 0) {
|
|
|
+ return '0'
|
|
|
+ } else {
|
|
|
+ return parseInt(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ max100(val) {
|
|
|
+ if (val <= 100) {
|
|
|
+ return val
|
|
|
+ } else {
|
|
|
+ return 100
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ levelIcon, power
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ @import "../assets/css/bg.css";
|
|
|
+ .context {
|
|
|
+ border-radius: 12px;
|
|
|
+ height: 770px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #fff !important;
|
|
|
+ padding: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel /deep/ h5 {
|
|
|
+ margin: 0;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: normal;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #F0F2F5;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 0px;
|
|
|
+ padding-bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .change button {
|
|
|
+ float: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .basicInfo {
|
|
|
+ float: left;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ }
|
|
|
+ .userList {
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ em {
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul, li {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ /*position: absolute;*/
|
|
|
+ /*top: 190px;*/
|
|
|
+ /*left: 60px;*/
|
|
|
+ /*right: 0;*/
|
|
|
+ /*bottom: 0;*/
|
|
|
+ width: 100%;
|
|
|
+ /*height: 100%;*/
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: inline-flex;
|
|
|
+ /*align-content:center;*/
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .blue .centerLi {
|
|
|
+ background: #028FE1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .violet .centerLi {
|
|
|
+ background: #6D26FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green .centerLi {
|
|
|
+ background: #059F00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yellow .centerLi {
|
|
|
+ background: #DFB200;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brown .centerLi {
|
|
|
+ background: #EA8813;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red .centerLi {
|
|
|
+ background: #CF1122;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .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 li {
|
|
|
+ display: block;
|
|
|
+ z-index: 666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerLi {
|
|
|
+ width: 99.8%;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .human img {
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ border-radius: 33rem;
|
|
|
+ /*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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three .lhj span {
|
|
|
+ width: 3rem;
|
|
|
+ height: 2rem;
|
|
|
+ top: -1.70rem;
|
|
|
+ left: 2.3rem;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three .rhj img {
|
|
|
+ width: 0.4rem;
|
|
|
+ top: -1.7rem;
|
|
|
+ right: 0.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
