css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/meeting/login/login.vue

@@ -1,19 +1,53 @@
<template>
   <view class="login">

      <!-- 头部背景图片 -->
      <view class="login_head"

      :style="{ height: 'calc(' + height + ' + ' + '388rpx)', backgroundImage: 'url(' + backgroundImage + ')' }"></view>

    <view

      class="login_head"

      :style="{

        height: 'calc(' + height + ' + ' + '388rpx)',

        backgroundImage: 'url(' + backgroundImage + ')',

      }"

    ></view>

      

      <!-- 登录框 -->

      <view class="login_box">

         <view class="login_box_input">

            <input type="text" v-model="from.account" placeholder="请输入账号名称" placeholder-class="placeholder" />

        <input

          type="text"

          v-model="from.account"

          placeholder="请输入账号名称"

          placeholder-class="placeholder"

        />

         </view>

         <view class="login_box_input">

            <input type="password" v-if="!isOpen" v-model="from.password" placeholder="请输入密码" placeholder-class="placeholder" />

            <input type="text" v-else v-model="from.password" placeholder="请输入密码" placeholder-class="placeholder" />

            <u-icon name="eye-fill" color="#999999" size="20" v-if="!isOpen" @click="isOpen = true"></u-icon>

            <u-icon name="eye-off" color="#999999" size="20" v-else @click="isOpen = false"></u-icon>

        <input

          type="password"

          v-if="!isOpen"

          v-model="from.password"

          placeholder="请输入密码"

          placeholder-class="placeholder"

        />

        <input

          type="text"

          v-else

          v-model="from.password"

          placeholder="请输入密码"

          placeholder-class="placeholder"

        />

        <u-icon

          name="eye-fill"

          color="#999999"

          size="20"

          v-if="!isOpen"

          @click="isOpen = true"

        ></u-icon>

        <u-icon

          name="eye-off"

          color="#999999"

          size="20"

          v-else

          @click="isOpen = false"

        ></u-icon>

         </view>

         <view class="login_box_sub" @click="login">登录</view>

      </view>

@@ -34,13 +68,13 @@
               password: ''

            },

            isOpen: false
         };
    }

      },

      computed: {

         ...mapState(['statusbarHeight', 'navHeight']),

         

         height() {

            return `${this.statusbarHeight + this.navHeight}px`;

      return `${this.statusbarHeight + this.navHeight}px`

         }

      },

      methods: {

@@ -62,10 +96,10 @@
                              .then(resa => {

                                 uni.switchTab({

                                    url: '/pages/index/index'

                                 });

                    })

                              })

                        }

                     });

            })

                  }

               })

         }

@@ -100,7 +134,7 @@
         height: 100rpx;

         display: flex;

         align-items: center;

         background: #F7F7F7;

      background: #f7f7f7;

         border-radius: 4rpx;

         margin-bottom: 40rpx;

         padding: 0 40rpx;

@@ -126,12 +160,12 @@
         height: 100rpx;

         line-height: 100rpx;

         text-align: center;

         background: #0055FF;

      background: #0055ff;

         border-radius: 4rpx;

         font-size: 32rpx;

         font-family: PingFangSC-Medium, PingFang SC;

         font-weight: 500;

         color: #FFFFFF;

      font-weight: 600;

      color: #ffffff;

         margin-top: 60rpx;

      }

   }