gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 🎨 优化首页前端页面样式

pull/95/head
李强 2023-04-21 14:11:21 +08:00
parent 5ff92536e4
commit 85c9e0ced0
13 changed files with 188 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/views/dashboard/workbench/components/about.vue
View File

@ -36,7 +36,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -55,7 +55,7 @@ export default {
if (this.config?.color?.value) {
return this.config.color.value
}
return this.color || this.$util.randomColor()
return this.$util.randomColor()
}
}
}
@ -63,11 +63,11 @@ export default {
<style scoped lang="scss">
.card-view {
color: #FFFFFF;
color: $color-primary;
p {
font-size: 0.7em;
color: #FFFFFF;
font-size: 0.8em;
color: $color-primary;
}
}
.el-card{

6
web/src/views/dashboard/workbench/components/attachmentTotal.vue
View File

@ -51,7 +51,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -81,7 +81,7 @@ export default {
if (this.config?.color?.value) {
return this.config.color.value
}
return this.color || this.$util.randomColor()
return this.$util.randomColor()
}
},
mounted () {
@ -93,7 +93,7 @@ export default {
<style scoped lang="scss">
.card-view {
//border-radius: 10px;
color: #ffffff;
color: $color-primary;
.card-content {
.card-content-label {

6
web/src/views/dashboard/workbench/components/databaseTotal.vue
View File

@ -57,7 +57,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -80,7 +80,7 @@ export default {
if (this.config?.color?.value) {
return this.config.color.value
}
return this.color || this.$util.randomColor()
return this.$util.randomColor()
}
},
mounted () {
@ -92,7 +92,7 @@ export default {
<style scoped lang="scss">
.card-view {
//border-radius: 10px;
color: #ffffff;
color: $color-primary;
.card-content {
.card-content-label {

6
web/src/views/dashboard/workbench/components/loginTotal.vue
View File

@ -38,7 +38,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -66,7 +66,7 @@ export default {
if (this.config?.color?.value) {
return this.config.color.value
}
return this.color || this.$util.randomColor()
return this.$util.randomColor()
}
},
mounted () {
@ -78,7 +78,7 @@ export default {
<style scoped lang="scss">
.card-view {
//border-radius: 10px;
color: #FFFFFF;
color: $color-primary;
.card-content {
.card-content-label {

26
web/src/views/dashboard/workbench/components/registeredUser.vue
View File

@ -5,7 +5,7 @@
backgroundColor: randomColor(),
}"
>
<div id="main" :style="{width: wpx+'px',height: hpx+'px'}"></div>
<div id="main" :style="{width: pxData.wpx+'px',height: pxData.hpx+'px'}"></div>
</el-card>
</template>
@ -22,11 +22,23 @@ export default {
width: 20,
isResizable: true,
props: {
hpx: {
type: Number
},
wpx: {
type: Number
pxData: {
type: Object,
require: false,
default: () => ({
wpx: 0,
hpx: 0
})
}
},
watch: {
pxData: {
handler () {
// eslint-disable-next-line no-unused-expressions
this.myChart?.resize({ width: this.pxData.wpx, height: this.pxData.hpx })
},
immediate: true,
deep: true
}
},
data () {
@ -212,7 +224,7 @@ export default {
<style scoped lang="scss">
.card-view {
//border-radius: 10px;
color: #ffffff;
color: $color-primary;
}
.el-card {

9
web/src/views/dashboard/workbench/components/time.vue
View File

@ -1,5 +1,5 @@
<template>
<el-card shadow="hover" class="item-background" :style="{backgroundColor: randomColor(),color: config?.fontColor?.value}">
<el-card shadow="hover" class="card-view" :style="{backgroundColor: randomColor(),color: config?.fontColor?.value}">
<div class="time">
<h2>{{ time }}</h2>
<p>{{ day }}</p>
@ -29,7 +29,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -67,7 +67,10 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.card-view {
color: $color-primary;
}
.time h2 {
font-size: 24px;

28
web/src/views/dashboard/workbench/components/userLogin.vue
View File

@ -6,7 +6,7 @@
}"
>
<!-- shadow="always" -->
<div id="myChart" :style="{width: wpx+'px',height: hpx+'px'}"></div>
<div id="myChart" :style="{width: pxData.wpx+'px',height: pxData.hpx+'px'}"></div>
</el-card>
</template>
@ -22,11 +22,23 @@ export default {
width: 20,
isResizable: true,
props: {
hpx: {
type: Number
},
wpx: {
type: Number
pxData: {
type: Object,
require: false,
default: () => ({
wpx: 0,
hpx: 0
})
}
},
watch: {
pxData: {
handler () {
// eslint-disable-next-line no-unused-expressions
this.myChart?.resize({ width: this.pxData.wpx, height: this.pxData.hpx })
},
immediate: true,
deep: true
}
},
data () {
@ -180,8 +192,6 @@ export default {
this.myChart = this.$echarts.init(document.getElementById('myChart'))
this.initGet()
this.drawLine()
console.log(111, this.wpx, this.hpx)
this.myChart.resize({ width: this.wpx, height: this.hpx })
}
}
</script>
@ -189,7 +199,7 @@ export default {
<style scoped lang="scss">
.card-view {
//border-radius: 10px;
color: #ffffff;
color: $color-primary;
}
.el-card{
height: 100%;

30
web/src/views/dashboard/workbench/components/usersActive.vue
View File

@ -1,6 +1,8 @@
<template>
<el-card class="card-view" :style="{backgroundColor:randomColor()}" shadow="always">
<div style="display:flex;flex: 1; flex-wrap: wrap;justify-content: space-between; margin-top: 10px;">
<el-card class="card-view" shadow="always"
:style="{backgroundColor:randomColor(),color: config?.fontColor?.value}">
<div style="display:flex;flex: 1; flex-wrap: wrap;justify-content: space-between; margin-top: 10px;"
:style="{color: config?.fontColor?.value}">
<div style="flex: 1; min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
@ -107,6 +109,26 @@ export default {
height: 18,
width: 20,
isResizable: true,
config: {
color: {
label: '背景颜色',
type: 'color',
value: '',
placeholder: '颜色为空则随机变换颜色'
},
fontColor: {
label: '字体颜色',
type: 'color',
value: '',
placeholder: '请选择字体颜色'
}
},
props: {
config: {
type: Object,
required: false
}
},
data () {
return {
newName: '',
@ -148,11 +170,11 @@ export default {
<style scoped lang="scss">
.card-view {
// border-radius: 10px;
color: rgb(37, 176, 138);
color: $color-primary;
}
.lightgreen-box {
border-bottom: 2px solid rgb(37, 176, 138);
border-bottom: 2px solid;
height: 60px;
margin-bottom: 10px;
}

6
web/src/views/dashboard/workbench/components/usersTotal.vue
View File

@ -38,7 +38,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -66,7 +66,7 @@ export default {
if (this.config?.color?.value) {
return this.config.color.value
}
return this.color || this.$util.randomColor()
return this.$util.randomColor()
}
},
mounted () {
@ -78,7 +78,7 @@ export default {
<style scoped lang="scss">
.card-view {
//border-radius: 10px;
color: #FFFFFF;
color: $color-primary;
.card-content {
.card-content-label {

19
web/src/views/dashboard/workbench/components/ver.vue
View File

@ -1,5 +1,10 @@
<template>
<el-card shadow="hover" class="card-view" :style="{backgroundColor:randomColor(),color: config?.fontColor?.value}">
<el-card
shadow="hover"
:header="config?.showHeader?.value ? '版本信息' : ''"
class="card-view"
:style="{backgroundColor:randomColor(),color: config?.fontColor?.value}"
>
<div style="text-align: center;">
<h2 style="margin-top: 5px;">{{ title }}</h2>
<p style="margin-top: 5px;">最新版本 {{ ver }}</p>
@ -20,6 +25,12 @@ export default {
width: 16,
isResizable: true,
config: {
showHeader: {
label: '显示头部信息',
type: 'boot',
value: true,
placeholder: '颜色为空则随机变换颜色'
},
color: {
label: '背景颜色',
type: 'color',
@ -29,7 +40,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -63,14 +74,14 @@ export default {
if (this.config?.color?.value) {
return this.config.color.value
}
return this.color || this.$util.randomColor()
return this.$util.randomColor()
}
}
}
</script>
<style scoped lang="scss">
.card-view {
color: #FFFFFF;
color: $color-primary;
//background: rgb(80,168,244);
//box-shadow: 1px 6px 8px 2px rgba(80,168,244,0.2);
.card-content {

13
web/src/views/dashboard/workbench/components/welcome.vue
View File

@ -1,5 +1,9 @@
<template>
<el-card shadow="hover" :header="config?.showHeader?.value ? '欢迎使用' : ''" :style="{background: randomColor(), color: config?.fontColor?.value}">
<el-card
shadow="hover"
:header="config?.showHeader?.value ? '欢迎使用' : ''"
class="card-view"
:style="{background: randomColor(), color: config?.fontColor?.value}">
<div class="welcome">
<div class="logo">
<img src="/image/django-vue-admin.png">
@ -58,7 +62,7 @@ export default {
fontColor: {
label: '字体颜色',
type: 'color',
value: '#ffffff',
value: '',
placeholder: '请选择字体颜色'
}
},
@ -86,7 +90,10 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.card-view {
color: $color-primary;
}
.welcome .logo {
text-align: center;
}

26
web/src/views/dashboard/workbench/index.vue
View File

@ -84,8 +84,7 @@
<div style="color:#000;">宽{{ item.w }} x 高{{ item.h }}</div>
</div>
<component :class="customizing?'set-component-bg':''" :is="allComps[item.element]"
:config="item.config || {}" :width="item.w" :height="item.h" :wpx="item.wpx"
:hpx="item.hpx"></component>
:config="item.config || {}" :width="item.w" :height="item.h" :pxData="pxData[item.i]"></component>
</grid-item>
</grid-layout>
</div>
@ -97,7 +96,6 @@
<script>
import draggable from 'vuedraggable'
import allComps from './components'
import util from '@/libs/util'
import VueGridLayout from 'vue-grid-layout'
import SuspendedLibrary from '@/views/dashboard/workbench/suspendedLibrary'
import DashboardConfig from '@/views/dashboard/workbench/config'
@ -119,7 +117,8 @@ export default {
defaultLayout: initData,
layout: [],
colNum: 48,
minimize: false
minimize: false,
pxData: {}
}
},
async created () {
@ -129,7 +128,6 @@ export default {
defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)),
user: true
}, { root: true })
console.log(this.layout)
},
mounted () {
this.$emit('on-mounted')
@ -180,8 +178,8 @@ export default {
push (item) {
this.layout.push({
i: this.getLayoutElementNumber(item.key),
x: (this.layout.length * 2) % (this.colNum || 24),
y: this.layout.length + (this.colNum || 24),
x: (this.layout.length * 2) % (this.colNum || 12),
y: this.layout.length + (this.colNum || 12),
w: item.width,
h: item.height,
config: item.config || {},
@ -200,10 +198,14 @@ export default {
this.minimize = false
this.$refs.suspendedLibrary.menu = false
this.$refs.widgets.style.removeProperty('transform')
var layout = JSON.parse(JSON.stringify(this.layout))
layout.map(val => {
delete val.pxData
})
await this.$store.dispatch('d2admin/db/set', {
dbName: 'sys',
path: 'grid-layout',
value: this.layout,
value: layout,
user: true
}, { root: true })
},
@ -260,11 +262,13 @@ export default {
},
// 设置实际的宽度和高度
containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
console.log('CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx)
console.log(this.layout, 'CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx)
this.layout.map(val => {
if (val.i === i) {
val.hpx = Number(newHPx)
val.wpx = Number(newWPx)
this.$set(this.pxData, val.i, {
hpx: Number(newHPx),
wpx: Number(newWPx)
})
}
})
}

127
web/src/views/dashboard/workbench/init.js
View File

@ -15,15 +15,13 @@ const log = [
fontColor: {
label: '字体颜色',
type: 'color',
value: 'rgba(70, 183, 146, 1)',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'usersTotal',
moved: false,
hpx: 122,
wpx: 397
moved: false
},
{
i: 'loginTotal1',
@ -41,15 +39,13 @@ const log = [
fontColor: {
label: '字体颜色',
type: 'color',
value: 'rgba(30, 144, 255, 1)',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'loginTotal',
moved: false,
hpx: 122,
wpx: 397
moved: false
},
{
i: 'attachmentTotal2',
@ -67,15 +63,13 @@ const log = [
fontColor: {
label: '字体颜色',
type: 'color',
value: 'rgba(255, 140, 0, 1)',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'attachmentTotal',
moved: false,
hpx: 122,
wpx: 397
moved: false
},
{
i: 'databaseTotal3',
@ -93,59 +87,40 @@ const log = [
fontColor: {
label: '字体颜色',
type: 'color',
value: 'rgba(0, 186, 189, 1)',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'databaseTotal',
moved: false,
hpx: 122,
wpx: 397
},
{
i: 'usersActive5',
x: 33,
y: 12,
w: 15,
h: 24,
config: {},
isResizable: true,
element: 'usersActive',
moved: false,
hpx: 254,
wpx: 498
moved: false
},
{
i: 'userLogin6',
x: 0,
x: 14,
y: 12,
w: 16,
w: 17,
h: 24,
config: {},
isResizable: true,
element: 'userLogin',
moved: false,
hpx: 254,
wpx: 532
moved: false
},
{
i: 'registeredUser7',
x: 16,
x: 31,
y: 12,
w: 17,
h: 24,
config: {},
isResizable: true,
element: 'registeredUser',
moved: false,
hpx: 254,
wpx: 566
moved: false
},
{
i: 'dashboardImg8',
x: 32,
y: 36,
y: 51,
w: 16,
h: 24,
config: {
@ -176,15 +151,13 @@ const log = [
},
isResizable: true,
element: 'dashboardImg',
moved: false,
hpx: 254,
wpx: 532
moved: false
},
{
i: 'dashboardImg9',
x: 16,
y: 36,
w: 16,
x: 15,
y: 51,
w: 17,
h: 24,
config: {
src: {
@ -214,15 +187,13 @@ const log = [
},
isResizable: true,
element: 'dashboardImg',
moved: false,
hpx: 254,
wpx: 532
moved: false
},
{
i: 'dashboardImg10',
x: 16,
y: 60,
w: 22,
x: 15,
y: 36,
w: 20,
h: 15,
config: {
src: {
@ -252,15 +223,13 @@ const log = [
},
isResizable: true,
element: 'dashboardImg',
moved: false,
hpx: 155,
wpx: 736
moved: false
},
{
i: 'welcome10',
x: 0,
y: 36,
w: 16,
w: 15,
h: 39,
config: {
color: {
@ -272,23 +241,51 @@ const log = [
fontColor: {
label: '字体颜色',
type: 'color',
value: 'rgba(0, 0, 0, 1)',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'welcome',
moved: false,
hpx: 419,
wpx: 532
moved: false
},
{
i: 'usersActive11',
x: 0,
y: 12,
w: 14,
h: 24,
config: {
color: {
label: '背景颜色',
type: 'color',
value: '',
placeholder: '颜色为空则随机变换颜色'
},
fontColor: {
label: '字体颜色',
type: 'color',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'usersActive',
moved: false
},
{
i: 'ver11',
x: 38,
y: 60,
w: 10,
x: 35,
y: 36,
w: 13,
h: 15,
config: {
showHeader: {
label: '显示头部信息',
type: 'boot',
value: true,
placeholder: '颜色为空则随机变换颜色'
},
color: {
label: '背景颜色',
type: 'color',
@ -298,15 +295,13 @@ const log = [
fontColor: {
label: '字体颜色',
type: 'color',
value: 'rgba(30, 144, 255, 1)',
value: null,
placeholder: '请选择字体颜色'
}
},
isResizable: true,
element: 'ver',
moved: false,
hpx: 155,
wpx: 329
moved: false
}
]
export default log