rcs5.0 commit

packages/rcs_5.0/src/views/theme/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header">
+        <a
+          class="link-type link-title"
+          target="_blank"
+          href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html"
+        >
+          Theme documentation
+        </a>
+      </div>
+      <div class="box-item">
+        <span class="field-label">Change Theme : </span>
+        <el-switch v-model="theme" />
+        <aside style="margin-top:15px;">
+          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
+        </aside>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import '@/assets/custom-theme-dark/index.css'; // the theme changed version element-ui css
+import { toggleClass } from '@/utils';
+
+export default {
+  name: 'Theme',
+  data() {
+    return {
+      theme: false,
+      tags: [
+        { name: 'Tag One', type: '' },
+        { name: 'Tag Two', type: 'info' },
+        { name: 'Tag Three', type: 'success' },
+        { name: 'Tag Four', type: 'warning' },
+        { name: 'Tag Five', type: 'danger' },
+      ],
+      slideValue: 50,
+      radio: 3,
+    };
+  },
+  watch: {
+    theme() {
+      toggleClass(document.body, 'custom-theme');
+    },
+  },
+};
+</script>