147 lines
2.4 KiB
Vue
147 lines
2.4 KiB
Vue
<template>
|
||
<view class="begin">
|
||
<image src="/static/logo.png"></image>
|
||
<view>
|
||
<view>账号密码登录</view>
|
||
<view>欢迎使用原住民宿</view>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<view>手机号码</view>
|
||
<input type="text" placeholder="请输入手机号码" />
|
||
</view>
|
||
<view>
|
||
<view>密码</view>
|
||
<view><input type="text" placeholder="请输入密码" />
|
||
<image src="/static/眼睛.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<image src="/static/组 151.png" mode="">
|
||
</image>
|
||
<view>我已同意并阅读<text>《用户隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
<view></view>
|
||
<view>忘记密码？</view>
|
||
</view>
|
||
<view><button type="primary" @click="goto()">登录</button></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
goto() {
|
||
uni.navigateTo({
|
||
url:"/pages/index/index"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.begin {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.begin>view:nth-child(2) {
|
||
align-self: flex-start;
|
||
margin-left: 3%;
|
||
margin-bottom: 20%;
|
||
}
|
||
|
||
.begin>view:nth-child(2) view:first-child {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.begin>view:nth-child(2) view:nth-child(2) {
|
||
font-size: 0.9rem;
|
||
|
||
}
|
||
|
||
.begin>view:nth-child(3) {
|
||
align-self: flex-start;
|
||
margin: 5% auto;
|
||
width: 90%;
|
||
}
|
||
|
||
.begin>view:nth-child(3) view {
|
||
margin-bottom: 7%;
|
||
|
||
}
|
||
|
||
.begin>view:nth-child(3) view>view:first-child {
|
||
font-weight: bold;
|
||
margin-bottom: 2%;
|
||
|
||
}
|
||
|
||
.begin>view:nth-child(3) view+input {
|
||
display: block;
|
||
padding: 10px;
|
||
border: 1px solid #999;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.begin>view:nth-child(3) view>view:nth-child(2) {
|
||
display: flex;
|
||
border: 1px solid #999;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.begin>view:nth-child(3) view>view:nth-child(2) image {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.begin>view:nth-child(4) {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.begin>view:nth-child(4) view image {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.begin>view:nth-child(4) view:first-child {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.begin>view:nth-child(4) view:first-child text {
|
||
color: cornflowerblue;
|
||
}
|
||
|
||
.begin>view:last-child {
|
||
width: 100%;
|
||
margin-top: 5%;
|
||
|
||
}
|
||
|
||
.begin>view:last-child button {
|
||
margin: 10px;
|
||
}
|
||
</style> |