uni-app卡片组件

青旅半醒 2022-10-08 05:48 129阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		
    		<view v-if="mode==='base'" class="cardlist">
    			<view class="cardlist-image">
    				<image src="../../static/logo.png" mode="widthFix"></image>
    			</view>
    			<view class="cardlist-content">
    				<view class="cardlist-content-title">
    					<text>uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架</text>
    				</view>
    				<view class="cardlist-content-desc">
    					<view class="cardlist-content-desc-label">
    						<view class="cardlist-content-desc-label-item">
    							前端
    						</view>
    						<view class="cardlist-content-desc-label-item">
    							开发
    						</view>
    					</view>
    					<view class="cardlist-content-desc-browse">
    						120浏览
    					</view>
    				</view>
    			</view>
    		</view>
    
    		
    		<view v-if="mode==='column'" class="cardlist mode-column">
    			<view class="cardlist-content">
    				<view class="cardlist-content-title">
    					<text>uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架</text>
    				</view>
    				<view class="cardlist-image">
    					<view class="cardlist-image-item" v-for="item in 3" :key="item">
    						<image src="../../static/logo.png" mode="aspectFill"></image>
    					</view>
    				</view>
    				<view class="cardlist-content-desc">
    					<view class="cardlist-content-desc-label">
    						<view class="cardlist-content-desc-label-item">
    							前端
    						</view>
    						<view class="cardlist-content-desc-label-item">
    							开发
    						</view>
    					</view>
    					<view class="cardlist-content-desc-browse">
    						120浏览
    					</view>
    				</view>
    			</view>
    		</view>
    
    		
    		<view v-if="mode==='image'" class="cardlist mode-image">
    			<view class="cardlist-image">
    				<image src="../../static/logo.png" mode="aspectFill"></image>
    			</view>
    			<view class="cardlist-content">
    				<view class="cardlist-content-title">
    					<text>uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架uni-app开发框架</text>
    				</view>
    				<view class="cardlist-content-desc">
    					<view class="cardlist-content-desc-label">
    						<view class="cardlist-content-desc-label-item">
    							前端
    						</view>
    						<view class="cardlist-content-desc-label-item">
    							开发
    						</view>
    					</view>
    					<view class="cardlist-content-desc-browse">
    						120浏览
    					</view>
    				</view>
    			</view>
    		</view>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		name: "card-list",
    		props: {
    			mode: {
    				type: String,
    				default: 'base'
    			}
    		},
    		data() {
    			return {
    
    			};
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.cardlist {
    		display: flex;
    		padding: 10px;
    		margin: 10px;
    		border-radius: 5px;
    		// 卡片阴影
    		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
    
    		.cardlist-image {
    			// 图片不被挤压
    			flex-shrink: 0;
    			width: 60px;
    			height: 60px;
    			border-radius: 5px;
    
    			image {
    				width: 100%;
    				height: 100%;
    			}
    		}
    
    		.cardlist-content {
    			display: flex;
    			flex-direction: column;
    			justify-content: space-between;
    			padding-left: 10px;
    			// 不指定宽度就是内容的宽度
    			width: 100%;
    
    			.cardlist-content-title {
    				font-size: 14px;
    				color: #333333;
    				font-weight: 400;
    
    				// 文字溢出隐藏
    				text {
    					overflow: hidden;
    					text-overflow: ellipsis;
    					display: -webkit-box;
    					-webkit-line-clamp: 2;
    					-webkit-box-orient: vertical;
    				}
    			}
    
    			.cardlist-content-desc {
    				display: flex;
    				justify-content: space-between;
    				font-size: 12px;
    
    				.cardlist-content-desc-label {
    					display: flex;
    
    					.cardlist-content-desc-label-item {
    						padding: 0 5px;
    						border-radius: 15px;
    						background-color: $mk-base-color;
    						color: #FFFFFF;
    					}
    				}
    
    				.cardlist-content-desc-browse {
    					color: #999999;
    				}
    			}
    		}
    
    		// 同级多图模式样式
    		&.mode-column {
    			.cardlist-content {
    				width: 100%;
    				padding-left: 0;
    
    				.cardlist-image {
    					// 图片不被挤压
    					flex-shrink: 0;
    					display: flex;
    					margin-top: 10px;
    					width: 100%;
    					height: 70px;
    					margin-bottom: 10px;
    
    					.cardlist-image-item {
    						margin-left: 10px;
    						width: 100%;
    						border-radius: 5px;
    						overflow: hidden;
    
    						// 第一个元素不要左外填充
    						&:first-child {
    							margin-left: 0;
    						}
    
    						image {
    							width: 100%;
    							height: 100%;
    						}
    					}
    				}
    
    			}
    		}
    
    		// 同级大图模式样式
    		&.mode-image {
    			flex-direction: column;
    
    			.cardlist-image {
    				width: 100%;
    				height: 100px;
    
    				image {
    					border-radius: 5px;
    				}
    			}
    
    			.cardlist-content {
    				padding-left: 0;
    				margin-top: 10px;
    
    				.cardlist-content-desc {
    					display: flex;
    					align-items: center;
    					margin-top: 10px;
    				}
    			}
    		}
    	}
    </style>

使用

<card-list mode='base'></card-list>
    <card-list mode='column'></card-list>
    <card-list mode='image'></card-list>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70]: /images/20221005/93230190c31b4dd7b80af8c269ea7d79.png