Signed-off-by: Changpeng Duan <838560574@qq.com>

app/src/page/mainpage.vue

@@ -6,7 +6,8 @@
         </span>
     <ul class="list">
       <li v-for="l in list" @click="goAppoint(l)" v-if="l.Status == 1 ">
-        <img src="../static/images/main/771.png" height="133" width="130"/>
+        <img src="../static/images/main/shop.jpg" width="130px" v-if="l.ShopID == 4"/>
+        <img src="../static/images/main/shop2.jpg" width="130px" v-else/>
         <div class="rt">
           <h5>{{ l.ShopName }}</h5>
           <span>今日预约名额剩余

pc/src/assets/css/panel.css

@@ -375,10 +375,14 @@ input[type="number"] {
         padding: 0;
     }
     .panel /deep/ .el-input__inner {
-        padding-right:3px
+        padding-right:3px;
     }
     .panel .el-date-editor .el-range-input {
         width: 44%;
     }
+    .panel /deep/ .el-col-4 {
+        padding-left: 1px!important;
+        padding-right: 1px!important;
+    }
 }
 

pc/src/views/EditLessonManage.vue

@@ -394,6 +394,10 @@ export default {
         this.$message.error('名称不能大于20个字符');
         return false
       }
+      if (!this.checkData()) {
+        return false
+      }
+
       let that = this;
 
       that.serachBtnStatus = true;
@@ -428,7 +432,7 @@ export default {
     EditLessonTable(planId) {
       let that = this;
       // 校验提交的数据
-      if (!this.checkData) {
+      if (!this.checkData()) {
         return false
       }
       // 提交数据
@@ -512,14 +516,28 @@ export default {
       ];
 
     },
-    // 检查数据
     checkData() {
+      let res = true
+      for (let i = 0; i < this.tabs.length; i++) {
+        for (let j = 0; j < this.tabs[i].tableData.length; j++) {
+          if (!this.tabs[i].tableData[j].ClassId) {
+            let days = numberToWeekdays(i+1);
+            let lessonIndex = j + 1;
+            this.$message.error(days + '第' + lessonIndex + '节课有课程未选择，请选择后再提交')
+            res =  false
+            break;
+          }
+        }
+      }
+      return res
+    },
+    // 检查数据
+    checkData2() {
       // todo
       let tableDate = this.tabs;
       tableDate.map(function (item) {
         console.log(item);
       })
-
     },
     // 新增一行
     addRow() {

pc/src/views/EditLessonTable.vue

@@ -324,6 +324,9 @@ export default {
         this.$message.error('模板名称不能大于20个字符');
         return false
       }
+      if (!this.checkData()) {
+        return false
+      }
       let param = {
         token: localStorage.token,
         planId: this.$route.query.id,
@@ -361,11 +364,9 @@ export default {
         this.$message.error('模板名称不能大于20个字符');
         return false
       }
-      // if (!this.checkData()){
-      //     return false
-      // }
-      // console.log('准备完毕了');
-      // return false
+      if (!this.checkData()) {
+        return false
+      }
       let that = this;
       let param = {
         token: localStorage.token,
@@ -456,11 +457,11 @@ export default {
 
           // this.getTableQuery();
         } else {
-          this.$router.push({
-            path: '/lessonTable'
-          });
+          // this.$router.push({
+          //   path: '/lessonTable'
+          // });
           // 提交后清掉内存里的课表
-          this.clearTableRAM();
+          // this.clearTableRAM();
           that.$message.error(json.Memo);
         }
       })
@@ -493,10 +494,26 @@ export default {
     },
     // 检查数据
     checkData() {
+      let res = true
+      for (let i = 0; i < this.tabs.length; i++) {
+        for (let j = 0; j < this.tabs[i].tableData.length; j++) {
+          if (!this.tabs[i].tableData[j].ClassId) {
+            let days = numberToWeekdays(i+1);
+            let lessonIndex = j + 1;
+            this.$message.error(days + '第' + lessonIndex + '节课有课程未选择，请选择后再提交')
+            res =  false
+            break;
+          }
+        }
+      }
+      return res
+    },
+    checkData2() {
       // 目前报错规则：StbId  WeekDay ClassId 不能为空为 0 BeginStr EndStr 必须是5位数字符串
       let that = this;
       this.DataAssembly();
       let tableDate = this.DataAssemblyRs;
+      console.log(123);
       tableDate.map(function (item) {
         if (!item.ClassId) {
           let days = numberToWeekdays(item.WeekDay);

pc/src/views/Main.vue

@@ -425,6 +425,7 @@ em {
 
 .container {
   width: 100%;
+  height: 760px;
   overflow: hidden;
   overflow-y: scroll;
   display: block;
@@ -432,14 +433,15 @@ em {
   padding-bottom: 60px;
 }
 
-.container .lt {
+.container>.lt {
   width: 1173px;
   float: left;
   margin-top: 0px;
 }
 
-.container .rt {
-  width: 436px;
+.container>.rt {
+  /*width: 436px;*/
+  width: 26%;
   height: 100%;
   float: right;
 }
@@ -946,6 +948,7 @@ i {
 /*ipad only*/
 @media only screen and (max-width: 1366px) {
   .container {
+    height: 600px;
     padding-top: 6px;
   }
   .container .lt {

pc/src/views/appoint.vue

@@ -1590,6 +1590,9 @@ em {
 }
 /*ipad only*/
 @media only screen and (max-width: 1366px) {
+  .panel-body em{
+    font-size: 12px;
+  }
   .timeList {
     width: 510px;
   }

pc/src/views/cost.vue

@@ -13,7 +13,7 @@
               <em>手机号:</em>
               <el-input v-model="panel.phone" placeholder="请输入手机号" type="number" ></el-input>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="7">
               <em>日期:</em>
               <el-date-picker
                   v-model="panel.timeScope"

pc/src/views/record.vue

@@ -13,7 +13,7 @@
               <em>手机号:</em>
               <el-input v-model="panel.phone" placeholder="请输入手机号" type="number" ></el-input>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="7">
               <em>日期:</em>
               <el-date-picker
                   v-model="panel.timeScope"
@@ -501,7 +501,16 @@ export default {
 }
 /*ipad only*/
 @media only screen and (max-width: 1366px) {
-
+  .panel-body {
+  }
+ .panel .el-button {
+   margin-top: 5px;
+ }
+ .panel .el-col-4:nth-child(6) {
+   width: 9%!important;
+   float: right;
+   margin-top: 25px;
+ }
 }
 
 </style>

tv/.idea/workspace.xml

@@ -20,20 +20,57 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="c813a37b-038b-4bb1-a925-c03a432a7638" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/../pc/src/components/Navside.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/components/Navside.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/Index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/Index.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../app/src/static/images/main/shop.jpg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../app/src/static/images/main/shop2.jpg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Headside.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/blue.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/head.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/heart.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/l1.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/l2.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/l3.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/l4.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/l5.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/l6.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/logo.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/long.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/ltCube.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/mainBg.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/rtCube.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/wifi.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Wait.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../app/src/page/mainpage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../app/src/page/mainpage.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../pc/src/assets/css/panel.css" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/assets/css/panel.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../pc/src/views/EditLessonManage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/EditLessonManage.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../pc/src/views/EditLessonTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/EditLessonTable.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../pc/src/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/Main.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../pc/src/views/appoint.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/appoint.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../pc/src/views/cost.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/cost.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../pc/src/views/record.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/record.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/Global.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Global.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Main.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="Vue Single File Component" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
   </component>
   <component name="ProjectId" id="1jXXjXdwK5v7WohMBoZDModntXR" />
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
@@ -42,10 +79,19 @@
     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="dart.analysis.tool.window.visible" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/static/img" />
     <property name="nodejs_package_manager_path" value="npm" />
+    <property name="restartRequiresConfirmation" value="false" />
     <property name="vue.rearranger.settings.migration" value="true" />
   </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="D:\wwwroot\flyLong\tv\src\static\img" />
+    </key>
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="D:\wwwroot\flyLong\tv\src\static\img" />
+    </key>
+  </component>
   <component name="RunManager">
     <configuration name="serve" type="js.build_tools.npm" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
@@ -53,7 +99,7 @@
       <scripts>
         <script value="serve" />
       </scripts>
-      <node-interpreter value="project" />
+      <node-interpreter value="E:/Program Files/nodejs/node" />
       <envs />
       <method v="2" />
     </configuration>
@@ -66,7 +112,10 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1603951546154</updated>
-      <workItem from="1603951547210" duration="361000" />
+      <workItem from="1603951547210" duration="1144000" />
+      <workItem from="1604020412952" duration="1300000" />
+      <workItem from="1604022872771" duration="1602000" />
+      <workItem from="1604036567460" duration="16403000" />
     </task>
     <servers />
   </component>
@@ -83,11 +132,32 @@
         </entry>
       </map>
     </option>
+    <option name="oldMeFiltersMigrated" value="true" />
   </component>
   <component name="WindowStateProjectService">
-    <state x="-1830" y="274" width="1099" height="859" key="#com.intellij.execution.impl.EditConfigurationsDialog" timestamp="1603951765981">
+    <state x="-1830" y="274" width="1099" height="859" key="#com.intellij.execution.impl.EditConfigurationsDialog" timestamp="1604022799787">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state x="-1830" y="274" width="1099" height="859" key="#com.intellij.execution.impl.EditConfigurationsDialog/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604022799787" />
+    <state width="1250" height="371" key="GridCell.Tab.0.bottom" timestamp="1604042585903">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state width="1250" height="371" key="GridCell.Tab.0.bottom/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
+    <state width="1250" height="371" key="GridCell.Tab.0.center" timestamp="1604042585903">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state width="1250" height="371" key="GridCell.Tab.0.center/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
+    <state width="1250" height="371" key="GridCell.Tab.0.left" timestamp="1604042585903">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state width="1250" height="371" key="GridCell.Tab.0.left/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
+    <state width="1250" height="371" key="GridCell.Tab.0.right" timestamp="1604042585903">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state width="1250" height="371" key="GridCell.Tab.0.right/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
+    <state x="-1985" y="341" width="710" height="704" key="find.popup" timestamp="1603960641925">
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
-    <state x="-1830" y="274" width="1099" height="859" key="#com.intellij.execution.impl.EditConfigurationsDialog/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1603951765981" />
+    <state x="-1985" y="341" width="710" height="704" key="find.popup/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1603960641925" />
   </component>
 </project>

tv/src/Global.js

@@ -57,6 +57,14 @@ getHoursAndMin = function (datetime) {
     return h + m;
 }
 
+getHoursAndMinAndSec = function () {
+    let date = new Date();
+    h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
+    m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':';
+    s =  date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+    return h + m + s;
+}
+
 // 格式化时间去掉T
 nonTfmtDate = function (datetime, length) {
     if ((datetime == '') || (datetime == undefined))

tv/src/components/Headside.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="headerContainer">
+    <div class="lt">
+      {{ nowDay }}
+    </div>
+    <div class="rt">
+      {{ nowTime }}
+      <img src="../static/img/blue.png" height="35" width="35"/>
+      <img src="../static/img/wifi.png" height="35" width="35"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import global from '../Global'
+
+export default {
+  data() {
+    return {
+      nowDay: '',
+      nowTime: '',
+    }
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.nowDayFunc();
+      this.nowTimeFunc();
+    },1000);
+  },
+  beforeDestroy () {
+    clearInterval(this.timer);
+  },
+  methods: {
+    nowDayFunc() {
+      let days = new Date().getDay()
+      let wd = numberToWeekdays(days)
+      this.nowDay =  wd +'   ' + globalcurrent()
+    },
+    nowTimeFunc() {
+      this.nowTime = getHoursAndMinAndSec();
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.headerContainer {
+  height: 10%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding: 0;
+  padding: 2%;
+  background: url("../static/img/logo.png");
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: 10%;
+}
+
+.lt {
+  width: 20%;
+  float: left;
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 24px;
+  text-align: left;
+  color: #fff;
+  line-height: 10%;
+}
+
+.rt {
+  width: 20%;
+  float: right;
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 48px;
+  text-align: center;
+  color: #fff;
+  line-height: 10%;
+}
+
+.rt img {
+  position: absolute;
+  top: 3%;
+  right: 10px;
+  padding: 0;
+  margin: 0;
+  float: right;
+  margin-right: 10px;
+}
+
+.rt img:nth-child(2) {
+  right: 3%;
+}
+</style>

tv/src/views/Index.vue

@@ -11,9 +11,6 @@
 </template>
 
 <script>
-// @ is an alias to /src
-import Navs from '../api/Navs';
-
 export default {
   name: 'Home',
   data() {
@@ -22,7 +19,6 @@ export default {
       aSideState: false,
       thisClick: 0,
       tabwildState: 1,
-      navs: Navs,
       handleTabsList: [{
         title: '系统首页',
         name: '1',
@@ -34,7 +30,7 @@ export default {
   mounted() {
     // checkScreen
     if (document.body.clientWidth < 1024) {
-      this.$message.warning('请横屏使用本系统');
+      // this.$message.warning('请横屏使用本系统');
     }
   },
   methods: {
@@ -44,8 +40,6 @@ export default {
     },
   },
   components: {
-    Headside,
-    Navside
   }
 }
 </script>

tv/src/views/Main.vue

@@ -1,13 +1,575 @@
 <template>
-<div>main page</div>
+  <div class="pages">
+    <Headside></Headside>
+    <div class="userList">
+      <ul>
+        <!--        单个-->
+        <!--        <li v-for="s in single" :class="thisClassName" v-show="single">-->
+        <!--          <div class="ltLi"></div>-->
+        <!--          <div class="centerLi">-->
+        <!--            <div class="topLi">-->
+        <!--              <div class="cla">-->
+        <!--                <span>{{ s.percent }}</span><s>%</s>-->
+        <!--              </div>-->
+        <!--              <div class="human">-->
+        <!--                <img src="../static/img/head.png" height="300" width="300"/>-->
+        <!--                <span class="name">{{ s.name }}</span>-->
+        <!--              </div>-->
+        <!--              <div class="heartJump">-->
+        <!--                <span>{{ s.heartJump }}</span><img src="../static/img/heart.png" width="53"/>-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--            <div class="bottomLi">-->
+        <!--              <div class="btcla">-->
+        <!--                卡路里 {{ s.calc }}-->
+        <!--              </div>-->
+        <!--              <div class="btck">-->
+        <!--                步数 {{ s.step }}-->
+        <!--              </div>-->
+        <!--              <div class="step">-->
+        <!--                CK {{ s.ck }}-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--          <div class="rtLi"></div>-->
+        <!--          <img class="long" src="../static/img/long.png"/>-->
+        <!--        </li>-->
+        <!--        多个-->
+        <li v-for="(s,i) in students" :class="studentsClassName[i]" v-show="students">
+          <div class="centerLi">
+            <div class="topLi">
+              <div class="cla">
+                <span>{{ s.percent }}</span><s>%</s>
+              </div>
+              <div class="human">
+                <img src="../static/img/head.png" height="300" width="300"/>
+                <span class="name">{{ s.name }}</span>
+              </div>
+              <div class="heartJump">
+                <span>{{ s.heartJump }}</span><img src="../static/img/heart.png" width="53"/>
+              </div>
+            </div>
+            <div class="bottomLi">
+              <div class="btcla">
+                卡路里 {{ s.calc }}
+              </div>
+              <div class="btck">
+                步数 {{ s.step }}
+              </div>
+              <div class="step">
+                CK {{ s.ck }}
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="levelIcon">
+      <ul>
+        <li>
+          <span class="cube">
+             <div>
+                  0%-<br>
+            39%
+             </div>
+          </span>
+          <em>激活放松</em>
+        </li>
+        <li>
+          <span class="cube">
+             <div>
+             40%-<br>54%  </div>
+          </span>
+          <em>动态热身</em>
+        </li>
+        <li>
+          <span class="cube">
+             <div>
+             55%-<br>69%  </div>
+          </span>
+          <em>脂肪燃烧</em>
+        </li>
+        <li>
+          <span class="cube">
+             <div>
+             70%-<br>79%  </div>
+          </span>
+          <em>糖分消耗</em>
+        </li>
+        <li>
+          <span class="cube">
+             <div>
+             80%-<br>89%  </div>
+          </span>
+          <em>心肺训练</em>
+        </li>
+        <li>
+          <span class="cube">
+             <div>
+             ≥90%  </div>
+          </span>
+          <em>峰值锻炼</em>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+import Headside from '@/components/Headside'
+
 export default {
-name: "Main"
+  name: "Main",
+  data() {
+    return {
+      thisClassName: 'max',
+      studentsClassName: [],
+      students: [
+        {
+          name: '张宇宁',
+          percent: 48,
+          heartJump: 93,
+          calc: 556,
+          ck: 8.5,
+          step: 200,
+        },
+        {
+          name: '张宇宁',
+          percent: 22,
+          heartJump: 93,
+          calc: 556,
+          ck: 8.5,
+          step: 200,
+        }
+      ],
+      single: [
+        // {
+        //   name: '张宇宁',
+        //   percent: 48,
+        //   heartJump: 93,
+        //   calc: 556,
+        //   ck: 8.5,
+        //   step: 200,
+        // }
+      ],
+    }
+  },
+  mounted() {
+    // this.colorType(91);
+  },
+  methods: {
+    colorType(percent) {
+      let that = this;
+      let per = parseInt(percent);
+      switch (true) {
+        case per >= 90:
+          that.thisClassName = 'max red';
+          break
+        case per <= 89 && per > 80:
+          that.thisClassName = 'max brown';
+          break
+        case per <= 79 && per > 70:
+          that.thisClassName = 'max yellow';
+          break
+        case per <= 69 && per > 54:
+          that.thisClassName = 'max green';
+          break
+        case per <= 54 && per > 39:
+          that.thisClassName = 'max violet';
+          break
+        case per <= 39:
+          that.thisClassName = 'max blue';
+          break
+      }
+    }
+  },
+  components: {
+    Headside
+  }
 }
 </script>
 
 <style scoped>
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  background: url("../static/img/mainBg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.userList {
+  width: 100%;
+  height: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.userList {
+  height: 100%;
+}
+
+.userList ul {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.userList .max {
+  width: 80%;
+  height: 100%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+}
+
+.max .ltLi {
+  width: 5%;
+  height: 545px;
+  float: left;
+  background: url("../static/img/ltCube.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.max .rtLi {
+  width: 5%;
+  height: 545px;
+  float: right;
+  background: url("../static/img/rtCube.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.max .centerLi {
+  width: 90%;
+  float: left;
+  height: 545px;
+  background: #028FE1;
+}
+
+.max.blue .centerLi {
+  background: #028FE1;
+}
+
+.max.violet .centerLi {
+  background: #6D26FA;
+}
+
+.max.green .centerLi {
+  background: #0AB105;
+}
+
+.max.yellow .centerLi {
+  background: #BACC01;
+}
+
+.max.brown .centerLi {
+  background: #EA8813;
+}
+
+.max.red .centerLi {
+  background: #CF1122;
+}
+
+.centerLi .top {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.centerLi .bottom {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.centerLi .cla {
+  width: 30%;
+  float: left;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 175px;
+  text-align: center;
+  color: #fff;
+  line-height: 360px;
+}
+
+.centerLi .cla s {
+  position: relative;
+  top: -100px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 54px;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+}
+
+.centerLi .heartJump {
+  width: 30%;
+  float: right;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 175px;
+  text-align: center;
+  color: #fff;
+  line-height: 360px;
+}
+
+.centerLi .heartJump img {
+  position: relative;
+  top: -100px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 54px;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+}
+
+.centerLi .human {
+  width: 40%;
+  float: left;
+  padding-top: 3%;
+}
+
+.human img {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border-radius: 250px;
+  border: 3px solid #fff;
+}
+
+.human .name {
+  position: relative;
+  top: -25px;
+  width: 40%;
+  height: 70px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border-radius: 35px;
+  background: rgba(0, 0, 0, 0.8);
+  opacity: 0.68;
+  color: #fff;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 43px;
+  text-align: center;
+  color: #fff;
+}
 
+.bottomLi {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 50px;
+  text-align: left;
+  color: #fff;
+  text-align: center;
+}
+
+.bottomLi .btcla {
+  width: 30%;
+  float: left;
+}
+
+.bottomLi .btck {
+  width: 40%;
+  float: left;
+}
+
+.bottomLi .step {
+  width: 30%;
+  float: right;
+}
+
+.levelIcon {
+  position: absolute;
+  bottom: 3%;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  height: 130px;
+  padding-bottom: 10px;
+}
+
+.levelIcon ul {
+  width: 96%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.levelIcon li {
+  width: 14.666666666667%;
+  height: 100%;
+  float: left;
+  padding-left: 2%;
+}
+
+.levelIcon li:nth-child(1) {
+  padding-left: 0;
+}
+
+.levelIcon li span {
+  width: 119px;
+  height: 119px;
+  overflow: hidden;
+  float: left;
+  background: url("../static/img/l1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: top center;
+  font-family: "PingFang SC";
+  font-weight: normal;
+  font-size: 22px;
+  letter-spacing: -0.05em;
+  text-align: center;
+  color: #fff;
+  line-height: 35px;
+
+}
+
+.levelIcon li span div {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 17%;
+}
+
+.levelIcon li:nth-child(2) span {
+  background: url("../static/img/l2.png");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.levelIcon li:nth-child(3) span {
+  background: url("../static/img/l3.png");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.levelIcon li:nth-child(4) span {
+  background: url("../static/img/l4.png");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.levelIcon li:nth-child(5) span {
+  background: url("../static/img/l5.png");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.levelIcon li:nth-child(6) span {
+  background: url("../static/img/l6.png");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.levelIcon li:nth-child(6) span div {
+  margin-top: 13%;
+}
+
+.levelIcon li em {
+  float: right;
+  width: 130px;
+  height: 42px;
+  border-radius: 21px;
+  background: rgba(2, 143, 225, 0.16);
+  border: 1px solid #028fe1;
+  box-shadow: 0px 0px 5px #028fe1;
+  font-family: "PingFang SC";
+  font-weight: normal;
+  font-size: 24px;
+  text-align: center;
+  color: #fff;
+  font-style: normal;
+  line-height: 42px;
+  margin-top: 15%;
+  margin-left: 1%;
+}
+
+.levelIcon li:nth-child(2) em {
+  width: 130px;
+  height: 42px;
+  border-radius: 21px;
+  background: rgba(109, 38, 250, 0.16);
+  border: 1px solid #6d26fa;
+  box-shadow: 0px 0px 5px #6d26fa;
+}
+
+.levelIcon li:nth-child(3) em {
+  width: 130px;
+  height: 42px;
+  border-radius: 21px;
+  background: rgba(10, 177, 5, 0.16);
+  border: 1px solid #0ab105;
+  box-shadow: 0px 0px 5px #0ab105;
+
+}
+
+.levelIcon li:nth-child(4) em {
+  width: 130px;
+  height: 42px;
+  border-radius: 21px;
+  background: rgba(186, 204, 1, 0.16);
+  border: 1px solid #bacc01;
+  box-shadow: 0px 0px 5px #bacc01;
+}
+
+.levelIcon li:nth-child(5) em {
+  width: 130px;
+  height: 42px;
+  border-radius: 21px;
+  background: rgba(234, 136, 19, 0.16);
+  border: 1px solid #ea8813;
+  box-shadow: 0px 0px 5px #ea8813;
+}
+
+.levelIcon li:nth-child(6) em {
+  width: 130px;
+  height: 42px;
+  border-radius: 21px;
+  background: rgba(209, 17, 34, 0.16);
+  border: 1px solid #d11122;
+  box-shadow: 0px 0px 5px #d11122;
+}
+
+.long {
+  width: 198px;
+  position: relative;
+  bottom: 198px;
+  right: -70px;
+  float: right;
+  z-index: 222;
+  overflow: visible;
+
+}
 </style>

tv/src/views/Wait.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="wait">
+    wait page
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Wait"
+}
+</script>
+
+<style scoped>
+
+</style>