refine code

src/views/theme/index.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="app-container">
-    <code>会补动态换肤的教程</code>
     <el-card class="box-card">
       <div slot="header">
         <span style="line-height: 36px;">偏好设置</span>
+        <a class='link-type link-title' target="_blank" href='https://segmentfault.com/a/1190000009762198#articleHeader2'>态换肤的教程</a>
       </div>
-
       <div class="box-item">
         <span class="field-label">换肤:</span>
         <el-switch v-model="theme" on-text="" off-text="">
@@ -43,6 +42,7 @@
   </div>
 </template>
 
+
 <script>
 import { toggleClass } from 'utils'
 import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
@@ -51,39 +51,19 @@ export default {
   data() {
     return {
       theme: false,
-      tags: [{
-        name: '标签一',
-        type: ''
-      },
-      {
-        name: '标签二',
-        type: 'gray'
-      },
-      {
-        name: '标签三',
-        type: 'primary'
-      },
-      {
-        name: '标签四',
-        type: 'success'
-      },
-      {
-        name: '标签五',
-        type: 'warning'
-      },
-      {
-        name: '标签六',
-        type: 'danger'
-      }
-      ],
-      inputVisible: false,
-      inputValue: ''
+      tags: [
+        { name: '标签一', type: '' },
+        { name: '标签二', type: 'gray' },
+        { name: '标签三', type: 'primary' },
+        { name: '标签四', type: 'success' },
+        { name: '标签五', type: 'warning' },
+        { name: '标签六', type: 'danger' }
+      ]
     }
   },
   watch: {
     theme() {
       toggleClass(document.body, 'custom-theme')
-        //   this.$store.dispatch('setTheme', value);
     }
   }
 }
@@ -103,4 +83,7 @@ export default {
   .tag-item{
     margin-right: 15px;
   }
+  .link-title{
+    margin-left:35px;
+  }
 </style>