xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:优化文章卡片

Browse Source
This commit is contained in:
Xwen
2024-01-07 22:31:52 +08:00
parent 1898068f6b
commit ecb4240d8d
6 changed files with 76 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Bbs.Vue3/src/components/AvatarInfo.vue
View File

@@ -155,7 +155,6 @@ const getStatusInfo = (type) => {
.info {
flex: 1;
margin-top: 0.6rem;
margin-left: 1rem;
}
@@ -171,6 +170,7 @@ const getStatusInfo = (type) => {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.avatar-left,

132
Yi.Bbs.Vue3/src/components/DisscussCard.vue
View File

@@ -1,73 +1,50 @@
<template>
<el-badge class="box-card">
<el-card shadow="never" :style="{ 'border-color': discuss.color }">
<el-row>
<!-- 头部 -->
<el-col :span="24" class="card-header">
<AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
</el-col>
<!-- 身体 -->
<el-col :span="18">
<el-row>
<el-col v-if="discuss.isBan" :span="24" class="item item-title">
<el-link size="100" :underline="false" style="color: #f56c6c">{{
discuss.title
}}</el-link></el-col
>
<el-col v-else :span="24" class="item item-title">
<el-link
size="100"
:underline="false"
@click="enterDiscuss(discuss.id)"
>{{ discuss.title }}</el-link
></el-col
>
<el-col :span="24" class="item item-description">{{
discuss.introduction
}}</el-col>
<el-col :span="24" class="item item-tag"
><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col
>
</el-row>
</el-col>
<el-col :span="6" style="display: flex; justify-content: center">
<el-image
:preview-src-list="[getUrl(discuss.cover)]"
v-if="discuss.cover"
:src="getUrl(discuss.cover)"
style="width: 100px; height: 100px"
/>
</el-col>
<!-- 底部 -->
<el-col :span="24" class="item item-bottom" style="margin-bottom: 0">
<el-space :size="10" :spacer="spacer">
<div class="item-description">
{{ discuss.creationTime }}
</div>
<AgreeInfo :data="discuss" />
<!--
<el-button text @click="agree">
<el-icon v-if="discuss.isAgree" color="#409EFF">
<CircleCheckFilled />
</el-icon>
<el-icon v-else color="#1E1E1E">
<Pointer />
</el-icon> 点赞:{{ discuss.agreeNum ?? 0 }}</el-button>
<el-button icon="Star" text>
收藏</el-button> -->
<el-button icon="View" text>
浏览数:{{ discuss.seeNum ?? 0 }}</el-button
>
</el-space>
</el-col>
</el-row>
<div class="card-header">
<AvatarInfo :userInfo="discuss.user" />
</div>
<div v-if="discuss.isBan" class="item item-title">
<el-link size="100" :underline="false" style="color: #f56c6c">{{
discuss.title
}}</el-link>
</div>
<div v-else class="item item-title">
<el-link
size="100"
:underline="false"
@click="enterDiscuss(discuss.id)"
>{{ discuss.title }}</el-link
>
</div>
<div>
<div class="item item-description">
{{ discuss.introduction }}
</div>
</div>
<div style="display: flex; justify-content: center">
<el-image
:preview-src-list="[getUrl(discuss.cover)]"
v-if="discuss.cover"
:src="getUrl(discuss.cover)"
style="width: 100px; height: 100px"
/>
</div>
<!-- 底部 -->
<div class="item item-bottom">
<div class="tag-list">
<el-tag v-for="i in 4" :key="i">教程</el-tag>
</div>
<el-space :size="10" :spacer="spacer">
<div class="item-description">
{{ discuss.creationTime }}
</div>
<AgreeInfo :data="discuss" />
<el-button icon="View" text>
浏览数:{{ discuss.seeNum ?? 0 }}</el-button
>
</el-space>
</div>
</el-card>
<div class="pinned" v-if="props.badge">
<div class="icon">
@@ -155,30 +132,34 @@ onMounted(() => {
discuss.value = props.agreeNum;
});
</script>
<style scoped>
<style scoped lang="scss">
.el-card {
border: 2px solid white;
}
.item-bottom .el-icon {
margin-right: 0.4rem;
.item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
.el-icon {
margin-right: 0.4rem;
}
}
.card-header {
display: flex;
margin-bottom: 1.5rem;
align-items: center;
}
.item {
font-size: 14px;
margin-bottom: 18px;
margin: 5px 0;
}
.box-card {
position: relative;
width: 100%;
min-height: 15rem;
/* right: calc(1px + var(--el-badge-size)/ 2) !important; */
/* top: 0 !important; */
.pinned {
@@ -187,7 +168,7 @@ onMounted(() => {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 15px;
padding: 2px 15px;
border-radius: 5px;
color: rgb(8, 119, 229);
background-color: #ecf5ff;
@@ -221,4 +202,7 @@ onMounted(() => {
font-size: initial;
font-weight: 700;
}
:deep(.el-card__body) {
padding: 10px 20px;
}
</style>

2
Yi.Bbs.Vue3/src/components/InfoCard.vue
View File

@@ -44,7 +44,7 @@ const height = ref(props.height + "px");
}
.item {
margin: 0.5rem 0;
margin: 1rem 0;
}
.box-card {

2
Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
View File

@@ -9,7 +9,7 @@
v-if="!props.isSelf"
>
<template #reference>
<el-avatar :size="props.size" :src="iconUrl" />
<el-avatar :size="30" :src="iconUrl" />
</template>
<div class="top">
<div class="left">

20
Yi.Bbs.Vue3/src/views/Article.vue
View File

@@ -19,15 +19,17 @@
>添加子文章</el-button
>
<!--目录在这里 -->
<TreeArticleInfo
:data="articleData"
@remove="delArticle"
@update="updateArticle"
@create="addNextArticle"
@handleNodeClick="handleNodeClick"
:currentNodeKey="currentNodeKey"
:isArticleUser="isArticleUser"
/>
<el-scrollbar height="410px">
<TreeArticleInfo
:data="articleData"
@remove="delArticle"
@update="updateArticle"
@create="addNextArticle"
@handleNodeClick="handleNodeClick"
:currentNodeKey="currentNodeKey"
:isArticleUser="isArticleUser"
/>
</el-scrollbar>
</template>
</InfoCard>
</el-col>

6
Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
View File

@@ -81,10 +81,12 @@ const userImageSrc = computed(() => {
display: flex;
justify-content: space-around;
.left {
display: flex;
align-items: center;
flex: 1;
.icon {
width: 40px;
height: 40px;
width: 30px;
height: 30px;
img {
width: 100%;
height: 100%;