小程序适配

pageSalesSummary/productSalesRanking.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="table-scroll">
+	<!-- <view class="table-scroll">
 		<table cellspacing="0">
 			<thead>
 				<tr style="background-color: #aebad2;color: #fff;" height='41'>
@@ -16,7 +16,29 @@
 				</tr>
 			</tbody>
 		</table>
-	</view>
+	</view> -->
+	<template>
+		<view class="color-333 u-font-28   bg-gray default-box-padding"  >
+			<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
+				<view class="bg-fff border-r-12  u-flex no-wrap u-col-top">
+					<view class="constantbox">
+						<view class="constantboxitem">
+							<view class="head">商品名称</view>
+							<view class="head">总数量</view>
+							<view class="head">金额</view>
+						</view>
+						<view class="constantboxitem" v-for="(item,index) in tableList" :key="index"
+							@click="toDetail(item)">
+							<view class="head">{{item.productName}}</view>
+							<view class="head">{{item.num}}</view>
+							<view class="head">{{item.salesAmount || '无'}}</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<!-- <view style="height: 100px;"></view> -->
+		</view>
+	</template>
 </template>
 
 <script setup>
@@ -86,4 +108,68 @@
 		width: 250rpx;
 		border: 0.7rpx solid rgba(126, 155, 212, 0.27);
 	}
-</style>
+</style>
+<style lang="scss" scoped>
+
+	.fixed-top {
+		padding: 32rpx 28rpx;
+		z-index: 100;
+	}
+
+	.bottom {
+		background-color: transparent;
+		bottom: 84rpx;
+		left: 28rpx;
+		right: 28rpx;
+	}
+
+	.table {
+		border-radius: 12rpx 12rpx 0rpx 0rpx;
+		overflow: hidden;
+		font-size: 24rpx;
+
+		.constantbox {
+			.constantboxitem {
+				display: flex;
+
+				.head {
+					width: 220rpx;
+					padding: 32rpx 24rpx;
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #333333;
+					overflow: hidden; //超出的文本隐藏
+					text-overflow: ellipsis; //溢出用省略号显示
+					white-space: nowrap; //溢出不换行
+				}
+
+				.head:nth-child(4) {
+					width: 300rpx;
+				}
+
+				.head:nth-child(5) {
+					width: 300rpx;
+				}
+			}
+
+			.constantboxitem:nth-child(even) {
+				background: #fff;
+			}
+
+			.constantboxitem:nth-child(odd) {
+				background: #F7F6FB;
+			}
+
+			.constantboxitem:nth-child(1) {
+				background: #AEBAD2;
+				color: #fff;
+				font-size: 24rpx;
+			}
+		}
+
+		.item:nth-of-type(2n+1) {
+			background-color: rgb(249, 249, 249);
+		}
+	}
+</style>