phone_uni/pages/index/index.vue

<template>
	<view class="content">
		<!-- <img class="top_image_bg" :src="mine_bg1" /> -->
		<custom-layout ref="layout" :showBottom="true" :back="{show:false,logoShow:true}" v-model="dataList"
			@layoutquery="onQueryList" @scroll="onScroll">
			<template #navBarLeft>
				<text class="ml10 nav_bar_title">专属机壳 秀出好心情</text>
			</template>
			<template #content>
				<!-- 头部样式 -->
				<view class="top_card mt10">
					<view class="top_card_l">
						<view class="top_card_l_t">
							<view class="top_card_l_t_l">
								<image class="l_t_l_icon" mode="aspectFit" :src="qing"></image>
								<text class="l_t_l_text">智能小印</text>
							</view>
							<view class="top_card_l_t_r"></view>
						</view>
						<view class="top_card_l_b">
							<up-icon custom-prefix="iconfont" name="icon-icon_aifilter" size="30"></up-icon>
							<view class="top_card_l_b_c">
								AI漫画风
							</view>
							<view class="l_b_button">
								一键生成
							</view>
						</view>
					</view>
					<view class="top_card_r">
						<view class="top_card_r_t">
							<view class="">
								<up-icon custom-prefix="iconfont" name="icon-icon_picture" size="30"></up-icon>
							</view>
							<view class="top_card_r_i">
								<view class="top_card_r_i_text">导入图片</view>
								<up-icon custom-prefix="iconfont" name="icon-icon_next" size="50rpx"></up-icon>
							</view>
						</view>
						<view class="top_card_r_b">
							<view class="">
								<up-icon custom-prefix="iconfont" name="icon-icon_cutout" size="30"></up-icon>
							</view>
							<view class="top_card_r_i">
								<view class="top_card_r_i_text">背景分离</view>
								<up-icon custom-prefix="iconfont" name="icon-icon_next" size="50rpx"></up-icon>
							</view>
						</view>
					</view>
				</view>
				<up-sticky offset-top="0" customNav-height="0" :bg-color="scrollTop > 170 ? bgColor:''">
					<view class="tabs_list_box">
						<view class="tabs_list">
							<up-tabs :list="tabs" :line-height="0"
								:active-style="{'fontSize':'30rpx','fontWeight':'600'}"></up-tabs>
						</view>
						<view class="tabs-rigth-fixed" @click="onNavigateTo('/pages/index/fortune')">
							<up-icon custom-prefix="iconfont" name="icon-huoyan" size="34rpx"
								color="rgba(237, 100, 100, 1)"></up-icon>
							<text>运势UP!</text>
							<up-icon name="arrow-right" size="24rpx"></up-icon>
						</view>
					</view>
				</up-sticky>
				<view class="demo-uni-row">
					<view class="demo-uni-col" v-for="(item,index) in dataList" :key="index"
						@click="onNavigateTo('/pages/index/canvas_edit')"></view>
				</view>
			</template>
		</custom-layout>
	</view>
</template>
<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		computed
	} from 'vue'

	import useSystemStore from "~@/store/system.js"
	
	import qing from '~@/static/images/qing.png'
	import iconNext from '~@/static/images/icon_next.svg'
	const {
		bgColor
	} = useSystemStore()
	const tabs = ref([{
			state: -1,
			name: '热门新款',
		},
		{
			state: 1,
			name: '简约'
		},
		{
			state: 2,
			name: '卡通'
		},
		{
			state: 3,
			name: '复古'
		},
		{
			state: 4,
			name: '运动'
		},
		{
			state: 5,
			name: '艺术'
		},
		{
			state: 6,
			name: '运动'
		},
		{
			state: 7,
			name: '艺术'
		},
	])

	const dataList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ])
	const num = ref(1)
	const layout = ref()
	const onQueryList = (event) => {
		const {
			pageNo,
			pageSize
		} = event
		if (pageNo > 1) {
			if (num.value < 2) {
				num.value++
				layout.value.complete(dataList.value);
			} else {
				layout.value.complete([]);
			}
		} else {
			num.value = 2
			layout.value.complete(dataList.value);
		}
	}

	// 页面跳转
	const onNavigateTo = (event) => {
		uni.navigateTo({
			url: event,
		})
	}
	// 检测页面滚动
	const scrollTop = ref(0)
	const onScroll = (event) => {
		scrollTop.value = event
	}
</script>

<style lang="scss" scoped>
	.nav_bar_title {
		font-family: SmileySans-Oblique-2;
		color: rgba(128, 128, 128, 1);
		font-size: 24rpx;
	}

	// ===头部卡片样式===
	.top_card {
		width: 100%;
		height: 300rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		.top_card_l {
			width: 46%;
			height: 100%;
			z-index: -1;

			.top_card_l_t {
				height: 100rpx;
				display: flex;
				align-items: flex-start;
				position: relative;

				.top_card_l_t_l {
					height: calc(100%);
					width: calc(76%);
					background: linear-gradient(153.36deg, rgba(144, 252, 205, 1) 0%, rgba(176, 242, 255, 1) 100%);
					position: relative;
					top: 20rpx;
					bottom: 60rpx;
					border-radius: 20rpx 0 0 0;
					display: flex;

					&::after {
						position: absolute;
						content: '';
						width: 20rpx;
						height: 20rpx;
						background-image: radial-gradient(20rpx at 0rpx 0rpx, rgba(176, 242, 255, 1) 20rpx, #fff 20rpx);
						bottom: 20rpx;
						right: 0;
					}

					.l_t_l_icon {
						position: absolute;
						top: -42rpx;
						left: -20rpx;
						z-index: 20;
						width: 160rpx;
						height: 160rpx;
					}

					.l_t_l_text {
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						color: rgba(53, 161, 171, 1);
						text-align: right;
						vertical-align: top;
						word-break: keep-all;
						position: absolute;
						top: 24rpx;
						right: 16rpx;
					}
				}

				.top_card_l_t_r {
					background-color: #fff;
					height: 100%;
					width: 24%;
					border-radius: 20rpx 0 0 0;
					position: absolute;
					right: 0;

				}
			}

			.top_card_l_b {
				background-color: #fff;
				width: 100%;
				height: calc(100% - 100rpx);
				border-radius: 20rpx 0 0 20rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.top_card_l_b_c {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(11, 17, 23, 1);
					margin: 4rpx 0 16rpx 0;
				}

				.l_b_button {
					width: fit-content;
					height: 34rpx;
					border-radius: 160rpx;
					background: rgba(17, 20, 7, 1);
					color: #fff;
					font-size: 18rpx;
					line-height: 34rpx;
					text-align: center;
					padding: 0 10rpx;
					box-sizing: border-box;
				}

			}
		}

		.top_card_r {
			width: 57%;
			border-left: 1rpx solid rgba(242, 245, 247, 1);
			height: 100%;
			background-color: #fff;
			border-radius: 0 20rpx 20rpx 0;

			.top_card_r_t {
				border-bottom: 1rpx solid rgba(242, 245, 247, 1);
			}

			.top_card_r_t,
			.top_card_r_b {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;

				.top_card_r_i {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.top_card_r_i_text {
						margin-bottom: 20rpx;
						font-size: 28rpx;
						font-weight: 600;
					}
				}
			}
		}
	}

	// ======导航标签right标签=======
	.tabs_list_box {
		display: flex;
		align-items: center;

		.tabs_list {
			width: calc(100% - 160rpx);
		}

		.tabs-rigth-fixed {
			background: rgba(149, 250, 213, 1);
			border-radius: 50rpx;
			height: 40rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 6rpx;
			box-sizing: border-box;
			font-size: 20rpx;
			font-family: SmileySans-Oblique-2;

			text {
				font-weight: 600;
			}
		}
	}

	// ======liet样式=======
	.demo-uni-row {
		width: 100%;
		padding: 0 26rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;

		.demo-uni-col {
			width: calc((100% / 3) - 8rpx);
			height: 400rpx;
			background-color: #ccc;
			border-radius: 13px;
			margin-bottom: 10rpx;

			&:nth-child(3n - 1) {
				margin-right: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>