移动端登录页面

monitorMobile/App.vue

@@ -1,26 +1,33 @@
 <script>
 	export default {
-		onLaunch: function() {
-		},
-		onShow: function() {
-		},
-		onHide: function() {
-		}
+		onLaunch: function() {},
+		onShow: function() {},
+		onHide: function() {}
 	}
 </script>
 
 <style lang="scss">
 	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 	@import "uview-ui/index.scss";
-	.uni-tabbar-bottom{
-		.uni-tabbar{
-			box-shadow: 0px -3px 9px 0px rgba(0,0,0,0.06), 0px 4px 4px 0px rgba(0,0,0,0.01);
+
+	@font-face {
+		font-family: 'Alimama ShuHeiTi';//字体别名
+		src: url('/static/fonts/alimamashuheiti.ttf') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.uni-tabbar-bottom {
+		.uni-tabbar {
+			box-shadow: 0px -3px 9px 0px rgba(0, 0, 0, 0.06), 0px 4px 4px 0px rgba(0, 0, 0, 0.01);
 		}
 	}
-	uni-page-body{
+
+	uni-page-body {
 		height: 100%;
 	}
-	body{
+
+	body {
 		background-color: #F6F8FA;
 	}
-</style>
+</style>

monitorMobile/components/cell.vue

@@ -1,5 +1,5 @@
 <template>
-	<u-cell :title="title" isLink :border="false" @click="click" :titleStyle="{fontSize:'28rpx',color:hasValue?'#333':'#666'}">
+	<u-cell :title="title" isLink :border="false" @click="click" :titleStyle="{fontSize:'28rpx',color:hasValue?'#333':'#666',textAlign:align}">
 		<view v-if="multiple&&cellValue.length" slot="title" class="u-slot-title selectedBox">
 			<view v-for="(item,index) in cellValue" :key="index">
 				{{item}}
@@ -24,6 +24,9 @@
 			cellValue: {
 				default: () => [],
 			},
+			align: {
+				default: "left",
+			},
 		},
 		methods: {
 			click() {

monitorMobile/components/selectRadio.vue

@@ -1,7 +1,7 @@
 <template>
 	<view @touchmove.stop @touch.stop>
 		<myCell v-show="cellVisible" :title="title_" isLink :border="false" :hasValue="value?true:false"
-			@click="cellClick"></myCell>
+			@click="cellClick" :align="align"></myCell>
 		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
 			<view style="max-height: 800rpx;overflow-y: auto;">
 				<u-radio-group v-model="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
@@ -36,6 +36,9 @@
 			cellVisible: {
 				default: true,
 			},
+			align: {
+				default: "left",
+			},
 		},
 		data() {
 			return {

monitorMobile/pages.json

@@ -116,7 +116,6 @@
 				"navigationBarTitleText": "处理结果"
 			}
 		},
-
 		// 我的
 		{
 			"path": "pages/my/index",
@@ -124,6 +123,14 @@
 				"navigationBarTitleText": "我的",
 				"navigationStyle": "custom"
 			}
+		},
+		// 登录
+		{
+			"path": "pages/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

monitorMobile/pages/login.vue

@@ -0,0 +1,145 @@
+<template>
+	<view style="height: 100%;">
+		<view class="logoBox">
+			<image src="/static/image/logo.png" mode="heightFix"></image>
+			<view class="logoText">
+				AI监控预警分析平台
+			</view>
+		</view>
+		<view class="loginBox">
+			<view class="title">
+				账号登录
+			</view>
+			<u--form labelPosition="left" :model="form" labelWidth="30rpx" :rules="rules" ref="uForm">
+				<u-form-item prop="name">
+					<u--input v-model="form.name" border="none" placeholder="请输入账号"
+						:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}"></u--input>
+				</u-form-item>
+				<u-form-item prop="pass">
+					<u--input v-model="form.pass" :type="passType" border="none" placeholder="请输入密码"
+						:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}">
+						<!-- <i slot="suffix" class="icon-style" :class="elIcon" autocomplete="auto" @click="flag = !flag" /> -->
+						<view slot="suffix">
+							<u-icon v-show="passType=='text'" name="eye" color="#777777" size="38rpx"
+								@click="passType='password'"></u-icon>
+							<image v-show="passType=='password'" src="/static/image/eyeclose.png"
+								style="width: 38rpx;height: 38rpx;margin-top: 12rpx;" @click="passType='text'">
+							</image>
+						</view>
+					</u--input>
+				</u-form-item>
+				<u-form-item>
+					<u-button @click="login" :loading="isLoading" :disabled="isLoading" text="登录" :color="'#2388FF'"
+						:customStyle="{height:'98rpx',borderRadius:'20rpx',marginTop:'60rpx'}"></u-button>
+				</u-form-item>
+			</u--form>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+					pass: '',
+				},
+				passType: 'password',
+				isLoading: false,
+				rules: {
+					name: [{
+						required: true,
+						message: '请输入账号',
+						trigger: ['blur', 'change']
+					}],
+					pass: [{
+						required: true,
+						message: '请输入密码',
+						trigger: ['blur', 'change']
+					}, {
+						validator: (rule, value, callback) => {
+							if (value.length < 6) {
+								callback(new Error('请输入正确的密码'));
+								return
+							}
+							callback();
+						},
+					}]
+				}
+			}
+		},
+		methods: {
+			login() {
+				this.$refs.uForm.validate(valid => {
+					if (!valid) return
+					this.isLoading = true
+				})
+			}
+		},
+		onReady() {
+			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
+			this.$refs.uForm.setRules(this.rules)
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	body,
+	uni-page-body {
+		background-color: #fff;
+	}
+
+	uni-page-body {
+		background-image: url('/static/image/loginBg.png');
+		background-position: top;
+		background-size: 100% auto;
+		background-repeat: no-repeat;
+	}
+
+	input[type="password"]::-ms-reveal {
+		display: none!important;
+	}
+
+	.logoBox {
+		/* #ifdef H5*/
+		padding-top: 42rpx;
+		/* #endif */
+		/* #ifndef H5*/
+		padding-top: 88rpx;
+		/* #endif */
+		text-align: center;
+
+		uni-image {
+			height: 80rpx;
+			margin-top: 160rpx;
+		}
+
+		.logoText {
+			font-family: 'Alimama ShuHeiTi';
+			font-weight: 700;
+			color: #333;
+			margin-top: 24rpx;
+			font-size: 40rpx;
+		}
+	}
+
+	.loginBox {
+		border-radius: 40rpx;
+		background-color: #fff;
+		height: calc(100% - 880rpx);
+		margin-top: 46rpx;
+		padding: 60rpx 60rpx 0 60rpx;
+
+		.title {
+			color: #333;
+			font-size: 42rpx;
+			margin-bottom: 30rpx;
+			// font-weight: 700;
+		}
+		
+		/deep/.u-form-item__body{
+			padding: 15rpx 0;
+		}
+	}
+</style>

monitorMobile/pages/my/index.vue

@@ -57,7 +57,7 @@
 				<view class="title">
 					{{this.action}}
 				</view>
-				<u--input v-model="inputValue" placeholder="请输入" border="surround" clearable></u--input>
+				<u--input v-model="inputValue" :customStyle="{height: '84rpx',boxSizing:'border-box'}" placeholder="请输入" border="surround" clearable></u--input>
 				<view class="bottom">
 					<view class="cancel" @click="cancel">
 						取消
@@ -132,14 +132,24 @@
 
 <style scoped lang="scss">
 	uni-page-body {
+		/* #ifdef H5*/
+		background-image: url('/static/image/mybgh5.png');
+		/* #endif */
+		/* #ifndef H5*/
 		background-image: url('/static/image/mybg.png');
+		/* #endif */
 		background-position: top;
 		background-size: 100% auto;
 		background-repeat: no-repeat;
 	}
 
 	.header {
+		/* #ifdef H5*/
+		padding-top: 40rpx;
+		/* #endif */
+		/* #ifndef H5*/
 		padding-top: 88rpx;
+		/* #endif */
 		color: #333;
 
 		.headerContent {
@@ -177,10 +187,12 @@
 
 		// padding: 0 30rpx;
 		.title {
+			font-family: 'Alimama ShuHeiTi';
 			font-weight: 700;
 			color: #2388FF;
 			font-size: 42rpx;
-			padding: 50rpx 30rpx 30rpx;
+			line-height: 42rpx;
+			padding: 60rpx 30rpx 30rpx;
 		}
 	}
 

monitorMobile/pages/work/index.vue

@@ -62,17 +62,28 @@
 
 <style lang="scss" scoped>
 	.header{
+		/* #ifdef H5*/
+		padding-top: 42rpx;
+		line-height: 56rpx;
+		/* #endif */
+		/* #ifndef H5*/
 		padding-top: 88rpx;
+		line-height: 88rpx;
+		/* #endif */
 		color: #fff;
 		font-size: 34rpx;
-		line-height: 88rpx;
 		font-weight: 700;
 	}
 	.page{
 		padding: 0 30rpx;
 	}
 	uni-page-body{
+		/* #ifdef H5*/
+		background-image: url('/static/image/work/bgh5.png');
+		/* #endif */
+		/* #ifndef H5*/
 		background-image: url('/static/image/work/bg.png');
+		/* #endif */
 		background-position: top;
 		background-size: 100% auto;
 		background-repeat: no-repeat;

monitorMobile/pages/work/rollCall/detail.vue

@@ -132,7 +132,7 @@
 			.status {
 				display: inline-block;
 				font-size: 24rpx;
-				line-height: 1.8;
+				line-height: 46rpx;
 				color: #fff;
 				padding: 0 12rpx;
 				border-radius: 8rpx;
@@ -195,7 +195,7 @@
 
 			.item {
 				background-color: #fff;
-				border-radius: 35rpx;
+				border-radius: 37rpx;
 				padding: 0 56rpx;
 				line-height: 74rpx;
 				margin-right: 30rpx;
@@ -242,7 +242,7 @@
 						.status {
 							display: inline-block;
 							font-size: 24rpx;
-							line-height: 1.8;
+							line-height: 46rpx;
 							color: #fff;
 							padding: 0 12rpx;
 							border-radius: 8rpx;

monitorMobile/pages/work/rollCall/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view style="height: 100%;">
 		<view class="topBox">
-			<SelectRadio v-model="search.departCalss" placeholder="请选择摄像头" :options="[{value:1,label:'走廊尽头(海康)'},{value:2,label:'厨房(海康)'},{value:3,label:'走廊尽头(海康)'},{value:4,label:'厨房(海康)'}]" />
+			<SelectRadio v-model="search.departCalss" align="center" placeholder="请选择摄像头" :options="[{value:1,label:'走廊尽头(海康)'},{value:2,label:'厨房(海康)'},{value:3,label:'走廊尽头(海康)'},{value:4,label:'厨房(海康)'}]" />
 		</view>
 		<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty>
 		<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 150rpx);">
@@ -178,7 +178,7 @@
 			display: flex;
 			justify-content: right;
 			flex: 1;
-			padding-top: 12rpx;
+			padding-top: 19rpx;
 			.btn {
 				text-align: center;