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>