emis-app/pages/tabBar/home/home.vue

<template>
	<tpx-page>
		<view style="position: relative;background-color: #fff;">
			<view class="customer_nav_bar">
			   <!-- 这里是状态栏 -->
			</view>
			<image class="hdbg" :src="getCdnUrl(`home/hdbg.png`)"/>
			
			<view class="pg-container">
				
				<view class="com-jianju" style="margin-top: 10rpx;">
					<u-row align="center" >
						<u-col @click="goto(`tabBar/mine/mine`)" span="11">
							<u-row>
								<u-avatar size="66" :src="userInfo.avatar"></u-avatar>
								<u-text margin="0 0 0 16rpx" :text="userInfo.nickName" color="#fff" size="24"></u-text>
							</u-row>
						</u-col>
						<u-col span="1" align="end">
							<image style="height: 36rpx;width: 44rpx;" :src="getCdnUrl(`home/saoma.png`)"/>
						</u-col>
					</u-row>
				</view>
				
				<view class="header com-jianju">
					<u-row justify="between">
						<u-col span="5">
							<u-text size="40" :bold="true" text="香港服装专线" color="#fff"></u-text>
							<button type="primary" class="btn-ljyy">了解详情</button>
						</u-col>
						<image class="fjhw" :src="getCdnUrl(`home/huowu.png`)"/>
					</u-row>
				</view>
				
				
				<view class="pbody">
					
					<u-row justify="center" align="center">
						<u-col v-for="(tjItem, ijIndex) in tjList" span="3" align="center"
							:custom-style="'border-right: 2rpx solid  #E8E8E8;' + (ijIndex+1 == tjList.length ?'border-right:0;': '')"
						>
							<u-text align="center" color="#B12D29" :bold="true" size="36rpx" :text="tjItem.value"></u-text>
							<u-text align="center" color="#666" size="24" :text="tjItem.title"></u-text>
						</u-col>
					</u-row>
					
					<view class="com-jianju btnlist1">
						<u-row>
							<u-col v-for="(mbItem, mIndex) in mainBtnlist" :span="6" 
								:custom-style="'border-right: 2rpx solid rgba(255,255,255,0.5);' + (mIndex+1 == mainBtnlist.length ?'border-right:0;': '')"
							>
								<u-row align="center" justify="center">
									<image mode="aspectFit" style="width: 92rpx;height: 76rpx;" :src="mbItem.icon"/>
									<view class="neirong">
										<u-text size="24rpx" color="#fff" :text="mbItem.title"></u-text>
										<u-text size="28rpx" color="#fff" :bold="true" margin= "15rpx 0 0 0" :text="mbItem.subTitle"></u-text>
									</view>
								</u-row>
							</u-col>
						</u-row>
					</view>
					
					<view class="nours com-jianju">
						<u-row justify="between">
							<u-col span="11">
								<u-row>
									<image style="height: 30rpx;width:30rpx" :src="getCdnUrl(`home/laba.png`)"/>
									<image style="height: 24rpx; width: 110rpx;margin-left: 10rpx;" :src="getCdnUrl(`home/ggchxun.png`)"/>
									<u-text size="22" color="#333" margin="0 0 0 30rpx">最近一周内暂未有新通告！！！</u-text>
								</u-row>
							</u-col>
							<u-icon name="arrow-right" size="20"></u-icon>
						</u-row>
					</view>
					
					<view class="com-jianju">
						<u-text :bold="true" size="32" color="#333" margin="40rpx 0 0 0" text="网点扫描"></u-text>
					</view>
					<view class="btnlist2 com-jianju">
						<u-row justify="start" gutter="18" custom-style="flex-wrap: wrap;">
							<buns-auth v-for="tlItem in toolBtnlist" :code="tlItem.code">
								<u-col span="3"  align="center" @click="goto(tlItem.url)">
									<u-col align="center" justify="center" custom-style="padding: 20rpx;border: 2rpx solid #F6F6F6;border-radius: 16rpx;margin-bottom: 18rpx;display: flex;">
										<image :src="tlItem.icon" style="height: 46rpx;width: 46rpx" mode="aspectFit"/>
										<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
									</u-col>
								</u-col>
							</buns-auth>
						</u-row>
					</view>
				</view>
				
			</view>
		</view>
	</tpx-page>
</template>
<script>
	import { dealBtnMap } from "@/common/enum"
	export default {
		computed: {
		    userInfo() {
		      return this.$store.getters.userInfo
		    }
		},
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		data() {
			return {
				tjList: [   
					{ title: '未接单', value: "56", key: "" },
					{ title: '已接收', value: "56", key: "" },
					{ title: '派送中', value: "56", key: "" },
					{ title: '已签收', value: "56", key: "" }
				],
				mainBtnlist: [
					{  title: '计提预估', subTitle: "2888.80", icon: this.getCdnUrl(`home/jityugu.png`), url: '' },
					{  title: '待回款', subTitle: "12888.80", icon: this.getCdnUrl(`home/daihuikuan.png`), url: '' }
				],
				toolBtnlist: [
					{ ...dealBtnMap.lanShou },
					{ ...dealBtnMap.shouHuo },
					{ ...dealBtnMap.faJianScan },
					{ ...dealBtnMap.daoJianScan },
					{ ...dealBtnMap.yunDanLuRu },
					{ ...dealBtnMap.qianShouScan },
					{...dealBtnMap.fenBoScan},
					{...dealBtnMap.paiJianScan},
					{...dealBtnMap.yunDanXiuGai},
					{ ...dealBtnMap.baoJiaShiSuan },
					{ ...dealBtnMap.wenTiJian },
					{ ...dealBtnMap.daoPaiScan },
					{ ...dealBtnMap.woDeErWeiMa },
					{ ...dealBtnMap.mianDanDayin },
					{ ...dealBtnMap.kuaiJianGenZong }
				]
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad() {
			
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
</style>
<style scoped lang="scss">
	.com-jianju {
		margin-left: 28rpx;
		margin-right: 28rpx;
	}
	.hdbg{
		position: absolute;
		height: 400rpx;
		top: 0;
		z-index: 1;
		width: 100%;
	}
	.pg-container{
		position: relative;
		z-index: 2;
		overflow-x: hidden;
	}
	
	.header{
		color: #FFF;
		.btn-ljyy{
			margin-left: 0;
			width: 144rpx;
			margin-top: 26rpx;
			box-sizing: content-box;
			background: #FFF;
			border-radius: 21rpx;
			font-size: 24rpx;
			color: #B12D29;
			padding: 8rpx 0;
			text-align: center;
			line-height: normal;
			border: 0;
			&::after{
				border: 0;
			}
		}
		.fjhw{
			margin-top: 20rpx;
			height: 162rpx;
			width: 328rpx;
		}
	}
	
	.pbody{
		background: #FFF;
		border-radius: 30rpx;
		padding-top: 40rpx;
		padding-bottom: 80rpx;
		
		.tj-tl2{
			font-size: 24rpx;
			color: #666;
		}
		.btnlist1 {
			margin-top: 38rpx;
			background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
			border-radius: 20rpx;
			padding: 30rpx;
			.neirong{
				margin-left: 22rpx;
			}
		}
		
		.nours {
			margin-top: 40rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			padding: 18rpx 22rpx;
		}
		
		.btnlist2{
			margin-top: 40rpx;
		}
	}
</style>