tv2.0 团课

v2tv/src/Global.js

@@ -6,11 +6,11 @@ companyInfo = {
 };
 
 // 当前版本   演示版
-// runVersion = 'test';
+runVersion = 'test';
 // 户外版本
 // runVersion = 'outDoor';
 // normal
-runVersion = 'normal';
+// runVersion = 'normal';
 
 // headapi = process.env.NODE_ENV === 'development' ? '/api/' : '../';
 // headapi = 'http://192.168.0.110:8080/';//从郑伟那里获得数据源

v2tv/src/Mock/index.js

@@ -10,7 +10,7 @@ let worldDetail = function () {
         item.push({
             "id": "@guid",
             // "name": "@region",
-            Name: "西门吹雪",
+            Name: "赵水水水",
             "Confirmed": "@integer(36844, 368449)",
             "Deaths": "@integer(1099, 10993)",
             "Recovered": "@integer(1986, 19865)",
@@ -134,7 +134,7 @@ let testStudent = function (num, team, mustbeTeamOne) {
             DuId: 119,
             EndTime: 0,
             GroupNo: group,
-            Head: "http://192.168.0.2/gc.png",
+            Head: require('../static/img/testhead.png'),
             Height: 160,
             HrId: 41,
             IsBirthday: 0,
@@ -144,7 +144,7 @@ let testStudent = function (num, team, mustbeTeamOne) {
             PowerPercent: "@integer(1, 100)",
             // PowerPercent: "100",
             // Name: "@cname",
-            Name: "西门吹雪",
+            Name: "赵水水水",
             PkSucessnum: '1',//胜场数
             PkTotalnum: '1',//总场数
             PlanId: 60,
@@ -255,17 +255,17 @@ let UserRankingQuery = function (num) {
     for (var i = 0; i < num; i++) {
         item1.push({
             // "UserName": "@cname",
-            UserName: "西门吹雪",
+            UserName: "赵水水水",
             "Values": "@integer(1, 9999)",
-            "head": ''
+            "Head": require('../static/img/testhead.png')
         })
     }
     for (var i = 0; i < num; i++) {
         item2.push({
             // "UserName": "@cname",
-            UserName: "西门吹雪",
+            UserName: "赵水水水",
             "Values": "@float(1,9999,0,1)",
-            "head": ''
+            "Head": require('../static/img/testhead.png')
         })
     }
     let Rs = [
@@ -299,27 +299,27 @@ let testHerosRankingQuery = function (num) {
             "Result": [
                 {
                     // "UserName": "@cname",
-                    UserName: "西门吹雪",
+                    UserName: "赵水水水",
                     "Sex": 1,
-                    "Head": "",
+                    "Head": require('../static/img/testhead.png'),
                     "Values": "4744",
                     "Unite": "千卡",
                     "Message": ""
                 },
                 {
                     // "UserName": "@cname",
-                    UserName: "西门吹雪",
+                    UserName: "赵水水水",
                     "Sex": 1,
-                    "Head": "",
+                    "Head": require('../static/img/testhead.png'),
                     "Values": "4034",
                     "Unite": "千卡",
                     "Message": ""
                 },
                 {
                     // "UserName": "@cname",
-                    UserName: "西门吹雪",
+                    UserName: "赵水水水",
                     "Sex": 1,
-                    "Head": "",
+                    "Head": require('../static/img/testhead.png'),
                     "Values": "2290",
                     "Unite": "千卡",
                     "Message": ""
@@ -332,18 +332,18 @@ let testHerosRankingQuery = function (num) {
             "Result": [
                 {
                     // "UserName": "@cname",
-                    UserName: "西门吹雪",
+                    UserName: "赵水水水",
                     "Sex": 1,
-                    "Head": "",
+                    "Head": require('../static/img/testhead.png'),
                     "Values": "1022",
                     "Unite": "",
                     "Message": "打破了历史记录100000"
                 },
                 {
                     // "UserName": "@cname",
-                    UserName: "西门吹雪",
+                    UserName: "赵水水水",
                     "Sex": 1,
-                    "Head": "",
+                    "Head": require('../static/img/testhead.png'),
                     "Values": "1020",
                     "Unite": "",
                     "Message": "打破了历史记录100000"
@@ -378,17 +378,17 @@ if (t == 1) {
     Mock.mock('/api/testTable', 'post', testTable());
     Mock.mock('/api/getUserList', 'post', getUserList());
 
-    let curheadapi = 'http://192.168.0.10:8080/';
+    let Mockapi = 'http://192.168.0.10:8080/';
 
-    if (runVersion == 'test') {
-        curheadapi = 'http://cal.beswell.com:85/DataTransfer/';
-    }
-    if(runVersion == 'outDoor'){
-         curheadapi = 'http://192.168.0.105:9000/';
-    }
+    // if (runVersion == 'test') {
+    let curheadapi = 'http://cal.beswell.com:85/DataTransfer/';
+    // }
+    // if (runVersion == 'outDoor') {
+    //     curheadapi = 'http://192.168.0.105:9000/';
+    // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 0;
+    let LessonClass = 1;
     let LessonDp = 1;
     // 1：团课/私教
     // 2：竞技课2PK
@@ -396,44 +396,62 @@ if (t == 1) {
     if (LessonClass == 1) {
         // 上团课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(2, 1));
+        Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(6, 1));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(1, 1));
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
+        Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
         Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 2,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(8, 2,));
     } else if (LessonClass == 3) {
         // 上3队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 3));
+        Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 3));
         Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 3,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(8, 3,));
     } else if (LessonClass == 0) {
         // 下课
         if (LessonDp == 0) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 0));
+            Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(0, 0));
         } else if (LessonDp == 1) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 1));
+            Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(0, 1));
             Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 2));
+            Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(16, 2));
         } else if (LessonDp == 2) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 2));
+            Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(0, 2));
             // 下课排名
             Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 2));
+            Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(16, 2));
         } else if (LessonDp == 3) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 3));
+            Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(0, 3));
             // 下课排名
             Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 3));
+            Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(16, 3));
         }
     }
 
     // wait
     // 英雄榜
     Mock.mock(curheadapi + 'HerosRankingQuery', 'post', testHerosRankingQuery(3));
+    Mock.mock(Mockapi + 'HerosRankingQuery', 'post', testHerosRankingQuery(3));
     // 卡路里排行榜
     Mock.mock(curheadapi + 'CalorieStatsQuery', 'post', CalorieStatsQuery(1, 2));
+    Mock.mock(Mockapi + 'CalorieStatsQuery', 'post', CalorieStatsQuery(1, 2));
     // 用户排行榜
     Mock.mock(curheadapi + 'UserRankingQuery', 'post', UserRankingQuery(8));
+    Mock.mock(Mockapi + 'UserRankingQuery', 'post', UserRankingQuery(8));
     // 新同学 0 999
     Mock.mock(curheadapi + 'getNewUser', 'post', getNewUser(999));
+    Mock.mock(Mockapi + 'getNewUser', 'post', getNewUser(999));
     // 彩蛋 0 999
     Mock.mock(curheadapi + 'getRecordBreak', 'post', getRecordBreak(999));
+    Mock.mock(Mockapi + 'getRecordBreak', 'post', getRecordBreak(999));
 }
 
 export default Mock;

v2tv/src/assets/css/bg.scss

@@ -1,4 +1,5 @@
 @mixin bg {
+  height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
@@ -33,4 +34,9 @@
 .bg2Style2 {
   background: url("../../src/assets/imgs/bg/bg1.png");
   @include bg;
+}
+
+.bgStyleMain {
+  background: url("../../src/assets/imgs/bg/bgMain.png");
+  @include bg;
 }

v2tv/src/assets/imgs/levelIcon/i39.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92"
+     viewBox="0 0 155 92">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.379" y1="0.034" x2="0.881" y2="0.845"
+                        gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#83d1ff"/>
+            <stop offset="0.103" stop-color="#028fe1"/>
+            <stop offset="0.823" stop-color="#028fe1"/>
+            <stop offset="1" stop-color="#6fc6f8"/>
+        </linearGradient>
+    </defs>
+    <g id="激活放松" transform="translate(-78 -420)">
+        <rect id="矩形_114" data-name="矩形 114" width="155" height="92" rx="12" transform="translate(78 420)" fill="#fff"
+              opacity="0.101"/>
+        <g id="组_522" data-name="组 522" transform="translate(-257 -517)">
+            <g id="矩形_122" data-name="矩形 122" transform="translate(410 966)" fill="none" stroke="#028fe1"
+               stroke-width="2">
+                <path d="M0,0H56.5A16.5,16.5,0,0,1,73,16.5v0A16.5,16.5,0,0,1,56.5,33H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+                      stroke="none"/>
+                <path d="M1.174,1H56.5A15.5,15.5,0,0,1,72,16.5v0A15.5,15.5,0,0,1,56.5,32H1.174A.174.174,0,0,1,1,31.826V1.174A.174.174,0,0,1,1.174,1Z"
+                      fill="none"/>
+            </g>
+            <text id="激活放松-2" data-name="激活放松" transform="translate(446 987)" fill="#fff" font-size="14"
+                  font-family="PingFangSC-Medium, PingFang SC" font-weight="500">
+                <tspan x="-28" y="0">激活放松</tspan>
+            </text>
+        </g>
+        <g id="组_520" data-name="组 520" transform="translate(-256.383 -516.365)">
+            <path id="排除_5" data-name="排除 5"
+                  d="M34.216,73.426a17.026,17.026,0,0,1-8.5-2.277l-17.2-9.931a17,17,0,0,1-8.5-14.709L0,26.731A17,17,0,0,1,8.512,11.988L25.648,2.113a17,17,0,0,1,16.988.007l17.2,9.93a17,17,0,0,1,8.5,14.709l.016,19.778A17,17,0,0,1,59.84,61.28L42.7,71.156A17.026,17.026,0,0,1,34.216,73.426ZM33.744,9.658a17.033,17.033,0,0,0-8.338,2.186l-8.53,4.8a16.994,16.994,0,0,0-8.662,15l.107,9.787a17,17,0,0,0,8.5,14.536l9.288,5.362a17,17,0,0,0,16.837.093l8.53-4.8a17,17,0,0,0,8.662-15l-.107-9.788a17,17,0,0,0-8.5-14.535l-9.288-5.363A17.021,17.021,0,0,0,33.744,9.658Z"
+                  transform="translate(344.383 945.523)" fill="url(#linear-gradient)"/>
+            <text id="_39_" data-name="≤
+39%" transform="translate(379 978)" fill="#58c2ff" font-size="16" font-family="PingFangSC-Medium, PingFang SC"
+                  font-weight="500">
+                <tspan x="-6.28" y="0">≤</tspan>
+                <tspan x="-17.52" y="16">39%</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

v2tv/src/assets/imgs/levelIcon/i40.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92"
+     viewBox="0 0 155 92">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.379" y1="0.034" x2="0.881" y2="0.845"
+                        gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#7d5ffa"/>
+            <stop offset="0.228" stop-color="#3500ac"/>
+            <stop offset="0.872" stop-color="#5b1ee2"/>
+            <stop offset="1" stop-color="#5541eb"/>
+        </linearGradient>
+    </defs>
+    <g id="动态热身" transform="translate(-297 -420)">
+        <rect id="矩形_124" data-name="矩形 124" width="155" height="92" rx="12" transform="translate(297 420)" fill="#fff"
+              opacity="0.101"/>
+        <g id="组_521" data-name="组 521" transform="translate(-222.854 -517)">
+            <g id="矩形_123" data-name="矩形 123" transform="translate(594.854 966)" fill="none" stroke="#613fef"
+               stroke-width="2">
+                <path d="M0,0H56.5A16.5,16.5,0,0,1,73,16.5v0A16.5,16.5,0,0,1,56.5,33H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+                      stroke="none"/>
+                <path d="M1.174,1H56.5A15.5,15.5,0,0,1,72,16.5v0A15.5,15.5,0,0,1,56.5,32H1.174A.174.174,0,0,1,1,31.826V1.174A.174.174,0,0,1,1.174,1Z"
+                      fill="none"/>
+            </g>
+            <text id="动态热身-2" data-name="动态热身" transform="translate(629.427 987)" fill="#fff" font-size="14"
+                  font-family="PingFangSC-Medium, PingFang SC" font-weight="500">
+                <tspan x="-28" y="0">动态热身</tspan>
+            </text>
+        </g>
+        <g id="组_519" data-name="组 519" transform="translate(-223 -518.365)">
+            <path id="排除_4" data-name="排除 4"
+                  d="M34.216,73.426a17.026,17.026,0,0,1-8.5-2.277l-17.2-9.931a17,17,0,0,1-8.5-14.709L0,26.731A17,17,0,0,1,8.512,11.988L25.648,2.113a17,17,0,0,1,16.988.007l17.2,9.93a17,17,0,0,1,8.5,14.709l.016,19.778A17,17,0,0,1,59.84,61.28L42.7,71.156A17.026,17.026,0,0,1,34.216,73.426ZM33.744,9.658a17.033,17.033,0,0,0-8.338,2.186l-8.53,4.8a16.994,16.994,0,0,0-8.662,15l.107,9.787a17,17,0,0,0,8.5,14.536l9.288,5.362a17,17,0,0,0,16.837.093l8.53-4.8a17,17,0,0,0,8.662-15l-.107-9.788a17,17,0,0,0-8.5-14.535l-9.288-5.363A17.021,17.021,0,0,0,33.744,9.658Z"
+                  transform="translate(530 947.523)" fill="url(#linear-gradient)"/>
+            <text id="_40_54_" data-name="40～
+54%" transform="translate(563.854 979)" fill="#b5c0ff" font-size="16" font-family="PingFangSC-Medium, PingFang SC"
+                  font-weight="500">
+                <tspan x="-17.6" y="0">40～</tspan>
+                <tspan x="-17.52" y="17">54%</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

v2tv/src/assets/imgs/levelIcon/i55.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92"
+     viewBox="0 0 155 92">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.379" y1="0.034" x2="0.881" y2="0.845"
+                        gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#9dff9a"/>
+            <stop offset="0.103" stop-color="#0ab105"/>
+            <stop offset="0.823" stop-color="#0ab105"/>
+            <stop offset="1" stop-color="#b3f500"/>
+        </linearGradient>
+    </defs>
+    <g id="脂肪燃烧" transform="translate(-516 -420)">
+        <rect id="矩形_125" data-name="矩形 125" width="155" height="92" rx="12" transform="translate(516 420)" fill="#fff"
+              opacity="0.101"/>
+        <g id="组_523" data-name="组 523" transform="translate(-3.854 -517)">
+            <g id="矩形_123" data-name="矩形 123" transform="translate(594.854 966)" fill="none" stroke="#0ab105"
+               stroke-width="2">
+                <path d="M0,0H56.5A16.5,16.5,0,0,1,73,16.5v0A16.5,16.5,0,0,1,56.5,33H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+                      stroke="none"/>
+                <path d="M1.174,1H56.5A15.5,15.5,0,0,1,72,16.5v0A15.5,15.5,0,0,1,56.5,32H1.174A.174.174,0,0,1,1,31.826V1.174A.174.174,0,0,1,1.174,1Z"
+                      fill="none"/>
+            </g>
+            <text id="脂肪燃烧-2" data-name="脂肪燃烧" transform="translate(629.427 987)" fill="#fff" font-size="14"
+                  font-family="PingFangSC-Medium, PingFang SC" font-weight="500">
+                <tspan x="-28" y="0">脂肪燃烧</tspan>
+            </text>
+        </g>
+        <g id="组_515" data-name="组 515" transform="translate(-211 -518)">
+            <path id="排除_3" data-name="排除 3"
+                  d="M34.216,73.426a17.026,17.026,0,0,1-8.5-2.277l-17.2-9.931a17,17,0,0,1-8.5-14.709L0,26.731A17,17,0,0,1,8.512,11.988L25.648,2.113a17,17,0,0,1,16.988.007l17.2,9.93a17,17,0,0,1,8.5,14.709l.016,19.778A17,17,0,0,1,59.84,61.28L42.7,71.156A17.026,17.026,0,0,1,34.216,73.426ZM33.744,9.658a17.033,17.033,0,0,0-8.338,2.186l-8.53,4.8a16.994,16.994,0,0,0-8.662,15l.107,9.787a17,17,0,0,0,8.5,14.536l9.288,5.362a17,17,0,0,0,16.837.093l8.53-4.8a17,17,0,0,0,8.662-15l-.107-9.788a17,17,0,0,0-8.5-14.535l-9.288-5.363A17.021,17.021,0,0,0,33.744,9.658Z"
+                  transform="translate(737 947.523)" fill="url(#linear-gradient)"/>
+            <text id="_55_69_" data-name="55～
+69%" transform="translate(772 979)" fill="#50f54b" font-size="16" font-family="PingFangSC-Medium, PingFang SC"
+                  font-weight="500">
+                <tspan x="-17.6" y="0">55～</tspan>
+                <tspan x="-17.52" y="17">69%</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

v2tv/src/assets/imgs/levelIcon/i70.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92"
+     viewBox="0 0 155 92">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.379" y1="0.034" x2="0.881" y2="0.845"
+                        gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#ffeead"/>
+            <stop offset="0.103" stop-color="#f5ec00"/>
+            <stop offset="0.823" stop-color="#ecf500"/>
+            <stop offset="1" stop-color="#fff96f"/>
+        </linearGradient>
+    </defs>
+    <g id="糖分消耗" transform="translate(-735 -420)">
+        <rect id="矩形_126" data-name="矩形 126" width="155" height="92" rx="12" transform="translate(735 420)" fill="#fff"
+              opacity="0.101"/>
+        <g id="组_524" data-name="组 524" transform="translate(215.146 -517)">
+            <g id="矩形_123" data-name="矩形 123" transform="translate(594.854 966)" fill="none" stroke="#f5ec00"
+               stroke-width="2">
+                <path d="M0,0H56.5A16.5,16.5,0,0,1,73,16.5v0A16.5,16.5,0,0,1,56.5,33H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+                      stroke="none"/>
+                <path d="M1.174,1H56.5A15.5,15.5,0,0,1,72,16.5v0A15.5,15.5,0,0,1,56.5,32H1.174A.174.174,0,0,1,1,31.826V1.174A.174.174,0,0,1,1.174,1Z"
+                      fill="none"/>
+            </g>
+            <text id="糖分消耗-2" data-name="糖分消耗" transform="translate(629.427 987)" fill="#fff" font-size="14"
+                  font-family="PingFangSC-Medium, PingFang SC" font-weight="500">
+                <tspan x="-28" y="0">糖分消耗</tspan>
+            </text>
+        </g>
+        <g id="组_516" data-name="组 516" transform="translate(-242.341 -518.365)">
+            <path id="排除_6" data-name="排除 6"
+                  d="M34.216,73.426a17.026,17.026,0,0,1-8.5-2.277l-17.2-9.931a17,17,0,0,1-8.5-14.709L0,26.731A17,17,0,0,1,8.512,11.988L25.648,2.113a17,17,0,0,1,16.988.007l17.2,9.93a17,17,0,0,1,8.5,14.709l.016,19.778A17,17,0,0,1,59.84,61.28L42.7,71.156A17.026,17.026,0,0,1,34.216,73.426ZM33.744,9.658a17.033,17.033,0,0,0-8.338,2.186l-8.53,4.8a16.994,16.994,0,0,0-8.662,15l.107,9.787a17,17,0,0,0,8.5,14.536l9.288,5.362a17,17,0,0,0,16.837.093l8.53-4.8a17,17,0,0,0,8.662-15l-.107-9.788a17,17,0,0,0-8.5-14.535l-9.288-5.363A17.021,17.021,0,0,0,33.744,9.658Z"
+                  transform="translate(987.341 947.523)" fill="url(#linear-gradient)"/>
+            <text id="_70_79_" data-name="70～
+79%" transform="translate(1022 979)" fill="#fced3f" font-size="16" font-family="PingFangSC-Medium, PingFang SC"
+                  font-weight="500">
+                <tspan x="-17.208" y="0">70～</tspan>
+                <tspan x="-17.128" y="17">79%</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

v2tv/src/assets/imgs/levelIcon/i80.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92"
+     viewBox="0 0 155 92">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.379" y1="0.034" x2="0.881" y2="0.845"
+                        gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#ffd4a2"/>
+            <stop offset="0.103" stop-color="#ff6200"/>
+            <stop offset="0.823" stop-color="#ff8900"/>
+            <stop offset="1" stop-color="#ea9713"/>
+        </linearGradient>
+    </defs>
+    <g id="心肺训练" transform="translate(-954 -420)">
+        <rect id="矩形_127" data-name="矩形 127" width="155" height="92" rx="12" transform="translate(954 420)" fill="#fff"
+              opacity="0.101"/>
+        <g id="组_525" data-name="组 525" transform="translate(434.146 -517)">
+            <g id="矩形_123" data-name="矩形 123" transform="translate(594.854 966)" fill="none" stroke="#ff6200"
+               stroke-width="2">
+                <path d="M0,0H56.5A16.5,16.5,0,0,1,73,16.5v0A16.5,16.5,0,0,1,56.5,33H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+                      stroke="none"/>
+                <path d="M1.174,1H56.5A15.5,15.5,0,0,1,72,16.5v0A15.5,15.5,0,0,1,56.5,32H1.174A.174.174,0,0,1,1,31.826V1.174A.174.174,0,0,1,1.174,1Z"
+                      fill="none"/>
+            </g>
+            <text id="心肺训练-2" data-name="心肺训练" transform="translate(629.427 987)" fill="#fff" font-size="14"
+                  font-family="PingFangSC-Medium, PingFang SC" font-weight="500">
+                <tspan x="-28" y="0">心肺训练</tspan>
+            </text>
+        </g>
+        <g id="组_517" data-name="组 517" transform="translate(-145.773 -518.365)">
+            <path id="排除_7" data-name="排除 7"
+                  d="M34.216,73.426a17.026,17.026,0,0,1-8.5-2.277l-17.2-9.931a17,17,0,0,1-8.5-14.709L0,26.731A17,17,0,0,1,8.512,11.988L25.648,2.113a17,17,0,0,1,16.988.007l17.2,9.93a17,17,0,0,1,8.5,14.709l.016,19.778A17,17,0,0,1,59.84,61.28L42.7,71.156A17.026,17.026,0,0,1,34.216,73.426ZM33.744,9.658a17.033,17.033,0,0,0-8.338,2.186l-8.53,4.8a16.994,16.994,0,0,0-8.662,15l.107,9.787a17,17,0,0,0,8.5,14.536l9.288,5.362a17,17,0,0,0,16.837.093l8.53-4.8a17,17,0,0,0,8.662-15l-.107-9.788a17,17,0,0,0-8.5-14.535l-9.288-5.363A17.021,17.021,0,0,0,33.744,9.658Z"
+                  transform="translate(1109.773 947.523)" fill="url(#linear-gradient)"/>
+            <text id="_80_89_" data-name="80～
+89%" transform="translate(1144 979)" fill="#ffbd53" font-size="16" font-family="PingFangSC-Medium, PingFang SC"
+                  font-weight="500">
+                <tspan x="-17.6" y="0">80～</tspan>
+                <tspan x="-17.52" y="17">89%</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

v2tv/src/assets/imgs/levelIcon/i90.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92"
+     viewBox="0 0 155 92">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.379" y1="0.034" x2="0.881" y2="0.845"
+                        gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#f46d79"/>
+            <stop offset="0.103" stop-color="#d11122"/>
+            <stop offset="0.823" stop-color="#d11122"/>
+            <stop offset="1" stop-color="#ff7f12"/>
+        </linearGradient>
+    </defs>
+    <g id="峰值锻炼" transform="translate(-1173 -420)">
+        <rect id="矩形_128" data-name="矩形 128" width="155" height="92" rx="12" transform="translate(1173 420)" fill="#fff"
+              opacity="0.101"/>
+        <g id="组_526" data-name="组 526" transform="translate(653.146 -517)">
+            <g id="矩形_123" data-name="矩形 123" transform="translate(594.854 966)" fill="none" stroke="#d11122"
+               stroke-width="2">
+                <path d="M0,0H56.5A16.5,16.5,0,0,1,73,16.5v0A16.5,16.5,0,0,1,56.5,33H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+                      stroke="none"/>
+                <path d="M1.174,1H56.5A15.5,15.5,0,0,1,72,16.5v0A15.5,15.5,0,0,1,56.5,32H1.174A.174.174,0,0,1,1,31.826V1.174A.174.174,0,0,1,1.174,1Z"
+                      fill="none"/>
+            </g>
+            <text id="峰值锻炼-2" data-name="峰值锻炼" transform="translate(629.427 987)" fill="#fff" font-size="14"
+                  font-family="PingFangSC-Medium, PingFang SC" font-weight="500">
+                <tspan x="-28" y="0">峰值锻炼</tspan>
+            </text>
+        </g>
+        <g id="组_518" data-name="组 518" transform="translate(-48.536 -518.365)">
+            <path id="排除_8" data-name="排除 8"
+                  d="M34.216,73.426a17.026,17.026,0,0,1-8.5-2.277l-17.2-9.931a17,17,0,0,1-8.5-14.709L0,26.731A17,17,0,0,1,8.512,11.988L25.648,2.113a17,17,0,0,1,16.988.007l17.2,9.93a17,17,0,0,1,8.5,14.709l.016,19.778A17,17,0,0,1,59.84,61.28L42.7,71.156A17.026,17.026,0,0,1,34.216,73.426ZM33.744,9.658a17.033,17.033,0,0,0-8.338,2.186l-8.53,4.8a16.994,16.994,0,0,0-8.662,15l.107,9.787a17,17,0,0,0,8.5,14.536l9.288,5.362a17,17,0,0,0,16.837.093l8.53-4.8a17,17,0,0,0,8.662-15l-.107-9.788a17,17,0,0,0-8.5-14.535l-9.288-5.363A17.021,17.021,0,0,0,33.744,9.658Z"
+                  transform="translate(1231.536 947.523)" fill="url(#linear-gradient)"/>
+            <text id="_90_" data-name="≥
+90%" transform="translate(1266 978)" fill="#ff5d6c" font-size="15" font-family="PingFangSC-Medium, PingFang SC"
+                  font-weight="500">
+                <tspan x="-5.887" y="0">≥</tspan>
+                <tspan x="-16.425" y="16">90%</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

v2tv/src/assets/imgs/power/100p.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.933" height="19.963" viewBox="0 0 35.933 19.963">
+    <path id="_100_" data-name="100%"
+          d="M3.993,25.969V13.992H29.966V25.969ZM33.936,14.99a2,2,0,0,1,2,2v5.989a2,2,0,0,1-2,2v2.5a2.5,2.5,0,0,1-2.5,2.5H2.5a2.4,2.4,0,0,1-1.762-.733A2.4,2.4,0,0,1,0,27.467V12.495a2.4,2.4,0,0,1,.733-1.762A2.4,2.4,0,0,1,2.5,10H31.441a2.5,2.5,0,0,1,2.5,2.5Zm0,7.985V16.986h-2V12.495a.481.481,0,0,0-.5-.5H2.5a.481.481,0,0,0-.5.5V27.467a.481.481,0,0,0,.5.5H31.441a.481.481,0,0,0,.5-.5V22.975Z"
+          transform="translate(0 -9.999)" fill="#fff"/>
+</svg>

v2tv/src/assets/imgs/power/25p.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.933" height="19.963" viewBox="0 0 35.933 19.963">
+    <g id="_25_" data-name="25%" transform="translate(-445.062 -276)">
+        <path id="Battery_2" data-name="Battery 2"
+              d="M33.936,14.99a2,2,0,0,1,2,2v5.989a2,2,0,0,1-2,2v2.5a2.5,2.5,0,0,1-2.5,2.5H2.5a2.4,2.4,0,0,1-1.762-.733A2.4,2.4,0,0,1,0,27.467V12.495a2.4,2.4,0,0,1,.733-1.762A2.4,2.4,0,0,1,2.5,10H31.441a2.5,2.5,0,0,1,2.5,2.5Zm0,7.985V16.986h-2V12.495a.481.481,0,0,0-.5-.5H2.5a.481.481,0,0,0-.5.5V27.467a.481.481,0,0,0,.5.5H31.441a.481.481,0,0,0,.5-.5V22.975Z"
+              transform="translate(445.062 266.001)" fill="#fff"/>
+        <rect id="矩形_244" data-name="矩形 244" width="6.5" height="12" transform="translate(449 279.981)" fill="#ff3445"/>
+    </g>
+</svg>

v2tv/src/assets/imgs/power/50p.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.933" height="19.963" viewBox="0 0 35.933 19.963">
+    <g id="_50_" data-name="50%" transform="translate(-501.062 -276)">
+        <path id="Battery_2" data-name="Battery 2"
+              d="M3.993,25.969V13.992h9.974V25.969ZM33.936,14.99a2,2,0,0,1,2,2v5.989a2,2,0,0,1-2,2v2.5a2.5,2.5,0,0,1-2.5,2.5H2.5a2.4,2.4,0,0,1-1.762-.733A2.4,2.4,0,0,1,0,27.467V12.495a2.4,2.4,0,0,1,.733-1.762A2.4,2.4,0,0,1,2.5,10H31.441a2.5,2.5,0,0,1,2.5,2.5Zm0,7.985V16.986h-2V12.495a.481.481,0,0,0-.5-.5H2.5a.481.481,0,0,0-.5.5V27.467a.481.481,0,0,0,.5.5H31.441a.481.481,0,0,0,.5-.5V22.975Z"
+              transform="translate(501.062 266.001)" fill="#fff"/>
+        <rect id="矩形_245" data-name="矩形 245" width="13" height="12" transform="translate(505 279.981)" fill="#ffe61f"/>
+    </g>
+</svg>

v2tv/src/assets/imgs/power/75p.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.933" height="19.963" viewBox="0 0 35.933 19.963">
+    <g id="_75_" data-name="75%" transform="translate(-557.062 -276)">
+        <path id="Battery_2" data-name="Battery 2"
+              d="M33.936,14.99a2,2,0,0,1,2,2v5.989a2,2,0,0,1-2,2v2.5a2.5,2.5,0,0,1-2.5,2.5H2.5a2.4,2.4,0,0,1-1.762-.733A2.4,2.4,0,0,1,0,27.467V12.495a2.4,2.4,0,0,1,.733-1.762A2.4,2.4,0,0,1,2.5,10H31.441a2.5,2.5,0,0,1,2.5,2.5Zm0,7.985V16.986h-2V12.495a.481.481,0,0,0-.5-.5H2.5a.481.481,0,0,0-.5.5V27.467a.481.481,0,0,0,.5.5H31.441a.481.481,0,0,0,.5-.5V22.975Z"
+              transform="translate(557.062 266.001)" fill="#fff"/>
+        <rect id="矩形_246" data-name="矩形 246" width="19" height="12" transform="translate(561 279.981)" fill="#fff"/>
+    </g>
+</svg>

v2tv/src/assets/imgs/stduents/calc.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38.001" viewBox="0 0 38 38.001">
+    <path id="卡路里"
+          d="M33,38H5a5.006,5.006,0,0,1-5-5V5A5.006,5.006,0,0,1,5,0H33a5.005,5.005,0,0,1,5,5V33A5.006,5.006,0,0,1,33,38ZM9.644,14.288h0a17.98,17.98,0,0,0-1.689,3.739,14.381,14.381,0,0,0-.362,8.323,10.852,10.852,0,0,0,3.92,5.85,7.717,7.717,0,0,0,2.593,1.266l0-.006a11.391,11.391,0,0,1,0-5.463,18,18,0,0,1,3.1-5.508,16.584,16.584,0,0,0,1.045,3.659,7.975,7.975,0,0,0,1.73,2.413,5.962,5.962,0,0,1,1.689,1.93,5.528,5.528,0,0,1,.4,2.413h.016a8.1,8.1,0,0,0,3.673-1.053,8.674,8.674,0,0,0,2.729-2.4,12.092,12.092,0,0,0,2.024-4.624,11.626,11.626,0,0,0,.045-5.289,9.986,9.986,0,0,0-1.7-3.637,10.393,10.393,0,0,0-3.045-2.774.024.024,0,0,1,0,.009,5.883,5.883,0,0,1-.683,1.88,5.486,5.486,0,0,1-1.367,1.408,10.8,10.8,0,0,0,.03-2.583A10.2,10.2,0,0,0,21.825,8.66a13.88,13.88,0,0,0-6.835-4.5l0,.006a12.716,12.716,0,0,1,.278,6.548c-.865,3.13-4.029,5.884-4.061,5.911a3.426,3.426,0,0,1-.644-.764c-.386-.574-.919-1.559-.924-1.569Z"
+          fill="#fff"/>
+</svg>

v2tv/src/assets/imgs/stduents/ck.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
+    <path id="CK图标"
+          d="M-2163,151h-28a5.006,5.006,0,0,1-5-5V118a5.006,5.006,0,0,1,5-5h28a5.005,5.005,0,0,1,5,5v28A5.006,5.006,0,0,1-2163,151Zm-21.137-27.288a6.674,6.674,0,0,0-5.1,2.076,8.252,8.252,0,0,0-1.938,5.829,7.861,7.861,0,0,0,1.928,5.594,6.494,6.494,0,0,0,4.921,2.046,6.449,6.449,0,0,0,3.994-1.194,6.629,6.629,0,0,0,2.251-3.656l-2.943-.933a4.489,4.489,0,0,1-1.251,2.42,3.054,3.054,0,0,1-2.082.77,3.343,3.343,0,0,1-2.666-1.21,6.333,6.333,0,0,1-1.025-4.061,5.909,5.909,0,0,1,1.041-3.886,3.437,3.437,0,0,1,2.713-1.2,3.2,3.2,0,0,1,2.055.677,3.2,3.2,0,0,1,1.113,1.846l3-.717a5.958,5.958,0,0,0-1.538-2.769A6.282,6.282,0,0,0-2184.137,123.712Zm14.2,8.234h0L-2165.8,139h3.927l-5.968-9.177,5.66-5.854h-4.081l-6.132,6.675v-6.675h-3.036V139h3.036v-4.542l2.46-2.511Z"
+          transform="translate(2196 -113)" fill="#fff"/>
+</svg>

v2tv/src/assets/imgs/stduents/fakepart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="840" height="362" viewBox="0 0 840 362">
+    <rect id="激活放松底色" width="840" height="362" rx="16" fill="#fff" opacity="0.08"/>
+</svg>

v2tv/src/assets/imgs/stduents/heart.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.998" height="48.921" viewBox="0 0 52.998 48.921">
+    <path id="md-heart"
+          d="M29.874,53.421l-3.843-3.466C12.384,37.426,3.375,29.294,3.375,19.164A14.411,14.411,0,0,1,17.95,4.5a15.675,15.675,0,0,1,11.924,5.6A15.675,15.675,0,0,1,41.8,4.5,14.411,14.411,0,0,1,56.373,19.164c0,10.13-9.009,18.262-22.656,30.791Z"
+          transform="translate(-3.375 -4.5)" fill="#fff"/>
+</svg>

v2tv/src/assets/imgs/stduents/sport.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
+    <path id="运动卡路里"
+          d="M-2163,151h-28a5.006,5.006,0,0,1-5-5V118a5.006,5.006,0,0,1,5-5h28a5.005,5.005,0,0,1,5,5v28A5.006,5.006,0,0,1-2163,151Zm-15.456-17.8a11.377,11.377,0,0,0-4.106.978l-4.016,1.611-2.279,8a20.312,20.312,0,0,0-.774,2.537,2.113,2.113,0,0,0,2.111,2.11,2.111,2.111,0,0,0,2.036-1.563,34.888,34.888,0,0,1,1.268-4.192c.759-2.017,2.007-4.62,3.643-5.569a1.612,1.612,0,0,1,.8-.248,1.16,1.16,0,0,1,.839.38c1.48,1.493,1.449,6.962,1.448,7.016a2.118,2.118,0,0,0,2.108,2.066,2.113,2.113,0,0,0,2.111-2.111c0-.025,0-.05,0-.076v-.034h.008l-.008-.086a33.874,33.874,0,0,0-1.223-7.743C-2175.258,134.181-2176.516,133.2-2178.456,133.2Zm7.7,4.786a7.7,7.7,0,0,0-.954,5.614,4.957,4.957,0,0,0,1.824,2.723,3.6,3.6,0,0,0,1.206.589.017.017,0,0,1,0-.006,5.3,5.3,0,0,1,0-2.539,8.489,8.489,0,0,1,1.441-2.564,7.691,7.691,0,0,0,.487,1.7,3.709,3.709,0,0,0,.8,1.123,2.78,2.78,0,0,1,.787.9,2.576,2.576,0,0,1,.187,1.123h.008c.125,0,3.084-.043,3.923-3.762a4.99,4.99,0,0,0-.773-4.155,4.884,4.884,0,0,0-1.417-1.291.022.022,0,0,1,0,.009,2.756,2.756,0,0,1-.317.87,2.548,2.548,0,0,1-.636.655,5.136,5.136,0,0,0-.9-3.612,6.437,6.437,0,0,0-3.18-2.1.016.016,0,0,1,0,.006,5.9,5.9,0,0,1,.128,3.043,6.787,6.787,0,0,1-1.891,2.751,1.65,1.65,0,0,1-.3-.356C-2170.506,138.452-2170.755,137.995-2170.758,137.989Zm-20.457-19.963a1.761,1.761,0,0,0-1.76,1.759,1.77,1.77,0,0,0,.357,1.06c.4.63.763,1.207,1.117,1.766l.042.065.148.233c3.121,4.9,4.413,6.934,4.733,11.674l10.462-3.237.737-5.167,1.065-4.451-.011-.008a1.769,1.769,0,0,0,.418-1.138,1.761,1.761,0,0,0-1.759-1.759c-.651,0-1.134.86-1.423,1.373,0,.022-.4,2.23-1.772,3.055-.114.068-.24.146-.4.245a5.386,5.386,0,0,1-2.913,1.077,4.959,4.959,0,0,1-2.162-.554c-2.562-1.232-5.22-4.908-5.332-5.064A1.753,1.753,0,0,0-2191.215,118.026Zm9.251-2.462a3.523,3.523,0,0,0-3.52,3.517,3.523,3.523,0,0,0,3.52,3.517,3.52,3.52,0,0,0,3.515-3.517A3.52,3.52,0,0,0-2181.964,115.564Z"
+          transform="translate(2196 -113)" fill="#fff"/>
+</svg>

v2tv/src/assets/imgs/stduents/star.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72.049" height="94.578" viewBox="0 0 72.049 94.578">
+    <g id="组_743" data-name="组 743" transform="translate(-1055 -288)">
+        <path id="多边形_17" data-name="多边形 17"
+              d="M14.643,4.645a2,2,0,0,1,3.714,0l2.306,5.769a2,2,0,0,0,1.681,1.25l6.1.539a2,2,0,0,1,1.168,3.473l-4.78,4.338a2,2,0,0,0-.608,1.916l1.416,6.349A2,2,0,0,1,22.618,30.4l-5.044-3.212a2,2,0,0,0-2.148,0L10.382,30.4A2,2,0,0,1,7.355,28.28l1.416-6.349a2,2,0,0,0-.608-1.916l-4.78-4.338A2,2,0,0,1,4.552,12.2l6.1-.539a2,2,0,0,0,1.681-1.25Z"
+              transform="translate(1055 303.999) rotate(-29)" fill="#f5ec00"/>
+        <path id="多边形_17-2" data-name="多边形 17"
+              d="M13.143,4.645a2,2,0,0,1,3.714,0l1.886,4.719a2,2,0,0,0,1.681,1.25l5.023.444a2,2,0,0,1,1.168,3.473l-3.959,3.594a2,2,0,0,0-.608,1.916l1.169,5.24A2,2,0,0,1,20.191,27.4l-4.117-2.622a2,2,0,0,0-2.148,0L9.809,27.4A2,2,0,0,1,6.782,25.28l1.169-5.24a2,2,0,0,0-.608-1.916L3.384,14.53a2,2,0,0,1,1.168-3.473l5.023-.444a2,2,0,0,0,1.681-1.25Z"
+              transform="translate(1082.896 329.411) rotate(-14)" fill="#f5ec00"/>
+        <path id="多边形_17-3" data-name="多边形 17"
+              d="M10.143,4.645a2,2,0,0,1,3.714,0L14.9,7.263a2,2,0,0,0,1.681,1.25l2.863.253a2,2,0,0,1,1.168,3.473l-2.319,2.1a2,2,0,0,0-.608,1.916l.674,3.021A2,2,0,0,1,15.337,21.4l-2.263-1.441a2,2,0,0,0-2.148,0L8.663,21.4A2,2,0,0,1,5.636,19.28l.674-3.021A2,2,0,0,0,5.7,14.343l-2.319-2.1A2,2,0,0,1,4.552,8.765l2.863-.253A2,2,0,0,0,9.1,7.263Z"
+              transform="translate(1102.634 358.582) rotate(-1)" fill="#f5ec00"/>
+    </g>
+</svg>

v2tv/src/assets/imgs/stduents/vip.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g id="组_717" data-name="组 717" transform="translate(-391 -544)">
+        <circle id="椭圆_1" data-name="椭圆 1" cx="16" cy="16" r="16" transform="translate(391 544)" fill="#f5c600"/>
+        <text id="V" transform="translate(407 568)" fill="#fff" font-size="22"
+              font-family="PingFangSC-Regular, PingFang SC">
+            <tspan x="-6.897" y="0">V</tspan>
+        </text>
+    </g>
+</svg>

v2tv/src/components/levelIcon.vue

@@ -1,241 +1,92 @@
 <template>
-    <div  :class="[{'levelIconTV':runVersion == 'test'},{'levelIconOutDoor':runVersion != 'test'},{'levelIcon':true}]">
-        <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>
+  <div :class="[{'levelIconTV':runVersion == 'test'},{'levelIconOutDoor':runVersion != 'test'},{'levelIcon':true}]">
+    <ul>
+      <li>
+        <img src="../assets/imgs/levelIcon/i39.svg" alt="">
+      </li>
+      <li>
+        <img src="../assets/imgs/levelIcon/i40.svg" alt="">
+      </li>
+      <li>
+        <img src="../assets/imgs/levelIcon/i55.svg" alt="">
+      </li>
+      <li>
+        <img src="../assets/imgs/levelIcon/i70.svg" alt="">
+      </li>
+      <li>
+        <img src="../assets/imgs/levelIcon/i80.svg" alt="">
+      </li>
+      <li>
+        <img src="../assets/imgs/levelIcon/i90.svg" alt="">
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
-    import '../Global'
-    export default {
-      data(){
-        return {
-          runVersion:runVersion
-        }
-      }
-    }
-</script>
-
-<style scoped>
-    .levelIcon {
-      width: 100%;
-      overflow: hidden;
-      display: block;
-      margin: 0 auto;
-      height: 5rem;
-    }
-    .levelIconOutDoor {
-      position: absolute;
-      bottom: 0.1rem;
-      padding-bottom: 5px;
-    }
-    .levelIconTV {
-      position: absolute;
-      bottom: 0.1rem;
-      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;
-    }
+import '../Global'
 
-    .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 #DFB200 ;
-        box-shadow: 0px 0px 5px #DFB200 ;
-    }
-
-    .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;
+export default {
+  data() {
+    return {
+      runVersion: runVersion
     }
+  }
+}
+</script>
 
-    .levelIcon ul {
-        width: 98%;
-    }
+<style lang="scss" scoped>
+@mixin cube {
+  width: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.levelIcon {
+  @include cube;
+  height: 1rem;
+}
+
+.levelIconOutDoor {
+  position: absolute;
+  bottom: 0.1rem;
+  left: 0;
+  right: 0;
+  padding-bottom: 5px;
+}
+
+.levelIconTV {
+  position: absolute;
+  bottom: 0.1rem;
+  left: 0;
+  right: 0;
+  padding-bottom: 5px;
+}
+
+.levelIcon ul {
+  width: 96%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  margin-left: 2%;
+
+  li {
+    width: 14.666666666667%;
+    height: 2rem;
+    overflow: hidden;
+    float: left;
+    padding-left: 2.4%;
+  }
+
+  li:nth-child(1) {
+    padding-left: 0;
+  }
+
+  img {
+    @include cube;
+  }
+}
 
-    .levelIcon li em {
-        width: 45%;
-        height: 30px;
-        line-height: 30px;
-        font-size: 0.2rem;
-        margin-top: 11%;
-        margin-left: 3%;
-        float: left;
-    }
 </style>

v2tv/src/components/power.vue

@@ -1,12 +1,9 @@
 <template>
     <div class="powerContainer" v-if="parseInt(curPower) > 0">
-        <img src="../static/img/power/power_full.svg" alt="" v-if="parseInt(curPower) >= 81">
-        <img src="../static/img/power/power_half.svg" alt="" v-if="parseInt(curPower) >= 41 && parseInt(curPower) < 81">
-        <img src="../static/img/power/power_low.svg" alt=""  v-if="parseInt(curPower) >= 21 && parseInt(curPower) < 40">
-        <img src="../static/img/power/power_none.svg" alt="" v-if="parseInt(curPower) <= 20">
-        <!--<span>{{curPower}}-->
-        <!--<em>%</em>-->
-        <!--</span>-->
+      <img src="../assets/imgs/power/100p.svg" alt="" v-if="parseInt(curPower) >= 81">
+      <img src="../assets/imgs/power/75p.svg" alt="" v-if="parseInt(curPower) >= 41 && parseInt(curPower) < 81">
+      <img src="../assets/imgs/power/50p.svg" alt="" v-if="parseInt(curPower) >= 21 && parseInt(curPower) < 40">
+      <img src="../assets/imgs/power/25p.svg" alt="" v-if="parseInt(curPower) <= 20">
     </div>
 </template>
 
@@ -17,23 +14,26 @@
     }
 </script>
 
-<style scoped>
-    .powerContainer {
-        float: right!important;
-        color: #fff;
-        font-size: 0.23rem;
-        width: 0.55rem!important;
-        overflow: hidden;
-    }
-    .powerContainer img {
-        width: 0.33rem;
-        line-height: 0.3rem;
-    }
-    .powerContainer span {
-        display: inline-block;
-        line-height: 0.2rem;
-    }
-    .powerContainer em {
-        font-size: 0.15rem;
-    }
+<style lang="scss" scoped>
+.powerContainer {
+  float: right !important;
+  color: #fff;
+  font-size: 0.23rem;
+  width: 0.55rem !important;
+  overflow: hidden;
+
+  img {
+    width: 0.33rem;
+    line-height: 0.3rem;
+  }
+
+  span {
+    display: inline-block;
+    line-height: 0.2rem;
+  }
+
+  em {
+    font-size: 0.15rem;
+  }
+}
 </style>

v2tv/src/components/student.vue

@@ -2,24 +2,20 @@
   <ul>
     <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
         v-if="students.length > 0">
-      <div class="ltLi" v-if="students.length == 1"></div>
       <div class="centerLi">
         <div class="topLi">
           <div class="human">
-                                <span class="name">
-                                    <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>
+              <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="head">
-              <img :src="s.Head" alt="" v-if="s.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"/>
@@ -30,6 +26,11 @@
                 <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>
@@ -58,29 +59,32 @@
               </div>
             </div>
             <div class="rhj">
-              <img src="../static/img/heart.svg" class=""/>
+              <img src="../assets/imgs/stduents/heart.svg" class=""/>
             </div>
           </div>
         </div>
         <div class="bottomLi">
           <div class="btcla">
-            <img src="../static/img/s1.svg"/>
+            <img src="../assets/imgs/stduents/calc.svg" class=""/>
             <span>{{ s.Cle |fmtInt }}</span>
           </div>
           <div class="btck">
-            <img src="../static/img/s2.svg"/>
+            <img src="../assets/imgs/stduents/sport.svg" class=""/>
             <span>{{ s.PureCalorieNoVo2   |fmtInt }}</span>
           </div>
           <div class="step">
-            <img src="../static/img/ck.svg"/>
+            <img src="../assets/imgs/stduents/ck.svg" class=""/>
             <span>{{ s.Ck  |fmtFloat }}</span>
           </div>
         </div>
       </div>
-      <div class="rtLi" v-if="students.length == 1"></div>
-      <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
     </li>
+    <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>
 
@@ -88,7 +92,30 @@
 import power from '@/components/power'
 
 export default {
+  data() {
+    return {
+      studentsFake: 0
+    }
+  },
   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) {
@@ -127,7 +154,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 ul, li {
   list-style: none;
@@ -136,27 +163,42 @@ ul, li {
 }
 
 .blue .centerLi {
-  background: #028FE1;
+  border-radius: 16px;
+  background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
 }
 
 .violet .centerLi {
-  background: #6D26FA;
+  border-radius: 16px;
+  background: linear-gradient(#3500ac 0%, #3500ac 33%, #4c53fc 100%);
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
 }
 
 .green .centerLi {
-  background: #059F00;
+  border-radius: 16px;
+  background: linear-gradient(#05a200 0%, #05a200 30.05%, #31d92d 100%);
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
+
 }
 
 .yellow .centerLi {
-  background: #DFB200;
+  border-radius: 16px;
+  background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
 }
 
 .brown .centerLi {
-  background: #EA8813;
+  border-radius: 16px;
+  background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
+
 }
 
 .red .centerLi {
-  background: #CF1122;
+  border-radius: 16px;
+  background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
+
 }
 
 
@@ -262,9 +304,7 @@ ul, li {
   overflow: hidden;
   display: block;
   margin: 0 auto;
-  border: 2px solid #fff;
   border-radius: 33rem;
-  /*box-shadow: 0px 0px 5px #fff;*/
 }
 
 s {
@@ -309,6 +349,10 @@ em {
   text-indent: 0;
 }
 
+.human .name .namert {
+  float: right;
+}
+
 .lcla span {
   position: relative;
   float: left;
@@ -1861,5 +1905,47 @@ em {
   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>

v2tv/src/components/student2.vue

@@ -0,0 +1,1865 @@
+<template>
+  <ul>
+    <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
+        v-if="students.length > 0">
+      <div class="ltLi" v-if="students.length == 1"></div>
+      <div class="centerLi">
+        <div class="topLi">
+          <div class="human">
+                                <span class="name">
+                                    <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>
+      <div class="rtLi" v-if="students.length == 1"></div>
+      <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
+    </li>
+
+  </ul>
+</template>
+
+<script>
+import power from '@/components/power'
+
+export default {
+  props: ['students', 'studentsClassName'],
+  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 parseFloat(val).toFixed(2);
+        return parseInt(val);
+      }
+    },
+    max100(val) {
+      if (val <= 100) {
+        return val
+      } else {
+        return 100
+      }
+    }
+  },
+  components: {
+    power
+  }
+}
+</script>
+
+<style scoped>
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.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*/
+
+.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%;
+  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 .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;
+}
+
+.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>

v2tv/src/views/Main.vue

@@ -37,7 +37,7 @@ export default {
   data() {
     return {
       eqSn: '30:9C:23:0C:8B:1E',
-      pageStyle: RandomBg(),
+      pageStyle: 'bgStyleMain',
       trueDate: true,//真实数据 true false
       times: 1,
       thisClassName: '',

v2tv/src/views/Main2.vue

@@ -0,0 +1,388 @@
+<template>
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <!--    学生列表-->
+    <div class="userList">
+      <student :students="students" :students-class-name="studentsClassName"></student>
+    </div>
+    <!--图示-->
+    <levelIcon></levelIcon>
+    <!--    突破纪录-->
+    <newRecord :toper-info="toperInfo"></newRecord>
+    <!--    欢迎新同学-->
+    <newStudent :student-info="studentInfo"></newStudent>
+  </div>
+</template>
+
+<script>
+import Headside from '@/components/Headside'
+import newRecord from '@/components/newRecord'
+import newStudent from '@/components/newStudent'
+import levelIcon from '@/components/levelIcon'
+import student from '@/components/student'
+import
+{
+  getHello,
+  getClassStat,
+  getRecordBreak,
+  getNewUser
+} from '@/api/getApiRes'
+
+import '../libs/rem';
+import '../Global'
+
+let qs = require('qs');
+
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      times: 1,
+      thisClassName: '',
+      studentsClassName: [],
+      students: [],
+      single: [],
+      dialogVisible: false,
+      serachBtnStatus: false,
+      dialogMsg: '',
+      imgsrc: '../static/img/people/',
+      totalTime: 30,
+      studentTime: 15,
+      toperInfo: {
+        dialogVisible: false,
+        toper: {},
+      },
+      studentInfo: {
+        dialogVisible: false,
+        Rs: [],
+        percent: 0
+      },
+      fakeEgg: {
+        Rs: {
+          "DuId": 37,
+          "UserId": 0,
+          "UserName": "郑伟",
+          "Sex": 1,
+          "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
+          "Cle": 400,
+          "CleTitle": "个人单次卡路里记录",
+          "CleUnit": "千卡",
+          "CkTitle": "个人单次CK记录",
+          "Ck": 99.9,
+          "CkUnit": "CK值",
+        }
+      },
+      mainTimer: null,
+      timer2: null,
+    }
+  },
+  mounted() {
+    // this.$router.push({path: '/2pkRank'});
+
+    if (this.trueDate) {
+      this.init();
+    } else {
+      // 彩蛋
+      // this.OpenEgg(this.fakeEgg);
+      // 1 2 4 6 9 10 13 16 21 24
+      let Rs = fakeNews(33);
+      this.giveClassName(Rs);
+      this.students = Rs;
+      // this.createNewStudent();
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/main') {
+        if (this.trueDate) {
+          this.init();
+        } else {
+          this.students = fakeNews(2);
+          this.giveClassName(this.students);
+          // this.createEgg(this.students[5]);
+        }
+      } else {
+        clearInterval(this.mainTimer);
+        clearInterval(this.timer2);
+        clearInterval(this.timer3);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.mainTimer);
+    clearInterval(this.timer2);
+    clearInterval(this.timer3);
+    this.mainTimer = null;
+    this.timer2 = null;
+    this.timer3 = null;
+  },
+  methods: {
+    init() {
+      // console.log(headTest);
+      this.GetgetUserList();
+      this.createEgg();
+      this.createNewStudent();
+      this.curgetClassStat();
+
+      this.mainTimer = setInterval(() => {
+        // this.$router.push({path: '/'});
+        this.GetgetUserList();
+        this.curgetClassStat();
+      }, 1000);
+
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 31000);
+
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 6000);
+    },
+    alertInfo(info) {
+      alert(info);
+    },
+    // 启动一个成就彩蛋
+    createEgg() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getRecordBreak(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 欢迎新学生时不显示彩蛋
+          if (that.studentInfo.dialogVisible == true) {
+            console.log('正在显示新学生');
+            return false
+          } else {
+            this.OpenEgg(json);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+        }
+      })
+    },
+    // 欢迎新同学
+    createNewStudent() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getNewUser(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('来新生了');
+          // 显示彩蛋时不欢迎新学生
+          if (that.toperInfo.dialogVisible == true) {
+            console.log('正在显示彩蛋');
+            return false
+          } else {
+            console.log(json.Rs);
+            that.OpenStudent(json.Rs);
+            // OpenStudent(json.Rs,that);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+        }
+      })
+    },
+    OpenEgg(msg) {
+      this.toperInfo.toper = msg.Rs;
+      this.toperInfo.dialogVisible = true;
+      // 倒计时5秒自动关闭
+      let that = this;
+      this.totalTime = 30;
+      let clock = window.setInterval(() => {
+        this.totalTime--;
+        if (parseInt(this.totalTime) < 0) {
+          that.toperInfo.dialogVisible = false;
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    OpenStudent(msg) {
+      let that = this;
+      that.studentInfo.Rs = msg;
+      that.studentInfo.dialogVisible = true;
+      this.studentInfo.percent = 0;
+      // 倒计时5秒自动关闭
+      this.studentTime = 15;
+      let clock = window.setInterval(() => {
+        this.studentTime--;
+        let num = (15 - this.studentTime) / 15 * 100;
+        this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
+        console.log('num' + num);
+        if (parseInt(this.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false;
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getHello(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.students = json.Rs;
+          that.giveClassName(json.Rs);
+        } else {
+          // 已下课
+          if (json.Code == '999') {
+            that.students = ""
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    curgetClassStat() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getClassStat(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 没开课
+          if (json.ClassOn == 0) {
+            console.log("下课了");
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课threepk
+            switch (parseInt(json.dp)) {
+              case 0:
+                that.$router.push({path: '/rank'});
+                break;
+              case 1:
+                that.$router.push({path: '/'});
+                break;
+              case 2:
+                that.$router.push({path: '/pk'});
+                break;
+              case 3:
+                that.$router.push({path: '/threepk'});
+                break;
+            }
+          }
+        } else {
+          console.log("已上课");
+        }
+      })
+    },
+    // 给每一个数据加类名，一次遍历全部赋值
+    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,
+        }
+      }
+    },
+  },
+  components: {
+    Headside, levelIcon, newRecord, newStudent, student
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+//@import "../assets/css/bg.css";
+@import "../assets/css/bg.scss";
+
+* {
+  font-family: vista;
+}
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  overflow-y: scroll;
+}
+
+</style>

v2tv/src/views/Wait.vue

@@ -14,7 +14,7 @@
         <ul>
           <li v-for="(s,i) in rt[2].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
             <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
             <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
@@ -41,13 +41,14 @@
           <!--               hero 英雄榜-->
           <h5>英雄榜</h5>
           <ul>
-            <li v-for="(s,i) in 3">
+            <li v-for="(s,i) in bottom[1].Result">
               <div class="person">
-                <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像">
-                <span class="name">欧阳小枫</span>
+                <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
+                <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+                <span class="name">{{ s.UserName }}</span>
                 <div class="calcHero">
                   <img src="../assets/imgs/wait/calcIcon.svg" alt="">
-                  <em>3920</em>
+                  <em>{{ s.Values }}</em>
                 </div>
               </div>
               <span class="sign">
@@ -73,7 +74,7 @@
         <ul>
           <li v-for="(s,i) in rt[3].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
             <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
             <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
@@ -98,7 +99,7 @@
         <ul>
           <li v-for="(s,i) in rt[0].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
             <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
             <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
@@ -125,13 +126,14 @@
           <!--               最佳会员-->
           <h5>最佳会员</h5>
           <ul>
-            <li v-for="(h,index) in 3">
+            <li v-for="(s,index) in bottom[1].Result">
               <div class="person">
-                <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像">
-                <span class="name">欧阳小枫</span>
+                <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
+                <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+                <span class="name">{{ s.UserName }}</span>
                 <div class="calcHero">
                   <img src="../assets/imgs/wait/calcIcon.svg" alt="">
-                  <em>3920</em>
+                  <em>{{ s.Values }}</em>
                 </div>
                 <i>{{ index + 1 }}</i>
               </div>
@@ -151,7 +153,7 @@
         <ul>
           <li v-for="(s,i) in rt[1].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
             <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
             <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
@@ -211,6 +213,7 @@ export default {
         }
       ],
       rt: [],
+      bottom: [],
     }
   },
   mounted() {
@@ -310,11 +313,13 @@ export default {
         eqSn: localStorage.eqSn,
         dispNum: 3
       };
+      console.log(331);
       let postdata = qs.stringify(param);
       HerosRankingQuery(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
           that.bottom = json.Rs;
+          console.log(that.bottom);
         } else {
           if (json.Code == 4002) {
           } else {