登录页样式

pages/login/login.vue

@@ -1,31 +1,34 @@
 <template>
-	<view class="zd_content bg">
-		<view class="p1">欢迎来到</view>
-		<view class="p2">海亮三线LMS系统！</view>
-		<view class="input-box">
-			<input class="large-input" type="text" placeholder="请输入用户名" v-model="user">
+	<view class="login_content">
+		<view class="info-wraper">
+			<view class="p1">欢迎来到</view>
+			<view class="p2">海亮三线LMS系统！</view>
+			<view class="login-bg"></view>
 		</view>
-		<div class="input-box">
-			<input class="large-input" :password="!showPassword" placeholder="请输入密码" v-model="password">
-			<span class="iconfont icon_eye_close" :class="[showPassword ? 'icon_eye_active' : '']" @tap="changePassword">&#xe6a0;</span>
-	    </div>
-		<view class="radio-box">
-			<view class="radio-wrap">
-				<span class="iconfont icon_unchecked" :class="{'icon_checked': saveUser}"  @tap="toSaveUser">&#xe66b;</span>
-				<text class="radio-label">记住用户名</text>
+		<view class="form-wraper">
+			<view class="input-box">
+				<input class="large-input" type="text" placeholder="请输入用户名" v-model="user">
 			</view>
-			<text class="setup-text" @tap="setup">设置</text>
-			<text class="setup-text" @tap="isUpdate">升级版本</text>
+			<div class="input-box">
+				<input class="large-input" :password="!showPassword" placeholder="请输入密码" v-model="password">
+				<span class="iconfont icon_eye_close" :class="[showPassword ? 'icon_eye_active' : '']" @tap="changePassword">&#xe6a0;</span>
+			</div>
+			<view class="radio-box">
+				<view class="radio-wrap">
+					<span class="iconfont icon_unchecked" :class="{'icon_checked': saveUser}"  @tap="toSaveUser">&#xe66b;</span>
+					<text class="radio-label">记住用户名</text>
+				</view>
+				<text class="setup-text" @tap="setup">设置</text>
+				<text class="setup-text" @tap="isUpdate">升级版本</text>
+			</view>
+			<button class="login-btn" :disabled="disabled" @tap="toLogin">确认登录</button>
+			<view v-if="version !== ''" class="version-name">v{{version}}</view>
 		</view>
-		<button class="login-btn" :disabled="disabled" @tap="toLogin">确认登录</button>
-		<!-- <button class="login-btn" @tap="test">打印</button> -->
-		<view v-if="version !== ''" class="version-name">v{{version}}</view>
 		<Up-grade v-if="grade === true" @closeUpdate="closeUpdate" :androidUrl="androidUrl"></up-grade>
 	</view>
 </template>
 
 <script>
-	// import {getCLodop, getPrinterList} from "@/utils/CLodopfuncs.js"
 	import { RSAencrypt } from '@/utils/jsencrypt.js'
 	import {handLogin, pdaUpdate} from '@/utils/getData2.js'
 	import UpGrade from './upgrade.vue'
@@ -60,18 +63,6 @@
 			isUpdate () {
 				this._pdaUpdate()
 			},
-			// test() {
-			// 	let LODOP = getCLodop();
-			// 	// 更换为打印服务器ip 不需要加前缀
-			// 	LODOP.PRINT_INIT(null, "192.168.81.198");
-			// 	// 打印机序号 规则为打印服务器打印机列表倒数从0开始 -1为默认打印机 
-			// 	LODOP.SET_PRINTER_INDEX(-1);
-			// 	// 设置打印纸大小
-			// 	LODOP.SET_PRINT_PAGESIZE(1, 800, 600, "");
-			// 	// 根据需求插入打印代码
-			// 	LODOP.PRINT();  // 打印
-			// 	// LODOP.PREVIEW()
-			// },
 			toSaveUser() {
 				this.saveUser = !this.saveUser
 			},
@@ -123,15 +114,17 @@
 			},
 			async _pdaUpdate () {
 				let res = await pdaUpdate()
-				if (res.versionName === this.version) {
-					uni.showToast({
-						title: '当前为最新版本',
-						icon: 'none'
-					})
-				} else {
-					this.grade = true
-					this.androidUrl = res.url
-				}
+				// if (res.versionName === this.version) {
+				// 	uni.showToast({
+				// 		title: '当前为最新版本',
+				// 		icon: 'none'
+				// 	})
+				// } else {
+				// 	this.grade = true
+				// 	this.androidUrl = res.url
+				// }
+				this.grade = true
+				this.androidUrl = res.url
 			},
 			closeUpdate () {
 				this.grade = false
@@ -142,12 +135,39 @@
 
 <style lang="stylus" scoped>
 @import '../../common/style/mixin.styl';
+.login_content
+  position: relative
+  top 0
+  height: 100%
+  _bis('../../static/image/login_bg.png', 100%,,bottom)
+  background-color #fff
+  overflow: hidden
+.info-wraper
+  position relative
+  _wh(100%, auto)
+  padding 190rpx 0 55rpx 0
+  background linear-gradient(to bottom, #fae2ca 0%, #fff5ea 20%, #fdfdfd 100%)
 .p1
-  _font(40rpx,75rpx,#444, 600)
-  padding-top: 90rpx
+  position relative
+  z-index 10
+  _font(40rpx,75rpx,#444,666)
+  padding 0 40rpx
 .p2
-  _font(52rpx,1,#444, 600)
-  padding: 10rpx 0 55rpx 0
+  position relative
+  z-index 10
+  _font(46rpx,1,#444,600)
+  padding: 10rpx 40rpx 0 40rpx
+.login-bg
+	position: absolute
+	z-index: 1
+	_wh(80%, 100%)
+	right 0
+	bottom 0
+	opacity: 0.3
+	_bis('../../static/image/bg.png', 100%,,bottom)
+.form-wraper
+  width 100%
+  padding 0 40rpx
 .input-box
   _fj()
   margin-top 68rpx
@@ -166,27 +186,16 @@
 	height: 34rpx
 	flex: 2
 .radio-label
-	_font(32rpx, 32rpx,#333)
+	_font(28rpx, 28rpx,#333)
 	padding-left: 10rpx
 .setup-text
-	_font(32rpx, 32rpx,$red,,right)
+	_font(28rpx, 28rpx,$red,,right)
 	padding-left 25rpx
-.bg
-	background-color: #fff;
-	_bis('../../static/image/login_bg.png', 100%,,bottom)
 .login-btn
   width 100%
   border-radius 46rpx
   _font(36rpx,92rpx,#fff,,center)
   background-color $red
-.zd_content
-	position: relative
-	height: 100%
-	width: 100%
-	padding-left 40rpx
-	padding-right 40rpx
-	background linear-gradient(to bottom, #f8e6db 0%, #f6f6f6 30%, #f6f6f6 100%)
-	overflow hidden
 .version-name
 	width 100%
 	position: absolute