user_mobile_front/src/pages/index.vue

<template>
	<div class="content">
		<!-- banner图 -->
		<banner></banner>
		<!-- 寄件按钮 -->
		<div class="btn-two">
			<router-link to="/Express">
				<img src="../assets/images/icon4.png" alt="">
				<span>
					<p>寄快递</p>
					<!-- <p>放心寄 丢必赔</p> -->
				</span>
			</router-link>
			<router-link to="Inexpress">
				<img src="../assets/images/icon5.png" alt="">
				<span>
					<p>内部件</p>
					<!-- <p>让工作 更便捷</p> -->
				</span>
			</router-link>
			<router-link to="Logisticslist">
				<img src="../assets/images/icon22.png" alt="">
				<span>
					<p>我的寄件</p>
					<!-- <p>让工作 更便捷</p> -->
				</span>
			</router-link>
			<router-link to="Search">
				<img src="../assets/images/a-124.png" alt="">
				<span>
					<p>我的收件</p>
					<!-- <p>让工作 更便捷</p> -->
				</span>
			</router-link>
		</div>
		<tabbar></tabbar>

	</div>
</template>
<script>
import { Toast, Dialog } from 'vant'
import { getWxUserInfo } from '../api/login'
import { getWxOpenId } from '../script/wxGetOpenId'
export default {
	data() {
		return {


		};
	},
	created: async function () {
		// this.getOpenid();
		console.log('开始走了')
		getWxOpenId()

	},
	methods: {
		link() {
			Toast("正在开发中，敬请期待！")
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	padding: .33rem .34rem 1rem;

	.btn-two {
		font-size: .24rem;
		color: #999999;
		display: flex;
		flex-wrap: wrap;
		margin: .2rem auto;
		height: 300px;

		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #999999;
			padding: .25rem 0rem;
			background: white;
			width: 50%;
			border-radius: .05rem;
			justify-content: center;

			img {
				width: 1.2rem;
				height: 1.2rem;
				position: relative;
				top: .1rem;
				margin-bottom: 10px;
			}

			span {
				p:nth-of-type(1) {
					font-size: .3rem;
					color: #333;
					font-weight: bold;
					margin-bottom: .1rem;
				}
			}
		}
	}

	.btn-four {
		font-size: .24rem;
		color: #999999;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: .2rem auto;
		background: white;
		padding: .25rem .2rem;
		border-radius: .05rem;

		div {
			flex: 1;
			min-width: 48%;
			padding: .2rem 0rem;

			a {
				display: flex;
				color: #999999;
				justify-content: center;
				padding: .1rem 0rem;

				img {
					width: .52rem;
					height: .5rem;
					position: relative;
					top: .2rem;
				}

				span {
					margin-left: .25rem;

					p:nth-of-type(1) {
						font-size: .3rem;
						color: #333;
						font-weight: bold;
						margin-bottom: .1rem;
					}
				}
			}

		}

		div:nth-of-type(1) a,
		div:nth-of-type(3) a {
			border-right: .01rem solid #f7f7f7;
		}

		div:nth-of-type(1),
		div:nth-of-type(2) {
			border-bottom: .01rem solid #f7f7f7;
		}

	}

	.ad-two {
		font-size: .24rem;
		color: #999999;
		display: flex;
		justify-content: center;
		margin: .2rem auto;

		a {
			flex: 1;
			color: #999999;
			padding: .35rem 0rem;
			background: white;
			width: 48%;
			border-radius: .05rem;
			text-align: center;

			img {
				width: .55rem;
				height: .55rem;
				margin-bottom: .1rem;
			}

			span {
				display: block;

			}
		}
	}

	.foot_icon {
		display: flex;
		justify-content: center;
		margin: .55rem auto;

		div {
			flex: 1;
			text-align: center;
			font-size: .2rem;
			color: #999999;

			img {
				width: .64rem;
				height: .64rem;
			}
		}
	}
}
</style>