englishread-front/pages/index/member.vue

<template>
  <view class="container">
    <view class="header">
      <view class="header-bg">
        <image
          src="/static/会员背景.png"
          class="header-img"
          mode="scaleToFill"
        />
        <text class="header-title">会员中心</text>
      </view>

      <view  class="header-content">
        <view class="zuanshi">
          <image
            src="/static/会员钻石.png"
            mode="scaleToFill"
            class="zuanshi-img"
          />
        </view>
        <image
          src="/static/VIP.png"
          mode="aspectFit"
          class="VIP-img"
        />
        <text class="intro">共19项会员特权 | 3 项年VIP专属特权</text>
        <view class="border" />
        <view class="info">
          <view class="avatar-box">
            <image
              :src="userInfo.avatar"
              mode="aspectFill"
              class="avatar"
            />
            <text class="name">{{userInfo.name}}</text>
          </view>
          <uv-button text="立即开通"
            type="primary" 
            :customStyle="{
            width: '160rpx',
            height: '60rpx',
            borderRadius: '198rpx',
            backgroundColor: '#06DADC',
            color: '#fff',
            fontSize: '28rpx',
            fontWeight: '500',
            lineHeight: '60rpx',
            letterSpacing: '0%',
            verticalAlign: 'middle',
          }" />
        </view>
      </view>
    </view>

    <!-- 会员权益 -->
    <view class="benefits-section">
      <view class="benefits-title">会员权益</view>
      
      <view class="benefits-list">
        <!-- 碎片学习 系统掌握 -->
        <view class="benefit-item">
          <view class="benefit-content">
            <view class="benefit-title">碎片学习 系统掌握</view>
            <view class="benefit-desc">根据薄弱点智能推荐，每节课3-5分钟，碎片化完成系统学习</view>
          </view>
          <view class="benefit-icon">
            <image src="/static/会员图片1.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 匹配水平 -->
        <view class="benefit-item">
          <view class="benefit-content">
            <view class="benefit-title">匹配水平</view>
            <view class="benefit-desc">依据水平精准推课，不做无用功快速提升</view>
          </view>
          <view class="benefit-icon">
            <image src="/static/会员图片2.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 科学闭环测 讲练结合 -->
        <view class="benefit-item">
          <view class="benefit-content">
            <view class="benefit-title">科学闭环测 讲练结合</view>
            <view class="benefit-desc">精心设计科学的学习流程 「测试-讲解-练习-检验」知识掌握更牢固</view>
          </view>
          <view class="benefit-icon">
            <image src="/static/会员图片3.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 以下内容为成为会员才能看到的 -->
    
    <!-- 学习计划 -->
    <view class="study-plan-section">
      <view class="section-title">学习计划</view>
      
      <view class="plan-books">
        <view 
          v-for="(book, index) in studyPlanBooks" 
          :key="index" 
          class="plan-book-item"
          :class="{ 'active-book': index === 1 }"
        >
          <view class="plan-book-cover">
            <image :src="book.cover" mode="aspectFill"></image>
            <!-- 学习中标识 -->
            <view v-if="index === 1" class="studying-badge">
              <view class="studying-icon"/>
              <text>学习中</text>
            </view>
          </view>
          <view class="plan-book-info">
            <text class="plan-book-title" :class="{ 'highlight-title': index === 1 }">{{ book.title }}</text>
            <view class="plan-book-meta"   >
              <text class="plan-book-grade" :class="{ 'highlight-title': index === 1 }">{{ book.grade }}/</text>
              <image v-if="index !== 1" src="/static/播放图标.png" class="plan-book-duration-icon" />
              <image v-else src="/static/播放图标高亮.png" class="plan-book-duration-icon" />
              <text class="plan-book-duration" :class="{ 'highlight-title': index === 1 }">{{ book.duration }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 学习推荐 -->
    <view class="study-recommend-section">
      <view class="section-header">
        <text class="section-title">学习推荐</text>
        <view class="section-more">
          <text>更多</text>
          <uv-icon name="arrow-right" size="14" color="#8B8B8B"></uv-icon>
        </view>
      </view>
      
      <view class="recommend-grid">
        <view 
          v-for="(book, index) in recommendBooks" 
          :key="index" 
          class="recommend-grid-item"
        >
          <view class="recommend-grid-cover">
            <image :src="book.cover" mode="aspectFill"></image>
          </view>
          <view class="recommend-grid-info">
            <text class="recommend-grid-title">{{ book.title }}</text>
            <view class="recommend-grid-meta">
              <text class="recommend-grid-grade">{{ book.grade }}/</text>
              <image src="/static/播放图标.png" class="recommend-grid-duration-icon" />
              <text class="recommend-grid-duration">{{ book.duration }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
     
  </view>
</template>

<script>
export default{
  data() {
    return {
      userInfo: {
        name: '战斗世界',
        avatar: '/static/默认头像.png'
      },
      
      // 学习计划书籍数据
      studyPlanBooks: [
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          grade: '四级',
          duration: '03:24'
        }
      ],
      
      // 学习推荐书籍数据
      recommendBooks: [
        {
          cover: '/static/默认图片.png',
          title: '小王子',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '自私的巨人',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '百万英镑',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: 'MATILDA',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: 'Pride and Prejudice',
          grade: '四级',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '温德尔·范·德拉南',
          grade: '四级',
          duration: '03:24'
        }
      ]
    }
  },
}
</script>

<style lang="scss" scoped>

.container {
  min-height: 100%;
}

.header{
  width: 100%;
  .header-bg{
    position: relative;
    width: 100%;
    height: 400rpx;
    // background: red;
    .header-img{
      width: 100%;
      height: 400rpx;
    }
    .header-title{
      font-size: 32rpx;
      color: black;
      position: absolute;
      top: 100rpx;
      font-weight: 500;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .header-content{
    margin: 0 18rpx;
    margin-top: -150rpx;
    height: 256rpx;
    border-radius: 32rpx;
    border-width: 2rpx;
    padding: 40rpx;
    background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
    border: 2rpx solid #06DADC12;
    display: flex;
    flex-direction: column;
    gap: 28rpx;
    position: relative;
    .zuanshi{
      position: absolute;
      width: 190rpx;
      height: 190rpx;
      top: -80rpx;
      right: 0;
      .zuanshi-img{
        width: 190rpx;
        height: 190rpx;
      }
    }
    .VIP-img{
      width: 80rpx;
      height: 50rpx;
    }
    .border{
      width: 100%;
      // height: 2rpx;
      border: 2rpx solid;

      border-image-source: linear-gradient(90deg, rgba(228, 255, 255, 0) 0%, #C3EFEF 50.48%, rgba(228, 255, 255, 0) 100%);
      border-image-slice: 1;

    }
    .intro{
      font-size: 28rpx;

      line-height: 36rpx;
      letter-spacing: 0%;
      vertical-align: middle;
      color: #09B1B3;

    }
    .info{  
      display: flex;
      justify-content: space-between;
      align-items: center;
      .avatar-box{
        display: flex;
        align-items: center;
        gap: 16rpx;
        .name{
          font-weight: 600;
          font-size: 36rpx;
          line-height: 44rpx;
          letter-spacing: 0%;
          vertical-align: middle;
          color: #252545;
        }
        .avatar{
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }
      }
      }
  }
}
/* 会员权益样式 */
.benefits-section {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.benefits-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #191919;
  margin-bottom: 32rpx;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.benefit-item {
  background: #F8F8F8;
  border: 1px solid #FFFFFF;
  border-radius: 48rpx;
  padding: 27rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.benefit-content {
  flex: 1;
  margin-right: 40rpx;
}

.benefit-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.benefit-desc {
  font-size: 24rpx;
  color: #09B1B3;
  line-height: 36rpx;
}

.benefit-icon {
  width: 152rpx;
  height: 152rpx;
  // flex-shrink: 0;
}

.benefit-icon image {
  width: 100%;
  height: 100%;
}

/* 学习计划样式 */
.study-plan-section {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #191919;
  margin-bottom: 32rpx;
}

.plan-books {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 78rpx;
  padding: 20rpx 0;
}

.plan-book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  transition: all 0.3s ease;
  
  &.active-book {
    transform: scale(1.15);
    
    .plan-book-cover {
      // box-shadow: 0 8rpx 24rpx rgba(6, 218, 220, 0.3);
    }
  }
}

.plan-book-cover {
  width: 172rpx;
  height: 230rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
  position: relative;
  box-shadow: 0px 4px 4px 0px #C0BCBA75;
  
  image {
    width: 100%;
    height: 100%;
  }
  
  .studying-badge {
    position: absolute;
    bottom: 0rpx;
    right: 0rpx;
    background: #00000099;
    color: #fff;
    padding: 6rpx 10rpx;
    border-radius: 20rpx;
    font-size: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rpx;
    .studying-icon{
      width: 10rpx;
      height: 10rpx;
      background: $primary-color;
      border-radius: 50%;
    }
  }
}

.plan-book-info {
  text-align: center;
  
  .plan-book-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
    
    &.highlight-title {
      color: $primary-color;
    }
  }
  
  .plan-book-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    
    
    .plan-book-duration-icon {
      width: 20rpx;
      height: 20rpx;
    }
    
    .plan-book-grade {
      font-size: 24rpx;
      color: #999;
      &.highlight-title {
      color: $primary-color;
    }
    }
    
    .plan-book-duration {
      font-size: 24rpx;
      color: #999;
      &.highlight-title {
      color: $primary-color;
    }
    }
  }
}

/* 学习推荐样式 */
.study-recommend-section {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
  
  .section-more {
    display: flex;
    align-items: center;
    gap: 4rpx;
    
    text {
      font-size: 24rpx;
      color: #8B8B8B;
    }
  }
}

.recommend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
  
  .recommend-grid-item {
    width: 208rpx;
    display: flex;
    flex-direction: column;
    
    .recommend-grid-cover {
      box-shadow: 0px 4px 4px 0px #C0BCBA75;
      width: 100%;
      height: 278rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 16rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .recommend-grid-info {
      padding: 6rpx;
      
      .recommend-grid-title {
        font-size: 28rpx;
        font-weight: 700;
        color: #333;
        margin-bottom: 14rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .recommend-grid-meta {
        display: flex;
        align-items: center;
        
        .recommend-grid-duration-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
        }
        
        .recommend-grid-grade {
          font-size: 24rpx;
          color: #999;
          margin-right: 8rpx;
        }
        
        .recommend-grid-duration {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

</style>