root
/
yibu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改dashbord 样式

main
范庆磊 3 years ago
parent
2f8a3e35d5
commit
1c0e1412ca
6 changed files with 9393 additions and 180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      web/package.json
  2. BIN
      web/src/assets/dashbord.png
  3. 398
      web/src/view/dashboard/index.vue
  4. 197
      web/src/view/dashboard/index1.vue
  5. 3
      web/vue.config.js
  6. 8974
      web/yarn.lock

1
web/package.json
View File

@ -17,7 +17,6 @@
"path": "^0.12.7",
"qs": "^6.8.0",
"quill": "^1.3.7",
"sass": "^1.34.1",
"screenfull": "^5.0.2",
"script-ext-html-webpack-plugin": "^2.1.4",
"spark-md5": "^3.0.1",

BIN
web/src/assets/dashbord.png
View File

Side by Side

After

Width: 700  |  Height: 700  |  Size: 70 KiB

398
web/src/view/dashboard/index.vue
View File

@ -1,197 +1,239 @@
<template>
<div class="big">
<el-row class="card">
<el-col :xs="24" :lg="16" :md="16" style="height:90px">
<div class="car-left">
<el-row>
<el-col :xs="4" :md="3" :lg="3">
<span class="card-img">
<img :src="userInfo.headerImg" alt="">
</span>
</el-col>
<el-col :xs="20" :lg="12" :md="12">
<div class="text">
<h4>早安，管理员， 请开始您一天的工作吧！</h4>
<p class="tips-text">
<i class="el-icon-sunny el-icon" />
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
</p>
</div>
</el-col>
</el-row>
<div class="page">
<div class="mycard dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class>
<i class="el-icon-sort icon"></i>今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class>
<i class="el-icon-s-custom icon"></i>总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class>
<i class="el-icon-s-comment icon"></i>好评率 (99%)
</div>
</el-col>
</el-row>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt />
</div>
</el-col>
<el-col :xs="24" :lg="8" :md="8">
<div class="car-right">
<el-row>
<el-col :span="8">
<div class="card-item">
<span class="flow"><i class="el-icon-s-grid" /></span>
<span>今日流量 </span>
<b>13260</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="user-number">
<i class="el-icon-s-custom" />
</span>
<span>总用户 </span>
<b>48286</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="feedback">
<i class="el-icon-star-on" />
</span>
<span>好评率 </span>
<b>98%</b>
</div>
</el-col>
</el-row>
<div class="mycard dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
<div class="mycard quick-entrance">
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
class="quick-entrance-items"
>
<div class="quick-entrance-item">
<div
class="quick-entrance-item-icon"
:style="{ backgroundColor: card.bg }"
>
<i :class="card.icon" :style="{ color: card.color }" />
</div>
<p>{{ card.label }}</p>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card shadow="hover">
<h2>
使用教学：<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/">https://www.bilibili.com/video/BV1Rg411u7xH/</a>
</h2>
<br>
<h2>
插件仓库：<a style="color:#409EFF" target="view_window" href="https://github.com/flipped-aurora/gva-plugins">https://github.com/flipped-aurora/gva-plugins</a>
</h2>
<div />
</el-card>
</el-col>
</el-row>
<div class="shadow">
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
>
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{ color: card.color }" />
<p>{{ card.label }}</p>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Dashboard',
components: {
},
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb'
},
{
label: '代码生成器',
icon: 'el-icon el-icon-cpu',
name: 'autoCode',
color: '#ffd666'
},
{
label: '表单生成器',
icon: 'el-icon el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0'
},
{
label: '关于我们',
icon: 'el-icon el-icon-user',
name: 'about',
color: '#5cdbd3'
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e',
bg :'rgba(255, 156, 110,.3)'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff',
bg :'rgba(105, 192, 255,.3)'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb',
bg :'rgba(179, 127, 235,.3)'
},
{
label: '代码生成器',
icon: ' el-icon-cpu',
name: 'autoCode',
color: '#ffd666',
bg :'rgba(255, 214, 102,.3)'
},
{
label: '表单生成器',
icon: 'el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0',
bg :'rgba(255, 133, 192,.3)'
},
{
label: '关于我们',
icon: ' el-icon-user',
name: 'about',
color: '#5cdbd3',
bg :'rgba(92, 219, 211,.3)'
}
]
}
]
}
},
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
toTarget(name) {
this.$router.push({ name })
}
}
}
</script>
<style lang="scss" scoped>
.big {
margin: 100px 0 0 0;
padding-top: 10px;
background-color: rgb(243, 243, 243);
.top {
width: 100%;
height: 360px;
margin-top: 20px;
overflow: hidden;
.chart-container {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
.page {
background: #f8f8f8;
padding: 10px;
.mycard {
background-color: #fff;
border-radius: 10px;
height: auto;
padding: 10px 30px;
overflow: hidden;
margin-bottom: 20px;
}
}
.mid {
width: 100%;
height: 380px;
.chart-wrapper {
height: 340px;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
.dashbord1 {
height: 150px;
display: flex;
align-items: center;
justify-content: space-between;
color: #777;
&-left {
&-title {
font-size: 22px;
color: #000;
}
&-dot {
font-size: 14px;
margin-top: 10px;
}
&-rows {
margin-top: 15px;
width: 600px;
align-items: center;
}
}
&-right {
height: 600px;
width: 600px;
margin-top: -20px;
}
}
}
.bottom {
width: 100%;
height: 420px;
// margin: 20px 0;
.el-row {
margin-right: 4px !important;
.dashbord2 {
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
&-item {
line-height: 25px;
}
}
.chart-player {
width: 100%;
height: 270px;
padding: 10px;
background-color: #fff;
.quick-entrance-items {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #333;
.quick-entrance-item {
height: auto;
&-icon {
width: 50px;
height: 50px !important;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
i{
font-size: 24px;
}
}
p{
margin-top: 10px;
}
}
}
.iPlayer{
width: 100%;
height: 100%;
}
.icon {
font-size: 22px;
color: rgb(85, 160, 248);
width: 30px;
height: 30px;
margin-right: 10px;
}
//小屏幕不显示右侧，将登陆框居中
@media (max-width: 750px) {
.mycard {
padding: 20px 10px !important;
.dashbord1 {
height: auto;
&-left {
&-title {
font-size: 20px !important;
}
&-rows {
margin-top: 15px;
align-items: center;
}
}
&-right {
display: none;
}
}
.dashbord2 {
&-item {
line-height: 20px;
}
}
.icon {
font-size: 18px;
}
}
}
}
</style>
</style>

197
web/src/view/dashboard/index1.vue
View File

@ -0,0 +1,197 @@
<template>
<div class="big">
<el-row class="card">
<el-col :xs="24" :lg="16" :md="16" style="height:90px">
<div class="car-left">
<el-row>
<el-col :xs="4" :md="3" :lg="3">
<span class="card-img">
<img :src="userInfo.headerImg" alt="">
</span>
</el-col>
<el-col :xs="20" :lg="12" :md="12">
<div class="text">
<h4>早安，管理员， 请开始您一天的工作吧！</h4>
<p class="tips-text">
<i class="el-icon-sunny el-icon" />
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
</p>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :xs="24" :lg="8" :md="8">
<div class="car-right">
<el-row>
<el-col :span="8">
<div class="card-item">
<span class="flow"><i class="el-icon-s-grid" /></span>
<span>今日流量 </span>
<b>13260</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="user-number">
<i class="el-icon-s-custom" />
</span>
<span>总用户 </span>
<b>48286</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="feedback">
<i class="el-icon-star-on" />
</span>
<span>好评率 </span>
<b>98%</b>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card shadow="hover">
<h2>
使用教学：<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/">https://www.bilibili.com/video/BV1Rg411u7xH/</a>
</h2>
<br>
<h2>
插件仓库：<a style="color:#409EFF" target="view_window" href="https://github.com/flipped-aurora/gva-plugins">https://github.com/flipped-aurora/gva-plugins</a>
</h2>
<div />
</el-card>
</el-col>
</el-row>
<div class="shadow">
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
>
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{ color: card.color }" />
<p>{{ card.label }}</p>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Dashboard',
components: {
},
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb'
},
{
label: '代码生成器',
icon: 'el-icon el-icon-cpu',
name: 'autoCode',
color: '#ffd666'
},
{
label: '表单生成器',
icon: 'el-icon el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0'
},
{
label: '关于我们',
icon: 'el-icon el-icon-user',
name: 'about',
color: '#5cdbd3'
}
]
}
},
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
toTarget(name) {
this.$router.push({ name })
}
}
}
</script>
<style lang="scss" scoped>
.big {
margin: 100px 0 0 0;
padding-top: 10px;
background-color: rgb(243, 243, 243);
.top {
width: 100%;
height: 360px;
margin-top: 20px;
overflow: hidden;
.chart-container {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
}
}
.mid {
width: 100%;
height: 380px;
.chart-wrapper {
height: 340px;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
.bottom {
width: 100%;
height: 420px;
// margin: 20px 0;
.el-row {
margin-right: 4px !important;
}
.chart-player {
width: 100%;
height: 270px;
padding: 10px;
background-color: #fff;
}
.iPlayer{
width: 100%;
height: 100%;
}
}
}
</style>

3
web/vue.config.js
View File

@ -25,7 +25,8 @@ module.exports = {
// 把key的路径代理到target位置
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { // 需要代理的路径 例如 '/api'
target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
// target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
target: `https://demo.gin-vue-admin.com/api/`, // 代理到 目标路径
changeOrigin: true,
pathRewrite: { // 修改路径数据
['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除

8974
web/yarn.lock
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save