agent-app/agentApp/pages/merchant-index/index.vue

<template>
	<view class="app-container">
		<view class="agent-content">
			<view class="avatar-information">
				<image style="width: 110rpx;height: 110rpx;" src="/static/index/head-sculpture.png" alt="" />
				<view class="information-content">
				    <view class="information-name">李姐烧烤</view>
				    <view class="address-text">地址：广西南宁市江南区波尔多庄园2-109号商铺</view>
				</view>
			</view>
			<view class="revenue-information">
			    <view class="projected-revenue-content">
			        <view class="projected-revenue-item">
			        <view class="character-style">￥</view>
			        <view class="character-price">394.00</view>
			        </view>
			        <view class="revenue-item-text">
			        <view class="character-text">预计到账收益</view>
			        <image class="help-icon" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
			        </view>
			    </view>
			    <view class="segmentation"></view>
			    <view class="projected-revenue-content">
			      <view class="projected-revenue-item">
			      <view class="character-style">￥</view>
			      <view class="character-price">5000.00</view>
			      </view>
			      <view class="revenue-item-text">
			      <view class="character-text">总到账收益</view>
			      <image class="help-icon" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
			      </view>
			    </view>
			</view>
			  <view class="recent-orders-content">
			    <view class="recent-orders-title">
			      <image class="title-stlye"  src="/static/index/merchant-title-style.png" alt="" />
			      <view class="title-text">最近订单</view>
			    </view>
			    <view class="ordering-information">
			      <view class="order-number">订单编号 22398983498</view>
			      <view class="ordering-information-item">
			        <view class="ordering-pic">
			          <image class="order-chart" src="/static/index/order-chart.png" alt=""  />
			        </view>
			        <view class="ordering-text">
			          <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
			          <view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
			          <view class="order-time">订单时间：2023-10-24 20:39:56</view>
			        </view>
			      </view>
			      <view class="order-status">
			        <button class="refund-button">退款</button>
			      </view>
			      <view class="divider-style"></view>
			    </view>
			    <view class="ordering-information">
			      <view class="order-number">订单编号 22398983498</view>
			      <view class="ordering-information-item">
			        <view class="ordering-pic">
			          <image class="order-chart" src="/static/index/order-chart.png" alt=""  />
			        </view>
			        <view class="ordering-text">
			          <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
			          <view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
			          <view class="order-time">订单时间：2023-10-24 20:39:56</view>
			        </view>
			      </view>
			      <view class="order-status">
			        <button class="refunded-button-style">已退款</button>
			      </view>
			      <view class="divider-style"></view>
			    </view>
				<view class="ordering-information">
				  <view class="order-number">订单编号 22398983498</view>
				  <view class="ordering-information-item">
				    <view class="ordering-pic">
				      <image class="order-chart" src="/static/index/order-chart.png" alt=""  />
				    </view>
				    <view class="ordering-text">
				      <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
				      <view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
				      <view class="order-time">订单时间：2023-10-24 20:39:56</view>
				    </view>
				  </view>
				  <view class="order-status">
				    <button class="refund-button">已退款</button>
				  </view>
				  <view class="divider-style"></view>
				</view>
			  
			    </view>
			  </view>
	
			</view>

		</view>

	</view>
</template>


<style lang="scss">
.agent-content {
	position: relative;
	width: 100%;
	height: 1500rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background: url(../../static/index/merchant-index-bg.png) no-repeat top center;
	background-size: 100% 100%;
	box-sizing: border-box;
	
	.avatar-information{
		display: flex;
		justify-content: left;
		align-items: center;
		padding: 30rpx 0;
		
		.information-content{
			margin-left: 30rpx;
			
			.information-name{
				font-family: PingFangSC-Regular, sans-serif;
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
			.address-text {
			    font-family: PingFangSC-Regular, sans-serif;
			    font-size: 24rpx;
			    color: #fff;
			    margin-top: 15rpx;
			}
		}
	}
	.revenue-information{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 200rpx;
		background: url(../../static/index/income-bg.png) no-repeat center center;
		background-size: cover;
		padding: 0 60rpx;
		
		.projected-revenue-content {
		    text-align: center;
			.projected-revenue-item {
			    display: flex;
			    justify-content: left;
			    align-items: baseline;
				
				.character-style {
				    font-family: PingFangSC-Regular, sans-serif;
				    font-size: 30rpx;
				    color: #454545;
				}
				.character-price {
				    font-family: "Din";
				    font-size: 50rpx;
				    color: #454545;
				    font-weight: bold;
				    margin-left: 10rpx;
				}
			}
			.revenue-item-text {
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    margin-top: 10rpx;
			}
			.character-text {
			    font-family: PingFangSC-Regular, sans-serif;
			    font-size: 28rpx;
			    color: #454545;
			    font-weight: bold;
			}
			image.help-icon {
			    width: 30rpx;
			    height: 30rpx;
			    background-size: cover;
			    margin-left: 10rpx;
			}
		}
		.segmentation {
		    width: 1rpx;
		    height: 90rpx;
		    background: #E6E3E3;
		}
		
	}
    .recent-orders-content {
        background: #fff;
        margin-top: -2rpx;
		
		.recent-orders-title {
		    display: flex;
		    justify-content: left;
		    align-items: center;
		    padding: 30rpx;
			
			image.title-stlye {
			    width: 15rpx;
			    height: 19rpx;
			    background-size: cover;
			    margin-right: 20rpx;
			}
			.title-text {
			    font-family: PingFangSC-Regular, sans-serif;
			    font-size: 30rpx;
			    color: #454545;
			    font-weight: bold;
			}
			
		}
		.ordering-information {
		    padding-bottom: 30rpx;
			
			.order-number {
			    font-family: PingFangSC-Regular, sans-serif;
			    font-size: 26rpx;
			    color: #454545;
			    padding: 0 30rpx;
			}
			.ordering-information-item {
			    display: flex;
			    justify-content: left;
			    align-items: center;
			    padding: 30rpx;
				
				.ordering-pic {
				    width: 120rpx;
				    height: 120rpx;
				    background-size: cover;
				    border-radius: 15rpx;
					
					image.order-chart {
					    width: 120rpx;
					    height: 120rpx;
					    background-size: cover;
					    border-radius: 15rpx;
					}
				}
				.ordering-text {
				    margin-left: 30rpx;
					
					.ordering-text-title {
					    font-family: PingFangSC-Regular, sans-serif;
					    font-size: 30rpx;
					    color: #454545;
					}
					.amount-of-money {
					    font-family: PingFangSC-Regular, sans-serif;
					    font-size: 24rpx;
					    color: #999;
					    padding: 10rpx 0;
						
						span.price-style {
						    font-family: PingFangSC-Regular, sans-serif;
						    font-size: 24rpx;
						    color: #F52F3E;
						}
					}
					.order-time {
					    font-family: PingFangSC-Regular, sans-serif;
					    font-size: 24rpx;
					    color: #999;
					}
				}
			}
			.order-status {
			    display: flex;
			    justify-content: space-around;
			    align-items: center;
			    padding: 30rpx 0;
			    border-top: 1rpx solid #eeeeee;
				
				button.refund-button {
				    width: 120rpx;
				    height: 48rpx;
				    line-height: 44rpx;
				    font-family: PingFangSC-Regular, sans-serif;
				    font-size: 24rpx;
				    color: #454545;
				    border-color: #E5E5E5;
				    background: #fff;
				    border-radius: 100rpx;
				    margin: 0;
				    margin-left: 500rpx;
				    border: 1rpx solid #E5E5E5;
				}
				
				button.refunded-button-style {
				    width: 130rpx;
				    height: 48rpx;
				    line-height: 44rpx;
				    font-family: PingFangSC-Regular, sans-serif;
				    font-size: 24rpx;
				    color: #999 !important;
				    background: #fff;
				    border-radius: 100rpx;
				    margin: 0;
				    margin-left: 500rpx;
				    border: 1rpx solid #E5E5E5;
				}
			}
			.divider-style {
			    width: 690rpx;
			    height: 10rpx;
			    background: #f7f7f7;
			}
		}
		
    }
}
</style>