dashboard

This commit is contained in:
chenjianan
2019-07-26 08:38:54 +08:00
parent 253a8c2d94
commit f14f5d46e2
5 changed files with 20 additions and 12 deletions

View File

@@ -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;