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"></view>
        <view class="iconfont1 icon-rili icon"></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>
</template>

<script>
export default {
  
}
</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; /* 与上方框的间距，可根据需求调整 */
  }
</style>