xuye929/AIProd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后期修改完善，上线版本

Browse Source
This commit is contained in:
qiuxiao
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
pages/Launches/components/ListItem.vue
View File

@ -5,30 +5,32 @@
<div class="preview-box">
<img :src="config.coverImage || ''" alt="" />
</div>
<div class="tool-content flex flex-col justify-between">
<div class="tool-content flex flex-1 flex-col justify-between">
<div class="content-top flex items-start">
<div class="icon">
<img src="/" alt="" />
</div>
<div class="flex-1">
<div class="title">{{ config.title || '' }}</div>
<div class="sub-title" style="padding-right: 30px">{{ config.summary || '' }}</div>
<div class="sub-title pr-30">{{ config.summary || '' }}</div>
</div>
</div>
<div class="content-bottom flex items-center">
<img src="/launches/item/icon_clock.png" alt="" />
<div class="time-style">{{ config.publishTime || '' }}</div>
<div class="time-style">{{ formatPublishTime(config.publishTime) }}</div>
</div>
</div>
</div>
<div class="right-content flex">
<div class="flex items-center">
<div class="right-content flex items-center">
<div class="flex items-center btn">
<img :src="hovered ? '/launches/item/icon_thumb_grey.png' : '/launches/item/icon_thumb.png'" alt="" />
<div :class="{ 'hover-text': hovered }">{{ config.likeCount || 0 }}</div>
</div>
<div class="flex items-center">
<div class="flex items-center btn">
<img :src="hovered ? '/launches/item/icon_star_grey.png' : '/launches/item/icon_star.png'" alt="" />
<div :class="{ 'hover-text': hovered }">{{ config.rating || 0 }}</div>
<div :class="{ 'hover-text': hovered }">
{{ (config.rating || 0).toFixed(1) }}
</div>
</div>
</div>
</div>
@ -54,6 +56,21 @@ export default {
},
},
methods: {
formatPublishTime(timeString) {
if (!timeString) return '';
const date = new Date(timeString);
const months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
const month = months[date.getMonth()];
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
return `${month} ${day} Released in ${year}`;
},
handleMouseEnter() {
this.hovered = true;
},
@ -78,7 +95,7 @@ export default {
if (id) {
await this.$api.article.recordArticleClick(id);
}
}
},
},
mounted() {
const itemContent = this.$el;
@ -94,19 +111,27 @@ export default {
</script>
<style scoped lang="scss">
.pr-30 {
padding-right: 30px;
}
.item-content {
border-radius: 12px;
padding: 30px 20px;
padding: 25px 20px;
transition: background-color 0.3s ease;
cursor: pointer;
&:hover {
background-color: #F5F4FF;
.order-num {
background: #fff;
background: #fff !important;
}
}
&:active {
opacity: 0.8;
}
.left-content {
gap: 30px;
.order-num {
@ -118,12 +143,13 @@ export default {
text-align: center;
line-height: 36px;
font-size: 18px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
transition: background-color 0.3s ease;
color: #506179;
}
.preview-box {
width: 228px;
height: 133px;
height: 110px;
border-radius: 6px;
background-color: #FFFFFF;
img {
@ -145,15 +171,19 @@ export default {
}
.title {
font-size: 20px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
line-height: 24px;
color: #3A4A65;
}
.sub-title {
color: #64748B;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
margin-top: 10px;
max-width: 420px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.content-bottom {
@ -164,7 +194,7 @@ export default {
}
.time-style {
color: #64748B;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
}
}
@ -172,9 +202,15 @@ export default {
.right-content {
padding-right: 23px;
gap: 33px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #E2E8F0;
height: 24px;
max-width: 192px;
.btn {
cursor: pointer;
&:active {
opacity: 0.8;
}
}
img {
width: 24px;
height: 24px;