update

user_web/src/components/user/UserRight.vue

@@ -91,7 +91,7 @@ onMounted(function() {
 
 </template>
 
-<style scoped lang="less" >
+<style scoped lang="scss" >
 
 .UserRight * {
     -moz-user-select: none;

user_web/src/router/index.ts

@@ -27,6 +27,14 @@ const routes = [
         },
         component: () => import('../view/TpLogin.vue'),
     },
+    {
+        path: '/studentMain',
+        name: 'studentMain',
+        meta: {
+            title: '首页',
+        },
+        component: () => import('../view/student/main/Main.vue'),
+    },
     {
         path: '/manage',
         name: '系统后台',

user_web/src/view/student/main/Main.vue

@@ -191,7 +191,7 @@ const menuListEvent = (json, index) => {
     </div>
 </template>
 
-<style lang="less" >
+<style lang="scss" >
 * {
     box-sizing:border-box;
     -moz-box-sizing:border-box; /* Firefox */
@@ -199,9 +199,9 @@ const menuListEvent = (json, index) => {
 }
 </style>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-@myScale: 0.9;
+$myScale: 0.9;
 
 .main * {
     -moz-user-select: none;
@@ -224,15 +224,15 @@ const menuListEvent = (json, index) => {
 
     .logo {
         position: absolute;
-        width: 27.5714rem * @myScale;
-        top: 3.6428rem * @myScale;
+        width: 27.5714rem * $myScale;
+        top: 3.6428rem * $myScale;
         left: 7.5%;
     }
 
     .title {
         position: absolute;
-        width: 30.4285rem * @myScale;
-        top: 4.7857rem * @myScale;
+        width: 30.4285rem * $myScale;
+        top: 4.7857rem * $myScale;
         left: 29%;
     }
 
@@ -241,14 +241,14 @@ const menuListEvent = (json, index) => {
         position: absolute;
         width: 100%;
         left: 0px;
-        top: 11.4342rem * @myScale;
+        top: 11.4342rem * $myScale;
 
         .labelLookMain {
 
             position: relative;
             width: 81%;
-            height: 24.2857rem * @myScale;
-            margin: 1.7857rem * @myScale auto 1.7857rem * @myScale auto;
+            height: 24.2857rem * $myScale;
+            margin: 1.7857rem * $myScale auto 1.7857rem * $myScale auto;
 
             /* 水平垂直居中,支持文字自动换行 */
             display: flex;
@@ -259,34 +259,34 @@ const menuListEvent = (json, index) => {
             .lookMain {
 
                 position: relative;
-                height: 24.2857rem * @myScale;
-                width: 100% * @myScale;
+                height: 24.2857rem * $myScale;
+                width: 100% * $myScale;
 
                 .look, .look2 {
                     position: relative;
                     height: 100%;
                     // display: inline-block;
-                    border-radius: 1.1428rem * @myScale;
+                    border-radius: 1.1428rem * $myScale;
                     background-color: #FFFFFF;
                     float: left;
                 }
 
                 .look {
-                    width: 54.6428rem * @myScale;
+                    width: 54.6428rem * $myScale;
 
                     .lb {
 
                         width: 100%;
-                        height: 4.0714rem * @myScale;
-                        line-height: 4.0714rem * @myScale;
-                        margin: 0.9285rem * @myScale 0px 0px 0px;
-                        padding: 0px 0px 0px 0.9285rem * @myScale;
+                        height: 4.0714rem * $myScale;
+                        line-height: 4.0714rem * $myScale;
+                        margin: 0.9285rem * $myScale 0px 0px 0px;
+                        padding: 0px 0px 0px 0.9285rem * $myScale;
 
                         .symbol {
 
                             float: left;
                             height: 100%;
-                            width: 2.2142rem * @myScale;
+                            width: 2.2142rem * $myScale;
 
                             /* 水平垂直居中,支持文字自动换行 */
                             display: flex;
@@ -295,13 +295,13 @@ const menuListEvent = (json, index) => {
                             align-items: center;
 
                             .imgYuanQuan {
-                                width: 0.9285rem * @myScale;
+                                width: 0.9285rem * $myScale;
                             }
 
                         }
 
                         color: #444444;
-                        font-size: 1.5714rem * @myScale;
+                        font-size: 1.5714rem * $myScale;
 
 
                     }
@@ -310,32 +310,32 @@ const menuListEvent = (json, index) => {
 
                         width: 100%;
                         float: left;
-                        margin: 2rem * @myScale 0px 0px 0px;
+                        margin: 2rem * $myScale 0px 0px 0px;
 
                         .dbList {
                             
                             position: relative;
                             float: left;
-                            // width: 14.9285rem * @myScale;
-                            width: 14.7rem * @myScale;
-                            height: 13.3571rem * @myScale;
-                            margin: 0px 1.1428rem * @myScale 0px 1.1428rem * @myScale;
+                            // width: 14.9285rem * $myScale;
+                            width: 14.7rem * $myScale;
+                            height: 13.3571rem * $myScale;
+                            margin: 0px 1.1428rem * $myScale 0px 1.1428rem * $myScale;
 
                             .topLb {
 
                                 width: 100%;
-                                height: 3.5rem * @myScale;
-                                line-height: 3.5rem * @myScale;
+                                height: 3.5rem * $myScale;
+                                line-height: 3.5rem * $myScale;
                                 color: #5C5C5C;
-                                font-size: 1.2857rem * @myScale;
+                                font-size: 1.2857rem * $myScale;
                                 font-weight: 500;
 
                                 .symbol {
 
                                     float: left;
                                     height: 100%;
-                                    width: 1.3rem * @myScale;
-                                    // width: 0.9285rem * @myScale;
+                                    width: 1.3rem * $myScale;
+                                    // width: 0.9285rem * $myScale;
 
                                     /* 水平垂直居中,支持文字自动换行 */
                                     display: flex;
@@ -344,7 +344,7 @@ const menuListEvent = (json, index) => {
                                     // align-items: center;
 
                                     .imgYuanQuan {
-                                        width: 0.6428rem * @myScale;
+                                        width: 0.6428rem * $myScale;
                                     }
 
                                 }
@@ -355,7 +355,7 @@ const menuListEvent = (json, index) => {
 
                                 position: absolute;
                                 width: 100%;
-                                height: 8.1428rem * @myScale;
+                                height: 8.1428rem * $myScale;
                                 left: 0px;
                                 bottom: 0px;
 
@@ -374,11 +374,11 @@ const menuListEvent = (json, index) => {
                                 }
 
                                 .time {
-                                    bottom: 3.2857rem * @myScale;
+                                    bottom: 3.2857rem * $myScale;
 
                                     .num {
                                         color: #5B6EDD;
-                                        font-size: 3.4285rem * @myScale;
+                                        font-size: 3.4285rem * $myScale;
                                         font-weight: bold;
                                     }
 
@@ -386,24 +386,24 @@ const menuListEvent = (json, index) => {
 
                                         font-weight: 500;
                                         color: #5B6EDD;
-                                        font-size: 1.2857rem * @myScale;
-                                        margin: 0px 0px 0px 0.5rem * @myScale;
+                                        font-size: 1.2857rem * $myScale;
+                                        margin: 0px 0px 0px 0.5rem * $myScale;
 
                                     }
                                 }
 
                                 .lv {
-                                    bottom: 0.6428rem * @myScale;
+                                    bottom: 0.6428rem * $myScale;
 
                                     .txt {
                                         color: #5B6EDD;
-                                        font-size: 0.9285rem * @myScale;
+                                        font-size: 0.9285rem * $myScale;
                                         font-weight: 500;
                                     }
 
                                     .num {
                                         color: #a3aeec;
-                                        font-size: 0.9285rem * @myScale;
+                                        font-size: 0.9285rem * $myScale;
                                         font-weight: 500;
                                     }
                                 }
@@ -413,7 +413,7 @@ const menuListEvent = (json, index) => {
                         }
 
                         .dbListOne {
-                            margin: 0px 1.1428rem * @myScale 0px 2.2857rem * @myScale;
+                            margin: 0px 1.1428rem * $myScale 0px 2.2857rem * $myScale;
                         }
 
                     }
@@ -421,8 +421,8 @@ const menuListEvent = (json, index) => {
                 }
 
                 .look2 {
-                    width: 54.0714rem * @myScale;
-                    margin: 0px 0px 0px 1.4285rem * @myScale;
+                    width: 54.0714rem * $myScale;
+                    margin: 0px 0px 0px 1.4285rem * $myScale;
 
                     .haiBao {
                         width: 100%;
@@ -439,8 +439,8 @@ const menuListEvent = (json, index) => {
 
             position: relative;
             width: 100%;
-            height: 26.3571rem * @myScale;
-            margin: 1.7857rem * @myScale 0px 1.7857rem * @myScale 0px;
+            height: 26.3571rem * $myScale;
+            margin: 1.7857rem * $myScale 0px 1.7857rem * $myScale 0px;
 
             /* 水平垂直居中,支持文字自动换行 */
             display: flex;
@@ -457,13 +457,13 @@ const menuListEvent = (json, index) => {
                 .menuList {
 
                     position: relative;
-                    width: 19.7142rem * @myScale;
-                    height: 26.3571rem * @myScale;
+                    width: 19.7142rem * $myScale;
+                    height: 26.3571rem * $myScale;
                     display: inline-flex;
                     background: linear-gradient( 181deg, #E6FEFF 0%, #FFFFFF 100%);
                     box-shadow: 0px 4px 22px 0px rgba(104,121,183,0.25);
-                    margin: 0px 3.5714rem * @myScale 0px 3.5714rem * @myScale;
-                    border-radius: 1.2142rem * @myScale;
+                    margin: 0px 3.5714rem * $myScale 0px 3.5714rem * $myScale;
+                    border-radius: 1.2142rem * $myScale;
                     // 手势
                     cursor:pointer;
 
@@ -471,11 +471,11 @@ const menuListEvent = (json, index) => {
 
                         width: 100%;
                         position: absolute;
-                        font-size: 1.5714rem * @myScale;
+                        font-size: 1.5714rem * $myScale;
                         text-align: center;
                         color: #333333;
                         font-weight: 500;
-                        bottom: 2rem * @myScale;
+                        bottom: 2rem * $myScale;
 
                     }
 
@@ -483,7 +483,7 @@ const menuListEvent = (json, index) => {
                         position: absolute;
                         width: 85%;
                         left: 7.5%;
-                        top: 1.285rem * @myScale;
+                        top: 1.285rem * $myScale;
                     }
                     
                 }
@@ -494,10 +494,10 @@ const menuListEvent = (json, index) => {
 
         .bottomTxt {
             position: relative;
-            margin: 1.7857rem * @myScale 0px 1.7857rem * @myScale 0px;
+            margin: 1.7857rem * $myScale 0px 1.7857rem * $myScale 0px;
             width: 100%;
             text-align: center;
-            font-size: 1.5714rem * @myScale;
+            font-size: 1.5714rem * $myScale;
             color: #BBBBBB;
             font-weight: 400;
         }