leromro-mini/pages/index.vue

<template>
	<view style="padding-top: 200rpx; width: 100vw; height: 100vh; overflow: hidden">
		<view style="width: 100%; height: 100%; overflow:scroll">
			<view class="Wrapper">
				<image src="/static/img/Location.png" class="Wrapper-img" />
				<span class="Wrapper-content">重庆</span>
				<vie class="input-container">
					<up-input v-model="value" @click.native="goToDetail" placeholder="请输入内容" prefixIcon="search"
						:customStyle="inputStyle"></up-input>
				</vie>
				<image src="/static/Icon - 消息通知.png" class="Wrapper-img" />
			</view>

			<!-- 轮播图片 -->
			<view class="custom-swiper">
				<up-swiper :list="list3" indicator indicatorMode="line" circular></up-swiper>
			</view>

			<!-- 服务选择 -->
			<Client></Client>

			<!-- 瀑布流 -->
			<volunteerSide></volunteerSide>

			<view v-if="userType == '2'" class="serve-monthly-ranking">
				<view class="font-title index-title">月度排名</view>
				<List :data="data" @refresh="getList" v-if="data.length > 0" :type="'ranking'" />
				<view v-else class="empty-null">
					<img src="/static/empty/订单为空.png" alt="">
				</view>
				<!-- <view class="serve-title index-title">本月热门服务排名</view> -->

			</view>

		</view>
	</view>


</template>

<script setup>
import {
	ref,
		onMounted
	} from 'vue';
	import {
		Client
	} from "@/pages/Client/new_file.vue"
	import volunteerSide from "@/pages/Volunteerside/Side_index.vue"
	import List from '@/pages_classify/components/orderList/index.vue';

	const value = ref(''); //搜索
	const userType = uni.getStorageSync('userType') //读取本地存储

	// 用户/志愿者 识别标识
	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储

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


	const inputStyle = { //input輸入框樣式設置
		borderRadius: '140rpx',
		border: '1rpx solid #ccc',
		height: '70rpx',
		paddingLeft: '30rpx',
		width: '540rpx'
	}

	const data = ref([{

	}]);
</script>

<style scoped>
	.Wrapper {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.Wrapper-img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
	}


	.Wrapper-content {
		color: rgba(16, 16, 16, 1);
		font-size: 25rpx;
		font-family: PingFangSC-regular;
		line-height: 20rpx;
	}

	.custom-swiper {
		width: 710rpx;
		height: 100rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.index-title {
		padding: 0 12px 12px;
		margin-bottom: 16px;
	}

	.index-title::before {
		content: ' ';
		width: 5px;
		height: 15px;
		background: rgba(255, 87, 4, 1);
		display: inline-block;
		margin-right: 4px;
		position: relative;
		top: 1px;
	}

	.serve-monthly-ranking {
		margin-bottom: 16px;

	}
</style>