Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
79c30100 1 parent 2df11411

style(IndexCheckInPage): 格式化代码并调整样式 

- 统一代码缩进和换行格式
- 调整样式部分的代码结构
- 保持功能不变的情况下优化代码可读性
Inline Side-by-side
Showing 1 changed file with 40 additions and 59 deletions
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-05-30 15:07:29
* @LastEditTime: 2025-05-30 15:11:36
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
<template>
<AppLayout :hasTitle="false">
<van-config-provider :theme-vars="themeVars">
<van-calendar
title="每日打卡"
:poppable="false"
:show-confirm="false"
:style="{ height: '24rem' }"
switch-mode="year-month"
color="#4caf50"
:formatter="formatter"
row-height="42"
:show-mark="false"
@click-subtitle="onClickSubtitle"
>
<van-calendar title="每日打卡" :poppable="false" :show-confirm="false" :style="{ height: '24rem' }"
switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="42" :show-mark="false"
@click-subtitle="onClickSubtitle">
</van-calendar>
<div class="text-wrapper">
......@@ -47,7 +38,9 @@
<van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" />
</div>
<div style="padding: 0.75rem 1rem;">
<van-image round width="2.8rem" height="2.8rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" v-for="(item, index) in teamAvatars" :key="index" :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
<van-image round width="2.8rem" height="2.8rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
v-for="(item, index) in teamAvatars" :key="index"
:style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
</div>
</div>
......@@ -85,42 +78,28 @@
<div class="post-text">{{ post.content }}</div>
<div class="post-media">
<div v-if="post.images.length" class="post-images">
<van-image
width="100"
height="100"
v-for="(image, index) in post.images"
:key="index"
:src="image"
@click="openImagePreview(index, post)"
/>
<van-image width="100" height="100" v-for="(image, index) in post.images" :key="index" :src="image"
@click="openImagePreview(index, post)" />
</div>
<van-image-preview
v-if="currentPost"
v-model:show="showImagePreview"
:images="currentPost.images"
:start-position="startPosition"
:show-index="true"
@change="onChange"
/>
<van-image-preview v-if="currentPost" v-model:show="showImagePreview" :images="currentPost.images"
:start-position="startPosition" :show-index="true" @change="onChange" />
<!-- 视频封面和播放按钮 -->
<div v-if="post.video && !post.isPlaying" class="relative w-full rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
<img :src="post.videoCover || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" :alt="post.content" class="w-full h-full object-cover" />
<div v-if="post.video && !post.isPlaying" class="relative w-full rounded-lg overflow-hidden"
style="aspect-ratio: 16/9;">
<img :src="post.videoCover || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
:alt="post.content" class="w-full h-full object-cover" />
<div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
@click="startPlay(post)">
<div class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
<div
class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
<van-icon name="play-circle-o" class="text-white" size="30" />
</div>
</div>
</div>
<!-- 视频播放器 -->
<VideoPlayer
v-if="post.video && post.isPlaying"
:video-url="post.video"
class="post-video rounded-lg overflow-hidden"
ref="(el) => { if(el) videoPlayers.value.push(el) }"
@onPlay="(player) => handleVideoPlay(player, post)"
@onPause="() => handleVideoPause(post)"
/>
<VideoPlayer v-if="post.video && post.isPlaying" :video-url="post.video"
class="post-video rounded-lg overflow-hidden" ref="(el) => { if(el) videoPlayers.value.push(el) }"
@onPlay="(player) => handleVideoPlay(player, post)" @onPause="() => handleVideoPause(post)" />
<AudioPlayer v-if="post.audio.length" :songs="post.audio" class="post-audio" />
</div>
</div>
......@@ -318,7 +297,7 @@ const formatter = (day) => {
if (month === 5) {
if (checkin_days.includes(date)) {
day.className = 'calendar-checkin';
day.type ='selected';
day.type = 'selected';
}
}
......@@ -331,27 +310,28 @@ const onClickSubtitle = (evt) => {
</script>
<style lang="less">
.calendar-checkin {
.van-calendar__selected-day {
background: #a2d8a3 !important;
}
.calendar-checkin {
.van-calendar__selected-day {
background: #a2d8a3 !important;
}
}
.text-wrapper {
padding: 1rem;
color: #4caf50;
.text-header {
font-size: 1.15rem;
}
.text-wrapper {
padding: 1rem;
color: #4caf50;
.grade-percentage-main {
padding: 0.75rem 1rem;
}
.class-percentage-main {
padding: 0.75rem 1rem;
}
.text-header {
font-size: 1.15rem;
}
</style>
.grade-percentage-main {
padding: 0.75rem 1rem;
}
.class-percentage-main {
padding: 0.75rem 1rem;
}
}
.post-card {
margin: 1rem 0;
......@@ -415,3 +395,4 @@ const onClickSubtitle = (evt) => {
}
}
}
</style>
......