feat:个人工作台样式调整

张含笑

2025-06-26 8e1a126f7ce64913b3498f3a440d3a2130aeab18

feat:个人工作台样式调整

 src/components/wel-container/main.vue

New file
@@ -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>

 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)

 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>

 src/page/index/top/index.vue

@@ -133,6 +133,7 @@
  flex: 1;
  display: flex;
  align-items: center;
  height: pxToVh(80);
}

.top-bar__right {

 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);

 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;

 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%;

 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;

 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>