null/pages/mine/myKefu.vue

<template>
	<view class="page">
		<view class="p-header flex-col">
			  <view class="flex-row justify-between group_4">
			    <text class="text_2">客服热线</text>
			    <view class="flex-col items-end">
			      <text class="text_3">400-0538-888</text>
			      <text class="text_4">周一至周日8:30-17:30</text>
			    </view>
			  </view>
			  <view class="flex-row justify-between group_6">
			    <text class="text_5">联系邮箱</text>
			    <text class="text_6">manggo@email.com</text>
			  </view>
		</view>
		<view class="p-content">
			<view class="c-item">
				<view class="top align-center justify-between">
			    <text class="txt">常见问题</text>
			    </view>
			</view>
			<view class="c-item">
				<view class="top align-center justify-between">
				  <text class="txt">账户余额充值问题</text>
				  <image
					src="/static/kefu-rarrow.png"
					class="ic"
				  />
			    </view>
			</view>
			<view class=" c-item">
			  <view class="top align-center justify-between">
				  <text class="txt">账户余额充值问题</text>
				  <image
					src="/static/kefu-upic.png"
					class="upic"
				  />
			  </view>
			  <view class="bom">
				  盲盒商品由商家自主上架，具体商品内容须收货后，客户自行打开发现，盲盒内商品价值高于售价，如有疑问，请根据具体内容请联系商家。
			  </view>
			</view>
			
		</view>
		<safe-area bgColor="#fff" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding: 24rpx 30rpx;
}
.p-header{
	  padding-bottom: 50rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 0px 27rpx #2a2a2a1a;
	  border-radius: 10rpx;
	.list-item:last-of-type {
	  margin-top: 24rpx;
	}
	.group_4 {
	  padding: 35rpx 23rpx 35rpx 31rpx;
	  border-bottom: solid 2rpx #0000000f;
	}
	.text_2 {
	  align-self: center;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_3 {
	  margin-right: 9rpx;
	  color: #92b99c;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_4 {
	  margin-top: 13rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
	.group_6 {
	  padding: 51rpx 15rpx 0 31rpx;
	}
	.text_5 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_6 {
	  margin-top: 4rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
}
.p-content{
	margin-top: 24rpx;
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(42,42,42,0.1);
	border-radius: 10rpx;
	.c-item{
	
		border-bottom: solid 2rpx #0000000f;
		padding: 0 30rpx;
		.top{
			height: 108rpx;
		}
		.txt {
		  color: #000;
		  font-size: 30rpx;
		  font-family: PingFang;
		  letter-spacing: 1.2rpx;
		}
		.ic{
		  margin: 5rpx 0 6rpx;
		  width: 11rpx;
		  height: 18rpx;
		}
		.upic{
			  margin: 8rpx 0 10rpx;
			width: 18rpx;
			height: 11rpx;
		}
		.bom{
			margin-top: -10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 37rpx;
			padding-bottom: 30rpx;
		}
	}
}
</style>