emis-app/pages/tabBar/sending/sending.nvue

<template>
	<view style="position: relative;height: 100%;background-color: #fff;">
		
				
		<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
		<view class="pg-container">
			<view class="header">
				<view class="title1">探路物流 速运全球 </view>
				<view class="desc">省钱，省时，省力</view>
				<button type="primary" class="btn-ljyy">立即预约</button>
				<view class="btnlist1">
					<view v-for="mbItem in mainBtnlist" class="mbitem">
						<image mode="aspectFit" class="tb1" :src="mbItem.icon"/>
						<view class="neirong">
							<view class="nr1">{{mbItem.title}}</view>
							<view class="nr2">{{mbItem.subTitle}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="pbody">
				<view class="btnlist2">
					<view v-for="tlItem in toolBtnlist" class="tlitem">
						<view class="neirong">
							<view class="nr1">{{tlItem.title}}</view>
							<view class="nr2">{{tlItem.subTitle}}</view>
						</view>
						<image class="tb1" :src="tlItem.icon" mode="heightFix"/>
					</view>
				</view>
			</view>
			<view class="pfoot">
				<view class="flw-dec">关注探路者官方公众号，实时接收物流信息</view>
				<view class="btn-login">去登录</view>
			</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>
	@import '../../../common/uni-nvue.css';
</style>
<style scoped lang="less">
	.hdbg{
		position: absolute;
		z-index: 1;
		width: 100%;
	}
	.pg-container{
		position: relative;
		z-index: 2;
		overflow-x: hidden;
	}
	.header{
		padding: 0 28rpx;
		.title1{
			width: 362rpx;
			height: 41rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #FFF;
			text-shadow: 3rpx 4rpx 0rpx rgba(92,15,12,0.2);
		}
		.desc{
			margin-top: 22rpx;
			width: 207rpx;
			height: 28rpx;
			font-size: 24rpx;
			color: #FFF;
		}
		.btn-ljyy{
			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;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding: 36rpx 24rpx 22rpx 24rpx;
			.mbitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				.tb1 {
					width: 92rpx;
					height: 73rpx;
				}
				.neirong{
					margin-left: 22rpx;
					.nr1{
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
					}
					.nr2{
						margin-top: 15rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999;
					}
				}
				&::after {
					position: absolute;
					top: 0;
					bottom: 0;
					content: ' ';
					right: -40rpx;
					display: block;
					background: #FFF;
					opacity: 0.5;
					width: 1rpx;
				}
				&:last-child {
					&::after {
						display: none;
					}
				}
			}
		}
	}
	
	.pbody{
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx 28rpx 100rpx 28rpx;
		.btnlist2{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			.tlitem {
				margin: 0 0 20rpx 0;
				width: 48.6%;
				background: #F6F6F6;
				padding: 30rpx 28rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				position: relative;
				&:nth-child(2n) {
				    /* 去除第2n个的margin-right */
				    margin-right: 0;
				}
				.tb1 {
					width: auto;
					height: 50rpx;
				}
				.neirong{
					margin-left: 22rpx;
					.nr1{
						font-weight: 600;
						color: #0E0708;
						font-size: 28rpx
					}
					.nr2{
						margin-top: 15rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999;
					}
				}
				&::after {
					position: absolute;
					top: 0;
					bottom: 0;
					content: ' ';
					right: -40rpx;
					display: block;
					background: #FFF;
					opacity: 0.5;
					width: 1rpx;
				}
				&:last-child {
					&::after {
						display: none;
					}
				}
			}
		}
	}
	.pfoot {
		position: fixed;
		bottom: 20rpx;
		left: 28rpx;
		right: 28rpx;
		padding: 0 8rpx 0 26rpx;
		height: 72rpx;
		background: #0E0708;
		border-radius: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		.flw-dec{
			font-size: 24rpx;
			color: #FFF;
		}
		.btn-login{
			text-align: center;
			width: 130rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #B12D29;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #fff;
			font-weight: 500;
		}
	}
</style>