saas_member_mobile/pages/worktable/statistics.vue

<template>
	<view style="height: 128rpx;">
		<view class="statistics" id="statisId">
			<view class="left">
				<img src="@/static/images/icon_gwc@2x.png" alt="">
				<u-badge customStyle="position: absolute;top: 0;right: -10%;" type="error" max="99" :value="33">
				</u-badge>
			</view>
			<view class="right">
				<view class="price_box">
					<view class="price">
						￥2545.99
					</view>
					<view class="yh_price">
						<text class="text_1">优惠金额：</text>
						<text class="price_1">￥100.00</text>
						<u-icon customStyle="font-size:24rpx;font-weight:bold;color:#EB5757;margin-left:14rpx;"
							name="arrow-up"></u-icon>
					</view>
				</view>
				<view class="btn">去结算</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onReady() {
		}
	}
</script>

<style lang="scss" scoped>
	.statistics {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		background-color: #fff;
		box-shadow: 0rpx 1rpx 8rpx 1rpx rgba(0, 0, 0, 0.3);
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 32rpx 20rpx 40rpx;

		&>.left {
			width: 64rpx;
			height: 64rpx;
			position: relative;

			&>img {
				width: 100%;
				height: 100%;
			}
		}

		&>.right {
			display: flex;
			align-items: center;

			&>.price_box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				&>.price {
					align-self: flex-end;
					font-weight: bold;
					color: #EB5757;
					font-size: 32rpx;
				}

				&>.yh_price {
					display: flex;
					align-items: center;

					&>.text_1 {
						color: #828282;
						font-size: 26rpx;
					}

					&>.price_1 {
						font-size: 26rpx;
						color: #EB5757;
					}
				}
			}

			&>.btn {
				margin-left: 24rpx;
				width: 172rpx;
				height: 88rpx;
				border-radius: 184rpx;
				background: #363C4F;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}
</style>