From 8e1a126f7ce64913b3498f3a440d3a2130aeab18 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 26 Jun 2025 19:55:52 +0800
Subject: [PATCH] feat:个人工作台样式调整
---
src/views/wel/components/statistics.vue | 9 +-
src/views/wel/index.vue | 45 +++++++----
src/views/wel/components/flyratio.vue | 3
src/components/wel-container/main.vue | 81 ++++++++++++++++++++
src/main.js | 2
src/page/index/index.vue | 1
src/page/index/top/index.vue | 1
src/views/wel/components/calendarBox.vue | 30 ++++---
src/views/wel/components/backlog.vue | 21 +++-
9 files changed, 151 insertions(+), 42 deletions(-)
diff --git a/src/components/wel-container/main.vue b/src/components/wel-container/main.vue
new file mode 100644
index 0000000..266f0ac
--- /dev/null
+++ b/src/components/wel-container/main.vue
@@ -0,0 +1,81 @@
+
+<template>
+ <div class="basic-container" :style="styleName" :class="{ 'basic-container--block': block }">
+ <el-card class="basic-container__card">
+ <slot></slot>
+ </el-card>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'basicContainer',
+ props: {
+ radius: {
+ type: [String, Number],
+ default: 10,
+ },
+ background: {
+ type: String,
+ },
+ block: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ computed: {
+ styleName () {
+ return {
+ borderRadius: `${this.radius}px`,
+ background: this.background,
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss">
+.basic-container {
+ height: 0;
+ flex: 1;
+
+
+ // box-sizing: border-box;
+ // height: 100%;
+.el-card {
+background-color: transparent !important;}
+ .basic-container__card {
+ height: 100% !important;
+ overflow: hidden;
+
+ .el-card__body {
+ display: flex;
+ flex-direction: column;
+ height: 100% !important;
+ overflow: hidden;
+ box-sizing: border-box;
+padding: 0 !important;
+ &>div {
+ height: 0;
+ flex: 1;
+ }
+ }
+ }
+
+ &--block {
+ height: 100%;
+
+ .basic-container__card {
+ height: 100%;
+ }
+ }
+
+ &__card {
+ width: 100%;
+ }
+
+ &:first-child {
+ padding-top: 0;
+ }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index c38114f..886400b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,6 +30,7 @@
import avueUeditor from 'avue-plugin-ueditor'
import basicBlock from 'components/basic-block/main.vue'
import basicContainer from 'components/basic-container/main.vue'
+import welContainer from 'components/wel-container/main.vue'
import basicMainContent from 'components/basic-main-content/main.vue'
import thirdRegister from './components/third-register/main.vue'
@@ -88,6 +89,7 @@
app.component(key, component)
}
app.component('basicContainer', basicContainer)
+app.component('welContainer', welContainer)
app.component('basicMainContent', basicMainContent)
app.component('basicBlock', basicBlock)
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 65ec8cd..c0b819c 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -131,5 +131,6 @@
background: transparent;
padding: 0 10px;
--el-color-primary: rgba(20, 65, 255, 1);
+ height: pxToVh(55);
}
</style>
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 9761509..2478ef5 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -133,6 +133,7 @@
flex: 1;
display: flex;
align-items: center;
+ height: pxToVh(80);
}
.top-bar__right {
diff --git a/src/views/wel/components/backlog.vue b/src/views/wel/components/backlog.vue
index ad3d306..dbd74a7 100644
--- a/src/views/wel/components/backlog.vue
+++ b/src/views/wel/components/backlog.vue
@@ -233,11 +233,16 @@
getOrderCount();
});
</script>
-
+<style>
+.el-empty__image {
+width: 100px !important; }
+</style>
<style lang="scss" scoped>
+
.bocklogBox {
width: 100%;
- height: 306px;
+ // height: 306px;
+ height: pxToVh(326);
background: rgba(255, 255, 255, 0.41);
box-shadow: 0px 3px 4px -1px rgba(125, 125, 125, 0.25);
border-radius: 8px 8px 8px 8px;
@@ -276,7 +281,8 @@
}
.dots {
width: 17px;
- height: 17px;
+ // height: 17px;
+ height: pxToVh(17);
border-radius: 50%;
background: #366fff;
color: #fff;
@@ -289,7 +295,8 @@
}
.dots1 {
width: 17px;
- height: 17px;
+ // height: 17px;
+ height: pxToVh(17);
border-radius: 50%;
background: none !important;
color: #366fff !important;
@@ -303,7 +310,8 @@
}
.todo-items {
margin-top: 10px;
- height: 250px;
+ // height: 250px;
+ height: pxToVh(250);
overflow-y: scroll;
}
@@ -317,7 +325,8 @@
box-shadow: 0px 2px 4px 0px rgba(173, 173, 173, 0.18);
transition: all 0.2s ease;
border-left: 4px solid transparent;
- height: 42px;
+ // height: 42px;
+ height: pxToVh(42);
&:hover {
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
diff --git a/src/views/wel/components/calendarBox.vue b/src/views/wel/components/calendarBox.vue
index 20ce47e..44c8ceb 100644
--- a/src/views/wel/components/calendarBox.vue
+++ b/src/views/wel/components/calendarBox.vue
@@ -105,9 +105,10 @@
</script>
<style lang="scss">
.calenBox {
- height: 630px;
+// height: 630px;
+height: pxToVh(610);
.el-calendar {
- height: 100%; // 日历填充容器
+ // height: 80%; // 日历填充容器
// 标题样式
&__title {
font-weight: bold;
@@ -116,14 +117,15 @@
}
// 日历主体
- &__body {
- height: 98%; // 关键：继承父高度
+ // &__body {
+ // height: 98%; // 关键：继承父高度
- .el-calendar-table {
- height: 90% !important; // 百分比生效
- }
- }
-
+ // .el-calendar-table {
+ // height: 90% !important; // 百分比生效
+ // }
+ // }
+.el-calendar-table .el-calendar-day{
+height: 78px !important;}
// 选中日期样式
.el-calendar-table td.is-selected {
background-color: #f0f7ff;
@@ -145,18 +147,18 @@
</style>
<style lang="scss" scoped>
.calenBox {
- margin-top: 17px;
- height: 630px;
+ margin-top: 10px;
+ // height: 630px;
+ height: pxToVh(610);
+ border-radius: 10px;
overflow: hidden;
+ background-color: #fff;
.event-item {
font-size: 12px;
// padding: 2px;
border-radius: 3px;
white-space: nowrap;
- // overflow: hidden;
- // text-overflow: ellipsis;
-
&.work-order {
font-weight: 400;
font-size: 12px;
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index eef3091..3894a64 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -230,7 +230,8 @@
}
.nestCenter {
width: 100%;
- height: 600px;
+ // height: 600px;
+ height: pxToVh(600);
.chart {
width: 100%;
height: 100%;
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index cb3fb32..d0642df 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -295,7 +295,8 @@
<style scoped lang="scss">
.statistics {
- min-height: 174px;
+ // height: 174px;
+ height: pxToVh(174);
background: #ffffff;
border-radius: 8px 8px 8px 8px;
margin-bottom: 10px;
@@ -332,15 +333,15 @@
padding: 0 14px 0 21px;
// display: grid;
// grid-template-columns: repeat(4, 1fr);
- height: 80px;
+ height: pxToVh(80);
display: flex;
justify-content: space-around;
:deep(.el-empty ){
width: 60px;
- height: 60px;
+ height: pxToVh(60);
.el-empty__image{
width: 60px !important;
- height: 60px !important;}
+ height: pxToVh(60)!important;}
.custom-text {
font-size: 12px;
color: #7c8091;
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 6611797..3f72d17 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -1,4 +1,5 @@
<template>
+<welContainer>
<div class="workbench">
<div class="workleft">
<!-- 设备统计 -->
@@ -95,6 +96,7 @@
<CalenBox></CalenBox>
</div>
</div>
+ </welContainer>
</template>
<script setup>
@@ -511,20 +513,23 @@
</style>
<style scoped lang="scss">
.workbench {
- padding: 0px 20px 0 10px;
+ height: 100%;
+ flex: 1;
+ // padding: 0px 20px 0 10px;
display: flex;
justify-content: space-between;
-height: calc(100% - 5rem);
}
.workleft {
width: 68%;
margin-right: 10px;
+ height: 100%;
.comprehensiveCon {
- // height: 736px;
- background: #ffffff;
+ background: #ffffff !important;
+ height: pxToVh(766);
border-radius: 8px 8px 8px 8px;
.comprehensive {
- padding: 17px 14px 0 21px;
+
+ padding: 14px 14px 0 21px;
.title {
display: flex;
justify-content: space-between;
@@ -548,7 +553,8 @@
}
.time-card {
text-align: center;
- height: 30px;
+ // height: 30px;
+ height: pxToVh(30);
background: #ffffff;
border-radius: 4px 0px 0px 4px;
border: 1px solid #e5e5e5;
@@ -561,7 +567,7 @@
.card-item {
width: 94px;
height: 100%;
- line-height: 32px;
+ line-height: 28px;
cursor: pointer;
font-family: 'Source Han Sans CN';
font-weight: 400;
@@ -587,7 +593,7 @@
width: 60%;
border-right: 1px solid #dfdfdf;
.workOrder {
- margin-top: 31px;
+ margin-top: 11px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #dfdfdf;
@@ -595,7 +601,7 @@
width: 40%;
.card-title {
display: flex;
- margin-bottom: 17px;
+ margin-bottom: 10px;
align-items: center;
img {
width: 36px;
@@ -629,16 +635,16 @@
grid-template-columns: repeat(2, 1fr);
row-gap: 14px;
gap: 10px;
- margin-bottom: 27px;
+ padding-bottom: 5px;
.status-item {
display: flex;
text-align: center;
justify-content: space-between;
height: 97px;
+ // height: pxToVh(107);
max-width: 158px;
background: #f6f8fe;
border-radius: 8px 8px 8px 8px;
- margin-bottom: 9px;
img {
width: 26px;
height: 26px;
@@ -685,8 +691,8 @@
}
.charts {
margin-top: 30px;
- width: 348px;
- height: 242px;
+ width: 100%;
+ height: auto;
.chart {
width: 100%;
height: 100%;
@@ -696,7 +702,7 @@
// 飞行统计
.flyOrder {
- margin-top: 10px;
+ margin-top: 5px;
.fytitle {
display: flex;
align-items: center;
@@ -711,7 +717,8 @@
}
}
.flycenter {
- margin-top: 22px;
+ margin-top: 13px;
+
.centerBox {
display: flex;
justify-content: space-between;
@@ -720,7 +727,8 @@
padding: 7px 7px 0 15px;
// width: 196px;
flex: 1;
- height: 80px;
+ // height: 80px;
+ height: pxToVh(80);
background: #f6f8fe;
box-shadow: 0px 5px 4px 0px #ebf1ff;
border-radius: 8px 8px 8px 8px;
@@ -739,7 +747,7 @@
color: #7c8091;
}
.flydata {
- margin-top: 15px;
+ margin-top: 10px;
text-align: right;
font-size: 14px;
color: #7c8091;
@@ -773,6 +781,9 @@
}
.workright {
+height: 100%;
width: 32%;
+ // display: flex;
+ // flex-direction: column;
}
</style>
--
Gitblit v1.9.3