初步社区实现

pull/1/head
QMZ 2 months ago
parent 968b81ea7c
commit 3bb5a36f1b

@ -1 +1 @@
[{"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\main.js":"1","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\App.vue":"2","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\router\\index.js":"3","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\Main.vue":"4","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\header.vue":"5","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\background.vue":"6","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\recommend\\index.vue":"7","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\chat\\chat.vue":"8","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\community\\trends.vue":"9","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\space\\space.vue":"10","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\login\\login.vue":"11"},{"size":261,"mtime":1731506523733,"results":"12","hashOfConfig":"13"},{"size":97,"mtime":1731506523731,"results":"14","hashOfConfig":"13"},{"size":1052,"mtime":1731513557777,"results":"15","hashOfConfig":"13"},{"size":753,"mtime":1731566372416,"results":"16","hashOfConfig":"13"},{"size":2643,"mtime":1731566073424,"results":"17","hashOfConfig":"13"},{"size":919,"mtime":1731566064122,"results":"18","hashOfConfig":"13"},{"size":161,"mtime":1731508571798,"results":"19","hashOfConfig":"13"},{"size":156,"mtime":1731511731213,"results":"20","hashOfConfig":"13"},{"size":155,"mtime":1731512433247,"results":"21","hashOfConfig":"13"},{"size":157,"mtime":1731512507547,"results":"22","hashOfConfig":"13"},{"size":151,"mtime":1731513510444,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"10795if",{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"40","messages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"42","messages":"43","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"44","messages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"46","messages":"47","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\main.js",[],[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\App.vue",[],[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\router\\index.js",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\Main.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\header.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\background.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\recommend\\index.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\chat\\chat.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\community\\trends.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\space\\space.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\login\\login.vue",[]]
[{"D:\\love forest\\src\\main.js":"1","D:\\love forest\\src\\App.vue":"2","D:\\love forest\\src\\router\\index.js":"3","D:\\love forest\\src\\views\\Main.vue":"4","D:\\love forest\\src\\views\\login\\login.vue":"5","D:\\love forest\\src\\views\\chat\\chat.vue":"6","D:\\love forest\\src\\views\\community\\trends.vue":"7","D:\\love forest\\src\\views\\recommend\\index.vue":"8","D:\\love forest\\src\\views\\space\\space.vue":"9","D:\\love forest\\src\\components\\header.vue":"10"},{"size":322,"mtime":1731640120422,"results":"11","hashOfConfig":"12"},{"size":263,"mtime":1731640155296,"results":"13","hashOfConfig":"12"},{"size":1052,"mtime":1731600508081,"results":"14","hashOfConfig":"12"},{"size":354,"mtime":1731639809258,"results":"15","hashOfConfig":"12"},{"size":14681,"mtime":1731642268386,"results":"16","hashOfConfig":"12"},{"size":156,"mtime":1731588241061,"results":"17","hashOfConfig":"12"},{"size":155,"mtime":1731588241062,"results":"18","hashOfConfig":"12"},{"size":161,"mtime":1731588241065,"results":"19","hashOfConfig":"12"},{"size":157,"mtime":1731588241067,"results":"20","hashOfConfig":"12"},{"size":2643,"mtime":1731588241055,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"739o3u",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"35"},{"filePath":"36","messages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"35"},{"filePath":"38","messages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"35"},{"filePath":"40","messages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"35"},{"filePath":"42","messages":"43","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"35"},"D:\\love forest\\src\\main.js",[],"D:\\love forest\\src\\App.vue",[],"D:\\love forest\\src\\router\\index.js",[],[],"D:\\love forest\\src\\views\\Main.vue",[],"D:\\love forest\\src\\views\\login\\login.vue",[],"D:\\love forest\\src\\views\\chat\\chat.vue",[],[],"D:\\love forest\\src\\views\\community\\trends.vue",[],"D:\\love forest\\src\\views\\recommend\\index.vue",[],"D:\\love forest\\src\\views\\space\\space.vue",[],"D:\\love forest\\src\\components\\header.vue",[]]

70
package-lock.json generated

@ -8,6 +8,9 @@
"name": "demo",
"version": "0.1.0",
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"animate.css": "^4.1.1",
"axios": "^1.7.7",
"core-js": "^3.8.3",
"element-plus": "^2.8.6",
"vite": "^5.4.10",
@ -4183,6 +4186,12 @@
"ajv": "^6.9.1"
}
},
"node_modules/animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
"license": "MIT"
},
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -4337,6 +4346,12 @@
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
"license": "MIT"
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -4385,6 +4400,17 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.7.7",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz",
"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/babel-loader": {
"version": "8.4.1",
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@ -5046,6 +5072,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@ -5884,6 +5922,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@ -7214,7 +7261,6 @@
"version": "1.15.9",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"dev": true,
"funding": [
{
"type": "individual",
@ -7231,6 +7277,20 @@
}
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@ -8872,7 +8932,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@ -8882,7 +8941,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
@ -10512,6 +10570,12 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/pseudomap": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",

@ -8,6 +8,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"animate.css": "^4.1.1",
"axios": "^1.7.7",
"core-js": "^3.8.3",
"element-plus": "^2.8.6",
"vite": "^5.4.10",

@ -1,10 +1,14 @@
<template>
<RouterView />
<router-view/>
</template>
<script setup></script>
<style >
*{
margin: 0;
padding: 0;
}
<style>
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 761 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

@ -0,0 +1,57 @@
<template>
<div class="comment-input">
<textarea v-model="commentText" placeholder="输入评论..." rows="3"></textarea>
<button @click="submitComment"></button>
</div>
</template>
<script>
export default {
data() {
return {
commentText: '', //
};
},
methods: {
submitComment() {
if (this.commentText.trim()) {
this.$emit('submitComment', this.commentText); //
this.commentText = ''; //
this.$emit('updateLikeCount', this.likeCount + 1);
} else {
alert("评论不能为空!");
}
}
}
};
</script>
<style scoped>
.comment-input {
display: flex;
flex-direction: column;
}
textarea {
margin-bottom: 10px;
padding: 10px;
font-size: 14px;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
align-self: flex-end;
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>

@ -0,0 +1,173 @@
<template>
<div class="post-card">
<div class="post-header">
<img :src="avatarUrl" alt="avatar" class="avatar" />
<div class="user-info">
<strong>{{ username }}</strong>
<span>{{ timestamp }}</span>
</div>
</div>
<div class="post-content">
<p>{{ content }}</p>
<div style="display: flex;justify-content: center;">
<img v-if="imageUrl" :src="imageUrl" alt="post image" />
</div>
</div>
<div class="post-footer">
<button @click="increaseLikeCount" :class="{'liked': isLiked}">
<span v-if="isLiked"></span>
<span v-else>🤍</span>
{{ likeCount }}
</button>
<button @click="toggleCommentsVisibility">
{{ isCommentsVisible ? '隐藏评论' : '查看评论' }}
💬
{{ commentCount }}
</button>
</div>
<!-- 评论区的过渡动画 -->
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment">
<p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
</div>
<!-- 发布评论 -->
<CommentInput @submitComment="addComment" />
</div>
</transition>
</div>
</template>
<script>
import CommentInput from './CommentInput.vue';
export default {
components: { CommentInput },
props: {
avatarUrl: String,
username: String,
timestamp: String,
content: String,
imageUrl: String,
likeCount: Number,
commentCount: Number,
isCommentsVisible: Boolean,
comments: Array, //
},
methods: {
increaseLikeCount() {
this.$emit('updateLikeCount', this.likeCount + 1);
this.isLiked = !this.isLiked;
},
increaseCommentCount() {
this.$emit('updateCommentCount', this.commentCount + 1);
},
toggleCommentsVisibility() {
this.$emit('toggleCommentsVisibility');
},
addComment(commentText) {
this.$emit('addComment', commentText); //
},
beforeEnter(el) {
el.style.maxHeight = '0';
},
enter(el, done) {
el.offsetHeight; //
el.style.transition = 'max-height 0.3s ease-in-out';
el.style.maxHeight = `${el.scrollHeight}px`;
done();
},
leave(el, done) {
el.style.transition = 'max-height 0.3s ease-in-out';
el.style.maxHeight = '0';
done();
}
}
};
</script>
<style scoped>
button {
background: none;
border: none;
font-size: 1rem;
cursor: pointer;
outline: none;
padding: 0;
}
/* 点赞后的红色样式 */
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* .liked 类,应用动画 */
.liked {
color: red;
animation: scaleAnimation 0.5s ease-in-out;
}
.post-card {
opacity: 0.95;
margin: 20px;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
background-color: #fff;
}
.post-header {
display: flex;
align-items: center;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.user-info {
font-size: 14px;
}
.post-footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.comments-section {
margin-top: 15px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 8px;
overflow: hidden; /* 确保在 max-height 动画过程中隐藏溢出的内容 */
}
.comment {
margin-bottom: 10px;
}
/* 过渡效果 */
.fade-enter-active, .fade-leave-active {
transition: max-height 0.3s ease-in-out;
}
.fade-enter, .fade-leave-to {
max-height: 0;
}
</style>

@ -9,7 +9,7 @@
active-text-color="#FEB2D7"
>
<div class="logo">
<img src="@/assets/pictures/Logo.png" alt="Logo" />
<img src="../assets/pictures/Logo.png" alt="Logo" />
</div>
<el-menu-item index="1">智能推荐</el-menu-item>
<el-sub-menu index="2">
@ -56,12 +56,11 @@
})
</script>
<script>
export default
{
name: 'HeaderComponent', //
//
}
</script>
export default {
name: 'HeaderComponent',
}
</script>
<style>
.el-menu-demo {

@ -3,9 +3,12 @@ import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.use(router)
app.mount('#app')

@ -11,6 +11,7 @@ import {createRouter ,createWebHashHistory} from 'vue-router'
const routes = [
{
path : '/',
component : login
},
{

@ -2,7 +2,7 @@
<heade/>
<div></div>
<router-view/>
</template>
@ -12,6 +12,7 @@
import heade from '../components/header.vue'
// import background from '../components/background.vue'
</script>
<script>
export default {

@ -1,9 +1,242 @@
<template>
社区动态
<div class=base>
<div class=leftinfo>
<div class=focus style="position: absolute; font-weight: bold; font-size: 18px; left:8%;top:1%">
你的关注
</div>
<div class=num style="position:absolute; font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
{{myfollows.weidu}}条新动态
</div>
<div class=followslist style="position:absolute;display: flex;flex-direction: column;top:7%;width:100%;gap:7%">
<div>
<div class= "alldongtai" style="display: flex; flex-direction: row;justify-content:center; position: relative; align-items: center;">
<el-icon color="#45D4CF" size="30px"> <Grid /></el-icon>
<div style="margin-left: 40px; font-weight: bold; font-size: 16px;">全部动态</div>
</div>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8;margin-top: 3%;">
</div>
<div v-for="(follow, index) in myfollows.list" :key="index" style="margin-top: 8%;">
<div class="follows" style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;width: 100%;">
<img class="touxiang" src="../../assets/pictures/touxiang.png" style="width: 18%; height: auto;" />
<div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
</div>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 5%;">
</div>
</div>
</div>
<div class=middle>
<div class="post-list">
<div
v-for="(post, index) in posts"
:key="index"
class="post-card"
>
<PostCard
:avatarUrl="post.avatarUrl"
:username="post.username"
:timestamp="post.timestamp"
:content="post.content"
:imageUrl="post.imageUrl"
:likeCount="post.likeCount"
:commentCount="post.commentCount"
:isCommentsVisible="post.isCommentsVisible"
:comments="post.comments"
@updateLikeCount="updateLikeCount(index, $event)"
@updateCommentCount="updateCommentCount(index, $event)"
@toggleCommentsVisibility="toggleCommentsVisibility(index)"
@addComment="addComment(index, $event)"
/>
</div>
</div>
</div>
<div class=rightheat style="display: flex;flex-direction:column;">
<div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
<el-icon color="red" size="30px"><Odometer /></el-icon>
<div style="font-weight:550; font-size: 18px;">热门动态</div>
</div>
<div class= heatlist style="margin-top:20px;display: flex;flex-direction:row;">
<div style="position:relative; display: flex;flex-direction:column; color: white; font-weight: bold;margin-left: 20px ;gap:11px">
<div class=Hotsearchnum style="background-color:red;">1</div>
<div class=Hotsearchnum style="background-color:#FF7E38;">2</div>
<div class=Hotsearchnum style="background-color:#FFC74F;">3</div>
<div class=Hotsearchnum style="background-color:gray;">4</div>
<div class=Hotsearchnum style="background-color:gray;">5</div>
<div class=Hotsearchnum style="background-color:gray;">6</div>
<div class=Hotsearchnum style="background-color:gray;">7</div>
</div>
<div style=" font-size: 14px;font-weight:500;margin-left: 30px;display: flex;flex-direction:column;gap:17px">
<li style="list-style-type: none;" v-for="(item, index) in HotsearchList" :key="index">{{ item }}</li>
</div>
</div>
<div style="width: 100%; height: 1px; background: linear-gradient(to right, transparent, gray, transparent);margin-top: 20px"></div>
<div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
<el-icon color="#FEB7D9" size="25px"><Notebook /></el-icon>
<div style="font-weight:550; font-size: 18px;">热门家族故事</div>
</div>
<div class="familystorelist" style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
<div v-for="(story, index) in familystories" :key="index" class="familystore" style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;">
<img class="touxiang" src="../../assets/pictures/touxiang.png" />
<div class="familytitle">{{ story.title }}</div>
<div class="familycontent">{{ story.content }}</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.base
{
height: 100vh;
background-image: url("../../assets/pictures/communityback.png");
background-size: 90%;
background-attachment: fixed; /* 背景固定 */
background-position: -600px; /* 向左移动背景图像 50px */
background-position: center; /* 可以选择让背景居中 */
z-index: -1;
}
.touxiang
{
position: absolute;
top:50%;
left:5%;
border-radius: 10px;
width: 50px;
height:50px;
transform: translateY(-50%)
}
.leftinfo
{
background-color: rgba(255,255,255,0.8);
width: 15%;
position: fixed;
left:0%;
border: 3px solid orchid;
height:100%;
}
.rightheat
{
background-color: rgba(255,255,255,0.8);
position: fixed;
right:0%;
width: 15%;
border: 3px solid orchid;
height:100%;
}
.familytitle
{
position: absolute;
top:8%;
left:35%;
font-size: 14px;
font-weight: bold;
}
.familycontent
{
position: absolute;
bottom:12%;
left:35%;
font-size: 13px;
}
.Hotsearchnum{
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.middle
{
position: absolute;
left:50%;
transform: translateX(-50%);
width: 65%;
border: 3px solid orchid;
height:100%;
z-index:1;
}
.post-list {
}
</style>
<script>
import PostCard from '../../components/PostCard.vue';
export default {
name: 'CommunityIndex', //
components: { PostCard },
//
data() {
return {
isLiked: false,
HotsearchList: ["麦琳爱吃烧鸡","马思唯收官战","国足绝杀","再见爱人","杨子黄圣依","黄磊的豆角","邪恶栀子花计划"],
familystories: [
{ title: '我是怎么起家的', content: '我的父母来自于印度,后面通过自己的打拼...' },
{ title: '我的祖父', content: '我的祖父曾经参加过二战,有一次在诺曼底...' },
{ title: '我竟然是皇室成员!', content: '在我的18岁生日上妈妈告诉我祖母其实是...' },
],
myfollows:{weidu:7,list:[{name:'乔一鱼'},{name:'邓紫棋'},{name:'马思唯'},{name:'陶喆'}]},
posts: [
{
avatarUrl: 'https://via.placeholder.com/40',
username: '小明',
timestamp: '1小时前',
content: '今天的天气真好,适合出去玩!',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] //
},
{
avatarUrl: 'https://via.placeholder.com/40',
username: '小红',
timestamp: '2小时前',
content: '刚看完一场电影,真是太感人了!',
imageUrl: '',
likeCount: 36,
commentCount: 12,
isCommentsVisible: false,
comments: [] //
},
]
};
},
methods: {
updateLikeCount(index, newLikeCount) {
this.posts[index].likeCount = newLikeCount;
},
updateCommentCount(index, newCommentCount) {
this.posts[index].commentCount = newCommentCount;
},
toggleCommentsVisibility(index) {
this.posts[index].isCommentsVisible = !this.posts[index].isCommentsVisible;
},
addComment(index, commentText) {
this.posts[index].comments.push({
username: '匿名用户',
text: commentText
});
this.posts[index].commentCount += 1;
}
}
}
</script>

@ -171,7 +171,7 @@
</div>
</template>
<style>
<style scoped >
/* @import '../assets/css/Login.css' */
.base{
height: 100vh;
@ -181,7 +181,9 @@
background-image: url("../../assets/pictures/background.png");
background-size: 100%;
}
.loginAndRegist{
.loginAndRegist
{
position: absolute;
display: flex;
justify-content: center;

@ -1,9 +1,61 @@
<template>
个人空间
</template>
<script>
export default {
name: 'spaceIndex', //
//
<div>
<!-- 爱心按钮点击后会变红并带有过渡效果 -->
<button @click="toggleLike" :class="{'liked': isLiked}">
<span v-if="isLiked"></span>
<span v-else>🤍</span>
</button>
</div>
</template>
<script>
export default {
name:'AaA',
data() {
return {
isLiked: false, //
};
},
methods: {
toggleLike() {
this.isLiked = !this.isLiked; //
},
},
};
</script>
<style scoped>
/* 默认的按钮样式 */
button {
background: none;
border: none;
font-size: 3rem;
cursor: pointer;
outline: none;
padding: 0;
}
/* 点赞后的红色样式 */
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</script>
/* .liked 类,应用动画 */
.liked {
color: red;
animation: scaleAnimation 0.5s ease-in-out;
}
</style>
Loading…
Cancel
Save