添加了 任务面板

.eslintrc.js

@@ -149,7 +149,9 @@ module.exports = {
     'accessor-pairs': 0,
     'block-scoped-var': 0,
     'brace-style': [1, '1tbs'],
-    camelcase: 2,
+    camelcase: {
+      properties: 'never'
+    },
     'comma-dangle': [2, 'never'],
     'comma-spacing': 0,
     'comma-style': [2, 'last'],

src/api/table.js

@@ -1,9 +1,12 @@
 import request from '@/utils/request';
 
-export function getList(params) {
+export function getMyCsItemsDateTeacher(Parameter) {
   return request({
-    url: '',
+    url: '/GCLSLearnWebSI/ServiceInterface',
     method: 'post',
-    params
+    data: {
+      MethodName: 'eaching-cs_item_manager-GetMyCSItems_Date_Teacher',
+      Parameter: Parameter
+    }
   });
 }

src/layouts/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fixed-header">
     <el-header>
       <el-row>
         <el-col :span="1">
@@ -31,15 +31,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-header {
-  height: $header-h !important;
-  line-height: $header-h;
-  background-color: $bacColor;
-  text-align: center;
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  z-index: 9;
 
-  .sign-out {
-    cursor: pointer;
-    font-size: 12px;
+  .el-header {
+    height: $header-h !important;
+    line-height: $header-h;
+    background-color: $bacColor;
+    text-align: center;
+
+    .sign-out {
+      cursor: pointer;
+      font-size: 12px;
+    }
   }
 }
 </style>

src/layouts/index.vue

@@ -28,16 +28,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$top: 31px;
-
 .app-container {
   height: 100%;
+  overflow: hidden;
+  padding-top: $header-h;
   .app-main {
-    min-height: calc(100vh - #{$header-h + $top});
+    min-height: calc(100vh - #{$header-h});
     width: 100%;
     position: relative;
     overflow: hidden;
-    padding-top: $top;
   }
 }
 </style>

src/router/index.js

@@ -18,12 +18,12 @@ const routes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/taskkanban',
+    redirect: '/main',
     children: [
       {
-        path: '/taskkanban',
-        name: 'TaskKanban',
-        component: () => import('@/views/teacher/TaskKanban')
+        path: '/main',
+        name: 'Main',
+        component: () => import('@/views/teacher/main')
       }
     ]
   },

src/styles/index.scss

@@ -23,6 +23,12 @@ html {
   height: 100%;
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 a:focus,
 a:active {
   outline: none;

src/views/teacher/TaskKanban.vue → src/views/teacher/main/CurriculaManager.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="http-404">
-    <h1>Task</h1>
-  </div>
+  <div>课程管理</div>
 </template>
 
 <script>
-export default {};
+export default {
+  name: 'CurriculaManager'
+};
 </script>
 
 <style lang="scss" scoped>
-// note
+//
 </style>

src/views/teacher/main/TaskKanban.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="task-kanban">
+    <div class="left-container">
+      <div class="panel">
+        <!-- 用户信息 -->
+        <div>
+          <el-row class="avatar">
+            <el-col :span="6"><el-avatar :size="65"></el-avatar></el-col>
+            <el-col :span="18">
+              <el-row>
+                <el-col :span="24" class="teacher-name">教师姓名</el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24" class="corporate-name">公司名称</el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </div>
+        <!--日历-->
+        <div class="calendar">
+          <el-calendar v-model="dateTime"></el-calendar>
+        </div>
+        <!-- 数据化面板 -->
+        <div class="data-panel"></div>
+        <!-- 消息中心 -->
+        <div class="message-center">
+          <div>消息中心</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-container"></div>
+  </div>
+</template>
+
+<script>
+import { getMyCsItemsDateTeacher } from '@/api/table';
+
+export default {
+  name: 'Taskkanban',
+  data() {
+    return {
+      date: new Date()
+    };
+  },
+  // created: {
+  //   getMyCSItem() {
+  //     getMyCsItemsDateTeacher({ Date_Stamp: this.date }).then(response => {
+  //       console.log(response.data);
+  //     });
+  //   }
+  // },
+  computed: {
+    dateTime: {
+      get: function () {
+        return this.date;
+      },
+      set: function (newValue) {
+        // console.log(newValue.getTime());
+        this.date = newValue;
+      }
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+.task-kanban {
+  .el-calendar__header .el-button {
+    padding: 7px 10px;
+  }
+  .el-calendar-table div.el-calendar-day {
+    height: 29px;
+  }
+  .el-calendar__body {
+    thead th {
+      padding: 0 0 4px 0;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@mixin panel {
+  font-size: 12px;
+  width: $left-item-h;
+  margin-top: 18px;
+  background-color: #c4c4c4;
+  padding: 24px 23px;
+}
+
+$left-item-h: 322px;
+
+.task-kanban {
+  height: 100%;
+  overflow: hidden;
+  .left-container {
+    width: 37.5vw;
+    height: 100%;
+    display: inline-block;
+    .panel {
+      height: 100%;
+      padding: 8% 19px 175px 218px;
+      .avatar {
+        width: $left-item-h;
+      }
+      .corporate-name {
+        line-height: 22px;
+        margin-top: 8px;
+        color: #9b9b9b;
+      }
+      .teacher-name {
+        line-height: 22px;
+        margin-top: 8px;
+        font-weight: 700;
+      }
+    }
+    .calendar {
+      width: $left-item-h;
+      height: 268px;
+      overflow: hidden;
+    }
+    .data-panel {
+      @include panel;
+
+      height: 146px;
+    }
+    .message-center {
+      @include panel;
+
+      height: 122px;
+    }
+  }
+  .right-container {
+    width: 72.5vw;
+  }
+}
+</style>

src/views/teacher/main/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="nav-menu">
+      <span
+        v-for="item in menu"
+        :key="item.id"
+        :class="['tab-menu', { active: currentTab === item.tab }]"
+        @click="currentTab = item.tab"
+        v-text="item.name"
+      ></span>
+    </div>
+    <keep-alive>
+      <component :is="currentTabComponent"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import TaskKanban from './TaskKanban';
+import CurriculaManager from './CurriculaManager';
+
+export default {
+  name: 'Main',
+  data() {
+    return {
+      currentTab: 'TaskKanban',
+      menu: [
+        {
+          id: 1,
+          name: '任务面板',
+          tab: 'TaskKanban'
+        },
+        {
+          id: 2,
+          name: '课程管理',
+          tab: 'CurriculaManager'
+        }
+      ]
+    };
+  },
+  components: {
+    TaskKanban,
+    CurriculaManager
+  },
+  computed: {
+    currentTabComponent: function () {
+      return this.currentTab;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-menu {
+  width: 100%;
+  margin-top: 31px;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+  .tab-menu {
+    display: inline-block;
+    width: 70px;
+    cursor: pointer;
+    padding-bottom: 4px;
+    &:first-child {
+      margin-right: 20px;
+    }
+    &:not(:first-child) {
+      margin-left: 20px;
+    }
+    &.active {
+      border-bottom: 1px solid black;
+    }
+  }
+}
+</style>

stylelint.config.js

@@ -5,7 +5,7 @@ module.exports = {
   rules: {
     'plugin/declaration-block-no-ignored-properties': true,
     // 各分类属性顺序
-    'order/order': ['custom-properties', 'dollar-variables', 'declarations', 'rules', 'at-rules'],
+    'order/order': ['at-rules', 'custom-properties', 'dollar-variables', 'declarations', 'rules'],
     // 指定2个空格
     indentation: 2,
     // 多个选择器样式之间允许有空行
@@ -24,8 +24,6 @@ module.exports = {
     'selector-max-id': 1,
     // 最多2个类型选择器
     'selector-max-type': 2,
-    // 不允许使用通配符选择器
-    'selector-max-universal': 0,
     // 不允许未知的动画
     'no-unknown-animations': true,
     // 在字体名称必须使用引号的地方使用引号，其他地方不能使用
@@ -39,6 +37,7 @@ module.exports = {
     // 首行不允许空行
     'no-empty-first-line': true,
     // 不允许使用 unicode 作为顺序标记
-    'unicode-bom': 'never'
+    'unicode-bom': 'never',
+    'at-rule-no-unknown': null
   }
 };