|
|
@@ -10,11 +10,7 @@
|
|
|
<div class="topLi">
|
|
|
<div class="human">
|
|
|
<span class="name">{{ s.Name }}</span>
|
|
|
- <!--<img src="../static/img/people/flyhead.png"/>-->
|
|
|
- <!--<img v-bind:src="require('../static/img/people/' + s.head)" alt="">-->
|
|
|
- <!--<img :src="s.Head" alt="" v-if="s.Head">-->
|
|
|
<img :src="s.Head" alt="" v-if="s.Head">
|
|
|
- <!--<img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">-->
|
|
|
<img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
|
|
|
</div>
|
|
|
<div class="cla">
|
|
|
@@ -71,67 +67,22 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!--图示-->
|
|
|
- <div class="levelIcon">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="cube">
|
|
|
- <div>
|
|
|
- 0%-<br>
|
|
|
- 39%
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <em>激活放松</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="cube">
|
|
|
- <div>
|
|
|
- 40%-<br>54% </div>
|
|
|
- </span>
|
|
|
- <em>动态热身</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="cube">
|
|
|
- <div>
|
|
|
- 55%-<br>69% </div>
|
|
|
- </span>
|
|
|
- <em>脂肪燃烧</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="cube">
|
|
|
- <div>
|
|
|
- 70%-<br>79% </div>
|
|
|
- </span>
|
|
|
- <em>糖分消耗</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="cube">
|
|
|
- <div>
|
|
|
- 80%-<br>89% </div>
|
|
|
- </span>
|
|
|
- <em>心肺训练</em>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="cube">
|
|
|
- <div>
|
|
|
- ≥90% </div>
|
|
|
- </span>
|
|
|
- <em>峰值锻炼</em>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <levelIcon></levelIcon>
|
|
|
<newRecord :toper-info="toperInfo"></newRecord>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Headside from '@/components/Headside'
|
|
|
+ import newRecord from '@/components/newRecord'
|
|
|
+ import levelIcon from '@/components/levelIcon'
|
|
|
import
|
|
|
{
|
|
|
getHello,
|
|
|
getRecordBreak,
|
|
|
getClassStat
|
|
|
} from '@/api/getApiRes'
|
|
|
- import newRecord from '@/components/newRecord'
|
|
|
+
|
|
|
import '../libs/rem';
|
|
|
import '../Global'
|
|
|
|
|
|
@@ -329,8 +280,6 @@
|
|
|
}
|
|
|
} else {
|
|
|
console.log("已上课");
|
|
|
-
|
|
|
- // that.$message.error(json.Memo);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -430,7 +379,7 @@
|
|
|
},
|
|
|
},
|
|
|
components: {
|
|
|
- Headside, newRecord
|
|
|
+ Headside, newRecord,levelIcon
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -490,177 +439,7 @@
|
|
|
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 {
|
