#

whycq

2023-08-17 290bf03803f24befe259ae201e04e4b73751c5a3

 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 style="width: 80%;margin: 32rpx 10% 32rpx 10%;" />
            <My-input style="width: 80%;margin: 32rpx 10% 8rpx 10%;" />
            <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,15 +34,23 @@
   export default {
      data() {
         return {
            version: '',
            
         }
      },
      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: {
         
@@ -30,56 +58,113 @@
   }
</script>

<style>
<style lang="scss">
   .setting {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      border-radius: 40rpx;
      box-shadow: inset 4rpx 4rpx 4rpx rgba(0,0,0,.3),
               inset -4rpx -4rpx 4rpx rgba(255,255,255,.7),
               -4rpx -4rpx 4rpx 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: 40rpx;
      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%;
      // background-color: #888;
   }
   .rember-password {
      width: 78%;
      margin: 0 11% 0 11%;
      display: flex;
      justify-content: space-between;
      .text {
         line-height: 1;
      }
   }
   .button {
      width: 40%;
      margin: 0 auto;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 20px;
      background-color:  #409EFF;
      color: #ECF0F1;
      border-radius: 14rpx;
      box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
               inset -8rpx -8rpx 8rpx rgba(255,255,255,.4),
               -8rpx -8rpx 10rpx 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>