上传

App.vue

@@ -10,10 +10,10 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	/*每个页面公共css */
 	body{
-		background-color: #f7f7f7;
+		background-color: $uni-bg-color;
 		font-size: 30rpx;
 	}
 	.page{

pages/index/index.vue

@@ -1,6 +1,41 @@
 <template>
 	<view class="page">
 		
+		<view class="banner">
+			<uv-swiper
+			:list="bannerList" 
+			indicator
+			height="620rpx"
+			indicatorStyle="bottom: 100rpx;"
+			keyName="url"></uv-swiper>
+			
+			<view class="top">
+				<view class="search">
+					<uv-search 
+					placeholder="请输入搜索服务" 
+					:showAction="false"
+					v-model="keyword"></uv-search>
+				</view>
+				<view class="title">
+					<image src="/static/image/home/title.png" mode=""></image>
+				</view>
+			</view>
+		</view>
+		
+		<view class="content">
+			<view class="grid">
+				<uv-grid :border="false"
+				:col="5">
+					<uv-grid-item 
+					v-for="(item,index) in baseList" 
+					:key="index">
+						<image class="grid-icon" :src="item.icon" mode=""></image>
+						<text class="grid-text">{{item.title}}</text>
+					</uv-grid-item>
+				</uv-grid>
+			</view>
+		</view>
+		
 		
 		<PrivacyAgreementPoup/>
 		
@@ -24,18 +59,61 @@
 					pageSize: 10,
 					title: ''
 				},
+				baseList : [
+					{
+						icon : '/static/image/home/g1.png',
+						title : '申遗历程',
+					},
+					{
+						icon : '/static/image/home/g2.png',
+						title : '遗产概况',
+					},
+					{
+						icon : '/static/image/home/g3.png',
+						title : '遗产讲述',
+					},
+					{
+						icon : '/static/image/home/g4.png',
+						title : '达人同游',
+					},
+					{
+						icon : '/static/image/home/g5.png',
+						title : '遗产路径',
+					},
+					{
+						icon : '/static/image/home/g6.png',
+						title : '我要跟拍',
+					},
+					{
+						icon : '/static/image/home/g7.png',
+						title : '非遗体验',
+					},
+					{
+						icon : '/static/image/home/g8.png',
+						title : '无忧服务',
+					},
+					{
+						icon : '/static/image/home/g9.png',
+						title : '文创好物',
+					},
+					{
+						icon : '/static/image/home/g10.png',
+						title : '我要帮助',
+					},
+				],
 				bannerList: [
 					{
-						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+						url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
 					}, 
 					{
-						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+						url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
 					}, 
 					{
-						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+						url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
 					},
 				],
 				productList: [],
+				keyword : '',
 			}
 		},
 		computed : {
@@ -48,6 +126,50 @@
 
 <style scoped lang="scss">
 	.page{
-		
+		padding-bottom: 200rpx;
+		.banner{
+			position: relative;
+			.top{
+				position: absolute;
+				top: var(--status-bar-height);
+				left: 0;
+				padding-top: 30rpx;
+				display: flex;
+				width: 100%;
+				flex-direction: column;
+				align-items: center;
+				.search{
+					width: 400rpx;
+					margin-left: -100rpx;
+					/deep/ .uv-search__content__icon{
+						padding: 30rpx 0;
+					}
+				}
+				.title{
+					image{
+						width: 600rpx;
+						height: 300rpx;
+					}
+				}
+			}
+		}
+		.content{
+			position: relative;
+			min-height: 300rpx;
+			background-color: #fff;
+			margin-top: -60rpx;
+			border-top-right-radius: 60rpx;
+			border-top-left-radius: 60rpx;
+			.grid{
+				padding: 20rpx 0;
+				.grid-icon{
+					width: 60rpx;
+					height: 60rpx;
+				}
+				.grid-text{
+					font-size: 26rpx;
+				}
+			}
+		}
 	}
 </style>