|
@@ -0,0 +1,128 @@
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+const showPassword = ref(false);
|
|
|
+const formData = ref({
|
|
|
+ username: '',
|
|
|
+ password: ''
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+
|
|
|
+ <view class="login-viewport">
|
|
|
+ <TheNavBar title-text="登录" class="nav-bar"></TheNavBar>
|
|
|
+
|
|
|
+ <view class="login-content">
|
|
|
+
|
|
|
+ <view class="logo-inner">
|
|
|
+ <image src="https://static.fuxicarbon.com/bigModel/wechat/login/img-desc.png" class="img-desc"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="form-inner">
|
|
|
+ <view class="login-form-item">
|
|
|
+ <image src="https://static.fuxicarbon.com/bigModel/wechat/login/icon-username.png" class="image"></image>
|
|
|
+ <input class="inp" v-model="formData.username" placeholder="请输入账号" placeholder-style="color: #ADB0BD" />
|
|
|
+ </view>
|
|
|
+ <view class="login-form-item">
|
|
|
+ <image src="https://static.fuxicarbon.com/bigModel/wechat/login/icon-password.png" class="image"></image>
|
|
|
+ <input class="inp uni-input" :password="!showPassword" v-model="formData.password" placeholder="请输入密码"
|
|
|
+ placeholder-style="color: #ADB0BD" />
|
|
|
+ <uni-icons size="20" :type="showPassword ? 'eye' : 'eye-slash'" color="#ADB0BD" class="icon-eye"
|
|
|
+ @click="showPassword = !showPassword"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <button class="sub-btn" hover-color="sub-btn_hover">
|
|
|
+ <text>登录</text>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="text-inner">
|
|
|
+ <text>人工智能运营体智慧决策助手</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.login-viewport {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ height: 100vh;
|
|
|
+ background: url("https://static.fuxicarbon.com/bigModel/wechat/login/bg-login.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .login-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-flow: column;
|
|
|
+ padding: 132rpx 60rpx 36rpx 60rpx;
|
|
|
+
|
|
|
+ .logo-inner {
|
|
|
+ .img-desc {
|
|
|
+ width: 500rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-inner {
|
|
|
+ width: 628rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .login-form-item {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .inp {
|
|
|
+ height: 52rpx;
|
|
|
+ padding: 24rpx 96rpx 24rpx 96rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background: #F6F7F8;
|
|
|
+ line-height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 40rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ .icon-eye {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 40rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-btn {
|
|
|
+ height: 100rpx;
|
|
|
+ margin-top: 180rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: #8AB1FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-inner {
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #727687;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|