fix: 对不支持高斯模糊效果的浏览器做兼容处理

src/components/BackTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title back-title">
-    <icon :unicode="iconMap.back" @click.native="handleBack()"/>
+    <icon :unicode="iconMap.back" @click="handleBack()"/>
     <slot></slot>
   </div>
 </template>

src/components/Background.vue

@@ -52,6 +52,19 @@ export default {}
       border-left: transparent 24vmin solid;
     }
   }
+
+  @media (min-width: 600px) and (max-width: 1300px){
+    .mountain {
+      transform-origin: bottom;
+      transform: scale(.7);
+      left: 5vmin;
+    }
+    .sun {
+      right: 10vw;
+      top: 5vh;
+    }
+  }
+
   @media (max-width: 700px) {
     .mountain {
       left: 5vmin;

src/components/CButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="c-button">
+  <button class="c-button" @click="$emit('click')">
     <span v-if="icon" class="icon">{{icon}}</span>
     <slot></slot>
   </button>
@@ -54,6 +54,18 @@ button {
   }
 }
 
+.warning {
+  color: $theme-orange;
+  background: $theme-orange-transparent;
+  &:hover {
+    background:  darken($theme-orange-transparent, 5);
+  }
+
+  &:active {
+    background:  darken($theme-orange-transparent, 10);
+  }
+}
+
 .error {
   color: $theme-red;
   background: $theme-red-transparent;

src/components/GlobalMessage.vue

@@ -81,21 +81,20 @@ export default {
   margin: 0 auto;
   padding: 8px 10px;
   border-radius: 100px;
-  backdrop-filter: saturate(180%) blur(20px);
-  background: $theme-blue-transparent;
+  background: $theme-blue-light;
 }
 
 .error {
   .message {
     color: $theme-red;
-    background: $theme-red-transparent;
+    background: $theme-red-light;
   }
 }
 
 .success {
   .message {
     color: $theme-green;
-    background: $theme-green-transparent;
+    background: $theme-green-light;
   }
 }
 

src/components/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="icon" :title="title ? title : ''">
+  <div class="icon" :title="title ? title : ''" @click="$emit('click')">
     <span>{{unicode}}</span>
     <ripple></ripple>
   </div>

src/components/PDF/PdfController.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="pdf-controller">
-    <icon :class="pageMarked ? 'active' : ''" @click.native="handleMarkButtonClicked"
+    <icon :class="pageMarked ? 'active' : ''" @click="handleMarkButtonClicked"
           :unicode="pageMarked ? iconMap['mark'] : iconMap['mark_border']" title="收藏本页"/>
     <div class="spacer"></div>
-    <icon @click.native="handlePrevious" :unicode="iconMap['previous']" title="上一页"/>
-    <icon @click.native="handleScreenShot" :unicode="iconMap['screen_shot']" title="将本页截图"/>
-    <icon @click.native="handleNext" :unicode="iconMap['next']" title="下一页"/>
+    <icon @click="handlePrevious" :unicode="iconMap['previous']" title="上一页"/>
+    <icon @click="handleScreenShot" :unicode="iconMap['screen_shot']" title="将本页截图"/>
+    <icon @click="handleNext" :unicode="iconMap['next']" title="下一页"/>
     <div class="spacer"></div>
-    <icon :class="showDiscussion ? 'active' : ''" @click.native="handleDiscussionShowState"
+    <icon :class="showDiscussion ? 'active' : ''" @click="handleDiscussionShowState"
           :unicode="iconMap['discussion']" title="讨论区"/>
   </div>
 </template>

src/components/TabIconButton.vue

@@ -2,6 +2,7 @@
   <div
     class="tab-icon-button"
     :class="active ? 'active' : ''"
+    @click="$emit('click')"
   >{{ tab.unicode }}</div>
 </template>
 

src/components/TabSideComponent.vue

@@ -60,7 +60,7 @@ export default {
   padding: 24px;
   align-items: center;
   backdrop-filter: saturate(180%) blur(15px);
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.5);
   & > .content {
     min-height: 60vh;
   }
@@ -89,4 +89,10 @@ export default {
     padding: 64px 10vw;
   }
 }
+
+@supports (not(backdrop-filter: saturate(180%) blur(15px))) {
+  .small {
+    background: rgb(240, 240, 240);
+  }
+}
 </style>

src/style/theme.scss

@@ -9,6 +9,12 @@ $theme-red-transparent: rgba(244, 67, 54, .1);
 $theme-green-transparent: rgba(76, 175, 80, .1);
 
 
+$theme-blue-light: lighten(rgb(84, 133, 229), 33);
+$theme-orange-light: lighten(rgb(255, 170, 68), 30);
+$theme-red-light: lighten(rgb(244, 67, 54), 37);
+$theme-green-light: lighten(rgb(76, 175, 80), 42);
+
+
 $icon-normal-color: #7a8a9a;
 $icon-hover-color: lighten($theme-blue, 10);
 

src/views/Home.vue

@@ -4,8 +4,8 @@
       <h1 class="title">
         SEEC 课堂助手
       </h1>
-      <c-button @click.native="handleLoginButtonClick" class="full-width mb-12">去登录</c-button>
-      <c-button class="secondary full-width" @click.native="showMessage">去注册</c-button>
+      <c-button @click="handleLoginButtonClick" class="full-width mb-12">去登录</c-button>
+      <c-button class="secondary full-width" @click="showMessage">去注册</c-button>
     </div>
     <background></background>
   </div>
@@ -26,7 +26,7 @@ export default {
       // todo
       this.$store.commit(SET_MESSAGE, {
         message: '消息提醒测试',
-        type: 'success'
+        type: 'info'
       })
     }
   }

src/views/login/Login.vue

@@ -5,7 +5,7 @@
       <c-input placeholder="用户名"></c-input>
       <c-input placeholder="密码"></c-input>
       <div class="button-area">
-        <c-button @click.native="handleSubmit">确认</c-button>
+        <c-button @click="handleSubmit">确认</c-button>
         <c-button class="secondary">帮助</c-button>
       </div>
       <background></background>

src/views/register/Register.vue

@@ -1,24 +1,50 @@
 <template>
   <div class="login-view-container">
     <div>
-      <h1><span>SEEC</span> 用户注册</h1>
-      <c-input placeholder="用户名"></c-input>
-      <c-input placeholder="密码"></c-input>
-      <c-input placeholder="确认密码"></c-input>
-      <c-input placeholder="邮箱"></c-input>
-      <div class="verified-code-wrapper">
-        <c-input placeholder="邮箱验证码"></c-input>
-        <c-button>发送验证码</c-button>
-      </div>
-      <c-input placeholder="手机"></c-input>
-      <div class="verified-code-wrapper">
-        <c-input placeholder="手机验证码"></c-input>
-        <c-button>发送验证码</c-button>
-      </div>
-      <div class="button-area">
-        <c-button @click.native="handleSubmit">确认</c-button>
-        <c-button class="help-button">帮助</c-button>
-      </div>
+      <h1 class="title"><span>SEEC</span> 用户注册</h1>
+      <section class="step-1" v-show="step === 1">
+        <div class="sub-title">
+          登录信息
+          <span>1/2</span>
+        </div>
+        <c-input placeholder="邮箱" v-model="email"></c-input>
+        <div class="verified-code-wrapper">
+          <c-input placeholder="邮箱验证码" v-model="emailCode"></c-input>
+          <c-button class="secondary" @click="handleSendEmailCode">发送验证码</c-button>
+        </div>
+        <section class="tip mb-24">
+          <div>关于邮箱的说明：</div>
+          <div>1. 邮箱需为南京大学校邮</div>
+          <div>2. 系统根据邮箱判定您的身份为教师还是学生</div>
+        </section>
+        <c-input placeholder="密码" v-model="password"></c-input>
+        <c-input placeholder="确认密码" v-model="passwordEnsure"></c-input>
+        <c-button class="secondary full-width mb-16" @click="step = 2">下一步</c-button>
+      </section>
+      <section class="step=2"  v-show="step === 2">
+        <section class="tip">
+          <div>已填写的邮箱：{{}}</div>
+        </section>
+        <c-button @click="step = 1" class="warning full-width mb-16">上一步</c-button>
+        <div class="sub-title">
+          其他信息
+          <span>2/2</span>
+        </div>
+        <c-input placeholder="姓名"></c-input>
+        <section class="tip">
+          <div>请使用真实姓名，便于学生、老师之间辨认</div>
+        </section>
+        <c-input placeholder="手机"></c-input>
+        <div class="verified-code-wrapper">
+          <c-input placeholder="手机验证码"></c-input>
+          <c-button class="secondary">发送验证码</c-button>
+        </div>
+        <div class="button-area">
+          <c-button @click="handleSubmit">确认</c-button>
+          <c-button class="secondary">帮助</c-button>
+        </div>
+      </section>
+      <background></background>
     </div>
   </div>
 </template>
@@ -26,9 +52,22 @@
 <script>
 import CInput from '@/components/CInput'
 import CButton from '@/components/CButton'
+import Background from '@/components/Background'
 
 export default {
-  components: { CButton, CInput },
+  components: { CButton, CInput, Background },
+  data () {
+    return {
+      step: 1,
+      email: '',
+      emailCode: '',
+      password: '',
+      passwordEnsure: '',
+      name: '',
+      phone: '',
+      phoneCode: ''
+    }
+  },
   methods: {
     handleSubmit () {
       this.$router.push('/teacher')
@@ -38,18 +77,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h1 {
-  color: #3a4a5a;
-  font-size: 28px;
-  font-weight: bold;
-  margin-bottom: 32px;
+.title {
+  span {
+    font-family: 'Courier New', 'Courier', monospace;
+    font-size: 1.15em;
+  }
+}
 
-  & > span {
+.sub-title {
+  span {
+    float: right;
+    color: #aabaca;
     font-family: 'Courier New', 'Courier', monospace;
     font-size: 1.15em;
   }
 }
 
+.tip {
+  font-weight: bold;
+  color: #7a8a9a;
+  font-size: 12px;
+}
+
 .login-view-container {
   height: 95vh;
   display: flex;
@@ -57,13 +106,14 @@ h1 {
   justify-content: center;
 
   & > div {
-    max-width: 260px;
+    max-width: 360px;
+    padding: 0 24px;
     width: 100%;
   }
 }
 
 .c-input {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   background: #f2f6fa;
 }
 
@@ -71,38 +121,25 @@ h1 {
   display: flex;
   margin: 0 -8px;
 
-  & > button {
+  & > .c-button {
+    flex: 1;
     margin: 0 8px;
   }
 }
 
-.help-button {
-  $background-color: #e6e8ea;
-  background: #e6e8ea;
-  color: #3a4a5a;
-
-  &:hover {
-    background: darken($background-color, 5);
-  }
-
-  &:active {
-    background: darken($background-color, 10);
-  }
-}
-
 .verified-code-wrapper {
-  & > .c-input {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  .c-input {
     margin-bottom: unset;
+    flex: 1;
   }
 
   .c-button {
     margin-left: 12px;
-    height: 48px;
-    padding-left: 12px;
-    padding-right: 12px;
   }
-
-  margin-bottom: 24px;
-  display: flex;
 }
 </style>

src/views/shared/UserHomeLayout.vue

@@ -7,7 +7,7 @@
             :active="currentRouteName.match(tab.name)"
             :tab="tab"
             :key="tab.unicode"
-            @click.native="handleIconButtonClick(tab.name)"
+            @click="handleIconButtonClick(tab.name)"
             :title="tab.title"
           >
           </tab-icon-button>
@@ -24,7 +24,7 @@
           :active="currentRouteName.match(tab.name)"
           :tab="tab"
           :key="tab.unicode"
-          @click.native="handleIconButtonClick(tab.name)"
+          @click="handleIconButtonClick(tab.name)"
         >
         </tab-icon-button>
       </template>
@@ -136,7 +136,7 @@ export default {
 
   .menu-container-small {
     z-index: 2;
-    backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(15px);
     background: rgba(255, 255, 255, 0.8);
     width: 100%;
     position: fixed;
@@ -153,4 +153,10 @@ export default {
     padding: unset;
   }
 }
+
+@supports (not(backdrop-filter: saturate(180%) blur(15px))) {
+  .menu-container-small {
+    background: rgb(255, 255, 255);
+  }
+}
 </style>

src/views/teacher/components/TeacherCourseDetail.vue

@@ -6,7 +6,7 @@
       <c-input placeholder="不会影响已选学生"/>
       <c-button class="secondary">确认修改</c-button>
     </div>
-    <c-button class="secondary full-width mb-16" @click.native="handleCheckSlideList(123)">点击查看课件列表</c-button>
+    <c-button class="secondary full-width mb-16" @click="handleCheckSlideList(123)">点击查看课件列表</c-button>
     <c-button class="error full-width">删除课程</c-button>
   </tab-side-component>
 </template>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -2,14 +2,14 @@
   <tab-side-component>
     <back-title>课件详情</back-title>
     <div class="sub-title">浏览课件</div>
-    <c-button class="full-width mb-16" @click.native="handleReadSlide">浏览课件</c-button>
-    <c-button class="full-width secondary mb-24" @click.native="handleQuizSetting">查看习题答题情况</c-button>
+    <c-button class="full-width mb-16" @click="handleReadSlide">浏览课件</c-button>
+    <c-button class="full-width secondary mb-24" @click="handleQuizSetting">查看习题答题情况</c-button>
     <div class="sub-title">课件设置</div>
     <div class="re-upload-wrapper">
       <file-uploader placeholder="选取文件重新上传"/>
       <c-button class="secondary">确认修改</c-button>
     </div>
-    <c-button class="secondary full-width mb-16" @click.native="handleQuizSetting">设置课件习题</c-button>
+    <c-button class="secondary full-width mb-16" @click="handleQuizSetting">设置课件习题</c-button>
     <c-button class="error full-width mb-16">删除课件</c-button>
   </tab-side-component>
 </template>

src/views/teacher/tabs/CreateSlide.vue

@@ -19,7 +19,7 @@
     />
     <div class="sub-title">幻灯片文件 <span class="tag">目前支持 PDF 格式</span></div>
     <file-uploader v-model="file"/>
-    <c-button class="my-button" @click.native.prevent="handleSubmit">
+    <c-button class="my-button" @click.prevent="handleSubmit">
       添加
     </c-button>
   </div>

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -5,7 +5,7 @@
       <!--      <div class="no-content-warning">您还没有设置相关课程喔～</div>-->
       <course-card :course="{}" :index="1" :clickHandler="handleClick"></course-card>
       <course-card :course="{}" :index="2" :clickHandler="handleClick"></course-card>
-      <c-button @click.native="handleCreateNewCourse" class="full-width secondary">新建课程</c-button>
+      <c-button @click="handleCreateNewCourse" class="full-width secondary">新建课程</c-button>
     </div>
     <router-view/>
   </div>

src/views/teacher/tabs/TeacherExplore.vue

@@ -5,7 +5,7 @@
       <search-bar></search-bar>
       <section>
         <h1 class="sub-title">最近浏览</h1>
-        <!--      <c-button @click.native="push()">临时：PDF阅读器链接</c-button>-->
+        <!--      <c-button @click="push()">临时：PDF阅读器链接</c-button>-->
         <slide-card :click-handler="handleSlideCardClick"></slide-card>
         <br>
       </section>