mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-19 01:50:15 +09:00
修改：优化文章卡片样式
This commit is contained in:
小莫唐尼
parent
ee28753094
commit
70dc7cd0a7
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<view class="article-card " :class="cardType" @click="fnClickEvent('card')">
|
||||
<view class="left">
|
||||
<cache-image
|
||||
class="thumbnail"
|
||||
radius="12rpx"
|
||||
:url="$utils.checkThumbnailUrl(article.thumbnail)"
|
||||
:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
|
||||
mode="aspectFill"
|
||||
></cache-image>
|
||||
<cache-image class="thumbnail" radius="6rpx" :url="$utils.checkThumbnailUrl(article.thumbnail)" :fileMd5="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></cache-image>
|
||||
<!-- <image class="thumbnail" lazy-load :src="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></image> -->
|
||||
</view>
|
||||
<view class="right">
|
||||
@ -33,8 +27,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
||||
export default {
|
||||
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
||||
export default {
|
||||
name: 'article-card',
|
||||
components: { tmTags },
|
||||
props: {
|
||||
@ -65,38 +59,49 @@ export default {
|
||||
this.$emit('on-click', this.article);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.article-card {
|
||||
.article-card {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
margin: 0 24rpx;
|
||||
padding: 32rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #ffff;
|
||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
overflow: hidden;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&.h_row_col1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.home {
|
||||
&.h_row_col2 {
|
||||
margin: 12rpx;
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
|
||||
.thumbnail {
|
||||
|
||||
::v-deep uni-image {
|
||||
border-radius: 6rpx 6rpx 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.is-top {
|
||||
height: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
@ -105,22 +110,28 @@ export default {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.foot {
|
||||
justify-content: space-between;
|
||||
|
||||
.create-time {
|
||||
font-size: 24rpx;
|
||||
|
||||
.time-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
font-size: 24rpx;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tb_text_image {
|
||||
padding: 12rpx;
|
||||
|
||||
.left .thumbnail {
|
||||
::v-deep {
|
||||
uni-image {
|
||||
@ -129,14 +140,17 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.only_text {
|
||||
padding: 24rpx;
|
||||
|
||||
.right .foot {
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
@ -144,92 +158,113 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lr_image_text {
|
||||
}
|
||||
|
||||
&.lr_image_text {}
|
||||
|
||||
&.lr_text_image {
|
||||
.left {
|
||||
order: 2;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
order: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tb_image_text {
|
||||
flex-direction: column;
|
||||
padding: 24rpx;
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
|
||||
.thumbnail {
|
||||
::v-deep uni-image {
|
||||
border-radius: 6rpx 6rpx 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 0;
|
||||
padding: 24rpx 0;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.foot {
|
||||
justify-content: flex-start;
|
||||
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tb_text_image {
|
||||
flex-direction: column;
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
order: 2;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
|
||||
.foot {
|
||||
justify-content: flex-start;
|
||||
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.only_text {
|
||||
padding: 36rpx;
|
||||
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 0;
|
||||
|
||||
.content {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.foot {
|
||||
justify-content: flex-start;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
@ -240,12 +275,14 @@ export default {
|
||||
.left {
|
||||
width: 240rpx;
|
||||
height: 180rpx;
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
@ -253,11 +290,13 @@ export default {
|
||||
flex-direction: column;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: var(--main-text-color);
|
||||
|
||||
.is-top {
|
||||
height: 40rpx;
|
||||
padding: 0 12rpx;
|
||||
@ -271,10 +310,12 @@ export default {
|
||||
border-radius: 6rpx 12rpx;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: -webkit-box;
|
||||
font-size: 26rpx;
|
||||
@ -283,6 +324,7 @@ export default {
|
||||
margin-top: 14rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
@ -293,10 +335,12 @@ export default {
|
||||
|
||||
.create-time {
|
||||
font-size: 26rpx;
|
||||
|
||||
.time-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
.number {
|
||||
padding: 0 6rpx;
|
||||
@ -305,5 +349,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<view class="article-min-card" :class="[globalAppSettings.layout.cardType]" @click="fnClickEvent('card')">
|
||||
<view class="left">
|
||||
<cache-image
|
||||
class="thumbnail"
|
||||
radius="12rpx"
|
||||
:url="$utils.checkThumbnailUrl(article.thumbnail)"
|
||||
:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
|
||||
mode="aspectFill"
|
||||
></cache-image>
|
||||
<cache-image class="thumbnail" radius="6rpx" :url="$utils.checkThumbnailUrl(article.thumbnail)" :fileMd5="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></cache-image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="title text-overflow">{{ article.title }}</view>
|
||||
@ -30,7 +24,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'article-min-card',
|
||||
props: {
|
||||
article: {
|
||||
@ -43,11 +37,11 @@ export default {
|
||||
this.$emit('on-click', this.article);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.article-min-card {
|
||||
.article-min-card {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12rpx;
|
||||
@ -57,82 +51,101 @@ export default {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 16rpx;
|
||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
&.lr_image_text {
|
||||
}
|
||||
|
||||
&.lr_image_text {}
|
||||
|
||||
&.lr_text_image {
|
||||
.left {
|
||||
order: 2;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
order: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tb_image_text {
|
||||
flex-direction: column;
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.foot {
|
||||
justify-content: flex-start;
|
||||
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tb_text_image {
|
||||
flex-direction: column;
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
order: 2;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
|
||||
.foot {
|
||||
justify-content: flex-start;
|
||||
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.only_text {
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 0;
|
||||
|
||||
.foot {
|
||||
justify-content: flex-start;
|
||||
|
||||
.create-time {
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
@ -143,28 +156,33 @@ export default {
|
||||
.left {
|
||||
width: 180rpx;
|
||||
height: 130rpx;
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 24rpx;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
@ -172,20 +190,25 @@ export default {
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
margin-top: 14rpx;
|
||||
|
||||
.create-time {
|
||||
font-size: 24rpx;
|
||||
|
||||
.time-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24rpx;
|
||||
padding-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.visits {
|
||||
.icon {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
padding: 0 6rpx;
|
||||
font-size: 24rpx;
|
||||
@ -193,5 +216,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user