online 界面

online/src/page/mainpage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="content">
         <div class="top" :style="{backgroundColor:bgColor}">
-            <span class="watchState">{{watchState}}</span>
+            <span class="watchState">{{watchText}}</span>
             <div class="toprow">
                 <div class="lt">
                     <div class="activeLevel">
@@ -13,14 +13,14 @@
                             <s class="noValue">--</s>
                         </div>
                     </div>
-                    <span>激活放松</span>
+                    <span>{{activeLevelText}}</span>
                 </div>
                 <div class="md">
                     <div class="headContainer">
                         <img src="../static/images/main/testhead.png"/>
                     </div>
                     <span class="username">
-                        <em>王胜寒</em>
+                        <em>{{username}}</em>
                     <img src="../static/images/main/male.png" height="60" width="60" v-if="sex == 1"/>
                     <img src="../static/images/main/female.png" height="60" width="60" v-if="sex == 2"/>
                     </span>
@@ -29,7 +29,11 @@
                     <div class="heartJump">
                         <div v-if="activeState">
                             <img src="../static/images/main/heart.png" height="74" width="86"/>
-                            <em>{{heartRate}}</em>
+                            <em :class="[
+                            {'normalJump':activeLevel > 30 &&  activeLevel <= 90},
+                            {'fastJump':activeLevel > 90},
+                            {'slowJump':activeLevel < 30},
+                            ]">{{heartRate}}</em>
                         </div>
                         <div v-else>
                             <s class="noValue">--</s>
@@ -48,22 +52,51 @@
             </ul>
         </div>
         <div class="row">
-            <div class="rowCenter">
+            <div class="rowCenter" v-if="!watchState" @click="connectWatch">
                 <img src="../static/images/main/chain.png"/>
-                <em></em>
+                <em>心率带未连接</em>
+                <button>点击连接</button>
             </div>
         </div>
-        <div class="middle"></div>
-        <div class="row"></div>
+        <div class="middle">
+            <ul>
+                <li>
+                    <div class="center">
+                        <em>2578</em>
+                        <img src="../static/images/main/normal.png"/>
+                        <span>卡路里</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="center">
+                        <em>2578</em>
+                        <img src="../static/images/main/redfire.png"/>
+                        <span>运动卡路里</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="center">
+                        <em>17.8</em>
+                        <img src="../static/images/main/ck.png" class="ck"/>
+                        <span>CK</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
         <div class="bottom">
             <h5>5分钟心率趋势图</h5>
-            <span>最大心率 : 128      平均心率 : 92</span>
+            <span>最大心率 : {{heartMax}}      平均心率 : {{heartAverage}}</span>
             <Line-example
-                    :width="390"
-                    :height="200"
+                    :width="screenWidth"
+                    :height="screenHeight"
                     :dataLabels="dataLabels"
                     :datadatasets="dataDatasets"
             />
+            <em :class="[
+                            {'normalJump':activeLevel > 30 &&  activeLevel <= 90},
+                            {'fastJump':activeLevel > 90},
+                            {'slowJump':activeLevel < 30},
+                            ]">{{heartRate}}</em>
         </div>
     </div>
 </template>
@@ -76,18 +109,32 @@
             return {
                 dataLabels: [],
                 dataDatasets: [],
-                watchState: '心率带已连接  电量 39%',
+                watchText: '',
+                watchState: false,//false
                 bgColor: '#028FE1',
-                activeLevel: 100,
+                activeLevel: 90,
+                activeLevelText: '激活放松',
                 heartRate: 100,
-                activeState: true,
+                activeState: true,//false
+                username: '王胜寒',
                 sex: 1,
                 height: 148,
                 age: 8,
                 weight: 38,
                 peaceHeart: 100,
+                heartMax: 0,
+                heartAverage: 0,
+                screenWidth:document.body.clientWidth,
+                screenHeight:parseInt(document.documentElement.clientHeight/5),
             }
         },
+        mounted(){
+        },
+        methods: {
+            connectWatch() {
+                console.log(123);
+            },
+        },
         components: {
             LineExample
         }
@@ -149,6 +196,13 @@
         color: #fff;
     }
 
+    .activeLevel div {
+        width: 80px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
     .activeLevel s {
         float: right;
         font-size: 20px;
@@ -203,6 +257,7 @@
         text-align: center;
         float: none;
     }
+
     .username {
         width: 100%;
         height: 30px;
@@ -213,6 +268,7 @@
         color: #fff;
         margin-top: 10px;
     }
+
     .username em {
         width: 100%;
         overflow: hidden;
@@ -220,6 +276,7 @@
         margin: 0 auto;
         text-align: center;
     }
+
     .username img {
         position: relative;
         bottom: 20px;
@@ -228,6 +285,7 @@
         height: 15px;
         right: 15%;
     }
+
     .heartJump {
         width: 90%;
         overflow: hidden;
@@ -236,17 +294,26 @@
         margin-top: 10px;
         color: #fff;
     }
+    .heartJump div {
+        width: 86px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
     .heartJump img {
         width: 16px;
         height: 14px;
         float: right;
     }
+
     .heartJump em {
         font-size: 40px;
         text-align: right;
         font-weight: bold;
         float: right;
     }
+
     .heartJump .noValue {
         width: 100%;
         overflow: hidden;
@@ -257,6 +324,7 @@
         text-align: center;
         float: none;
     }
+
     .toprow .rt span {
         width: 80px;
         height: 20px;
@@ -269,12 +337,14 @@
         line-height: 20px;
         font-size: 12px;
     }
+
     .info {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
     }
+
     .info ul {
         width: 100%;
         overflow: hidden;
@@ -283,6 +353,7 @@
         margin-top: 10px;
         margin-bottom: 10px;
     }
+
     .info li {
         width: 25%;
         border-left: 1px solid #fff;
@@ -290,13 +361,16 @@
         float: left;
         text-align: center;
     }
-    .info li:nth-child(2){
+
+    .info li:nth-child(2) {
         border-color: #E2E2E2;
     }
-    .info li:nth-child(3){
+
+    .info li:nth-child(3) {
         border-color: #E2E2E2;
         border-left: 0;
     }
+
     .info li em {
         width: 100%;
         overflow: hidden;
@@ -306,6 +380,7 @@
         font-size: 20px;
         text-align: center;
     }
+
     .info li span {
         width: 100%;
         overflow: hidden;
@@ -315,4 +390,216 @@
         font-size: 12px;
         text-align: center;
     }
+
+    .row {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background: #EFEFEF;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .row .rowCenter {
+        width: 208px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        line-height: 30px;
+    }
+
+    .rowCenter img {
+        width: 11px;
+        height: 11px;
+        float: left;
+        margin-top: 10px;
+        margin-right: 5px;
+    }
+
+    .rowCenter em {
+        font-size: 14px;
+        color: #FF4040;
+        margin-right: 15px;
+    }
+
+    .rowCenter button {
+        width: 92px;
+        height: 27px;
+        text-align: center;
+        line-height: 27px;
+        color: black;
+        background: #FFDE93;
+        border-radius: 6px;
+        border: none;
+        outline: none;
+    }
+
+    .middle {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        border-bottom: 10px solid #EFEFEF;
+    }
+
+    .middle ul {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .middle li {
+        width: 33%;
+        float: left;
+        border-left: 1px solid #fff;
+        border-right: 1px solid #fff;
+    }
+
+    .middle li .center {
+        width: 72px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .middle li:nth-child(2) {
+        border-color: #E2E2E2;
+    }
+
+    .middle li img {
+        width: 15px;
+        float: right;
+        margin-top: 4px;
+        margin-right: 5px;
+    }
+
+    .middle li em {
+        float: right;
+        text-align: right;
+        color: #000;
+        font-weight: bold;
+        font-size: 22px;
+    }
+
+    .middle li span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: right;
+        color: #9A9A9A;
+        font-size: 12px;
+    }
+
+    .middle .ck {
+        width: 19px;
+        height: 19px;
+        margin-top: 6px;
+    }
+
+    .bottom {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .bottom h5 {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        color: #363636;
+        font-size: 16px;
+        text-align: center;
+        font-weight: normal;
+        margin-top: 14px;
+    }
+
+    .bottom span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+        font-size: 12px;
+        color: #9A9A9A;
+    }
+
+    .bottom em {
+        position: relative;
+        bottom: 160px;
+        right: 20px;
+        float: right;
+        color: #FF4040;
+        background: #fff;
+    }
+
+
+    .slowJump {
+        animation: mymove 3s infinite;
+        -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
+        animation-direction: alternate; /*轮流反向播放动画。*/
+        animation-timing-function: ease-in-out; /*动画的速度曲线*/
+        /* Safari 和 Chrome */
+        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+    }
+
+    .normalJump {
+        animation: mymove 2s infinite;
+        -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
+        animation-direction: alternate; /*轮流反向播放动画。*/
+        animation-timing-function: ease-in-out; /*动画的速度曲线*/
+        /* Safari 和 Chrome */
+        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+    }
+
+    .fastJump {
+        animation: mymove 1s infinite;
+        -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
+        animation-direction: alternate; /*轮流反向播放动画。*/
+        animation-timing-function: ease-in-out; /*动画的速度曲线*/
+        /* Safari 和 Chrome */
+        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+    }
+
+    @keyframes mymove {
+        0% {
+            transform: scale(1); /*开始为原始大小*/
+        }
+        25% {
+            transform: scale(1.1); /*放大1.1倍*/
+        }
+        50% {
+            transform: scale(1);
+        }
+        75% {
+            transform: scale(1.1);
+        }
+
+    }
+
+    @-webkit-keyframes mymove /*Safari and Chrome*/
+    {
+        0% {
+            transform: scale(1); /*开始为原始大小*/
+        }
+        25% {
+            transform: scale(1.1); /*放大1.1倍*/
+        }
+        50% {
+            transform: scale(1);
+        }
+        75% {
+            transform: scale(1.1);
+        }
+    }
+
 </style>