家里的样式

src/views/dashboard/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <el-card style="min-height:calc(100vh - 84px);background: url('../../../static/bg.jpg') no-repeat;background-size:100% 100%">
+    <div class="dashboard-container">
+      <div class="sudoku_row" >
+        <div class="dashboard-text" style="color:white">用户名：{{ name }}</div>
+        <el-divider content-position="right" style="margin:24px">消息通知</el-divider>
+        <el-card v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item ">
+          <div>
+            <el-badge :value="sudoku.value">
+              <svg-icon :icon-class="sudoku.icon" style="" />
+              <router-link :to="sudoku.router">{{ sudoku.name }}</router-link>
+            </el-badge>
+          </div>
+        </el-card>
+        <el-divider content-position="right" style="margin:24px"/>
+
+        <div v-for="(value1,index1) in fathers" :key="index1" style="width:100%">
+          <el-divider content-position="left" style="margin:24px">{{ value1.title }}</el-divider>
+          <router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
+            <el-card shadow="hover" class="sudoku_item" style="height:150px;width:170px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4)">
+              <svg-icon :icon-class="value2.icon" :style="{color:Color(index2)}" class="bgc" style="display:block;margin: auto;border: 0 solid black;width:70px;height:70px"/><br>
+              <div style="color:black;text-align:center">{{ value2.title }}</div>
+            </el-card>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </el-card>
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import request from '@/utils/request'
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      sudokus: [],
+      curSelect: null,
+      number: '',
+      timer: '',
+      fathers: [],
+      sons: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'token'
+    ])
+  },
+  mounted() {
+    this.getFileList()
+    this.timer = setInterval(this.getFileList, 60 * 60 * 1000) // 60 分钟一刷新
+    this.initFirstModule()
+    this.initSecondModule()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    async initFirstModule() {
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '3',
+          name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号= ${this.token} and [path] = '/'`
+        }
+      }).then(data => {
+        this.fathers = []
+        data.data.map(v => {
+          this.fathers.push({
+            id: v.id,
+            title: v.title
+          })
+        })
+      })
+    },
+    Color(index) {
+      const colorAngle = Math.floor(Math.random() * 360 + index)
+      return 'hsla(' + colorAngle + ',70%,30%,1)'
+    },
+    async initSecondModule() {
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '3',
+          name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号= ${this.token} and [path] <> '/'`
+        }
+      }).then(data => {
+        console.log(data)
+        this.sons = []
+        data.data.map(v => {
+          this.sons.push({
+            id: v.id,
+            pid: v.pid,
+            path: v.path,
+            icon: v.icon,
+            title: v.title
+          })
+        })
+      })
+    },
+    async getFileList() {
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '3',
+          name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号=${this.token} and 是否通知 = 1`
+        }
+      }).then(data => {
+        this.sudokus = []
+        for (let i = 0; i < data.data.length; i++) {
+          this.getMessageNum(data.data[i].消息通知来源, data.data[i].通知条件, data, i)
+        }
+        console.log(this.sudokus)
+      })
+    },
+    async getMessageNum(tableName, condition, rawData, i) {
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '3',
+          name: `select count(*) from ${tableName} where ${condition}`
+        }
+      }).then(res => {
+        this.sudokus.push({
+          id: rawData.data[i].id,
+          name: rawData.data[i].title,
+          icon: rawData.data[i].icon,
+          router: rawData.data[i].path,
+          value: res.data[0].Column1
+        })
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .dashboard-container .el-divider__text {
+    color: gray;
+    font-size: 22px;
+    background-color: rgba(255,255,255,0.8);
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  /*.text {*/
+    /*font-size: 14px;*/
+  /*}*/
+
+  /*.item {*/
+    /*margin-bottom: 18px;*/
+  /*}*/
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 100%
+  }
+  .item {
+    margin-top: 10px;
+    margin-right: 40px;
+  }
+  .sudoku_row{
+    display: flex;
+    align-items: center;
+    width:100%;
+    flex-wrap: wrap;
+  }
+  .sudoku_item{
+    margin-bottom: 20px;
+    margin-left: 20px;
+    border: 0 solid red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width:15%;
+    height: 80px;
+    /*padding-top: 10px;*/
+    /*padding-bottom: 10px;*/
+  }
+  .sudoku_item:hover {
+    border: 2px solid white;
+  }
+  .opacity{
+    opacity: 0.4;
+    background: #e5e5e5;
+  }
+  .sudoku_item img{
+    margin-bottom: 3px;
+    display: block;
+  }
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>