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>
|
<template>
|
||||||
<view class="article-card " :class="cardType" @click="fnClickEvent('card')">
|
<view class="article-card " :class="cardType" @click="fnClickEvent('card')">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<cache-image
|
<cache-image class="thumbnail" radius="6rpx" :url="$utils.checkThumbnailUrl(article.thumbnail)" :fileMd5="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></cache-image>
|
||||||
class="thumbnail"
|
|
||||||
radius="12rpx"
|
|
||||||
: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> -->
|
<!-- <image class="thumbnail" lazy-load :src="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></image> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="right">
|
<view class="right">
|
||||||
@ -33,277 +27,327 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'article-card',
|
name: 'article-card',
|
||||||
components: { tmTags },
|
components: { tmTags },
|
||||||
props: {
|
props: {
|
||||||
from: {
|
from: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
article: {
|
article: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
cardType() {
|
cardType() {
|
||||||
// tb_image_text=上图下文
|
// tb_image_text=上图下文
|
||||||
// tb_text_image=上文下图
|
// tb_text_image=上文下图
|
||||||
if (this.from == 'home' && this.globalAppSettings.layout.home == 'h_row_col2') {
|
if (this.from == 'home' && this.globalAppSettings.layout.home == 'h_row_col2') {
|
||||||
if (!['tb_image_text', 'tb_text_image', 'only_text'].some(x => x == this.globalAppSettings.layout.cardType)) {
|
if (!['tb_image_text', 'tb_text_image', 'only_text'].some(x => x == this.globalAppSettings.layout.cardType)) {
|
||||||
return [this.from, this.globalAppSettings.layout.home, 'tb_image_text'];
|
return [this.from, this.globalAppSettings.layout.home, 'tb_image_text'];
|
||||||
}
|
}
|
||||||
return [this.from, this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
|
return [this.from, this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
|
||||||
|
}
|
||||||
|
return [this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fnClickEvent() {
|
||||||
|
this.$emit('on-click', this.article);
|
||||||
}
|
}
|
||||||
return [this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
|
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
methods: {
|
|
||||||
fnClickEvent() {
|
|
||||||
this.$emit('on-click', this.article);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.article-card {
|
.article-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 24rpx;
|
margin: 0 24rpx;
|
||||||
padding: 32rpx;
|
padding: 24rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
background-color: #ffff;
|
background-color: #ffff;
|
||||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
|
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
&.home {
|
|
||||||
&.h_row_col2 {
|
&.h_row_col1 {
|
||||||
margin: 12rpx;
|
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;
|
||||||
|
line-height: 36rpx;
|
||||||
|
vertical-align: 4rpx;
|
||||||
|
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 {
|
||||||
|
border-radius: 6rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.only_text {
|
||||||
|
padding: 24rpx;
|
||||||
|
|
||||||
|
.right .foot {
|
||||||
|
.create-time {
|
||||||
|
.time-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visits {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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 {
|
.left {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200rpx;
|
height: 340rpx;
|
||||||
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
::v-deep uni-image {
|
::v-deep uni-image {
|
||||||
border-radius: 6rpx 6rpx 0 0 !important;
|
border-radius: 6rpx 6rpx 0 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
.title {
|
padding-left: 0;
|
||||||
display: flex;
|
padding: 24rpx 0;
|
||||||
align-items: center;
|
padding-bottom: 0;
|
||||||
font-size: 26rpx;
|
width: 100%;
|
||||||
font-weight: bold;
|
|
||||||
.is-top {
|
|
||||||
height: 36rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
line-height: 36rpx;
|
|
||||||
vertical-align: 4rpx;
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.foot {
|
.foot {
|
||||||
justify-content: space-between;
|
justify-content: flex-start;
|
||||||
.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 {
|
|
||||||
border-radius: 6rpx !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.only_text {
|
|
||||||
padding: 24rpx;
|
|
||||||
.right .foot {
|
|
||||||
.create-time {
|
|
||||||
.time-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.visits {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.lr_image_text {
|
|
||||||
}
|
|
||||||
|
|
||||||
&.lr_text_image {
|
.create-time {
|
||||||
.left {
|
.time-label {
|
||||||
order: 2;
|
display: inline-block;
|
||||||
padding-left: 30rpx;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visits {
|
||||||
|
margin-left: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.right {
|
|
||||||
order: 1;
|
&.tb_text_image {
|
||||||
padding-left: 0;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
&.tb_image_text {
|
&.only_text {
|
||||||
flex-direction: column;
|
padding: 36rpx;
|
||||||
padding: 24rpx;
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 100%;
|
width: 240rpx;
|
||||||
height: 340rpx;
|
height: 180rpx;
|
||||||
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
::v-deep uni-image {
|
width: 100%;
|
||||||
border-radius: 6rpx 6rpx 0 0 !important;
|
height: 100%;
|
||||||
}
|
border-radius: 12rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
padding-left: 0;
|
width: 0;
|
||||||
padding: 24rpx 0;
|
flex-grow: 1;
|
||||||
padding-bottom: 0;
|
display: flex;
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
.foot {
|
padding-left: 30rpx;
|
||||||
justify-content: flex-start;
|
box-sizing: border-box;
|
||||||
.create-time {
|
|
||||||
.time-label {
|
.title {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: var(--main-text-color);
|
||||||
|
|
||||||
|
.is-top {
|
||||||
|
height: 40rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: 4rpx;
|
||||||
|
color: #fff;
|
||||||
|
// background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
|
||||||
|
border-radius: 6rpx 12rpx;
|
||||||
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
.visits {
|
|
||||||
margin-left: 24rpx;
|
&-text {
|
||||||
|
color: #303133;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
&.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 {
|
.content {
|
||||||
margin-top: 24rpx;
|
display: -webkit-box;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #909399;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
line-height: 42rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.foot {
|
.foot {
|
||||||
justify-content: flex-start;
|
display: flex;
|
||||||
margin-top: 24rpx;
|
font-size: 24rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #909399;
|
||||||
|
margin-top: 18rpx;
|
||||||
|
|
||||||
.create-time {
|
.create-time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
.time-label {
|
.time-label {
|
||||||
display: inline-block;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.visits {
|
.visits {
|
||||||
margin-left: 24rpx;
|
.number {
|
||||||
|
padding: 0 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
.left {
|
|
||||||
width: 240rpx;
|
|
||||||
height: 180rpx;
|
|
||||||
.thumbnail {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
width: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
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;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: 4rpx;
|
|
||||||
color: #fff;
|
|
||||||
// background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
|
|
||||||
border-radius: 6rpx 12rpx;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
&-text {
|
|
||||||
color: #303133;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
display: -webkit-box;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #909399;
|
|
||||||
height: 80rpx;
|
|
||||||
margin-top: 14rpx;
|
|
||||||
line-height: 42rpx;
|
|
||||||
}
|
|
||||||
.foot {
|
|
||||||
display: flex;
|
|
||||||
font-size: 24rpx;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #909399;
|
|
||||||
margin-top: 18rpx;
|
|
||||||
|
|
||||||
.create-time {
|
|
||||||
font-size: 26rpx;
|
|
||||||
.time-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.visits {
|
|
||||||
.number {
|
|
||||||
padding: 0 6rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,13 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="article-min-card" :class="[globalAppSettings.layout.cardType]" @click="fnClickEvent('card')">
|
<view class="article-min-card" :class="[globalAppSettings.layout.cardType]" @click="fnClickEvent('card')">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<cache-image
|
<cache-image class="thumbnail" radius="6rpx" :url="$utils.checkThumbnailUrl(article.thumbnail)" :fileMd5="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></cache-image>
|
||||||
class="thumbnail"
|
|
||||||
radius="12rpx"
|
|
||||||
:url="$utils.checkThumbnailUrl(article.thumbnail)"
|
|
||||||
:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
|
|
||||||
mode="aspectFill"
|
|
||||||
></cache-image>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="right">
|
<view class="right">
|
||||||
<view class="title text-overflow">{{ article.title }}</view>
|
<view class="title text-overflow">{{ article.title }}</view>
|
||||||
@ -30,168 +24,197 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'article-min-card',
|
name: 'article-min-card',
|
||||||
props: {
|
props: {
|
||||||
article: {
|
article: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fnClickEvent() {
|
||||||
|
this.$emit('on-click', this.article);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
methods: {
|
|
||||||
fnClickEvent() {
|
|
||||||
this.$emit('on-click', this.article);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.article-min-card {
|
.article-min-card {
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
background-color: #ffff;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 12rpx 24rpx;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
padding: 16rpx;
|
|
||||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 180rpx;
|
|
||||||
height: 130rpx;
|
|
||||||
.thumbnail {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
width: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
box-sizing: border-box;
|
||||||
padding-left: 24rpx;
|
border-radius: 12rpx;
|
||||||
.title {
|
background-color: #ffff;
|
||||||
font-size: 28rpx;
|
overflow: hidden;
|
||||||
font-weight: 600;
|
margin: 12rpx 24rpx;
|
||||||
color: var(--main-text-color);
|
margin-bottom: 24rpx;
|
||||||
|
padding: 16rpx;
|
||||||
|
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||||
|
|
||||||
|
&.lr_image_text {}
|
||||||
|
|
||||||
|
&.lr_text_image {
|
||||||
|
.left {
|
||||||
|
order: 2;
|
||||||
|
padding-left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
order: 1;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.content {
|
|
||||||
font-size: 26rpx;
|
&.tb_image_text {
|
||||||
color: #909399;
|
flex-direction: column;
|
||||||
margin-top: 14rpx;
|
|
||||||
}
|
.left {
|
||||||
.foot {
|
width: 100%;
|
||||||
display: flex;
|
height: 220rpx;
|
||||||
font-size: 24rpx;
|
}
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
.right {
|
||||||
color: #909399;
|
padding-left: 0;
|
||||||
margin-top: 14rpx;
|
width: 100%;
|
||||||
.create-time {
|
|
||||||
font-size: 24rpx;
|
.title {
|
||||||
.time-label {
|
margin-top: 24rpx;
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
.icon {
|
|
||||||
font-size: 24rpx;
|
.foot {
|
||||||
padding-right: 4rpx;
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.create-time {
|
||||||
|
.time-label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visits {
|
||||||
|
margin-left: 24rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.visits {
|
}
|
||||||
.icon {
|
|
||||||
font-size: 28rpx;
|
&.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.number {
|
}
|
||||||
padding: 0 6rpx;
|
}
|
||||||
|
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 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;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #909399;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
|
||||||
|
.create-time {
|
||||||
font-size: 24rpx;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
</style>
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user