动态引入css主题

src/components/TestPanel.vue

@@ -134,7 +134,7 @@ import util from '@/util'
 export default {
   data() {
     return {
-      systemId: util.getCookie('systemId') ? Number(util.getCookie('systemId')) : 1,
+      systemId: Number(util.getCookie('systemId') || 1),
       classId: util.getCookie('classId'),
       className: util.getCookie('className') ? decodeURI(util.getCookie('className')) : '',
       courseId: util.getCookie('courseId'),

src/main.js

@@ -5,10 +5,24 @@ import store from "./store";
 import ElementUI from 'element-ui'
 import util from '@/util'
 import '@/styles/index.scss';
-const systemId = util.getCookie('systemId') ? Number(util.getCookie('systemId')) : 1
+const systemId = util.getCookie('systemId')
-console.log('main', systemId, `@/styles/theme/theme${systemId}.scss`)
+if (systemId == 1) {
-// require(`@/styles/theme/theme${systemId}.scss`)
+  import('@/styles/theme/theme1.scss')
-require(`@/styles/theme/theme1.scss`)
+} else if (systemId == 4) {
+  import('@/styles/theme/theme4.scss')
+} else if (systemId == 5) {
+  import('@/styles/theme/theme5.scss')
+} else if (systemId == 6) {
+  import('@/styles/theme/theme6.scss')
+} else if (systemId == 7) {
+  import('@/styles/theme/theme7.scss')
+} else if (systemId == 8) {
+  import('@/styles/theme/theme8.scss')
+} else if (systemId == 9) {
+  import('@/styles/theme/theme9.scss')
+} else if (systemId == 10) {
+  import('@/styles/theme/theme10.scss')
+}
 import api from './api';
 import {
   post,

src/styles/theme/theme4.scss

@@ -7,7 +7,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     background-color: $--color-primary;
 }
 .el-main {
-    background: #fff url(../../assets/images/system/4/bg1.png) 100% 0 no-repeat;
+    background: url(../../assets/images/system/4/bg1.png) top right no-repeat, url(../../assets/images/system/4/bg2.png) bottom right no-repeat;
 }
 .t-color {
     color: $--color-primary;

src/styles/theme/theme5.scss

@@ -7,7 +7,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     background-color: $--color-primary;
 }
 .el-main {
-    background: #fff url(../../assets/images/system/5/bg1.png) 100% 0 no-repeat;
+    background: url(../../assets/images/system/5/bg1.png) top right no-repeat,url(../../assets/images/system/5/bg2.png) bottom right no-repeat;
 }
 .t-color {
     color: $--color-primary;

src/styles/theme/theme7.scss

@@ -7,7 +7,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     background-color: $--color-primary;
 }
 .el-main {
-    background: #fff url(../../assets/images/system/7/bg1.png) 100% 0 no-repeat;
+    background: url(../../assets/images/system/7/bg1.png) top right no-repeat, url(../../assets/images/system/7/bg2.png) bottom right no-repeat;
 }
 .t-color {
     color: $--color-primary;

src/styles/theme/theme9.scss

@@ -7,7 +7,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     background-color: $--color-primary;
 }
 .el-main {
-    background: #fff url(../../assets/images/system/9/bg1.png) 100% 0 no-repeat;
+    background: url(../../assets/images/system/9/bg1.png) top right no-repeat, url(../../assets/images/system/9/bg1.png) bottom right no-repeat;
 }
 .t-color {
     color: $--color-primary;