product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

基本还原了便签列表项；

Browse Source 
添加了mock数据；
This commit is contained in:
User
2025-10-10 16:55:51 +08:00
parent d0a47b44d2
commit a03384f170
7 changed files with 246 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/components/NoteItem.vue
View File

@@ -1,91 +1,186 @@
<template>
<div class="code-fun-flex-col code-fun-justify-start code-fun-relative list-item_7">
<div class="code-fun-flex-col section_17">
<div class="code-fun-flex-row code-fun-justify-between">
<!-- 便签编辑时间 -->
<span class="font_2 text_18">750天前2023/9/21下午4:52</span>
<div class="code-fun-flex-row group_3">
<!-- 是否置顶状态&置顶按钮 -->
<img class="image_11 image_29" src="/assets/icons/drawable-xxhdpi/icon_top_normal.png" />
<!-- 是否收藏状态&收藏按钮 -->
<img class="image_26 ml-15" src="/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png" />
</div>
</div>
<div class="code-fun-flex-row code-fun-justify-between mt-17-5">
<!-- 便签正文第一行 -->
<span class="font_3 text_19">夜幕中启程</span>
<!-- 便签中是否存在图片 -->
<img class="image_28" src="/assets/icons/drawable-xxhdpi/list_item_image_icon.png" />
</div>
</div>
<img class="image_27 pos_18" src="/assets/icons/drawable-xxhdpi/note_item_clip_normal.png" />
</div>
</template>
<script setup></script>
<style lang="less" scoped>
.ml-15 {
margin-left: 0.94rem;
}
.mt-17-5 {
margin-top: 1.09rem;
}
.list-item_7 {
height: 3.16rem;
.section_17 {
margin-left: 0.25rem;
padding: 0.44rem 0.69rem 0.88rem 2.69rem;
background-color: #00000000;
.font_2 {
font-size: 0.71rem;
line-height: 0.71rem;
color: #c2bdb1;
}
.text_18 {
margin-top: 0.061rem;
color: #c3beb4;
}
.group_3 {
margin-right: 0.19rem;
margin-bottom: 0.063rem;
.image_11 {
width: 0.63rem;
height: 0.63rem;
}
.image_29 {
margin-top: 0.063rem;
}
.image_26 {
width: 0.69rem;
height: 0.69rem;
}
}
.font_3 {
font-size: 0.88rem;
line-height: 0.88rem;
font-weight: 700;
}
.text_19 {
margin-bottom: 0.065rem;
color: #816d61;
font-size: 0.9rem;
line-height: 0.9rem;
}
.image_28 {
width: 1.06rem;
height: 0.91rem;
}
}
.image_27 {
border-radius: 0.024rem 0.26rem 0.25rem 0.094rem;
width: 1.56rem;
height: 1.03rem;
}
.pos_18 {
position: absolute;
left: 0;
bottom: 0.5rem;
}
}
</style>
<template>
<div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7" @click="handlePress">
<div class="code-fun-flex-col code-fun-relative section_17">
<div class="code-fun-flex-row code-fun-justify-between">
<!-- 便签编辑时间 -->
<span class="font_2 text_18">{{ formattedDate }}</span>
<div class="code-fun-flex-row group_3">
<!-- 是否置顶状态&置顶按钮 -->
<img class="image_11 image_29" :src="isTop ? '/assets/icons/drawable-xxhdpi/icon_top_checked.png' : '/assets/icons/drawable-xxhdpi/icon_top_normal.png'" @click.stop="handleTopToggle" />
<!-- 是否收藏状态&收藏按钮 -->
<img class="image_26 ml-5" :src="isStarred ? '/assets/icons/drawable-xxhdpi/icon_detail_star_checked.png' : '/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png'" @click.stop="handleStarToggle" />
</div>
</div>
<div class="code-fun-flex-row code-fun-justify-between mt-17-5">
<!-- 便签正文第一行 -->
<span class="font_3 text_19">{{ title }}</span>
<!-- 便签中是否存在图片 -->
<img v-if="hasImage" class="image_28" src="/assets/icons/drawable-xxhdpi/list_item_image_icon.png" />
</div>
</div>
<!-- 删除按钮 -->
<button class="btn_delete">
<span>删除</span>
</button>
<!-- 便签夹 -->
<img class="image_27 pos_18" src="/assets/icons/drawable-xxhdpi/note_item_clip_normal.png" />
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
title: {
type: String,
required: true,
},
content: {
type: String,
required: true,
},
date: {
type: String,
required: true,
},
isStarred: {
type: Boolean,
default: false,
},
isTop: {
type: Boolean,
default: false,
},
hasImage: {
type: Boolean,
default: false,
},
onPress: {
type: Function,
default: () => {},
},
onStarToggle: {
type: Function,
default: () => {},
},
onTopToggle: {
type: Function,
default: () => {},
},
})
const formattedDate = computed(() => {
// 简单的日期格式化，实际项目中可能需要更复杂的处理
return props.date
})
const handlePress = () => {
if (props.onPress) {
props.onPress()
}
}
const handleStarToggle = () => {
if (props.onStarToggle) {
props.onStarToggle()
}
}
const handleTopToggle = () => {
if (props.onTopToggle) {
props.onTopToggle()
}
}
</script>
<style lang="less" scoped>
.ml-15 {
margin-left: 0.94rem;
}
.mt-17-5 {
margin-top: -1rem;
}
.btn_delete {
background: url(/assets/icons/drawable-xxhdpi/btn_slide_delete_normal.png);
background-size: cover;
width: 4rem;
height: 2rem;
position: absolute;
top: 50%;
left: 2rem;
z-index: 1;
transform: translate(0, -50%);
color: white;
text-align: right;
span {
margin-right: 0.2rem;
font-size: 0.6rem;
}
}
.list-item_7 {
width: 100%;
height: 3.16rem;
.section_17 {
box-sizing: border-box;
width: 95%;
height: 100%;
background: var(--background);
z-index: 2;
padding: 0.44rem 0.69rem 0.88rem 2.69rem;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.23);
.font_2 {
font-size: 0.71rem;
line-height: 0.71rem;
color: #c2bdb1;
}
.text_18 {
margin-top: 0.061rem;
color: #c3beb4;
}
.group_3 {
margin-right: 0.19rem;
margin-bottom: 0.063rem;
.image_11 {
width: 2.2rem;
height: 2.2rem;
object-fit: contain;
position: relative;
top: -0.15rem;
}
.image_29 {
margin-top: 0.063rem;
}
.image_26 {
width: 1.2rem;
height: 1.2rem;
}
}
.font_3 {
font-size: 0.88rem;
line-height: 0.88rem;
}
.text_19 {
margin-bottom: 0.065rem;
color: #816d61;
font-size: 0.9rem;
line-height: 0.9rem;
}
.image_28 {
width: 1.06rem;
height: 0.91rem;
}
}
.image_27 {
width: 1.7rem;
height: 1.7rem;
object-fit: cover;
}
.pos_18 {
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
z-index: 3;
}
}
</style>