Skip to content

Commit

Permalink
fix: 文章列表cover图片比例问题
Browse files Browse the repository at this point in the history
  • Loading branch information
Plumbiu committed Feb 13, 2023
1 parent cdc865b commit 9f52de3
Show file tree
Hide file tree
Showing 10 changed files with 320 additions and 175 deletions.

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions frontend/components/ArticlesList/Item/Ads.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ const ad = inject<IArticleAd>('ads')
<template>
<li class="relative">
<ArticlesListUiLink :to="ad?.url">
<div class="overflow-hidden flex-1">
<div class="flex-1 overflow-hidden">
<ArticlesListItemBarTop
:name="ad?.author"
:ad-id="ad?.author"
duration="广告"
/>
<ArticlesListItemBarCenter ad :title="ad?.title" :summary="ad?.summary" />
Expand Down
17 changes: 7 additions & 10 deletions frontend/components/ArticlesList/Item/AuthorCard/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ defineProps<{
<div class="info">
<div class="name">
<span>{{ name }}</span>
<img :src="`https://pan.marlene.top/d/share/jj/${rank}.png`" alt="等级">
<img class="w-[3rem] ml-[1rem]" :src="`https://pan.marlene.top/d/share/jj/${rank}.png`" :alt="`lv${rank}`">
</div>
<div class="text-[#8f969c]">
<div class="text-[#8f969c] text-[0.1rem]">
{{ motto }}
</div>
</div>
Expand All @@ -28,20 +28,17 @@ defineProps<{
<style scoped>
.author_card {
box-shadow: 0 8px 24px rgb(81 87 103 / 16%);
@apply bg-white absolute top-[-10rem] left-0 mlg:left-[-1.67rem]
@apply dark:bg-jj-article dark:text-white
@apply bg-white absolute top-[-9rem] left-0 mlg:left-[-1.67rem]
@apply dark:(bg-jj-article text-white)
}
.about {
@apply flex items-center m-[1rem] mb-0
}
.about .info {
@apply pl-[1rem] flex flex-col justify-center
.info {
@apply flex flex-col justify-center
}
.name {
@apply text-[1rem] flex items-center
}
.name img {
@apply w-[3rem] m-l-[1rem]
@apply flex-auto flex items-center pr-[1rem]
}
.author_card::after {
border: 10px solid transparent;
Expand Down
28 changes: 10 additions & 18 deletions frontend/components/ArticlesList/Item/Bar/Top.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,14 @@ defineProps({
type: Object,
default: () => {},
},
name: String,
adId: String,
})
</script>

<template>
<div class="topbar">
<div class="author">
<span v-if="name" class="name">{{ name }}</span>
<span v-else class="name">{{ authorId.name }}</span>
<span class="name">{{ adId ? adId : authorId.name }}</span>
<ArticlesListItemAuthorCard
v-if="authorId"
:name="authorId.name"
Expand All @@ -28,11 +27,11 @@ defineProps({
class="info"
/>
</div>
<span :class="`duration ${tags.length ? 'b-r' : ''}`">{{ duration }}</span>
<div class="tags">
<span :class="`duration ${tags.length ? 'b-r-1' : ''}`">{{ duration }}</span>
<div class="flex px-3">
<div v-for="(item, index) of tags" :key="item.tag" class="tag">
<span class="content">{{ item.alias }}</span>
<div v-if="index !== tags.length - 1" class="icon" />
<div v-if="index" class="icon" />
<span>{{ item.alias }}</span>
</div>
</div>
</div>
Expand All @@ -47,29 +46,22 @@ defineProps({
}
.info {
@apply scale-0 delay-150 transition-all text-black
}
.info:hover {
@apply scale-100
@apply hover:scale-100
}
.name:hover+.info {
@apply scale-100
}
.duration {
@apply text-jj-thirdly px-3
}
.b-r {
@apply border-r-1
}
.tags {
@apply flex px-3
}
.tag {
@apply items-center flex
@apply
}
.content {
.tag span {
@apply transition px-0 text-jj-thirdly hover:text-primary
}
.icon {
@apply i-carbon-circle-solid px-2 text-[0.15rem]
@apply dark:text-jj-thirdly
}
</style>
13 changes: 3 additions & 10 deletions frontend/components/ArticlesList/Item/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const hideHandler = (id: string) => {
<template>
<ul ref="parent">
<ArticlesListItemAds />
<li v-for="art in artlist" :key="art.id" class="list_container">
<li v-for="art in artlist" :key="art.id" class="relative">
<ArticlesListUiLink class="link" :to="`/article/${art.id}`">
<div class="left">
<div class="flex-1 truncate">
<ArticlesListItemBarTop
:author-id="art.authorId"
:duration="formatTime(art.createdAt)"
Expand All @@ -31,16 +31,9 @@ const hideHandler = (id: string) => {
</template>

<style scoped>
.list_container {
@apply relative
}
.list_container:hover .icon {
li:hover .icon {
@apply block
}
.left {
@apply flex-1 truncate
}
.icon {
@apply i-carbon-close display-none cursor-pointer text-[16px] text-jj-fourthly hover:text-primary transition absolute top-[1rem] right-[1.67rem]
}
Expand Down
27 changes: 7 additions & 20 deletions frontend/components/ArticlesList/Navigation/Select.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ const routeMap = {
</script>

<template>
<div v-if="route.query.sort && route.query.sort?.indexOf('hottest') !== -1" class="dorp-down-area">
<div v-if="route.query.sort && route.query.sort?.indexOf('hottest') !== -1" class="z-9 relative">
<div class="drop-down">
<div class="dropdown-toggle" @click="isShow = !isShow">
{{ routeMap[String(route.query.sort)] }}
<div class="icon" i-carbon:caret-up :class="!isShow ? 'toggled' : ''" />
<div class="icon" :class="!isShow ? 'rotate-180' : ''" />
</div>
<ul v-if="isShow" class="dropdown-menu">
<li v-for="(item, key) in routeMap" :key="item">
Expand All @@ -28,41 +28,28 @@ const routeMap = {
</template>
<style scoped>
.dorp-down-area {
@apply z-9 relative
}
.dorp-down-area .drop-down {
.drop-down {
@apply absolute top-1/2 left-0 text-jj-gray-drop-normal min-w-[4rem] -translate-y-1/2
}
li {
@apply dark:bg-jj_bg_gray
}
.dropdown-toggle {
@apply flex items-center justify-between box-border min-w-[7rem] text-[1rem] rounded-[2px] px-[10px] py-[2px] border border-solid border-jj-border-dropdown-normal
}
.dropdown-toggle:hover {
@apply bg-jj-dropdown-normal cursor-pointer
@apply hover:bg-jj-dropdown-normal cursor-pointer
@apply dark:hover-bg-jj-black-dropdown-normal
}
.icon {
@apply text-[#b2bac2] transition-all
@apply text-[#b2bac2] transition-all i-carbon:caret-up
}
.dropdown-menu {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
@apply text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1000 min-w-[7rem] text-[1rem] rounded-[0.17rem]
@apply dark:b-jj-gray-container-normal
@apply dark:(b-jj-gray-container-normal bg-jj_bg_gray)
}
.dropdown-menu li {
@apply overflow-hidden w-full
}
.dropdown-menu li a {
@apply block p-[0.83rem] text-jj-gray-drop-normal clear-both line-[1.7]
}
.toggled {
@apply rotate-180
}
.dropdown-menu li a:hover {
@apply bg-jj-dropdown-normal
@apply hover:bg-jj-dropdown-normal
@apply dark:hover-bg-jj-black-dropdown-normal
}
</style>
10 changes: 3 additions & 7 deletions frontend/components/ArticlesList/Ui/Btns.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,12 @@
<style scoped>
.primary {
transition: background-color .1s linear .05s;
@apply px-[4rem] py-[0.5rem] m-[1rem] text-[1.167rem] text-white h-full bg-jj-brand-normal rounded-[4px]
@apply px-[3.5rem] py-[0.4rem] m-[0.75rem] text-[1.167rem] text-white h-full bg-jj-brand-normal rounded-[2px]
@apply border border-solid border-jj-stroke-normal
@apply hover:bg-jj-button-primary-normal
}
.plain {
@apply text-jj-button-normal bg-jj-button-background-normal
}
.primary:hover {
@apply bg-jj-button-primary-normal
}
.plain:hover {
@apply bg-jj-button-plain-normal
@apply hover:bg-jj-button-plain-normal
}
</style>
34 changes: 18 additions & 16 deletions frontend/components/ArticlesList/Ui/Img.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
<script setup lang="ts">
defineProps({
src: String,
alt: String,
avatar: Boolean,
})
defineProps<{
src: string
alt: string
avatar: boolean
}>()
</script>

<template>
<nuxt-img
v-if="src"
:src="src"
:alt="alt"
loading="lazy"
fit="cover"
quality="80"
format="webp"
:class="`${avatar ? 'avatar' : 'cover'}`"
/>
<div :class="`${avatar ? '' : 'ml-[1.67rem] mb-[-1.85rem]'} overflow-hiden`">
<nuxt-img
v-if="src"
:src="src"
:alt="alt"
loading="lazy"
fit="cover"
quality="80"
format="webp"
:class="`${avatar ? 'avatar' : 'cover'}`"
/>
</div>
</template>

<style scoped>
.cover {
@apply aspect-[3/2] ml-[1.67rem] mb-[-1.85rem] w-[120px]
@apply object-cover w-[120px] h-[80px]
}
.avatar {
@apply w-16 h-16 rounded-full
Expand Down
4 changes: 1 addition & 3 deletions frontend/components/ArticlesList/Ui/Link.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<script setup lang="ts">
defineProps({
to: String,
})
defineProps<{ to: String }>()
</script>

<template>
Expand Down
8 changes: 2 additions & 6 deletions frontend/components/ArticlesList/Ui/Skeleton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,7 @@
}
@keyframes shan {
0% {
left: -100%;
}
100% {
left: 120%;
}
0% { left: -100%; }
100% { left: 120%; }
}
</style>

0 comments on commit 9f52de3

Please sign in to comment.