market-app/pages/login/login.vue

<template>
	<view class="v1" style="height:100vh">
	 <!-- {{clientHeight?clientHeight+'px':'auto'}} -->
	 <!-- v2父容器  子view使用绝对布局 -->
		<view class="v2">
			<view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">
				 登录
			</view>
			 <!-- 手机号 -->
			<view class="phoneCs">
			   <!-- <image src="/images/zhang.png" class="ph"></image> -->
			   <input placeholder="请输入账号" type="text" v-model="loginForm.username" />
			</view>
			 <!-- 密码 -->
			<view class="passwordCs">
			   <input placeholder="请输入密码" type="password" v-model="loginForm.password"/>
			</view>
			 <!-- 登录按钮 -->
			<view class="denglu">
			   <button class="btn-dl" type="primary" @click="loginF()">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import { login } from '../../api/login.js'
	// import { setToken } from '../../utils/auth.js'
	import { login } from '../../api/marketmini/index';
	export default {
		data() {
			return {
				loginForm: {
					username: "admin",
					password: "admin123",
					rememberMe: false,
					code: "",
					uuid: ""
				},
			};
		},
		methods:{
			loginF(){
				console.log('login')
				login("admin","admin123").then((data)=>{
					console.log(data)
					// setToken(data.token)
					uni.setStorageSync('Admin-Token',data.token)
					uni.switchTab({
						url:'/pages/index/index'
					})
				})
				// uni.navigateTo({
				// 	url:'/pages/index/index'
				// })
			}
		}
	}
</script>

<style lang="scss"scoped>
	.v1{
	  display: block;
	  position:absolute;
	  width: 100%;
	  background-color: rgb(250, 248, 248);
	}
	/* 白色区域 */
	.v1 .v2{
	  position: relative;
	  margin-top: 150rpx;
	  left: 100rpx; 
	  width: 545rpx;
	  height: 600rpx;
	  background-color: rgb(250, 248, 248);
	  border-radius: 50rpx;
	}
	/* 白色区域内的登录文本 */
	.v1 .v2 .dltext{
	  margin-top: 50rpx;
	  position: absolute;
	  margin-left:50rpx;
	  width: 150rpx;
	  height: 100rpx;
	  font-size: 60rpx;
	  font-family: Helvetica;
	  color: #000000;
	  line-height: 100rpx;
	  letter-spacing: 2rpx;
	}
	/* 手机图片+输入框+下划线的父容器view */
	.v1 .v2 .phoneCs{
	  margin-top: 200rpx;
	  margin-left: 25rpx;
	  position: absolute;
	  display: flex;
	  width:480rpx ;
	  height: 90rpx ;
	  background-color: white;
	  
	}
	/* 手机图标 */
	.v1 .v2 .phoneCs .ph{
	  margin-top: 5rpx;
	  margin-left: 30rpx;
	  width: 55rpx;
	  height: 55rpx;
	}
	/* 手机号输入框 */
	.v1 .v2 .phoneCs input{
	  width: 400rpx;
	  font-size: 30rpx ;
	  margin-top: 25rpx;
	  margin-left: 30rpx;
	}
	/* 密码图标+输入框+小眼睛图标+下划线父容器view */
	.v1 .v2 .passwordCs{
	  margin-top: 350rpx;
	  margin-left: 25rpx;
	  position: absolute;
	  display: flex;
	  width:480rpx ;
	  height: 90rpx ;
	  background-color: white;
	
	}
	/* 密码图标 */
	.v1 .v2 .passwordCs .ps{
	  margin-top: 5rpx;
	  margin-left: 30rpx;
	  width: 55rpx;
	  height: 55rpx;
	}
	/* 眼睛 图标*/
	.v1 .v2 .passwordCs .eye{
	  margin-top: 5rpx;
	  margin-left: 65rpx;
	  width: 55rpx;
	  height: 55rpx;
	}
	/* 密码输入框 */
	.v1 .v2 .passwordCs input{
	  width: 400rpx;
	  font-size: 30rpx ;
	  margin-top: 25rpx;
	  margin-left: 30rpx;
	}
	/* 登录按钮容器view */
	.v1 .v2 .denglu{
	  width: 480rpx;
	  height: 80rpx;
	  position: absolute;
	  margin-top:515rpx;
	  margin-left:25rpx;
	  
	}
	/* 登录按钮 */
	.v1 .v2 .denglu button{
	  padding: 0rpx;
	  line-height: 70rpx;
	  font-size: 30rpx;
	  width: 100%;
	  height: 100%;
	  border-radius: 5rpx;
	}

</style>