first commit

components/tabbar/tabbar.vue

@@ -0,0 +1,95 @@
+<template>
+	<view class="tabbar_pages p30">
+		<view class="tabbar_pages_view" v-for="(item, index) in list" :key="index" @click="toLink(item.pagePath)">
+			<view>
+				<view>
+					<image mode="widthFix" :src="path == item.pagePath ? item.icon : item.icon_select"></image>
+				</view>
+				<view :style="{ color: path == item.pagePath ? '#4874E5' : '' }">{{ item.text }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const data = defineProps({
+	path: {
+		type: String,
+		default: ''
+	}
+});
+
+let list = ref([
+	{
+		pagePath: '/pages/index/index',
+		text: '首页',
+		icon_select: '/static/tabbar/home.png',
+		icon: '/static/tabbar/homes.png',
+		type: 0
+	},
+	{
+		pagePath: '/pages/market/market',
+		text: '公告',
+		icon_select: '/static/tabbar/market.png',
+		icon: '/static/tabbar/markets.png',
+		type: 0
+	},
+	{
+		pagePath: '/pages/mine/mine',
+		text: '我的',
+		icon_select: '/static/tabbar/mine.png',
+		icon: '/static/tabbar/mines.png',
+		type: 0
+	}
+]);
+
+const toLink = (e) => {
+	uni.vibrateShort();
+	if (data.path == e) return true;
+	uni.switchTab({
+		url: e
+	});
+};
+</script>
+
+<style lang="scss">
+.tabbar_pages {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 750rpx;
+	height: 120rpx;
+	@include flex($space: space-between);
+	background-color: #fff;
+	box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
+	border-radius: 15rpx 15rpx 0rpx 0rpx;
+	z-index: 99;
+	padding: 20rpx 115rpx;
+	&_view {
+		width: 100%;
+		view {
+			font-size: 24rpx;
+			color: #999999;
+			@include flex($direction: column, $space: space-between);
+			image {
+				width: 44rpx;
+				height: 44rpx;
+				margin-bottom: 15rpx;
+			}
+		}
+	}
+	
+	&_view:nth-child(1){
+		view{
+			align-items: flex-start;
+		}
+	}
+	&_view:nth-child(3){
+		view{
+			align-items: flex-end;
+		}
+	}
+}
+</style>