#

whycq

2023-10-08 75252c6ad38784d0d753344dba37057e852df189

 pages/LoginDemo/LoginDemo.vue

@@ -1,12 +1,32 @@
<template>
   <view class="main">
      <!-- 设置按钮 -->
      <uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
      <view class="left">
         <!-- logo -->
         <view class="logo-box">
            <image src="../../static/img/logo.png" mode="aspectFit"></image>
         </view>
      </view>
      <view class="right">right</view>
      <view class="right">
         <view class="input-box">
            <My-input class="my-input" titleIcon="person" title="账号" placeholder="请输入账号" inputType="text" optIcon="bottom" />
            <My-input class="my-input" titleIcon="locked" title="密码" placeholder="请输入密码" inputType="password" optIcon="eye" optIconShow/>
            <view class="rember-password">
               <view class="text">记住密码</view>
               <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
            </view>
         </view>
         <view class="button">
            登录
         </view>
      </view>
      <!-- 版本号 -->
      <!-- #ifdef APP-PLUS -->
      <view class="version">
         当前版本:{{version}}
      </view>
      <!-- #endif -->
   </view>
</template>

@@ -14,72 +34,144 @@
   export default {
      data() {
         return {
				
            version: '',
            remberPassword: true
         }
      },
      mounted() {
         uni.getSystemInfo({
            success(res) {
               console.log(res);
               // console.log(res);
            }
         })
         // 手机端版本号
         // #ifdef APP-PLUS
         var that = this
         plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
            that.version = wgtinfo.version
         });
         // #endif
      },
      methods: {
			
         remberChange() {
				
         }
      }
   }
</script>

<style>
<style lang="scss" scoped>
   .setting {
      position: absolute;
      top: 8px;
      right: 8px;
      border-radius: 10px;
      box-shadow: inset 2px 2px 2px rgba(0,0,0,.3),
               inset -2px -2px 2px rgba(255,255,255,.7),
               -2px -2px 2px rgba(0,0,0,.4);
   }
   .main {
      height: 100%;
      width: 100%;
      display: flex;
      background-color: #ECF0F1;
      position: absolute;
   }
   .left {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .logo-box {
      background-color:  #ECF0F1;
      border-radius: 15px;
      box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
               inset -8px -8px 8px rgba(255,255,255,.7),
               -8px -8px 10px rgba(0,0,0,.4);
   }
   image {
      height: 100%;
      width: 100%;
   }
   .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
   }
   .input-box {
      width: 100%;
   }
   .my-input {
      width: 80%;
      margin: 16px 10% 16px 10%;
   }
   .rember-password {
      width: 78%;
      margin: 0 11% 0 11%;
      display: flex;
      justify-content: space-between;
      .text {
         font-size: 12px;
         color: #606266;
         line-height: 1;
      }
   }
   .button {
      width: 40%;
      margin: 0 auto;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      background-color:  #409EFF;
      color: #ECF0F1;
      border-radius: 7px;
      box-shadow: inset 4px 4px 4px rgba(0,0,0,.3),
               inset -4px -4px 4px rgba(255,255,255,.4),
               -4px -4px 5px rgba(0,0,0,.4);
   }
   @media screen and (orientation: portrait) {
      /* 竖屏 */
      .main {
         position: absolute;
         height: 100%;
         width: 100%;
         background-color: crimson;
         display: flex;
         flex-direction: column;
      }
      .left {
         height: 40%;
         width: 100%;
         background-color: aqua;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      .right {
         height: 40%;
         width: 100%;
      }
      .logo-box {
         height: 60%;
         background-color: aliceblue;
      }
      image {
         height: 100%;
         width: 80%;
      }
   }
   @media screen and (orientation: landscape) {
      /* 横屏 */
      .main {
         position: absolute;
         height: 100%;
         width: 100%;
         background-color: crimson;
         display: flex;
      }
      .left {
         height: 100%;
         width: 50%;
         background-color: aqua;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      .right {
         height: 100%;
         width: 50%;
      }
      .logo-box {
         height: 40%;
         background-color: aliceblue;
         height: 60%;
         width: 80%;
      }
      image {
         height: 100%;
      }
   }
   .version {
      position: fixed;
      width: 100%;
      bottom: 0;
      text-align: center;
      font-size: 10px;
      color: #909399;
   }
</style>