测试

common/getCdnUrl.js

@@ -0,0 +1,3 @@
+export default (path)=> {
+	 return `/static/images/${path}`
+}

common/uni-nvue.css

@@ -1,6 +1,7 @@
 page {
     min-height: 100%;
-    height: auto;
+	height: auto;
+	height: 100%;
 }
 
 /* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */

pages.json

@@ -115,7 +115,7 @@
 		"spacing": "12px",
 		"color": "#011111",
 		"selectedColor": "#B12D29",
-		"borderStyle": "white",
+		"borderStyle": "black",
 		"backgroundColor": "#fff",
 		"list": [
 			{

pages/tabBar/sending/sending.nvue

@@ -1,9 +1,42 @@
 <template>
-	<view class="uni-container">
-		sas
+	<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: {
@@ -12,7 +45,22 @@
 		},
 		data() {
 			return {
-				list: [
+				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: '' },
 				]
 			}
 		},
@@ -23,7 +71,7 @@
 			}
 		},
 		methods: {
-			
+			getCdnUrl,
 		}
 	}
 </script>
@@ -31,3 +79,186 @@
 <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;
+		
+	}
+	.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: 26rpx;
+			width: 207rpx;
+			height: 28rpx;
+			font-size: 24rpx;
+			color: #FFF;
+		}
+		.btn-ljyy{
+			width: 144rpx;
+			margin-top: 46rpx;
+			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: 40rpx;
+			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;
+		.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>