v2.2.5

src/Global.js

@@ -5,19 +5,24 @@ companyInfo = {
     year: new Date().getFullYear(),
 };
 
+// 本机测试 TV端映射到本机进行测试
+// runVersion = 'localtest';    //tmp mod
+
 // 当前版本   演示版
 // runVersion = 'test';
+
 // 户外版本
 // runVersion = 'outDoor';
-// normal
+
+// 正式版 normal
 runVersion = 'normal';
 
 // headapi = process.env.NODE_ENV === 'development' ? '/api/' : '../';
-// headapi = '/api/';
-// headapi = 'http://192.168.0.62:9000/';//从郑伟那里获得数据源
-// headapi = 'http://192.168.0.3:9000/';//从郑伟那里获得数据源
+// headapi = 'http://127.0.0.1/';           //从本机获得数据源
+// headapi = 'http://192.168.0.62:9000/';   //从郑伟那里获得数据源
+// headapi = 'http://192.168.0.3:9000/';    //从测试服务器那里获得数据源 tmp mod
 
-headapi = 'http://221.214.111.254:9000/';//实际场馆默认数据源
+headapi = 'http://bswlt.beswell.com:9000/';   //实际场馆默认数据源 
 
 // 七牛云imgsrc
 imgUrl = "http://qjzpcd34v.hb-bkt.clouddn.com";

src/Mock/index.js

@@ -129,18 +129,18 @@ let testStudent = function (num, team, mustbeTeamOne) {
             Age: 13,
             AvgHr: 0,
             BeginTime: 1608188579,
-            Ck: "@float(1,25,0,1)",
+            Ck: "@float(10,25,0,1)",
             // Ck: "@float(0,0,0,0)",
             Cle: "@float(1,1500,0,1)",
-            EI: "@float(1,1000,0,1)",
+            EI: "@float(1,3000,0,1)",
             DuId: 119,
             EndTime: 0,
             GroupNo: group,
             Head: require('../static/img/testhead.png'),
             Height: 160,
             HrId: 41,
-            IsBirthday: 1,
-            IsBreaking: 1,
+            IsBirthday: "@integer(0, 1)",
+            IsBreaking: "@integer(0, 1)",
             IsNewUser: 0,
             MaxHr: 80,
             PowerPercent: "@integer(10, 100)",
@@ -160,14 +160,14 @@ let testStudent = function (num, team, mustbeTeamOne) {
             UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
             Weight: 50,
             // ActivePercent: "@integer(1, 200)",
-            ActivePercent: "@integer(10, 100)",
+            ActivePercent: "@integer(10, 150)",
             bmrMSjRmrcb: 66.00000000000001,
             FormatCk: "@integer(1, 50)",
             // FormatCk: "@integer(0, 0)",
             isAlive: true,
             isFinish: false,
             isOver: false,
-            IsPrivate: 0,
+            IsPrivate: "@integer(0, 1)",
             lastPushDataTime: 1608188947175,
             lastUpdateTime: 1608188945184,
             queuePushData: [],
@@ -403,7 +403,8 @@ if (t == 1) {
     // let Mockapi = 'http://221.214.111.254:9000/';
 
     // if (runVersion == 'test') {
-    let curheadapi = 'http://cal.beswell.com:85/DataTransfer/';
+    // let curheadapi = 'http://cal.beswell.com:85/DataTransfer/';
+    let curheadapi = 'http://127.0.0.1/';
     // }
     // if (runVersion == 'outDoor') {
     //     curheadapi = 'http://192.168.0.105:9000/';
@@ -411,7 +412,7 @@ if (t == 1) {
 
     // 0: 下课 团课/私教/PK 的排名
     let LessonClass = 3;
-    let LessonDp = 3;
+    let LessonDp = 0;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk
@@ -421,20 +422,20 @@ if (t == 1) {
         // 上团课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(1, 1));//true
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(17, 2)); //
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(25, 1));//true
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(9, 2)); //
     } 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(9, 1,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(12, 1,));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(6, 2,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(10, 1,));
     } 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(2, 3,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(13, 3,));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(5, 3,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(4, 3,));
         Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(1, 2));
         Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(1, 3));
     } else if (LessonClass == 0) {

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

@@ -0,0 +1,23 @@
+<svg id="激活放松-图例" 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>
+  <rect id="矩形_114" data-name="矩形 114" width="155" height="92" rx="12" fill="#fff" opacity="0.101"/>
+  <g id="组_522" data-name="组 522" transform="translate(-335 -937)">
+    <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="激活放松" 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(-334.383 -936.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="18" font-family="PingFangSC-Medium, PingFang SC" font-weight="500"><tspan x="-7.065" y="0">≤</tspan><tspan font-size="16"><tspan x="-17.52" y="16">39%</tspan></tspan></text>
+  </g>
+</svg>

src/assets/imgs/levelIcon/bk/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>

src/assets/imgs/levelIcon/i39_old.svg → src/assets/imgs/levelIcon/bk/i55.svg

@@ -3,37 +3,37 @@
     <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"/>
+            <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(-78 -420)">
-        <rect id="矩形_114" data-name="矩形 114" width="155" height="92" rx="12" transform="translate(78 420)" fill="#fff"
+    <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="组_522" data-name="组 522" transform="translate(-257 -517)">
-            <g id="矩形_122" data-name="矩形 122" transform="translate(410 966)" fill="none" stroke="#028fe1"
+        <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(446 987)" fill="#fff" font-size="14"
+            <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>
+                <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"
+        <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(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"
+                  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="-6.28" y="0">≤</tspan>
-                <tspan x="-17.52" y="16">39%</tspan>
+                <tspan x="-17.6" y="0">55～</tspan>
+                <tspan x="-17.52" y="17">69%</tspan>
             </text>
         </g>
     </g>

src/assets/imgs/levelIcon/bk/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>

src/assets/imgs/levelIcon/i90_old.svg → src/assets/imgs/levelIcon/bk/i80.svg

@@ -3,37 +3,37 @@
     <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"/>
+            <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(-1173 -420)">
-        <rect id="矩形_128" data-name="矩形 128" width="155" height="92" rx="12" transform="translate(1173 420)" fill="#fff"
+    <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="组_526" data-name="组 526" transform="translate(653.146 -517)">
-            <g id="矩形_123" data-name="矩形 123" transform="translate(594.854 966)" fill="none" stroke="#d11122"
+        <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"
+            <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>
+                <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"
+        <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(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"
+                  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="-5.887" y="0">≥</tspan>
-                <tspan x="-16.425" y="16">90%</tspan>
+                <tspan x="-17.6" y="0">80～</tspan>
+                <tspan x="-17.52" y="17">89%</tspan>
             </text>
         </g>
     </g>

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

@@ -0,0 +1,23 @@
+<svg id="峰值锻炼-图例" 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>
+  <rect id="矩形_128" data-name="矩形 128" width="155" height="92" rx="12" fill="#fff" opacity="0.101"/>
+  <g id="组_526" data-name="组 526" transform="translate(-519.854 -937)">
+    <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="峰值锻炼" 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(-1221.536 -938.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="18" font-family="PingFangSC-Medium, PingFang SC" font-weight="500"><tspan x="-7.065" y="0">≥</tspan><tspan font-size="15"><tspan x="-16.425" y="16">90%</tspan></tspan></text>
+  </g>
+</svg>

src/assets/imgs/levelIcon/i39.svg

@@ -1,4 +1,4 @@
-<svg id="激活放松-图例" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92" viewBox="0 0 155 92">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="92" viewBox="0 0 230 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"/>
@@ -7,17 +7,18 @@
       <stop offset="1" stop-color="#6fc6f8"/>
     </linearGradient>
   </defs>
-  <rect id="矩形_114" data-name="矩形 114" width="155" height="92" rx="12" fill="#fff" opacity="0.101"/>
-  <g id="组_522" data-name="组 522" transform="translate(-335 -937)">
-    <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 id="组_796" data-name="组 796" transform="translate(-174 -958)">
+    <rect id="矩形_114" data-name="矩形 114" width="230" height="92" rx="12" transform="translate(174 958)" fill="#fff" opacity="0.101"/>
+    <g id="组_795" data-name="组 795" transform="translate(0 0)">
+      <ellipse id="椭圆_3" data-name="椭圆 3" cx="31.5" cy="33" rx="31.5" ry="33" transform="translate(192 971)" fill="#002d48"/>
+      <g id="矩形_122" data-name="矩形 122" transform="translate(253 983)" fill="none" stroke="#028fe1" stroke-width="2">
+        <path d="M0,0H114a21,21,0,0,1,21,21v0a21,21,0,0,1-21,21H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+        <path d="M1.225,1H114a20,20,0,0,1,20,20v0a20,20,0,0,1-20,20H1.225A.225.225,0,0,1,1,40.775V1.225A.225.225,0,0,1,1.225,1Z" fill="none"/>
+      </g>
+      <text id="激活放松" transform="translate(320 1013)" fill="#fff" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">激活放松</tspan></text>
+      <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(190 967.157)" fill="url(#linear-gradient)"/>
+      <text id="_39_" data-name="≤
+39%" transform="translate(224.617 999.635)" fill="#58c2ff" font-size="16" font-family="SegoeUI, Segoe UI"><tspan x="-5.48" y="0">≤</tspan><tspan x="-15.172" y="16">39%</tspan></text>
     </g>
-    <text id="激活放松" 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(-334.383 -936.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="18" font-family="PingFangSC-Medium, PingFang SC" font-weight="500"><tspan x="-7.065" y="0">≤</tspan><tspan font-size="16"><tspan x="-17.52" y="16">39%</tspan></tspan></text>
   </g>
 </svg>

src/assets/imgs/levelIcon/i40.svg

@@ -1,40 +1,24 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="92" viewBox="0 0 230 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="组_797" data-name="组 797" transform="translate(-441 -958)">
+    <rect id="矩形_114" data-name="矩形 114" width="230" height="92" rx="12" transform="translate(441 958)" fill="#fff" opacity="0.101"/>
+    <g id="组_792" data-name="组 792" transform="translate(7 -0.208)">
+      <path id="路径_255" data-name="路径 255" d="M31.5,0C48.9,0,63,14.775,63,33S48.9,66,31.5,66,0,51.225,0,33,14.1,0,31.5,0Z" transform="translate(453 971)" fill="#16004a"/>
+      <g id="矩形_123" data-name="矩形 123" transform="translate(515 984)" fill="none" stroke="#613fef" stroke-width="2">
+        <path d="M0,0H112.5A20.5,20.5,0,0,1,133,20.5v0A20.5,20.5,0,0,1,112.5,41H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+        <path d="M1.219,1H112.5A19.5,19.5,0,0,1,132,20.5v0A19.5,19.5,0,0,1,112.5,40H1.219A.219.219,0,0,1,1,39.781V1.219A.219.219,0,0,1,1.219,1Z" fill="none"/>
+      </g>
+      <text id="动态热身" transform="translate(580 1013)" fill="#fff" font-size="22" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI"><tspan x="-44" y="0">动态热</tspan><tspan y="0" font-family="YuGothicUI-Regular, Yu Gothic UI">身</tspan></text>
+      <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(451 967.366)" fill="url(#linear-gradient)"/>
+      <text id="_40_54_" data-name="40～
+54%" transform="translate(485.854 1000.843)" fill="#b5c0ff" font-size="16" font-family="SegoeUI, Segoe UI"><tspan x="-16.625" y="0">40</tspan><tspan y="0" font-family="YuGothicUI-Regular, Yu Gothic UI">～</tspan><tspan y="0"></tspan><tspan x="-15.172" y="17">54%</tspan></text>
     </g>
+  </g>
 </svg>

src/assets/imgs/levelIcon/i55.svg

@@ -1,40 +1,24 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="92" viewBox="0 0 230 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="组_794" data-name="组 794" transform="translate(-708 -958)">
+    <rect id="矩形_114" data-name="矩形 114" width="230" height="92" rx="12" transform="translate(708 958)" fill="#fff" opacity="0.101"/>
+    <g id="组_793" data-name="组 793" transform="translate(6 -0.208)">
+      <ellipse id="椭圆_3" data-name="椭圆 3" cx="31.5" cy="33" rx="31.5" ry="33" transform="translate(720 971)" fill="#024800"/>
+      <g id="矩形_123" data-name="矩形 123" transform="translate(781 983)" fill="none" stroke="#0ab105" stroke-width="2">
+        <path d="M0,0H114a21,21,0,0,1,21,21v0a21,21,0,0,1-21,21H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+        <path d="M1.225,1H114a20,20,0,0,1,20,20v0a20,20,0,0,1-20,20H1.225A.225.225,0,0,1,1,40.775V1.225A.225.225,0,0,1,1.225,1Z" fill="none"/>
+      </g>
+      <text id="脂肪燃烧" transform="translate(848 1013)" fill="#fff" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">脂肪燃</tspan><tspan y="0" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI">烧</tspan></text>
+      <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(718 967.366)" fill="url(#linear-gradient)"/>
+      <text id="_55_69_" data-name="55～
+69%" transform="translate(754 1000.843)" fill="#50f54b" font-size="16" font-family="SegoeUI, Segoe UI"><tspan x="-16.625" y="0">55</tspan><tspan y="0" font-family="YuGothicUI-Regular, Yu Gothic UI">～</tspan><tspan y="0"></tspan><tspan x="-15.172" y="17">69%</tspan></text>
     </g>
+  </g>
 </svg>

src/assets/imgs/levelIcon/i70.svg

@@ -1,40 +1,24 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="92" viewBox="0 0 230 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="组_799" data-name="组 799" transform="translate(-975 -958)">
+    <rect id="矩形_114" data-name="矩形 114" width="230" height="92" rx="12" transform="translate(975 958)" fill="#fff" opacity="0.101"/>
+    <g id="组_798" data-name="组 798" transform="translate(7 0)">
+      <ellipse id="椭圆_3" data-name="椭圆 3" cx="31.5" cy="33" rx="31.5" ry="33" transform="translate(987 971)" fill="#4e4600"/>
+      <g id="矩形_123" data-name="矩形 123" transform="translate(1049 983)" fill="none" stroke="#f5ec00" stroke-width="2">
+        <path d="M0,0H112a21,21,0,0,1,21,21v0a21,21,0,0,1-21,21H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+        <path d="M1.225,1H112a20,20,0,0,1,20,20v0a20,20,0,0,1-20,20H1.225A.225.225,0,0,1,1,40.775V1.225A.225.225,0,0,1,1.225,1Z" fill="none"/>
+      </g>
+      <text id="糖分消耗" transform="translate(1114 1013)" fill="#fff" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">糖分消耗</tspan></text>
+      <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(985 967.158)" fill="url(#linear-gradient)"/>
+      <text id="_70_79_" data-name="70～
+79%" transform="translate(1019.176 999.635)" fill="#fced3f" font-size="16" font-family="SegoeUI, Segoe UI"><tspan x="-16.625" y="0">70</tspan><tspan y="0" font-family="YuGothicUI-Regular, Yu Gothic UI">～</tspan><tspan y="0"></tspan><tspan x="-15.172" y="17">79%</tspan></text>
     </g>
+  </g>
 </svg>

src/assets/imgs/levelIcon/i80.svg

@@ -1,40 +1,24 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="92" viewBox="0 0 230 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="组_801" data-name="组 801" transform="translate(-1242 -958)">
+    <rect id="矩形_114" data-name="矩形 114" width="230" height="92" rx="12" transform="translate(1242 958)" fill="#fff" opacity="0.101"/>
+    <g id="组_800" data-name="组 800" transform="translate(6 0)">
+      <ellipse id="椭圆_3" data-name="椭圆 3" cx="31.5" cy="33" rx="31.5" ry="33" transform="translate(1254 971)" fill="#5a2300"/>
+      <g id="矩形_123" data-name="矩形 123" transform="translate(1317 983)" fill="none" stroke="#ff6200" stroke-width="2">
+        <path d="M0,0H112a21,21,0,0,1,21,21v0a21,21,0,0,1-21,21H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+        <path d="M1.225,1H112a20,20,0,0,1,20,20v0a20,20,0,0,1-20,20H1.225A.225.225,0,0,1,1,40.775V1.225A.225.225,0,0,1,1.225,1Z" fill="none"/>
+      </g>
+      <text id="心肺训练" transform="translate(1382 1013)" fill="#fff" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">心肺</tspan><tspan y="0" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI">训练</tspan></text>
+      <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(1252 967.158)" fill="url(#linear-gradient)"/>
+      <text id="_80_89_" data-name="80～
+89%" transform="translate(1287 1000)" fill="#ffbd53" font-size="16" font-family="SegoeUI, Segoe UI"><tspan x="-16.625" y="0">80</tspan><tspan y="0" font-family="YuGothicUI-Regular, Yu Gothic UI">～</tspan><tspan y="0"></tspan><tspan x="-15.172" y="17">89%</tspan></text>
     </g>
+  </g>
 </svg>

src/assets/imgs/levelIcon/i90.svg

@@ -1,4 +1,4 @@
-<svg id="峰值锻炼-图例" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="92" viewBox="0 0 155 92">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="92" viewBox="0 0 230 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"/>
@@ -7,17 +7,20 @@
       <stop offset="1" stop-color="#ff7f12"/>
     </linearGradient>
   </defs>
-  <rect id="矩形_128" data-name="矩形 128" width="155" height="92" rx="12" fill="#fff" opacity="0.101"/>
-  <g id="组_526" data-name="组 526" transform="translate(-519.854 -937)">
-    <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 id="组_803" data-name="组 803" transform="translate(-1509 -958)">
+    <rect id="矩形_114" data-name="矩形 114" width="230" height="92" rx="12" transform="translate(1509 958)" fill="#fff" opacity="0.101"/>
+    <g id="组_802" data-name="组 802" transform="translate(6 -0.208)">
+      <ellipse id="椭圆_3" data-name="椭圆 3" cx="31.5" cy="33" rx="31.5" ry="33" transform="translate(1521 971)" fill="#460006"/>
+      <g id="矩形_123" data-name="矩形 123" transform="translate(1583 983)" fill="none" stroke="#d11122" stroke-width="2">
+        <path d="M0,0H113a21,21,0,0,1,21,21v0a21,21,0,0,1-21,21H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+        <path d="M1.225,1H113a20,20,0,0,1,20,20v0a20,20,0,0,1-20,20H1.225A.225.225,0,0,1,1,40.775V1.225A.225.225,0,0,1,1.225,1Z" fill="none"/>
+      </g>
+      <text id="峰值锻炼" transform="translate(1649 1013)" fill="#fff" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">峰</tspan><tspan y="0" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI">值锻炼</tspan></text>
+      <g id="组_518" data-name="组 518" transform="translate(287.464 19.843)">
+        <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="SegoeUI, Segoe UI"><tspan x="-5.138" y="0">≥</tspan><tspan x="-14.224" y="16">90%</tspan></text>
+      </g>
     </g>
-    <text id="峰值锻炼" 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(-1221.536 -938.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="18" font-family="PingFangSC-Medium, PingFang SC" font-weight="500"><tspan x="-7.065" y="0">≥</tspan><tspan font-size="15"><tspan x="-16.425" y="16">90%</tspan></tspan></text>
   </g>
 </svg>

src/components/Headside.vue

@@ -6,8 +6,8 @@
     <div class="rt">
       <p @click="showUuid()">版本 {{ version }}</p>
       <span>{{ nowTime }}</span>
-      <span>{{ nowWeeks }}</span>
-      <span>{{ nowDay }}</span>
+      <span @click="refreshPage()">{{ nowWeeks }}</span>
+      <span @click="showfullScreen()">{{ nowDay }}</span>
     </div>
 
     <el-dialog
@@ -31,8 +31,8 @@
         </tr>
       </table>
       <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">了解</el-button>
-  </span>
+            <el-button @click="dialogVisible = false">关闭</el-button>
+      </span>
     </el-dialog>
   </div>
 </template>
@@ -55,35 +55,59 @@ export default {
       version: '',
       currunVersion: runVersion,
       curheadapi: headapi,
+      timer: null
     }
   },
   mounted() {
-    this.nowtimer = setInterval(() => {
-      let date = new Date();
-
-      let h = date.getHours();
-      h = h < 10 ? '0' + h + ':' : h + ':';
-
-      let m = date.getMinutes()
-      m = m < 10 ? '0' + m + ':' : m + ':';
-
-      let s = date.getSeconds()
-      s = s < 10 ? '0' + s : s;
-
-      this.nowTime = h + m + s;
-      // this.nowTime = h + m;
-      this.nowDayFunc();
-      
-      // 获取版本号
-      this.version = localStorage.version;
-      this.currunVersion = runVersion
-      this.curheadapi = headapi
-    }, 1000);
+    console.log("Headside mounted");
+    // console.log("this.timer = " + this.timer);
+
+    if (this.timer == null) {
+      this.timer = setInterval(() => {
+        let date = new Date();
+
+        let h = date.getHours();
+        h = h < 10 ? '0' + h + ':' : h + ':';
+
+        let m = date.getMinutes()
+        m = m < 10 ? '0' + m + ':' : m + ':';
+
+        let s = date.getSeconds()
+        s = s < 10 ? '0' + s : s;
+
+        this.nowTime = h + m + s;
+        // this.nowTime = h + m;
+        // console.log(this.nowTime);
+
+        this.nowDayFunc();
+        
+        // 获取版本号
+        this.version = localStorage.version;
+        this.currunVersion = runVersion
+        this.curheadapi = headapi
+      }, 1000);
+
+      this.$once('hook:beforeDestroy', () => {
+        console.log("Headside hook:beforeDestroy");
+        clearInterval(this.timer);
+        this.timer = null;
+      });
+    }
+
     this.getCurVersion();
   },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  },
+  // watch: {
+  //   '$route': function (val) {
+  //     console.log("Headside val.path: " + val.path);
+  //     clearInterval(this.timer);
+  //     this.timer = null;
+  //   }
+  // },
+  // beforeDestroy() {
+  //   console.log("Headside beforeDestroy");
+  //   clearInterval(this.timer);
+  //   this.timer = null;
+  // },
   methods: {
     // 手动开启输出控制台
     showConsole() {
@@ -122,6 +146,9 @@ export default {
         notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
       }
     },
+    refreshPage() {
+      location.reload();
+    },
     nowDayFunc() {
       let days = new Date().getDay();
       let wd = numberToWeekdays(days);
@@ -159,21 +186,21 @@ export default {
 
 <style lang="scss" scoped>
 @mixin cube {
-  width: 98%;
+  width: 96.8%;
   overflow: hidden;
   display: block;
   margin: 0 auto;
 }
 
 .headerContainer {
-  @include cube
+  @include cube;
 }
 
 .lt {
   float: left;
 
   img {
-    width: 1.4rem;
+    width: 1.5rem;
     float: left;
     margin-top: 0.2rem;
   }

src/components/levelIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[{'levelIconTV':runVersion == 'test'},{'levelIconOutDoor':runVersion != 'test'},{'levelIcon':true}]">
+  <div :class="[{'levelIconTV':runVersion == 'normal'},{'levelIconOutDoor':runVersion != 'normal'},{'levelIcon':true}]">
     <ul>
       <li>
         <img src="../assets/imgs/levelIcon/i39.svg" alt="">
@@ -37,7 +37,7 @@ export default {
 
 <style lang="scss" scoped>
 @mixin cube {
-  width: 68%;
+  width: 90%;
   overflow: hidden;
   display: block;
   margin: 0 auto;
@@ -45,7 +45,7 @@ export default {
 
 .levelIcon {
   @include cube;
-  height: 1rem;
+  height: 0.98rem;
 }
 
 .levelIconOutDoor {
@@ -53,7 +53,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  padding-bottom: 5px;
+  padding-bottom: 0px;
 }
 
 .levelIconTV {
@@ -61,18 +61,18 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  padding-bottom: 5px;
+  padding-bottom: 0px;
 }
 
 .levelIcon ul {
-  width: 92%;
+  width: 100%;
   overflow: hidden;
   display: block;
   margin: 0;
-  padding-left: 5%;
+  // padding-left: 0%;
 
   li {
-    width: 16.666666666667%;
+    width: 16.6%;
     height: 2rem;
     overflow: hidden;
     float: left;
@@ -84,7 +84,7 @@ export default {
 
   img {
     @include cube;
-    width: 70%;
+    width: 80%;
   }
 }
 

src/components/pkstudent.vue

@@ -1,10 +1,10 @@
 <template>
   <ul :class="[{'many':students.length >= 2}]">
     <li v-for="(s,i) in students" :class="s.className">
-      <div class="centerLi">
+      <div v-show="i<8" class="centerLi">
         <!-- <div class="power" v-if="s.RealHr != 0"> -->
-        <div class="power">
-          <power :cur-power="s.PowerPercent"></power>
+        <div class="power">          
+          <power :cur-power="s.PowerPercent" :cur-hr="s.RealHr"></power>
         </div>
         <div class="userinfo">
           <div class="lt">
@@ -31,15 +31,17 @@
             <span>
               <div :class="[{'heartJump':true}]">
                 <div class="heartImgContainer">
-                    <img src="../assets/imgs/student/heart.svg" class=""/>
+                  <img src="../assets/imgs/student/heart.svg" class=""/>
                 </div>
-                <span class="fastJump" v-if="s.RealHr != 0"
-                      v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}</span>
+                <em class="fastJump" v-if="s.RealHr != 0"
+                    v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}
+                </em>
                 <em class="normalJump" v-if="s.RealHr != 0"
-                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
-                    {{ s.RealHr }}</em>
+                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">{{ s.RealHr }}
+                </em>
                 <em class="slowJump" v-if="s.RealHr != 0"
-                    v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}</em>
+                    v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}
+                </em>
                 <em v-else>---</em>
               </div>
             </span>
@@ -94,7 +96,7 @@ export default {
         sum = newName.length;
         that.studentsFake = 0;
         if (sum <= 2) {
-          that.studentsFake = 0;
+          that.studentsFake = 2 - sum;
         }
         if (sum >= 3) {
           that.studentsFake = 8 - sum;
@@ -107,14 +109,15 @@ export default {
         let colorClass = '';
         for (let i = 0; i < sum; i++) {
           switch (true) {
-            case  sum == 1:
-              numberClass = 'max';
-              break;
-            case  sum == 2:
+            // case  sum == 1:
+            //   numberClass = 'max';
+            //   break;
+            // case  sum == 2:
+            case  sum <= 2:
               numberClass = 'two';
               break;
             case   sum > 2:
-              numberClass = 'twentyFive';
+              numberClass = 'eight';
               break;
           }
           let per = parseInt(newName[i].ActivePercent);
@@ -141,6 +144,7 @@ export default {
 
           newName[i].className = numberClass + ' ' + colorClass;
           that.FakeclassName = numberClass + ' ' + colorClass;
+          // console.log(newName[i].className);
         }
 
       },
@@ -205,7 +209,7 @@ em, i, ul, li, s {
 
 ul {
   @include cube;
-  width: 96%;
+  width: 100%;
   display: inline-flex;
   align-items: center;
   align-content: center;
@@ -219,27 +223,33 @@ ul {
 }
 
 .blue .centerLi {
-  background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  // background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  background: #007ec7;
 }
 
 .violet .centerLi {
-  background: linear-gradient(#3500ac 0%, #4300ad 33%, #7766f8 100%);
+  // background: linear-gradient(#3500ac 0%, #4300ad 33%, #7766f8 100%);
+  background: #3519AB;
 }
 
 .green .centerLi {
-  background: linear-gradient(#0ab105 0%, #0ab105 33%, #37e06b 100%);
+  // background: linear-gradient(#0ab105 0%, #0ab105 33%, #37e06b 100%);
+  background: #05A200;
 }
 
 .yellow .centerLi {
-  background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  // background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  background: #ffb308;
 }
 
 .brown .centerLi {
-  background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  // background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  background: #ff6200;
 }
 
 .red .centerLi {
-  background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  // background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  background: #d11122;
 }
 
 .slowJump {
@@ -312,31 +322,38 @@ ul {
   border-radius: 0.1rem;
 }
 
+.power {
+  margin-top: 0.1rem;
+  margin-right: 0.1rem;
+}
 
 .userinfo {
   @include cube;
 
-
   .lt {
     width: 31%;
     float: left;
-    padding-right: 4%;
+    padding-right: 5%;
+    margin-top:  0.2rem;
 
     span {
       float: right;
-      margin-top: 16%;
 
       em {
         color: white;
-        font-size: 1.5rem;
+        font-size: 0.9rem;
+        line-height: 1.90rem;
         font-weight: bold;
+        letter-spacing: 0.1rem;
       }
 
       s {
-        font-size: 0.4rem;
+        font-size: 0.46rem;
         float: right;
         text-align: right;
-        margin-top: 0.25rem;
+        margin-top: 0.43rem;
+        font-family: "Arial Black";
+        font-weight: bold;
       }
     }
   }
@@ -349,12 +366,12 @@ ul {
 
     .head {
       @include cube;
-      height: 3rem;
+      height: 2.2rem;
 
       img {
         @include cube;
-        width: 2.6rem;
-        height: 2.6rem;
+        width: 1.8rem;
+        height: 1.8rem;
         border-radius: 250rem;
 
         &.girl {
@@ -369,26 +386,42 @@ ul {
 
     .names {
       @include cube;
-      width: 2rem;
+      width: 1.6rem;
       background: rgba(0, 0, 0, 0.7);
-      font-size: 0.3rem;
+      font-size: 0.25rem;
       text-align: center;
-      padding: 3% 1%;
+      padding: 2% 1%;
       border-radius: 250rem;
       position: relative;
       bottom: 0.45rem;
     }
+
+    .IsPrivate {
+      width: 0.6rem;
+      float: right;
+      position: relative;
+      right: 0.18rem;
+      bottom: 2.28rem;
+    }
+
+    .IsBirthday {
+      width: 1.1rem;
+      float: left;
+      position: relative;
+      bottom: 2.38rem;
+      left: 0.82rem;
+    }
   }
 
   .rt {
-    width: 31%;
+    width: 32%;
     float: right;
-    padding-right: 4%;
+    margin-top:  0.2rem;
 
     .heartJump {
       width: 100%;
       float: right;
-      margin-top: 20%;
+      letter-spacing: 0.05rem;
 
       span {
         float: right;
@@ -399,9 +432,10 @@ ul {
       width: 100%;
       text-align: right;
       float: right;
-      font-size: 1.3rem;
+      font-size: 0.818rem;
+      line-height: 1.90rem;
       font-weight: bold;
-      padding-right: 20%;
+      padding-right: 25%;
     }
 
     em {
@@ -411,473 +445,187 @@ ul {
       text-align: right;
     }
 
-    s {
-      font-size: 0.4rem;
-      float: right;
-      text-align: right;
-      margin-top: 0.25rem;
-    }
-
     .heartImgContainer {
       width: 20%;
-      height: 2rem;
+      // height: 2rem;
       float: right;
     }
 
     img {
-      width: 0.5rem;
+      width: 0.4rem;
       float: right;
-      margin-right: 20%;
-      margin-top: 10%;
+      margin-right: 12%;
+      margin-top: 0.60rem;
+      // margin-top: 10%;
     }
   }
 }
 
 .userSport {
   @include cube;
+  line-height: 0.8rem;
+  margin-top: 0.1rem;
 
   span {
     width: 33.333%;
-    display: inline-block;
+    float: left;  
 
     img {
       width: 0.4rem;
-      margin-right: 0.2rem;
+      float: left;
+      margin-left: 0.96rem;
+      margin-top: 0.18rem;
     }
 
     em {
-      display: inline;
+      float: left;
       font-size: 0.45rem;
-      text-align: center;
+      font-family: Georgia, Arial;
+      vertical-align: top;
+      margin-left: 0.12rem;
     }
   }
 }
 
-.IsPrivate {
-  width: 0.6rem;
-  float: right;
-  position: relative;
-  bottom: 2.8rem;
-}
-
-.IsBirthday {
-  width: 1.1rem;
-  float: left;
-  position: relative;
-  bottom: 2.18rem;
-  left: 0.58rem;
-}
-
 .max {
-  width: 12rem;
+  width: 9.5rem;
   height: 3.5rem;
-  margin-top: 20%;
-
-  .IsPrivate {
-    bottom: 2.2rem;
-  }
+  margin-top: 2rem;
 
   .userinfo {
     height: 2.2rem;
   }
-
-  .lt span em {
-    font-size: 0.8rem;
-  }
-
-  .userinfo .head {
-    height: 2rem;
-
-    img {
-      width: 1.8rem;
-      height: 1.8rem;
-    }
-  }
-
-  .md {
-    height: 2rem;
-
-    .names {
-      width: 1.6rem;
-      font-size: 0.2rem;
-    }
-  }
-
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
-
-    .heartJump {
-      margin-top: 25%;
-    }
-
-    img {
-      width: 0.4rem;
-      margin-right: 10%;
-    }
-  }
-
-  .userSport {
-    line-height: 0.5rem;
-  }
 }
 
 .two {
-  width: 9rem;
-  height: 3rem;
-  margin-top: 0.2rem;
-
-  .IsPrivate {
-    bottom: 2.2rem;
-  }
-
-  .userinfo {
-    height: 2.1rem;
-  }
-
-  .lt span {
-    margin-top: 12%;
-
-    s {
-      margin-top: 0.1rem;
-    }
-
-    em {
-      font-size: 0.8rem;
-    }
-  }
-
-  .userinfo .head {
-    height: 1.9rem;
-
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      border-width: 2px !important;
-    }
-  }
-
-  .md {
-    height: 2.1rem;
-
-    .names {
-      width: 1.2rem;
-      height: 0.2rem;
-      line-height: 0.2rem;
-      font-size: 0.2rem;
-      bottom: 0.35rem;
-    }
-  }
-
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
-
-    .heartJump {
-      margin-top: 25%;
-    }
-
-    img {
-      width: 0.3rem;
-      margin-right: 10%;
-    }
-  }
-
-  .userSport {
-    line-height: 0;
-
-    img {
-      width: 0.3rem;
-    }
-
-    em {
-      font-size: 0.35rem;
-    }
-  }
-
-  .IsPrivate {
-    bottom: 2rem;
-    right: 0.1rem;
-  }
-      
-  .IsBirthday {
-    width: 0.9rem;
-    bottom: 2.05rem;
-    left: 0.68rem;
-  }
-}
-
-.three {
   width: 9.5rem;
-  height: 4rem;
-  margin-top: 0.3rem;
-
-  .lt span em {
-    font-size: 1.2rem;
-  }
-
-  .md {
-    height: 2.5rem;
-  }
-
-  .userinfo .head {
-    height: 2.6rem;
-
-    img {
-      width: 2.2rem;
-      height: 2.2rem;
-    }
-  }
-
-  .rt span {
-    font-size: 1rem;
-    padding-right: 10%;
-
-    img {
-      width: 0.4rem;
-      margin-right: 10%;
-    }
-  }
-
-  .userSport {
-    line-height: 0.5rem;
-  }
-}
-
-
-.five {
-  width: 6.3rem;
-  height: 2.7rem;
-  margin-top: 0.3rem;
-
-  .lt span {
-    margin-top: 10%;
-
-    em {
-      font-size: 0.7rem;
-      font-weight: 600;
-    }
-  }
+  height: 3.5rem;
+  margin-top: 0.12rem;
+  // margin-top: 0.2rem;
 
   .userinfo {
-    height: 1.9rem;
-  }
-
-  .userinfo .head {
-    height: 1.7rem;
-
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    .names {
-      width: 1.4rem;
-    }
-  }
-
-  .md .IsPrivate {
-    width: 0.5rem;
-    bottom: 1.9rem;
-  }
-
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
-
-    img {
-      width: 0.3rem;
-      margin-right: 10%;
-    }
-  }
-
-  .userSport {
-    line-height: 0.15rem;
-
-    img {
-      width: 0.3rem;
-    }
-
-    em {
-      font-size: 0.3rem;
-    }
+    height: 2.2rem;
   }
 }
 
+.eight {
+  width: 4.54rem;
+  height: 1.9rem;
+  margin-top: 0.12rem;
 
-.sixteen {
-  width: 4.7rem;
-  height: 2.15rem;
-  margin-top: 0.2rem;
-
-  .lt span {
-    margin-top: 3%;
-    line-height: 1rem;
-
-    em {
-      font-size: 0.55rem;
-    }
-
-    s {
-      font-size: 0.25rem;
-      margin-top: -0.1rem;
-    }
+  .power {
+    margin-top: 0.0rem;
+    margin-right: 0.0rem;
   }
 
-  .md {
-    padding-top: 0;
+  /deep/ .powerContainer img {
+    width: 0.25rem;
   }
 
   .userinfo {
-    height: 1.33rem;
-  }
-
-  .userinfo .head {
-    height: 1.4rem;
-
-    img {
-      width: 1.3rem;
-      height: 1.3rem;
-    }
-
-    .names {
-      width: 1.2rem;
-      font-size: 0.2rem;
-    }
-  }
-
-  .md {
-    height: 1.5rem;
-
-    .IsPrivate {
-      width: 0.3rem;
-      bottom: 1.45rem;
-    }
-  }
+    height: 1.1rem;
 
-  .rt span {
-    line-height: 0.8rem;
-    font-size: 0.55rem;
-    padding-right: 5%;
+    .lt {
+      margin-top: -0.43rem;
 
-    img {
-      width: 0.25rem;
-      margin-right: 5%;
-    }
+      em {
+        font-size: 0.5rem;
+        line-height: 1.90rem;
+        letter-spacing: 0.01rem;
+      }
 
-    .heartJump {
-      margin-top: 20%;
+      s {
+        font-size: 0.2rem;
+        margin-top: 0.68rem;
+      }
     }
-  }
 
-  .userSport {
-    line-height: 0.01rem;
-
-    img {
-      width: 0.2rem;
-    }
+    .md {
+      height: 1.0rem;
+      padding-top: 0.06rem;
+      
+      .head {
+        height: 1.1rem;
 
-    em {
-      font-size: 0.2rem;
+        img {
+          width: 0.9rem;
+          height: 0.9rem;
+          border-width: 2px !important;
+        }
+      }
+          
+      .names {
+        width: 0.75rem !important;
+        font-size: 0.15rem !important;
+        bottom: 0.25rem !important;
+      }
+          
+      .IsPrivate {
+        width: 0.25rem;
+        bottom: 1.1rem;
+        // bottom: 2.65rem;
+        right: 0.08rem;
+      }
+        
+      .IsBirthday {
+        width: 0.49rem;
+        bottom: 1.15rem;
+        left: 0.43rem;
+      }
     }
-  }
-}
+    
+    .rt {
+      margin-top: -0.43rem;
 
-.twentyFive {
-  width: 3.75rem;
-  height: 1.7rem;
-  margin-top: 0.12rem;
+      span {
+        font-size: 0.455rem;
+        line-height: 1.90rem;
+        padding-right: 15%;
+        letter-spacing: 0.01rem;
+      }
 
-  .lt span {
-    margin-top: 3%;
-    line-height: 0.5rem;
+      .heartJump {
+        margin-right: 0.13rem;
+      }
 
-    em {
-      font-size: 0.5rem;
-    }
+      .heartImgContainer {
+        width: 18%;
+      }
 
-    s {
-      font-size: 0.2rem;
-      margin-top: -0.1rem;
+      img {
+        width: 0.2rem;
+        margin-right: 5%;
+        margin-top: 0.76rem;
+      }
     }
   }
 
-  .md {
-    padding-top: 0;
-  }
-
-  .userinfo {
-    height: 1rem;
-  }
-
-  .userinfo .head {
-    height: 1.1rem;
+  .userSport {
+    line-height: 0.3rem;
+    margin-top: 0.05rem;
 
     img {
-      width: 0.9rem;
-      height: 0.9rem;
-      border-width: 2px !important;
+      width: 0.23rem;
+      margin-top: 0.05rem;
     }
 
-    .names {
-      width: 0.7rem;
-      height: 0.15rem;
-      line-height: 0.15rem;
-      font-size: 0.15rem;
-      bottom: 0.2rem;
+    span:nth-child(1)>img {
+      margin-left: 0.43rem;
     }
-  }
-
-  .md {
-    height: 1rem;
-
-    .IsPrivate {
-      width: 0.25rem;
-      bottom: 1.1rem;
+    span:nth-child(2)>img {
+      margin-left: 0.43rem;
     }
-  }
-
-  .rt span {
-    line-height: 0.8rem;
-    font-size: 0.45rem;
-    padding-right: 5%;
-
-    img {
-      width: 0.2rem;
-      margin-right: 5%;
-    }
-
-    .heartJump {
-      margin-top: 10%;
-    }
-  }
-
-  .userSport {
-    position: relative;
-    bottom: 0.15rem;
-    @include cube;
-    line-height: 0;
-
-    img {
-      line-height: 0;
-      width: 0.2rem;
+    span:nth-child(3)>img {
+      margin-left: 0.39rem;
     }
 
     em {
-      line-height: 0;
-      font-size: 0.2rem;
+      font-size: 0.26rem;
+      margin-top: 0.04rem;
+      margin-left: 0.06rem;
+      // line-height: 0.8rem;
     }
   }
-
-  .IsBirthday {
-    width: 0.49rem;
-    bottom: 1.15rem;
-    left: 0.31rem;
-  }
-  
-  /deep/ .powerContainer img {
-    width: 0.25rem;
-  }
 }
 
 .fakePart {

src/components/power.vue

@@ -2,8 +2,8 @@
     <div class="powerContainer" v-if="parseInt(curPower) > 0 && parseInt(curHr) > 0">
       <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">
+      <img src="../assets/imgs/power/50p.svg" alt="" v-if="parseInt(curPower) >= 21 && parseInt(curPower) < 41">
+      <img src="../assets/imgs/power/25p.svg" alt="" v-if="parseInt(curPower) < 21">
     </div>
     <div class="powerContainer" v-else>
       <img>

src/components/student.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul :class="[{'many':students.length >= 2}]">
+  <ul :class="[{'few':students.length == 2}, {'many':students.length > 2}]">
     <li v-for="(s,i) in students" :class="studentsClassName[i].name">
       <div :class="[{ 'box animate__animated animate__flipInX': Listate },{'centerLi':true}]">
         <!-- <div class="power" v-if="s.RealHr != 0"> -->
@@ -31,14 +31,13 @@
             <span>
               <div :class="[{'heartJump':true}]">
                 <div class="heartImgContainer">
-                     <img src="../assets/imgs/student/heart.svg" class=""/>
+                  <img src="../assets/imgs/student/heart.svg" class=""/>
                 </div>
-                <span class="fastJump" v-if="s.RealHr != 0"
+                <em class="fastJump" v-if="s.RealHr != 0"
                     v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}
-                </span>
+                </em>
                 <em class="normalJump" v-if="s.RealHr != 0"
-                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
-                    {{ s.RealHr }}
+                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">{{ s.RealHr }}
                 </em>
                 <em class="slowJump" v-if="s.RealHr != 0"
                     v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}
@@ -167,14 +166,14 @@ export default {
               numberClass = 'two';
               break;
             case  parseInt(sum) <= 4 && parseInt(sum) > 2:
-              numberClass = 'three';
+              numberClass = 'four';
               break;
             case  parseInt(sum) <= 9 && parseInt(sum) > 4:
-              numberClass = 'five';
-              break;
-            case  parseInt(sum) <= 9 && parseInt(sum) > 6:
               numberClass = 'nine';
               break;
+            // case  parseInt(sum) <= 9 && parseInt(sum) > 6:
+            //   numberClass = 'nine';
+            //   break;
             case parseInt(sum) <= 16 && parseInt(sum) > 9:
               numberClass = 'sixteen';
               break;
@@ -266,7 +265,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 
-
 @mixin cube {
   width: 100%;
   overflow: hidden;
@@ -284,7 +282,7 @@ em, i, ul, li, s {
 
 ul {
   @include cube;
-  width: 96%;
+  width: 97.5%;
   display: inline-flex;
   align-items: center;
   align-content: center;
@@ -292,33 +290,42 @@ ul {
   flex-wrap: wrap;
   flex-grow: 1;
 
+  &.few {
+    justify-content: space-around;
+  }
   &.many {
     justify-content: space-between;
   }
 }
 
 .blue .centerLi {
-  background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  // background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  background: #007ec7;
 }
 
 .violet .centerLi {
-  background: linear-gradient(#3500ac 0%, #4300ad 33%, #7766f8 100%);
+  // background: linear-gradient(#3500ac 0%, #4300ad 33%, #7766f8 100%);
+  background: #3519AB;
 }
 
 .green .centerLi {
-  background: linear-gradient(#0ab105 0%, #0ab105 33%, #37e06b 100%);
+  // background: linear-gradient(#0ab105 0%, #0ab105 33%, #37e06b 100%);
+  background: #05A200;
 }
 
 .yellow .centerLi {
-  background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  // background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  background: #ffb308;
 }
 
 .brown .centerLi {
-  background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  // background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  background: #ff6200;
 }
 
 .red .centerLi {
-  background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  // background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  background: #d11122;
 }
 
 .slowJump {
@@ -383,7 +390,7 @@ ul {
 }
 
 .centerLi {
-  width: 99.8%;
+  width: 100%;
   height: 100%;
   overflow: hidden;
   float: left;
@@ -391,23 +398,27 @@ ul {
   border-radius: 0.1rem;
 }
 
+.power {
+  margin-top: 0.1rem;
+  margin-right: 0.1rem;
+}
 
 .userinfo {
   @include cube;
 
-
   .lt {
     width: 30%;
     float: left;
     padding-right: 5%;
+    margin-top:  0.8rem;
 
     span {
       float: right;
-      margin-top: 16%;
 
       em {
         color: white;
         font-size: 1.5rem;
+        line-height: 2.0rem;
         font-weight: bold;
         letter-spacing: 0.1rem;
       }
@@ -460,17 +471,33 @@ ul {
       position: relative;
       bottom: 0.55rem;
     }
+
+    .IsPrivate {
+      width: 0.6rem;
+      float: right;
+      position: relative;
+      bottom: 3rem;
+      right: 0.3rem;
+    }
+
+    .IsBirthday {
+      width: 1.7rem;
+      float: left;
+      position: relative;
+      bottom: 3.3rem;
+      left: 0.95rem;
+    }
   }
 
   .rt {
     width: 35%;
     float: right;
+    margin-top:  0.8rem;
 
     .heartJump {
       width: 100%;
       float: right;
-      margin-top: 20%;
-      letter-spacing: 0.05rem;
+      letter-spacing: 0.1rem;
 
       span {
         float: right;
@@ -481,9 +508,10 @@ ul {
       width: 100%;
       text-align: right;
       float: right;
-      font-size: 1.3rem;
+      font-size: 1.363rem;
+      line-height: 2.0rem;
       font-weight: bold;
-      padding-right: 20%;
+      padding-right: 16%;
     }
 
     em {
@@ -502,7 +530,7 @@ ul {
 
     .heartImgContainer {
       width: 20%;
-      height: 2rem;
+      // height: 2rem;
       float: right;
     }
 
@@ -510,67 +538,46 @@ ul {
       width: 0.5rem;
       float: right;
       margin-right: 20%;
-      margin-top: 10%;
+      margin-top: 0.39rem;
+      // margin-top: 10%;
     }
   }
 }
 
 .userSport {
   @include cube;
+  line-height: 0.8rem;
+  margin-top: 0.6rem;
 
   span {
     width: 33.333%;
-    float: left;
+    float: left;  
 
     img {
       width: 0.4rem;
-      margin-right: 0.2rem;
+      float: left;
+      margin-left: 1.2rem;
+      margin-top: 0.18rem;
     }
 
     em {
-      line-height: 1.9rem;
-      display: inline-block;
+      float: left;
       font-size: 0.45rem;
-      text-align: center;
-      font-family: Arial;
+      font-family: Georgia, Arial;
       vertical-align: top;
+      margin-left: 0.12rem;
     }
   }
 }
 
-.IsPrivate {
-  width: 0.6rem;
-  float: right;
-  position: relative;
-  bottom: 3rem;
-  right: 0.3rem;
-}
-
-.IsBirthday {
-  width: 1.7rem;
-  float: left;
-  position: relative;
-  bottom: 3.3rem;
-  left: 0.95rem;
-}
-
 .max {
   width: 12rem;
   height: 5.1rem;
   margin-top: 2rem;
 
-  .lt {
-    span {
-      margin-top: 0.8rem;
-    }
-  }
-
-  .rt {
-    span {
-      margin-top: 0.1rem;
-    }
+  .userinfo {
+    height: 3.2rem;
   }
-
 }
 
 .two {
@@ -578,433 +585,563 @@ ul {
   height: 4.2rem;
   margin-top: 2.5rem;
 
-  .lt span {
-    margin-top: 0.7rem;
-  }
+  .userinfo {
+    height: 2.9rem;
 
-  .lt span em {
-    font-size: 1.2rem;
-  }
+    .lt {
+      width: 33%;
+      padding-right: 1%;
+      margin-top: 0.7rem;
 
-  .userinfo {
-    height: 3rem;
-  }
+      em {
+        font-size: 1.2rem;
+        line-height: 1.5rem;
+      }
+
+      s {
+        // font-size: 0.25rem;
+        margin-top: 0.1rem;
+      }
+    }
 
-  .userinfo .head {
-    height: 2.7rem;
+    .md {
+      width: 30%;
+      height: 2.5rem;
+      
+      .head {
+        height: 2.7rem;
 
-    img {
-      width: 2.2rem;
-      height: 2.2rem;
+        img {
+          width: 2.2rem;
+          height: 2.2rem;
+        }
+      }
+          
+      .names {
+        width: 1.6rem !important;
+        font-size: 0.3rem !important;
+        bottom: 0.4rem !important;
+      }
+          
+      .IsPrivate {
+        bottom: 2.65rem;
+        right: 0rem;
+      }
+        
+      .IsBirthday {
+        width: 1.4rem;
+        bottom: 2.9rem;
+        left: 0.67em;
+      }
     }
-  }
+    
+    .rt {
+      width: 33%;
+      margin-top: 0.7rem;
 
-  .md {
-    height: 2.5rem;
+      span {
+        font-size: 1.09rem;
+        line-height: 1.5rem;
+        padding-right: 8%;  
+      }
+      
+      .heartJump {
+        margin-right: 0.18rem;
+      }
+
+      img {
+        width: 0.4rem;
+        margin-right: 10%;
+        margin-top: 0.28rem;
+      }
+    }
   }
 
-  .rt span {
-    font-size: 1rem;
-    padding-right: 5%;
-    margin-top: 0.2rem;
+  .userSport {
+    line-height: 0.6rem;
+    margin-top: 0.1rem;
 
     img {
-      width: 0.4rem;
-      margin-right: 10%;
+      width: 0.38rem;
+      margin-top: 0.1rem;
     }
-  }
 
-  .userSport {
-    line-height: 0.5rem;
+    span:nth-child(1)>img {
+      margin-left: 0.66rem;
+    }
+    span:nth-child(2)>img {
+      margin-left: 0.96rem;
+    }
+    span:nth-child(3)>img {
+      margin-left: 0.96rem;
+    }
 
     em {
-      line-height: 1rem;
       font-size: 0.4rem;
+      margin-top: 0.03rem;
     }
   }
-
-  .IsPrivate {
-    bottom: 2.65rem;
-    right: 0rem;
-  }
-    
-  .IsBirthday {
-    width: 1.4rem;
-    bottom: 2.9rem;
-    left: 0.67em;
-  }
-
-  .names {
-    width: 1.6rem !important;
-    font-size: 0.3rem !important;
-    bottom: 0.4rem !important;
-  }
 }
 
-.three {
-  width: 9.5rem;
-  height: 4rem;
+.four {
+  width: 9.58rem;
+  height: 4.3rem;
   margin-top: 0.3rem;
 
-  .lt span em {
-    font-size: 1.2rem;
-  }
+  .userinfo {
+    height: 2.9rem;
 
-  .md {
-    height: 2.5rem;
-  }
+    .lt {
+      margin-top: 0.7rem;
 
-  .userinfo .head {
-    height: 2.6rem;
+      em {
+        font-size: 1.2rem;
+        line-height: 1.5rem;
+      }
 
-    img {
-      width: 2.2rem;
-      height: 2.2rem;
+      s {
+        // font-size: 0.25rem;
+        margin-top: 0.1rem;
+      }
     }
-  }
 
-  .rt span {
-    font-size: 1rem;
-    padding-right: 10%;
+    .md {
+      height: 2.5rem;
+      
+      .head {
+        height: 2.6rem;
 
-    img {
-      width: 0.4rem;
-      margin-right: 10%;
+        img {
+          width: 2.2rem;
+          height: 2.2rem;
+        }
+      }
+          
+      .names {
+        width: 1.6rem !important;
+        font-size: 0.3rem !important;
+        bottom: 0.4rem !important;
+      }
+          
+      .IsPrivate {
+        bottom: 2.65rem;
+        right: 0.1rem;
+      }
+        
+      .IsBirthday {
+        width: 1.4rem;
+        bottom: 2.8rem;
+        left: 0.72rem;
+      }
     }
-  }
-
-  //03-31 part
+    
+    .rt {
+      margin-top: 0.7rem;
 
-  .userSport {
-    line-height: 0.5rem;
+      span {
+        font-size: 1.09rem;
+        line-height: 1.5rem;
+        padding-right: 6%;
+      }
+      
+      .heartJump {
+        margin-right: 0.18rem;
+      }
 
-    em {
-      line-height: 1rem;
-      font-size: 0.4rem;
+      img {
+        width: 0.4rem;
+        margin-right: 20%;
+        margin-top: 0.28rem;
+      }
     }
   }
 
-  .IsPrivate {
-    bottom: 2.65rem;
-    right: 0.1rem;
-  }
-    
-  .IsBirthday {
-    width: 1.4rem;
-    bottom: 2.8rem;
-    left: 0.72rem;
-  }
-
-  .names {
-    width: 1.6rem !important;
-    font-size: 0.3rem !important;
-    bottom: 0.4rem !important;
-  }
-}
-
+  .userSport {
+    line-height: 0.5rem;
+    margin-top: 0.2rem;
 
-.five {
-  width: 6.3rem;
-  height: 2.9rem;
-  margin-top: 0.2rem;
+    img {
+      width: 0.38rem;
+      margin-top: 0.1rem;
+    }
 
-  .lt span {
-    margin-top: 10%;
+    span:nth-child(1)>img {
+      margin-left: 0.86rem;
+    }
+    span:nth-child(2)>img {
+      margin-left: 0.96rem;
+    }
+    span:nth-child(3)>img {
+      margin-left: 0.96rem;
+    }
 
     em {
-      font-size: 0.7rem;
-      font-weight: bold;
+      font-size: 0.4rem;
+      margin-top: 0.06rem;
     }
   }
+}
 
+.nine {
+  width: 6.36rem;
+  height: 2.92rem;
+  margin-top: 0.2rem;
+  
   .userinfo {
-    height: 1.8rem;
-  }
+    height: 1.9rem;
 
-  .userinfo .head {
-    height: 1.7rem;
+    .lt {
+      width: 35%;
+      padding-right: 1%;
+      margin-top: 0rem;
 
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      border-width: 2px !important;
-    }
+      em {
+        font-size: 0.7rem;
+        line-height: 1.8rem;
+      }
 
-    .names {
-      width: 1.4rem;
+      s {
+        // font-size: 0.25rem;
+        margin-top: 0.43rem;
+      }
     }
-  }
 
-  .md .IsPrivate {
-    width: 0.5rem;
-    bottom: 1.9rem;
-  }
+    .md {
+      width: 30%;
+      height: 1.8rem;
+      
+      .head {
+        height: 1.7rem;
+
+        img {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-width: 2px !important;
+        }
+      }
+          
+      .names {
+        width: 1.2rem !important;
+        font-size: 0.2rem !important;
+        bottom: 0.25rem !important;
+      }
+          
+      .IsPrivate {
+        bottom: 1.7rem !important;
+        right: 0.05rem !important;
+        width: 0.4rem !important;
+      }
+        
+      .IsBirthday {
+        width: 0.9rem;
+        bottom: 1.85rem;
+        left: 0.49rem;
+      }
+    }
+    
+    .rt {
+      width: 33%;
+      margin-top: 0rem;
 
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
+      span {
+        font-size: 0.636rem;
+        line-height: 1.8rem;
+        padding-right: 5%;
+      }
+      
+      .heartJump {
+        margin-right: 0.2rem;
+      }
 
-    img {
-      width: 0.3rem;
-      margin-right: 10%;
+      img {
+        width: 0.3rem;
+        margin-right: 10%;
+        margin-top: 0.6rem;
+      }
     }
   }
 
   .userSport {
-    line-height: 0.5rem;
-
-    em {
-      line-height: 1.1rem;
-      font-size: 0.25rem;
-    }
+    line-height: 0.3rem;
+    margin-top: 0rem;
 
     img {
       width: 0.25rem;
+      margin-top: 0.18rem;
     }
-  }
 
-  .IsPrivate {
-    bottom: 1.7rem !important;
-    right: -0.01rem !important;
-    width: 0.4rem !important;
-  }
-    
-  .IsBirthday {
-    width: 0.9rem;
-    bottom: 1.85rem;
-    left: 0.49rem;
-  }
+    span:nth-child(1)>img {
+      margin-left: 0.56rem;
+    }
+    span:nth-child(2)>img {
+      margin-left: 0.66rem;
+    }
+    span:nth-child(3)>img {
+      margin-left: 0.66rem;
+    }
 
-  .names {
-    width: 1.2rem !important;
-    font-size: 0.2rem !important;
-    bottom: 0.3rem !important;
+    em {
+      font-size: 0.25rem;
+      margin-top: 0.18rem;
+    }
   }
 }
 
-
 .sixteen {
-  width: 4.7rem;
+  width: 4.78rem;
   height: 2.25rem;
   margin-top: 0.1rem;
-
-  .lt span {
-    margin-top: 3%;
-    line-height: 1rem;
-
-    em {
-      font-size: 0.55rem;
-      letter-spacing: 0.01rem;
-    }
-
-    s {
-      font-size: 0.25rem;
-      margin-top: -0.05rem;
-    }
+  
+  /deep/ .powerContainer img {
+    width: 0.25rem !important;
   }
 
-  // .md {
-  //   padding-top: 0;
-  // }
+  .power {
+    margin-top: 0.01rem;
+    margin-right: 0.01rem;
+  }
 
   .userinfo {
-    height: 1.33rem;
-  }
+    height: 1.43rem;
 
-  .userinfo .head {
-    height: 1.4rem;
+    .lt {
+      width: 35%;
+      padding-right: 2%;
+      margin-top: -0.3rem;
 
-    img {
-      width: 1.1rem !important;
-      height: 1.1rem !important;
-      border-width: 2px !important;
-    }
+      em {
+        font-size: 0.55rem;
+        line-height: 1.90rem;
+        letter-spacing: 0.02rem;
+      }
 
-    .names {
-      width: 1.2rem;
-      font-size: 0.2rem;
+      s {
+        font-size: 0.25rem;
+        margin-top: 0.6rem;
+      }
     }
-  }
 
-  .md {
-    height: 1.5rem;
-
-    .IsPrivate {
-      width: 0.3rem;
-      bottom: 1.45rem;
+    .md {
+      width: 30%;
+      height: 1.5rem;
+      padding-top: 0.1rem;
+      
+      .head {
+        height: 1.4rem;
+
+        img {
+          width: 1.1rem !important;
+          height: 1.1rem !important;
+          border-width: 2px !important;
+        }
+      }
+          
+      .names {
+        width: 1rem !important;
+        font-size: 0.15rem !important;
+        bottom: 0.2rem !important;
+      }
+          
+      .IsPrivate {
+        width: 0.3rem;
+        bottom: 1.4rem;
+        right: 0.05rem;
+      }
+        
+      .IsBirthday {
+        width: 0.6rem;
+        bottom: 1.50rem;
+        left: 0.41rem;
+      }
     }
-  }
+    
+    .rt {
+      width: 33%;
+      margin-top: -0.3rem;
 
-  .rt span {
-    line-height: 0.8rem;
-    font-size: 0.55rem;
-    padding-right: 5%;
+      span {
+        font-size: 0.5rem;
+        line-height: 1.90rem;
+        padding-right: 5%;        
+      }
 
-    em {
-      letter-spacing: 0.01rem;
-    }
+      em {
+        letter-spacing: 0.02rem;
+      }
 
-    img {
-      width: 0.25rem;
-      margin-right: 5%;
-    }
+      .heartJump {
+        margin-right: 0.2rem;
+      }
 
-    .heartJump {
-      margin-top: 20%;
+      img {
+        width: 0.25rem;
+        margin-right: 5%;
+        margin-top: 0.7rem;
+      }
     }
   }
 
   .userSport {
-    line-height: 0.1rem;
+    line-height: 0.3rem;
+    margin-top: 0rem;
 
     img {
       width: 0.25rem;
+      margin-top: 0.08rem;
     }
 
-    em {
-      line-height: 0.7rem;
-      font-size: 0.2rem;
+    span:nth-child(1)>img {
+      margin-left: 0.36rem;
+    }
+    span:nth-child(2)>img {
+      margin-left: 0.36rem;
+    }
+    span:nth-child(3)>img {
+      margin-left: 0.36rem;
     }
-  }
-
-  .IsPrivate {
-    bottom: 2.65rem;
-    right: 0.05rem;
-  }
-    
-  .IsBirthday {
-    width: 0.6rem;
-    bottom: 1.50rem;
-    left: 0.41rem;
-  }
-
-  .names {
-    width: 1rem !important;
-    font-size: 0.15rem !important;
-    bottom: 0.2rem !important;
-  }
 
-  /deep/ .powerContainer img {
-    width: 0.25rem !important;
+    em {
+      font-size: 0.25rem;
+      margin-top: 0.08rem;
+      // line-height: 0.26rem;
+    }
   }
 }
 
 .twentyFive {
-  width: 3.75rem;
-  height: 1.77rem;
+  width: 3.80rem;
+  height: 1.78rem;
   margin-top: 0.1rem;
 
-  .lt span {
-    margin-top: 3%;
-    line-height: 0.5rem;
-
-    em {
-      font-size: 0.5rem;
-      letter-spacing: 0.01rem;
-    }
-
-    s {
-      font-size: 0.2rem;
-      margin-top: -0.1rem;
-    }
+  /deep/ .powerContainer {
+    height: 0.3rem;
   }
 
-  .md {
-    padding-top: 0.04rem;
+  /deep/ .powerContainer img {
+    position: relative;
+    top: 0.1rem !important;
+    right: 0.1rem;
+    width: 0.15rem !important;
+    float: right;
   }
 
-  .userinfo {
-    height: 0.9rem;
+  .power {
+    margin-top: 0.0rem;
+    margin-right: 0.0rem;
   }
-
-  .userinfo .head {
+  
+  .userinfo {
     height: 1.1rem;
 
-    img {
-      width: 0.8rem;
-      height: 0.8rem;
-      border-width: 2px !important;
-    }
+    .lt {
+      width: 35%;
+      padding-right: 1%;
+      margin-top: -0.55rem;
 
-    .names {
-      width: 0.8rem;
-      font-size: 0.15rem;
-      bottom: 0.3rem;
-    }
-  }
+      em {
+        font-size: 0.473rem;
+        line-height: 2.10rem;
+        letter-spacing: 0.02rem;
+      }
 
-  .md {
-    height: 1.1rem;
+      s {
+        font-size: 0.2rem;
+        margin-top: 0.78rem;
+      }
+    }
 
-    .IsPrivate {
-      width: 0.25rem;
-      bottom: 1.1rem;
+    .md {
+      width: 30%;
+      height: 1.0rem;
+      padding-top: 0.06rem;
+      
+      .head {
+        height: 1.1rem;
+
+        img {
+          width: 0.8rem;
+          height: 0.8rem;
+          border-width: 2px !important;
+        }
+      }
+          
+      .names {
+        width: 0.75rem !important;
+        font-size: 0.15rem !important;
+        bottom: 0.2rem !important;
+      }
+          
+      .IsPrivate {
+        width: 0.25rem;
+        bottom: 1.1rem;
+        // bottom: 2.65rem;
+        right: 0.05rem;
+      }
+        
+      .IsBirthday {
+        width: 0.49rem;
+        bottom: 1.15rem;
+        left: 0.32rem;
+      }
     }
+    
+    .rt {
+      width: 33%;
+      margin-top: -0.55rem;
 
-  }
+      span {
+        font-size: 0.43rem;
+        line-height: 2.10rem;
+        padding-right: 8%;        
+      }
 
-  .rt span {
-    line-height: 0.8rem;
-    font-size: 0.45rem;
-    padding-right: 5%;
-    margin-top: 0;
+      em {
+        letter-spacing: 0.02rem;
+      }
 
-    img {
-      width: 0.2rem;
-      margin-right: 5%;
-    }
+      .heartJump {
+        margin-right: 0.13rem;
+      }
 
-    .heartJump {
-      margin-top: 7%;
-    }
+      .heartImgContainer {
+        width: 20%;
+      }
 
-    em {
-      letter-spacing: 0.01rem;
+      img {
+        width: 0.2rem;
+        margin-right: 5%;
+        margin-top: 0.86rem;
+      }
     }
   }
 
   .userSport {
-    line-height: 0.1rem;
+    line-height: 0.3rem;
+    margin-top: 0rem;
 
     img {
-      width: 0.2rem;
-      margin-right: 0.1rem;
+      width: 0.22rem;
+      margin-top: 0.05rem;
     }
 
-    em {
-      line-height: 0.8rem;
-      font-size: 0.15rem;
+    span:nth-child(1)>img {
+      margin-left: 0.3rem;
+    }
+    span:nth-child(2)>img {
+      margin-left: 0.3rem;
+    }
+    span:nth-child(3)>img {
+      margin-left: 0.3rem;
     }
-  }
-
-  .IsPrivate {
-    bottom: 2.65rem;
-    right: 0.05rem;
-  }
-    
-  .IsBirthday {
-    width: 0.49rem;
-    bottom: 1.15rem;
-    left: 0.32rem;
-  }
-
-  .names {
-    width: 0.75rem !important;
-    font-size: 0.15rem !important;
-    bottom: 0.2rem !important;
-  }
-
-  /deep/ .powerContainer {
-    height: 0.3rem;
-  }
 
-  /deep/ .powerContainer img {
-    position: relative;
-    top: 0.1rem !important;
-    right: 0.1rem;
-    width: 0.15rem !important;
-    float: right;
+    em {
+      font-size: 0.22rem;
+      margin-top: 0.04rem;
+      margin-left: 0.06rem;
+      // line-height: 0.8rem;
+    }
   }
+  
 }
 
 .fakePart {

src/components/threestudent.vue

@@ -1,10 +1,10 @@
 <template>
   <ul :class="[{'many':students.length >= 2}]">
     <li v-for="(s,i) in students" :class="s.className">
-      <div class="centerLi">
+      <div v-show="i<10" class="centerLi">
         <!-- <div class="power" v-if="s.RealHr != 0"> -->
         <div class="power">
-          <power :cur-power="s.PowerPercent"></power>
+          <power :cur-power="s.PowerPercent" :cur-hr="s.RealHr"></power>
         </div>
         <div class="userinfo">
           <div class="lt">
@@ -30,16 +30,18 @@
           <div class="rt">
             <span>
               <div :class="[{'heartJump':true}]">
-                 <div class="heartImgContainer">
-                     <img src="../assets/imgs/student/heart.svg" class=""/>
-                 </div>
-                                        <span class="fastJump" v-if="s.RealHr != 0"
-                                              v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}</span>
+                <div class="heartImgContainer">
+                  <img src="../assets/imgs/student/heart.svg" class=""/>
+                </div>
+                <em class="fastJump" v-if="s.RealHr != 0"
+                    v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}
+                </em>
                 <em class="normalJump" v-if="s.RealHr != 0"
-                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
-                                            {{ s.RealHr }}</em>
+                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">{{ s.RealHr }}
+                </em>
                 <em class="slowJump" v-if="s.RealHr != 0"
-                    v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}</em>
+                    v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}
+                </em>
                 <em v-else>---</em>
               </div>
             </span>
@@ -94,12 +96,12 @@ export default {
         sum = newName.length;
         that.studentsFake = 0;
         if (sum <= 2) {
-          that.studentsFake = 0;
+          that.studentsFake = 2 - sum;
         }
         if (sum >= 3) {
-          that.studentsFake = 8 - sum;
+          that.studentsFake = 10 - sum;
         }
-        if (sum >= 8) {
+        if (sum >= 10) {
           that.studentsFake = 0
         }
 
@@ -107,14 +109,15 @@ export default {
         let colorClass = '';
         for (let i = 0; i < sum; i++) {
           switch (true) {
-            case  sum == 1:
-              numberClass = 'max';
-              break;
-            case  sum == 2:
+            // case  sum == 1:
+            //   numberClass = 'max';
+            //   break;
+            // case  sum == 2:
+            case  sum <= 2:
               numberClass = 'two';
               break;
             case   sum > 2:
-              numberClass = 'twentyFive';
+              numberClass = 'ten';
               break;
           }
           let per = parseInt(newName[i].ActivePercent);
@@ -205,7 +208,7 @@ em, i, ul, li, s {
 
 ul {
   @include cube;
-  width: 96%;
+  width: 100%;
   display: inline-flex;
   align-items: center;
   align-content: center;
@@ -219,27 +222,33 @@ ul {
 }
 
 .blue .centerLi {
-  background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  // background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
+  background: #007ec7;
 }
 
 .violet .centerLi {
-  background: linear-gradient(#3500ac 0%, #4300ad 33%, #7766f8 100%);
+  // background: linear-gradient(#3500ac 0%, #4300ad 33%, #7766f8 100%);
+  background: #3519AB;
 }
 
 .green .centerLi {
-  background: linear-gradient(#0ab105 0%, #0ab105 33%, #37e06b 100%);
+  // background: linear-gradient(#0ab105 0%, #0ab105 33%, #37e06b 100%);
+  background: #05A200;
 }
 
 .yellow .centerLi {
-  background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  // background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
+  background: #ffb308;
 }
 
 .brown .centerLi {
-  background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  // background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
+  background: #ff6200;
 }
 
 .red .centerLi {
-  background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  // background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
+  background: #d11122;
 }
 
 .slowJump {
@@ -312,31 +321,38 @@ ul {
   border-radius: 0.1rem;
 }
 
+.power {
+  margin-top: 0.1rem;
+  margin-right: 0.1rem;
+}
 
 .userinfo {
   @include cube;
 
-
   .lt {
     width: 31%;
     float: left;
     padding-right: 4%;
+    margin-top:  0.2rem;
 
     span {
       float: right;
-      margin-top: 16%;
 
       em {
         color: white;
-        font-size: 1.5rem;
+        font-size: 0.75rem;
+        line-height: 1.90rem;
         font-weight: bold;
+        letter-spacing: 0.03rem;
       }
 
       s {
         font-size: 0.4rem;
         float: right;
         text-align: right;
-        margin-top: 0.25rem;
+        margin-top: 0.43rem;
+        font-family: "Arial Black";
+        font-weight: bold;
       }
     }
   }
@@ -345,16 +361,16 @@ ul {
     width: 30%;
     float: left;
     padding-top: 3%;
-    height: 3rem;
+    height: 2rem;
 
     .head {
       @include cube;
-      height: 3rem;
+      height:  2rem;
 
       img {
         @include cube;
-        width: 2.6rem;
-        height: 2.6rem;
+        width: 1.7rem;
+        height: 1.7rem;
         border-radius: 250rem;
 
         &.girl {
@@ -369,25 +385,42 @@ ul {
 
     .names {
       @include cube;
-      width: 1.2rem;
+      width: 1.36rem;
       background: rgba(0, 0, 0, 0.7);
-      font-size: 0.3rem;
+      font-size: 0.25rem;
       text-align: center;
       padding: 1% 1%;
       border-radius: 250rem;
       position: relative;
-      bottom: 0.45rem;
+      bottom: 0.37rem;
+    }
+
+    .IsPrivate {
+      width: 0.6rem;
+      float: right;
+      position: relative;
+      right: -0.15rem;
+      bottom: 2.09rem;
+    }
+
+    .IsBirthday {
+      width: 1.1rem;
+      float: left;
+      position: relative;
+      bottom: 2.18rem;
+      left: 0.4rem;
     }
   }
 
   .rt {
-    width: 35%;
+    width: 32%;
     float: right;
+    margin-top:  0.2rem;
 
     .heartJump {
       width: 100%;
       float: right;
-      margin-top: 20%;
+      letter-spacing: 0.03rem;
 
       span {
         float: right;
@@ -398,9 +431,10 @@ ul {
       width: 100%;
       text-align: right;
       float: right;
-      font-size: 1.3rem;
+      font-size: 0.727rem;
+      line-height: 1.90rem;
       font-weight: bold;
-      padding-right: 20%;
+      padding-right: 15%;
     }
 
     em {
@@ -410,481 +444,223 @@ ul {
       text-align: right;
     }
 
-    s {
-      font-size: 0.4rem;
-      float: right;
-      text-align: right;
-      margin-top: 0.25rem;
-    }
-
     .heartImgContainer {
       width: 20%;
-      height: 2rem;
+      // height: 2rem;
       float: right;
     }
 
     img {
-      width: 0.5rem;
+      width: 0.36rem;
       float: right;
-      margin-right: 20%;
-      margin-top: 10%;
+      margin-right: 0%;
+      margin-top: 0.60rem;
     }
   }
 }
 
 .userSport {
   @include cube;
+  line-height: 0.8rem;
+  margin-top: 0.1rem;
 
   span {
     width: 33.333%;
-    display: inline-block;
+    float: left;  
 
     img {
-      width: 0.4rem;
-      margin-right: 0.2rem;
+      width: 0.32rem;
+      float: left;
+      margin-left: 0.36rem;
+      margin-top: 0.2rem;
     }
 
     em {
-      display: inline;
-      font-size: 0.45rem;
-      text-align: center;
+      float: left;
+      font-size:  0.38rem;
+      font-family: Georgia, Arial;
+      vertical-align: top;
+      margin-left: 0.12rem;
     }
   }
 }
 
-.IsPrivate {
-  width: 0.6rem;
-  float: right;
-  position: relative;
-  bottom: 2.9rem;
-}
-
-.IsBirthday {
-  width: 1.1rem;
-  float: left;
-  position: relative;
-  bottom: 2.18rem;
-  left: 0.4rem;
-}
 
 .max {
-  width: 12rem;
+  width: 9.5rem;
   height: 3.5rem;
-  margin-top: 20%;
-
-  .IsPrivate {
-    bottom: 2.2rem;
-  }
+  margin-top: 25%;
 
   .userinfo {
     height: 2.2rem;
   }
 
-  .lt span em {
-    font-size: 0.8rem;
-  }
-
-  .userinfo .head {
-    height: 2rem;
-
-    img {
-      width: 1.8rem;
-      height: 1.8rem;
-    }
-  }
-
-  .md {
-    height: 2rem;
-
-    .names {
-      width: 1.2rem;
-      font-size: 0.2rem;
-      bottom: 0.3rem;
-    }
-  }
-
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
-
-    .heartJump {
-      margin-top: 25%;
-    }
-
-    img {
-      width: 0.3rem;
-      margin-right: 10%;
-    }
-  }
-
   .userSport {
-    line-height: 0.5rem;
-
-    img {
-      width: 0.3rem;
+    span:nth-child(1)>img {
+      margin-left: 0.43rem;
     }
-
-    em {
-      font-size: 0.35rem;
+    span:nth-child(2)>img {
+      margin-left: 0.46rem;
+    }
+    span:nth-child(3)>img {
+      margin-left: 0.4rem;
     }
-  }
-
-  .IsPrivate {
-    width: 0.5rem;
-    float: right;
-    position: relative;
-    bottom: 2.1rem;
-    right: -0.1rem;
   }
 }
 
 .two {
-  width: 9rem;
-  height: 3rem;
-  margin-top: 0.2rem;
-
-  .IsPrivate {
-    bottom: 2.2rem;
-  }
+  width: 9.5rem;
+  height: 3.5rem;
+  margin-top: 0.1rem;
+  // margin-top: 0.2rem;
 
   .userinfo {
-    height: 2.1rem;
-  }
-
-  .lt span em {
-    font-size: 0.8rem;
-  }
-
-  .userinfo .head {
-    height: 1.9rem;
-
-    img {
-      width: 1.8rem;
-      height: 1.8rem;
-    }
-  }
-
-  .md {
-    height: 2.1rem;
-
-    .names {
-      width: 1.2rem;
-      font-size: 0.2rem;
-      bottom: 0.3rem;
-    }
-  }
-
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
-
-    .heartJump {
-      margin-top: 25%;
-    }
-
-    img {
-      width: 0.3rem;
-      margin-right: 10%;
-    }
+    height: 2.2rem;
   }
 
   .userSport {
-    line-height: 0;
-
-    img {
-      width: 0.25rem;
+    span:nth-child(1)>img {
+      margin-left: 0.43rem;
     }
-
-    em {
-      font-size: 0.3rem;
-    }
-  }
-
-  .IsPrivate {
-    width: 0.4rem;
-    float: right;
-    position: relative;
-    bottom: 1.95rem;
-    right: 0.0rem;
-  }
-        
-  .IsBirthday {
-    width: 1.1rem;
-    bottom: 2.1rem;
-    left: 0.4rem;
-  }
-}
-
-.three {
-  width: 9.5rem;
-  height: 4rem;
-  margin-top: 0.3rem;
-
-  .lt span em {
-    font-size: 1.2rem;
-  }
-
-  .md {
-    height: 2.5rem;
-  }
-
-  .userinfo .head {
-    height: 2.6rem;
-
-    img {
-      width: 2.2rem;
-      height: 2.2rem;
+    span:nth-child(2)>img {
+      margin-left: 0.46rem;
     }
-  }
-
-  .rt span {
-    font-size: 1rem;
-    padding-right: 10%;
-
-    img {
-      width: 0.4rem;
-      margin-right: 10%;
+    span:nth-child(3)>img {
+      margin-left: 0.4rem;
     }
   }
-
-  .userSport {
-    line-height: 0.5rem;
-  }
 }
 
+.ten {
+  width: 3.12rem;
+  height: 1.46rem;
+  margin-top: 0.1rem;
 
-.five {
-  width: 6.3rem;
-  height: 2.8rem;
-  margin-top: 0.3rem;
-
-  .lt span {
-    margin-top: 10%;
-
-    em {
-      font-size: 0.7rem;
-      font-weight: 600;
-    }
-  }
-
-  .userinfo {
-    height: 1.9rem;
-  }
-
-  .userinfo .head {
-    height: 1.7rem;
-
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    .names {
-      width: 1.4rem;
-    }
-  }
-
-  .md .IsPrivate {
-    width: 0.5rem;
-    bottom: 1.9rem;
-  }
-
-  .rt span {
-    font-size: 0.7rem;
-    padding-right: 5%;
-
-    img {
-      width: 0.3rem;
-      margin-right: 10%;
-    }
-  }
-
-  .userSport {
-    line-height: 0.15rem;
-
-    img {
-      width: 0.3rem;
-    }
-
-    em {
-      font-size: 0.3rem;
-    }
+  .power {
+    margin-top: 0.03rem;
+    margin-right: 0.01rem;
   }
-}
 
-
-.sixteen {
-  width: 4.7rem;
-  height: 2.15rem;
-  margin-top: 0.2rem;
-
-  .lt span {
-    margin-top: 3%;
-    line-height: 1rem;
-
-    em {
-      font-size: 0.55rem;
-    }
-
-    s {
-      font-size: 0.25rem;
-      margin-top: -0.1rem;
-    }
+  /deep/ .powerContainer {
+    height: 0.16rem;
   }
 
-  .md {
-    padding-top: 0;
+  /deep/ .powerContainer img {
+    position: relative;
+    right: -0.1rem;
+    bottom: 0.1rem;
+    width: 0.2rem;
   }
 
   .userinfo {
-    height: 1.33rem;
-  }
-
-  .userinfo .head {
-    height: 1.4rem;
-
-    img {
-      width: 1.3rem;
-      height: 1.3rem;
-    }
-
-    .names {
-      width: 1.2rem;
-      font-size: 0.2rem;
-    }
-  }
+    height: 0.92rem;
 
-  .md {
-    height: 1.5rem;
-
-    .IsPrivate {
-      width: 0.3rem;
-      bottom: 1.45rem;
-    }
-  }
-
-  .rt span {
-    line-height: 0.8rem;
-    font-size: 0.55rem;
-    padding-right: 5%;
+    .lt {
+      width: 33%;
+      margin-top: -0.55rem;
+      padding-right: 2.5%;
 
-    img {
-      width: 0.25rem;
-      margin-right: 5%;
-    }
+      em {
+        font-size: 0.38rem;
+        line-height: 2.0rem;
+        letter-spacing: 0.01rem;
+      }
 
-    .heartJump {
-      margin-top: 20%;
+      s {
+        font-size: 0.2rem;
+        margin-top: 0.73rem;
+      }
     }
-  }
 
-  .userSport {
-    line-height: 0.01rem;
+    .md {
+      height: 1.0rem;
+      margin-top: -0.01rem;
+      
+      .head {
+        height: 0.9rem;
 
-    img {
-      width: 0.2rem;
-    }
-
-    em {
-      font-size: 0.2rem;
+        img {
+          width: 0.75rem;
+          height: 0.75rem;
+          border-width: 2px !important;
+        }
+      }
+          
+      .names {
+        width: 0.72rem !important;
+        font-size: 0.15rem !important;
+        bottom: 0.22rem !important;
+      }
+          
+      .IsPrivate {
+        width: 0.25rem;
+        bottom: 0.92rem;
+        // bottom: 2.65rem;
+        right: -0.03rem;
+      }
+        
+      .IsBirthday {
+        width: 0.49rem;
+        bottom: 0.98rem;
+        left: 0.23rem;
+      }
     }
-  }
-}
+    
+    .rt {
+      margin-top: -0.55rem;
 
-.twentyFive {
-  width: 3.16rem;
-  height: 1.55rem;
-  margin-top: 0.1rem;
+      span {
+        font-size: 0.345rem;
+        line-height: 2.0rem;
+        padding-right: 5%;
+        
+        em {
+          letter-spacing: 0.01rem; 
+        }
+      }
 
-  .lt span {
-    margin-top: 3%;
-    line-height: 0.5rem;
+      .heartJump {
+        margin-right: 0.12rem;
+      }
 
-    em {
-      font-size: 0.4rem;
-    }
+      .heartImgContainer {
+        width: 20%;
+      }
 
-    s {
-      font-size: 0.2rem;
-      margin-top: 0rem;
+      img {
+        width: 0.16rem;
+        margin-right: 0%;
+        margin-top: 0.8rem;
+      }
     }
   }
 
-  .md {
-    padding-top: 0;
-  }
-
-  .userinfo {
-    position: relative;
-    bottom: 0.1rem;
-    height: 0.8rem;
-  }
-
-  .userinfo .head {
-    height: 0.9rem;
+  .userSport {
+    line-height: 0.3rem;
+    margin-top: 0rem;
 
     img {
-      width: 0.7rem;
-      height: 0.7rem;
-    }
-
-    .names {
-      width: 0.7rem;
-      font-size: 0.15rem;
-      bottom: 0.2rem;
-    }
-  }
-
-  .md {
-    height: 1.1rem;
-
-    .IsPrivate {
-      width: 0.2rem;
-      bottom: 0.9rem;
+      width: 0.18rem;
+      margin-top: 0.08rem;
     }
-  }
-
-  .rt span {
-    line-height: 0.8rem;
-    font-size: 0.45rem;
-    padding-right: 5%;
 
-    img {
-      width: 0.15rem;
-      margin-right: 5%;
+    span:nth-child(1)>img {
+      margin-left: 0.23rem;
     }
-
-    .heartJump {
-      margin-top: 10%;
+    span:nth-child(2)>img {
+      margin-left: 0.23rem;
     }
-  }
-
-  .userSport {
-    position: relative;
-    bottom: 0.1rem;
-    line-height: 0rem;
-
-    img {
-      width: 0.15rem;
+    span:nth-child(3)>img {
+      margin-left: 0.2rem;
     }
 
     em {
-      font-size: 0.15rem;
+      font-size: 0.2rem;
+      margin-top: 0.03rem;
+      margin-left: 0.06rem;
+      // line-height: 0.8rem;
     }
   }
-
-  .IsBirthday {
-    width: 0.46rem;
-    bottom: 0.95rem;
-    left: 0.24rem;
-  }
-
-  /deep/ .powerContainer img {
-    position: relative;
-    right: -0.1rem;
-    bottom: 0.1rem;
-    width: 0.2rem;
-  }
 }
 
 .fakePart {

src/views/2pkRank.vue

@@ -106,6 +106,7 @@
             <div class="ltTitle">
               <span>排名</span>
               <span>成员</span>
+              <span>Ei</span>
               <span>CK</span>
             </div>
             <li v-for="(s,i) in students.redUnite" v-if="i <= 7" v-show="Listate[i].state"
@@ -122,10 +123,9 @@
                   <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
                   <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                   <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
-                  </span>
-                <span class="score">
-                  {{ s.Ck|fmtFloat }}
-              </span>
+                </span>
+                <span class="eiScore">{{ s.EI|fmtInt }}</span>
+                <span class="score">{{ s.Ck|fmtFloat }}</span>
               </div>
             </li>
           </ul>
@@ -135,6 +135,7 @@
             <div class="ltTitle">
               <span>排名</span>
               <span>成员</span>
+              <span>Ei</span>
               <span>CK</span>
             </div>
             <li v-for="(s,i) in students.blueUnite" v-if="i <= 7" v-show="Listate[i].state"
@@ -152,9 +153,8 @@
                   <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                   <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->                
                 </span>
-                <span class="score">
-                  {{ s.Ck|fmtFloat }}
-              </span>
+                <span class="eiScore">{{ s.EI|fmtInt }}</span>
+                <span class="score">{{ s.Ck|fmtFloat }}</span>
               </div>
             </li>
           </ul>
@@ -855,7 +855,11 @@ export default {
           font-size: 0.3rem;
 
           &:nth-child(1) {
-            margin-right: 1.5rem;
+            margin-right: 1.4rem;
+          }
+
+          &:nth-child(2) {
+            margin-right: 3.5rem;
           }
 
           &:last-child {
@@ -944,14 +948,16 @@ export default {
             font-size: 0.3rem;
             line-height: 0.6rem;
             margin-left: 0.4rem;
-            min-width: 3.5rem;
+            min-width: 2rem;
             text-align: left;
           }
 
           .glory {
             float: left;
-            margin-left: 0.4rem;
-
+            margin-left: 0rem;
+            min-width: 0.8rem;
+            min-height: 0.2rem;
+            
             img {
               float: right;
               width: 0.6rem;
@@ -960,6 +966,19 @@ export default {
             }
           }
 
+          .eiScore {
+            float: left;
+            color: white;
+            width: 0.9rem;
+            font-size: 0.3rem;
+            line-height: 0.6rem;
+            font-family: Arial;
+            font-weight: bold;
+            font-style: italic;
+            text-align: left;
+            padding-left: 1.26rem;
+          }
+
           .score {
             float: right;
             color: #FFE61F;

src/views/3pkRank.vue

@@ -134,8 +134,8 @@
         </div>
       </div>
       <div class="vsSign">
-        <img class="ltvsSign" src="../assets/imgs/pk/vs.png" alt="">
-        <img class="rtvsSign" src="../assets/imgs/pk/vs.png" alt="">
+        <img src="../assets/imgs/pk/vs.png" alt="">
+        <img src="../assets/imgs/pk/vs.png" alt="">
       </div>
 
       <div class="listContainer">
@@ -144,6 +144,7 @@
             <div class="ltTitle">
               <span>排名</span>
               <span>成员</span>
+              <span>Ei</span>
               <span>CK</span>
             </div>
             <li v-for="(s,i) in students.redUnite" v-if="i <= 7" v-show="Listate[i].state"
@@ -161,9 +162,8 @@
                   <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                   <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
                 </span>
-                <span class="score">
-                  {{ s.Ck|fmtFloat }}
-              </span>
+                <span class="eiScore">{{ s.EI|fmtInt }}</span>
+                <span class="score">{{ s.Ck|fmtFloat }}</span>
               </div>
             </li>
           </ul>
@@ -174,6 +174,7 @@
             <div class="ltTitle">
               <span>排名</span>
               <span>成员</span>
+              <span>Ei</span>
               <span>CK</span>
             </div>
             <li v-for="(s,i) in students.blueUnite" v-if="i <= 7" v-show="Listate[i].state"
@@ -191,9 +192,8 @@
                   <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                   <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->                  
                 </span>
-                <span class="score">
-                  {{ s.Ck|fmtFloat }}
-              </span>
+                <span class="eiScore">{{ s.EI|fmtInt }}</span>
+                <span class="score">{{ s.Ck|fmtFloat }}</span>
               </div>
             </li>
           </ul>
@@ -204,6 +204,7 @@
             <div class="ltTitle">
               <span>排名</span>
               <span>成员</span>
+              <span>Ei</span>
               <span>CK</span>
             </div>
             <li v-for="(s,i) in students.yellowUnite" v-if="i <= 7" v-show="Listate[i].state"
@@ -221,9 +222,8 @@
                   <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                   <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
                 </span>
-                <span class="score">
-                  {{ s.Ck|fmtFloat }}
-              </span>
+                <span class="eiScore">{{ s.EI|fmtInt }}</span>
+                <span class="score">{{ s.Ck|fmtFloat }}</span>
               </div>
             </li>
           </ul>
@@ -756,6 +756,7 @@ export default {
       })
     },
     jumpWait(totalTime) {
+      // return;
       // 倒计时60秒自动关闭
       let that = this;
       clearInterval(clock);
@@ -836,7 +837,7 @@ export default {
 }
 
 .content {
-  background: url("../../src/assets/imgs/3pkRank/3pkBg.png");
+  background: url("../../src/assets/imgs/3pkRank/3pkBg2.png");
   @include bg;
 
   .pageTitle {
@@ -1008,7 +1009,7 @@ export default {
   .pageDetail {
     .sumTitle {
       @include cube;
-      width: 92%;
+      width: 98%;
       margin-top: 0.7rem;
       overflow: visible;
 
@@ -1030,7 +1031,7 @@ export default {
       .titleRow {
         @include cube;
         width: 90%;
-        height: 0.7rem;
+        height: 0.58rem;
         overflow: visible;
 
         &.redRow {
@@ -1118,36 +1119,37 @@ export default {
 
       img:nth-child(1) {
         float: left;
-        left: 31.7%;
+        left: 31.15%;
       }
 
       img:nth-child(2) {
         float: right;
-        right: 31.7%;
+        right: 30.56%;
       }
     }
 
     .listContainer {
       @include cube;
-      width: 92%;
+      width: 100%;
       position: relative;
       bottom: 1.5rem;      
 
       .lt {
         width: 32.5%;
         float: left;
+        margin-left: 0.25rem;
       }
 
       .md {
         width: 32.5%;
         float: left;
-        padding-left: 1.75%;
+        margin-left: 0.18rem;
       }
 
       .rt {
         width: 32%;
         float: right;
-        padding-left: 0.1rem;
+        margin-left: 0.15rem;
       }
 
       .ltTitle {
@@ -1160,9 +1162,13 @@ export default {
           font-size: 0.3rem;
 
           &:nth-child(1) {
-            margin-right: 1.25rem;
+            margin-right: 1.1rem;
           }
 
+          &:nth-child(2) {
+            margin-right: 1.62rem;
+          }
+          
           &:last-child {
             float: right;
             padding-right: 0.4rem;
@@ -1253,23 +1259,37 @@ export default {
             color: white;
             font-size: 0.3rem;
             line-height: 0.6rem;
-            margin-left: 0.3rem;
-            min-width: 0.9rem;
+            margin-left: 0.2rem;
+            min-width: 1.2rem;
             text-align: left;
           }
 
           .glory {
             float: left;
-            margin-left: 0.4rem;
+            margin-left: 0.2rem;
+            min-width: 0.6rem;
+            min-height: 0.2rem;
 
             img {
               float: right;
               width: 0.6rem;
-              margin-left: 0.2rem;
+              // margin-left: 0.2rem;
               margin-top: 0.1rem;
             }
           }
 
+          .eiScore {
+            float: left;
+            color: white;
+            font-size: 0.3rem;
+            line-height: 0.6rem;
+            font-family: Arial;
+            font-weight: bold;
+            font-style: italic;
+            text-align: center;
+            padding-left: 0.2rem;
+          }        
+
           .score {
             float: right;
             color: #FFE61F;

src/views/Index.vue

@@ -35,7 +35,7 @@ export default {
       editableTabsValue: '1',
       curVersion: '2.0',
       isPad: true,// pad 展示版本
-      ClentHeight: document.documentElement.clientHeight + 'px'
+      ClentHeight: document.documentElement.clientHeight + 'px',
     }
   },
   mounted() {
@@ -49,9 +49,9 @@ export default {
     getCurVersion() {
       let that = this;
       //浏览器默认的
-      // localStorage.eqSn = '30:9C:23:0C:8B:1E';
-      localStorage.eqSn = 'd104bd6ffec3d5ba';
-      localStorage.version = '2.1.6';
+      localStorage.eqSn = '30:9C:23:0C:8B:1E';
+      // localStorage.eqSn = 'd104bd6ffec3d5ba';
+      localStorage.version = '2.2.0';
 
       if (window.plus) {
         plusReady();
@@ -85,7 +85,7 @@ export default {
 
             // 公司测试机用公司版本升级 
             // if (uuid == "1277fcb4c81e29d2" || uuid == "8e501b0bde9ce600") {
-            if (uuid == "d104bd6ffec3d5ba") { // 内测版
+            if (uuid == "d104bd6ffec3d5ba" || uuid == "30:9C:23:0C:8B:1E") { // 内测版
               that.testMode = true;                 
             } else {  // 正式版
               that.testMode = false;            
@@ -95,6 +95,10 @@ export default {
             if (runVersion == 'outDoor') {
               console.log('户外版禁用自动升级');
               return false
+            } else if (runVersion == 'localtest') {
+              console.log('本机测试禁用自动升级');
+              plus.nativeUI.toast("本机测试 禁用自动升级 UUID: " + uuid);
+              return false
             } else {
               that.checkUpdate();
 
@@ -174,8 +178,14 @@ export default {
     getServeIpAddress(eqsn) {
       const that = this;
       let url = '';
-      if (runVersion == 'test') {
-        headapi = "http://cal.beswell.com:85/DataTransfer/";  //演示模式
+      if (runVersion == 'test') {   //演示模式
+        headapi = "http://cal.beswell.com:85/DataTransfer/";
+        console.log("runVersion = " + runVersion + " headapi = " + headapi);
+        return false
+      }
+      if (runVersion == 'localtest') {   //本机测试 TV端映射到本机进行测试
+        headapi = "http://127.0.0.1/";
+        console.log("runVersion = " + runVersion + " headapi = " + headapi);
         return false
       }
       // 测试使用0.3心率系统

src/views/Main.vue

@@ -324,14 +324,14 @@ export default {
             numberClass = 'two';
             break;
           case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
-            numberClass = 'three';
+            numberClass = 'four';
             break;
           case  parseInt(res.length) <= 9 && parseInt(res.length) > 4:
-            numberClass = 'five';
-            break;
-          case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
             numberClass = 'nine';
             break;
+          // case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
+          //   numberClass = 'nine';
+          //   break;
           case parseInt(res.length) <= 16 && parseInt(res.length) > 9:
             numberClass = 'sixteen';
             break;

src/views/Rank.vue

@@ -82,7 +82,7 @@
           <div class="ltTitle">
             <span>排名</span>
             <span>成员</span>
-            <span class="titleEI">EI</span>
+            <span class="titleEI">Ei</span>
           </div>
           <li v-for="(s,i) in students.EiSort" v-if="i <= 7" v-show="Listate[i].state"
               :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">

src/views/Wait.vue

@@ -482,6 +482,11 @@ ul, li {
   src: url('../assets/font/Artifakt.ttf');
 }
 
+@font-face {
+  font-family: Georgia;
+  src: url('../assets/font/Georgia.ttf');
+}
+
 $font-color: white;
 $yellow: #FFEB50;
 @mixin cube {

src/views/pk.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="pages">
     <Headside></Headside>
-    <div class="pageTitle">
-    </div>
+    <div class="pageTitle"></div>
+    <div class="time">{{ classInfo.endTime }}</div>
     <div class="progressContainer">
       <div class="valueDisplay">
         <div class="lt">
@@ -39,16 +39,16 @@
         <div class="bottomLine redBottom"></div>
       </div>
       <div class="md">
-        {{ classInfo.endTime }}
+        <!-- {{ classInfo.endTime }} -->
       </div>
       <div class="rt">
         <pkstudent :students="students.blueUnite"></pkstudent>
         <div class="bottomLine blueBottom"></div>
       </div>
     </div>
-    <div class="icons">
+    <!-- <div class="icons">
       <img src="../assets/imgs/pk/icons2.svg" alt="">
-    </div>
+    </div> -->
     <!--    突破纪录-->
     <newRecord :toper-info="toperInfo"></newRecord>
     <!--    欢迎新同学-->
@@ -121,10 +121,10 @@ export default {
         percent: 0,
         studentTime: 15
       },
-      Redflag: 3,
-      BlueFlag: 3,
-      RedProgress: 21,
-      BlueProgress: 21,
+      Redflag: 5,
+      BlueFlag: 5,
+      RedProgress: 23,
+      BlueProgress: 23,
     }
   },
   mounted() {
@@ -326,46 +326,61 @@ export default {
       let blueFmtSum = 0;
       let pkval = 0;
       Rs.redUnite.map(function (item, t) {
-        redFmtSum += parseFloat(item.FormatCk);
+        // redFmtSum += parseFloat(item.FormatCk);
+        redFmtSum += parseFloat(item.Ck);
       });
       Rs.blueUnite.map(function (item, t) {
-        blueFmtSum += parseFloat(item.FormatCk);
+        // blueFmtSum += parseFloat(item.FormatCk);
+        blueFmtSum += parseFloat(item.Ck);
       });
 
       let sumMax = 0;
-      if (Rs.redUnite) {
-        sumMax = (Rs.redUnite.length + Rs.blueUnite.length) * 20;
+      let maxLength = Rs.redUnite.length;
+      if (maxLength < Rs.blueUnite.length) {
+        maxLength = Rs.blueUnite.length;        
       }
+      sumMax = maxLength * 20;
 
       // 当为0时均分
-      if (redFmtSum == 0) {
-        that.Redflag = 3;
-        that.RedProgress = 21;
+      // redFmtSum = 0;
+      if (redFmtSum == 0) { 
+        that.Redflag = 5;
+        that.RedProgress = 23;
       } else {
         // 限制最大
         let redPercent = parseInt((redFmtSum / sumMax) * 100);
         redPercent = redPercent > 100 ? 100 : redPercent;
-        that.Redflag = redPercent * 0.70;
-        that.Redflag = that.Redflag >= 3 ? that.Redflag : 3;
+        that.Redflag = redPercent * 0.7468 + 5;
+        // that.Redflag = redPercent * 0.70;
+        // that.Redflag = that.Redflag >= 5 ? that.Redflag : 5;
         that.RedProgress = that.Redflag + 18.2;
-        if (that.RedProgress > 90) {
-          that.RedProgress = 90
+        if (that.RedProgress > 97.88) {
+          that.RedProgress = 97.88
         }
+        // that.Redflag = 79.68;
+        // that.RedProgress = 97.88;
+        // console.log("redFmtSum:" + redFmtSum);
+        // console.log("RedProgress:" + that.RedProgress);
       }
 
       if (blueFmtSum == 0) {
-        that.BlueFlag = 3;
-        that.BlueProgress = 21;
+        that.BlueFlag = 5;
+        that.BlueProgress = 23;
       } else {
         // 限制最大
         let bluePercent = parseInt((blueFmtSum / sumMax) * 100);
         bluePercent = bluePercent > 100 ? 100 : bluePercent;
-        that.BlueFlag = bluePercent * 0.70;
-        that.BlueFlag = that.BlueFlag >= 3 ? that.BlueFlag : 3;
+        that.BlueFlag = bluePercent * 0.7468 + 5;
+        // that.BlueFlag = bluePercent * 0.70;
+        // that.BlueFlag = that.BlueFlag >= 5 ? that.BlueFlag : 5;
         that.BlueProgress = that.BlueFlag + 18.2;
-        if (that.BlueProgress > 90) {
-          that.BlueProgress = 90
+        if (that.BlueProgress > 97.88) {
+          that.BlueProgress = 97.88
         }
+        // that.BlueFlag = 79.68;
+        // that.BlueProgress = 97.88;
+        // console.log("blueFmtSum:" + blueFmtSum);
+        // console.log("BlueProgress:" + that.BlueProgress);
       }
 
     },
@@ -513,7 +528,7 @@ export default {
 }
 
 .pages {
-  background: url("../assets/imgs/pk/pkbg.png");
+  background: url("../assets/imgs/pk/pkbg2.png");
   @include bg;
 
   .pageTitle {
@@ -522,21 +537,38 @@ export default {
     background-position: top center;
     background-size: 100% 100%;
     @include cube;
-    width: 2rem;
-    height: 1rem;
+    width: 98%;
+    height: 0.66rem;
+    margin-top: -0.38rem;
+    margin-right: 2.8rem;
+  }
+
+  .time {
+    width: 10%;
+    color: white;
+    text-align: center;
+    font-size: 0.32rem;
+    margin: 0 auto;
+    margin-top: 0rem;
   }
 
   .progressContainer {
+    // @include cube;
+    // height: 2.8rem;
+    position: relative;
+    // margin-top: 2rem;
+
     .valueDisplay {
       @include cube;
       height: 2rem;
-      overflow: hidden;
+      overflow: visible;
+      position: relative;
 
       .lt {
         width: 50%;
         float: left;
 
-        span {
+        span {          
           float: right;
           background: url("../assets/imgs/pk/redFlag.png");
           background-repeat: no-repeat;
@@ -559,7 +591,7 @@ export default {
 
       span {
         position: relative;
-        top: 0.1rem;
+        top: -0.26rem;
         width: 1.9rem;
         height: 0.9rem;
         float: left;
@@ -576,13 +608,15 @@ export default {
 
       .md {
         @include cube;
-        width: 1.6rem;
-        position: relative;
-        bottom: 0.4rem;
-        z-index: 444;
+        width: 100%;
+        position: absolute;
+        // margin: 0 auto;
+        bottom: 0.39rem;
+        z-index: 555;
 
         img {
           @include cube;
+          width: 1.6rem;
         }
       }
     }
@@ -592,8 +626,11 @@ export default {
 .lineContianer {
   position: relative;
   @include cube;
-  bottom: 1.2rem;
+  // width: 98%;
+  bottom: 1.60rem;
+  // top:0rem;
   z-index: 222;
+  // overflow: visible;
 
   .lt {
     width: 50%;
@@ -602,6 +639,7 @@ export default {
     span {
       width: 4rem;
       float: right;
+      // border-radius: 3px;
       background: linear-gradient(to right, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);
     }
 
@@ -651,15 +689,15 @@ export default {
 
 .userPart {
   @include cube;
-  width: 88%;
+  width: 98%;
   position: relative;
-  bottom: 1.1rem;
-  height: 7.4rem;
+  bottom: 1.35rem;
+  height: 8.6rem;
 
   .lt {
     @include cube;
     position: relative;
-    width: 45%;
+    width: 46.99%;
     height: 100%;
     float: left;
 
@@ -667,18 +705,17 @@ export default {
       position: absolute;
       bottom: 0;
       @include cube;
-      height: 0.25rem;
+      height: 0.85rem;
       border-radius: 18px;
       opacity: 0.8;
       background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(209, 17, 34, 0.62) 100%);
-
     }
   }
 
   .rt {
     @include cube;
     position: relative;
-    width: 45%;
+    width: 46.99%;
     height: 100%;
     float: right;
 
@@ -686,7 +723,7 @@ export default {
       position: absolute;
       bottom: 0;
       @include cube;
-      height: 0.25rem;
+      height: 0.85rem;
       border-radius: 18px;
       opacity: 0.8;
       background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 134, 232, 0.62) 100%);
@@ -694,7 +731,7 @@ export default {
   }
 
   .md {
-    width: 10%;
+    width: 6%;
     float: left;
     color: white;
     text-align: center;

src/views/threepk.vue

@@ -59,9 +59,9 @@
         <div class="bottomLine yellowBottom"></div>
       </div>
     </div>
-    <div class="icons">
+    <!-- <div class="icons">
       <img src="../assets/imgs/pk/icons2.svg" alt="">
-    </div>
+    </div> -->
     <!--    突破纪录-->
     <newRecord :toper-info="toperInfo"></newRecord>
     <!--    欢迎新同学-->
@@ -356,19 +356,27 @@ export default {
       let yellowFmtSum = 0;
       let pkval = 0;
       Rs.redUnite.map(function (item, t) {
-        redFmtSum += parseFloat(item.FormatCk);
+        // redFmtSum += parseFloat(item.FormatCk);
+        redFmtSum += parseFloat(item.Ck);
       });
       Rs.blueUnite.map(function (item, t) {
-        blueFmtSum += parseFloat(item.FormatCk);
+        // blueFmtSum += parseFloat(item.FormatCk);
+        blueFmtSum += parseFloat(item.Ck);
       });
       Rs.yellowUnite.map(function (item, t) {
-        yellowFmtSum += parseFloat(item.FormatCk);
+        // yellowFmtSum += parseFloat(item.FormatCk);
+        yellowFmtSum += parseFloat(item.Ck);
       });
 
       let sumMax = 0;
-      if (Rs.redUnite) {
-        sumMax = (Rs.redUnite.length + Rs.blueUnite.length + Rs.yellowUnite.length) * 20;
+      let maxLength = Rs.redUnite.length;
+      if (maxLength < Rs.blueUnite.length) {
+        maxLength = Rs.blueUnite.length;        
+      }
+      if (maxLength < Rs.yellowUnite.length) {
+        maxLength = Rs.yellowUnite.length;        
       }
+      sumMax = maxLength * 20;
 
       // 当为0时均分
       if (redFmtSum == 0) {
@@ -378,14 +386,15 @@ export default {
         // 限制最大
         let redPercent = parseInt((redFmtSum / sumMax) * 100);
         redPercent = redPercent > 100 ? 100 : redPercent;
-        that.Redflag = redPercent * 0.70;
+        that.Redflag = redPercent * 0.71;
         that.RedProgress = that.Redflag + 28
         if (that.RedProgress > 100) {
           that.RedProgress = 100
         }
-        // if (that.Redflag > 75) {
-        //   that.Redflag = 75
-        // }
+        // that.Redflag = 72;
+        // that.RedProgress = 100;
+        // console.log("redFmtSum:" + redFmtSum);
+        // console.log("RedProgress:" + that.RedProgress);
       }
 
       if (blueFmtSum == 0) {
@@ -395,11 +404,15 @@ export default {
         // 限制最大
         let bluePercent = parseInt((blueFmtSum / sumMax) * 100);
         bluePercent = bluePercent > 100 ? 100 : bluePercent;
-        that.BlueFlag = bluePercent * 0.70;
+        that.BlueFlag = bluePercent * 0.71;
         that.BlueProgress = that.BlueFlag + 28
         if (that.BlueProgress > 100) {
           that.BlueProgress = 100
         }
+        // that.BlueFlag = 72;
+        // that.BlueProgress = 100;
+        // console.log("blueFmtSum:" + blueFmtSum);
+        // console.log("BlueProgress:" + that.BlueProgress);
       }
 
       if (yellowFmtSum == 0) {
@@ -409,11 +422,15 @@ export default {
         // 限制最大
         let yellowPercent = parseInt((yellowFmtSum / sumMax) * 100);
         yellowPercent = yellowPercent > 100 ? 100 : yellowPercent;
-        that.yellowFlag = yellowPercent * 0.715;
+        that.yellowFlag = yellowPercent * 0.725;
         that.yellowProgress = that.yellowFlag + 28
         if (that.yellowProgress > 100) {
           that.yellowProgress = 100
         }
+        // that.yellowFlag = 72;
+        // that.yellowProgress = 100;
+        // console.log("yellowFmtSum:" + yellowFmtSum);
+        // console.log("yellowProgress:" + that.yellowProgress);
       }
     },
     // 获取上课学生信息
@@ -562,7 +579,7 @@ export default {
 }
 
 .pages {
-  background: url("../assets/imgs/three/threeBg2.png");
+  background: url("../assets/imgs/three/threeBg3.png");
   @include bg;
 
   .pageTitle {
@@ -571,14 +588,16 @@ export default {
     background-position: top center;
     background-size: 100% 100%;
     @include cube;
-    width: 2rem;
+    width: 98%;
     height: 0.65rem;
     overflow: visible;
-
+    margin-top: -0.36rem;
+    margin-right: 2.8rem;
+    
     em {
       position: relative;
-      top: 0.2rem;
-      left: 3.6rem;
+      top: 0.11rem;
+      right: 6.3rem;
       float: right;
       color: white;
       font-size: 0.3rem;
@@ -587,12 +606,16 @@ export default {
   }
 
   .progressContainer {
+    @include cube;
+    height: 2.8rem;
+    position: relative;
+
     .valueDisplay {
       @include cube;
       width: 98%;
       height: 2rem;
       overflow: hidden;
-      margin-top: 0.4rem;
+      margin-top: -0.03rem;
 
       .lt {
         width: 33.33%;
@@ -650,11 +673,6 @@ export default {
   }
 }
 
-.progressContainer {
-  @include cube;
-  height: 2.8rem;
-}
-
 .lineContianer {
   position: relative;
   @include cube;
@@ -681,8 +699,7 @@ export default {
       }
     }
   }
-  
-  
+    
   .lt {
     width: 33.33%;
     float: left;
@@ -692,13 +709,13 @@ export default {
       float: left;
       border-radius: 3px;
       background: linear-gradient(to left, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);
-
     }
 
     em {
       position: absolute;
       float: left;
       left: 1%;
+      margin-top: 0.05rem;
       width: 1.6rem;
       color: white;
       text-align: right;
@@ -723,6 +740,7 @@ export default {
       position: absolute;
       float: left;
       left: 35%;
+      margin-top: 0.05rem;
       width: 1.6rem;
       color: white;
       text-align: right;
@@ -746,6 +764,7 @@ export default {
       position: absolute;
       float: left;
       left: 69%;
+      margin-top: 0.05rem;
       width: 1.6rem;
       color: white;
       text-align: right;
@@ -761,16 +780,16 @@ export default {
 
 .userPart {
   @include cube;
-  width: 100%;
+  width: 98%;
   position: relative;
   bottom: 1rem;
-  height: 6.8rem;
+  height: 8.2rem;
   padding-top: 0.1rem;
 
   .lt {
     @include cube;
     position: relative;
-    width: 33.33%;
+    width: 32.5%;
     height: 100%;
     float: left;
 
@@ -778,7 +797,7 @@ export default {
       position: absolute;
       bottom: 0;
       @include cube;
-      height: 0.25rem;
+      height: 0.85rem;
       border-radius: 18px;
       opacity: 0.8;
       background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(209, 17, 34, 0.62) 100%);
@@ -789,15 +808,16 @@ export default {
   .md {
     @include cube;
     position: relative;
-    width: 33.33%;
+    width: 32.5%;
     height: 100%;
     float: left;
+    margin-left: 0.26rem;
 
     .bottomLine {
       position: absolute;
       bottom: 0;
       @include cube;
-      height: 0.25rem;
+      height: 0.85rem;
       border-radius: 18px;
       opacity: 0.8;
       background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 134, 232, 0.62) 100%);
@@ -807,15 +827,17 @@ export default {
   .rt {
     @include cube;
     position: relative;
-    width: 33.33%;
+    width: 32.5%;
     height: 100%;
     float: right;
+    margin-left: 0.02rem;
+
 
     .bottomLine {
       position: absolute;
       bottom: 0;
       @include cube;
-      height: 0.25rem;
+      height: 0.85rem;
       border-radius: 18px;
       opacity: 0.8;
       background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(216, 191, 0, 0.9) 100%);