first commit

components/tabbar.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="tabbar">
+		<view class="tabbar_view" @click="changeTabbar(0)">
+			<image style="width: 50rpx;height: 50rpx;" mode="widthFix"
+				:src="`/static/tabbar/tabbar${tabbarCuur == 0 ? '1s' : '1'}.png`"></image>
+			<view :style="{color:tabbarCuur != 0 ?'#333' : '#1F70B7'}">我的</view>
+		</view>
+		<view class="tabbar_view tabbar_active" :style="{backgroundColor:tabbarCuur == 1 ?'#1F70B7' : '#CCC'}"
+			@click="changeTabbar(1)">
+			<image style="width: 60rpx;height: 66rpx;" src="../static/tabbar/tabbar2.png"></image>
+			<view>首页</view>
+		</view>
+		<view class="tabbar_view" @click="changeTabbar(2)">
+			<image style="width: 50rpx;height: 50rpx;" mode="widthFix"
+				:src="`/static/tabbar/tabbar${tabbarCuur == 2 ? '2s' : '3'}.png`"></image>
+			<view :style="{color:tabbarCuur != 2 ?'#333' : '#1F70B7'}">公告</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tabbar",
+		props: {
+			tabbarCuurent: {
+				type: Number,
+				default: 1
+			},
+		},
+		watch: {
+			tabbarCuurent(e) {
+				this.tabbarCuur = e
+			}
+		},
+		data() {
+			return {
+				tabbarCuur: 1
+			};
+		},
+		methods: {
+			changeTabbar(e) {
+				this.tabbarCuur = e
+				this.$emit('change', e)
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		padding-bottom: 120rpx;
+	}
+</style>
+
+<style lang="scss" scoped>
+	view {
+		box-sizing: border-box;
+	}
+
+	.tabbar {
+		width: 750rpx;
+		height: 136rpx;
+		position: fixed;
+		bottom: 0;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 120rpx;
+		box-shadow: 0px 2rpx 11rpx 2rpx rgba(190, 190, 190, 0.35);
+
+		&_view {
+			// width: 140rpx;
+			// height: 140rpx;
+			// margin-top: -35rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			font-size: 28rpx;
+
+			image {
+				margin-bottom: 5rpx;
+			}
+		}
+
+		&_active {
+			width: 140rpx;
+			height: 140rpx;
+			background-color: #1F70B7;
+			border-radius: 50%;
+			color: #fff;
+			margin-top: -35rpx;
+		}
+	}
+</style>