首页,小优化

pages/enter/enter-navigator.vue

@@ -100,7 +100,7 @@
 			box-sizing: border-box;
 			height: 100%;
 			top: 0px;
-			right: 10px;
+			right: 15px;
 			align-items: center;
 			.user_regist{
 				display: flex;
@@ -121,7 +121,7 @@
 				background-color: #4C9CF1;
 				justify-content: center;
 				align-items: center;
-				margin-left: 10px;
+				margin-left: 15px;
 			}
 		}
 	}

pages/home/home-brief.vue

@@ -0,0 +1,91 @@
+<template>
+	<view class="container">
+		<view class="briefContent">
+			<view class="briefContent_info">
+				<view class="briefContent_info_title">
+					智能助理
+				</view>
+				<view class="briefContent_info_content">
+					基于人工智能技术开发而成的个人助手，能够极大地提高办公和生活效率为用户节省处理事务的时间和精力。无论是在工作还是日常生活中，智能助理都可以帮助用户提高处理信息的速度，更快地完成工作和安排，打造更加便捷、高效的生活。通过智能学习和精准分析，智能助理还可以了解用户的喜好和习惯，为用户提供个性化的服务和建议，让用户的使用更加舒适和无忧。
+				</view>
+				<view class="briefContent_button">
+					立即体验 →
+				</view>
+			</view>
+			<view class="briefContent_robotImg">
+				<image src="/static/home//home_robot.png" mode="aspectFit"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container{
+		display: flex;
+		box-sizing: border-box;
+		width: 100%;
+		background-color: red;
+		.briefContent{
+			display: flex;
+			width: 100%;
+			height: 250px;
+			padding: 18px;
+			align-items: center;
+			justify-content: space-between;
+			background-color: #2A2832;
+			.briefContent_info{
+				position: relative;
+				width: 100%;
+				height: 100%;
+				// background-color: yellow;
+				.briefContent_info_title{
+					font-size: 25px;
+					font-weight: 700;
+					color: #ffffff;
+				}
+				.briefContent_info_content{
+					margin-top: 12px;
+					font-size: 18px;
+					font-weight: 400;
+					height: 125px;	
+					line-height: 30px;
+					color: #ffffff;
+					overflow: hidden;
+					text-overflow: ellipsis;		
+				}
+				.briefContent_button{
+					position: absolute;
+					margin-top: 25px;
+					left: 40%;
+					display: flex;
+					width: 170px;
+					height: 45px;
+					border-radius: 8px;
+					font-size: 20px;
+					color: #ffffff;
+					background: linear-gradient(to right, #1BC8C8, #D4F906);
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.briefContent_robotImg{
+				margin-left: 10px;
+				width: 440px;
+				height: 225px;
+			}
+		}
+	}
+</style>

pages/home/home-serviceTrait.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="serviceTraitContainer">
+		<view class="title">
+			服务特点
+		</view>
+		<view class="info">
+			<view class="box" v-for="(item, index) in dataList" :key="index">
+				<view class="box_icon">
+					<image :src="item.icon" mode="aspectFit"></image>
+				</view>
+				<view class="box_name">
+					{{ item.name }}
+				</view>
+				<view class="box_describe">
+					{{ item.describe }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dataList: [{'icon':'/static/home/home_service1.png', 'name':'易于上手', 'describe':'无需学习,立即上手'},
+				           {'icon':'/static/home/home_service2.png', 'name':'功能强大', 'describe':'精准、快速进行信息搜索'},
+						   {'icon':'/static/home/home_service3.png', 'name':'多语言识别', 'describe':'支持多语言文字识别'},
+						   {'icon':'/static/home/home_service4.png', 'name':'个性化服务', 'describe':'量身打造个性化服务'}]
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.serviceTraitContainer{
+		display: flex;
+		box-sizing: border-box;
+		flex-direction: column;
+		width: 100%;
+		padding: 20px;
+		.title {
+			display: flex;
+			font-size: 25px;
+			color: #2A2832;
+			justify-content: center;
+			margin-bottom: 15px;
+		}
+		.info{
+			display: flex;
+			box-sizing: border-box;
+			flex-direction: row;
+			.box{
+				display: flex;
+				box-sizing: border-box;
+				flex-direction: column;
+				width: 25%;
+				height: 170px;
+				align-items: center;
+				// background-color: red;
+				.box_icon{
+					width: 90px;
+					height: 90px;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.box_name{
+					margin-top: 0px;
+					font-size: 22px;
+					font-weight: 700;
+					color: #000000;
+				}
+				.box_describe{
+					margin-top: 10px;
+					font-size: 20px;
+					font-weight: 500;
+					color: #000000;
+				}
+			}
+		}
+	}
+</style>

pages/home/home.vue

@@ -1,25 +1,13 @@
 <template>
 	<view class="container" :style="{'top': viewTop + 'px', 'height': viewHeight + 'px'}">
-		<view class="briefContent">
-			<view class="briefContent_info">
-				<view class="briefContent_info_title">
-					智能助理
-				</view>
-				<view class="briefContent_info_content">
-					基于人工智能技术开发而成的个人助手，能够极大地提高办公和生活效率为用户节省处理事务的时间和精力。无论是在工作还是日常生活中，智能助理都可以帮助用户提高处理信息的速度，更快地完成工作和安排，打造更加便捷、高效的生活。通过智能学习和精准分析，智能助理还可以了解用户的喜好和习惯，为用户提供个性化的服务和建议，让用户的使用更加舒适和无忧。
-				</view>
-				<view class="briefContent_button">
-					立即体验 →
-				</view>
-			</view>
-			<view class="briefContent_robotImg">
-				<image src="/static/home//home_robot.png" mode="aspectFit"></image>
-			</view>
-		</view>
+		<brief />
+		<serviceTrait />
 	</view>
 </template>
 
 <script>
+	import brief from '../../pages/home/home-brief.vue'
+	import serviceTrait from '../../pages/home/home-serviceTrait.vue'
 	export default {
 		data() {
 			return {
@@ -38,6 +26,10 @@
 		},
 		methods: {
 			
+		},
+		components: {
+			brief,
+			serviceTrait
 		}
 	}
 </script>
@@ -46,57 +38,9 @@
 	.container{
 		display: flex;
 		box-sizing: border-box;
+		position: relative;
 		flex-direction: column;
-		position: fixed;
 		left: 0;
 		width: 100%;
-		.briefContent{
-			display: flex;
-			width: 100%;
-			height: 250px;
-			padding: 18px;
-			align-items: center;
-			justify-content: space-between;
-			background-color: #2A2832;
-			.briefContent_info{
-				position: relative;
-				width: 100%;
-				height: 100%;
-				// background-color: yellow;
-				.briefContent_info_title{
-					font-size: 25px;
-					font-weight: 700;
-					color: #ffffff;
-				}
-				.briefContent_info_content{
-					margin-top: 12px;
-					font-size: 18px;
-					font-weight: 400;
-					height: 125px;	
-					color: #ffffff;
-					overflow: hidden;
-					text-overflow: ellipsis;		
-				}
-				.briefContent_button{
-					position: absolute;
-					margin-top: 25px;
-					left: 40%;
-					display: flex;
-					width: 170px;
-					height: 45px;
-					border-radius: 8px;
-					font-size: 20px;
-					color: #ffffff;
-					background: linear-gradient(to right, #1BC8C8, #D4F906);
-					justify-content: center;
-					align-items: center;
-				}
-			}
-			.briefContent_robotImg{
-				margin-left: 10px;
-				width: 440px;
-				height: 225px;
-			}
-		}
 	}
 </style>