css记录

1、文本超出用省略号隐藏

/* 单行文本溢出隐藏 */
.ui-ellipsis {
	overflow: hidden; 
	white-space: nowrap; 
	text-overflow: ellipsis;
}
/* 多行文本溢出隐藏 */
.ui-ellipsis {
    word-break: break-all; // 中英文、数字自然换行
	overflow: hidden;
	text-overflow: ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

2、折叠面板动画

 效果如下

折叠面板

 

<!--折叠控制按钮-->
<view class="info-title">
    <text class="title-label">基本信息</text>
    <view class="fold-btn" @click="fold">
        <text>{{ foldStatus == 'open' ? '收起' : '展开' }}</text>
	    <image class="fold-btn-icon" :class="rotation" src="/static/UI/order/bottom.png"/>
    </view>
</view>
<view class="info-detail">
	<view class="info-row">
		<view class="info-item">
			<text class="info-label">门店</text>
			<text class="info-value">黄丽丽</text>
		</view>
		<view class="info-item">
			<text class="info-label">日期</text>
			<text class="info-value">2023-03-01</text>
		</view>
	</view>
	<view class="info-row">
		<view class="info-item">
			<text class="info-label">小老板</text>
			<text class="info-value">黄丽丽</text>
		</view>
		<view class="info-item">
			<text class="info-label">电话</text>
			<text class="info-value">18888888888</text>
		</view>
	</view>
	<view class="info-row">
		<view class="info-item">
			<text class="info-label">仓库</text>
			<text class="info-value">总仓2</text>
		</view>
	</view>
	<view class="fold-info" :class="foldStatus == 'open' ? 'info-open' : ''">
		<view class="info-row">
			<view class="info-item">
				<text class="info-label">销售金额</text>
				<text class="info-value">￥188</text>
			</view>
			<view class="info-item">
				<text class="info-label">退货金额</text>
				<text class="info-value">￥0</text>
			</view>
		</view>
		<view class="info-row">
			<view class="info-item">
				<text class="info-label">促销金额</text>
				<text class="info-value">￥0</text>
			</view>
		    <view class="info-item">
				<text class="info-label">合计金额</text>
				<text class="info-value">￥188</text>
			</view>
		</view>
	</view>
</view>

 控制代码

// 折叠切换
fold() {
	if (this.foldStatus == 'open') {
		this.rotation = 'transition-img180'
		this.foldStatus = 'close'
	} else {
		this.rotation = 'transition-img0'
		this.foldStatus = 'open'
	}
}

css样式 

.fold-btn {
	font-size: 16px;
	font-weight: 400;
	color: #277EFF;
	display: flex;
	align-items: center;
	.fold-btn-icon {
		margin-left: 10upx;
		width: 17px;
		height: 16px;
	}
	.transition-img0 {
		transform: rotate(180deg);
		transition: linear .3s;
	}
	.transition-img180 {
		transform: rotate(0deg);
		transition: linear .3s;
	}
}
.info-row {
	margin-bottom: 15upx;
	display: flex;
	.info-item {
		width: 50%;
		font-size: 14px;
		font-weight: 400;
		.info-label {
			color: #646772;
			margin-right: 10upx;
		}
		.info-value {
			color: #002C55;
		}
	}
}
.fold-info {
	max-height: 0;
	transition: max-height .5s;
	overflow: hidden;
}
.info-open {
	max-height: 100px;
}