update table first column & cell to fixed

components/Table/Table.vue

@@ -25,7 +25,7 @@
 								<view class="cell">{{ cell.shopName }}</view>
 							</view>
 							
-							<view class="content-cell"  v-for="(item, index) in elementInfo.table.column" :key="index">
+							<view :class="[cellIndex %2 == 1 ? 'content-cell-bg' :'content-cell']"  v-for="(item, index) in elementInfo.table.column" :key="index">
 								<view v-if="item.dataIndex != 'shopName'">
 									<template class="cell" v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
 									<template class="cell" v-else-if="item.slots.customRender == 'picture'">
@@ -125,7 +125,7 @@
 			tableStyle() {
 				const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
 				const { backgroundColor } = this.elementInfo.table.tableCell
-				const width = 200 + this.elementInfo.table.column.length * 250;
+				const width = 150 + this.elementInfo.table.column.length * 150;
 				console.log('width',width)
 				return `width: ${width}rpx`;
 			}
@@ -211,15 +211,15 @@
 <style lang="scss" scoped>
 .analysis-group {
 	margin-top: 20px;
-	width: 100%;;
+	width: 100vw;
 	height: 100%;
 	scroll-view {
 		width: 100vw;
-		height: 40vh;
+		height: 100%;
 	}
 }
-$title-width: 200rpx;
-$content-width: 250rpx;
+$title-width: 150rpx;
+$content-width: 150rpx;
 $border-color: #f6f6f6;
 $border: 1rpx solid $border-color;
 $white: #FFFFFF;
@@ -227,8 +227,6 @@ $title-color: #f6f6f6;
 .table {
 	display: table;
 	.table-header {
-		// display: table-row;
-		// font-weight: bold;
 		background-color: $title-color;
 		position: sticky;
 		top: 0;
@@ -247,8 +245,9 @@ $title-color: #f6f6f6;
 			}
 			.column {
 				position: absolute;
-				left: 10rpx;
-				bottom: 10rpx;
+				left: 60rpx;
+				bottom: 15rpx;
+				font-size: 25rpx;
 			}
 		}
 		.content-cell {
@@ -261,18 +260,21 @@ $title-color: #f6f6f6;
 		&__item {
 			display: table-row;
 			.title-cell {
-				border-left: $border;
-				border-right: $border;
+				// border-left: $border;
+				// border-right: $border;
 				border-bottom: $border;
 				position: sticky;
 				left: 0;
 				z-index: 1;
 				align-items: center;
+				text-align: center;
 				justify-content: center;
 			}
 			.content-cell {
 				border-bottom: $border;
-				border-right: $border;
+				// border-right: $border;
+				text-align: center;
+				font-size: 20rpx;
 			}
 		}
 	}
@@ -282,17 +284,28 @@ $title-color: #f6f6f6;
 		background-color: $title-color;
 		align-items: center;
 		justify-content: center;
+		text-align: center;
 	}
+	.content-cell-bg {
+		display: table-cell;
+		width: $content-width;
+		text-align: center;
+		font-size: 20rpx;
+		background-color:$title-color ;
+	}
+	
 	.content-cell {
 		display: table-cell;
 		width: $content-width;
+		text-align: center;
+		font-size: 20rpx;
 	}
 	.cell {
-		padding: 5px 0px ;
-		// line-height: 1.6;
-		font-size: 28rpx;
+		padding: 10px 0px ;
+		font-size: 20rpx;
 		align-items: center;
 		justify-content: center;
+		text-align: center;
 
 	}
 }