#

whycq

2023-10-08 75252c6ad38784d0d753344dba37057e852df189

 pages/LoginDemo/LoginDemo.vue

@@ -10,8 +10,8 @@
      </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%;" />
            <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"/>
@@ -35,7 +35,7 @@
      data() {
         return {
            version: '',
				
            remberPassword: true
         }
      },
      mounted() {
@@ -53,20 +53,22 @@
         // #endif
      },
      methods: {
			
         remberChange() {
				
         }
      }
   }
</script>

<style lang="scss">
<style lang="scss" scoped>
   .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);
      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%;
@@ -82,7 +84,7 @@
   }
   .logo-box {
      background-color:  #ECF0F1;
      border-radius: 40rpx;
      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);
@@ -98,7 +100,10 @@
   }
   .input-box {
      width: 100%;
      // background-color: #888;
   }
   .my-input {
      width: 80%;
      margin: 16px 10% 16px 10%;
   }
   .rember-password {
      width: 78%;
@@ -106,22 +111,24 @@
      display: flex;
      justify-content: space-between;
      .text {
         font-size: 12px;
         color: #606266;
         line-height: 1;
      }
   }
   .button {
      width: 40%;
      margin: 0 auto;
      height: 100rpx;
      height: 50px;
      text-align: center;
      line-height: 100rpx;
      line-height: 50px;
      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);
      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) {
      /* 竖屏 */