kechengCard.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <view class="shouye-card-box kecheng-card-box">
  3. <!-- card title -->
  4. <view class="card-head-box">
  5. <view class="card-line-title">课程</view>
  6. <view class="card-more">更多<text class="more-num">{{data.count}}</text><icon class="more-jt"></icon></view>
  7. </view>
  8. <!-- kaoshi title -->
  9. <view class="card-name-box">
  10. <view class="card-name" v-if="data.name"><icon></icon>{{data.name}}</view>
  11. <text class="card-level">{{data.zyLevelName}}</text>
  12. </view>
  13. <!-- 内容区域 -->
  14. <view class="card-content-box kaoshi-content-box">
  15. <view class="card-content-item">
  16. <icon class="card-time-icon"></icon>
  17. <view class="content-text-box">
  18. <text>时间</text>
  19. <view>{{formatSecondsToCnhms(data.period, true)}}</view>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- 底部 -->
  24. <view class="card-bottom-box">
  25. <button type="default" class="index-card-btn" v-if="data.status == 1">课程学习</button>
  26. <button type="default" class="index-card-btn" v-if="data.status == 3">学习中</button>
  27. <button type="default" class="index-card-btn" v-if="data.status == 2">已完成</button>
  28. </view>
  29. </view>
  30. </template>
  31. <script setup>
  32. import {formatSecondsToCnhms} from "@/utils/common.js"
  33. defineProps({
  34. data: {
  35. type: Object,
  36. }
  37. })
  38. </script>
  39. <style>
  40. </style>