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>
	<!-- 同城急送 -->
	<!-- <div class="btn-four">
		<div>
			<router-link to="/Cityexpress">
				<img src="../assets/images/icon6.png" alt="">
				<span>
					<p>同城急送</p>
					<p>闪送更快更安全</p>
				</span>
			</router-link>
		</div>
		<div>
			<router-link to="/Multipleexpress">
				<img src="../assets/images/icon7.png" alt="">
				<span>
					<p>批量寄</p>
					<p>便捷寄多个快递</p>
				</span>
			</router-link>
		</div>
		<div>
			<router-link to="/Foreignexpress">
				<img src="../assets/images/icon8.png" alt="">
				<span>
					<p>国际件</p>
					<p>放心寄 丢必赔</p>
				</span>
			</router-link>
		</div>
		<div>
			<router-link to="/Hkexpress">
				<img src="../assets/images/icon9.png" alt="">
				<span>
					<p>港澳台</p>
					<p>让工作 更快捷</p>
				</span>
			</router-link>
		</div>
	</div> -->
    <!--  -->
	<!-- <div class="ad-two">
		<router-link :to="{ path: 'Myaddressbook', query: { active: 1 }}">
			<img src="../assets/images/ad_icon1.png" alt="">
			<span>地址簿</span>
		</router-link>
		<router-link to="" @click.native="link()">
			<img src="../assets/images/ad_icon2.png" alt="">
			<span>寄包柜</span>
		</router-link>

		<router-link to="/Xz">
			<img src="../assets/images/ad_icon4.png" alt="">
			<span>禁寄品</span>
		</router-link>
	</div> -->
	<!-- 底部icon -->
	<!-- <div class="foot_icon">
		<div>
			<img src="../assets/images/foot_icon1.png" >
			<p>放心寄 丢必赔</p>
		</div>
		<div>
			<img src="../assets/images/foot_icon2.png" >
			<p>闪电送件</p>
		</div>
		<div>
			<img src="../assets/images/foot_icon3.png" >
			<p>专属客服</p>
		</div>
	</div> -->
	<!-- 底部 -->
    <tabbar></tabbar>

  </div>
</template>
<script>
  import {Toast,Dialog} from 'vant'
  // import tabber from "./components/tabbar"
  export default {
    data() {
      return {


      };
    },
    created:function(){
      //本地(服务器下面这个要去了)
      //localStorage.setItem("openid", "123");
      //this.getOpenid("");
	  this.isLogin();
    },
    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>