From 518fe95206669eee05488d364c8d3528eaff604f Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 16 七月 2024 17:32:26 +0800
Subject: [PATCH] 修改
---
pages/index/index.vue | 89 +++++++++++++++++++++++++++++---------------
1 files changed, 59 insertions(+), 30 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5047d7e..b048cda 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,24 +1,27 @@
<template>
<view class="box">
- <view class="header">
- <view class="titleFirst"><b>安全在线教育平台</b></view>
+ <view class="main">
+ <view class="header">
+ <view class="titleFirst"><b>安全在线教育平台</b></view>
+ </view>
+ <view>
+ <u-form :model="form" ref="uForm" class="form" >
+ <u-form-item style="width: 75%;"><u-input :customStyle="cstyle" v-model="form.username" placeholder="请输入用户名" /></u-form-item>
+ <u-form-item style="margin-top: 10px;width: 75%;" ><u-input :customStyle="cstyle" v-model="form.password" type="password" placeholder="请输入密码" /></u-form-item>
+ <!-- <view class="loginPsw">
+ <u-checkbox-group >
+ <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
+ </u-checkbox-group>
+ <text style="color: lightblue;">忘记密码</text>
+ </view> -->
+ <u-form-item style="margin-top: 10px;width: 75%;">
+ <u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 44px" @click="Login" type="primary">登录</u-button>
+ </u-form-item>
+ <!-- <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
+ </u-form>
+ </view>
</view>
- <view>
- <u-form :model="form" ref="uForm" class="form" >
- <u-form-item style="width: 75%;"><u-input :customStyle="cstyle" v-model="form.username" placeholder="请输入用户名" /></u-form-item>
- <u-form-item style="margin-top: 10px;width: 75%;" ><u-input :customStyle="cstyle" v-model="form.password" type="password" placeholder="请输入密码" /></u-form-item>
- <!-- <view class="loginPsw">
- <u-checkbox-group >
- <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
- </u-checkbox-group>
- <text style="color: lightblue;">忘记密码</text>
- </view> -->
- <u-form-item style="margin-top: 10px;width: 75%;">
- <u-button :loading="isLogining" style="width: 100%;height: 44px" @click="Login" type="primary">登录</u-button>
- </u-form-item>
-<!-- <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
- </u-form>
- </view>
+
</view>
</template>
@@ -43,7 +46,9 @@
isLogining: false,
cstyle: {
background: '#fff',
- padding: '10px'
+ padding: '10px',
+ boxShadow: '0 2px 4px rgba(0,0,0,.2),0 -2px 4px rgba(255,255,255,.2),inset 0 2px 4px rgba(0,0,0,.2)',
+ border: '1px solid #fff'
}
}
},
@@ -159,16 +164,34 @@
}
</script>
-<style>
+<style scoped>
.box{
width: 100%;
height: 100vh;
- background: url('../../static/login1.jpg') no-repeat;
+ background: url('../../static/login.jpg') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
display: flex;
flex-direction: column;
+ justify-content: center;
}
+
+.main{
+ width: 100%;
+ height: 50vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-shadow:0 0 1px #000;
+}
+
.titleFirst{
text-align: center;
font-size: 32px;
@@ -183,24 +206,30 @@
color:#fff;
margin-top: 10px;
}
-.header {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding-top:120px;
- text-shadow:0 0 1px #000;
-}
.form{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
- margin-top: 25%;
+ margin-top: 40px;
}
.loginPsw{
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
+
+.loginBtn{
+ border: 1px solid rgba(255,255,255,.4);
+ box-shadow: 0 2px 4px rgba(0,0,0,.2);
+ background-image: linear-gradient(#41a2ff,#0f7ff9);
+ transition: box-shadow .25s ease !important;
+}
+
+.loginBtn:active{
+ box-shadow: 0 2px 4px rgba(0,0,0,0);
+ background-image: linear-gradient(#0f7ff9,#41a2ff);
+}
+
+
</style>
--
Gitblit v1.9.2