feat: 细节修改

src/assets/style/index.scss

@@ -39,4 +39,7 @@
   color: #ffffff;
   // background-color: #ffffff;
   background-color:#3684FC;
+}
+.el-table th{
+  background-color: #f6f9ff;
 }
\ No newline at end of file

src/assets/style/learnCenter.scss

@@ -9,3 +9,70 @@
     padding-bottom: 2.3rem;
   }
 }
+.search-form {
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(53, 139, 254, 0.15);
+  .flex-end {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 10px;
+  }
+  .search-btn {
+    background: linear-gradient(90deg, #3489fe 11%, #5ae5fc 100%);
+    border: none;
+  }
+  .reset-btn {
+    background: #f8f8f8;
+    border: none;
+  }
+  .search-form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-bottom: 20px;
+    .item-label {
+      min-width: 70px;
+      text-align: right;
+    }
+    .item-content {
+      flex: 1;
+      margin-left: 10px;
+    }
+  }
+}
+.list-box {
+  margin-top: 40px;
+  display: flex;
+  flex-flow: column;
+  align-items: space-between;
+  justify-content: space-between;
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .header-title {
+      font-size: 18px;
+      font-weight: 500;
+      color: #292929;
+      line-height: 21px;
+    }
+    .header-add {
+      color: #378bfb;
+      display: flex;
+      align-items: flex-end;
+    }
+  }
+  .list-table {
+    margin: 15px 0;
+    .cell {
+      font-size: 14px;
+      //padding: 0;
+      padding-left: 10px;
+      display: flex;
+      height: 43px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

src/components/classesItem/index.vue

@@ -45,6 +45,7 @@
           <span class="btn-name">100</span>
         </div>
       </div>
+      <png-icon iconClass="xuexi_shiyong" class="classes-test"  height="48px" width="48px"> </png-icon>
     </div>
   </div>
 </template>
@@ -90,8 +91,8 @@
   display: flex;
   justify-content: space-between;
   .classes-tltle {
-    width: 800px;
     font-size: 18px;
+    width: 471px;
     font-weight: 700;
     color: #000000;
     white-space: nowrap;
@@ -133,5 +134,10 @@
       margin-left: 10px;
     }
   }
+  .classes-test{
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 }
 </style>

src/components/screen/index.vue

@@ -56,7 +56,7 @@ export default {
   }
 }
 </script>
-<style>
+<style scoped>
 .screen-box {
   display: flex;
   margin: 30px 0;

src/views/learningCenter/children/group.vue

 <template>
-  <page-layout> </page-layout>
+  <page-layout>
+    <div
+      v-show="showSearch"
+      class="search-form""
+    >
+      <el-row>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              小组名称:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              组长:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              组员:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12" class="flex-end">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleQuery"
+            class="search-btn"
+            >查询</el-button
+          >
+          <el-button size="mini" @click="resetQuery" class="reset-btn"
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="list-box">
+      <div class="list-header">
+        <div class="header-title">数据列表</div>
+        <div class="header-add">
+          <png-icon
+            iconClass="xuexi_chuangjian"
+            height="16px"
+            style="margin-right: 5px"
+          >
+          </png-icon>
+          创建小组
+        </div>
+      </div>
+      <el-table class="list-table" :data="tableData">
+        <el-table-column type="index" width="55" label="序号" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="小组名称" width="100" align="center">
+        </el-table-column>
+        <el-table-column label="组长" show-overflow-tooltip align="center">
+        </el-table-column>
+        <el-table-column label="组员" show-overflow-tooltip align="center">
+        </el-table-column>
+        <el-table-column label="操作" width="210" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="hanldleUpdate(scope.row.id)"
+              >修改</el-button
+            >
+            <el-button type="text" @click="hanldleDelete(scope.row.id)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="display: flex; justify-content: center">
+        <pagination
+          :total="100"
+          :background="false"
+          layout="prev, pager, next"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="loadData"
+        />
+      </div>
+    </div>
+  </page-layout>
 </template>
 <script>
+import page from '@/mixins/page'
 export default {
   name: 'Index',
+  mixins: [page],
   components: {},
   data() {
-    return {}
+    return {
+      listUrl: '/system/enterprise/list',
+      tableData: [1],
+      model: this.$modelDataSource({
+        url: '/system/enterprise',
+        dataKey: 'model',
+        attributes: {
+          id: ''
+        }
+      })
+    }
   },
-  computed: {}
+  computed: {},
+  methods: {
+    hanldleUpdate(id) {},
+    hanldleDelete(id) {
+      this.$confirm('是否确定删除该条数据？', {
+        type: 'warning',
+        title: '删除',
+        closeOnClickModal: false
+      })
+        .then(() => {
+          this.model.uuid = id
+          this.model.destroy(
+            () => {
+              this.loadData()
+              this.$message.success('删除成功')
+            },
+            error => {
+              this.$message.error(error.data.msg)
+            }
+          )
+        })
+        .catch(() => {})
+    }
+  }
 }
 </script>
+<style >
+
+</style>

src/views/learningCenter/children/participants.vue

 <template>
-  <page-layout> </page-layout>
+  <page-layout>
+    <el-form
+      v-show="showSearch"
+      ref="queryForm"
+      :model="queryParams"
+      class="search-form"
+      :inline="true"
+      label-width="70px"
+    >
+      <el-row>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              登录名/姓名:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              手机号:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              状态:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              角色:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-form-item">
+            <div class="item-label">
+              小组:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12" class="flex-end">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleQuery"
+            class="search-btn"
+            >查询</el-button
+          >
+          <el-button size="mini" @click="resetQuery" class="reset-btn"
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div class="list-box">
+      <div class="list-header">
+        <div class="header-title">
+          数据列表
+        </div>
+        <div class="header-add">
+          <png-icon
+            iconClass="xuexi_chuangjian"
+            height="16px"
+            style="margin-right: 5px;"
+          >
+          </png-icon>
+          创建角色
+        </div>
+      </div>
+      <el-table class="list-table" :data="tableData">
+        <el-table-column type="index" width="55" label="序号" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="角色名称" width="100" align="center">
+        </el-table-column>
+        <el-table-column label="配置课程" show-overflow-tooltip align="center">
+        </el-table-column>
+        <el-table-column label="操作" width="210" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="hanldleUpdate(scope.row.id)"
+              >修改</el-button
+            >
+            <el-button type="text" @click="hanldleDelete(scope.row.id)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="display: flex;justify-content: center;">
+        <pagination
+          :total="100"
+          :background="false"
+          layout="prev, pager, next"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="loadData"
+        />
+      </div>
+    </div>
+  </page-layout>
 </template>
 <script>
+import page from '@/mixins/page'
 export default {
   name: 'Index',
+  mixins: [page],
   components: {},
   data() {
-    return {}
+    return {
+      listUrl: '/system/enterprise/list',
+      tableData: [1],
+      model: this.$modelDataSource({
+        url: '/system/enterprise',
+        dataKey: 'model',
+        attributes: {
+          id: ''
+        }
+      })
+    }
   },
-  computed: {}
+  computed: {},
+  methods: {
+    hanldleUpdate(id) {},
+    hanldleDelete(id) {
+      this.$confirm('是否确定删除该条数据？', {
+        type: 'warning',
+        title: '删除',
+        closeOnClickModal: false
+      })
+        .then(() => {
+          this.model.uuid = id
+          this.model.destroy(
+            () => {
+              this.loadData()
+              this.$message.success('删除成功')
+            },
+            error => {
+              this.$message.error(error.data.msg)
+            }
+          )
+        })
+        .catch(() => {})
+    }
+  }
 }
 </script>
+<style scoped>
+.search-btn {
+  background: linear-gradient(90deg, #3489fe 11%, #5ae5fc 100%);
+  border: none;
+}
+.reset-btn {
+  background: #f8f8f8;
+  border: none;
+}
+</style>

src/views/learningCenter/children/role.vue

 <template>
-  <page-layout> </page-layout>
+  <page-layout>
+    <div v-show="showSearch" class="search-form">
+      <el-row>
+        <el-col :span="9">
+          <div class="search-form-item">
+            <div class="item-label">
+              角色名称:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="9">
+          <div class="search-form-item">
+            <div class="item-label">
+              课程标题:
+            </div>
+            <div class="item-content">
+              <el-input
+                v-model="queryParams.deptName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6" class="flex-end">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleQuery"
+            class="search-btn"
+            >查询</el-button
+          >
+          <el-button size="mini" @click="resetQuery" class="reset-btn"
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="list-box">
+      <div class="list-header">
+        <div class="header-title">
+          数据列表
+        </div>
+        <div class="header-add">
+          <png-icon
+            iconClass="xuexi_chuangjian"
+            height="16px"
+            style="margin-right: 5px;"
+          >
+          </png-icon>
+          创建角色
+        </div>
+      </div>
+      <el-table class="list-table" :data="tableData">
+        <el-table-column type="index" width="55" label="序号" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="角色名称" width="100" align="center">
+        </el-table-column>
+        <el-table-column label="配置课程" show-overflow-tooltip align="center">
+        </el-table-column>
+        <el-table-column label="操作" width="210" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="hanldleUpdate(scope.row.id)"
+              >修改</el-button
+            >
+            <el-button type="text" @click="hanldleDelete(scope.row.id)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="display: flex;justify-content: center;">
+        <pagination
+          :total="100"
+          :background="false"
+          layout="prev, pager, next"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="loadData"
+        />
+      </div>
+    </div>
+  </page-layout>
 </template>
 <script>
+import page from '@/mixins/page'
 export default {
   name: 'Index',
+  mixins: [page],
   components: {},
   data() {
-    return {}
+    return {
+      listUrl: '/system/enterprise/list',
+      tableData: [1],
+      model: this.$modelDataSource({
+        url: '/system/enterprise',
+        dataKey: 'model',
+        attributes: {
+          id: ''
+        }
+      })
+    }
   },
-  computed: {}
+  computed: {},
+  methods: {
+    hanldleUpdate(id) {},
+    hanldleDelete(id) {
+      this.$confirm('是否确定删除该条数据？', {
+        type: 'warning',
+        title: '删除',
+        closeOnClickModal: false
+      })
+        .then(() => {
+          this.model.uuid = id
+          this.model.destroy(
+            () => {
+              this.loadData()
+              this.$message.success('删除成功')
+            },
+            error => {
+              this.$message.error(error.data.msg)
+            }
+          )
+        })
+        .catch(() => {})
+    }
+  }
 }
 </script>
+<style scoped>
+.search-btn {
+  background: linear-gradient(90deg, #3489fe 11%, #5ae5fc 100%);
+  border: none;
+}
+.reset-btn {
+  background: #f8f8f8;
+  border: none;
+}
+</style>

src/views/learningCenter/index.vue

@@ -54,6 +54,8 @@ export default {
 .learningCenter_module {
   // position: relative;
   padding: 50px 30px;
+  width: 1200px;
+  margin: auto;
 }
 .page-left{
   background: #ffffff;