首页布局

pages.json

@@ -3,7 +3,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "金融工具"	
 			}
 		},{
 			"path": "pages/index/home"
@@ -12,8 +12,8 @@
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationBarBackgroundColor": "#fff",
+		"backgroundColor": "#fff"
 	},
 	"uniIdRouter": {}
 }

pages/dataImport/data-import.vue

+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file

pages/index/home.vue

 <template>
-	hhhh
+	<text>nnnnnn</text>
 </template>
 
 <script>

pages/index/index.vue

 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+		<view class="banner">
+			<img src="/static/images/policyIrrBanner.png" alt="" srcset="">
 		</view>
+		<scroll-view scroll-y="true" class="formInfoContainer">
+			<view class="tabTitle">
+				<text>增额</text>
+				<text>年金</text>
+			</view>
+			<form @submit="formSubmit" @reset="formReset">
+				<!-- 保单信息 -->
+				<view class="policyInfoContent">
+					<view class="title">保单信息</view>
+					<view class="inputItem">
+						<text>交费年限：</text>
+						<input class="uni-input" type="number" placeholder="请输入" /><label for="">年</label>
+					</view>
+					<view class="inputItem">
+						<text>年交保费：</text>
+						<input class="uni-input" type="number" placeholder="请输入" /><label for="">元</label>
+					</view>
+				</view>
+				<!-- 提领信息 -->
+				<view class="claimInfomationContent">
+					<view class="title">提领信息</view>
+				</view>
+				<!-- 现金价值信息 -->
+				<view class="cashValueContent">
+					<view class="title">现金价值</view>
+				</view>
+				<!-- 结果展示 -->
+				<view class="resultContent">
+					<view class="simpleDataResult">
+						<view class="inputItem">
+							<text class="title">IRR复利</text>
+							<text>0%</text>
+						</view>
+						<view class="inputItem">
+							<text class="title">单利</text>
+							<text>0%</text>
+						</view>
+					</view>
+				</view>
+				<!-- 操作 -->
+				<view class="optionContent">
+					<button type="default" plain="true">清空</button>
+					<button type="default" plain="true">开始计算</button>
+				</view>
+				
+			</form>
+			<view class="formContent">
+				
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -24,29 +73,84 @@
 </script>
 
 <style>
-	.content {
+	.logo {
+		width: 100%;
+	}
+	.banner{
+		height: 400rpx;
+	}
+	.banner img{
+		max-width: 100%;
+	}
+	.tabTitle{
+		display: flex;
+		justify-content: space-around;
+		font-size: 16px;
+		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+		font-weight: 400;
+		color: #333333;
+	}
+	.tabTitle text{
+		position: relative;
+	}
+	.tabTitle text::after{
+		position: absolute;
+		bottom: -4rpx;
+		left: 0;
+		content: '';
+		width: 100%;
+		height: 4rpx;
+		background: linear-gradient(125deg,#CEB07D,#FED597);
+	}
+	.formInfoContainer{
+		background: #fff;
+		margin-top: -32rpx;
+		position: relative;
+		z-index: 2;
+		border-top-right-radius: 30rpx;
+		border-top-left-radius: 30rpx;
+		padding: 30rpx;
+		box-sizing: border-box;
+	}
+	.inputItem{
 		display: flex;
-		flex-direction: column;
+		justify-content: space-between;
 		align-items: center;
-		justify-content: center;
+		height: 88rpx;
+		border-bottom: 1px solid #E4E4E4;
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+	.simpleDataResult{
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0,0,0,0.1);
+		border-radius: 5rpx;
+		opacity: 1;
+		margin: 30rpx 15rpx 56rpx;
+		padding: 15rpx 17rpx;
 	}
-
-	.text-area {
+	.simpleDataResult .inputItem:last-child{
+		border:none;
+	}
+	.simpleDataResult .inputItem .title{
+		color: #CEB07D;
+		font-weight: bold;
+	}
+	.optionContent{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
 		display: flex;
 		justify-content: center;
+		align-items: center;
 	}
-
-	.title {
+	.optionContent button{
+		flex: 0 0 46%;
+		border:2rpx solid #e7c793;
+		color: #e7c793;
 		font-size: 36rpx;
-		color: #8f8f94;
+	}
+	.optionContent button:last-child{
+		background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
+		border: none;
 	}
 </style>