dichgrem/Vue
1
0
Fork 0
mirror of https://github.com/Dichgrem/Vue.git synced 2026-02-05 14:21:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

update:student-vol

Browse Source
This commit is contained in:
dichgrem
2025-12-25 17:02:20 +08:00
parent 57679a4d0b
commit d076ee1d3a
38 changed files with 2361 additions and 971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
student-vol/src/components/Home/ActItem.vue
View File

@@ -1,90 +1,94 @@
<template>
<div class="actItem" @click="detailsClick(data.id)">
<div class="actItem-pic">
<img :src="data.actPic"/>
<span class="actItemStatus" :style="getTagStyle(data)">
{{ getTagTxt(data) }}
</span>
<div class="actItem" @click="detailsClick(data.id)">
<div class="actItem-pic">
<img :src="data.actPic" />
<span class="actItemStatus" :style="getTagStyle(data)">
{{ getTagTxt(data) }}
</span>
</div>
<div class="actItem-body">
<p class="actItem-title">{{ data.title }}</p>
<p>
{{ formatDate(data.startTime) }} 至
{{ formatDate(data.endTime) }}
</p>
<p class="actItem-tag">
{{ data.isYourSchool ? "本人所在学校活动" : data.palce }}
</p>
</div>
</div>
<div class="actItem-body">
<p class="actItem-title">{{ data.title }}</p>
<p>{{ formatDate(data.startTime) }} 至 {{ formatDate(data.endTime) }}</p>
<p class="actItem-tag">
{{ data.isYourSchool ? "本人所在学校活动" : data.palce }}
</p>
</div>
</div>
</template>
<script>
import moment from "moment";
export default {
props: ["data"],
methods: {
getTagStyle(data) {
return { backgroundColor: data.canApply ? "#07c160" : "#999" };
props: ["data"],
methods: {
getTagStyle(data) {
return { backgroundColor: data.canApply ? "#07c160" : "#999" };
},
formatDate(value) {
return value ? moment(value).format("YYYY-MM-DD HH:mm") : "";
},
detailsClick(id) {
this.$emit("goDetails", id);
},
getTagTxt(data) {
return data.canApply ? "进行中" : "已结束";
},
},
formatDate(value) {
return value ? moment(value).format("YYYY-MM-DD HH:mm") : "";
},
detailsClick(id) {
this.$emit("goDetails", id);
},
getTagTxt(data) {
return data.canApply ? "进行中" : "已结束";
},
},
};
</script>
<style scoped>
.actItem {
display: flex;
gap: 15px;
padding: 15px;
background: white;
margin-bottom: 10px;
cursor: pointer;
display: flex;
gap: 15px;
padding: 15px;
background: white;
margin-bottom: 10px;
cursor: pointer;
}
.actItem-pic {
position: relative;
width: 100px;
height: 100px;
position: relative;
width: 100px;
height: 100px;
}
.actItem-pic img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.actItemStatus {
position: absolute;
top: 5px;
right: 5px;
padding: 2px 8px;
color: white;
font-size: 12px;
border-radius: 4px;
position: absolute;
top: 5px;
right: 5px;
padding: 2px 8px;
color: white;
font-size: 12px;
border-radius: 4px;
}
.actItem-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #333;
}
.actItem-title {
font-weight: bold;
font-size: 16px;
font-weight: bold;
font-size: 16px;
}
.actItem-tag {
color: #666;
font-size: 14px;
color: #666;
font-size: 14px;
}
</style>