XiaoLingHou_web/pages/index/index.vue

<template>
	<view class="uni-page">
		<u-navbar :leftIcon="null" placeholder bgColor="#fff0e7" title="首页"></u-navbar>
		<view class="index-item ai-helper-welcome" @click="navigateTo('/pages/aiChat/aiChat')">
			<image src="~@/static/01banner@2x.png" alt="" style="width: 100%;height: 100%;">
		</view>
		<view class="index-item ai-to-write" @click="navigateTo('/pages/aiChat/aiChat')">
			<view class="index-item-img">

			</view>
			<view class="index-item-content">
				<view class="index-item-title">
					用AI寄信助手写信
				</view>
				<view class="index-item-explain">
					简单几步，智能寄信..
				</view>
			</view>
			<view class="index-item-right-icon">
				<image src="/static/01跳转@2x.png" alt="" style="width: 12.58rpx;height: 21.72rpx;">
			</view>
		</view>
		<view class="index-item user-to-write" @click="navigateTo('pages/editor-letter/editor-letter?clear=1')">
			<view class="index-item-img">

			</view>
			<view class="index-item-content">
				<view class="index-item-title">
					在线填写或手写拍照
				</view>
				<view class="index-item-explain">
					自己写信，问候远方的朋友...
				</view>
			</view>
			<view class="index-item-right-icon">
				<image src="/static/01跳转@2x.png" alt="" style="width: 12.58rpx;height: 21.72rpx;">
			</view>
		</view>
		<view class="write-explain">
			请选择对应的寄信方式，AI寄信更便捷哦！
		</view>
		<view class="grid-box">
			<view class="grid-item" v-for="(item,index) in bottomOption" :key="item.name" @click="()=>{
				navigateTo(item.target)
			}">
				<view class="grid-item-img">
					<image :src="item.img" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="grid-item-content">
					<view class="grid-item-title">
						{{item.title}}
					</view>
					<view class="grid-item-explain">
						{{item.explain}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				bottomOption: [
					// {
					// 	title: '写信须知',
					// 	explain: '写信注意事项',
					// 	img: '/static/01-1写信@2x.png',
					// 	// target: 'pages/agentBusiness/agentBusiness'

					// }, {
					// 	title: '寄信样稿',
					// 	explain: '寄信模板参考',
					// 	img: '/static/01-2寄信@2x.png',
					// 	// target: 'pages/agentBusiness/agentBusiness'
					// },
					{
						title: '代收信件',
						explain: '查看历史草稿',
						img: 'https://jx.xiaolinghou.com/webtest/static/01-3代收@2x.png',
						target: 'pages/agentBusiness/agentBusiness'
					}, {
						title: '地址查询',
						explain: '看守所/监狱',
						img: '/static/01-4回信@2x.png',
						target: 'pages/queryAddr/queryAddr'
					}
				]
			}
		},
		onLoad() {
			uni.showTabBar()
			// this.checkIsLogin()
		},
		methods: {
			navigateTo(url) {
				console.log(url);
				uni.navigateTo({
					url
				})
			},
			// checkIsLogin() {
			// 	if (this.$isWechat()) {
			// 		uni.getStorage({
			// 			key: 'token',
			// 			success: (res) => {

			// 			},
			// 			fail: (res) => {
			// 				uni.navigateTo({
			// 					url: '/pages/login/login'
			// 				})
			// 			}
			// 		});
			// 	}
			// },
			toAiWrite() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.index-item {
		margin: 30rpx auto;
		width: 690rpx;
		height: 261rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-size: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #FFD0B1;
	}

	.index-item.ai-helper-welcome {
		padding: 0;
		background-size: 100%;
	}

	.ai-helper-welcome {
		// background-image: url(~@/static/01banner@2x.png);
	}



	.index-item-img {
		width: 166rpx;
		height: 166rpx;
		background-size: 100%;
	}

	.ai-to-write {
		.index-item-img {
			background-image: url(~@/static/01AI@2x.png);
		}
	}

	.user-to-write {
		background-color: #FFDEAC;

		.index-item-img {
			background-image: url(~@/static/01填写.png);
		}
	}

	.index-item-title {
		font-size: 34rpx;
		font-family: OPPOSans-bold, OPPOSans;
		font-weight: bold;
		color: #111111;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	.index-item-content {
		// padding: 0 15px;
		padding-left: 20px;
		width: 334rpx;
	}

	.index-item-explain {
		font-size: 26rpx;
		font-family: OPPOSans-Medium, OPPOSans;
		font-weight: 500;
		color: #333333;

		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	.index-item-right-icon {
		width: 10%;
		height: 40%;
		text-align: right;

	}

	.write-explain {
		width: 100%;
		text-align: center;
		height: 37rpx;
		font-size: 28rpx;
		font-family: OPPOSans-Medium, OPPOSans;
		font-weight: 500;
		margin-bottom: 50rpx;
		color: #86807e;
	}

	.grid-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 10rpx;

		.grid-item {
			margin-bottom: 20px;
			width: 335rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.grid-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		padding-left: 50rpx
	}

	.grid-item-img {
		width: 70rpx;
		height: 70rpx;
		padding-right: 14rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.grid-item-content {
		.grid-item-title {
			width: 120rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.grid-item-explain {
			color: #c4c4c4;
			font-size: 24rpx;
		}
	}
</style>