From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-card/u-card.vue |  299 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 299 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-card/u-card.vue b/uview-ui/components/u-card/u-card.vue
new file mode 100644
index 0000000..a3cb2aa
--- /dev/null
+++ b/uview-ui/components/u-card/u-card.vue
@@ -0,0 +1,299 @@
+<template>
+	<view
+		class="u-card"
+		@tap.stop="click"
+		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
+		:style="{
+			borderRadius: borderRadius + 'rpx',
+			margin: margin,
+			boxShadow: boxShadow
+		}"
+	>
+		<view
+			v-if="showHead"
+			class="u-card__head"
+			:style="[{padding: padding + 'rpx'}, headStyle]"
+			:class="{
+				'u-border-bottom': headBorderBottom
+			}"
+			@tap="headClick"
+		>
+			<view v-if="!$slots.head" class="u-flex u-row-between">
+				<view class="u-card__head--left u-flex u-line-1" v-if="title">
+					<image
+						:src="thumb"
+						class="u-card__head--left__thumb"
+						mode="aspectfull"
+						v-if="thumb"
+						:style="{ 
+							height: thumbWidth + 'rpx', 
+							width: thumbWidth + 'rpx', 
+							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
+						}"
+					></image>
+					<text
+						class="u-card__head--left__title u-line-1"
+						:style="{
+							fontSize: titleSize + 'rpx',
+							color: titleColor
+						}"
+					>
+						{{ title }}
+					</text>
+				</view>
+				<view class="u-card__head--right u-line-1" v-if="subTitle">
+					<text
+						class="u-card__head__title__text"
+						:style="{
+							fontSize: subTitleSize + 'rpx',
+							color: subTitleColor
+						}"
+					>
+						{{ subTitle }}
+					</text>
+				</view>
+			</view>
+			<slot name="head" v-else />
+		</view>
+		<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view>
+		<view
+			v-if="showFoot"
+			class="u-card__foot"
+			 @tap="footClick"
+			:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
+			:class="{
+				'u-border-top': footBorderTop
+			}"
+		>
+			<slot name="foot" />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * card 鍗＄墖
+ * @description 鍗＄墖缁勪欢涓�鑸敤浜庡涓垪琛ㄦ潯鐩紝涓旈鏍肩粺涓�鐨勫満鏅�
+ * @tutorial https://www.uviewui.com/components/card.html
+ * @property {Boolean} full 鍗＄墖涓庡睆骞曚袱渚ф槸鍚︾暀绌洪殭锛堥粯璁alse锛�
+ * @property {String} title 澶撮儴宸﹁竟鐨勬爣棰�
+ * @property {String} title-color 鏍囬棰滆壊锛堥粯璁�#303133锛�
+ * @property {String | Number} title-size 鏍囬瀛椾綋澶у皬锛屽崟浣峳px锛堥粯璁�30锛�
+ * @property {String} sub-title 澶撮儴鍙宠竟鐨勫壇鏍囬
+ * @property {String} sub-title-color 鍓爣棰橀鑹诧紙榛樿#909399锛�
+ * @property {String | Number} sub-title-size 鍓爣棰樺瓧浣撳ぇ灏忥紙榛樿26锛�
+ * @property {Boolean} border 鏄惁鏄剧ず杈规锛堥粯璁rue锛�
+ * @property {String | Number} index 鐢ㄤ簬鏍囪瘑鐐瑰嚮浜嗙鍑犱釜鍗＄墖
+ * @property {String} box-shadow 鍗＄墖澶栧洿闃村奖锛屽瓧绗︿覆褰㈠紡锛堥粯璁one锛�
+ * @property {String} margin 鍗＄墖涓庡睆骞曚袱杈瑰拰涓婁笅鍏冪礌鐨勯棿璺濓紝闇�甯﹀崟浣嶏紝濡�"30rpx 20rpx"锛堥粯璁�30rpx锛�
+ * @property {String | Number} border-radius 鍗＄墖鏁翠綋鐨勫渾瑙掑�硷紝鍗曚綅rpx锛堥粯璁�16锛�
+ * @property {Object} head-style 澶撮儴鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+ * @property {Object} body-style 涓儴鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+ * @property {Object} foot-style 搴曢儴鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+ * @property {Boolean} head-border-bottom 鏄惁鏄剧ず澶撮儴鐨勪笅杈规锛堥粯璁rue锛�
+ * @property {Boolean} foot-border-top 鏄惁鏄剧ず搴曢儴鐨勪笂杈规锛堥粯璁rue锛�
+ * @property {Boolean} show-head 鏄惁鏄剧ず澶撮儴锛堥粯璁rue锛�
+ * @property {Boolean} show-head 鏄惁鏄剧ず灏鹃儴锛堥粯璁rue锛�
+ * @property {String} thumb 缂╃暐鍥捐矾寰勶紝濡傝缃皢鏄剧ず鍦ㄦ爣棰樼殑宸﹁竟锛屼笉寤鸿浣跨敤鐩稿璺緞
+ * @property {String | Number} thumb-width 缂╃暐鍥剧殑瀹藉害锛岄珮绛変簬瀹斤紝鍗曚綅rpx锛堥粯璁�60锛�
+ * @property {Boolean} thumb-circle 缂╃暐鍥炬槸鍚︿负鍦嗗舰锛堥粯璁alse锛�
+ * @event {Function} click 鏁翠釜鍗＄墖浠绘剰浣嶇疆琚偣鍑绘椂瑙﹀彂
+ * @event {Function} head-click 鍗＄墖澶撮儴琚偣鍑绘椂瑙﹀彂
+ * @event {Function} body-click 鍗＄墖涓讳綋閮ㄥ垎琚偣鍑绘椂瑙﹀彂
+ * @event {Function} foot-click 鍗＄墖搴曢儴閮ㄥ垎琚偣鍑绘椂瑙﹀彂
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+export default {
+	name: 'u-card',
+	props: {
+		// 涓庡睆骞曚袱渚ф槸鍚︾暀绌洪殭
+		full: {
+			type: Boolean,
+			default: false
+		},
+		// 鏍囬
+		title: {
+			type: String,
+			default: ''
+		},
+		// 鏍囬棰滆壊
+		titleColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 鏍囬瀛椾綋澶у皬锛屽崟浣峳px
+		titleSize: {
+			type: [Number, String],
+			default: '30'
+		},
+		// 鍓爣棰�
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		// 鍓爣棰橀鑹�
+		subTitleColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 鍓爣棰樺瓧浣撳ぇ灏忥紝鍗曚綅rpx
+		subTitleSize: {
+			type: [Number, String],
+			default: '26'
+		},
+		// 鏄惁鏄剧ず澶栭儴杈规锛屽彧瀵筬ull=false鏃舵湁鏁�(鍗＄墖涓庤竟妗嗘湁绌洪殭鏃�)
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 鐢ㄤ簬鏍囪瘑鐐瑰嚮浜嗙鍑犱釜
+		index: {
+			type: [Number, String, Object],
+			default: ''
+		},
+		// 鐢ㄤ簬闅斿紑涓婁笅宸﹀彸鐨勮竟璺濓紝甯﹀崟浣嶇殑鍐欐硶锛屽锛�"30rpx 30rpx"锛�"20rpx 20rpx 30rpx 30rpx"
+		margin: {
+			type: String,
+			default: '30rpx'
+		},
+		// card鍗＄墖鐨勫渾瑙�
+		borderRadius: {
+			type: [Number, String],
+			default: '16'
+		},
+		// 澶撮儴鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+		headStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 涓讳綋鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+		bodyStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 搴曢儴鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+		footStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 澶撮儴鏄惁涓嬭竟妗�
+		headBorderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 搴曢儴鏄惁鏈変笂杈规
+		footBorderTop: {
+			type: Boolean,
+			default: true
+		},
+		// 鏍囬宸﹁竟鐨勭缉鐣ュ浘
+		thumb: {
+			type: String,
+			default: ''
+		},
+		// 缂╃暐鍥惧楂橈紝鍗曚綅rpx
+		thumbWidth: {
+			type: [String, Number],
+			default: '60'
+		},
+		// 缂╃暐鍥炬槸鍚︿负鍦嗗舰
+		thumbCircle: {
+			type: Boolean,
+			default: false
+		},
+		// 缁檋ead锛宐ody锛宖oot鐨勫唴杈硅窛
+		padding: {
+			type: [String, Number],
+			default: '30'
+		},
+		// 鏄惁鏄剧ず澶撮儴
+		showHead: {
+			type: Boolean,
+			default: true
+		},
+		// 鏄惁鏄剧ず灏鹃儴
+		showFoot: {
+			type: Boolean,
+			default: true
+		},
+		// 鍗＄墖澶栧洿闃村奖锛屽瓧绗︿覆褰㈠紡
+		boxShadow: {
+			type: String,
+			default: 'none'
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		},
+		headClick() {
+			this.$emit('head-click', this.index);
+		},
+		bodyClick() {
+			this.$emit('body-click', this.index);
+		},
+		footClick() {
+			this.$emit('foot-click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	
+	&-full {
+		// 濡傛灉鏄笌灞忓箷涔嬮棿涓嶇暀绌洪殭锛屽簲璇ヨ缃乏鍙宠竟璺濅负0
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100%;
+	}
+	
+	&--border:after {
+		border-radius: 16rpx;
+	}
+
+	&__head {
+		&--left {
+			color: $u-main-color;
+			
+			&__thumb {
+				margin-right: 16rpx;
+			}
+			
+			&__title {
+				max-width: 400rpx;
+			}
+		}
+
+		&--right {
+			color: $u-tips-color;
+			margin-left: 6rpx;
+		}
+	}
+
+	&__body {
+		color: $u-content-color;
+	}
+
+	&__foot {
+		color: $u-tips-color;
+	}
+}
+</style>

--
Gitblit v1.9.3