基本信息

colorui/main.scss

@@ -1199,6 +1199,7 @@ button.cuIcon.lg {
   position: absolute;
   right: 0;
   display: flex;
+  flex: 1;
   width: 260upx;
   height: 100%;
   transform: translateX(100%);
@@ -2323,9 +2324,9 @@ button.cuIcon.lg {
 
 .cu-form-group {
   background-color: $white;
-  padding: 1upx 30upx;
+  // padding: 1upx 30upx;
   display: flex;
-  align-items: center;
+  align-items: left;
   min-height: 100upx;
   justify-content: space-between;
 }
@@ -2335,23 +2336,20 @@ button.cuIcon.lg {
 }
 
 .cu-form-group .title {
-  text-align: justify;
+  text-align: left;
   padding-right: 30upx;
-  font-size: 30upx;
+  font-size: 32upx;
   position: relative;
-  height: 60upx;
-  line-height: 60upx;
 }
 
 .cu-form-group input {
-  flex: 1;
-  font-size: 30upx;
-  color: #555;
+  font-size: 34upx;
+  color: $gray;
   padding-right: 20upx;
 }
 
 .cu-form-group > text[class*='cuIcon-'] {
-  font-size: 36upx;
+  font-size: 34upx;
   padding: 0;
   box-sizing: border-box;
 }

pages.json

@@ -21,6 +21,12 @@
       "style": {
         "navigationBarTitleText": "领取健康码"
       }
+    },
+    {
+      "path": "pages/basic-info/basic-info",
+      "style": {
+        "navigationBarTitleText": "基本信息填写"
+      }
     }
 
   ],

pages/basic-info/basic-info.vue

@@ -0,0 +1,89 @@
+<template>
+	<view>
+		<form class="padding-lr cu-form-group flex-direction">
+			<view class="cu-form-group flex flex-direction padding-tb-sm">
+				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>姓名</view>
+				<input placeholder="请输入真实姓名" name="input" type="text" v-model="name" />
+			</view>
+			<view class="cu-form-group flex flex-direction padding-tb-sm">
+				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>身份证</view>
+				<input placeholder="请输入身份证号" name="input" type="text" v-model="IDcard" />
+			</view>
+			<view class="cu-form-group flex flex-direction padding-tb-sm">
+				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>联系方式</view>
+				<input placeholder="请输入手机号码" name="input" type="number" v-model="phone" />
+			 </view>
+			<view class="cu-form-group flex flex-direction padding-tb-sm">
+				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>身份</view>
+				<radio-group class="block" @change="RadioChange">
+					<view class="flex">
+						<view class="flex-sub margin-tb-sm" v-for="(identity,index) in identitys" :key="index">
+							<label class="flex justify-between align-center">
+								<radio class="round margin-right-xs" :checked="index === current" :value="identity.value"></radio>
+								<text class="flex-sub" style="font-size: 34rpx;">{{ identity.name }}+{{current}}</text>
+							</label>
+						</view>
+					</view>
+				</radio-group>
+			</view>
+			<view class="cu-form-group flex flex-direction padding-tb-sm">
+				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>学号</view>
+				<input placeholder="请输入学号" name="input" type="text" v-model="studentID" />
+			</view>
+		</form>
+		<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="confirm">确认提交</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+		name: '',
+		IDcard: '',
+		phone: '',
+		identitys: [
+			{
+				value: '0',
+				name: '学生',
+			},
+			{
+				value: '1',
+				name: '教师',
+			},
+			{
+				value: '2',
+				name: '工作人员',
+			},
+		],
+		studentID: '',
+		current: 0
+	};
+  },
+  methods: {
+	RadioChange: function(evt) {
+		for (let i = 0; i < this.identitys.length; i++) {
+			if (this.identitys[i].value === evt.target.value) {
+				this.current = i;
+				break;
+			}
+		}
+	},
+	
+	/**
+	 * 提交基本信息
+	*/
+	confirm() {
+		
+	    console.log('信息提交');
+	},
+	
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+	.primary-btn{
+		border-radius: 15rpx;
+	}
+</style>

pages/index/components/home.vue

@@ -58,7 +58,7 @@ export default {
 	name: 'Home',
 	data() {
 		return {
-			coad: true,
+			coad: false,
 		}
 	}
 };

pages/index/components/mine.vue

@@ -8,7 +8,7 @@
 				</view>
 				<view class="flex-sub padding-left">
 					<view class="text-xl">{{ userInfo.nickName }}</view>
-					<view class="text-df padding-top-xs description">{{ userInfo.classes }}</view>
+					<view class="text-df padding-top-xs">{{ userInfo.classes }}</view>
 				</view>
 				<view :style="{'color':userInfo.healthyCodeColor}" class="iconfont icon-qrcode healthy-coad"></view>
 			</view>
@@ -16,20 +16,20 @@
 		<!-- 列表 -->
 		<view class="bg-white margin-top">
 			<view class="cu-list menu margin-lr">
-			  <view class="cu-item">
-				<view class="text-lg">个人信息</view>
+			  <view class="cu-item" hover-class="cc-active" @tap="openPage('/pages/basic-info/basic-info')">
+				<text class="text-xl">个人信息</text>
 				<view class="iconfont icon-right more"></view>
 			  </view>
-			  <view class="cu-item">
-				<view class="text-lg">我的健康打卡</view>
+			  <view class="cu-item" hover-class="cc-active">
+				<text class="text-xl">我的健康打卡</text>
 				<view class="iconfont icon-right more"></view>
 			  </view>
-			  <view class="cu-item">
-				<view class="text-lg">我的行程</view>
+			  <view class="cu-item" hover-class="cc-active">
+				<text class="text-xl">我的行程</text>
 				<view class="iconfont icon-right more"></view>
 			  </view>
-			  <view class="cu-item">
-				<view class="text-lg">我的校园打卡</view>
+			  <view class="cu-item" hover-class="cc-active">
+				<text class="text-xl">我的校园打卡</text>
 				<view class="iconfont icon-right more"></view>
 			  </view>
 			</view>