|
|
@@ -64,6 +64,26 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <view class="health-news-card">
|
|
|
+ <view class="card-header">
|
|
|
+ <text class="card-title">健康资讯</text>
|
|
|
+ </view>
|
|
|
+ <view class="card-content">
|
|
|
+ <view class="news-item" v-for="(news, index) in newsList" :key="index">
|
|
|
+ <view v-if="news.image" class="news-image-container">
|
|
|
+ <image class="news-image" :src="news.image" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view v-else class="news-placeholder">
|
|
|
+ <image class="placeholder-icon" src="/static/icons/remixicon/image-line.svg" />
|
|
|
+ </view>
|
|
|
+ <view class="news-text">
|
|
|
+ <text class="news-title">{{ news.title }}</text>
|
|
|
+ <text class="news-desc">{{ news.desc }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 打卡功能区域 -->
|
|
|
<!-- <view class="checkin-card" v-if="checkinTasks.length > 0">
|
|
|
<view class="card-header">
|
|
|
@@ -117,7 +137,21 @@ const avatarSrc = computed(() => {
|
|
|
return defaultAvatarUrl
|
|
|
})
|
|
|
|
|
|
-// 打卡任务相关数据
|
|
|
+const newsList = ref([
|
|
|
+ {
|
|
|
+ title: '健康饮食指南',
|
|
|
+ desc: '了解均衡饮食的重要性，掌握健康饮食的基本原则。',
|
|
|
+ image: '/static/carousel/BHFIIABBCDJII-5kCEkD6zh9.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '运动与健康',
|
|
|
+ desc: '定期运动对身体的好处，以及如何制定适合自己的运动计划。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '心理健康维护',
|
|
|
+ desc: '保持良好的心理状态，应对日常生活中的压力和挑战。'
|
|
|
+ }
|
|
|
+])
|
|
|
// const checkinTasks = ref<Array<{
|
|
|
// time: string
|
|
|
// type: string
|
|
|
@@ -615,4 +649,92 @@ function onQrClick() {
|
|
|
.checkin-status.checked {
|
|
|
color: #07C160;
|
|
|
}
|
|
|
+
|
|
|
+.health-news-card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.card-content {
|
|
|
+ padding: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.news-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.news-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.news-image-container {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.news-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.news-placeholder {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.news-text {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.news-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.news-desc {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
</style>
|
mcbaiyun