foodie-server/foodie_sj_vue/src/views/AboutView.vue

<template>
  <div class="about">
		<img class="lupian" src="../assets/bag.jpg" alt=""/>
		<!-- <el-image class="lupian"  src="../assets/bag.jpg" alt=""></el-image> -->
		<div class="dengluk">
			<h3 style="margin-bottom: 20px;">{{$t('loding.cte')}}</h3>
			<div style="display: flex;align-items: center;font-size: 13px;justify-content: space-between;width: 325px;">
				<div>{{$t('loding.lang')}}</div>
				<i18n-select></i18n-select>
			</div>
			<div class="shulank">
				<div class="hengxk">
					<i class="el-icon-user" style="color: #505050; margin-right: 10px;"></i>
					<el-input v-model="name" :placeholder="$t('loding.username')" style="width: 300px;"></el-input>
				</div>
				<div class="hengxk" style="margin-top: 20px;">
					<i class="el-icon-unlock" style="color: #505050; margin-right: 10px;"></i>
					<el-input v-model="pad" :placeholder="$t('loding.pasd')" show-password style="width: 300px;"></el-input>
				</div>
			</div>
			<el-button type="primary" style="margin-top: 10px; width: 300px;height: 40px;" @click="gotiaozhuan">{{$t('loding.logng')}}</el-button>
		</div>
  </div>
</template>
<script>
	import {loding,getuser} from '@/api/loding';
	import { encrypt,decrypt } from '@/router/jsencrypt';
	import i18nSelect from "../components/i18n.vue"
	export default{
		components: { i18nSelect },
		name:"AboutView",
		data(){
			return {
				name:'',
				pad:''
			}
		},
		created() {
			this.getloduser();
      i18nSelect.created()
		},
		methods:{
			getloduser(){
				getuser().then(response => {
					// console.log("获取用户",response);
					if(response.code==200){
						localStorage.setItem('user', JSON.stringify(response.data));
						this.$router.push('/index');
					}
				});
			},
			gotiaozhuan(){
				if(this.name==''){
					this.$message({
					  message:this.$t('loding.txuse'),
					  type: 'warning'
					});
					return
				}
				if(this.pad==''){
					this.$message({
					  message: this.$t('loding.txpad'),
					  type: 'warning'
					});
					return
				}
				loding({
					userName:this.name,
					password:encrypt(this.pad),
					cid:''
				}).then(response => {
					console.log("请求数据",response);
					if(response.code==200){
						localStorage.setItem('token', response.token);
						localStorage.setItem('user', JSON.stringify(response.data));
						this.$router.push('/index');
					}else{
						this.$message.error(response.msg);
					}
				});
			}
		}
	}
</script>

<style>
	.about{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}
	.shulank{
		margin: 20px 0;
	}
	.hengxk{
		display: flex;
		align-items: center;
	}
	.dengluk{
		position: absolute;
		z-index: 999;
		width: 400px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		padding: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.lupian{
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		/* Sobject-position: 20% 20%; */
	}
</style>