星油企业版更新

Financial/components/seleBar.vue

@@ -0,0 +1,88 @@
+<template>
+	<view>
+		<view :style="{backgroundColor:background?background:''}" class="sele_Bar mar">
+			<view :style="{transform:`translateX(calc(${barIndex}*100%))`,width:`calc((100% - 20rpx) / ${seleBarData.length})`,backgroundColor:moveBackground?moveBackground:''}" class="move_item"></view>
+			<view v-for="(item,index) in seleBarData" @tap="seleBarFn(item,index)" :style="{color:barIndex==index? 'white' : ''}"
+				class="sele_Bar_item">
+				{{item.lable}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "seleBar",
+		props: {
+			moveBackground:{
+				type:String,
+				default:''
+			},
+			seleBarData: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			}
+		},
+		created() {
+			console.log('%c 组件参数↓', 'color:red;font-size:50px')
+			console.log(this.seleBarData)
+		},
+		onLoad() {
+
+		},
+		data() {
+			return {
+				barIndex:0
+			};
+		},
+		methods:{
+			seleBarFn(item,index) {
+				this.barIndex = index
+				this.$emit('seleBarFn',item,index)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.move_item {
+		position: absolute;
+		left: 10rpx;
+		/* width: calc((100% - 20rpx) / 3); */
+		height: 60rpx;
+		background: #2866FF;
+		border-radius: 10rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #999999;
+		z-index: 0;
+		transition: all .3s;
+	}
+	.sele_Bar_item {
+		flex: 1;
+		height: 60rpx;
+		border-radius: 10rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #999999;
+		z-index: 1;
+		transition: color .4s;
+	}
+
+	.sele_Bar {
+		/* background-color: #18B566; */
+		/* margin: 31rpx 40rpx; */
+		padding: 10rpx;
+		display: flex;
+		position: relative;
+		background-color: #FFFFFF;
+		border-radius: 10px;
+		margin: auto;
+		margin-top: 20rpx;
+		width:  calc(100% - 54rpx );
+	}
+</style>