<template>
<div class="container">
<div class="image-container">
<img src="path/1.jpg" alt="图片" class="image"/>
</div>
<div class="card">
<h2>私教课程</h2>
<p class="price">¥0.01</p>
</div>
<div class="details">
<p class="description">详细介绍</p>
<p class="reward">收入V币奖励</p>
</div>
<div class="image-container">
<img src="path/2.jpg" alt="图片" class="image"/>
</div>
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
font-family: Arial, sans-serif;
}
.image-container {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.image {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card {
width: 80%;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
}
.card h2 {
margin-bottom: 10px;
font-size: 24px;
color: #333;
}
.card .price {
font-size: 22px;
color: #e74c3c;
margin-bottom: 10px;
}
.details {
width: 80%;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
}
.details .description,
.details .reward {
font-size: 16px;
color: #555;
margin-bottom: 5px;
}
.details .description {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
</style>
springboot访问照片的路径
于 2024-07-06 18:00:46 首次发布