wx-qhb/pages/mine/component/mineMoney.vue

<template>
	<view class="mine-money" id="mine-money" :style="{'height':isTeam?'110px':'66px'}">
		<view class="top" v-if="isTeam">
			<view class="content">
				<image class="money-icon" src='../../../static/mine/308.png' mode=""></image>
				<text>我的保证金</text>
			</view>
			<view class="content">200.00 <text class="right-icon"></text> </view>
		</view>
		<view class="bottom">
			<view class="basis" @click="jumpBalance">
				<view class="num">0.00</view>
				<view class="characters">余额</view>
			</view>
			<view class="basis">
				<view class="num">225</view>
				<view class="characters">我的关注</view>
			</view>
			<view class="basis">
				<view class="num">13</view>
				<view class="characters">我的包裹</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isTeam:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
			}
		},
		methods:{
			jumpBalance(){
				uni.navigateTo({
					url:'/pageC/accountBalance/accountBalance'
				})
			}
		},
		created() {

		}
	}
</script>

<style lang="scss">
	.mine-money{
		height: 110px;
		width: 100%;
		background-color: #3B3D55;
		margin-top: 15px;
		border-radius: 10px;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 14px;
			height: 44px;
			.content{
				display: flex;
				align-items: center;
				margin: 0 10px;
			}
			.money-icon{
				width: 18px;
				height: 18px;
				margin-right: 6px;
			}
			.right-icon{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-image: url('../../../static/mine/309.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
		.bottom{
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			border-radius: 10px;
			height: 66px;
			align-items: center;
			.num{
				font-size: 18px;
				color: #333;
				text-align: center;
				font-weight: 600;
			}
			.characters{
				font-size: 13px;
				color: #333;
				text-align: center;

			}
		}
	}
</style>