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

最新推荐文章于 2023-12-08 16:14:42 发布

easyboot

最新推荐文章于 2023-12-08 16:14:42 发布

阅读量234

点赞数

分类专栏： # CSS # Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/easyboot/article/details/127783944

版权

Vue.js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

下面是代码示例

@*
    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>