98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="xkqd-list">
|
|||
|
|
<!-- 课程信息卡片 -->
|
|||
|
|
<view class="info-card" v-for="(xkqd, index) in xkqdList" :key="index">
|
|||
|
|
<view class="card-title">课程信息</view>
|
|||
|
|
<view class="divider"></view>
|
|||
|
|
|
|||
|
|
<view class="course-info">
|
|||
|
|
<image
|
|||
|
|
class="course-image"
|
|||
|
|
:src="xkqd.lxtp ? imagUrl(xkqd.lxtp) : '/static/base/home/11222.png'"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
<view class="course-details">
|
|||
|
|
<view class="course-name">{{ xkqd.xkmc }}</view>
|
|||
|
|
<view class="course-teacher">开课老师：{{ xkqd.jsxm }}</view>
|
|||
|
|
<view class="course-location">上课地点：{{ xkqd.kcdd }}</view>
|
|||
|
|
<view class="course-price"
|
|||
|
|
>金额：<text class="price-value">¥{{ xkqd.jfje }}</text></view
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { imagUrl } from "@/utils";
|
|||
|
|
import { useDataStore } from "@/store/modules/data";
|
|||
|
|
const { getData } = useDataStore();
|
|||
|
|
|
|||
|
|
// 课程信息
|
|||
|
|
const xkqdList = computed(() => getData.xkqdList);
|
|||
|
|
|
|||
|
|
</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>
|