09/10

乐团列表拼接完成

src/App.vue

@@ -23,6 +23,16 @@ body {
 }
 </style>
 <style lang="scss">
+.el-tabs__item.is-active {
+  color: #14928a;
+  font-size: 16px;
+  font-weight: 600;
+}
+.el-tabs__item:hover {
+  color: #14928a;
+  font-size: 16px;
+  font-weight: 600;
+}
 // 选择框组件
 .el-form-item__content {
   font-size: 16px;
@@ -34,16 +44,32 @@ body {
   width: 150px;
 }
 .searchBtn {
-  width: 80px;
-  height: 30px;
-  line-height: 30px;
+  width: 100px;
+  height: 36px;
+  line-height: 36px;
+  background-color: #f85043;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  border-radius: 4px;
+  position: relative;
+  top: 3px;
+  cursor: pointer;
+}
+.newBand {
+  width: 100px;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 20px;
   background-color: #14928a;
+  border: 1px solid #14928a;
+  cursor: pointer;
   color: #fff;
   font-size: 14px;
   text-align: center;
-  border-radius: 18px;
+  border-radius: 4px;
   position: relative;
-  top: 6px;
+  top: 3px;
 }
 // 公用的搜索组件
 .searchWrap {
@@ -79,4 +105,47 @@ body {
     }
   }
 }
+.headWrap {
+  padding: 40px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .left {
+    width: 1000px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    .headItem {
+      width: 364px;
+      height: 30px;
+      color: #444;
+      border-right: 1px solid #979797;
+      p {
+        font-size: 14px;
+        line-height: 30px;
+        span {
+          font-size: 16px;
+          line-height: 30px;
+        }
+      }
+      &:nth-child(1) {
+        width: 256px;
+      }
+      &:nth-child(2n) {
+        text-align: center;
+      }
+      &:nth-child(3n) {
+        border-right: 1px solid #fff;
+        text-align: center;
+      }
+      &:nth-child(4n) {
+        text-align: left !important;
+        width: 256px;
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -58,12 +58,25 @@ export const constantRoutes = [
   {
     path: '/teamDetail',
     component: Layout,
+    meta: { title: '乐团详情' },
     children: [
       {
         path: 'teamDetail',
         name: 'teamDetail',
         component: () => import('@/views/teamDetail/index'),
-        meta: { title: '乐团详情' }
+        meta: { title: '乐团详情' },
+      },
+      {
+        path: 'studentSignin',
+        name: 'studentSignin',
+        component: () => import('@/views/teamDetail/components/studentSignin'),
+        meta: { title: '学生点名' }
+      },
+      {
+        path: 'teacherSignin',
+        name: 'teacherSignin',
+        component: () => import('@/views/teamDetail/components/teacherSignin'),
+        meta: { title: '老师上课记录' }
       }
     ]
   },
@@ -79,7 +92,25 @@ export const constantRoutes = [
       }
     ]
   },
-
+  {
+    path: '/vipClass',
+    component: Layout,
+    meta: { title: 'vip管理' },
+    children: [
+      {
+        path: 'vipClass',
+        name: 'vipClass',
+        component: () => import('@/views/vipClass/vipList'),
+        meta: { title: 'vip课列表' }
+      },
+      {
+        path: 'vipDetail',
+        name: 'vipDetail',
+        component: () => import('@/views/vipClass/vipDetail/index'),
+        meta: { title: 'vip课详情' }
+      }
+    ]
+  },
 
   {
     path: '/example',

src/views/main/index.vue

@@ -2,10 +2,7 @@
   <div class="m-conainer">
     <h2>乐团列表</h2>
     <div class="m-core">
-      <el-button type="primary"
-                 class="newBand">
-        新建乐团
-      </el-button>
+      <div class='newBand'>新建乐团</div>
       <el-form :inline="true"
                class="topForm"
                v-model="topForm">

src/views/teamDetail/components/classList.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="c-container">
-    <!-- 头部展示 -->
     <!-- 搜索标题 -->
     <el-form :inline="true"
              class="searchForm"

src/views/teamDetail/components/studentList.vue

@@ -17,7 +17,9 @@
         </div>
       </div>
       <div class="right">
-        <div class="newStudent">新增学员</div>
+        <!-- 暂时借用一下跳转功能 -->
+        <div class="newStudent"
+             @click='gotoSignin'>新增学员</div>
       </div>
     </div>
     <!-- 搜索类型 -->
@@ -161,6 +163,9 @@ export default {
   methods: {
     getList () {
 
+    },
+    gotoSignin () {
+      // this.$
     }
   }
 }

src/views/teamDetail/components/studentSignin.vue

@@ -1,12 +1,90 @@
 <template>
-  <div>
-    学生点名总览
+  <div class="m-container">
+    <h2>学生点名总览
+      <div class="term">第一学期</div>
+      <div class="term active">第二学期</div>
+    </h2>
+    <div class="searchBtn">导出</div>
+    <div class='m-core'>
+
+      <!-- table  -->
+      <div class="tableWrap">
+        <el-table :data='tableList'>
+          <el-table-column align='center'
+                           label="学生姓名">
+          </el-table-column>
+          <el-table-column v-for="(item,index) in tableHead"
+                           :key='index'
+                           align='center'
+                           :label="item">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 export default {
-
+  name: 'studentSignin',
+  data () {
+    return {
+      tableList: [], // table列表
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      tableHead: ['09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10',]
+    }
+  }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scope>
+.m-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  h2 {
+    height: 48px;
+    line-height: 48px;
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    .term {
+      height: 32px;
+      line-height: 32px;
+      border-radius: 24px;
+      width: 100px;
+      color: #14928a;
+      border: 1px solid rgba(20, 146, 138, 1);
+      font-size: 16px;
+      text-align: center;
+      margin-right: 12px;
+      &:nth-child(1) {
+        margin-left: 47px;
+      }
+    }
+    .term.active {
+      color: #fff;
+      background-color: #14928a;
+    }
+  }
+  .m-core {
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    padding: 20px 0;
+    .newBand {
+      margin-bottom: 20px;
+      background-color: #14928a;
+      border: 1px solid #14928a;
+      cursor: pointer;
+    }
+  }
+}
 </style>

src/views/teamDetail/components/teacherSignin.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="m-container">
+    <h2>老师乐团上课记录
+      <div class="term">第一学期</div>
+      <div class="term active">第二学期</div>
+    </h2>
+    <div class="searchBtn">导出</div>
+    <div class='m-core'>
+      <!-- table  -->
+      <div class="tableWrap">
+        <el-table :data='tableList'>
+          <el-table-column align='center'
+                           label="老师姓名">
+          </el-table-column>
+          <el-table-column v-for="(item,index) in tableHead"
+                           :key='index'
+                           align='center'
+                           :label="item">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'studentSignin',
+  data () {
+    return {
+      tableList: [], // table列表
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      tableHead: ['09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10', '09-10',]
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.m-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  h2 {
+    height: 48px;
+    line-height: 48px;
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    .term {
+      height: 32px;
+      line-height: 32px;
+      border-radius: 24px;
+      width: 100px;
+      color: #14928a;
+      border: 1px solid rgba(20, 146, 138, 1);
+      font-size: 16px;
+      text-align: center;
+      margin-right: 12px;
+      &:nth-child(1) {
+        margin-left: 47px;
+      }
+    }
+    .term.active {
+      color: #fff;
+      background-color: #14928a;
+    }
+  }
+  .m-core {
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    padding: 20px 0;
+    .newBand {
+      margin-bottom: 20px;
+      background-color: #14928a;
+      border: 1px solid #14928a;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/teamDetail/index.vue

@@ -9,7 +9,7 @@
       <p class='msg'> <img src="@/assets/images/base/clock.png"
              alt=""> 报名中</p>
       <!-- navMenu -->
-      <el-tabs v-model="activeName"
+      <el-tabs v-model="activeIndex"
                type="card"
                @tab-click="handleClick">
         <el-tab-pane label="基本信息"
@@ -51,7 +51,7 @@ import salaryList from '@/views/teamDetail/components/salaryList'
 export default {
   data () {
     return {
-      activeName: '3',
+      activeIndex: '3',
     }
   },
   methods: {
@@ -127,58 +127,4 @@ export default {
 }
 </style>
 <style lang='scss'>
-.el-tabs__item.is-active {
-  color: #14928a;
-  font-size: 16px;
-  font-weight: 600;
-}
-.el-tabs__item:hover {
-  color: #14928a;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.headWrap {
-  padding: 40px 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  .left {
-    width: 1000px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-    .headItem {
-      width: 364px;
-      height: 30px;
-      color: #444;
-      border-right: 1px solid #979797;
-      p {
-        font-size: 14px;
-        line-height: 30px;
-        span {
-          font-size: 16px;
-          line-height: 30px;
-        }
-      }
-      &:nth-child(1) {
-        width: 256px;
-      }
-      &:nth-child(2n) {
-        text-align: center;
-      }
-      &:nth-child(3n) {
-        border-right: 1px solid #fff;
-        text-align: center;
-      }
-      &:nth-child(4n) {
-        text-align: left !important;
-        width: 256px;
-      }
-    }
-  }
-}
 </style>

src/views/vipClass/resetClasss.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+
+  </div>
+</template>
+<script>
+export default {
+  name: 'resetClass',
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss">
+</style>

src/views/vipClass/vipDetail/components/teacherRecord.vue

@@ -0,0 +1,81 @@
+<template >
+  <div>
+    <!-- 头部展示 -->
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>未上(人):<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>已上(人):<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>已结算(人):<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>被投诉(人):<span>12345</span></p>
+        </div>
+      </div>
+      <div class="right">
+      </div>
+    </div>
+    <!-- 搜索标题 -->
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item>
+        <el-select v-model="searchForm.name"
+                   placeholder="课程类型">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <!-- 查询列表 -->
+    <div class="searchWrap">
+      <p>查询条件:</p>
+      <div class="searchItem"
+           @click="closeSearch(item)"
+           v-for="(item,index) in searchLsit">
+        {{ item.key }}
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table :data='tableList'>
+        <el-table-column align='center'
+                         label="上课时间">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="课程类型">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="当前课次">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="上课学员">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="课程记录">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'teacherRecord',
+  data () {
+    return {
+      searchForm: {
+        name: ''
+      },
+      searchLsit: [],
+      tableList: []
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+</style>

src/views/vipClass/vipDetail/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class='m-container'>
+    <h2>VIP课程名称</h2>
+    <div class="m-core">
+      <!-- navMenu -->
+      <el-tabs v-model="activeName"
+               type="card"
+               @tab-click="handleClick">
+        <el-tab-pane label="基本信息"
+                     name="1">
+        </el-tab-pane>
+        <el-tab-pane label="教学记录"
+                     name="2">
+          <teacherRecord />
+        </el-tab-pane>
+        <el-tab-pane label="课程调整"
+                     name="3">
+
+        </el-tab-pane>
+        <el-tab-pane label="vip课程财务"
+                     name="4">
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import teacherRecord from '@/views/vipClass/vipDetail/components/teacherRecord'
+export default {
+  components: { teacherRecord },
+  name: 'vipDetail',
+  data () {
+    return {
+      activeName: '2'
+    }
+  },
+  methods: {
+    handleClick (val, event) {
+      // console.log(val, event);
+      this.activeName = val.name;
+    }
+  }
+}
+</script>
+<style lang="scss">
+.m-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  .m-core {
+    margin-top: 30px;
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    position: relative;
+  }
+}
+</style>

src/views/vipClass/vipList.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="m-container">
+    <h2>VIP课列表
+    </h2>
+    <div class="newBand">新建vip课</div>
+    <div class='m-core'>
+      <!-- 搜索类型 -->
+      <el-form :inline="true"
+               class="searchForm"
+               v-model="searchForm">
+        <el-form-item>
+          <el-select v-model="searchForm.teacher"
+                     placeholder="指导老师">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="searchForm.count"
+                     placeholder="班级人数">
+            <el-option label="哈哈哈"
+                       value="1"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <!-- 查询列表 -->
+      <div class="searchWrap">
+        <p>查询条件:</p>
+        <div class="searchItem"
+             @click="closeSearch(item)"
+             v-for="(item,index) in searchLsit">
+          {{ item.key }}
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+      <!-- tab -->
+      <div class="tableWrap">
+        <el-table style="width: 100%"
+                  :data='tableData'>
+          <el-table-column align='center'
+                           label="VIP编号">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="课程名称">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="课程状态">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="指导老师">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="班级人数">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="课程单价">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="活动方案">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="剩余课时">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="月均消耗">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="开课时间">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="截止时间">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="申请时间">
+          </el-table-column>
+          <el-table-column align='center'
+                           label="操作">
+          </el-table-column>
+        </el-table>
+        <!-- 分页器 -->
+        <pagination :total="rules.total"
+                    :page.sync="rules.page"
+                    :limit.sync="rules.limit"
+                    :page-sizes="rules.page_size"
+                    @pagination="getList" />
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  components: { pagination },
+  name: 'vipList',
+  data () {
+    return {
+      searchLsit: [],
+      searchForm: {
+        teacher: '',
+        count: ''
+      },
+      tableData: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+    }
+  },
+  methods: {
+    getList () { }
+  }
+}
+</script>
+<style lang="scss" scope>
+.m-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  h2 {
+    height: 48px;
+    line-height: 48px;
+    position: relative;
+    // padding-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    .term {
+      height: 32px;
+      line-height: 32px;
+      border-radius: 24px;
+      width: 100px;
+      color: #14928a;
+      border: 1px solid rgba(20, 146, 138, 1);
+      font-size: 16px;
+      text-align: center;
+      margin-right: 12px;
+      &:nth-child(1) {
+        margin-left: 47px;
+      }
+    }
+    .term.active {
+      color: #fff;
+      background-color: #14928a;
+    }
+  }
+}
+</style>