zhxy-jzd/src/pages/base/xk/components/XkPaySuccessXkkc/index.vue

<template>
  <view class="xkqd-list">
    <!-- 课程信息卡片 -->
    <view class="info-card" v-for="(item, index) in dataList" :key="index">
      <view class="card-title">课程信息</view>
      <view class="divider"></view>

      <view class="course-info">
        <image
          class="course-image"
          :src="item.lxtp ? imagUrl(item.lxtp) : '/static/base/home/11222.png'"
          mode="aspectFill"
        ></image>
        <view class="course-details">
          <view class="course-name">{{ item.kcmc }}</view>
          <view class="course-teacher">开课老师：{{ item.jsName }}</view>
          <view class="course-location">上课地点：{{ item.kcdd }}</view>
          <view class="course-price" v-if="(item.kcje || item.jfje) > 0"
            >金额：<text class="price-value">¥{{ item.kcje || item.jfje }}</text></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { imagUrl } from "@/utils";

// 接收外部传入属性
const props = defineProps<{
  dataList: any
}>();

</script>

<style lang="scss" scoped>
.info-card {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .divider {
    height: 1px;
    background-color: #eee;
    margin-bottom: 15px;
  }
}

.course-info {
  display: flex;

  .course-image {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    margin-right: 15px;
  }

  .course-details {
    flex: 1;

    .course-name {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
    }

    .course-teacher,
    .course-location {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }

    .course-price {
      font-size: 14px;
      color: #666;

      .price-value {
        color: #ff6b00;
        font-weight: bold;
      }
    }
  }
}

</style>