smart_storage_app/pages/home-page/earningSelect/index.vue

<template>
	<view class="p_container">
		
		<u-navbar :is-back="true" :background="background" :border-bottom="false">
		<!-- <u-navbar :is-back="true" :background="background" :border-bottom="false" :custom-back="toback"> -->
			<view class="slot-wrap">
				<stationDropdow disabled style="width: 100%" ref="dropdow" />
			</view>
		</u-navbar>
		<!-- <zero-loading v-if="loading"></zero-loading> -->

		<!-- <view v-else style="height: calc(100% - 100rpx);"> -->
		<view style="height: calc(100% - 100rpx);">
			<!-- <view class="search">
				<luyj-tree-search :placeholder="$t('homePage.home.revenue')">
				</luyj-tree-search>
			</view> -->
			<view class="p_content">
				<view class="selectContent">
					<view class="p_box selectItem" @click="toUrl(labeArr[0])">
						<view >
							<image :src="labeArr[0].icon" mode="" style="height: 48rpx; width: 48rpx;" class="selectIcon"></image>
						</view>
						<view class="">
							{{ labeArr[0].label}}
						</view>
					</view>
					<view class="p_box selectItem" v-if="inverterFlag === 1" @click="toUrl(labeArr[1])">
						<view >
							<image :src="labeArr[1].icon" mode="" style="height: 48rpx; width: 48rpx;" class="selectIcon"></image>
						</view>
						<view class="">
							{{ labeArr[1].label}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import stationDropdow from "@/components/station-dropdow/index.vue";
	export default {
		components: {
			stationDropdow
		},
		data() {
			return {
				background: {
					backgroundColor: "#0ea17e",
				},
				labeArr: [
					{
						label: this.$t("homePage.home.energyStorageRevenueReport"),
						icon: require('@/static/aidex/images/earningSelect.png'),
						url: '/pages/home-page/earnings/index'
					},
					{
						label: this.$t("homePage.home.pvStorageRevenueReport"),
						icon: require('@/static/aidex/images/earningSelect.png'),
						url: '/pages/home-page/lights/index'
					},
				]
			};
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
			inverterFlag(){
				return this.vuex_inverterFlag;
			}
		},
		methods: {
			toUrl(val) {
				uni.navigateTo({
					url:val.url
				})
			}
		},
	};
</script>


<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;

		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		/deep/ .u-input__input {
			color: #fff !important;
		}
	}
	.selectContent {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
		margin-top: 40rpx;
		.selectItem {
			padding: 30rpx 33rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #666666;
			border-radius: 10rpx;
			.selectIcon {
				height: 48rpx;
				width: 48rpx;
				margin-top: 10rpx;
				margin-right: 32rpx;
			}
		}
	}
</style>