对接接口

2021-11-03 21:02:22 +08:00
parent 411ecf4c05
commit c5c2f661a0
71 changed files with 5436 additions and 145 deletions
@@ -0,0 +1,113 @@
+<template>
+	<div class="merit-box">
+		<van-nav-bar
+			left-arrow
+			v-if="$route.meta.showNavBar"
+			:title="$route.meta.title"
+			@click-left="$router.back()"
+			:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
+		/>
+		<div class="merit-container">
+			<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" src="https://img1.baidu.com/it/u=614501043,2936454496&fm=26&fmt=auto" alt="">
+			<div class="merit-rank-container">
+				<div class="head">
+					<span class="title">
+						感恩功德
+						<b class="sub-title">重庆石林寺</b>
+					</span>
+					<div class="list">
+						<span class="current">实时</span>
+						<span>月榜</span>
+						<span>总榜</span>
+					</div>
+				</div>
+				<div class="body">
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+				</div>
+			</div>
+			<div class="merit-button-group">
+				<button class="merit-button">随喜功德</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data(){
+		return {
+			width: 0
+		}
+	},
+	mounted(){
+		this.width = window.innerWidth;
+	}
+};
+</script>
+
+<style lang="scss">
+.merit-box{
+	.goods-picture{
+		vertical-align: top;
+	}
+	.merit-rank-container{
+		.head{
+			padding: .53rem .4rem;
+			padding-bottom: .13rem;
+			display: flex;
+			justify-content: space-between;
+			.title{
+				font-size: .43rem;
+				color: #222222;
+				.sub-title{
+					font-size: .35rem;
+					margin-left: .4rem;
+					display: inline-block;
+					color: #666;
+				}
+			}
+			.list{
+			display: flex;
+			span{
+				font-size: .37rem;
+				color: #999999;
+				display: inline-block;
+				margin-left: .4rem;
+				border-bottom: .03rem solid transparent;
+				padding-bottom: .13rem;
+			}
+			span.current{
+				color: #222;
+				border-bottom-color: rgb(168, 28, 28);
+			}
+			}
+		}
+	}
+	.merit-button-group{
+		text-align: center;
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: .4rem 0;
+		border-top: .01rem solid #ddd;
+		.merit-button{
+			display: inline-block;
+			background: $primary-color;
+			color: white;
+			height: .93rem;
+			font-size: .37rem;
+			padding: 0 .53rem;
+			border: .01rem solid $primary-color;
+			border-radius: $btn-border-radius;
+		}
+	}
+}
+</style>