emis-sapp/pages/tabBar/sending/sending.vue

<template>
	 
	<view style="position: relative;background-color: #fff;">		
		<view class="customer_nav_bar">
		   <!-- 这里是状态栏 -->
		</view>
		<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
		<view class="pg-container">
			<view class="header" >
				<u-text size="40" :bold="true" text="探路物流 速运全球" color="#fff"></u-text>
				<u-text margin="22rpx 0 0 0" size="24" :bold="true" text="省钱，省时，省力" color="#fff"></u-text>
				<button class="btn-ljyy" type="primary">立即预约</button>
				<view class="btnlist1">
					<u-row>
						<u-col v-for="mbItem in mainBtnlist" span="6" align="center" custom-style="">
							<view class="mb-item">
								<u-row align="center">
									<image class="tb1" style="width: 92rpx;height: 73rpx;" :src="mbItem.icon"/>
									<view class="neirong">
										<u-text size="32" :bold="true" color="#fff" :text="mbItem.title"></u-text>
										<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="mbItem.subTitle"></u-text>
									</view>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
			<view class="pbody">
				<view class="btnlist2">
					<u-row gutter="20" custom-style="flex-wrap: wrap;">
						<u-col v-for="tlItem in toolBtnlist" span="6">
							<view style="margin: 0 0 20rpx 0;background: #F6F6F6;padding: 30rpx 28rpx;border-radius: 20rpx;position: relative;">
								<u-row justify="between" >
									<view class="neirong">
										<u-text size="28" :bold="true" color="#0E0708" :text="tlItem.title"></u-text>
										<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="tlItem.subTitle"></u-text>
									</view>
									<image :src="tlItem.icon" style="height: 50rpx; width: 50rpx;" mode="aspectFit"/>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="pfoot" >
				<u-row justify="between">
					<u-text size="24" color="#fff" text="关注探路者官方公众号，实时接收物流信息"></u-text>
					<u-button type="primary" custom-style="width: 130rpx;border-radius: 30rpx;margin: 0;" size="mini">去登录</u-button>
				</u-row>
			</view>
		</view>
	</view>
</template>
<script>
	import getCdnUrl from "@/common/getCdnUrl"
	export default {
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		data() {
			return {
				mainBtnlist: [
					{  title: '下单寄件', subTitle: "上门揽件/寄仓库", icon: getCdnUrl(`sdg/btn-send.png`), url: '' },
					{  title: '专属小哥', subTitle: "下单给专属业务员", icon: getCdnUrl(`sdg/btn-bindbr.png`), url: '' }
				],
				toolBtnlist: [
					{  title: '进仓单', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-jcd.png`), url: '' },
					{  title: '时效预估', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-sxyg.png`), url: '' },
					{  title: '运费试算', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-shisuan.png`), url: '' },
					{  title: '我的订单', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-dingdan.png`), url: '' },
					{  title: '运单查询', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-yundan.png`), url: '' },
					{  title: '地址簿', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-dizhi.png`), url: '' },
					{  title: '网点查询', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-wangdain.png`), url: '' },
					{  title: 'HSCODE', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-HS.png`), url: '' },
					{  title: 'RECP', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-RE.png`), url: '' },
					{  title: '扫码寄件', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-saoma.png`), url: '' },
					{  title: '寄件须知', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-xuzhi.png`), url: '' },
				]
			}
		},
		onShareAppMessage() {
			return {
				title: '探路物流 速运全球',
				// path: 'TODO'
			}
		},
		methods: {
			getCdnUrl,
		}
	}
</script>

<style lang="scss">
	@import '../../../common/uni-nvue.scss';
</style>
<style scoped lang="scss">
	.hdbg{
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 720rpx;
	}
	.pg-container{
		position: relative;
		z-index: 2;
		overflow-x: hidden;
	}
	.header{
		padding: 0 28rpx;
		.btn-ljyy{
			margin-left: 0;
			width: 144rpx;
			margin-top: 40rpx;
			box-sizing: content-box;
			background: #FFF;
			border-radius: 21rpx;
			font-size: 24rpx;
			color: #B12D29;
			padding: 8rpx 0;
			text-align: center;
			line-height: normal;
		}
		
		.btnlist1 {
			margin-top: 38rpx;
			background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding: 36rpx 24rpx 22rpx 24rpx;
			
		}
	}
	.mb-item{
		position: relative;
		border-right: 2rpx solid rgba(255,255,255,0.5);
		&:last-child{
			border-right: 0;
		}
	}
	.pbody{
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx 28rpx 100rpx 28rpx;
		.btnlist2{
			
			.neirong{
				margin-left: 22rpx;
			}
		}
	}
	.pfoot {
		position: fixed;
		bottom: 20rpx;
		left: 28rpx;
		right: 28rpx;
		padding: 20rpx 8rpx 20rpx 26rpx;
		background: #0E0708;
		border-radius: 36rpx;
	}
</style>