|
|
@@ -1,139 +1,141 @@
|
|
|
<template>
|
|
|
<div class="page">
|
|
|
- <div class="scroll-x">
|
|
|
- <div class="item_box">
|
|
|
- <img src="http://osscache.scxjc.club/static/say365/imgs/bg1.png?versionId=CAEQHRiBgICegrnp1BciIDRlNWI4M2E2OWQ3MTQ0MzVhMzE2NWUyNDZiY2VjYzdi" alt="" />
|
|
|
- <div class="login_box">
|
|
|
- <div class="d-f j-s login_head">
|
|
|
- <span class="title">登录</span>
|
|
|
- <el-select
|
|
|
- v-model="value"
|
|
|
- style="width: 105px; border: none; margin:auto 0"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
+ <div class="scroll-x" ref="scrollview">
|
|
|
+ <div class="item_box">
|
|
|
+ <img src="../assets/bg.png" alt="" />
|
|
|
+ <div class="login_box">
|
|
|
+ <div class="d-f j-s login_head">
|
|
|
+ <span class="title">登录</span>
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 105px; border: none; margin: auto 0"
|
|
|
>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <el-form class="login_form">
|
|
|
- <el-form-item>
|
|
|
- <el-input
|
|
|
- v-model="params.name"
|
|
|
- placeholder="请输入您的账号"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item style="margin-bottom: 17px">
|
|
|
- <el-input
|
|
|
- v-model="params.password"
|
|
|
- placeholder="请输入密码"
|
|
|
- auto-complete="new-password"
|
|
|
- show-password
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div class="d-f j-s cipher">
|
|
|
- <el-checkbox label="记住密码" name="type"></el-checkbox>
|
|
|
- <span>忘记密码?</span>
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmit">登陆</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item_box">
|
|
|
- <img src="../assets/bg1.png" alt="" />
|
|
|
- <div class="intelligence">
|
|
|
- <div class="intelligence_t">
|
|
|
- <p>多模板、智能识别、双评阅模式</p>
|
|
|
- <p>不仅支持各学科作业的日常批阅，而且支持以校为单位的各级考试评阅</p>
|
|
|
- </div>
|
|
|
- <div class="d-f j-s intelligence_c">
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <img src="../assets/1.png" alt="" />
|
|
|
+ <el-form class="login_form">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input
|
|
|
+ v-model="params.username"
|
|
|
+ placeholder="请输入您的账号"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 17px">
|
|
|
+ <el-input
|
|
|
+ v-model="params.password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ auto-complete="new-password"
|
|
|
+ show-password
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="d-f j-s cipher">
|
|
|
+ <el-checkbox label="记住密码" name="type"></el-checkbox>
|
|
|
+ <span>忘记密码?</span>
|
|
|
</div>
|
|
|
- <div>模版多样化</div>
|
|
|
- <p>可根据需求，视学科特点，生成不同的作业模板及答题卡</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <img src="../assets/4.png" alt="" />
|
|
|
- </div>
|
|
|
- <div>智能识别</div>
|
|
|
- <p>
|
|
|
- 自动评判客观题，老师只需对主观题进行评阅即可，极大地减轻了老师的工作负担
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <img src="../assets/3.png" alt="" />
|
|
|
- </div>
|
|
|
- <div>双评阅</div>
|
|
|
- <p>多终端评阅，使阅卷更便捷</p>
|
|
|
- </li>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit">登陆</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="item_box">
|
|
|
- <img src="../assets/bg2.png" alt="" class="three" />
|
|
|
- <div class="intelligence">
|
|
|
- <div class="intelligence_t">
|
|
|
- <p>多维度、智能化的试卷分析</p>
|
|
|
- <p>精确定位知识短板，助力教师及时调整教学方案</p>
|
|
|
- </div>
|
|
|
- <div class="d-f j-s">
|
|
|
- <div class="leftcont">
|
|
|
- <li class="d-f">
|
|
|
- <img src="../assets/9.png" alt="" />
|
|
|
- <span
|
|
|
- >可自动形成分数统计，根据需求自动生成班级乃至学生个人的成绩分析报告</span
|
|
|
- >
|
|
|
+ <div class="item_box">
|
|
|
+ <img src="../assets/bg1.png" alt="" />
|
|
|
+ <div class="intelligence">
|
|
|
+ <div class="intelligence_t" :class="is_dx == 1 ? 'dx' : ''">
|
|
|
+ <p>多模板、智能识别、双评阅模式</p>
|
|
|
+ <p>
|
|
|
+ 不仅支持各学科作业的日常批阅，而且支持以校为单位的各级考试评阅
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="d-f j-s intelligence_c">
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/1.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div>模版多样化</div>
|
|
|
+ <p>可根据需求，视学科特点，生成不同的作业模板及答题卡</p>
|
|
|
</li>
|
|
|
- <li class="d-f">
|
|
|
- <img src="../assets/9.png" alt="" />
|
|
|
- <span
|
|
|
- >精准定位知识的薄弱环节，帮助老师或学生及时发现知识短板</span
|
|
|
- >
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/4.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div>智能识别</div>
|
|
|
+ <p>
|
|
|
+ 自动评判客观题，老师只需对主观题进行评阅即可，极大地减轻了老师的工作负担
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/3.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div>双评阅</div>
|
|
|
+ <p>多终端评阅，使阅卷更便捷</p>
|
|
|
</li>
|
|
|
- </div>
|
|
|
- <div class="dimension">
|
|
|
- <img src="../assets/5.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="item_box">
|
|
|
- <img src="../assets/bg3.png" alt="" />
|
|
|
- <div class="intelligence">
|
|
|
- <div class="intelligence_t">
|
|
|
- <p>个性化设置</p>
|
|
|
- <p>可根据老师的个性化设置，自动生成班级错题库，有效强化知识短板</p>
|
|
|
- </div>
|
|
|
- <div class="dimen">
|
|
|
- <img src="../assets/6.png" alt="" />
|
|
|
+ <div class="item_box">
|
|
|
+ <img src="../assets/bg2.png" alt="" class="three" />
|
|
|
+ <div class="intelligence">
|
|
|
+ <div class="intelligence_t" :class="is_dx == 2 ? 'dx' : ''">
|
|
|
+ <p>多维度、智能化的试卷分析</p>
|
|
|
+ <p>精确定位知识短板，助力教师及时调整教学方案</p>
|
|
|
+ </div>
|
|
|
+ <div class="d-f j-s">
|
|
|
+ <div class="leftcont">
|
|
|
+ <li class="d-f">
|
|
|
+ <img src="../assets/9.png" alt="" />
|
|
|
+ <span
|
|
|
+ >可自动形成分数统计，根据需求自动生成班级乃至学生个人的成绩分析报告</span
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="d-f">
|
|
|
+ <img src="../assets/9.png" alt="" />
|
|
|
+ <span
|
|
|
+ >精准定位知识的薄弱环节，帮助老师或学生及时发现知识短板</span
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ <div class="dimension">
|
|
|
+ <img src="../assets/5.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="item_box">
|
|
|
- <!-- <div class="item_bg"></div> -->
|
|
|
- <img src="../assets/bg4.png" alt="" class="topic" />
|
|
|
- <div class="intelligence">
|
|
|
- <div class="intelligence_t">
|
|
|
- <p>错题强化训练</p>
|
|
|
- <p>
|
|
|
- 智能推送错题强化训练，形成学生个性化错题本，帮助学生有效巩固知识薄弱环节
|
|
|
- </p>
|
|
|
+ <div class="item_box">
|
|
|
+ <img src="../assets/bg3.png" alt="" />
|
|
|
+ <div class="intelligence">
|
|
|
+ <div class="intelligence_t" :class="is_dx == 3 ? 'dx' : ''">
|
|
|
+ <p>个性化设置</p>
|
|
|
+ <p>可根据老师的个性化设置，自动生成班级错题库，有效强化知识短板</p>
|
|
|
+ </div>
|
|
|
+ <div class="dimen">
|
|
|
+ <img src="../assets/6.png" alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="strengthen">
|
|
|
- <img src="../assets/7.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="item_box">
|
|
|
+ <!-- <div class="item_bg"></div> -->
|
|
|
+ <img src="../assets/bg4.png" alt="" class="topic" />
|
|
|
+ <div class="intelligence">
|
|
|
+ <div class="intelligence_t" :class="is_dx == 4 ? 'dx' : ''">
|
|
|
+ <p>错题强化训练</p>
|
|
|
+ <p>
|
|
|
+ 智能推送错题强化训练，形成学生个性化错题本，帮助学生有效巩固知识薄弱环节
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="strengthen">
|
|
|
+ <img src="../assets/7.png" alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <foot></foot>
|
|
|
+ <foot></foot>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -144,9 +146,9 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
params: {
|
|
|
- name: "",
|
|
|
- password: "",
|
|
|
+
|
|
|
},
|
|
|
+ is_dx: 1,
|
|
|
options: [
|
|
|
{
|
|
|
value: "1",
|
|
|
@@ -161,18 +163,81 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
+ mounted() {
|
|
|
+ // 获取指定元素
|
|
|
+ const scrollview = this.$refs["scrollview"];
|
|
|
+ // 添加滚动监听，该滚动监听了拖拽滚动条
|
|
|
+ // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
|
|
|
+ scrollview.addEventListener("scroll", this.scrollChange, true);
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 滚动监听
|
|
|
+ scrollChange(e) {
|
|
|
+ var that = this;
|
|
|
+ if (this.$refs.scrollview.scrollTop == 0) {
|
|
|
+ that.is_dx = 1;
|
|
|
+ return
|
|
|
+ } else if (this.$refs.scrollview.scrollTop >2200 && this.$refs.scrollview.scrollTop <2400) {
|
|
|
+ that.is_dx = 4;
|
|
|
+ return
|
|
|
+ }else if (this.$refs.scrollview.scrollTop >1500 && this.$refs.scrollview.scrollTop < 1700) {
|
|
|
+ that.is_dx = 3;
|
|
|
+ return
|
|
|
+ }else if (this.$refs.scrollview.scrollTop > 600) {
|
|
|
+ that.is_dx = 2;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
onSubmit() {
|
|
|
- localStorage.setItem("token", "123");
|
|
|
- localStorage.setItem("navKey", "1");
|
|
|
- this.$router.push("/");
|
|
|
+ var that = this
|
|
|
+ // if(!this.params.username){
|
|
|
+ // this.$message.warning('请输入用户名')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // if(!this.params.password){
|
|
|
+ // this.$message.warning('请输入密码')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ var obj = this.$qs.stringify(this.params);
|
|
|
+ this.axios
|
|
|
+ .post(that.Common.hurl + "/v1/admin/login")
|
|
|
+ .then(response => (console.log(response)))
|
|
|
+ // this.axios({
|
|
|
+ // method: "post",
|
|
|
+ // url: that.Common.hurl + "/v1/admin/login",
|
|
|
+ // data: '{"username":"admin","password":"12345678"}'
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // console.log(res)
|
|
|
+ // // localStorage.setItem("token", "123");
|
|
|
+ // // localStorage.setItem("navKey", "1");
|
|
|
+ // // this.$router.push("/");
|
|
|
+ // }).catch((res)=>{
|
|
|
+ // console.log(res)
|
|
|
+ // })
|
|
|
+
|
|
|
},
|
|
|
},
|
|
|
- components: { foot },
|
|
|
+ components: { foot },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+@keyframes fold-out {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.5) rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1) rotate(0deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+.item_box .dx {
|
|
|
+ animation-name: fold-out;
|
|
|
+ animation-duration: 1s;
|
|
|
+}
|
|
|
.page {
|
|
|
padding: 0;
|
|
|
background: #fff;
|
|
|
@@ -248,8 +313,9 @@ export default {
|
|
|
.item_box {
|
|
|
position: relative;
|
|
|
min-width: 1900px;
|
|
|
- background: #fff;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
+
|
|
|
/* .item_box .item_bg{
|
|
|
width: 100%;
|
|
|
height: 720px;
|
|
|
@@ -319,7 +385,7 @@ export default {
|
|
|
font-size: 17px;
|
|
|
color: #333;
|
|
|
}
|
|
|
-.record{
|
|
|
+.record {
|
|
|
min-width: 1900px;
|
|
|
}
|
|
|
</style>
|
|
|
@@ -339,7 +405,7 @@ export default {
|
|
|
.login_head .el-input__inner {
|
|
|
color: #2ab8fa;
|
|
|
}
|
|
|
-.login_box .el-form .el-input__inner{
|
|
|
+.login_box .el-form .el-input__inner {
|
|
|
line-height: 60px;
|
|
|
height: 60px;
|
|
|
}
|
