junzitang/pagesT/components/CartFloat.vue

<template>
	<view class="cart-float">
		<view class="clearfix cart-float-in car-f-bg" @click="goPage('/pages/cart/cart', 'switchTab')">
			<text class="float_left ibonfont ibongouwuche"></text>
			<text class="float_left line"></text>
			<text class="float_right">¥{{ cartPrice }}</text>
			<text class="cart-num-text car-f-bg" v-if="cartNum > 0">{{ cartNum }}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	computed: {
		cartPrice() {
			return this.$store.state.cartPrice || 0;
		},
		cartNum() {
			return this.$store.state.cartNum;
		}
	}
};
</script>

<style lang="scss">
.cart-float {
	color: #fff;
	position: fixed;
	left: 50upx;
	bottom: 50upx;
	.cart-float-in {
		padding: 0 24rpx;
		height: 58rpx;
		line-height: 58rpx;
		background: linear-gradient(136deg, #FD9D00 0%, #FF846C 100%);
		border-radius: 36rpx;
		text {
			font-size: 20upx;
		}
		.ibonfont {
			font-size: 36rpx;
		}
		.line{
			display: block;
			width: 2rpx;
			height: 32rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			opacity: 0.6;
			margin: 13rpx 12rpx;
		}
		.cart-num-text {
			position: absolute;
			display: block;
			min-width: 28upx;
			height: 30upx;
			text-align: center;
			background: #fff;
			line-height: 28upx;
			border-radius: 16rpx;
			left: 26upx;
			top: -23upx;
			font-size: 18upx;
			color: #ffffff;
			border: 2rpx solid #ffffff;
			padding: 0 4rpx;
		}
	}
}
</style>