sj-miniprogram/pages/assessment-center/remind.vue

<template>
  <view class="container">
    <view class="content">
      <!-- 装饰背景 -->
      <view class="decor-bg"></view>

      <view class="info-card">
        <view class="info-list">
          <view class="info-item">
            <view class="label-wrap">
              <view class="dot"></view>
              <text class="label">测评岗位</text>
            </view>
            <text class="value">审计助理</text>
          </view>
          
          <view class="info-item">
            <view class="label-wrap">
              <view class="dot"></view>
              <text class="label">考题题型</text>
            </view>
            <text class="value">单选/多选/问答</text>
          </view>

          <view class="info-item">
            <view class="label-wrap">
              <view class="dot"></view>
              <text class="label">考题数量</text>
            </view>
            <text class="value">60题</text>
          </view>

          <view class="info-item">
            <view class="label-wrap">
              <view class="dot"></view>
              <text class="label">考试时间</text>
            </view>
            <text class="value">30分钟</text>
          </view>

          <view class="info-item border-none">
            <view class="label-wrap">
              <view class="dot"></view>
              <text class="label">合格标准</text>
            </view>
            <view class="value-group">
              <text class="value">满分100分，60分及格</text>
              <text class="sub-value">A能力达到20分，B能力达到30分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 按钮区域 -->
      <view class="action-area">
        <button class="start-btn" @click="startQuiz">确认开始测评</button>
        <text class="bottom-tip">请确保在安静、网络稳定的环境下进行</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="js">
const startQuiz = () => {
  uni.navigateTo({
    url: '/pages/assessment/quiz'
  });
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #F8F9FB;
  display: flex;
  flex-direction: column;
}

.content { 
    flex: 1; 
    padding: 30rpx 40rpx; // 调整间距
    position: relative;
    overflow: hidden;
}

.decor-bg {
    position: absolute; top: -100rpx; right: -100rpx; width: 400rpx; height: 400rpx;
    background: radial-gradient(circle, rgba(31,108,255,0.05) 0%, transparent 70%);
    z-index: 0;
}

/* 信息卡片 */
.info-card {
    background: #FFF;
    border-radius: 32rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.02);
    position: relative;
    z-index: 1;
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 36rpx 0;
  border-bottom: 2rpx solid #F5F7FA;
  
  &.border-none { border-bottom: none; }

  .label-wrap {
    display: flex;
    align-items: center;
    width: 200rpx;
    flex-shrink: 0;
    
    .dot { width: 8rpx; height: 8rpx; background: #1F6CFF; border-radius: 50%; margin-right: 16rpx; }
    .label { font-size: 30rpx; color: #666; font-weight: 500; }
  }
  
  .value {
    font-size: 30rpx;
    color: #1A1A1A;
    font-weight: bold;
    flex: 1;
  }
  
  .value-group {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      .sub-value { font-size: 24rpx; color: #999; font-weight: normal; }
  }
}

/* 按钮 */
.action-area {
  margin-top: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  
  .start-btn {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(135deg, #1F6CFF 0%, #0056FF 100%);
    color: #FFFFFF;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 12rpx 24rpx rgba(31, 108, 255, 0.2);
    margin-bottom: 30rpx;
    
    &::after { border: none; }
    &:active { transform: scale(0.98); opacity: 0.9; }
  }
  
  .bottom-tip { font-size: 24rpx; color: #999; }
}
</style>