101 lines
1.9 KiB
Vue
101 lines
1.9 KiB
Vue
<template>
|
|
|
|
|
|
<view class="box">
|
|
<view class="content">
|
|
<view class="tit">
|
|
欢迎进入吟龙土壤墒情监测溯系统!
|
|
</view>
|
|
<view class="input-card">
|
|
<view class="login-type">
|
|
账号登录
|
|
<view class="line" />
|
|
</view>
|
|
<view class="" style="margin: 30rpx 0;">
|
|
<up-input placeholder="请输入账号"
|
|
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" shape='circle'
|
|
border="surround" v-model="formData.account"></up-input>
|
|
</view>
|
|
<view class="">
|
|
<up-input type="password" shape='circle'
|
|
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" placeholder="请输入密码"
|
|
border="surround" v-model="formData.password"></up-input>
|
|
</view>
|
|
<view class="sub-btn">
|
|
<up-button @click="submitFn" type="primary" customStyle="border:none;height:90rpx" color="#34D190"
|
|
text="登录"></up-button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref
|
|
} from 'vue';
|
|
const submitFn = () => {
|
|
|
|
uni.switchTab({
|
|
url: "/pages/index/index"
|
|
})
|
|
}
|
|
const formData = reactive({
|
|
account: "",
|
|
password: ""
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: $theme-main-color;
|
|
position: relative;
|
|
}
|
|
|
|
.content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 700rpx;
|
|
|
|
.tit {
|
|
color: white;
|
|
font-size: 45rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.input-card {
|
|
width: 620rpx;
|
|
background-color: #fff;
|
|
height: auto;
|
|
padding: 40rpx;
|
|
border-radius: 30rpx;
|
|
|
|
.login-type {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.line {
|
|
border-top: 3px solid #34D190;
|
|
margin-left: 30rpx;
|
|
margin-top: 10rpx;
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
|
|
.sub-btn {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |