zxz

package.json

@@ -10,7 +10,6 @@
   "uni-crazy-router": "0.0.31",
   "uni-simple-router": "^2.0.1",
   "uview-ui": "^2.0.30",
-   
   "vue-cli": "^2.9.6",
   "vue-cropper": "^0.5.6",
   "vuex": "^3.6.2",

pages/login/index.vue

@@ -1,20 +1,65 @@
 <template>
 	<view>
-		<view class="userHead">
-			
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>会员登录</h2>
+				<p>欢迎来到荆州工会鹊桥</p>
+			</view>
+			<view class="jpLogin-main">
+				<u--form labelPosition="left" :model="model1" ref="form1">
+					<u-form-item prop="userInfo.name" ref="item1">
+						<view class="jpLogin-input">
+							<u--input v-model="model1.userInfo.name" border="none"></u--input>
+						</view>
+					</u-form-item>
+					<u-form-item prop="userInfo.name" ref="item2">
+						<view class="jpLogin-input">
+							<u--input v-model="model1.userInfo.name" border="none"></u--input>
+						</view>
+					</u-form-item>
+					<u-form-item prop="userInfo.name" ref="item3">
+						<view class="jpLogin-input">
+							<u--input v-model="model1.userInfo.name" border="none"></u--input>
+						</view>
+					</u-form-item>
+				</u--form>
+				<view class="jpLogin-link">
+					<view class="jpLogin-link-l">
+						<p>没有账号，</p>
+						<span>去注册</span>
+					</view>
+					<span>获取验证码</span>
+				</view>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" size="50px" text="登录" shape="circle"></u-button>
+			</view>
+			<view class="jpLogin-radio">
+				<u-radio-group v-model="value" :customStyle="customStyle" placement="row">
+					<u-radio activeColor="#ff5e5e" label="已阅读并同意《会员服务协议》"></u-radio>
+				</u-radio-group>
+			</view>
 		</view>
- 	</view>
+	</view>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-
+				model1: {
+					userInfo: {
+						name: 'uView UI',
+						sex: '',
+					}
+				},
+				value:'0',
+				customStyle:{
+					color: 'red'
+				}
 			}
-
 			methods: {
-				
+
 			}
 
 		}
@@ -22,5 +67,61 @@
 </script>
 
 <style lang="scss" scoped>
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		height: 100vh;
+		padding: 50px;
+	}
+
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
 
-</style>
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 30px;
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+	.jpLogin-radio{
+		margin-top: 16px;
+		text-align: center;
+	}
+</style>

static/css/iconfont.css

@@ -0,0 +1,202 @@
+@font-face {
+  font-family: "custom-icon"; /* Project id 3313719 */
+  src: url('//at.alicdn.com/t/font_3313719_gx8aelqfff.woff2?t=1649493232326') format('woff2'),
+       url('//at.alicdn.com/t/font_3313719_gx8aelqfff.woff?t=1649493232326') format('woff'),
+       url('//at.alicdn.com/t/font_3313719_gx8aelqfff.ttf?t=1649493232326') format('truetype');
+}
+
+.custom-icon {
+  font-family: "custom-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.custom-icon-heart-2-fill:before {
+  content: "\e600";
+}
+
+.custom-icon-home-3-fill:before {
+  content: "\e601";
+}
+
+.custom-icon-information-line:before {
+  content: "\e602";
+}
+
+.custom-icon-heart-2-line:before {
+  content: "\e603";
+}
+
+.custom-icon-information-fill:before {
+  content: "\e604";
+}
+
+.custom-icon-map-pin-2-fill:before {
+  content: "\e605";
+}
+
+.custom-icon-filter-2-fill:before {
+  content: "\e606";
+}
+
+.custom-icon-newspaper-line:before {
+  content: "\e607";
+}
+
+.custom-icon-profile-fill:before {
+  content: "\e608";
+}
+
+.custom-icon-folder-user-fill:before {
+  content: "\e609";
+}
+
+.custom-icon-keyboard-box-line:before {
+  content: "\e60a";
+}
+
+.custom-icon-shield-user-fill:before {
+  content: "\e60b";
+}
+
+.custom-icon-lock-password-fill:before {
+  content: "\e60c";
+}
+
+.custom-icon-send-plane-fill:before {
+  content: "\e60d";
+}
+
+.custom-icon-newspaper-fill:before {
+  content: "\e60e";
+}
+
+.custom-icon-home-3-line:before {
+  content: "\e60f";
+}
+
+.custom-icon-men-line:before {
+  content: "\e610";
+}
+
+.custom-icon-spam-3-fill:before {
+  content: "\e611";
+}
+
+.custom-icon-notification-3-fill:before {
+  content: "\e612";
+}
+
+.custom-icon-user-2-fill:before {
+  content: "\e613";
+}
+
+.custom-icon-thumb-up-fill:before {
+  content: "\e614";
+}
+
+.custom-icon-search-line:before {
+  content: "\e615";
+}
+
+.custom-icon-refresh-line:before {
+  content: "\e616";
+}
+
+.custom-icon-user-5-line:before {
+  content: "\e617";
+}
+
+.custom-icon-women-line:before {
+  content: "\e618";
+}
+
+.custom-icon-thumb-up-line:before {
+  content: "\e619";
+}
+
+.custom-icon-align-top:before {
+  content: "\e61a";
+}
+
+.custom-icon-zoom-out-line:before {
+  content: "\e61b";
+}
+
+.custom-icon-zoom-in-line:before {
+  content: "\e61c";
+}
+
+.custom-icon-account-box-line:before {
+  content: "\e61d";
+}
+
+.custom-icon-arrow-drop-down-fill:before {
+  content: "\e61e";
+}
+
+.custom-icon-smartphone-fill:before {
+  content: "\e61f";
+}
+
+.custom-icon-arrow-left-s-line:before {
+  content: "\e620";
+}
+
+.custom-icon-arrow-down-s-line:before {
+  content: "\e621";
+}
+
+.custom-icon-building-fill:before {
+  content: "\e622";
+}
+
+.custom-icon-user-5-fill:before {
+  content: "\e623";
+}
+
+.custom-icon-camera-fill:before {
+  content: "\e624";
+}
+
+.custom-icon-cellphone-fill:before {
+  content: "\e625";
+}
+
+.custom-icon-check-line:before {
+  content: "\e626";
+}
+
+.custom-icon-chat-heart-line:before {
+  content: "\e627";
+}
+
+.custom-icon-close-fill:before {
+  content: "\e628";
+}
+
+.custom-icon-customer-service-fill:before {
+  content: "\e629";
+}
+
+.custom-icon-eye-line:before {
+  content: "\e62a";
+}
+
+.custom-icon-edit-2-line:before {
+  content: "\e62b";
+}
+
+.custom-icon-file-list-3-line:before {
+  content: "\e62c";
+}
+
+.custom-icon-emotion-line:before {
+  content: "\e62d";
+}
+
+.custom-icon-message-3-fill:before {
+  content: "\e62e";
+}

uni.scss

@@ -19,7 +19,7 @@
 $uni-color-primary: #007aff;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
+$uni-color-error: #ff5e5e;
 
 /* 文字基本颜色 */
 $uni-text-color:#333;//基本色