XiaoETech_app/pages/index.vue

"calendar-box<template>
  <view class="page-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">小鹅通</text>
      <view class="nav-icons">
        <view class="iconfont1 icon-sousuo icon" @click="handleSearch"></view>
        <view class="iconfont1 icon-rili icon" @click="showCalendarDrawer"></view>
      </view>
    </view>
    <!-- 仿日历形状的框 -->
    <view class="calendar-box">
      <!-- 这里可以添加日历内容 -->
      <div class="daily - tip">
    <div class="tip - content">
      <span class="date">14</span>
      <span class="month">/ 五月</span>
      <p class="slogan">学习让我们成为更好的自己。</p>
    </div>
    <!-- <div class="tip- img">
      <img src="../static/images/image.png" alt="学习插图"> 
    </div> -->
  </div>
    </view>
    <!-- 中间内容 -->
    <view class="content-box">
      <text class="course-title">我的课程</text>
      <!-- 新增椭圆形蓝色框 -->
      <view class="oval-blue-box">
        <text class="oval-text">更多课程</text>
      </view>
    </view>
    <!-- 新增提示文字 -->
    <text class="no-course-tip">找不到已购课程?</text>

    <!-- 右侧抽屉 -->
    <view 
      class="calendar-drawer" 
      :style="{ right: showDrawer ? '0' : '-300px' }"
      v-if="showDrawer"
      @click.self="closeCalendarDrawer"
    >
      <view class="drawer-header">
        <view class="close-btn" @click="closeCalendarDrawer">×</view>
      </view>
      <!-- 这里可以添加实时日历组件 -->
      <view class="real-time-calendar">
        <!-- 实时日历内容 -->
        实时日历内容
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDrawer: false
    };
  },
  methods: {
    handleSearch() {
      // 假设搜索页面路径为 /pages/search/index，可根据实际情况修改
      uni.navigateTo({
        url: '/pages/search/index'
      });
    },
    showCalendarDrawer() {
      this.showDrawer = true;
    },
    closeCalendarDrawer() {
      this.showDrawer = false;
    }
  }
};
</script>

<style scoped>
@import '@/static/fontico/iconfont.css';
  /* 页面容器 */
  .page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* 导航栏 */
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #eee;
    position: relative;
  }

  /* 修改导航标题样式 */
  .nav-title {
    font-size: 48rpx; /* 加大字号 */
    color: #000; /* 变为黑色 */
  }

  .nav-icons {
    position: absolute;
    right: 30rpx;
    display: flex;
    gap: 30rpx;
  }

  /* 修改图标样式 */
  .iconfont1 {
    font-size: 50rpx; /* 放大图标 */
    color: #333;
  }

  /* 仿日历形状的框 */
  .calendar-box {
    width: 90%; /* 可根据需求调整宽度 */
    height: 150rpx; /* 缩短高度，可根据需求调整 */
    margin: 20rpx auto;
    border: 1rpx solid #ccc;
    border-radius: 10rpx;
    background-color: #f5f5f5;
    flex: none; /* 移除 flex 属性，使用固定高度 */
  }

  /* 中间内容框 */
  .content-box {
    width: 90%; /* 宽度接近页面宽度 */
    height: 400px; /* 高度自适应 */
    background-color: #fff;
    margin: 20rpx auto; /* 居中放置 */
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    flex: none; /* 移除 flex 属性 */
    position: relative; /* 为子元素定位做准备 */
  }

  /* 修改为圆角矩形样式 */
  .oval-blue-box {
    position: absolute;
    bottom: 12%; /* 往下移动，可根据需求调整 */
    left: 50%;
    height: 50px;
    transform: translateX(-50%);
    background-color: transparent; /* 背景透明 */
    border: 2px solid #007AFF; /* 蓝色边框 */
    border-radius: 150px; /* 圆角半径，可根据需求调整 */
    padding: 10px 100px; /* 左右内边距在原来 40px 的基础上加宽一倍 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 椭圆形框内文字样式 */
  .oval-text {
    color: #004AFF; /* 加深蓝色文字 */
    font-size: 16px;
    white-space: nowrap; /* 防止文字换行 */
  }

  .course-title {
    font-size: 32rpx;
    font-weight: bold;
  }

  /* 新增提示文字样式 */
  .no-course-tip {
    font-size: 14px; /* 小字大小，可根据需求调整 */
    color: #666; /* 文字颜色，可根据需求调整 */
    text-align: center; /* 文字居中 */
    margin-top: 10px; /* 与上方框的间距，可根据需求调整 */
  }

/* 右侧抽屉样式 */
.calendar-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 999;
}

.real-time-calendar {
  padding: 20px;
}

/* 抽屉头部样式 */
.drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

/* 关闭按钮样式 */
.close-btn {
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
}
/* 整体容器样式 */
.daily-tip {
    background-color: #e6f7ff; /* 浅蓝色背景，类似图中背景色调 */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影增加立体感 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 日期和话语部分样式 */
.tip-content {
    width: 60%;
}

.date {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.month {
    font-size: 16px;
    color: #666;
    margin-left: 5px;
}

.slogan {
    font-size: 18px;
    color: #333;
    margin-top: 10px;
}

/* 插图部分样式 */
.tip-img {
    width: 30%;
    display: flex;
    justify-content: flex-end;
}

.tip-img img {
    max-width: 100%;
    height: auto;
}
</style>