角色选择登录

src/components/pages/inviteLoginST/inviteLogin.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="container" v-loading="loading">
+				<div class="c-box">
+					<div class="c-b-left"></div>
+					<div class="c-b-right">
+						<div class="c-b-r-closeArea">
+							<span class="el-icon-close c-b-r-ca-btn"></span>
+						</div>
+						<div class="c-b-r-main">
+							<div class="c-b-r-m-title">欢迎登录！</div>
+							<div class="c-b-r-m-smallTitle">请选择登录角色</div>
+							<div class="c-b-r-m-identity">
+								<div class="c-b-r-m-i-item" @click.stop="clickIdentity(0)">
+									<div class="c-b-r-m-i-itemSvg">
+										<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M20.2969 5.57812C26.3288 5.57812 31.2188 10.468 31.2188 16.5C31.2188 20.3947 29.1802 23.8133 26.1118 25.7469V25.7464C29.8475 27.3133 32.8847 30.2153 34.6266 33.8555L41.5929 23.8744C42.0671 23.1951 43.0021 23.0288 43.6815 23.5028C44.354 23.9722 44.5238 24.8934 44.067 25.571L44.053 25.5914L36.0582 37.046C35.9913 37.1419 35.9136 37.2297 35.8264 37.3075C36.0935 38.485 36.2344 39.7104 36.2344 40.9688C36.2344 41.7972 35.5628 42.4688 34.7344 42.4688C33.9142 42.4688 33.2478 41.8105 33.2346 40.9936L33.2344 40.9688C33.2344 33.5129 27.1902 27.4688 19.7344 27.4688C12.3531 27.4688 6.35541 33.3926 6.2362 40.7455L6.23438 40.9688C6.23438 41.7972 5.5628 42.4688 4.73438 42.4688C3.90595 42.4688 3.23438 41.7972 3.23438 40.9688C3.23438 33.8485 7.74441 27.7817 14.0636 25.4691L14.0634 25.4695C11.2296 23.4965 9.375 20.2148 9.375 16.5C9.375 10.468 14.2649 5.57812 20.2969 5.57812ZM20.2969 8.57812C15.9218 8.57812 12.375 12.1249 12.375 16.5C12.375 20.8751 15.9218 24.4219 20.2969 24.4219C24.672 24.4219 28.2188 20.8751 28.2188 16.5C28.2188 12.1249 24.672 8.57812 20.2969 8.57812ZM43.2188 13.1719C44.0472 13.1719 44.7188 13.8435 44.7188 14.6719C44.7188 15.492 44.0605 16.1584 43.2436 16.1717L43.2188 16.1719H37.5938C36.7653 16.1719 36.0938 15.5003 36.0938 14.6719C36.0938 13.8518 36.752 13.1853 37.5689 13.1721L37.5938 13.1719H43.2188ZM43.2188 6.5625C44.0472 6.5625 44.7188 7.23408 44.7188 8.0625C44.7188 8.88263 44.0605 9.54905 43.2436 9.56231L43.2188 9.5625H33.6562C32.8278 9.5625 32.1562 8.89092 32.1562 8.0625C32.1562 7.24238 32.8145 6.57595 33.6314 6.56269L33.6562 6.5625H43.2188Z"></path></svg>
+									</div>
+									<span>教师</span>
+								</div>
+
+								<div class="c-b-r-m-i-item" @click.stop="clickIdentity(1)">
+									<div class="c-b-r-m-i-itemSvg">
+										<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.23171 34.3357C7.77909 34.1786 6.48177 34.0663 5.60693 34.0038C4.78061 33.9448 4.0629 34.5668 4.00388 35.3931C3.94485 36.2195 4.56687 36.9372 5.39319 36.9962C6.40933 37.0688 8.04552 37.2134 9.82611 37.4213C12.0643 37.6826 14.4587 38.0358 16.1363 38.4552C19.2155 39.225 22.9257 40.7195 24.3909 41.3707C24.7457 41.5284 25.1478 41.5424 25.5127 41.4097C27.3234 40.7512 31.8193 39.2434 35.3255 38.4643C36.9179 38.1104 38.6493 37.8077 40.2266 37.5667C42.1198 37.2775 43.7672 37.0808 44.6493 36.9926C45.4736 36.9101 46.0751 36.1751 45.9926 35.3507C45.9102 34.5264 45.1751 33.925 44.3508 34.0074C43.5761 34.0849 42.2795 34.2375 40.7553 34.4559C39.6545 32.7924 37.8888 30.7004 35.5826 28.9093C32.8401 26.7793 29.233 25 25.0001 25C20.7743 25 17.1703 26.7481 14.4267 28.845C12.1067 30.6182 10.3326 32.6918 9.23171 34.3357ZM12.6405 34.7614C14.157 34.98 15.6523 35.2419 16.8639 35.5448C19.8372 36.2881 23.2666 37.6262 25.0535 38.3878C27.1705 37.6408 31.3133 36.2827 34.6747 35.5357C35.5779 35.335 36.5165 35.1514 37.4428 34.986C36.5202 33.7997 35.2683 32.4637 33.7425 31.2787C31.3434 29.4154 28.3671 28 25.0001 28C21.6258 28 18.6465 29.3957 16.2484 31.2286C14.7721 32.3569 13.5528 33.6239 12.6405 34.7614Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M25 25C28.866 25 32 21.866 32 18C32 14.134 28.866 11 25 11C21.134 11 18 14.134 18 18C18 21.866 21.134 25 25 25ZM25 28C30.5228 28 35 23.5228 35 18C35 12.4772 30.5228 8 25 8C19.4772 8 15 12.4772 15 18C15 23.5228 19.4772 28 25 28Z"></path></svg>
+									</div>
+									<span>学生</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            userid: "",
+            options: [],
+            loading: false,
+            res: {},
+            classJuri: [],
+            code: this.$route.query.code,
+            courseId:"",
+						chooseData:{}
+        }
+    },
+    methods: {
+			clickIdentity(type){
+				if(type==0){//教师
+					window.parent.postMessage(
+              {
+                  tools: "loginSz",
+              },
+              "*"
+          );
+				}else if(type==1){//学生
+					window.parent.postMessage(
+              {
+                  tools: "inviteLoginSz",
+									cid:"16ace517-b5c7-4168-a9bb-a9e0035df840"
+              },
+              "*"
+          );
+				}
+			}
+		}
+}
+</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;
+}
+
+.c-box{
+	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;
+}
+
+.c-b-right{
+	flex: 1;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: white;
+	position: relative;
+}
+
+.c-b-r-closeArea{
+	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;
+}
+
+.c-b-r-main{
+	width: 60%;
+	height: 60%;
+}
+
+.c-b-r-m-title{
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.c-b-r-m-smallTitle{
+	font-size: 16px;
+	margin: 20px 0;
+}
+
+.c-b-r-m-identity{
+	width: 100%;
+	height: auto;
+	display: flex;
+}
+
+.c-b-r-m-i-item{
+	padding: 20px 40px;
+	background-color: #F0F2F5;
+	border-radius: 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-right: 20px;
+	cursor: pointer;
+}
+
+.c-b-r-m-i-item:hover{
+	border: solid 1px #3681fc;
+	background-color: #E0EAFB;
+	box-shadow: 4px 4px 8px 0 rgba(54,115,232,.12);
+}
+
+.c-b-r-m-i-item:hover>.c-b-r-m-i-itemSvg{
+	stroke: #3681fc;
+	color:#3681fc;
+}
+
+.c-b-r-m-i-itemSvg{
+	font-size: 2.2em;
+	stroke: black;
+	color: black;
+}
+
+.c-b-r-m-i-item>span{
+	font-size: 18px;
+}
+
+</style>

src/router/index.js

@@ -89,6 +89,7 @@ import toolTypeAna from '@/components/pages/myReport/components/toolTypeAna'
 import mrEva from '@/components/pages/myReport/components/mrEva'
 import inviteLogin from '@/components/pages/inviteLogin/inviteLogin'
 import inviteLoginSZ from '@/components/pages/inviteLoginSZ/inviteLogin'
+import inviteLoginST from '@/components/pages/inviteLoginST/inviteLogin'
 import stReport from '@/components/pages/components/stReport'
 import classReport from '@/components/pages/components/classReport'
 import courseReport from '@/components/pages/components/courseReport'
@@ -784,6 +785,14 @@ export default new Router({
                 requireAuth: '' // 不需要鉴权
             }
         },
+				{
+					path: '/inviteLoginST',
+					name: 'inviteLoginST',
+					component: inviteLoginST,
+					meta: {
+							requireAuth: '' // 不需要鉴权
+					}
+			},
         {
             path: '/stReport',
             name: 'stReport',