|
|
@@ -71,20 +71,12 @@
|
|
|
}
|
|
|
.login-main-wrap {
|
|
|
display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
+ justify-content: center;
|
|
|
width: 100%;
|
|
|
height: 600px;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
-}
|
|
|
-.login-img-wrap {
|
|
|
- width: 45%;
|
|
|
- max-width: 600px;
|
|
|
- height: 100%;
|
|
|
- padding: 12px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ margin-top: -50px;
|
|
|
}
|
|
|
|
|
|
.login-main-img {
|
|
|
@@ -101,6 +93,7 @@
|
|
|
justify-content: space-evenly;
|
|
|
align-items: center;
|
|
|
margin-top: 0px;
|
|
|
+ margin-left: 2%;
|
|
|
}
|
|
|
.enter-box {
|
|
|
width: 150px;
|
|
|
@@ -129,28 +122,191 @@
|
|
|
color: white;
|
|
|
font-size: 200px;
|
|
|
}
|
|
|
+.login-img-wrap {
|
|
|
+ width: 45%;
|
|
|
+ max-width: 760px;
|
|
|
+ height: 500px;
|
|
|
+ padding: 12px;
|
|
|
+ margin-right: 5%;
|
|
|
+}
|
|
|
+.swiper-item-box {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 500px;
|
|
|
+ .title {
|
|
|
+ font-size: 40px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1.1;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .cont {
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ .cont-title {
|
|
|
+ font-size: 26px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1.1;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+ .cont-text {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ color: #9e9e9e;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ &::before {
|
|
|
+ content: "|";
|
|
|
+ margin-right: 11px;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border1::before {
|
|
|
+ color: #de5c53;
|
|
|
+ }
|
|
|
+ .border2::before {
|
|
|
+ color: #fcdc6b;
|
|
|
+ }
|
|
|
+ .border3::before {
|
|
|
+ color: #25ca92;
|
|
|
+ }
|
|
|
+ .border4::before {
|
|
|
+ color: #3eaefe;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link {
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.logintype {
|
|
|
+ .title {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ color: #9e9e9e;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .login-box {
|
|
|
+ min-width: 520px;
|
|
|
+ background-color: rgba(66, 69, 81, 0.9);
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-left: 5px solid #3dadff;
|
|
|
+ border-radius: 5px;
|
|
|
+ border-right: 5px solid #3dadff;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(75, 79, 96, 0.9);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-box-icon {
|
|
|
+ width: 20%;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid #616161;
|
|
|
+ }
|
|
|
+ .login-box-cont {
|
|
|
+ width: 80%;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 17px;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ color: #bdbdbd;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .subtitle {
|
|
|
+ display: block;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<template>
|
|
|
<div class="login-main-wrap">
|
|
|
<div class="login-img-wrap">
|
|
|
- <img src="@/assets/login/1-3.png" class="login-main-img">
|
|
|
+ <!-- <img src="@/assets/login/1-3.png" class="login-main-img"> -->
|
|
|
+ <!-- 轮播区域 -->
|
|
|
+ <Carousel v-model="curPage" loop dots="outside" arrow="never">
|
|
|
+ <CarouselItem>
|
|
|
+ <div class="swiper-item-box">
|
|
|
+ <div class="title">
|
|
|
+ 歡迎來到醍摩豆 5
|
|
|
+ <br>
|
|
|
+ 新時代智慧教育之旅 就此展開
|
|
|
+ </div>
|
|
|
+ <div class="cont">
|
|
|
+ <div class="cont-title">HiTeach 5 智慧教學系統</div>
|
|
|
+ <p class="cont-text border1">實踐差異化教學，現代化因材施教</p>
|
|
|
+ <p class="cont-text border2">線上線下，混和式教學系統首選</p>
|
|
|
+ <p class="cont-text border3">合作學習，素養導向教學的全面應用</p>
|
|
|
+ <p class="cont-text border4">看見每個學生思考</p>
|
|
|
+ </div>
|
|
|
+ <div class="cont">
|
|
|
+ <div class="cont-title">醍摩豆雲平台 IES 5</div>
|
|
|
+ <p class="cont-text border1">新架構與新技術，速度升級更有感</p>
|
|
|
+ <p class="cont-text border2">兼容各式媒體與檔案，雲端資源庫隨取即用</p>
|
|
|
+ <p class="cont-text border3">題庫組卷、閱卷系統，評量應用更多元</p>
|
|
|
+ <p class="cont-text border4">博拉圖學情分析，學生成績精準提升</p>
|
|
|
+ </div>
|
|
|
+ <div class="link">
|
|
|
+ <a target="_block" href="https://www.habook.com/zh-tw/news.php?act=view&id=408">
|
|
|
+ 了解更多關於醍摩豆 5
|
|
|
+ <i class="ivu-icon ivu-icon-ios-arrow-forward" style="font-size: 19px;"></i>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </CarouselItem>
|
|
|
+ </Carousel>
|
|
|
</div>
|
|
|
<div class="login-enter-wrap">
|
|
|
- <div class="enter-box" @click="loginTo('teacher')">
|
|
|
+ <div class="logintype">
|
|
|
+ <span class="title">請選擇您的身份進行登入</span>
|
|
|
+ <div class="login-box" @click="loginTo('teacher')">
|
|
|
+ <div class="login-box-icon"><img width="40" src="@/assets/login/icon_teacher.svg"></div>
|
|
|
+ <div class="login-box-cont">
|
|
|
+ <div class="main">
|
|
|
+ <span class="subtitle">教師身份</span>
|
|
|
+ 以教師身份登入IES 5智慧教學服務，即刻存取雲端服務
|
|
|
+ </div>
|
|
|
+ <i class="ivu-icon ivu-icon-ios-arrow-forward" style="font-size: 35px; color: rgb(189, 189, 189);"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="login-box" @click="loginTo('student')">
|
|
|
+ <div class="login-box-icon"><img width="40" src="@/assets/login/icon_student.svg"></div>
|
|
|
+ <div class="login-box-cont">
|
|
|
+ <div class="main"><span class="subtitle">學生身份</span> 以學生身份登入AClass ONE智慧學伴服務，完成學習任務與測驗 </div><i class="ivu-icon ivu-icon-ios-arrow-forward" style="font-size: 35px; color: rgb(189, 189, 189);"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="link" style="text-align: right; letter-spacing: 1px;"><span style="margin-right: 20px;">還沒有帳號嗎?</span>點此<a href="/regist" class="" style="text-decoration: underline; color: rgb(41, 114, 169);">免費註冊</a></div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="enter-box" @click="loginTo('teacher')">
|
|
|
<img style="display: block;width: 100%;" src="@/assets/login/1-5.png">
|
|
|
- <!-- <Icon custom="iconfont icon-teacher" class="icon-to-img"></Icon> -->
|
|
|
<p class="enter-type-btn">
|
|
|
教师端
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="enter-box" @click="loginTo('student')">
|
|
|
<img style="display: block;width: 100%;" src="@/assets/login/1-4.png">
|
|
|
- <!-- <Icon custom="iconfont icon-student1" class="icon-to-img"></Icon> -->
|
|
|
<p class="enter-type-btn">
|
|
|
学生端
|
|
|
</p>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<!-- 提示視窗 -->
|
|
|
<Modal v-model="identityFlag" width="360" :mask-closable="false" :closable="false" class-name="identityModal">
|
|
|
@@ -169,6 +325,7 @@ import { User } from '@/service/User'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ curPage: 0,
|
|
|
defaultSchool: {
|
|
|
name: '',
|
|
|
code: ''
|
