优化首页展示数据
This commit is contained in:
mayongjian
@@ -80,7 +80,13 @@
|
||||
<span class="name">{{ item.username }}</span>
|
||||
</a>
|
||||
<span class="like-wrapper like-active">
|
||||
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||
<i
|
||||
class="iconfont icon-follow-fill"
|
||||
:style="{ width: '1em', height: '1em', color: item.isLike ? 'red' : 'black' }"
|
||||
v-if="item.isLike"
|
||||
>
|
||||
</i>
|
||||
<i class="iconfont icon-follow" style="width: 1em; height: 1em" v-else></i>
|
||||
<span class="count">{{ item.likeCount }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -18,28 +18,38 @@
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="interaction-imgs" @click="toMain(item.nid)">
|
||||
<div class="details-box" v-for="(url, index) in item.imgUrls" :key="index">
|
||||
<!-- 限制最多显示三张图片 -->
|
||||
<div
|
||||
class="details-box"
|
||||
v-for="(url, index) in item.imgUrls.slice(0, 3)"
|
||||
:key="index"
|
||||
style="position: relative"
|
||||
>
|
||||
<el-image
|
||||
v-if="!item.isLoading"
|
||||
:src="url"
|
||||
@load="handleLoad(item)"
|
||||
style="height: 230px; width: 100%"
|
||||
>
|
||||
</el-image>
|
||||
></el-image>
|
||||
<el-image
|
||||
v-else
|
||||
:src="url"
|
||||
class="note-img animate__animated animate__fadeIn animate__delay-0.5s"
|
||||
fit="cover"
|
||||
>
|
||||
</el-image>
|
||||
style="height: 230px; width: 100%"
|
||||
></el-image>
|
||||
|
||||
<!-- 在第三张图片上显示覆盖标识 -->
|
||||
<div v-if="index === 2 && item.imgUrls.length > 3" class="overlay">
|
||||
<span class="more-text">+{{ item.imgUrls.length - 3 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interaction-footer">
|
||||
<div class="icon-item">
|
||||
<i
|
||||
class="iconfont icon-follow-fill"
|
||||
style="width: 1em; height: 1em"
|
||||
:style="{ width: '1em', height: '1em', color: item.isLike ? 'red' : 'black' }"
|
||||
@click="like(item.nid, item.uid, index, -1)"
|
||||
v-if="item.isLike"
|
||||
>
|
||||
@@ -79,7 +89,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ChatRound, More, Refresh } from "@element-plus/icons-vue";
|
||||
import { ChatRound, More } from "@element-plus/icons-vue";
|
||||
import { ref } from "vue";
|
||||
import { getFollowTrend } from "@/api/follower";
|
||||
import { formateTime, refreshTab } from "@/utils/util";
|
||||
@@ -185,6 +195,28 @@ initData();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.details-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 0 24px;
|
||||
@@ -275,7 +307,7 @@ initData();
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
13
src/pages/index.html
Normal file
13
src/pages/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>红薯</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -202,7 +202,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Search, Sunny, Moon, Close, House, Star, Bell, ArrowRight, More, CirclePlus } from "@element-plus/icons-vue";
|
||||
import { Search, Sunny, Moon, Close, House, Star, Bell, ArrowRight, CirclePlus } from "@element-plus/icons-vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import Login from "@/pages/login.vue";
|
||||
import { ref, watch, onMounted, computed, watchEffect } from "vue";
|
||||
|
||||
@@ -90,7 +90,13 @@
|
||||
>
|
||||
<span class="collect-wrapper">
|
||||
<span class="like-lottie" v-if="noteInfo.isLike" @click="likeOrCollection(1, -1)">
|
||||
<i class="iconfont icon-follow-fill" style="width: 0.8em; height: 0.8em; color: #333"></i>
|
||||
<i
|
||||
class="iconfont icon-follow-fill"
|
||||
:style="{ width: '1em', height: '1em', color: noteInfo.isLike ? 'red' : 'black' }"
|
||||
v-if="noteInfo.isLike"
|
||||
>
|
||||
</i>
|
||||
<i class="iconfont icon-follow" style="width: 1em; height: 1em" v-else></i>
|
||||
</span>
|
||||
<span class="like-lottie" v-else @click="likeOrCollection(1, 1)">
|
||||
<i class="iconfont icon-follow" style="width: 0.8em; height: 0.8em; color: #333"></i>
|
||||
|
||||
@@ -12,14 +12,22 @@
|
||||
<a class>{{ item.username }}</a>
|
||||
</div>
|
||||
<div class="interaction-hint">
|
||||
<span>开始关注您了 </span><span>{{ item.time }}</span>
|
||||
<span>开始关注你了 </span><span>{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra">
|
||||
<el-button type="info" round size="large" v-if="item.isFollow" @click="follow(item.uid, index, 1)"
|
||||
<el-button
|
||||
class="button"
|
||||
type="info"
|
||||
round
|
||||
size="large"
|
||||
v-if="item.isFollow"
|
||||
@click="follow(item.uid, index, 1)"
|
||||
>互相关注</el-button
|
||||
>
|
||||
<el-button type="danger" round size="large" v-else @click="follow(item.uid, index, -1)">回关</el-button>
|
||||
<el-button class="button" type="danger" round size="large" v-else @click="follow(item.uid, index, -1)"
|
||||
>回关</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -175,6 +183,12 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.extra {
|
||||
min-width: 48px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
<a class>{{ item.username }}</a>
|
||||
</div>
|
||||
<div class="interaction-hint">
|
||||
<span v-if="item.type == 1">赞了您的笔记</span>
|
||||
<span v-if="item.type == 2">赞了您的评论</span>
|
||||
<span v-if="item.type == 3">收藏您的笔记</span>
|
||||
<span v-if="item.type == 4">赞了您的{{ item.content }}专辑</span>
|
||||
<span v-if="item.type == 1">赞了你的笔记</span>
|
||||
<span v-if="item.type == 2">赞了你的评论</span>
|
||||
<span v-if="item.type == 3">收藏你的笔记</span>
|
||||
<span v-if="item.type == 4">赞了你的{{ item.content }}专辑</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
<!-- <div class="interaction-content">
|
||||
|
||||
@@ -107,7 +107,13 @@
|
||||
<span class="name">{{ item.username }}</span>
|
||||
</a>
|
||||
<span class="like-wrapper like-active">
|
||||
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||
<i
|
||||
class="iconfont icon-follow-fill"
|
||||
:style="{ width: '1em', height: '1em', color: item.isLike ? 'red' : 'black' }"
|
||||
v-if="item.isLike"
|
||||
>
|
||||
</i>
|
||||
<i class="iconfont icon-follow" style="width: 1em; height: 1em" v-else></i>
|
||||
<span class="count">{{ item.likeCount }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user