XiaoETech_app/pages/index.vue

<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">
      <!-- 这里可以添加日历内容 -->
    </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: 80%; /* 可根据需求调整宽度 */
    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;
}
</style>