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

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

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

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

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

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

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

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

@ -5,7 +5,7 @@
backgroundColor: randomColor(), 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> </el-card>
</template> </template>
@ -22,11 +22,23 @@ export default {
width: 20, width: 20,
isResizable: true, isResizable: true,
props: { props: {
hpx: { pxData: {
type: Number type: Object,
}, require: false,
wpx: { default: () => ({
type: Number 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 () { data () {
@ -212,7 +224,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.card-view { .card-view {
//border-radius: 10px; //border-radius: 10px;
color: #ffffff; color: $color-primary;
} }
.el-card { .el-card {

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

@ -1,5 +1,5 @@
<template> <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"> <div class="time">
<h2>{{ time }}</h2> <h2>{{ time }}</h2>
<p>{{ day }}</p> <p>{{ day }}</p>
@ -29,7 +29,7 @@ export default {
fontColor: { fontColor: {
label: '字体颜色', label: '字体颜色',
type: 'color', type: 'color',
value: '#ffffff', value: '',
placeholder: '请选择字体颜色' placeholder: '请选择字体颜色'
} }
}, },
@ -67,7 +67,10 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.card-view {
color: $color-primary;
}
.time h2 { .time h2 {
font-size: 24px; font-size: 24px;

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

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

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

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

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

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

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

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

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

@ -1,5 +1,9 @@
<template> <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="welcome">
<div class="logo"> <div class="logo">
<img src="/image/django-vue-admin.png"> <img src="/image/django-vue-admin.png">
@ -58,7 +62,7 @@ export default {
fontColor: { fontColor: {
label: '字体颜色', label: '字体颜色',
type: 'color', type: 'color',
value: '#ffffff', value: '',
placeholder: '请选择字体颜色' placeholder: '请选择字体颜色'
} }
}, },
@ -86,7 +90,10 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.card-view {
color: $color-primary;
}
.welcome .logo { .welcome .logo {
text-align: center; 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 style="color:#000;">宽{{ item.w }} x 高{{ item.h }}</div>
</div> </div>
<component :class="customizing?'set-component-bg':''" :is="allComps[item.element]" <component :class="customizing?'set-component-bg':''" :is="allComps[item.element]"
:config="item.config || {}" :width="item.w" :height="item.h" :wpx="item.wpx" :config="item.config || {}" :width="item.w" :height="item.h" :pxData="pxData[item.i]"></component>
:hpx="item.hpx"></component>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
</div> </div>
@ -97,7 +96,6 @@
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import allComps from './components' import allComps from './components'
import util from '@/libs/util'
import VueGridLayout from 'vue-grid-layout' import VueGridLayout from 'vue-grid-layout'
import SuspendedLibrary from '@/views/dashboard/workbench/suspendedLibrary' import SuspendedLibrary from '@/views/dashboard/workbench/suspendedLibrary'
import DashboardConfig from '@/views/dashboard/workbench/config' import DashboardConfig from '@/views/dashboard/workbench/config'
@ -119,7 +117,8 @@ export default {
defaultLayout: initData, defaultLayout: initData,
layout: [], layout: [],
colNum: 48, colNum: 48,
minimize: false minimize: false,
pxData: {}
} }
}, },
async created () { async created () {
@ -129,7 +128,6 @@ export default {
defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)), defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)),
user: true user: true
}, { root: true }) }, { root: true })
console.log(this.layout)
}, },
mounted () { mounted () {
this.$emit('on-mounted') this.$emit('on-mounted')
@ -180,8 +178,8 @@ export default {
push (item) { push (item) {
this.layout.push({ this.layout.push({
i: this.getLayoutElementNumber(item.key), i: this.getLayoutElementNumber(item.key),
x: (this.layout.length * 2) % (this.colNum || 24), x: (this.layout.length * 2) % (this.colNum || 12),
y: this.layout.length + (this.colNum || 24), y: this.layout.length + (this.colNum || 12),
w: item.width, w: item.width,
h: item.height, h: item.height,
config: item.config || {}, config: item.config || {},
@ -200,10 +198,14 @@ export default {
this.minimize = false this.minimize = false
this.$refs.suspendedLibrary.menu = false this.$refs.suspendedLibrary.menu = false
this.$refs.widgets.style.removeProperty('transform') 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', { await this.$store.dispatch('d2admin/db/set', {
dbName: 'sys', dbName: 'sys',
path: 'grid-layout', path: 'grid-layout',
value: this.layout, value: layout,
user: true user: true
}, { root: true }) }, { root: true })
}, },
@ -260,11 +262,13 @@ export default {
}, },
// 设置实际的宽度和高度 // 设置实际的宽度和高度
containerResizedEvent: function (i, newH, newW, newHPx, newWPx) { 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 => { this.layout.map(val => {
if (val.i === i) { if (val.i === i) {
val.hpx = Number(newHPx) this.$set(this.pxData, val.i, {
val.wpx = Number(newWPx) hpx: Number(newHPx),
wpx: Number(newWPx)
})
} }
}) })
} }

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

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