meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
zhangdingyu
2019-09-19 15:08:21 +08:00
parent d1d86a0319
commit f4e35da1f6
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/dashboard/index.vue
View File

@@ -3,24 +3,25 @@
<div class="dashboard-container"> <div class="dashboard-container">
<div class="sudoku_row" > <div class="sudoku_row" >
<div class="dashboard-text" style="color:black">用户名：{{ name }}</div> <div class="dashboard-text" style="color:black">用户名：{{ name }}</div>
<el-divider content-position="right" style="margin:24px">消息通知</el-divider> <el-divider content-position="right" style="margin:24px"/>
<el-card v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item"> <div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">
<div> <router-link :to="sudoku.router" style="width: 100%">
<el-badge :value="sudoku.value"> <el-badge :value="sudoku.value" style="width: 100%;text-align:center">
<svg-icon :icon-class="sudoku.icon" :style="{color:Color(index)}"/> <svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>
<router-link :to="sudoku.router">{{ sudoku.name }}</router-link> <h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>
</el-badge> </el-badge>
</div> </router-link>
</el-card> </div>
<div v-for="(value1,index1) in fathers" :key="index1" style="width:100%">
<div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
<div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white"> <div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
<svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:25px;height:25px"/> <svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
{{ value1.title }} {{ value1.title }}
</div> </div>
<router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path"> <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_item1" style="height:150px;width:170px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4)"> <el-card shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)">
<svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(127,172,237);display:block;margin: auto;border: 0 solid black;width:50px;height:50px"/><br> <svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
<div style="color:rgb(127,172,237);text-align:center">{{ value2.title }}</div> <h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ value2.title }}</h4>
</el-card> </el-card>
</router-link> </router-link>
</div> </div>
@@ -37,6 +38,7 @@ export default {
name: 'Dashboard', name: 'Dashboard',
data() { data() {
return { return {
colors: ['rgb(162,126,253)', 'rgb(254,178,0)', 'rgb(66,222,144)', 'rgb(68,176,254)', 'rgb(255,87,116)'],
sudokus: [], sudokus: [],
curSelect: null, curSelect: null,
number: '', number: '',
@@ -174,13 +176,13 @@ export default {
.sudoku_item{ .sudoku_item{
margin-top: 24ps; margin-top: 24ps;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 20px; margin-right: 20px;
border: 0 solid red; border: 0 solid red;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
width:15%; width:240px;
height: 80px; height: 80px;
/*padding-top: 20px;*/ /*padding-top: 20px;*/
/*padding-bottom: 10px;*/ /*padding-bottom: 10px;*/
@@ -203,12 +205,11 @@ export default {
flex-direction: column; flex-direction: column;
width:15%; width:15%;
height: 80px; height: 80px;
padding-top: 20px; padding-top: 30px;
margin: 20px;
/*padding-bottom: 10px;*/ /*padding-bottom: 10px;*/
} }
.sudoku_item1:hover { .sudoku_item1:hover {
border: 2px solid white; border: 2px solid rgb(135,187,224);
} }
.sudoku_item1 img{ .sudoku_item1 img{
margin-bottom: 3px; margin-bottom: 3px;