leromro-mini/pages/index.vue

<template>
	<view class="main-content ">
		<view class="home-banner">
			<view class="home-banner-left">
				<img src="/static/serverImg/home/address.png" alt=""
					style="width: 41.67rpx;height:  41.67rpx;margin-right: 8rpx;">
				<text>{{ data.address }}</text>
			</view>
			<view>
				<img src="/static/serverImg/home/message.png" alt="" style="width: 50rpx;height: 50rpx;">
			</view>
		</view>
		<view class="home-main">
			<view class="custom-swiper">
				<up-swiper :list="list3" indicator indicatorMode="line" circular></up-swiper>
			</view>
		</view>

		<view class="home-grid">
			<Client />
		</view>

		<view class="home-ranking">
			<volunteerSide v-if="userType == 1"></volunteerSide>
			<RankingList v-if="userType === 2"/>
		</view>


	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";
import RankingList from '@/pages/common/rankingList/index.vue';
import volunteerSide from "@/pages/Volunteerside/Side_index.vue"

import {
	Client
} from "@/pages/Client/new_file.vue"
const data = reactive({
	address: '北京市朝阳区',
	queryValue: ''
})
const userType = uni.getStorageSync('userType') //读取本地存储

const list3 = ref([
	'/static/img/68c51cda626f732e5a6a782e245ac255.jpeg',
	'/static/img/78f89f319f760ba84a5b86916612a99d.jpeg',
	'/static/img/e88c34398a054556e59659f4b7b83e8e.jpeg',
]);

</script>

<style scoped lang="scss">
.main-content {
	.home-banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 2.08rpx 4.17rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx 16rpx;
	}

	.home-banner-left {
		display: flex;
		align-items: center;

	}

	.home-main {
		padding: 12px 16px;

		.custom-swiper {}

		.home-grid {
			margin-bottom: 32px;
		}

	}

	.home-ranking {
		padding: 12px 16px;
	}
}
</style>