|
|
@@ -1,460 +1,510 @@
|
|
|
<template>
|
|
|
- <div class="container" v-loading="loading">
|
|
|
- <!-- <div class="i_box" v-if="steps == 1">
|
|
|
- <div class="i_box_top">
|
|
|
- <div><span>请输入随机码进入项目课程</span></div>
|
|
|
- <div><span>账号登陆</span></div>
|
|
|
- <img src="../../../assets/icon/inviteLogin/password.png" alt="">
|
|
|
+ <div class="container" v-loading="loading">
|
|
|
+ <div class="loginOut" v-show="showLoadingOut">
|
|
|
+ <span @click="loginOut">退出登录</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="i_box" v-if="steps == 1">
|
|
|
+ <div class="i_box_top">
|
|
|
+ <div><span>请输入随机码进入项目课程</span></div>
|
|
|
+ <div><span>账号登陆</span></div>
|
|
|
+ <img src="../../../assets/icon/inviteLogin/password.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="i_box_login">
|
|
|
+ <el-input v-model="icode" placeholder="请输入随机码" class="input"></el-input>
|
|
|
+ <div @click="nextSteps" class="button">确 定</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="i_box" v-if="steps == 2">
|
|
|
+ <div class="i_box_top">
|
|
|
+ <div><span>{{ res.school }}</span></div>
|
|
|
+ <div><span>欢迎回来！</span></div>
|
|
|
+ <img src="../../../assets/icon/inviteLogin/school.png" style="bottom: -40px;" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="i_box_login2">
|
|
|
+ <div v-for="item in classJuri" @click="login(item.userid,(item.name ? item.name : item.username))" :key="item.userid">{{ item.name ? item.name :
|
|
|
+ item.username }}</div>
|
|
|
+ <div v-if="!classJuri.length" class="none">此班级暂无学生</div>
|
|
|
+ <el-select v-model="userid" placeholder="选择姓名" filterable class="select">
|
|
|
+ <el-option v-for="item in classJuri" :key="item.userid" :label="item.name ? item.name : item.username"
|
|
|
+ :value="item.userid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <div @click="login" class="button">登 录</div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="c-box">
|
|
|
+ <div class="c-b-left"></div>
|
|
|
+ <div class="c-b-right">
|
|
|
+ <div class="c-b-r-closeArea" v-if="steps == 2" @click.stop="steps = 1">
|
|
|
+ <span class="el-icon-back c-b-r-ca-btn"></span>
|
|
|
+ </div>
|
|
|
+ <div class="c-b-r-main" v-if="steps == 1">
|
|
|
+ <div class="c-b-r-m-title">欢迎登录！</div>
|
|
|
+
|
|
|
+ <div class="c-b-r-m-form">
|
|
|
+ <div class="c-b-r-m-f-label">课程识别码</div>
|
|
|
+ <div class="c-b-r-m-f-input">
|
|
|
+ <el-input v-model="icode" placeholder="请输入课程识别码" append="这是个测试" :class="[showErrMsg?'showErrMsg':'']"></el-input>
|
|
|
+ <div class="c-b-r-m-f-i-errMsg" v-if="showErrMsg">
|
|
|
+ <span class="el-icon-warning-outline"></span>
|
|
|
+ {{ errMsg }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="i_box_login">
|
|
|
- <el-input v-model="icode" placeholder="请输入随机码" class="input"></el-input>
|
|
|
- <div @click="nextSteps" class="button">确 定</div>
|
|
|
+
|
|
|
+ <div :class="['c-b-r-m-btn',btnActive?'c-b-r-m-btnActive':'']" @click.stop="nextSteps">下一步</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="c-b-r-main" v-if="steps == 2">
|
|
|
+ <div class="c-b-r-m-title">请选择您的姓名</div>
|
|
|
+ <div class="c-b-r-m-chooseNameArea">
|
|
|
+ <!-- <div class="c-b-r-m-cna-none">此班级暂无学生</div> -->
|
|
|
+ <div v-if="!classJuri.length" class="c-b-r-m-cna-none">此班级暂无学生</div>
|
|
|
+ <div v-for="item in classJuri" :class="['c-b-r-m-cna-item',chooseData.userid==item.userid?'c-b-r-m-cna-itemActive':'']" @click="choose(item.userid,(item.name ? item.name : item.username))" :key="item.userid">{{ item.name ? item.name :item.username }}</div>
|
|
|
</div>
|
|
|
+ <!-- -->
|
|
|
+ <el-button class="c-b-r-m-loginBtn" type="primary" v-if="classJuri.length" @click.stop="login(chooseData.userid,chooseData.username)">确认登录</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="i_box" v-if="steps == 2">
|
|
|
- <div class="i_box_top">
|
|
|
- <div><span>{{ res.school }}</span></div>
|
|
|
- <div><span>欢迎回来！</span></div>
|
|
|
- <img src="../../../assets/icon/inviteLogin/school.png" style="bottom: -40px;" alt="">
|
|
|
- </div>
|
|
|
- <div class="i_box_login2">
|
|
|
- <div v-for="item in classJuri" @click="login(item.userid,(item.name ? item.name : item.username))" :key="item.userid">{{ item.name ? item.name :
|
|
|
- item.username }}</div>
|
|
|
- <div v-if="!classJuri.length" class="none">此班级暂无学生</div>
|
|
|
- <el-select v-model="userid" placeholder="选择姓名" filterable class="select">
|
|
|
- <el-option v-for="item in classJuri" :key="item.userid" :label="item.name ? item.name : item.username"
|
|
|
- :value="item.userid">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
-
|
|
|
- <div @click="login" class="button">登 录</div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <div class="c-box">
|
|
|
- <div class="c-b-left"></div>
|
|
|
- <div class="c-b-right">
|
|
|
- <div class="c-b-r-closeArea" v-if="steps == 2" @click.stop="steps = 1">
|
|
|
- <span class="el-icon-back c-b-r-ca-btn"></span>
|
|
|
- </div>
|
|
|
- <div class="c-b-r-main" v-if="steps == 1">
|
|
|
- <div class="c-b-r-m-title">欢迎登录！</div>
|
|
|
-
|
|
|
- <div class="c-b-r-m-form">
|
|
|
- <div class="c-b-r-m-f-label">课程识别码</div>
|
|
|
- <div class="c-b-r-m-f-input">
|
|
|
- <el-input v-model="icode" placeholder="请输入课程识别码" append="这是个测试" :class="[showErrMsg?'showErrMsg':'']"></el-input>
|
|
|
- <div class="c-b-r-m-f-i-errMsg" v-if="showErrMsg">
|
|
|
- <span class="el-icon-warning-outline"></span>
|
|
|
- {{ errMsg }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div :class="['c-b-r-m-btn',btnActive?'c-b-r-m-btnActive':'']" @click.stop="nextSteps">下一步</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="c-b-r-main" v-if="steps == 2">
|
|
|
- <div class="c-b-r-m-title">请选择您的姓名</div>
|
|
|
- <div class="c-b-r-m-chooseNameArea">
|
|
|
- <!-- <div class="c-b-r-m-cna-none">此班级暂无学生</div> -->
|
|
|
- <div v-if="!classJuri.length" class="c-b-r-m-cna-none">此班级暂无学生</div>
|
|
|
- <div v-for="item in classJuri" :class="['c-b-r-m-cna-item',chooseData.userid==item.userid?'c-b-r-m-cna-itemActive':'']" @click="choose(item.userid,(item.name ? item.name : item.username))" :key="item.userid">{{ item.name ? item.name :item.username }}</div>
|
|
|
- </div>
|
|
|
- <el-button class="c-b-r-m-loginBtn" type="primary" v-if="classJuri.length" @click.stop="login(chooseData.userid,chooseData.username)">确认登录</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- steps: 1,
|
|
|
- icode: "",
|
|
|
- userid: "",
|
|
|
- options: [],
|
|
|
- loading: false,
|
|
|
- res: {},
|
|
|
- classJuri: [],
|
|
|
- code: this.$route.query.code,
|
|
|
- courseId:"",
|
|
|
- showErrMsg:false,
|
|
|
- errMsg:"",
|
|
|
- chooseData:{}
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ steps: 1,
|
|
|
+ icode: "",
|
|
|
+ userid: "",
|
|
|
+ options: [],
|
|
|
+ loading: false,
|
|
|
+ res: {},
|
|
|
+ classJuri: [],
|
|
|
+ code: this.$route.query.code,
|
|
|
+ courseId:"",
|
|
|
+ showErrMsg:false,
|
|
|
+ errMsg:"",
|
|
|
+ chooseData:{},
|
|
|
+ showLoadingOut:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ btnActive(){
|
|
|
+ // return this.icode!='';
|
|
|
+ return /^\d+$/.test(this.icode);
|
|
|
},
|
|
|
- computed:{
|
|
|
- btnActive(){
|
|
|
- // return this.icode!='';
|
|
|
- return /^\d+$/.test(this.icode);
|
|
|
- },
|
|
|
- },
|
|
|
- watch:{
|
|
|
- icode(newValue,oldValue){
|
|
|
- this.showErrMsg = false;
|
|
|
- this.errMsg = "";
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // selectSnameByCid
|
|
|
- nextSteps() {
|
|
|
- // let reg = /^[A-Za-z0-9]{2,}$/
|
|
|
- // let reg = /^[0-9]{2,}$/
|
|
|
- if(!this.btnActive || this.showErrMsg)return;
|
|
|
- let reg = /^\d+$/
|
|
|
- if (!reg.test(this.icode)) {
|
|
|
- this.setErrMsg("请正确填写识别码")
|
|
|
- // this.$message.error("请正确填写随机码")
|
|
|
- return;
|
|
|
- }
|
|
|
- let params = {
|
|
|
- code: this.icode,
|
|
|
- oid: this.code,
|
|
|
- // oid:"16ace517-b5c7-4168-a9bb-a9e0035df840"
|
|
|
- // oid:"0fec3a8a-ad04-11ed-b13d-005056b86db5" //测试
|
|
|
- };
|
|
|
- this.loading = true
|
|
|
- this.ajax
|
|
|
- // .get(this.$store.state.api + "selectCourseByIc2", params)
|
|
|
- .get(this.$store.state.api + "selectCourseByIc2SZ", params)
|
|
|
- .then(res => {
|
|
|
- this.loading = false;
|
|
|
- if (res.data.length && res.data[0].length) {
|
|
|
- this.res = res.data[0][0]
|
|
|
- this.courseId = res.data[0][0].courseId
|
|
|
- this.getClass(res.data[0][0].classid)
|
|
|
- } else {
|
|
|
- this.setErrMsg("不存在此识别码")
|
|
|
- // this.$message.error("不存在此随机码")
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- getClass(classId) {
|
|
|
- let params = {
|
|
|
- cid: classId,
|
|
|
- };
|
|
|
- this.ajax
|
|
|
- .get(this.$store.state.api + "selectSnameByCid", params)
|
|
|
- .then((res) => {
|
|
|
- this.classJuri = res.data[0];
|
|
|
- this.steps = 2
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- login(userid,username) {
|
|
|
- let courseid = this.courseId
|
|
|
- this.$confirm(`确定登录${username}的账号吗?`, "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- window.topU.postMessage(
|
|
|
- {
|
|
|
- tools: "inviteLogin",
|
|
|
- userid: userid,
|
|
|
- courseId: courseid
|
|
|
- },
|
|
|
- "*"
|
|
|
- );
|
|
|
- })
|
|
|
- .catch(() => { });
|
|
|
-
|
|
|
- },
|
|
|
- // 选择学生
|
|
|
- choose(userid,username){
|
|
|
- this.chooseData = {
|
|
|
- userid: userid,
|
|
|
- username: username
|
|
|
- }
|
|
|
- },
|
|
|
- // 设置错误信息
|
|
|
- setErrMsg(msg){
|
|
|
- this.showErrMsg = true;
|
|
|
- this.errMsg = msg;
|
|
|
- }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ icode(newValue,oldValue){
|
|
|
+ this.showErrMsg = false;
|
|
|
+ this.errMsg = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // selectSnameByCid
|
|
|
+ nextSteps() {
|
|
|
+ // let reg = /^[A-Za-z0-9]{2,}$/
|
|
|
+ // let reg = /^[0-9]{2,}$/
|
|
|
+ if(!this.btnActive || this.showErrMsg)return;
|
|
|
+ let reg = /^\d+$/
|
|
|
+ if (!reg.test(this.icode)) {
|
|
|
+ this.setErrMsg("请正确填写识别码")
|
|
|
+ // this.$message.error("请正确填写随机码")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ code: this.icode,
|
|
|
+ oid: this.code,
|
|
|
+ // oid:"16ace517-b5c7-4168-a9bb-a9e0035df840"
|
|
|
+ // oid:"0fec3a8a-ad04-11ed-b13d-005056b86db5" //测试
|
|
|
+ };
|
|
|
+ this.loading = true
|
|
|
+ this.ajax
|
|
|
+ // .get(this.$store.state.api + "selectCourseByIc2", params)
|
|
|
+ .get(this.$store.state.api + "selectCourseByIc2SZ", params)
|
|
|
+ .then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.data.length && res.data[0].length) {
|
|
|
+ this.res = res.data[0][0]
|
|
|
+ this.courseId = res.data[0][0].courseId
|
|
|
+ this.getClass(res.data[0][0].classid)
|
|
|
+ } else {
|
|
|
+ this.setErrMsg("不存在此识别码")
|
|
|
+ // this.$message.error("不存在此随机码")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getClass(classId) {
|
|
|
+ let params = {
|
|
|
+ cid: classId,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectSnameByCid", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.classJuri = res.data[0];
|
|
|
+ this.steps = 2
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ login(userid,username) {
|
|
|
+ let courseid = this.courseId
|
|
|
+ this.$confirm(`确定登录${username}的账号吗?`, "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ window.topU.postMessage(
|
|
|
+ {
|
|
|
+ tools: "inviteLogin",
|
|
|
+ userid: userid,
|
|
|
+ courseId: courseid
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 选择学生
|
|
|
+ choose(userid,username){
|
|
|
+ this.chooseData = {
|
|
|
+ userid: userid,
|
|
|
+ username: username
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 设置错误信息
|
|
|
+ setErrMsg(msg){
|
|
|
+ this.showErrMsg = true;
|
|
|
+ this.errMsg = msg;
|
|
|
+ },
|
|
|
+ loginOut(){
|
|
|
+ window.topU.postMessage({
|
|
|
+ tools:"logout"
|
|
|
+ },"*")
|
|
|
},
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ setInterval(() => {
|
|
|
+ window.topU.postMessage({
|
|
|
+ tools:"getLogin"
|
|
|
+ },"*")
|
|
|
+ console.log("获取getLogin")
|
|
|
+ }, 2000);
|
|
|
+ window.addEventListener("message",(e)=>{
|
|
|
+ let data = e.data;
|
|
|
+ console.log("message",e)
|
|
|
+ if(data.tools && data.tools=='getLogin'){
|
|
|
+ if(data.type===2){
|
|
|
+ this.showLoadingOut = false;
|
|
|
+ }else if(data.type===1){
|
|
|
+ this.showLoadingOut = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.container {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background: url("../../../assets/inviteLoginSZBG.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: url("../../../assets/inviteLoginSZBG.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.c-box{
|
|
|
- width: 75%;
|
|
|
- height: 75%;
|
|
|
- border-radius: 12px;
|
|
|
- background-color: #4B88F5;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
+width: 75%;
|
|
|
+height: 75%;
|
|
|
+border-radius: 12px;
|
|
|
+background-color: #4B88F5;
|
|
|
+overflow: hidden;
|
|
|
+display: flex;
|
|
|
}
|
|
|
|
|
|
.c-b-left{
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- background: url("../../../assets/inviteLoginSZImage.png") no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
+flex: 1;
|
|
|
+height: 100%;
|
|
|
+background: url("../../../assets/inviteLoginSZImage.png") no-repeat;
|
|
|
+background-size: cover;
|
|
|
+background-position: center;
|
|
|
}
|
|
|
|
|
|
.c-b-right{
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: white;
|
|
|
- position: relative;
|
|
|
+flex: 1;
|
|
|
+height: 100%;
|
|
|
+display: flex;
|
|
|
+justify-content: center;
|
|
|
+align-items: center;
|
|
|
+background-color: white;
|
|
|
+position: relative;
|
|
|
+overflow-x:hidden ;
|
|
|
}
|
|
|
|
|
|
.c-b-r-closeArea{
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- position: absolute;
|
|
|
- right: -45px;
|
|
|
- top: -45px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #3681FC;
|
|
|
-
|
|
|
+width: 120px;
|
|
|
+height: 120px;
|
|
|
+position: absolute;
|
|
|
+right: -45px;
|
|
|
+top: -45px;
|
|
|
+border-radius: 50%;
|
|
|
+background-color: #3681FC;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.c-b-r-ca-btn{
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- left: 30px;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 1.5em;
|
|
|
+position: absolute;
|
|
|
+bottom: 30px;
|
|
|
+left: 30px;
|
|
|
+color: white;
|
|
|
+cursor: pointer;
|
|
|
+font-size: 1.5em;
|
|
|
}
|
|
|
|
|
|
.c-b-r-main{
|
|
|
- width: 80%;
|
|
|
- height: 80%;
|
|
|
+width: 80%;
|
|
|
+height: 80%;
|
|
|
+overflow: auto;;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-title{
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
+font-size: 28px;
|
|
|
+font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-form{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- margin-top: 40px;
|
|
|
+width: 100%;
|
|
|
+height: auto;
|
|
|
+margin-top: 40px;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-f-label{
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 5px;
|
|
|
+font-size: 14px;
|
|
|
+font-weight: bold;
|
|
|
+margin-bottom: 5px;
|
|
|
}
|
|
|
.c-b-r-m-f-input{
|
|
|
- position: relative;
|
|
|
+position: relative;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-f-input>>>.el-input__inner{
|
|
|
- background-color: #F0F2F5 !important;
|
|
|
- height: 52px;
|
|
|
- border-radius: 6px;
|
|
|
+background-color: #F0F2F5 !important;
|
|
|
+height: 52px;
|
|
|
+border-radius: 6px;
|
|
|
}
|
|
|
.showErrMsg>>>.el-input__inner{
|
|
|
- color: #EE3E3E !important;
|
|
|
+color: #EE3E3E !important;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-f-i-errMsg{
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- color: #EE3E3E;
|
|
|
- font-size: 14px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- top: 0;
|
|
|
+position: absolute;
|
|
|
+right: 10px;
|
|
|
+color: #EE3E3E;
|
|
|
+font-size: 14px;
|
|
|
+height: 100%;
|
|
|
+display: flex;
|
|
|
+align-items: center;
|
|
|
+top: 0;
|
|
|
}
|
|
|
|
|
|
.el-icon-warning-outline>span{
|
|
|
- margin-right: 10px !important;
|
|
|
+margin-right: 10px !important;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-btn{
|
|
|
- width: 92px;
|
|
|
- height: 36px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 6px;
|
|
|
- border: solid 1px #C2D9FE;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 20px;
|
|
|
- color: #C2D9FE;
|
|
|
- transition: .3s;
|
|
|
- margin-top: 10px;
|
|
|
- cursor:not-allowed;
|
|
|
+width: 92px;
|
|
|
+height: 36px;
|
|
|
+box-sizing: border-box;
|
|
|
+border-radius: 6px;
|
|
|
+border: solid 1px #C2D9FE;
|
|
|
+display: flex;
|
|
|
+justify-content: center;
|
|
|
+align-items: center;
|
|
|
+font-size: 20px;
|
|
|
+color: #C2D9FE;
|
|
|
+transition: .3s;
|
|
|
+margin-top: 10px;
|
|
|
+cursor:not-allowed;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-btnActive{
|
|
|
- border-color: #68A1FD;
|
|
|
- color: #68A1FD;
|
|
|
- cursor: pointer;
|
|
|
+border-color: #68A1FD;
|
|
|
+color: #68A1FD;
|
|
|
+cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-chooseNameArea{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- max-height: 300px;
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
+width: 100%;
|
|
|
+max-height: 70%;
|
|
|
+height: auto;
|
|
|
+/* max-height: 300px; */
|
|
|
+margin-top: 20px;
|
|
|
+display: flex;
|
|
|
+flex-wrap: wrap;
|
|
|
+overflow: auto;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-cna-none{
|
|
|
- font-size: 20px;
|
|
|
- margin-top: 30px;
|
|
|
- font-weight: bold;
|
|
|
+font-size: 20px;
|
|
|
+margin-top: 30px;
|
|
|
+font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-cna-item{
|
|
|
- width: auto;
|
|
|
- padding: 4px 6px;
|
|
|
- background-color: #F0F2F5;
|
|
|
- color: #000000;
|
|
|
- box-sizing: border-box;
|
|
|
- border:solid 1px #E7E7E7;
|
|
|
- border-radius: 3px;
|
|
|
- font-size: 14px;
|
|
|
- transition: .3s;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
+width: auto;
|
|
|
+padding: 4px 6px;
|
|
|
+background-color: #F0F2F5;
|
|
|
+color: #000000;
|
|
|
+box-sizing: border-box;
|
|
|
+border:solid 1px #E7E7E7;
|
|
|
+border-radius: 3px;
|
|
|
+font-size: 14px;
|
|
|
+transition: .3s;
|
|
|
+cursor: pointer;
|
|
|
+margin-right: 10px;
|
|
|
+margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.c-b-r-m-cna-itemActive{
|
|
|
- background-color: #E0EAFB;
|
|
|
- color:#3681FC;
|
|
|
- border-color: #3681FC;
|
|
|
-
|
|
|
+background-color: #E0EAFB;
|
|
|
+color:#3681FC;
|
|
|
+border-color: #3681FC;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|
|
|
.c-b-r-m-loginBtn{
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- font-size: 20px;
|
|
|
- margin-top: 20px;
|
|
|
+width: 100%;
|
|
|
+height: 56px;
|
|
|
+font-size: 20px;
|
|
|
+margin-top: 20px;
|
|
|
}
|
|
|
/* .i_box {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.i_box_top {
|
|
|
- height: 145px;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- background: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20px;
|
|
|
+ height: 145px;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
|
|
|
.i_box_top>div:nth-child(1) {
|
|
|
- color: rgb(147, 147, 147);
|
|
|
+ color: rgb(147, 147, 147);
|
|
|
}
|
|
|
|
|
|
.i_box_top>div:nth-child(2) {
|
|
|
- font-size: 28px;
|
|
|
- color: rgb(78, 138, 218);
|
|
|
- margin-top: 5px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: rgb(78, 138, 218);
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
.i_box_top>img {
|
|
|
- position: absolute;
|
|
|
- right: 30px;
|
|
|
- bottom: -60px;
|
|
|
- width: 150px;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ bottom: -60px;
|
|
|
+ width: 150px;
|
|
|
}
|
|
|
|
|
|
.i_box_login {
|
|
|
- height: calc(100% - 145px);
|
|
|
- width: 100%;
|
|
|
- background: linear-gradient(90deg, #477cd7, #65b9fc);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 50px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- align-content: flex-start;
|
|
|
+ height: calc(100% - 145px);
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(90deg, #477cd7, #65b9fc);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 50px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.i_box_login2 {
|
|
|
- height: calc(100% - 145px);
|
|
|
- background: linear-gradient(90deg, #477cd7, #65b9fc);
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow: auto;
|
|
|
- padding-bottom: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- align-content: flex-start;
|
|
|
+ height: calc(100% - 145px);
|
|
|
+ background: linear-gradient(90deg, #477cd7, #65b9fc);
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.i_box_login2 div{
|
|
|
- cursor: pointer;
|
|
|
- width: 80px;
|
|
|
- text-align: center;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- padding: 0 5px;
|
|
|
- overflow: hidden;
|
|
|
- background: rgb(225, 237, 255);
|
|
|
- margin: 10px 9px 0;
|
|
|
- color: rgb(37 124 255);
|
|
|
- border-radius: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: rgb(225, 237, 255);
|
|
|
+ margin: 10px 9px 0;
|
|
|
+ color: rgb(37 124 255);
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.i_box_login .input {}
|
|
|
|
|
|
.i_box_login .select {
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.i_box_login .button {
|
|
|
- margin-top: 30px;
|
|
|
- background: rgb(100, 100, 100);
|
|
|
- cursor: pointer;
|
|
|
- color: #fff;
|
|
|
- padding: 10px 50px;
|
|
|
- border-radius: 5px;
|
|
|
+ margin-top: 30px;
|
|
|
+ background: rgb(100, 100, 100);
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px 50px;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.none{
|
|
|
- width: 100% !important;
|
|
|
- height: 100% !important;
|
|
|
- background: unset !important;
|
|
|
- color: #fff !important;
|
|
|
- display: flex !important;
|
|
|
- align-items: center !important;
|
|
|
- justify-content: center !important;
|
|
|
- margin: 0 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ background: unset !important;
|
|
|
+ color: #fff !important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ margin: 0 !important;
|
|
|
} */
|
|
|
-</style>
|
|
|
+
|
|
|
+.loginOut{
|
|
|
+position: absolute;
|
|
|
+right: 30px;
|
|
|
+top: 30px;
|
|
|
+width: auto;
|
|
|
+height: auto;
|
|
|
+display: flex;
|
|
|
+justify-content: center;
|
|
|
+align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.loginOut>span{
|
|
|
+font-size: 24px;
|
|
|
+color: #fff;
|
|
|
+font-weight: bold;
|
|
|
+cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
SanHQin