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 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>
	</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 './order/list/index.vue';
	
	const value = ref(''); //搜索


	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;
	}
	.index-title::before {
		content: ' ';
    width: 5px;
    height: 15px;
    background: rgba(255, 87, 4, 1);
    display: inline-block;
    margin-right: 4px;
	position: relative;
    top: 1px;
	}
</style>