zcb_APP/pages/index/index.vue

<template>
	<view class="content pdx-30">
		<view @click="toPage('/pages/login/index')">
			登录
		</view>
		<view @click="toPage('/pages/login/register')">
			注册
		</view>
		<view @click="toPage('/pages/login/forget')">
			忘记密码
		</view>
		<view class="w h-80 mgt-100" @click="toPage('/pages/index/search')">
			<view class="input flex ai_center jc_between">
				<view>任务标题、用户ID</view>
				<image class="w-40 h-40" src="/static/logo.png" mode="scaleToFill" />
			</view>
		</view>

		<view class="w h-300 mgy-20">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>

		<view class="w h-80 flex jc_between ai_center" @click="toPage('/pages/index/notice')">
			<view class="flex ai_center">
				<image class="w-40 h-40 mgr-30" src="/static/logo.png" mode="scaleToFill" />
				<view>我是公告</view>
			</view>
			<view>2025.1.1</view>
		</view>

		<view class="w flex mgt-20 jc_between text-24">
			<view class="flex fd_c ai_center" v-for="item in menu" :key="item.name" @click="toPage(item.pagePath)">
				<image class="w-60 h-60" :src="item.icon" mode="scaleToFill" />
				<view class="mgt-10">{{ item.name }}</view>
			</view>
		</view>

		<view class="w h-200 bg-444 text-white mgy-20" @click="toPage('/pages/index/newcomerTasks')">新人任务</view>

		<view class="w">
			<view>推荐悬赏</view>
			<view class="w mgt-20">
				<scroll-view scroll-y>
					<view class="flex jc_between pdy-10" v-for="item in 5">
						<image class="w-60 h-60" src="/static/logo.png" mode="scaleToFill" />
						<view class="flex1 mgl-10">
							<view class="flex jc_between mgb-10">
								<view class="flex">
									<view>这是一条悬赏任务</view>
									<view class="flex">
										<view>顶</view>
										<view>快审</view>
										<view>热</view>
										<view>新</view>
									</view>
								</view>
								<view>+3.02元</view>
							</view>
							<view class="flex jc_between">
								<view class="flex">
									<view>671已赚</view>
									<view></view>
									<view>剩余21个</view>
								</view>
								<view>支持设备：苹果</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '首页',
			menu: [
				{ icon: '/static/logo.png', name: '新手入门', pagePath: '/pages/index/gettingStarted' },
				{ icon: '/static/logo.png', name: '热门悬赏', pagePath: '/pages/index/popularBounty' },
				{ icon: '/static/logo.png', name: '最新悬赏', pagePath: '/pages/index/newestBounty' },
				{ icon: '/static/logo.png', name: '急速快审', pagePath: '/pages/index/quickCheck' },
				{ icon: '/static/logo.png', name: '邀请赚钱', pagePath: '/pages/index/inviteEarnMoney' },
			],
			currentNum: 0,
			list6: [
				"https://uviewui.com/swiper/swiper2.png",
				"https://uviewui.com/swiper/swiper3.png",
				"https://uviewui.com/swiper/swiper1.png",
			],

		}
	},
	onLoad() {

	},
	methods: {
		toPage(url) {
			uni.navigateTo({ url });
		}
	},

}
</script>

<style>
.content {
	height: calc(100vh - 120rpx);
	/* background-color: red; */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */

	.input {
		width: 100%;
		height: 80rpx;
		background-color: rgb(233, 233, 233);
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
	}
}

.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	display: flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}
</style>