修改

马宇豪

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>

 static/login.jpg