online part

online/src/page/mainpage.vue

@@ -1,6 +1,43 @@
 <template>
     <div class="container">
-        <div class="top"></div>
+        <div class="top" :style="backgroundColor">
+            <span class="watchState">{{watchState}}</span>
+            <div class="toprow">
+                <div class="lt">
+                    <div class="activeLevel">
+                        <div>
+                            <s>%</s>
+                            <em>100</em>
+                        </div>
+                        <div>
+                            <s>- -</s>
+                        </div>
+                    </div>
+                    <span>激活放松</span>
+                </div>
+                <div class="md">
+                    <div class="headContainer">
+                        <img src="../static/images/main/testhead.png"/>
+                    </div>
+                    <span class="username">
+                        <em>王胜寒</em>
+                    <img src="../static/images/main/male.png" height="60" width="60"/>
+                    </span>
+                </div>
+                <div class="rt">
+                    <div class="activeLevel">
+                        <div>
+                            <img src="../static/images/main/heart.png" height="74" width="86"/>
+                            <em>89</em>
+                        </div>
+                        <div>
+                            <s>- -</s>
+                        </div>
+                    </div>
+                    <span>瞬时心率</span>
+                </div>
+            </div>
+        </div>
         <div class="row"></div>
         <div class="middle"></div>
         <div class="row"></div>
@@ -24,6 +61,8 @@
             return {
                 dataLabels: [],
                 datadatasets: [],
+                watchState:'',
+                backgroundColor:''
             }
         },
         components: {