feat: 新建课程窗口（三栏布局完成）

src/components/BackTitle.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="title">
+    <icon :unicode="iconMap.back" @click.native="handleBack()"/>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import Icon from '@/components/Icon'
+import iconMap from '@/utils/icon-map'
+
+export default {
+  name: 'BackTitle',
+  components: { Icon },
+  data () {
+    return {
+      iconMap
+    }
+  },
+  methods: {
+    handleBack () {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon {
+  color: #3a4a5a;
+  position: relative;
+  left: -10px;
+}
+</style>

src/components/CInput.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="c-input">
     <label>
-      <input
+      <component
+        :is="type"
         type="text"
         :placeholder="placeholder"
         :value="value"
@@ -19,13 +20,19 @@ export default {
   },
   props: {
     value: String,
-    placeholder: String
+    placeholder: String,
+    textarea: Boolean
+  },
+  data () {
+    return {
+      type: this.textarea ? 'textarea' : 'input'
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
-input {
+input, textarea {
   box-sizing: border-box;
   font-size: 16px;
   font-weight: bold;
@@ -44,4 +51,9 @@ input {
   }
 }
 
+textarea {
+  height: 96px;
+  resize: none;
+}
+
 </style>

src/components/Icon.vue

@@ -35,7 +35,7 @@ export default {
   font-family: 'iconfont', sans-serif;
   font-size: 0;
   color: $icon-normal-color;
-  transition: box-shadow 0.25s, all 0.2s;
+  transition: all 0.2s;
   overflow: hidden;
 
   & > span {
@@ -45,12 +45,10 @@ export default {
   &:hover {
     opacity: 0.8;
     background: white;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
   }
 
   &:active {
     color: darken($icon-hover-color, 10);
-    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
   }
 }
 </style>

src/components/TabSideComponent.vue

@@ -36,13 +36,16 @@ export default {
 .tab-side-component {
   box-sizing: border-box;
   z-index: 3;
-
 }
 
 .content {
   z-index: 4;
   max-height: 90vh;
   overflow: auto;
+  width: 100%;
+  max-width: 450px;
+  margin: 0 auto;
+  padding: 0 16px;
 }
 
 .small {
@@ -53,6 +56,7 @@ export default {
   right: 0;
   display: flex;
   width: 100%;
+  flex: 1;
   padding: 24px;
   align-items: center;
   backdrop-filter: saturate(180%) blur(15px);

src/config/server-info.js

@@ -1,6 +1,6 @@
 // const host = 'http://106.14.178.184:8080/seec_helper'
 // const host = 'http://192.168.3.70:18080'
-const host = 'http://localhost:18080'
+const host = process.env.NODE_ENV === 'development' ? 'http://localhost:18080' : ''
 
 const slideUrl = host + '/api/slide'
 

src/utils/icon-map.js

@@ -12,7 +12,8 @@ const iconMap = {
   'add': '\ue71b',
   'personal': '\ue790',
   'search': '\ue6a2',
-  'upload': '\ue6c8'
+  'upload': '\ue6c8',
+  'back': '\ue714'
 }
 
 export default iconMap

src/views/teacher/components/CreateNewCourse.vue

@@ -1,17 +1,33 @@
 <template>
   <tab-side-component>
-    <h1 class="title">新建课程</h1>
+    <back-title>新建课程</back-title>
+    <div class="sub-title">课程名称：</div>
+    <c-input placeholder="请勿与已有课程名称重名"/>
+    <div class="sub-title">课程简介：</div>
+    <c-input textarea="true" placeholder="请勿与已有课程名称重名"/>
+    <div class="sub-title">选课码：</div>
+    <c-input placeholder="学生将通过选课码注册课程"/>
+    <c-button>确认创建</c-button>
   </tab-side-component>
 </template>
 
 <script>
 import TabSideComponent from '@/components/TabSideComponent'
+import CInput from '@/components/CInput'
+import CButton from '@/components/CButton'
+import BackTitle from '@/components/BackTitle'
 
 export default {
-  components: { TabSideComponent }
+  components: { BackTitle, CButton, CInput, TabSideComponent }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.c-input {
+  margin-bottom: 24px;
+}
+.title {
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/teacher/tabs/tab-common.scss

@@ -6,6 +6,13 @@
   max-width: 720px;
 }
 
+@media (max-width: 600px) {
+  .tab {
+    min-width: unset;
+    max-width: unset;
+  }
+}
+
 .complex-tab {
   display: flex;
   align-items: center;