9.登入页面

登入页面

在pages中新建页面login

修改代码

<template><view></view>
</template><script setup></script><style lang="scss"></style>

添加头像组件

官网
https://vkuviewdoc.fsq.pub/components/avatar.html

<template><view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60"><!-- circle 圆形头像 --><u-avatar :src="/static/user.jpg" mode="circle"></u-avatar></view>
</template>

查看登入页面

在pages.json中将登入页面放置第一个

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path" : "pages/login/login","style" : {"navigationBarTitleText" : "登入","enablePullDownRefresh" : false}},{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path" : "pages/write/write","style" : {"navigationBarTitleText" : "发布","enablePullDownRefresh" : false}},{"path" : "pages/unused/unused","style" : {"navigationBarTitleText" : "闲置","enablePullDownRefresh" : false}},{"path" : "pages/buy/buy","style" : {"navigationBarTitleText" : "求购","enablePullDownRefresh" : false}},{"path" : "pages/mine/mine","style" : {"navigationBarTitleText" : "我的","enablePullDownRefresh" : false}}],"globalStyle": {//导航字体颜色，仅支持black和white"navigationBarTextStyle": "white",//导航全局标题，当前页面没有配置时生效"navigationBarTitleText": "简易二手交易",//导航颜色"navigationBarBackgroundColor": "#79b2f8",//下拉显示出来的窗口的背景色"backgroundColor": "#F8F8F8"},"tabBar": {"color": "#7A7E83",//默认文字颜色"selectedColor": "#376199",//选中文字颜色"borderStyle": "black",//上边框颜色"backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "static/home.png",//默认图片"selectedIconPath": "static/home_select.png",//选中后图片"text": "首页"}, {"pagePath": "pages/unused/unused","iconPath": "static/unused.png","selectedIconPath": "static/unused_select.png","text": "闲置"}, {"pagePath": "pages/write/write","iconPath": "static/write.png","selectedIconPath": "static/write_select.png","text": "发布"}, {"pagePath": "pages/buy/buy","iconPath": "static/buy.png","selectedIconPath": "static/buy_select.png","text": "求购"}, {"pagePath": "pages/mine/mine","iconPath": "static/mine.png","selectedIconPath": "static/mine_select.png","text": "我的"}]}
}

修改样式

<template><view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 logincontaine"><!-- circle 圆形头像 --><u-avatar size="150" src="/static/user.jpg" mode="circle"></u-avatar></view>
</template><script setup></script><style lang="scss">.logincontaine{height: 100%;display: flex;align-items: center;flex-direction: column;// 垂直方向布局}
</style>

设置表单

表单官网
https://vkuviewdoc.fsq.pub/components/form.html

图标官网
https://vkuviewdoc.fsq.pub/components/icon.html

<template><view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 logincontaine"><!-- circle 圆形头像 --><u-avatar size="150" src="/static/user.jpg" mode="circle"></u-avatar><!-- model 中是绑定对象 --><!-- left-icon	左侧自定义字体图标(限uView内置图标)或图片地址 left-icon-style	左侧图标的样式，对象形式--><u-form class="forms" :model="loginModel" ref="form1"><u-form-item left-icon="account" left-icon-style="font-size:26px;color:#77aeff"><u-input placeholder="请输入账号" v-model="loginModel.username" /></u-form-item><u-form-item left-icon="lock" left-icon-style="font-size:26px;color:#77aeff"><u-input placeholder="请输入密码" v-model="loginModel.possword" /></u-form-item></u-form></view>
</template><script setup>
import { reactive } from 'vue';const loginModel = reactive({username: '',possword: ''})
</script><style lang="scss">.logincontaine {height: 100%;display: flex;align-items: center;flex-direction: column;// 垂直方向布局}.forms{width: 100%;margin-top: 30px;}
</style>

效果图

登入按钮与忘记密码

<view class="passtext">忘记密码
</view>
<view class="button"><u-button class="left-b" :custom-style="customStyle1">登入</u-button><u-button class="right-b" :custom-style="customStyle2">注册</u-button>
</view>

login.vue代码

<template><view class="u-p-t-60 u-p-r-60 u-p-b-30 u-p-l-60 logincontaine"><!-- circle 圆形头像 --><u-avatar size="170" src="/static/user.jpg" mode="circle"></u-avatar><!-- model 中是绑定对象 --><!-- left-icon	左侧自定义字体图标(限uView内置图标)或图片地址 left-icon-style	左侧图标的样式，对象形式--><u-form class="forms" :model="loginModel" ref="form1"><u-form-item left-icon="account" left-icon-style="font-size:26px;color:#77aeff"><u-input placeholder="请输入账号" v-model="loginModel.username" /></u-form-item><u-form-item left-icon="lock" left-icon-style="font-size:26px;color:#77aeff"><u-input placeholder="请输入密码" v-model="loginModel.possword" /></u-form-item><view class="passtext">忘记密码</view><view class="button"><u-button class="left-b" :custom-style="customStyle1">登入</u-button><u-button class="right-b" :custom-style="customStyle2">注册</u-button></view></u-form></view>
</template><script setup>
import { reactive } from 'vue';const loginModel = reactive({username: '',possword: ''})const customStyle1 = reactive({marginTop: '80px',background: '#3773d4',color: '#fff',width:'130px'})const customStyle2 = reactive({marginTop: '80px',background: '#3773d4',color: '#fff',width:'130px'})
</script><style lang="scss">.logincontaine {height: 100%;display: flex;align-items: center;flex-direction: column;// 垂直方向布局}.forms{width: 100%;margin-top: 40px;}.button{display: flex;justify-content: space-between;// 水平分布}.passtext{display: flex;justify-content: flex-end;color: #0d7adf;margin-top: 30px;}
</style>

效果图