qianduan1/pages/index.vue

<template>
  <view class="container">
    <!-- 应用标题栏 -->
    <view class="header">
      <text class="app-name">小鹅通</text>
      <view class="header-icons">
        <image class="search-icon" src="/static/search-icon.png"></image>
        <image class="more-icon" src="/static/more-icon.png"></image>
      </view>
    </view>
    <!-- 日期和标语部分 -->
    <view class="date-section">
      <view class="date">
        <text class="date-num">{{dateNum}}</text>
        <text class="date-month">/五月</text>
      </view>
      <text class="slogan">学习让你更接近自己的梦想。</text>
      <image class="book-img" src="/static/book-img.png"></image>
    </view>
    <!-- 我的课程部分 -->
    <view class="my-courses">
      <text class="section-title">我的课程</text>
      <view class="view-more">
        <text class="view-more-text">查看更多</text>
        <image class="arrow-icon" src="/static/arrow-icon.png"></image>
      </view>
      <view v-if="!hasCourses" class="no-courses">
        <image class="box-img" src="/static/box-img.png"></image>
        <text class="no-courses-text">你还没有学习系列课程</text>
        <text class="no-courses-text">前往查看你的其他课程</text>
        <button class="more-courses-btn">更多课程</button>
      </view>
      <view v-else class="course-list">
        <!-- 这里可以循环展示课程列表，示例省略 -->
      </view>
      <text v-if="!hasCourses" class="find-course">找不到已购课程？</text>
    </view>
    <!-- 底部导航栏 -->
   <!-- <view class="tab-bar">
      <view class="tab-item" @click="goToPage('index')">
        <image class="tab-icon" src="/static/home-icon.png"></image>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" @click="goToPage('discover')">
        <image class="tab-icon" src="/static/discover-icon.png"></image>
        <text class="tab-text">发现</text>
      </view>
      <view class="tab-item" @click="goToPage('message')">
        <image class="tab-icon" src="/static/message-icon.png"></image>
        <text class="tab-text">消息</text>
      </view>
      <view class="tab-item" @click="goToPage('mine')">
        <image class="tab-icon" src="/static/mine-icon.png"></image>
        <text class="tab-text">我的</text>
      </view>
    </view> -->
  </view>
</template>
<script>
	export default {
	  data() {
	    return {
	      time: '18:31',
	      speed: '70.0',
	      battery: '36',
	      dateNum: '6',
	      hasCourses: false // 假设当前没有课程，可根据实际接口数据修改
	    };
	  },
	  methods: {
	    goToPage(page) {
	      uni.navigateTo({
	        url: `/${page}`
	      });
	    }
	  }
	};
</script>
<style scoped>
  /* 全局样式 */
  .container {
    background-color: #f7fafc;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #ebf4ff;
  }
  .time {
    font-size: 30rpx;
  }
  .network-status {
    display: flex;
    align-items: center;
  }
  .speed,
  .signal,
  .battery {
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    background-color: #ebf4ff;
  }
  .app-name {
    font-size: 40rpx;
    font-weight: bold;
  }
  .header-icons {
    display: flex;
  }
  .search-icon,
  .more-icon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
  }
  .date-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx;
    background-color: #ebf4ff;
    margin-bottom: 20rpx;
  }
  .date {
    display: flex;
    flex-direction: column;
  }
  .date-num {
    font-size: 60rpx;
    font-weight: bold;
  }
  .date-month {
    font-size: 30rpx;
  }
  .slogan {
    font-size: 30rpx;
    width: 60%;
  }
  .book-img {
    width: 200rpx;
    height: 150rpx;
  }
  .my-courses {
    padding: 0 40rpx;
    margin-bottom: 20rpx;
  }
  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .view-more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20rpx;
  }
  .view-more-text {
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  .arrow-icon {
    width: 20rpx;
    height: 20rpx;
  }
  .no-courses {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  }
  .box-img {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }
  .no-courses-text {
    text-align: center;
    font-size: 30rpx;
    margin-bottom: 10rpx;
  }
  .more-courses-btn {
    background-color: #ebf4ff;
    color: #007aff;
    border: 2rpx solid #007aff;
    border-radius: 40rpx;
    padding: 15rpx 80rpx;
    font-size: 32rpx;
    margin-top: 20rpx;
  }
  .find-course {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
  .tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tab-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 5rpx;
  }
  .tab-text {
    font-size: 24rpx;
  }
</style>