企业列表接口对接；首页页面；企业服务页面；

pages/index/index.scss

@@ -0,0 +1,101 @@
+.page-wrap {
+	padding-bottom: 41.21rpx;
+}
+.banner {
+	width: 100%;
+	display: block;
+	margin-bottom: 13.74rpx;
+	&-1 {
+		height: 391.48rpx;
+	}
+	&-2 {
+		height: 171.7rpx;
+	}
+	&-3 {
+		width: 708.79rpx;
+		height: 645.6rpx;
+		padding: 20.6rpx;
+		background: #fff;
+		margin: 0;
+	}
+}
+.category-panel {
+	height: 412.09rpx;
+	background: #fff;
+	margin-bottom: 13.74rpx;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 13.74rpx 0;
+	box-sizing: border-box;
+	.item {
+		flex: 0 0 25%;
+		text-align: center;
+		font-size: 27.47rpx;
+		padding: 13.74rpx 0;
+	}
+	.icon {
+		display: block;
+		margin: 0 auto 13.74rpx;
+		width: 118.13rpx;
+		height: 118.13rpx;
+	}
+}
+.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;
+	}
+}
+.product-panel {
+	background: #fff;
+	padding: 20.6rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: 13.74rpx;
+	.item {
+		width: 347.53rpx;
+		height: 302.2rpx;
+		margin-bottom: 13.74rpx;
+		text-align: center;
+	}
+	.img {
+		width: 100%;
+		height: 219.78rpx;
+		display: block;
+		margin-bottom: 13.74rpx;
+	}
+	.name {
+		font-size: 24.73rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.desc {
+		font-size: 21.98rpx;
+		color: #999;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}

pages/index/index.vue

@@ -1,8 +1,11 @@
 <template>
-  <view class="page-wrap">
-    <image class="banner banner-1" src="../../static/img_banner_1.jpg" mode="aspectFill"></image>
+	<view class="page-wrap">
+		<image class="banner banner-1" src="../../static/img_banner_1.jpg" mode="aspectFill"></image>
 		<view class="category-panel">
-			
+			<view class="item" v-for="(item, index) in navList" :key="index" @click="handleOpenCategory">
+				<image class="icon" src="../../static/auth-icon.png"></image>
+				{{ item.label }}
+			</view>
 		</view>
 		<image class="banner banner-2" src="../../static/img_banner_2.jpg" mode="aspectFill"></image>
 		<view class="title-row">
@@ -13,63 +16,73 @@
 			<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 class="item" v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
+				<image class="img" src="../../static/img_banner_1.jpg" mode="aspectFill"></image>
+				<view class="name">财务大包（年度）</view>
+				<view class="desc">超值低价，便捷省心</view>
 			</view>
 		</view>
+		<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>
+		<image class="banner banner-3" src="../../static/img_home_about.png" mode="aspectFit"></image>
 	</view>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-
-    };
-  }
+	data() {
+		return {
+			navList: [
+				{
+					label: '记账报税',
+					value: 1
+				},
+				{
+					label: '税控托管',
+					value: 2
+				},
+				{
+					label: '社保代缴',
+					value: 3
+				},
+				{
+					label: '出口退税',
+					value: 4
+				},
+				{
+					label: '财税代办',
+					value: 5
+				},
+				{
+					label: '工商代办',
+					value: 6
+				},
+				{
+					label: '资质许可',
+					value: 7
+				},
+				{
+					label: '超值套餐',
+					value: 8
+				}
+			]
+		};
+	},
+	methods: {
+		handleOpenCategory() {
+			uni.navigateTo({
+				url: 'product/category'
+			});
+		}
+	}
 };
 </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>
+@import 'index.scss';
+</style>

pages/index/product/category.vue

@@ -1,22 +1,199 @@
 <template>
-	<view>
-		
+	<view class="page-wrap">
+		<scroll-view scroll-y class="nav-panel">
+			<view :class="{ item: true, active: navActive === item.value }" @click="navActive = item.value" v-for="(item, index) in navList" :key="index">
+				{{ item.label }}
+			</view>
+		</scroll-view>
+		<view class="product-panel">
+			<view class="item">
+				<view class="box">记账报税（年度）</view>
+				<view class="name">记账报税（年度）</view>
+				<view class="desc">记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税记账+报税</view>
+				<view class="tags">
+					<view class="tag">下单送礼品</view>
+					<view class="tag">返券</view>
+				</view>
+				<view class="price" data-text="年">3600</view>
+			</view>
+			<view class="item">
+				<view class="box">记账报税（年度）</view>
+				<view class="name">记账报税（年度）</view>
+				<view class="desc">记账+报税</view>
+				<view class="tags">
+					<view class="tag">下单送礼品</view>
+					<view class="tag">返券</view>
+				</view>
+				<view class="price" data-text="年">3600</view>
+			</view>
+			<view class="item">
+				<view class="box">记账报税（年度）</view>
+				<view class="name">记账报税（年度）</view>
+				<view class="desc">记账+报税</view>
+				<view class="tags">
+					<view class="tag">下单送礼品</view>
+					<view class="tag">返券</view>
+				</view>
+				<view class="price" data-text="年">3600</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
+export default {
+	data() {
+		return {
+			navActive: 1,
+			navList: [
+				{
+					label: '记账报税',
+					value: 1
+				},
+				{
+					label: '税控托管',
+					value: 2
+				},
+				{
+					label: '社保代缴',
+					value: 3
+				},
+				{
+					label: '出口退税',
+					value: 4
+				},
+				{
+					label: '财税代办',
+					value: 5
+				},
+				{
+					label: '工商代办',
+					value: 6
+				},
+				{
+					label: '银行代办',
+					value: 7
+				},
+				{
+					label: '资质·许可',
+					value: 8
+				},
+				{
+					label: '法律咨询',
+					value: 9
+				},
+				{
+					label: '超值套餐',
+					value: 10
+				}
+			]
+		};
+	},
+	methods: {}
+};
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.page-wrap {
+	padding-left: 164.84rpx;
+}
+.nav-panel {
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 164.84rpx;
+	background: #f2f2f2;
+	.item{
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: 89.29rpx;
+		text-align: center;
+		padding: 0 13.74rpx;
+		font-size: 24.73rpx;
+		color: #333;
+	}
+	.active{
+		color: #00bcd2;
+		background: #fff;
+	}
+}
+.product-panel{
+	.item{
+		height: 192.31rpx;
+		background: #fff;
+		position: relative;
+		padding: 13.74rpx 20.6rpx 0 199.18rpx;
+		box-sizing: border-box;
+		border-bottom: 1rpx solid #e0e0e0;
+		&:last-child{
+			border: none;
+		}
+	}
+	.box{
+		width: 157.97rpx;
+		height: 157.97rpx;
+		position: absolute;
+		left: 20.6rpx;
+		top: 13.74rpx;
+		font-size: 27.47rpx;
+		color: #fff;
+		text-align: center;
+		word-break: break-all;
+		background: #0a9efe;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 13.74rpx;
+		box-sizing: border-box;
+	}
+	.name{
+		font-size: 27.47rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.desc{
+		font-size: 24.73rpx;
+		color: #999;
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-line-clamp: 2; 
+		-webkit-box-orient: vertical;
+		max-height: 82.42rpx;
+		word-break: break-all;
+	}
+	.tags{
+		overflow: hidden;
+		.tag{
+			float: left;
+			font-size: 21.98rpx;
+			color: #F97631;
+			padding: 2.75rpx 13.74rpx;
+			border: 1rpx solid #F97631;
+			margin: 13.74rpx 13.74rpx 0 0;
+		}
+	}
+	.price{
+		font-size: 41.21rpx;
+		color: #F97631;
+		position: absolute;
+		right: 20.6rpx;
+		bottom: 20.6rpx;
+		line-height: 1;
+		&:before{
+			content: '￥';
+			font-size: 24.73rpx;
+		}
+		&::after{
+			content: attr(data-text);
+			font-size: 21.98rpx;
+			color: #999;
+			margin-left: 4.12rpx;
+			vertical-align: middle;
+		}
+	}
+}
 </style>