在线上课

pc/src/assets/css/bg.css

@@ -0,0 +1,69 @@
+.bgStyle1 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg_1.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+.bgStyle2 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg_2.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+.bgStyle3 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg_3.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+.bgStyle4 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg_4.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+
+/*bg2*/
+.bg2Style1 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg2_1.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+.bg2Style2 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg2_2.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+.bg2Style3 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg2_3.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+.bg2Style4 {
+    background-color: #028fe1;
+    background: url("../../static/img/bg/bg2_4.png");
+    background-size: 100%  100%;
+    background-repeat: no-repeat;
+}
+
+ul, li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+s, em, i {
+    font-style: normal;
+    text-decoration: none;
+}
+

pc/src/components/Navside.vue

@@ -286,6 +286,7 @@
         border-radius: 250px;
         font-style: normal;
         margin-top: 8px;
+        font-size: 16px;
     }
 
     /deep/ .el-menu {

pc/src/libs/rem.js

@@ -0,0 +1,21 @@
+// 设置 rem 函数
+function setRem() {
+
+    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
+    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
+
+    console.log('htmlWidth:' + htmlWidth);
+
+    //得到html的Dom元素
+    let htmlDom = document.getElementsByTagName('html')[0];
+    //设置根元素字体大小
+    htmlDom.style.fontSize = htmlWidth / 20 + 'px';
+}
+
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+    setRem()
+};
+

pc/src/views/online.vue

@@ -1,8 +1,5 @@
 <template>
-    <div class="context" id="online">
-        <div class="panel">
-            <h5>在线上课</h5>
-        </div>
+    <div class="context bgStyle1" id="online">
         <div class="change">
             <div class="basicInfo">
                 <em>课程名：{{classInfo.name}} </em>
@@ -106,7 +103,6 @@
 <script>
     import levelIcon from '@/components/levelIcon'
     import power from '@/components/power'
-
     export default {
         data() {
             return {
@@ -124,9 +120,34 @@
             };
         },
         mounted() {
-            this.getList(1);
+            this.getList(6);
+
+        },
+        watch: {
+            $route(to) {
+                console.log(to);
+                if (to.name != 'online') {
+                    this.clearRem()
+                }else{
+                    this.setRem();
+                }
+            },
         },
         methods: {
+            clearRem(){
+                console.log(123);
+                //得到html的Dom元素
+                let htmlDom = document.getElementsByTagName('html')[0];
+                htmlDom.style.fontSize = '14px'
+            },
+            setRem(){
+                // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
+                let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
+                //得到html的Dom元素
+                let htmlDom = document.getElementsByTagName('html')[0];
+                //设置根元素字体大小
+                htmlDom.style.fontSize = htmlWidth / 20 + 'px';
+            },
             // 全屏显示
             full_screen() {
                 let that = this;
@@ -215,7 +236,7 @@
                         queuePushData: [],
                         RealHr: "100",
                         vo2Max: "123"
-                    }
+                    };
                     this.students.push(rs)
                 }
                 this.giveClassName( this.students);
@@ -327,6 +348,7 @@
 </script>
 
 <style scoped>
+    @import "../assets/css/bg.css";
     .context {
         border-radius: 12px;
         height: 770px;
@@ -370,6 +392,11 @@
 
     .basicInfo {
         float: left;
+        font-size: 0.2rem;
+        line-height: 0.6rem;
+    }
+    .userList {
+        margin-top: 0.1rem;
     }
 
     em {
@@ -580,7 +607,6 @@
         float: right;
     }
 
-
     .bottomLi {
         width: 96%;
         overflow: hidden;