修改日历

董国庆

2025-05-28 ca1e21b390bf0d27aa997e73a5d4744be307c280

修改日历

 laboratory/src/views/middleground/index.vue

@@ -4,7 +4,7 @@
      <HeaderNav class="header-main" :logo="true" />
    </div>

    <div class="middleground">
    <div class="middleground" :class="windowWidth<1240 ? 'column' : ''">
      <!-- 左侧模块区域 -->
      <div class="left-modules">
        <!-- 这里将放置四个模块 -->
@@ -69,6 +69,7 @@
<script>
import { loginReq } from './service'
import HeaderNav from '../../layouts/components/HeaderNav.vue'
import { mapState } from 'vuex'
// 引入 Element UI 的日历组件
// import { ElCalendar } from 'element-ui';
export default {
@@ -77,6 +78,7 @@
    HeaderNav,
    // ElCalendar // 注册 ElCalendar 组件
  },

  data() {
    return {
      windowWidth: window.innerWidth,
@@ -90,11 +92,29 @@
      scale: 1
    }
  },
  computed: {},
  // computed: {},
  computed: {
    ...mapState(['tagList', 'isFold'])
  },

  created() { },
  mounted() { },
  created() {
    // 初始化时检查窗口大小
    this.handleResize();
  },
  mounted() {
     // 监听窗口大小变化
     window.addEventListener("resize", this.handleResize);
   },
  methods: {

    handleResize() {
      // if (window.innerWidth < 1000) {
      //   this.$store.commit("SET_ISFOLD", true);
      // } else if (window.innerWidth >= 1000 && this.isFold) {
      //   this.$store.commit("SET_ISFOLD", false);
      // }
      this.windowWidth = window.innerWidth;
    },
    // ...mapActions(['setIsFold']),
    handleKeyDown(event) {
      if (event.key === 'Enter') {
@@ -137,8 +157,9 @@
}

.login-page {
  width: 100%;
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  /* 确保页面至少和视口一样高，并随内容扩展 */
  background: url('../../assets/login/midBg.png') no-repeat center center;
  background-size: cover;
  display: flex;
@@ -165,32 +186,44 @@

  .middleground {
    flex: 1;
    height: calc(100vh - 70px);
    height: calc(100% - 70px);
    display: flex;
    justify-content: space-between;
    // flex-wrap: wrap;
    justify-content: flex-start;
    /* 左侧内容靠左对齐 */
    padding: 20px 20px 20px 108px;
    /* 调整左右内边距 */
    gap: 40px;
    /* 添加左右间距 */

    .left-modules {
      width: 38%;
      align-items: center;

      // padding: 140px 0;
      padding: 40px 0;
      display: flex;
      flex-wrap: wrap;
      box-sizing: content-box;
      justify-content: space-between;
      justify-content: center;
      /* 模块之间水平分散对齐 */
      /* 水平居中 */
      align-items: center;
      align-items: flex-start;
      /* 模块垂直靠上对齐 */
      /* 垂直居中 */
      padding: 100px 0;
      flex-grow: 1;
      /* 左侧宽度自适应 */
      align-content: flex-start;
      /* 多行模块垂直靠上对齐 */
      gap: 20px;
      /* 添加模块之间的垂直间距 */
      padding-right: 20px;
      /* 给左侧模块区域右侧添加一些间距，避免紧贴右侧内容 */
    }

    .module-item {
      width: 37%;
      height: 30%;
      // width: 307px;
      // height: 307px;
      // width: 37%;
      // height: 30%;
      width: 307px;
      height: 307px;
      background-color: red;
      display: flex;
      flex-direction: column;
@@ -260,11 +293,25 @@
          /* 示例下划线颜色 */
        }
      }

      &:nth-of-type(2n+1) {
        margin-right: 0;
      }

      &:nth-child(odd) {
        margin-right: 0px;
      }
    }

    .right-content {
      width: 45%;
      height: calc(100vh - 150px);
      width: 870px;
      /* 固定右侧宽度 */
      flex-shrink: 0;
      /* 防止右侧被压缩 */
      padding: 20px;
      border-radius: 8px;
      // background-color: #fff;
      // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      display: flex;
      /* 使日历和待办事项垂直排列 */
@@ -272,8 +319,9 @@

      .calendar-section {
        margin-bottom: 20px;
        box-sizing: border-box;
        /* 日历下方间距 */
        height: 59%;
        height: 595px;
        padding: 20px;
        border-radius: 14px;
        background: url(../../assets/login/rili.png) no-repeat center;
@@ -288,6 +336,7 @@
        .calendar {
          height: 100% !important;
          width: 100% !important;
          box-sizing: border-box;
        }

        /* 尝试调整 Element UI 日历的样式 */
@@ -295,9 +344,11 @@
          height: 100%;
          width: 100%;
          background: none !important;
          box-sizing: border-box;

          .el-calendar__header {
            padding: 12px 0;
            box-sizing: border-box;
          }

          .el-calendar__body {
@@ -307,6 +358,7 @@
          .el-calendar-table {
            thead th {
              padding: 5px 0;
              box-sizing: border-box;
              font-weight: normal;
            }

@@ -319,13 +371,14 @@
                justify-content: center;
                align-items: center;
                border-radius: 4px;
                box-sizing: border-box;
                /* 圆角 */
                margin: 2px;
                margin: 8px;
                /* 单元格间距 */
                cursor: pointer;
                width: 90px;
                // max-width: 90px;

                height: 58px;
                max-height: 61px;
                background: #FFFFFF;
                border-radius: 8px;
                border: 1px solid #EDEDED;
@@ -347,7 +400,7 @@
      }

      .todo-list-section {
        height: 32%;
        flex: 1;
        border-radius: 14px;
        background-color: rgba(255, 255, 255, 1);
        // overflow: auto;
@@ -461,6 +514,64 @@
    }
  }

  .column {
    flex-direction: column;
    /* 改为上下布局 */
    padding: 20px;
    /* 调整内边距 */
    gap: 20px;
    /* 调整上下间距 */
    height: auto;
    /* 高度自适应内容 */
    padding: 20px 20px 20px 18px !important;
  }

  // Tablet layout
  @media screen and (max-width: 768px) {
    .login-page {
      .middleground {
        flex-direction: column;
        /* 改为上下布局 */
        padding: 20px;
        /* 调整内边距 */
        gap: 20px;
        /* 调整上下间距 */
        height: auto;
        /* 高度自适应内容 */
        padding: 20px 20px 20px 18px !important;

        .left-modules {
          width: 100%;
          /* 左侧宽度占满 */
          justify-content: center;
          /* 在上下布局中水平居中模块 */
          padding: 0;
          /* 移除 padding */
          gap: 20px;
          /* 上下布局时模块之间的间距 */
          padding-right: 0;
          /* 移除右侧间距 */
        }

        .module-item {
          width: 307px;
          /* 模块宽度固定 */
          height: 307px;
          /* 模块高度固定 */
          margin-right: 0 !important;
          /* 移除桌面布局的右侧间距 */
        }

        .right-content {
          width: 100%;
          /* 右侧宽度占满 */
          height: auto;
          /* 高度自适应 */
          padding: 15px;
          /* 调整内边距 */
        }
      }
    }
  }
}
</style>