zhuoxin-user-uniapp/components/fxyk-card-news/fxyk-card-news.vue

<template>
	<u-card :show-head="false" :border="false" class="main-style">
		<view slot="body" class="body-content">
			<view class="d-flex u-padding-top-32">
				<view class="red-dot u-margin-top-8"></view>
				<view class="word-one">【{{ info.title }}】</view> 
				<view>
					<view class="word-one">{{ info.data }}</view>
					<view class="word-two">{{ info.level }}</view>
				</view>
			</view>
		</view>
		<view slot="foot" class="foot-content d-flex a-center j-end">查看详情 >></view>
	</u-card>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.red-dot {
		width: 20rpx;
		height: 20rpx;
		background: #FF0011;
		border-radius: 50%;
	}
	.word-one {
		font-size: 32rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 33rpx;
		color: #000000;
	}
	.word-two {
		font-size: 28rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 27rpx;
		color: #FF0011;
		margin-top: 25rpx;
	}
	.main-style {
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 13rpx rgba(0, 0, 0, 0.16);
		border-radius: 17rpx;
		.body-content {
			height: 130rpx;
		}
		.foot-content {
			font-size: 30rpx;
			font-family: SimSun;
			font-weight: 400;
			color: #000000;
		}
	}
</style>