功能变化: 首页默认

web/src/views/dashboard/workbench/components/about.vue

@@ -1,6 +1,8 @@
 <template>
-  <el-card  shadow="hover" header="关于项目" class="item-background">
+  <el-card  shadow="hover" header="关于项目" class="card-view" :style="{backgroundColor:randomColor()}">
-    <p>高性能 / 精致 / 优雅。基于Vue2 + Element-UI 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
+    <p>后端:Django-rest-framework</p>
+    <p>前端:Vue2 + Element-UI + d2-crud-plus</p>
+    <p>快速系统开发平台，,如果喜欢就点个星星支持一下。</p>
     <p>
       <a href='https://liqianglog.gitee.io/django-vue-admin' target="_blank">
         <img src='https://liqianglog.gitee.io/django-vue-admin/badge/star.svg?theme=dark' alt='star' style="vertical-align: middle">
@@ -14,19 +16,36 @@ export default {
   title: '关于项目',
   icon: 'el-icon-setting',
   description: '点个星星支持一下',
-  height: 20,
+  height: 10,
   width: 8,
-  minH: 20,
+  minH: 10,
   minW: 4,
   isResizable: true,
   data () {
     return {}
+  },
+  methods:{
+    // 生成一个随机整数
+    randomColor () {
+      const color = [
+        '#50A8F4FF',
+        '#FD6165FF',
+        '#E679D8FF',
+        '#F9AB5BFF'
+      ]
+      const ran = Math.floor(Math.random() * 4)
+      return color[ran]
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.item-background p {
+.card-view{
-  color: #999;
+  color: #FFFFFF;
+p {
+  font-size: 0.7em;
+  color: #FFFFFF;
+}
 }
 </style>

web/src/views/dashboard/workbench/components/time.vue

@@ -14,8 +14,8 @@ export default {
   title: '时钟',
   icon: 'el-icon-alarm-clock',
   description: '演示部件效果',
-  height: 17,
+  height: 10,
-  minH: 17,
+  minH: 10,
   width: 8,
   minW: 4,
   isResizable: true,
@@ -47,11 +47,11 @@ export default {
 }
 
 .time h2 {
-  font-size: 40px;
+  font-size: 24px;
 }
 
 .time p {
-  font-size: 14px;
+  font-size: 18px;
   margin-top: 10px;
   opacity: 0.7;
 }

web/src/views/dashboard/workbench/components/ver.vue

@@ -1,44 +1,70 @@
 <template>
-  <el-card shadow="hover" header="版本信息">
+  <el-card shadow="hover" class="card-view" :style="{backgroundColor:randomColor()}" header="版本信息">
-    <div style="height: 70px;text-align: center;">
+    <div style="text-align: center;color: #FFFFFF">
-      <h2 style="margin-top: 5px;">Dvadmin</h2>
+      <h2 style="margin-top: 5px;">{{ title }}</h2>
       <p style="margin-top: 5px;">最新版本 {{ ver }}</p>
     </div>
-    <div style="margin-top: 5px;">
-      <el-button type="primary" plain round @click="golog">更新日志</el-button>
-      <el-button type="primary" plain round @click="gogit">gitee</el-button>
-    </div>
   </el-card>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   title: '版本信息',
   icon: 'el-icon-monitor',
   description: '当前项目版本信息',
-  height: 22,
+  height: 10,
+  minH: 10,
   width: 8,
-  minH: 22,
   minW: 4,
   isResizable: true,
   data () {
     return {
-      ver: 'loading...'
+      ver: 'loading...',
+      title: ''
     }
   },
   mounted () {
     this.getVer()
   },
+  computed: {
+    ...mapState('d2admin', {
+      siteName: state => state.settings.data['login.site_name'] // 网站名称
+    })
+  },
   methods: {
     async getVer () {
-      this.ver = 'v2.1.0'
+      this.ver = `v${process.env.VUE_APP_VERSION}` || 'v2.1.1'
+      this.title = this.siteName || process.env.VUE_APP_TITLE
     },
     golog () {
       window.open('https://gitee.com/liqianglog/django-vue-admin/releases')
     },
     gogit () {
       window.open('https://gitee.com/liqianglog/django-vue-admin')
+    },
+    // 生成一个随机整数
+    randomColor () {
+      const color = [
+        '#50A8F4FF',
+        '#FD6165FF',
+        '#E679D8FF',
+        '#F9AB5BFF'
+      ]
+      const ran = Math.floor(Math.random() * 4)
+      return color[ran]
     }
   }
 }
 </script>
+<style scoped lang="scss">
+.card-view{
+  color: #FFFFFF;
+  //background: rgb(80,168,244);
+  //box-shadow: 1px 6px 8px 2px rgba(80,168,244,0.2);
+  .card-content{
+    //text-align: center;
+  }
+}
+</style>

web/src/views/dashboard/workbench/index.vue

@@ -97,17 +97,12 @@ export default {
       customizing: false,
       allComps: allComps,
       selectLayout: [],
-      defaultGrid: {
+      defaultLayout: [
-        // 默认分栏数量和宽度 例如 [24] [18,6] [8,8,8] [6,12,6]
+        { x: 0, y: 0, w: 50, h: 50, i: '0', element: 'welcome' },
-        layout: [12, 6, 6],
+        { x: 0, y: 52, w: 8, h: 16, i: '1', element: 'about' },
-        // 小组件分布，com取值:views/home/components 文件名
+        { x: 8, y: 52, w: 8, h: 16, i: '2', element: 'time' },
-        copmsList: [
+        { x: 16, y: 52, w: 8, h: 20, i: '3', element: 'ver' }
-          ['welcome'],
+      ],
-          ['about', 'ver'],
-          ['time', 'progress']
-        ]
-      },
-      defaultLayout: [],
       layout: [
         // { x: 0, y: 0, w: 2, h: 2, i: '0', element: 'welcome' },
         // { x: 2, y: 0, w: 2, h: 4, i: '1', element: 'about' },