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>
	</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"
	
	
	
	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'
	}




</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;
	}

</style>