#

whycq

2023-10-08 3d775bfea16b5ac26ff0baac10f43b3367b0bf95

 pages/LoginDemo/LoginDemo.vue

@@ -1,7 +1,7 @@
<template>
   <view class="main">
      <!-- 设置按钮 -->
      <uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
      <uni-icons type="gear" size="30" color="#b1b3b8" class="setting" @click="settings"></uni-icons>
      <view class="left">
         <!-- logo -->
         <view class="logo-box">
@@ -10,17 +10,39 @@
      </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"/>
            </view>
         </view>
         <view class="button">
         <view class="button" @click="login">
            登录
         </view>
      </view>
		
		
      <!-- 设置弹窗区域 -->
      <uni-popup ref="settings" type="dialog" style="height: 100%;width: 100%;background-color: aqua;">
         <view class="popup">
            <!-- 标题 -->
            <view class="title">配置</view>
            <view class="popup-item">
               <view class="popup-item-left">IP:</view>
               <view class="popup-item-right"><input type="text" v-model="url.ip"></view>
            </view>
            <view class="popup-item">
               <view class="popup-item-left">端口:</view>
               <view class="popup-item-right"><input type="text" v-model="url.port"></view>
            </view>
            <view class="popup-item">
               <view class="popup-item-left">项目:</view>
               <view class="popup-item-right"><input type="text" v-model="url.project"></view>
            </view>
         </view>
      </uni-popup>
		
      <!-- 版本号 -->
      <!-- #ifdef APP-PLUS -->
      <view class="version">
@@ -35,7 +57,12 @@
      data() {
         return {
            version: '',
				
            remberPassword: true,
            url: {
               ip: '',
               port: '',
               project: ''
            },
         }
      },
      mounted() {
@@ -53,20 +80,35 @@
         // #endif
      },
      methods: {
			
         remberChange() {
				
         },
         settings() {
            this.$refs.settings.open()
         },
         login() {
            let path = 'bf'
            uni.navigateTo({
               url: `/pages/project/${path}/home/home`,
               fail(res) {
                  console.log(`没有${path}项目,请联系管理元`);
               }
					
            })
         }
      }
   }
</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 +124,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 +140,10 @@
   }
   .input-box {
      width: 100%;
      // background-color: #888;
   }
   .my-input {
      width: 80%;
      margin: 16px 10% 16px 10%;
   }
   .rember-password {
      width: 78%;
@@ -106,22 +151,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) {
      /* 竖屏 */
@@ -167,4 +214,9 @@
      font-size: 10px;
      color: #909399;
   }
	
   .popup {
      background-color: #fff;
      width: 100%;
   }
</style>