login.vue

最新推荐文章于 2024-01-14 12:31:43 发布

Adj_Seven

最新推荐文章于 2024-01-14 12:31:43 发布

阅读量64

点赞数

文章标签：数学建模 java html

本文链接：https://blog.csdn.net/Adj_Seven/article/details/131166609

版权

<template>
 <div>
    <table>
		<tr>
			<td class="c1">学号：</td>
			<td class="c2"><input type="text" v-model="stuno"></td>
		</tr>
		<tr>
			<td class="c1">姓名：</td>
			<td class="c2"><input type="text" v-model="stuname"></td>
		</tr>
		<tr>
			<td class="c1">考试科目：</td>
			<td class="c2">
				<select v-model="examSubject">
					<option value="web应用前端开发">web应用前端开发</option>
				</select>
			</td>
		</tr>
		<tr>
			<td colspan="2"><button class="button" @click="start">开始考试</button></td>
		</tr>
	</table>
 </div>
</template>

<script>
 export default {
 data () {
 return {
    stuno:"",
    stuname:"",
    examSubject:""
  }
 },
 methods:{
    start(){
        if(this.stuno==""||this.stuname=="")
        alert("学号和姓名必须输入！");
        if(this.stuno.length!=12)
        alert("学号长度必须为12位！");
        if(this.examSubject != "web应用前端开发")
        alert("考试科目必须选择为“web应用前端开发”！");

        essionStorage.setItem("tokenno",this.stuno)
        essionStorage.setItem("tokenname",this.stuname)
        this.$router.push("/test")
    }
 }
}

</script>
<style scoped>
table {
    width: 300px;
    margin: 20px auto;
    border: 2px dashed #56CA95;
    padding: 10px;
}

table td {
    padding: 6px;
    text-align: center;
}
.c1{
    background-color: #D1ECDD;
}
.c2{
    background-color: #56CA95;
}

table tr:first-child td {
    background-color: #D1ECDD;
}

table tr:first-child td + td {
    background-color: #56CA95;
}

table tr:last-child td {
    text-align: center;
}

.button {
    background-color: #E9F6EF;
    border: none;
    color: #333;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: #56CA95;
    color: #fff;
    cursor: pointer;
}
</style>