Skip to content

W
wangxiaolu-sfa-ui
提交 8e547f4f authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

style(首页): 样式重构

解决侧边栏开关，首页 ECharts 图表适配问题
上级 218e6867
隐藏空白字符变更
内嵌 并排
正在显示 包含 181 行增加 和 156 行删除
package.json
浏览文件 @ 8e547f4f
......@@ -21,7 +21,7 @@
"@vueuse/core": "10.11.0",
"axios": "0.28.1",
"clipboard": "2.0.11",
"echarts": "5.5.1",
"echarts": "^5.4.0",
"element-plus": "2.7.6",
"file-saver": "2.0.5",
"fuse.js": "6.6.2",
......
src/assets/styles/element-ui.scss
浏览文件 @ 8e547f4f
......@@ -97,4 +97,20 @@
.el-select{
width: 215px;
}
.el-tabs{
flex: 1;
}
.el-row{
margin-left: 0 !important;
margin-right: 0 !important;
.el-col:nth-child(1){
padding-left: 0 !important;
}
.el-col:nth-last-child(1){
padding-right: 0 !important;
}
}
\ No newline at end of file
src/assets/styles/index.scss
浏览文件 @ 8e547f4f
......@@ -121,9 +121,11 @@ aside {
}
}
//main-container全局样式
// main-container全局样式
.app-container {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.components-container {
......
src/assets/styles/sidebar.scss
浏览文件 @ 8e547f4f
......@@ -5,6 +5,7 @@
transition: margin-left .28s;
margin-left: $base-sidebar-width;
position: relative;
box-sizing: border-box;
}
.sidebarHide {
......
src/assets/styles/variables.module.scss
浏览文件 @ 8e547f4f
......@@ -243,6 +243,6 @@ html.dark {
/* 主页背景 */
.app-main {
background-color: var(--el-bg-color) !important;
background-color: #141414 !important;
}
}
\ No newline at end of file
src/hooks/resize.js
浏览文件 @ 8e547f4f
import { onMounted, onBeforeUnmount } from 'vue';
import useAppStore from '@/store/modules/app';
const sidebar = computed(() => useAppStore().sidebar);
export function useWindowResize(callback) {
let resizeTimer = null
let handleResize = () => {
clearTimeout(resizeTimer)
resizeTimer = setTimeout(() => {
watch(sidebar, () => {
// 等待侧边栏导航动画完成，右侧才有最新宽度再 resize
setTimeout(() => {
callback()
}, 200)
}
let observer = new ResizeObserver(handleResize);
}, 300)
}, { deep: true })
onMounted(() => {
// 监听侧边栏宽度改变，右边图表要重新绘制
observer.observe(document.querySelector('.sidebar-container'))
window.addEventListener('resize', callback);
});
onBeforeUnmount(() => {
if (observer) {
observer.disconnect();
clearTimeout(resizeTimer)
resizeTimer = null
observer = null
handleResize = null
}
window.removeEventListener('resize', callback);
});
}
\ No newline at end of file
src/layout/components/AppMain.vue
浏览文件 @ 8e547f4f
<template>
<section class="app-main">
<router-view v-slot="{ Component, route }">
<transition name="fade-transform" mode="out-in">
<transition name="fade-transform"
mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
<component v-if="!route.meta.link"
:is="Component"
:key="route.path" />
</keep-alive>
</transition>
</router-view>
......@@ -33,30 +36,20 @@ function addIframe() {
}
</script>
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
background-color: var(--el-bg-color);
}
.fixed-header + .app-main {
padding-top: 50px;
}
.hasTagsView {
<style lang="scss"
scoped>
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
padding: 20px;
width: 100%;
position: relative;
overflow: hidden;
background-color: var(--el-bg-color);
display: flex;
flex-direction: column;
}
.fixed-header + .app-main {
padding-top: 84px;
}
}
</style>
<style lang="scss">
......@@ -81,4 +74,3 @@ function addIframe() {
border-radius: 3px;
}
</style>
src/layout/index.vue
浏览文件 @ 8e547f4f
......@@ -23,7 +23,6 @@
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
......@@ -43,7 +42,7 @@ const classObj = computed(() => ({
}))
const { width, height } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design
const WIDTH = 992;
watch(() => device.value, () => {
if (device.value === 'mobile' && sidebar.value.opened) {
......@@ -109,8 +108,24 @@ function setLayout() {
// 开启头部固定以后，main的高度需要设置为100vh
.fixed-header+.app-main {
min-height: 100vh;
padding-top: 50px + 20px;
}
// 有头部标签导航时
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
// min-height: calc(100vh - 84px);
min-height: 100vh;
}
.fixed-header+.app-main {
padding-top: 84px + 20px;
}
}
// 侧边栏导航隐藏时
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
......
src/views/bi/competitor/cmm/index.vue
浏览文件 @ 8e547f4f
......@@ -267,7 +267,7 @@ const reset = async () => {
flex-direction: column;
.chart_wrap {
padding: 20px 0;
/* padding: 20px 0; */
flex: 1;
display: flex;
flex-direction: column;
......
src/views/bi/competitor/index.vue
浏览文件 @ 8e547f4f
......@@ -30,14 +30,12 @@ const activeName = ref(list.value[0].name)
<style scoped
lang="scss">
.app-container {
min-height: calc(100vh - 84px);
.tabs {
background: var(--el-bg-color-overlay);
padding: 20px;
display: flex;
flex-direction: column;
min-height: 100%;
::v-deep(.el-tabs__content) {
flex: 1;
......
src/views/dashboard/BarChart.vue
浏览文件 @ 8e547f4f
......@@ -61,18 +61,27 @@ const initChart = () => {
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
animation: true,
animationDuration: 2000,
animationEasing: 'cubicInOut'
}, {
name: '冷热双吃',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
animation: true,
animationDuration: 2000,
animationEasing: 'cubicInOut'
}, {
name: '去骨凤爪',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
animation: true,
animationDuration: 2000,
animationEasing: 'cubicInOut'
}]
})
}
......@@ -80,6 +89,7 @@ const resize = () => {
chart.resize()
}
useWindowResize(resize)
onMounted(() => {
nextTick(() => {
initChart()
......
src/views/dashboard/LineChart.vue
浏览文件 @ 8e547f4f
......@@ -21,10 +21,6 @@ const props = defineProps({
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
......@@ -69,7 +65,8 @@ const setOptions = () => {
}
},
series: [{
name: '今年销量', itemStyle: {
name: '今年销量',
itemStyle: {
// normal: {
color: '#FF005A',
lineStyle: {
......@@ -81,7 +78,8 @@ const setOptions = () => {
smooth: true,
type: 'line',
data: props.chartData.expectedData,
animationEasing: 'cubicInOut'
// animationEasing: 'cubicInOut',
animationDuration: 2000
},
{
name: '去年销量',
......@@ -100,7 +98,8 @@ const setOptions = () => {
// }
},
data: props.chartData.actualData,
animationEasing: 'quadraticOut'
// animationEasing: 'quadraticOut'
animationDuration: 2000
}]
})
}
......@@ -109,22 +108,17 @@ watch(() => props.chartData, (newData, oldData) => {
setOptions();
}, { deep: true });
const initChart = () => {
chart = echarts.init(chartRef.value)
setOptions()
}
const resize = () => {
chart.resize()
}
useWindowResize(resize)
onMounted(() => {
nextTick(() => {
initChart()
chart = echarts.init(chartRef.value)
setOptions()
})
})
useWindowResize(() => {
chart.resize()
})
onBeforeUnmount(() => {
if (!chart) {
return
......
src/views/dashboard/PanelGroup.vue
浏览文件 @ 8e547f4f
<template>
<el-row :gutter="40"
class="panel-group">
<el-row class="panel-group" :gutter="20">
<el-col :xs="12"
:sm="12"
:lg="6"
......@@ -100,89 +99,87 @@ const handleSetLineChartData = (type) => {
<style lang="scss"
scoped>
.panel-group {
margin-top: 18px;
.card-panel-col {
margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: var(--el-gray-2);
background: var(--el-bg-color-overlay);
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: var(--el-gray-2);
background: var(--el-bg-color-overlay);
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3
}
}
.icon-people {
background: #40c9c6;
color: #40c9c6;
}
.icon-message {
background: #36a3f7;
color: #36a3f7;
}
.icon-money {
background: #f4516c;
color: #f4516c;
}
.icon-shopping {
background: #34bfa3
color: #34bfa3
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: var(--el-gray-1);
font-size: 16px;
margin-bottom: 12px;
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-num {
font-size: 20px;
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: var(--el-gray-1);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
......
src/views/dashboard/PieChart.vue
浏览文件 @ 8e547f4f
......@@ -56,6 +56,7 @@ const initChart = () => {
{ value: 59, name: '杭州' }
],
animationEasing: 'cubicInOut',
animationDuration: 2000,
}
]
})
......
src/views/dashboard/RaddarChart.vue
浏览文件 @ 8e547f4f
......@@ -6,10 +6,9 @@
<script setup>
import * as echarts from 'echarts'
import { onBeforeUnmount } from 'vue'
import { useWindowResize } from '@/hooks'
defineProps({
const props = defineProps({
className: {
type: String,
default: 'chart'
......@@ -24,12 +23,10 @@ defineProps({
}
})
let chart = null
let chart = {}
const chartRef = ref(null)
const initChart = () => {
chart = echarts.init(chartRef.value)
const setOptions = () => {
chart.setOption({
tooltip: {
trigger: 'axis',
......@@ -83,32 +80,35 @@ const initChart = () => {
data: [
{
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: '营销中心'
name: '营销中心',
animationDuration: 2000
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: '人力资源中心'
name: '人力资源中心',
animationDuration: 2000
},
{
value: [5500, 11000, 12000, 15000, 12000, 12000],
name: '财务中心'
name: '财务中心',
animationDuration: 2000
}
]
}]
})
}
const resize = () => {
chart.resize()
}
useWindowResize(resize)
onMounted(() => {
nextTick(() => {
initChart()
chart = echarts.init(chartRef.value)
setOptions()
})
})
useWindowResize(() => {
chart.resize()
})
onBeforeUnmount(() => {
if (!chart) {
return
......
src/views/index.vue
浏览文件 @ 8e547f4f
<template>
<div class="dashboard-editor-container">
<div class="dashboard-editor-container app-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<common-menu></common-menu>
<el-row :gutter="32">
<div class="row">
<common-menu></common-menu>
</div>
<el-row :gutter="32" class="row">
<el-col :xs="24"
:sm="24"
:lg="8">
......@@ -25,8 +28,8 @@
</div>
</el-col>
</el-row>
<el-row class="line-chart">
<line-chart :chart-data="lineChartData" />
<el-row class="line-chart row">
<line-chart :chartData="lineChartData"/>
</el-row>
</div>
</template>
......@@ -66,18 +69,22 @@ const handleSetLineChartData = (type) => {
<style lang="scss"
scoped>
.dashboard-editor-container {
padding: 32px;
.row{
margin-top: 20px;
}
.chart-wrapper {
background: var(--el-bg-color-overlay);
padding: 16px 16px 0;
margin: 32px 0;
}
.line-chart {
background: var(--el-bg-color-overlay);
padding: 16px 16px 0;
margin-bottom: 32px;
}
::v-deep(.el-row) {
width: 100%;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论