216 lines
4.3 KiB
SCSS
216 lines
4.3 KiB
SCSS
@use './mixins/mixins.scss' as *;
|
|
|
|
@include b(graphic-card) {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
background-color: var(--tn-color-white);
|
|
|
|
/* 简要信息 start */
|
|
@include e(brief-info) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/* 简要内容 start */
|
|
&__content {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
}
|
|
&__avatar {
|
|
flex-shrink: 0;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 50%;
|
|
background-color: var(--tn-color-gray--disabled);
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
&__data {
|
|
flex-grow: 1;
|
|
margin-left: 24rpx;
|
|
color: var(--tn-text-color-primary);
|
|
line-height: 1;
|
|
padding-top: 6rpx;
|
|
.title {
|
|
font-size: 30rpx;
|
|
}
|
|
.desc {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: var(--tn-color-gray);
|
|
}
|
|
}
|
|
/* 简要内容 end */
|
|
|
|
/* 操作按钮 start */
|
|
&__operation {
|
|
flex-grow: 0;
|
|
|
|
&--more {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: var(--tn-color-gray-disabled);
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
/* 操作按钮 end */
|
|
}
|
|
/* 简要信息 end */
|
|
|
|
/* 内容 start */
|
|
@include e(container) {
|
|
margin-top: 20rpx;
|
|
}
|
|
@include e(content) {
|
|
/* 内容标签 start */
|
|
&__tags {
|
|
display: flex;
|
|
float: left;
|
|
align-items: center;
|
|
margin-top: 4rpx;
|
|
.tag-item {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 6rpx;
|
|
|
|
margin-right: 16rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
/* 内容标签 end */
|
|
|
|
/* 内容数据 start */
|
|
&__data {
|
|
font-size: 28rpx;
|
|
line-height: 1.8em;
|
|
// display: inline-block;
|
|
color: var(--tn-text-color-primary);
|
|
// 文字两端对齐
|
|
text-align: justify;
|
|
}
|
|
/* 内容数据 end */
|
|
}
|
|
|
|
/* 图片列表 start */
|
|
@include e(images) {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
|
|
@include m(item) {
|
|
/* 一张图片 start */
|
|
@include when(one) {
|
|
width: 70%;
|
|
height: 300rpx;
|
|
border-radius: 15rpx;
|
|
}
|
|
/* 一张图片 end */
|
|
|
|
/* 两张图片 start */
|
|
@include when(two) {
|
|
width: 80%;
|
|
}
|
|
/* 两张图片 end */
|
|
|
|
/* 三张图片 start */
|
|
@include when(three) {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 332rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/* 左边单图 start */
|
|
.image-wrapper-left {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
|
|
.image-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 15rpx;
|
|
}
|
|
}
|
|
/* 左边单图 end */
|
|
/* 右边双图 start */
|
|
.image-wrapper-right {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
margin-left: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.image-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
border-radius: 15rpx;
|
|
|
|
& + .image-container {
|
|
margin-top: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
/* 右边双图 end */
|
|
}
|
|
/* 三张图片 end */
|
|
|
|
/* 四张图片 start */
|
|
@include when(four) {
|
|
width: 80%;
|
|
}
|
|
/* 四张图片 end */
|
|
}
|
|
}
|
|
/* 图片列表 end */
|
|
/* 内容 end */
|
|
|
|
/* 底部信息 start */
|
|
@include e(bottom-info) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
|
|
/* 左边查看数据 start */
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.count-item-data {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
|
|
.count {
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
/* 左边查看数据 end */
|
|
|
|
/* 右边查看用户头像数据 start */
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
/* 右边查看用户头像数据 end */
|
|
|
|
@include when(no-content) {
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
@include e(view-user-count) {
|
|
margin-left: 8rpx;
|
|
font-size: 26rpx;
|
|
color: var(--tn-color-gray);
|
|
}
|
|
/* 底部信息 end */
|
|
}
|