pull/1/head
xuan 2 months ago
commit b9e5a7cd06

@ -0,0 +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":359,"mtime":1731741182777,"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":14422,"mtime":1731741182778,"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},"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",[]]

@ -0,0 +1,80 @@
.base
{
height: 100vh;
background-image: url("../../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 {
}

@ -4184,6 +4184,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",

@ -1,6 +1,7 @@
<template>
<RouterView />
<router-view/>
</template>
<script setup></script>

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
},
{

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

@ -1,9 +1,164 @@
<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>
@import url('../../assets/css/community/community.css');
</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>

@ -1,9 +1,9 @@
<template>
个人空间
个人空间
</template>
<script>
export default {
name: 'spaceIndex', //
//
name: 'spaceIndex', //
//
}
</script>
Loading…
Cancel
Save