Vue3.0概要小卡片组件

组件

代码语言：javascript复制

<template>
	<div id="card" :style="cardStyle">
		<div class="main">
			<img class="img" :src="image" :style="imgStyle"/>
			<div class="text">
				<label class="title" :style="titleStyle">{{title}}</label>
				<label class="detail">{{detail}}</label>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Card",
		props: {
			image: {
				type: String,
				default: "https://file.zhtsu.cn/light-radius.png"
			},
			title: {
				type: String,
				default: "标题"
			},
			detail: {
				type: String,
				default: "这里是详细信息"
			},
			height: {
				type: String,
				default: "100"
			},
			color: {
				type: String,
				default: "#456D8A"
			}
		},
		data() {
			return {
				ht: this.height,
				cardStyle: "",
				titleColor: this.color,
				titleStyle: "",
				imgStyle: ""
			}
		},
		mounted() {
			this.cardStyle = `width: ${3 * this.ht}px; height: ${this.ht}px;`
			this.imgStyle = `width: ${this.ht - 20}px; height: ${this.ht - 20}px;`
			this.titleStyle = `color: ${this.titleColor}`
		}
	};
</script>

<style scoped>
	.main {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: white;
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
		border-radius: 10px;
		margin: 10px;
	}
	.main:hover {
		background: rgba(255, 255, 255, 0.65);
		transform: scale(102%, 102%);
	}
	.img {
		position: relative;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 10px;
		float: left;
	}
	.text {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	.title {
		display: block;
		font-size: 24px;
		color: #456D8A;
		margin: 5px;
		font-weight: bold;
		text-shadow: 1px 1px 1px grey;
	}
	.detail {
		display: block;
		font-size: 15px;
		display: block;
		margin: 5px;
		color: #7b7b7b;
	}
</style>

可选参数

参数名	说明
image	图片的在线链接。不支持本地链接
height	卡片的高度。宽度总是为高度的 3 倍
color	卡片右侧上方标题字体颜色
title	卡片右侧上方标题文本
detail	卡片右侧下方详细信息文本

效果图

height image title

0 人点赞