dashboard
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-card style="background-color: rgb(41, 51, 61)">
|
||||
<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:{{ name }}</div>
|
||||
<div class="dashboard-text" style="color:white">用户名:{{ name }}</div>
|
||||
<el-divider content-position="right">消息通知</el-divider>
|
||||
<el-card v-for="(sudoku,index) in sudokus" :class="curSelect==sudoku.id?'opacity':''" :key="index" shadow="hover" class="sudoku_item ">
|
||||
<div>
|
||||
@@ -17,9 +17,9 @@
|
||||
<div v-for="(value1,index1) in fathers" :key="index1" style="width:100%">
|
||||
<el-divider content-position="left">{{ 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:160px;width:170px;margin: 5px;display: inline-block;background: #0F2027;background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);background: linear-gradient(to right, #2C5364, #203A43, #0F2027);">
|
||||
<svg-icon :icon-class="value2.icon" class="bgc" style="display:block;margin: auto;border: 0 solid black;color:white;width:70px;height:70px" /><br>
|
||||
<div style="color:white;text-align:center">{{ value2.title }}</div>
|
||||
<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>
|
||||
@@ -78,6 +78,10 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
Color(index) {
|
||||
const colorAngle = Math.floor(Math.random() * 360 + index)
|
||||
return 'hsla(' + colorAngle + ',70%,30%,1)'
|
||||
},
|
||||
async initSecondModule() {
|
||||
await request({
|
||||
url: '',
|
||||
@@ -138,8 +142,9 @@ export default {
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.dashboard-container .el-divider__text {
|
||||
color: white;
|
||||
background-color: rgb(41,51,61);
|
||||
color: gray;
|
||||
font-size: 22px;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@@ -183,8 +188,11 @@ export default {
|
||||
flex-direction: column;
|
||||
width:15%;
|
||||
height: 80px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
/*padding-top: 10px;*/
|
||||
/*padding-bottom: 10px;*/
|
||||
}
|
||||
.sudoku_item:hover {
|
||||
border: 2px solid white;
|
||||
}
|
||||
.opacity{
|
||||
opacity: 0.4;
|
||||
|
||||
Reference in New Issue
Block a user