8-27

src/assets/css/base.css

@@ -42,4 +42,15 @@ html {
 .new-detail * {
 	max-width: 100%;
 }
+.new-detail table {
+	min-width: 100%;
+}
+.new-detail td {
+	display:table-cell;
+	vertical-align:middle;
+}
+.new-detail table,th,td {
+	border: 1px solid #000;
+	text-align: center;
+}
 

src/views/LoveList.vue

@@ -4,13 +4,30 @@
 			<input type="text" v-model="name" placeholder="请输入捐赠者" class="" @keyup.enter="search()"/>
 			<img src="../assets/img/search.png" class="hand" @click="search()">
 		</div>
-		<el-table :data="tableData" border style="width: 100%">
+		<!-- <el-table :data="tableData" border style="width: 100%" class="tabb">
 			<el-table-column prop="time" label="捐献时间" width="154" align="center"></el-table-column>
 			<el-table-column prop="donate_er" label="捐献者" width="409" align="center"></el-table-column>
 			<el-table-column prop="money" label="捐献金额" width="140" align="center"></el-table-column>
 			<el-table-column prop="intention" label="捐献意向" width="356" align="center"></el-table-column>
 			<el-table-column prop="mark" label="备注" align="center"></el-table-column>
-		</el-table>
+		</el-table> -->
+		<div class="list-title flex">
+			<div style="width: 154px">捐献时间</div>
+			<div  style="width: 409px">捐献者</div>
+			<div  style="width: 140px">捐献金额</div>
+			<div  style="width: 356px">捐献意向</div>
+			<div  style="width: 133px">备注</div>
+		</div>
+		<div class="list-item flex" v-for="(item, index) in tableData" :key="index">
+			<div class="clamp"  style="width: 154px">{{item.time}}</div>
+			<div class="clamp"  style="width: 409px">{{item.donate_er}}</div>
+			<div class="clamp" style="width: 140px">{{item.money}}</div>
+			<div class="clamp" style="width: 356px">{{item.intention}}</div>
+			<div class="clamp" style="width: 133px">{{item.mask}}</div>
+		</div>
+		<div class="table-empty" v-if="tableData.length == 0">
+			暂无更多捐赠数据
+		</div>
 		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="limit" hide-on-single-page></el-pagination>
 	</div>
 </template>
@@ -148,4 +165,53 @@ export default {
 		height: 20px;
 	}
 }
+.tabb {
+	border-right: 1px solid #000000;
+	border-bottom: 1px solid #000000;
+}
+.list-title {
+	// display: flex;
+	text-align: center;
+	border: 2px solid #ccc;
+	line-height: 36px;
+	font-size: 18px;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #D82020;
+	// border-top: none;
+	div {
+		border-right: 2px solid #ccc;
+		&:last-of-type {
+			border-right: none;
+		}
+	}
+	
+}
+.list-item {
+	text-align: center;
+	border: 2px solid #ccc;
+	font-size: 16px;
+	line-height: 36px;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #101010;
+	border-top: none;
+	div {
+		border-right: 2px solid #ccc;
+		&:last-of-type {
+			border-right: none;
+			
+		}
+	}
+}
+.table-empty {
+	// width: 100%;
+	text-align: center;
+	border: 2px solid #F2F2F2;
+	font-size: 16px;
+	line-height: 36px;
+	font-family: PingFang SC;
+	font-weight: bold;
+	border-top: none;
+}
 </style>