更多登錄ui頁(yè)面
uni-app 微信小程序之好看的ui登錄頁(yè)面（一）
uni-app 微信小程序之好看的ui登錄頁(yè)面（二）
uni-app 微信小程序之好看的ui登錄頁(yè)面（三）
uni-app 微信小程序之好看的ui登錄頁(yè)面（四）
uni-app 微信小程序之好看的ui登錄頁(yè)面（五）文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-767031.html
1. 頁(yè)面效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-767031.html
2. 頁(yè)面樣式代碼
<!-- 頂部藍(lán)色 -->
<template>
<view class="contaier">
<view class="top-bg">
<view class="text-white text-bold text-xxxl">前端鋪?zhàn)?span id="n5n3t3z" class="token tag"></view>
<view class="margin-top-xs text-white">歡迎使用，請(qǐng)先登錄</view>
</view>
<view class="input-box padding-lr">
<form>
<view class="cu-form-group margin-top">
<view class="title">郵件</view>
<input placeholder="兩字短標(biāo)題" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">輸入框</view>
<input placeholder="三字標(biāo)題" name="input"></input>
</view>
<view class="cu-form-group solid-bottom">
<view class="title">驗(yàn)證碼</view>
<input placeholder="輸入框帶個(gè)按鈕" name="input"></input>
<button class='cu-btn bg-login-zl shadow'>驗(yàn)證碼</button>
</view>
</form>
</view>
<view class="padding margin-top-xs">
<button class="cu-btn block round bg-login-zl margin-tb-sm lg">立即登錄</button>
<view class="text-gray flex justify-between padding-lr-sm">
<text>注冊(cè)賬號(hào)</text>
<text>忘記密碼</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onLoad() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.contaier{
height: 100vh;
background-color: #ffffff;
}
.top-bg{
width: 750rpx;
background-image: url(https://cdn.zhoukaiwen.com/head-bg.png);
height: 480rpx;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
padding-top: 170rpx;
}
.bg-login-zl {
background-image: linear-gradient(45deg, #727CFB, #46D0ED);
color: #ffffff;
}
</style>
到了這里，關(guān)于uni-app 微信小程序之好看的ui登錄頁(yè)面（五）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
