exam_mp/pages/learn/index.vue

<template>
  <Container title="学习本">
    <view class="header">
      <view class="stats">
        <text>10000/20000</text>
        <text>正确率50%</text>
      </view>
      <view class="tabs">
        <view class="tab active">法规</view>
        <view class="tab">药一</view>
        <view class="tab">药综</view>
        <!-- 其他标签 -->
      </view>
      <view class="sub-tabs">
        <view class="sub-tab active">答案正确(2301)</view>
        <view class="sub-tab">答案错误(2301)</view>
      </view>
    </view>
    <view class="content">
      <view class="question-card" v-for="(question, index) in questions" :key="index">
        <view class="question-header">
          <text class="question-type">单选题</text>
          <text class="question-date">2025-03-20 20:30:20</text>
        </view>
        <view class="question-text">
          根据中药七情配伍理论，属于相畏的药组是？
        </view>
        <view class="options">
          <view class="option" v-for="(option, i) in ['A', 'B', 'C', 'D', 'E']" :key="i">
            <text>{{ option }}</text>
            <text>选项内容</text>
          </view>
        </view>
        <view class="footer">
          <button class="explain-btn">查看解析与考点</button>
        </view>
      </view>
    </view>
  </Container>
</template>

<script setup>
import Container from "@/components/Container/Container.vue";

// 示例数据
const questions = Array(2).fill({});
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.header {
  padding: 16rpx;
  background-color: #fff;
  .stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rpx;
  }
  .tabs, .sub-tabs {
    display: flex;
    margin-bottom: 8rpx;
    .tab, .sub-tab {
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      &.active {
        background-color: $uni-primary;
        color: #fff;
      }
    }
  }
}

.content {
  padding: 16rpx;
  .question-card {
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
    padding: 16rpx;
    .question-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8rpx;
      .question-type {
        color: $uni-primary;
      }
    }
    .options {
      margin-top: 8rpx;
      .option {
        display: flex;
        align-items: center;
        margin-bottom: 4rpx;
        text {
          margin-right: 8rpx;
        }
      }
    }
    .footer {
      margin-top: 8rpx;
      .explain-btn {
        background-color: $uni-primary;
        color: #fff;
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        text-align: center;
      }
    }
  }
}

.bottom-nav {
  display: flex;
  justify-content: space-around;
  padding: 16rpx 0;
  background-color: #fff;
  .nav-item {
    flex: 1;
    text-align: center;
    &.active {
      color: $uni-primary;
    }
  }
}
</style>