cnbugs/uni-halo
1
0
Vork 0
kopie van https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 13:19:31 +08:00
Code Kwesties Activiteit

release: 发布 uni-halo beta-v2.0 版本

Bladeren bron
This commit is contained in:
小莫唐尼
2024-05-20 01:27:15 +08:00
bovenliggende a81c506a14
commit 057a7cf6f0
49 gewijzigde bestanden met toevoegingen van 2696 en 2531 verwijderingen
Download Patch-bestand Download Diff-bestand Expand all files Collapse all files
components/category-mini-card/category-mini-card.vue
+66 -54
Bestand weergeven
@@ -1,67 +1,79 @@
<template>
<view class="category-mini-card">
<cache-image
class="img"
height="120rpx"
:url="$utils.checkThumbnailUrl(category.thumbnail)"
:fileMd5="$utils.checkThumbnailUrl(category.thumbnail)"
mode="aspectFill"
></cache-image>
<text class="label">{{ category.postCount }}&nbsp;篇</text>
<view class="name">{{ category.name }}</view>
<cache-image class="img" height="180rpx" :url="$utils.checkThumbnailUrl(category.spec.cover,true)"
:fileMd5="$utils.checkThumbnailUrl(category.spec.cover)" mode="aspectFill"></cache-image>
<view class="content">
<view class="name">{{ category.spec.displayName }}</view>
<text class="label">共 {{ category.postCount }} 篇</text>
</view>
</view>
</template>
<script>
export default {
name: 'category-mini-card',
props: {
category: {
type: Object,
default: () => {}
export default {
name: 'category-mini-card',
props: {
category: {
type: Object,
default: () => {}
}
}
}
};
};
</script>
<style scoped lang="scss">
.category-mini-card {
display: inline-block;
width: 260rpx;
height: 180rpx;
position: relative;
border-radius: 12rpx;
background-color: #fff;
overflow: hidden;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
position: relative;
.img {
width: 100%;
height: 120rpx;
border: 6rpx 6rpx 0 0;
.category-mini-card {
display: inline-block;
width: 260rpx;
height: 180rpx;
position: relative;
border-radius: 12rpx;
background-color: #fff;
overflow: hidden;
}
.label {
position: absolute;
left: 0;
top: 86rpx;
color: #03a9f4;
font-size: 24rpx;
background-color: rgba(255, 255, 255, 1);
border-radius: 0rpx 24rpx 0 0;
display: flex;
padding: 2rpx 12rpx;
padding-right: 24rpx;
}
.name {
position: absolute;
bottom: 16rpx;
left: 0;
right: 0;
font-size: 24rpx;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
position: relative;
text-align: center;
color: #333;
color: #ffffff;
&:before {
content: '';
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3rpx);
}
.content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.img {
width: 100%;
height: 100%;
}
.name {
font-weight: bold;
font-size: 30rpx;
}
.label {
font-size: 24rpx;
margin-top: 6rpx;
}
}
}
</style>
</style>