Merge branch 'fanghuisheng' of uskycloud/usky-web-mobile into master

src/pages/login.vue

@@ -4,11 +4,13 @@
       <image class="bgImage" :src="bg" v-if="bg" />
       <image class="bgImage" src="@/static/images/wt/bg.png" v-if="!bg" />
     </view>
-    <view class="top">
-      <image class="logo" :src="logo" mode="widthFix" v-if="logo" />
-      <text class="title">{{ title }}</text>
-    </view>
+
     <view class="middle login">
+      <view class="top">
+        <image class="logo" :src="logo" mode="widthFix" v-if="logo" />
+        <text class="title">{{ title }}移动端登录</text>
+      </view>
+
       <view id="login-input" style="margin-top: 20px" v-if="switchText == '账号密码登录'">
         <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号码" />
       </view>
@@ -20,9 +22,9 @@
       </view>
 
       <view id="login-input" style="margin-top: 20px" v-if="switchText == '验证码登录'">
-        <u-input type="text" v-model="username" prefixIcon="lock" placeholder="请输入账号" />
+        <u-input type="text" v-model="username" prefixIcon="account" placeholder="请输入账号" />
 
-        <u-input style="margin-top: 20px" v-model="password" prefixIcon="search" placeholder="请输入密码" :password="inputIconBool">
+        <u-input style="margin-top: 20px" v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="inputIconBool">
           <template #suffix>
             <text class="iconfont ucicon-eye" @click="inputIcon()" v-if="!inputIconBool"></text>
             <text class="iconfont ucicon-eye-close" @click="inputIcon()" v-if="inputIconBool"></text>
@@ -58,7 +60,7 @@ const { proxy } = getCurrentInstance();
 const data = reactive({
   /** saas数据 */
   bg: "/static/images/wt/bg.png",
-  logo: undefined,
+  logo: "/static/logo.png",
   title: undefined,
   bottomTitle: undefined,
   /** login数据 */
@@ -267,10 +269,10 @@ onLoad(() => {
 
 <style lang="scss" scoped>
 .section {
-  position: fixed;
-  height: 100%;
+  display: flex;
   width: 100%;
-  overflow: hidden;
+  height: 100%;
+
   .bg {
     width: 100%;
     height: 100%;
@@ -285,44 +287,50 @@ onLoad(() => {
       height: 100%;
     }
   }
-  .top {
-    margin: 90px auto 0px;
-    .logo {
-      width: 110px;
-      margin: 0 auto 44px;
-      display: block;
-    }
-    .title {
-      width: 100%;
-      position: absolute;
-      z-index: 1;
-      font-size: 20px;
-      text-align: center;
-      color: #fff;
-      font-weight: 700;
-    }
-  }
+
   .middle {
-    position: absolute;
+    position: relative;
     z-index: 1;
-    width: calc(100% - 64px);
-    margin: 40px 32px 0;
+    width: 100%;
+    padding: 0 40px;
+    margin: auto;
+    margin-top: 30%;
+
+    .top {
+      display: flex;
+      margin-bottom: 60px;
+      .logo {
+        width: 50px;
+        height: 50px;
+        margin: 0 20px 0 auto;
+      }
+      .title {
+        font-size: 20px;
+        text-align: center;
+        color: #fff;
+        margin: auto auto auto 0;
+      }
+    }
+
     .switchText {
       color: #fff;
-      font-size: 18px;
-      margin-top: 19px;
+      font-size: 16px;
+      margin-top: 20px;
       width: 100%;
       display: block;
     }
+
     .submit {
-      height: 48px;
-      line-height: 48px;
+      height: 45px;
+      line-height: 45px;
       border-radius: 24px;
       background: #2a98ff;
       color: #fff;
       margin-top: 45px;
+      border: 0px;
     }
   }
+
   .bottom {
     position: absolute;
     width: 100%;
@@ -333,87 +341,9 @@ onLoad(() => {
       font-size: 14px;
     }
   }
-}
-
-.content {
-  height: 434rpx;
-  text-align: center;
-  position: relative;
-}
-
-.login-box {
-  height: 600rpx;
-  position: relative;
-  top: -150rpx;
-  background: #fff;
-  border-radius: 30rpx;
-  padding: 100rpx 20rpx;
-}
-
-.shadow {
-  box-shadow: 0px 2px 4px rgb(26 26 26 / 10%);
-}
-
-.title {
-  position: absolute;
-  color: #fff;
-  font-size: 60rpx;
-  bottom: 180rpx;
-  display: block;
-  width: 100%;
-}
 
-input,
-button {
-  width: 100%;
-  height: 100rpx;
-  line-height: 100rpx;
-  opacity: 1;
-  border: 1px solid #dbdbdb;
-  border-radius: 100rpx;
-  background: #fff;
-  color: #333;
-  margin: 40rpx 0;
-  font-size: 34rpx;
-}
-
-input {
-  text-indent: 100rpx;
-}
-.submit {
-  background: #4074e7;
-  color: #fff;
-}
-.phone-box,
-.password-box {
-  position: relative;
-}
-.password-box .verify {
-  font-size: 30rpx;
-  color: #999999;
-}
-.left-icon {
-  position: absolute;
-  left: 48rpx;
-  top: 50%;
-  margin-top: -20rpx;
-  line-height: 100%;
-  font-size: 40rpx;
-  color: #7a7a7a;
-}
-.right-icon {
-  position: absolute;
-  right: 48rpx;
-  top: 50%;
-  margin-top: -20rpx;
-  line-height: 100%;
-  font-size: 40rpx;
-}
-.right-icon.verify {
-  margin-top: -10rpx;
-  color: #4074e7;
-}
-.iconfont {
-  color: #999;
+  .iconfont {
+    color: #999;
+  }
 }
 </style>

src/static/scss/public.scss

@@ -142,9 +142,10 @@ uni-input {
  */
 #login-input {
   .u-input {
-    height: 48px;
+    height: 45px;
     border-radius: 24px;
     padding: 5px 12px !important;
+    border-color: #7e7e7e !important;
     background-color: rgba(255, 255, 255, 0.1) !important;
   }
 
@@ -171,13 +172,14 @@ uni-input {
 
   .u-button {
     width: 35%;
-    height: 48px;
-    line-height: 48px;
+    height: 45px;
+    line-height: 45px;
     color: #fff;
     border-radius: 24px;
     margin: 0 0 0 5%;
     font-size: 17px !important;
     white-space: nowrap;
+    border-color: #7e7e7e !important;
     background-color: rgba(255, 255, 255, 0.1) !important;
   }