XEH-miniProgram/pages/index/index.vue

<template>
  <view class="page-wrap">
    <image class="banner banner-1" src="../../static/img_banner_1.jpg" mode="aspectFill"></image>
		<view class="category-panel">
			
		</view>
		<image class="banner banner-2" src="../../static/img_banner_2.jpg" mode="aspectFill"></image>
		<view class="title-row">
			<view class="line"></view>
			<view class="point"></view>
			<view class="title">热门服务</view>
			<view class="point"></view>
			<view class="line"></view>
		</view>
		<view class="product-panel">
			<view class="item" v-for="(item,index) in [1,2,3,4,5]" :key="index">
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {

    };
  }
};
</script>

<style lang="scss" scoped>
.banner{
	width: 100%;
	display: block;
	margin-bottom: 13.74rpx;
	&-1{
		height: 391.48rpx;
	}
	&-2{
		height: 171.7rpx;
	}
}
.category-panel{
	height: 412.09rpx;
	background: #fff;
	margin-bottom: 13.74rpx;
}
.title-row {
	height: 82.42rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #e0e0e0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	.line {
		width: 42.58rpx;
		height: 1rpx;
		background: #ccc;
		margin: 0 5.49rpx;
	}
	.point {
		width: 8.24rpx;
		height: 8.24rpx;
		border-radius: 50%;
		background: #ccc;
	}
	.title {
		font-size: 30.22rpx;
		padding: 0 13.74rpx;
	}
}
</style>