FastBee/APP/pagesA/home/device/drag/components/captionText.vue

<template>
	<view class="caption-text"
		:style="{ 'background-color': backColor,'marginTop':marginTop+'px','marginBottom':marginBottom+'px' }">
		<view class="text" :style="{'textAlign':positions}">
			<view class="title">
				<span
					:style="{'lineHeight':wordHeight+'px','fontSize':wordSize+'px','fontWeight':wordWeight,'color':wordColor}">{{name}}</span>
			</view>
			<view class="description">
				<span
					:style="{'fontSize':descriptionSize+'px','fontWeight':descriptionWeight,'color':descriptionColor}">{{description}}</span>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "captionText",
		props: {
			name: {
				type: String,
				default: '标题文字'
			},
			description: {
				type: String,
				default: ""
			},
			wordSize: {
				type: Number,
				default: 16
			},
			descriptionSize: {
				type: Number,
				default: 12
			},
			wordWeight: {
				type: Number,
				default: 400
			},
			descriptionWeight: {
				type: Number,
				default: 200
			},
			positions: {
				type: String,
				default: "left"
			},
			wordColor: {
				type: String,
				default: 'rgba(50, 50, 51, 10)'
			},
			descriptionColor: {
				type: String,
				default: 'rgba(150, 151, 153, 10)'
			},
			backColor: {
				type: String,
				default: 'rgba(255, 255, 255, 10)'
			},
			wordHeight: {
				type: Number,
				default: 24
			},
			marginTop: {
				type: Number,
				default: 0
			},
			marginBottom: {
				type: Number,
				default: 0
			},


		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.caption-text {
		width: 100%;

		.text {
			//height: 100%;
			padding: 12rpx;

			.title {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
			}

			.description {
				margin-top: 8rpx;
			}
		}
	}
</style>