修改

马宇豪

2024-07-16 518fe95206669eee05488d364c8d3528eaff604f

 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>