init

src/views/index/components/Plan.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <vab-icon icon="send-plane-2-line" />
+      <!-- 计划 -->
+      <el-tag class="card-header-tag" type="success">祝用框架的小伙伴都能住上别墅，开上保时捷</el-tag>
+    </template>
+    <el-table :data="tableData" height="283px" row-key="title">
+      <el-table-column align="center" label="拖拽" width="50px">
+        <template #default="{}">
+          <vab-icon :icon="['fas', 'arrows-alt']" style="cursor: pointer" />
+        </template>
+      </el-table-column>
+      <el-table-column width="20px" />
+      <el-table-column label="目标" prop="title" width="230px" />
+      <el-table-column label="进度" width="220px">
+        <template #default="{ row }">
+          <el-progress :color="row.color" :percentage="row.percentage" />
+        </template>
+      </el-table-column>
+      <el-table-column width="50px" />
+      <el-table-column label="完成时间" prop="endTIme" />
+    </el-table>
+  </el-card>
+</template>
+<script>
+  import Sortable from 'sortablejs'
+
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            title: '帮助中小企业盈利1个亿',
+            endTIme: '2099-12-31',
+            percentage: 50,
+            color: '#95de64',
+          },
+          {
+            title: '帮助10万个人',
+            endTIme: '2029-12-31',
+            percentage: 8,
+            color: '#69c0ff',
+          },
+          {
+            title: '交个帅气的男朋友',
+            endTIme: '2021-12-31',
+            percentage: 76,
+            color: '#1890FF',
+          },
+          {
+            title: 'vue-admin-better标星过1K',
+            endTIme: '2020-03-31',
+            percentage: 100,
+            color: '#ffc069',
+          },
+          {
+            title: '活到老，学到老',
+            endTIme: '2094-12-16',
+            percentage: 25,
+            color: '#5cdbd3',
+          },
+          {
+            title: '变成像尤雨溪一样优秀的人',
+            endTIme: '此生无望',
+            percentage: 1,
+            color: '#b37feb',
+          },
+        ],
+      }
+    },
+    mounted() {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd({ newIndex, oldIndex }) {
+          const currRow = _this.tableData.splice(oldIndex, 1)[0]
+          _this.tableData.splice(newIndex, 0, currRow)
+        },
+      })
+    },
+  }
+</script>

src/views/index/components/VersionInformation.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card class="version-information" shadow="hover">
+    <template #header>
+      <vab-icon icon="information-line" />
+    </template>
+    <el-scrollbar>
+      <table class="table">
+        <tr>
+          <td>vue</td>
+          <td>{{ dependencies['vue'] }}</td>
+          <td>@vue/cli</td>
+          <td>{{ devDependencies['@vue/cli-service'] }}</td>
+        </tr>
+        <tr>
+          <td>vuex</td>
+          <td>{{ dependencies['vuex'] }}</td>
+          <td>vue-router</td>
+          <td>{{ dependencies['vue-router'] }}</td>
+        </tr>
+        <tr>
+          <td>element-ui</td>
+          <td>{{ dependencies['element-ui'] }}</td>
+          <td>axios</td>
+          <td>{{ dependencies['axios'] }}</td>
+        </tr>
+        <tr>
+          <td>授权渠道</td>
+          <td colspan="3">
+            <a href="https://vuejs-core.cn/authorization" target="_blank">
+              <el-button style="margin-left: 10px" type="primary">PRO付费版本 购买源码 ￥699</el-button>
+            </a>
+            <a href="https://vuejs-core.cn/authorization" target="_blank">
+              <el-button style="margin-left: 10px" type="primary">Plus付费版本 购买源码 ￥799</el-button>
+            </a>
+            <a href="https://github.com/zxwk1998/vue-admin-better/" target="_blank">
+              <el-button style="margin-left: 10px" type="warning">开源免费版</el-button>
+            </a>
+          </td>
+        </tr>
+      </table>
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<script>
+  import { dependencies, devDependencies } from '../../../../package.json'
+
+  export default {
+    data() {
+      return {
+        updateTime: process.env.VUE_APP_UPDATE_TIME,
+        dependencies,
+        devDependencies,
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .version-information {
+    .table {
+      width: 100%;
+      color: #666;
+      border-collapse: collapse;
+      background-color: #fff;
+
+      td {
+        position: relative;
+        padding: 9px 15px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 20px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border: 1px solid #e6e6e6;
+
+        &:nth-child(odd) {
+          width: 20%;
+          text-align: right;
+          background-color: #f7f7f7;
+        }
+      }
+    }
+  }
+</style>