登录页面背景增加视频播放功能

最新推荐文章于 2024-07-01 17:56:37 发布

原创最新推荐文章于 2024-07-01 17:56:37 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

VUE3 同时被 2 个专栏收录

54 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

这个博客展示了一个使用Vue3和ElementPlus库创建的登录页面示例。页面包含背景视频、模糊效果和一个包含用户名和密码输入框的表单。登录逻辑通过axios调用API进行验证，并在验证成功后重定向到打印标签页。

下面是代码示例

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
}

<head>

	<link rel="stylesheet" href="~/css/ElementPlus.css" />
	<!-- 导入 Vue 3 -->
	<script src="~/lib/vue/dist/vue.global.js"></script>
	<!-- 导入组件库 -->
	<script src="~/lib/element-plus/dist/index.full.js"></script>
	<script src="~/js/axios.js"></script>
	<script src="~/js/config.js"></script>
	<style>
		
#background_v {
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    /*加滤镜*/
    /*filter: blur(15px); //背景模糊设置 */
    /*-webkit-filter: grayscale(100%);*/
    /*filter:grayscale(100%); //背景灰度设置*/
    z-index: -11
}
 
#background {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
} 
	</style>
</head>
<div id="app">
	<video id="background_v" autoplay loop muted>
        <source id='background' src="~/Assets/Video/Clock3D.mp4"/>
    </video>

	<br />
	<div style="height:200px">
	</div>
	<el-form class="jsjp-bg-color" style="border:0px solid red;margin:20px auto;width:340px;height:220px;border-radius:25px;">
		<el-row>
			@*	<el-col :span="4"><img src="~/Assets/Images/logo.jpg" style="width:100px;height:50px"/>
			</el-col>*@
			<el-col :span="24" style="text-align:center">

				<span class="jsjp-font-color" style="font-size:large">XXXXX有限公司</span>
				<br />
				<span class="jsjp-font-color" style="font-size:medium">XXX</span>
			</el-col>
		</el-row>
		<br />
		<el-row>
			<el-col :span="4"><div class="grid-content bg-purple jsjp-font-color" style="text-align:center;vertical-align:central;">用户名</div></el-col>
			<el-col :span="18"> <el-input v-model="UserNo" placeholder="请输入用户名" clearable></el-input></el-col>
		</el-row>
		<br />
		<el-row>
			<el-col :span="4"><div class="grid-content bg-purple jsjp-font-color" style="text-align:center;">密码</div></el-col>
			<el-col :span="18"> <el-input v-model="Password" placeholder="请输入密码" clearable show-password></el-input></el-col>
		</el-row>
		<br />
		<el-row>
			<el-col :span="24"> <el-button type="primary" style="width:90%;border-radius:25px;display:block;margin:0 auto" v-on:click="Login">登   录</el-button></el-col>
		</el-row>
	</el-form>

</div>


<script>


	const App =
	{
		data() {
			return {
				isAgree: true,
				UserNo: '888',
				Password: '888',
				message: 'hello word ',
				infos: [{ id: 1, date: '2022-05-11', name: 'phyger' }, { id: 2, date: '2022-05-11', name: 'phyger2' }],
			}
		},
		methods: {
			Login() {

				console.log("login", Webapi_BASE_URL)

				axios.get(Webapi_BASE_URL + `Users\\GetUser`, { params: { userNo: this.UserNo, Password: this.Password } }).then(res => {
					//console.log('aaa')
					console.log(res)
					console.log(res.data)

					console.log("this.UserNo",this.UserNo)
					console.log("res.data.userNo",res.data.userNo)
					if (this.UserNo == res.data.userNo) {

						axios.get(`Login/SetLoginOK`, { params: { UserNo: this.UserNo } }).then(res => {
							console.log('SetLoginOK')
							console.log(res)

							window.location.href = "/Home/PrintLabel";
						})						
					}
					else {
						alert('用户名密码不正确')
					}

				})



				//window.URL="\home\index"
			},


		},
		mounted() {
			console.log("Mounted");
	
		}
	}
	const app = Vue.createApp(App);
	app.use(ElementPlus);
	app.mount('#app')
</script>