pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

个人空间动态部分修改

Browse Source
main
方丽彤 2 months ago
parent ccb7bda023
commit c7744fddff
1 changed files with 83 additions and 223 deletions
Show Stats Download Patch File Download Diff File

306
src/views/space/space.vue
Unescape View File

@ -65,118 +65,42 @@
</div>
<div class="post-container">
<div class="heade">
<div class="left-header">
<span :class="{ 'active': selectedTab === 'all' }" @click="selectedTab = 'all'">全部</span>
<hr v-if="selectedTab === 'all'" />
</div>
<div class="right-header">家族故事</div>
</div>
<div class="post">
<div class="post-header">
<img src="../../assets/pictures/space/post1.png" alt="" />
<div class="post-info">
<h3>Devon Lane @johndue · 23s</h3>
<p>Tom is in a big hurry.</p>
</div>
</div>
<div class="post-img">
<img src="../../assets/pictures/space/post2.png" alt="" />
</div>
<div class="post-footer">
<div class="reactions">
<!-- 爱心图标，用于点赞 -->
<div class="Like">
<span @click="increaseCount('like')" :class="{'liked': isLiked}">
<span v-if="isLiked">❤️</span>
<span v-else>🤍</span>
</span>
{{ likeCount }}
</div>
<!-- 评论图标 -->
<div class="comment">
<span @click="increaseCount('comment')">
💬
</span>
{{ commentCount }}
</div>
</div>
<div class="comment-section">
<img src="../../assets/pictures/space/post1.png" alt="">
<input type="text" placeholder="Tweet your answer" />
<button class="answer-btn">Answer</button>
</div>
<div class="comments">
<div class="comment-item">
<img src="../../assets/pictures/space/post1.png" alt="Angela Arden's Profile Picture" />
<div class="comment-content">
<h4>Angela Arden @angela_arden</h4>
<p>Concordo...</p>
<div class="comment-actions">
<span class="comment">
<img src="../../assets/pictures/space/Vector.png" style="width: 16px;">
<span class="comment-count">2</span>
</span>
<span class="clockwise">
<img src="../../assets/pictures/space/ArrowsClockwise.png" style="width: 16px;">
<span class="clockwise-count">1</span>
</span>
<span class="like">
<img src="../../assets/pictures/space/Heart.png" style="width: 16px;">
<span class="like-count">3</span>
</span>
<div class="post" v-for="post in posts" :key="post.id">
<div class="post-header">
<img src="../../assets/pictures/space/post1.png" alt="" />
<div class="post-info">
<h2>{{ post.name || "哈哈哈"}}</h2>
<h3>{{ post.date || "2024-01-01" }}</h3>
<p>{{ post.text || "测试测试"}}</p>
</div>
</div>
</div>
<div class="comment-item">
<img src="../../assets/pictures/space/post1.png" alt="Julia Stone's Profile Picture" />
<div class="comment-content">
<h4>Julia Stone @julia</h4>
<p>Olha, faz sentido!</p>
<div class="comment-actions">
<span class="comment">
<img src="../../assets/pictures/space/Vector.png" style="width: 16px;">
<span class="comment-count">2</span>
</span>
<span class="clockwise">
<img src="../../assets/pictures/space/ArrowsClockwise.png" style="width: 16px;">
<span class="clockwise-count">1</span>
</span>
<span class="like">
<img src="../../assets/pictures/space/Heart.png" style="width: 16px;">
<span class="like-count">3</span>
</span>
</div>
<div class="post-img">
<img :src="post.postImageUrl || defaultImage " alt="" />
</div>
</div>
<div class="comment-item">
<img src="../../assets/pictures/space/post1.png" alt="Joey Tribiani's Profile Picture" />
<div class="comment-content">
<h4>Joey Tribiani @joey</h4>
<p>Parabéns pelo progresso!</p>
<div class="comment-actions">
<span class="comment">
<img src="../../assets/pictures/space/Vector.png" style="width: 16px;">
<span class="comment-count">2</span>
</span>
<span class="clockwise">
<img src="../../assets/pictures/space/ArrowsClockwise.png" style="width: 16px;">
<span class="clockwise-count">1</span>
</span>
<span class="like">
<img src="../../assets/pictures/space/Heart.png" style="width: 16px;">
<span class="like-count">3</span>
</span>
<div class="post-footer">
<div class="reactions">
<div class="Like">
<span @click="increaseCount('like')" :class="{'liked': isLiked}">
<span v-if="isLiked">❤️</span>
<span v-else>🤍</span>
</span>
{{ likeCount }}
</div>
<div class="comment">
<span @click="increaseCount('comment')">
💬
</span>
{{ commentCount }}
</div>
</div>
<div class="comments">
<!-- 评论内容可以在这里渲染 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -188,6 +112,7 @@
likeCount: 0,
isLiked:false,
commentCount:0,
defaultImage:require("../../assets/pictures/space/post2.png"),
userInfo: {
name: "", // 用户姓名
avatar:"",
@ -197,6 +122,12 @@
expectation: "", // 择偶期望
career: "", // 职业
},
posts:{
name:"掌声",
date:"2024-01-01",
text:"测试文本",
postImageUrl:"",
},
defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
};
},
@ -246,7 +177,23 @@
// alert("无法加载用户信息，请稍后重试！");
}
},
selectTab(tab) {
async fetchPostInfo() {
try {
// 调用后端接口获取帖子日期信息
const postResponse = await axios.get("/api/getPostDate", {
params: {
postId: "POST_ID_HERE", // 传递帖子 ID
},
});
this.postDate = postResponse.data.date;
this.postText = postResponse.data.text;
this.postImgUrl = postResponse.data.imageUrl;
} catch (error) {
console.error("获取帖子信息失败:", error);
// 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等
}
},
selectTab(tab) {
this.selectedTab = tab;
},
showMoreInfo() {
@ -418,43 +365,23 @@
.post-container {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
/* align-items: center; */
background: rgba(255, 255, 255, 0.8);
height: 620px;
height: 680px;
margin: 30px auto;
border-radius: 30px;
width: 750px;
padding: 20px;
}
.heade{
display: flex;
justify-content: space-between;
align-content: center;
padding-left: 180px;
white-space: nowrap;
}
.left-header span {
cursor: pointer;
}
.left-header .active {
color: #1DA1F2;
}
.left-header hr {
border-color:#1DA1F2;
width: 100px;
margin-left: -32px;
margin-top: 5px;
}
.right-header {
padding-left: 280px;
overflow-y: auto;
}
.post {
margin-left: -600px;
margin-top: 200px;
border-radius: 10px;
margin-bottom: 20px;
margin-left: 0;
margin-top: 150px;
height: 150px;
width: 680px;
position: relative; /* 使得子元素可以相对移动 */
margin-bottom: 70px;
}
.post-header {
@ -465,15 +392,32 @@
position: relative;
}
.post-header::before {
content: '';
position: absolute;
left: 30px; /* 根据需要调整左侧位置 */
top: -10px; /* 调整横线的位置 */
width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
height: 1px; /* 横线的高度 */
background-color: #d1cccc; /* 横线颜色 */
}
.post-header img {
margin-top: 10px;
width: 56px;
height: 56px;
border-radius: 50%;
}
.post-info h2{
font-weight: normal;
font-size: 20px;
padding-left: 10px;
margin-top: 9px;
}
.post-info h3 {
margin-top:6px;
padding-left: 20px;
margin-top: -12px;
padding-left: 12px;
font-size: 14px;
font-weight: normal;
font-family: Italic;
@ -526,17 +470,17 @@
align-items: center;
justify-content: space-between;
font-size: 20px;
padding: 0 10px;
padding: 6px 10px;
}
.comment{
display: flex;
align-items: center;
margin-right: 70px;
margin-right: 120px;
}
.Like{
margin-left: 170px;
margin-left: 220px;
}
/* .reactions span img {
padding-left: 230px;
@ -548,88 +492,4 @@
color: #666;
padding-left: 8px;
}
.comment-section {
display: flex;
align-items: center;
margin-bottom: 10px;
padding-left: 120px;
/* border-bottom: 1px solid #ccc; */
}
.comment-section img {
width: 46px;
padding-bottom: 10px;
padding-top: 10px;
}
.comment-section input {
flex: 1;
height: 40px;
width: 380px;
border-radius: 5px;
border: none;
font-size: 16px;
padding-left: 14px;
}
.answer-btn {
background-color: #f077a8;
color: white;
border: none;
border-radius: 50px;
padding: 5px 10px;
margin-right: -80px;
font-size: 15px;
cursor: pointer;
}
.comments {
padding-left: 120px;
max-height: 220px;
width: 550px;
overflow: auto;
}
.comment-item {
display: flex;
align-items: center;
border-top: 1px solid #ccc;
}
.comment-item img {
width: 46px;
border-radius: 50%;
margin-right: 10px;
padding-bottom: 10px;
}
.comment-content h4 {
margin: 0;
padding-top: 10px;
padding-bottom: 6px;
font-size: 12px;
}
.comment-content p {
margin: 0;
font-size: 12px;
color: #666;
}
.comment-actions {
display: flex;
justify-content: space-between;
align-content: center;
font-size: 12px;
color: #666;
}
.comment-actions span {
display: flex;
align-content: center;
padding-top: 10px;
padding-left: 5px;
}
.comment-actions span span{
padding-top: 2px;
}
</style>
Write Preview
Loading…
Cancel
Save