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> |