|
|
@@ -0,0 +1,530 @@
|
|
|
+<template>
|
|
|
+ <div class="theAuth">
|
|
|
+ <div class="theTitle"></div>
|
|
|
+ <!-- {/* <i class={styles.iconClose} onClick={() => emit('close')}></i> */} -->
|
|
|
+ <div class="authContent">
|
|
|
+ <div class="steps">
|
|
|
+ <div class="scrollbarRef">
|
|
|
+ <div v-if="brower.ios">
|
|
|
+ <div v-if="step === 1">
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">01</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 点击下方【下载证书】按钮，下载数据安全证书安装包
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="downloadCert" @click="onDownload"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">02</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 双击<span>《安全证书.p12》</span>
|
|
|
+ ，输入钥匙串密码 ，点击
|
|
|
+ <span>【修改钥匙串】</span>
|
|
|
+ <span style="color: #777"> （若无此步骤则忽略） </span>
|
|
|
+ </p>
|
|
|
+ <div class="imgs imgs2">
|
|
|
+ <img src="./images/mac/1.png" class="m1" />
|
|
|
+ <img src="./images/mac/6.png" class="m6" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 2">
|
|
|
+ <div class="stepNum">03</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 输入证书密码：
|
|
|
+ <span class="red" style="text-decoration: underline">
|
|
|
+ colexiu.com</span
|
|
|
+ >
|
|
|
+ ，点击
|
|
|
+ <span>【好】</span>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/mac/2.png" class="m2" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 3">
|
|
|
+ <div class="stepNum">04</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ <span class="red">重启浏览器</span>
|
|
|
+ （在电脑屏幕左上方选择当前浏览器并点击
|
|
|
+ <span>【退出】</span>），再重新打开酷乐秀官网
|
|
|
+ </p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/mac/3.png" class="m3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 4">
|
|
|
+ <div class="stepNum">05</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 在【选择证书】弹窗中点击<span>【确定】</span>按钮
|
|
|
+ </p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/mac/4.png" class="m4" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="step === 5">
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">06</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 输入您的电脑密码，点击<span>【始终允许】</span>
|
|
|
+ <span style="color: #777"> （若无此步骤则忽略） </span>
|
|
|
+ </p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/mac/5.png" class="m5" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">07</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">证书安装完成，开始使用酷乐秀官网</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else>
|
|
|
+ <div v-if="step === 1">
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">01</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 点击下方【下载证书】按钮，下载数据安全证书安装包
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <div class="downloadCert" @click="onDownload"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">02</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 双击<span>《安全证书.pfx》</span>，出现弹窗后点击
|
|
|
+ <span>【下一步】</span>
|
|
|
+ </p>
|
|
|
+ <div class="imgs imgs2">
|
|
|
+ <img src="./images/window/1.png" class="w1" />
|
|
|
+ <img src="./images/window/2.png" class="w2" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 2">
|
|
|
+ <div class="stepNum">03</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">点击<span>【下一步】</span></p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/window/3.png" class="w3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 3">
|
|
|
+ <div class="stepNum">04</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">点击<span>【下一步】</span></p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/window/4.png" class="w4" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 4">
|
|
|
+ <div class="stepNum">05</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">点击<span>【下一步】</span></p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/window/8.png" class="w8" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 5">
|
|
|
+ <div class="stepNum">06</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">点击<span>【完成】</span></p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/window/5.png" class="w5" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step" v-if="step === 6">
|
|
|
+ <div class="stepNum">07</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">点击<span>【确定】</span></p>
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="./images/window/6.png" class="w6" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="step === 7">
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">08</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ <span class="red">重启浏览器</span>
|
|
|
+ ，打开酷乐秀官网
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step">
|
|
|
+ <div class="stepNum">09</div>
|
|
|
+ <div class="stepContent">
|
|
|
+ <p class="txt">
|
|
|
+ 在【选择证书】弹窗中点击<span>【确定】</span>
|
|
|
+ 按钮，证书安装完成，开始使用酷乐秀官网
|
|
|
+ </p>
|
|
|
+ <img src="./images/window/7.png" class="w7" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="btnGroup">
|
|
|
+ <div
|
|
|
+ v-if="step > 1"
|
|
|
+ class="btn btnUp"
|
|
|
+ :style="{ cursor: step <= 1 ? 'not-allowed' : 'pointer' }"
|
|
|
+ @click="changeUpDown('up')"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="['btn', 'btnDown', step === maxStep && 'btnDone']"
|
|
|
+ @click="changeUpDown('down')"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { defineComponent, reactive, toRefs } from 'vue'
|
|
|
+
|
|
|
+import { browser } from '@/helpers/utils'
|
|
|
+export default defineComponent({
|
|
|
+ name: 'the-auth',
|
|
|
+ emits: ['close'],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const state = reactive({
|
|
|
+ brower: browser() || {},
|
|
|
+ step: 1,
|
|
|
+ maxStep: browser().ios ? 5 : 7
|
|
|
+ })
|
|
|
+ const changeUpDown = (type: string) => {
|
|
|
+ if (type === 'up') {
|
|
|
+ if (state.step <= 1) return
|
|
|
+ state.step -= 1
|
|
|
+ } else if (type === 'down') {
|
|
|
+ if (state.step >= state.maxStep) {
|
|
|
+ // state.$listeners.close()
|
|
|
+ emit('close')
|
|
|
+ } else {
|
|
|
+ state.step += 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ;(document.querySelector('.scrollbarRef') as any).scrollTo(0, 0)
|
|
|
+ }
|
|
|
+ const onDownload = () => {
|
|
|
+ const isMac = (function () {
|
|
|
+ return /macintosh|mac os x/i.test(navigator.userAgent)
|
|
|
+ })()
|
|
|
+ if (isMac) {
|
|
|
+ window.open(
|
|
|
+ `https://oss.dayaedu.com/https-ssl/klx/安全证书.p12?v=${new Date().getTime()}`
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ window.open('https://oss.dayaedu.com/https-ssl/安全证书.pfx')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...toRefs(state),
|
|
|
+ changeUpDown,
|
|
|
+ onDownload
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.theAuth {
|
|
|
+ // background-color: #fff;
|
|
|
+ width: 724px;
|
|
|
+ padding-top: 130px;
|
|
|
+ box-shadow: none;
|
|
|
+ position: relative;
|
|
|
+ // overflow: hidden;
|
|
|
+
|
|
|
+ .iconClose {
|
|
|
+ position: absolute;
|
|
|
+ right: 38px;
|
|
|
+ top: 118px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url('./images/icon-close.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.theTitle {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: url('./images/auth-title-bg.png') top center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 142px;
|
|
|
+}
|
|
|
+
|
|
|
+.authContent {
|
|
|
+ // background: linear-gradient(180deg, #e1f8ff 0%, #bbe7fd 100%);
|
|
|
+ background: linear-gradient(180deg, #d3ede8 0%, #cff5fa 100%);
|
|
|
+ border-radius: 0 0 23px 23px;
|
|
|
+ padding-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.steps {
|
|
|
+ margin: 11px 27px 0;
|
|
|
+ padding-top: 12px;
|
|
|
+
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(255, 255, 255, 0.7) 0%,
|
|
|
+ rgba(255, 255, 255, 0.7) 88%,
|
|
|
+ #c0e7eb 100%
|
|
|
+ );
|
|
|
+ border-radius: 18px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+
|
|
|
+ .scrollbarRef {
|
|
|
+ margin: 0 0 25px;
|
|
|
+ padding: 14px 25px 25px;
|
|
|
+ min-height: calc(55vh - 28px);
|
|
|
+ max-height: calc(55vh - 28px);
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.step {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-bottom: 35px;
|
|
|
+
|
|
|
+ .stepNum {
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ background: #c1ece8;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #131415;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stepContent {
|
|
|
+ .txt {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 33px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #14928a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #e80000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .downloadCert {
|
|
|
+ margin-top: 14px;
|
|
|
+ width: 165px;
|
|
|
+ height: 39px;
|
|
|
+ background: url('./images/downlowdCert.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ border-radius: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgs2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-top: 12px;
|
|
|
+
|
|
|
+ .m6,
|
|
|
+ .w2 {
|
|
|
+ margin-left: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w1 {
|
|
|
+ width: 90px;
|
|
|
+ height: 98px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w2 {
|
|
|
+ width: 250px;
|
|
|
+ height: 258px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w3,
|
|
|
+ .w4,
|
|
|
+ .w5,
|
|
|
+ .w8 {
|
|
|
+ margin-top: 12px;
|
|
|
+ width: 313px;
|
|
|
+ height: 322px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w6 {
|
|
|
+ margin-top: 12px;
|
|
|
+ width: 196px;
|
|
|
+ height: 207px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w7 {
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 96%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m1 {
|
|
|
+ width: 73px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m6 {
|
|
|
+ width: 263px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m3 {
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 358px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m2,
|
|
|
+ .m4,
|
|
|
+ .m5 {
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m2 {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moreImg {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 47%;
|
|
|
+ margin-bottom: 32px;
|
|
|
+
|
|
|
+ &:nth-child(2n + 2) {
|
|
|
+ margin-left: 6%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btnGroup {
|
|
|
+ padding: 25px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ // :global {
|
|
|
+ // .n-button {
|
|
|
+ // height: 37px !important;
|
|
|
+ // width: 223px !important;
|
|
|
+ // --n-border: none !important;
|
|
|
+ // --n-border-hover: none !important;
|
|
|
+ // --n-border-pressed: none !important;
|
|
|
+ // --n-border-focus: none !important;
|
|
|
+ // background: linear-gradient(305deg, #15BBFF 0%, #1784FF 100%);
|
|
|
+ // border-radius: 22px;
|
|
|
+ // font-size: 15Px;
|
|
|
+ // font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
|
|
+ // font-weight: bold;
|
|
|
+ // color: #FFFFFF;
|
|
|
+ // line-height: 22px;
|
|
|
+ // letter-spacing: 1px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .btn {
|
|
|
+ width: 165px;
|
|
|
+ height: 39px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: opacity 0.2s ease;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ transition: opacity 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ + .btn {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnUp {
|
|
|
+ background: url('./images/btn-up.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnDown {
|
|
|
+ background: url('./images/btn-down.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnDone {
|
|
|
+ background: url('./images/btn-done.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
