add:第七阶段新需求-加急内容

src/components/tableList.vue

@@ -1460,13 +1460,13 @@
           <div v-else-if="item.scope === 'priceRed'" style="color: red">
             ￥{{ scope.row[item.prop] ? scope.row[item.prop] : 0 }}
           </div>
-          <span v-else
+          <div v-else
             >{{ scope.row[item.prop] }}
             {{
               (scope.row[item.prop] || scope.row[item.prop] === 0) && item.ch
                 ? item.ch
                 : ""
-            }}</span
+            }}</div
           >
         </template>
       </af-table-column>

src/newApi/business.js

@@ -55,7 +55,6 @@ export default {
             data
         })
     },
-
     //修改业务层次-退款审核
     editRefundPeriodUserIdsCourseBusiness(data) {
         return request({
@@ -64,5 +63,21 @@ export default {
             data
         })
     },
+    //新增业务层次过滤器
+    addBasefilter(data) {
+        return request({
+            url: '/base/filter',
+            method: 'post',
+            data
+        })
+    },
+    //查询业务层次过滤器列表
+    basefilterlist(data) {
+        return request({
+            url: '/base/filter/list',
+            method: 'get',
+            params: data
+        })
+    },
 
 }

src/router/index.js

@@ -48,11 +48,6 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/login'], resolve),
     hidden: true
   },
-  {
-    path: '/register',
-    component: (resolve) => require(['@/views/register'], resolve),
-    hidden: true
-  },
   {
     path: '/404',
     component: (resolve) => require(['@/views/error/404'], resolve),

src/views/2Cport/filterItemSettings/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div id="filterItemSettings">
+    <div class="filter_style" v-for="(item, index) in listSet" :key="index">
+      <h4>{{ item.title }}</h4>
+      <div class="over_flow">
+        <el-tree
+          :props="props"
+          :load="loadNode"
+          lazy
+          show-checkbox
+          node-key="keyId"
+          default-expand-all
+          :ref="`tree${item.value}`"
+          :default-checked-keys="item.activeKeyId"
+        >
+          <span class="custom-tree-node" slot-scope="{ node }">
+            <span>{{ node.label }}</span>
+            <label v-if="node.data.projectId" @click.stop="&quot;&quot;;"
+              ><span style="font-size:14px">显示标题：</span>
+              <el-input
+                style="max-width: 140px"
+                :size="size"
+                v-model="node.data.aliasName"
+                placeholder="请输入标题"
+              >
+              </el-input>
+            </label>
+          </span>
+        </el-tree>
+      </div>
+      <div class="margin_bth">
+        <el-button
+          :size="size"
+          @click="submitFunc(`tree${item.value}`, item.value)"
+          >保存</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FilterItemSettings",
+  data() {
+    return {
+      //按钮及输入框尺寸
+      size: "mini",
+      //字段设置
+      listSet: [
+        {
+          title: "视频课程筛选项",
+          value: 1,
+          activeKeyId: [],
+        },
+        {
+          title: "直播课程筛选项",
+          value: 6,
+          activeKeyId: [],
+        },
+        {
+          title: "题库筛选项",
+          value: 2,
+          activeKeyId: [],
+        },
+      ],
+      props: {
+        label: "name",
+        children: "zones",
+        isLeaf(data, node) {
+          return data.noChildren ? true : false;
+        },
+      },
+    };
+  },
+  mounted() {
+    this.$api.basefilterlist().then((res) => {
+      res.rows.forEach((item) => {
+        this.listSet.forEach((items) => {
+          if (items.value === item.type) {
+            const NewTheList = item.subjectIds.split(",").map(Number);
+            items.activeKeyId = NewTheList.map((itx) => {
+              return `${item.educationId}-${item.projectId}-${item.businessId}-${itx}`;
+            });
+          }
+        });
+      });
+      console.log(this.listSet);
+    });
+  },
+  methods: {
+    getInitEduSet() {
+      return new Promise((resolve, reject) => {
+        //获取教育类型
+        this.$api
+          .inquireCourseEducationType({ status: 1 })
+          .then((res) => {
+            const LIST = res.rows.map((item) => {
+              return {
+                id: item.id,
+                keyId: item.id,
+                name: item.educationName,
+                type: 1, //1教育类型--区分类型优化数据分类处理过程
+              };
+            });
+            resolve(LIST);
+          })
+          .catch((err) => {
+            this.$message.error("教育类型获取失败");
+          });
+      });
+    },
+    getInitBusSet(id) {
+      return new Promise((resolve, reject) => {
+        //获取项目类型-业务层次
+        this.$api
+          .inquirebusinessList({ status: 1, educationId: id })
+          .then((res) => {
+            const LIST = res.rows.map((item) => {
+              return {
+                id: item.id,
+                educationId: item.educationId,
+                projectId: item.projectId,
+                keyId: `${item.educationId}-${item.projectId}-${item.id}`,
+                name: `${item.projectName} - ${item.businessName}`,
+                aliasName: item.aliasName || "",
+                type: 2, //2业务层次类型--区分类型优化数据分类处理过程
+              };
+            });
+            resolve(LIST);
+          })
+          .catch((err) => {
+            this.$message.error("业务层级获取失败");
+          });
+      });
+    },
+    getInitSubjectSet(id, parentKeyId) {
+      return new Promise((resolve, reject) => {
+        //获取科目
+        this.$api
+          .inquireCourseSubject({ status: 1, businessId: id })
+          .then((res) => {
+            const LIST = res.rows.map((item) => {
+              return {
+                id: item.id,
+                keyId: `${parentKeyId}-${item.id}`,
+                parentKeyId: parentKeyId,
+                name: item.subjectName,
+                noChildren: true,
+                type: 3, //3科目类型--区分类型优化数据分类处理过程
+              };
+            });
+            resolve(LIST);
+          })
+          .catch((err) => {
+            this.$message.error("科目获取失败");
+          });
+      });
+    },
+    loadNode(node, resolve) {
+      if (node.level === 0) {
+        this.getInitEduSet().then((list) => {
+          return resolve(list);
+        });
+      }else if (node.level === 1) {
+        this.getInitBusSet(node.data.id).then((list) => {
+          return resolve(list);
+        });
+      }else if (node.level === 2) {
+        this.getInitSubjectSet(node.data.id, node.data.keyId).then((list) => {
+          return resolve(list);
+        });
+      }else{
+          return resolve([]);
+      }
+    },
+    /**
+     * @param {String} 'ref组件名'
+     * @param {Number} '保存筛选项类型'
+     */
+    submitFunc(refName, typeValue) {
+      //获取半/全选中数据数组列表
+      const ITEMLIST = this.$refs[refName][0].getCheckedNodes(false, true);
+      //半选中/全选中--业务层次数组
+      let BusList = [];
+      //选中科目数组
+      let subjectList = [];
+      //半/全选中数据数组列表分类
+      ITEMLIST.forEach((item) => {
+        if (item.type === 2) {
+          BusList.push({
+            type: typeValue,
+            educationId: item.educationId,
+            projectId: item.projectId,
+            businessId: item.id,
+            aliasName: item.aliasName,
+            status: 1,
+            subjectIds: [],
+            keyId: item.keyId,
+          });
+        }
+        if (item.type === 3) {
+          subjectList.push(item);
+        }
+      });
+      BusList.forEach((item) => {
+        subjectList.forEach((items) => {
+          if (items.parentKeyId === item.keyId) {
+            item.subjectIds.push(items.id);
+          }
+        });
+      });
+      for (let i = 0; i < BusList.length; i++) {
+        if (!BusList[i].aliasName) {
+          this.$message.error("请填写显示标题");
+          return;
+        }
+        BusList[i].subjectIds = BusList[i].subjectIds.toString();
+        delete BusList[i].keyId;
+      }
+      //数据整理完毕-执行提交
+      this.sendFunc(BusList);
+    },
+    sendFunc(item) {
+      this.$api.addBasefilter(item).then((res) => {
+        this.$message.success("保存成功");
+        //重新获取最新数据
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.filter_style {
+  border-radius: 6px;
+  border: 1px solid #666;
+  float: left;
+  margin: 0px 3% 16px 0px;
+  padding: 6px 14px;
+  width: 30%;
+  h4 {
+    height: 36px;
+    line-height: 36px;
+    margin: 4px 0px;
+    font-weight: 500;
+  }
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 4px 0px;
+  margin: 4px 0px;
+}
+.margin_bth {
+  text-align: center;
+}
+.over_flow{
+    max-height: 76vh;
+    overflow: auto;
+}
+/deep/ .el-tree-node__content {
+  margin: 4px 0px;
+}
+</style>

src/views/dashboard/BarChart.vue

@@ -1,102 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
-      })
-    }
-  }
-}
-</script>

src/views/dashboard/LineChart.vue

@@ -1,135 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
-    }
-  }
-}
-</script>

src/views/dashboard/PanelGroup.vue

@@ -1,181 +0,0 @@
-<template>
-  <el-row :gutter="40" class="panel-group">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            访客
-          </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            消息
-          </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            金额
-          </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            订单
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import CountTo from 'vue-count-to'
-
-export default {
-  components: {
-    CountTo
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.panel-group {
-  margin-top: 18px;
-
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
-
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
-  }
-}
-
-@media (max-width:550px) {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
-
-    .svg-icon {
-      display: block;
-      margin: 14px auto !important;
-      float: none !important;
-    }
-  }
-}
-</style>

src/views/dashboard/PieChart.vue

@@ -1,79 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
-        },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
-      })
-    }
-  }
-}
-</script>

src/views/dashboard/RaddarChart.vue

@@ -1,116 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 3000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
-          splitNumber: 8,
-          splitArea: {
-            areaStyle: {
-              color: 'rgba(127,95,132,.3)',
-              opacity: 1,
-              shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 15
-            }
-          },
-          indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
-          ]
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
-        },
-        series: [{
-          type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
-            }
-          },
-          data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
-            },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
-            }
-          ],
-          animationDuration: animationDuration
-        }]
-      })
-    }
-  }
-}
-</script>

src/views/education/classManageMent/classHoursReview/studyTimes.vue

@@ -1,117 +1,127 @@
 <template>
   <div id="studyTimes">
-    <div class="topBoxStyle">
-      <div class="dis_fs" :style="showBox ? '' : 'height:0px;'">
-        <ul class="ul_ls">
+    <div class="top_style">
+      <header>
+        <div class="left"><i></i><span>学员信息</span></div>
+        <el-button type="primary" size="mini" @click="showBox = !showBox">{{
+          showBox ? "收起" : "展开"
+        }}</el-button>
+      </header>
+      <div class="info_img" v-show="showBox">
+        <ul>
           <li>学员编码：{{ userData.studentCode }}</li>
           <li>学员姓名：{{ userData.realName }}</li>
           <li>学员身份证号码：{{ userData.idCard }}</li>
           <li>绑定手机号码：{{ userData.telPhone }}</li>
         </ul>
-        <div class="photoSty1">
-          <img
-            style="width: 100%; height: 100%"
-            v-if="!userData.oneInchPhotos"
-            src="@/assets/404_images/wuyuxaog.png"
-            alt=""
-          />
-          <el-image
-            v-else
-            style="width: 100%; height: 100%"
-            :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
-            :preview-src-list="[
-              $methodsTools.splitImgHost(userData.oneInchPhotos),
-            ]"
-          >
-          </el-image>
-          <div class="pos_bottom">一寸头像图</div>
-        </div>
-        <div class="photoSty2">
-          <img
-            style="width: 100%; height: 100%"
-            v-if="!userData.idCardImg1"
-            src="@/assets/404_images/wuyuxaog.png"
-            alt=""
-          />
-          <el-image
-            v-else
-            style="width: 100%; height: 100%"
-            :src="$methodsTools.splitImgHost(userData.idCardImg1)"
-            :preview-src-list="[
-              $methodsTools.splitImgHost(userData.idCardImg1),
-            ]"
-          >
-          </el-image>
-          <div class="pos_bottom">身份证头像照</div>
-        </div>
-        <div class="photoSty2" style="margin-right: 0px">
-          <img
-            style="width: 100%; height: 100%"
-            v-if="!userData.idCardImg2"
-            src="@/assets/404_images/wuyuxaog.png"
-            alt=""
-          />
-          <el-image
-            v-else
-            style="width: 100%; height: 100%"
-            :src="$methodsTools.splitImgHost(userData.idCardImg2)"
-            :preview-src-list="[
-              $methodsTools.splitImgHost(userData.idCardImg2),
-            ]"
-          >
-          </el-image>
-          <div class="pos_bottom">身份证国徽照</div>
+        <div class="img_by">
+          <div class="photoSty1">
+            <img
+              v-if="!userData.oneInchPhotos"
+              src="@/assets/images/peopleImg.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.oneInchPhotos),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">一寸头像图</div>
+          </div>
+          <div class="photoSty2">
+            <img
+              v-if="!userData.idCardImg1"
+              src="@/assets/images/idcardF.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.idCardImg1)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.idCardImg1),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">身份证头像照</div>
+          </div>
+          <div class="photoSty2" style="margin-right: 0px">
+            <img
+              v-if="!userData.idCardImg2"
+              src="@/assets/images/idcardZ.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.idCardImg2)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.idCardImg2),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">身份证国徽照</div>
+          </div>
         </div>
       </div>
-      <el-button
-        class="btn_styleShow"
-        type="primary"
-        size="mini"
-        @click="showBox = !showBox"
-        >{{ showBox ? "收起" : "展开" }}</el-button
-      >
     </div>
-
-    <div class="dis_fls">
-      <div class="s_sd">
-        <div class="dis_colu">
-          <div class="jdNumSty" style="margin-bottom: 4px">
-            视频学习进度：{{ userData.stuAllNum }}/{{ userData.secAllNum }}
-            {{
-              userData.stuAllNum == 0 && userData.secAllNum == 0
-                ? "0"
-                : ((userData.stuAllNum / userData.secAllNum) * 100).toFixed(2)
-            }}% 通过：{{ userData.pass }}节
-            <span style="color: #f56c6c">作弊：{{ userData.cheat }}节</span>
-            <span style="color: #409eff"> 待审：{{ userData.pending }}节</span>
+    <div class="studyStyle">
+      <div class="a_style">
+        <i></i>
+        <span>视频审核进度</span>
+        <div class="flex_style_study">
+          <div class="num_style" style="color: #0047d0">
+            待审：{{ userData.pending }}节
           </div>
-          <div class="jdNumSty">
-            做题学习进度：{{ userData.recordNum }}/{{ userData.examNum }}
-            {{
-              userData.recordNum == 0 && userData.examNum == 0
-                ? "0"
-                : ((userData.recordNum / userData.examNum) * 100).toFixed(2)
-            }}% 通过：{{ userData.examPass }}节
-            <span style="color: #f56c6c">作弊：{{ userData.examCheat }}节</span>
-            <span style="color: #409eff">
-              待审：{{ userData.examPending }}节</span
-            >
+          <div class="num_style" style="color: #e53935">
+            作弊：{{ userData.cheat }}节
+          </div>
+          <div class="num_style" style="color: #43a047">
+            通过：{{ userData.pass }}节
           </div>
+          <div style="clear: both"></div>
         </div>
-        <div class="shbtns">
-          学时审批状态：{{
-            userData.periodStatus === 0
-              ? "未通过"
-              : userData.periodStatus === 2
-              ? "待审核"
-              : userData.periodStatus === -1
-              ? "不可审核"
-              : userData.periodStatus === 1
-              ? "通过审核"
-              : userData.periodStatus === 3
-              ? "审核中"
-              : "未知状态，请联系管理员"
-          }}
+      </div>
+      <div class="a_style">
+        <i></i>
+        <span>做题审核进度</span>
+        <div class="flex_style_study">
+          <div class="num_style" style="color: #0047d0">
+            待审：{{ userData.examPending }}节
+          </div>
+          <div class="num_style" style="color: #e53935">
+            作弊：{{ userData.examCheat }}节
+          </div>
+          <div class="num_style" style="color: #43a047">
+            通过：{{ userData.examPass }}节
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </div>
+      <div class="a_style" style="width: 280px">
+        <i></i>
+        <span>学时审批状态</span>
+        <div class="flex_style_study">
+          <div class="num_style" style="color: #0047d0">
+            {{
+              userData.periodStatus === 0
+                ? "未通过"
+                : userData.periodStatus === 2
+                ? "待审核"
+                : userData.periodStatus === -1
+                ? "不可审核"
+                : userData.periodStatus === 1
+                ? "通过审核"
+                : userData.periodStatus === 3
+                ? "审核中"
+                : "未知状态，请联系管理员"
+            }}
+          </div>
+          <div style="clear: both"></div>
         </div>
       </div>
       <div class="s_sd">
@@ -127,12 +137,14 @@
           <el-button
             style="margin-left: 10px"
             size="mini"
+            type="success"
             v-if="userData.periodStatus === 2"
             @click="getChangeStatus(1)"
             >勾选通过</el-button
           >
           <el-button
             size="mini"
+            type="danger"
             v-if="userData.periodStatus === 2"
             @click="getChangeStatus(2)"
             >勾选作弊</el-button
@@ -170,25 +182,29 @@
                 : ''
             ]
           "
-          style="width: 100%"
+          style="width: 100%; border-radius: 4px; overflow: hidden"
           :header-cell-style="
             asrt.value === 0
               ? {
-                  'background-color': 'skyblue',
+                  'background-color': '#CCDDF7',
                   padding: '8px',
-                  color: '#333',
+                  color: '#0047D0',
+                  'border-right-color': '#0047D0',
+                  'border-left-color': '#0047D0',
                 }
               : asrt.value === 1
               ? {
-                  'background-color': 'rgb(255,255,204)',
+                  'background-color': '#D9ECFA',
                   padding: '8px',
-                  color: '#333',
+                  color: '#1565C0',
+                  'border-right-color': '#1565C0',
+                  'border-left-color': '#1565C0',
                 }
               : asrt.value === 2
               ? {
-                  'background-color': '#eee',
+                  'background-color': '#F5F5F5',
                   padding: '8px',
-                  color: '#333',
+                  color: '#666',
                 }
               : ''
           "
@@ -278,7 +294,7 @@
                     :disabled="scope.row.status !== 2"
                     class="btnstyles"
                     size="small"
-                    type="warning"
+                    type="danger"
                     @click="changeStatus(scope.row, 2, scope.$index)"
                     >作弊</el-button
                   >
@@ -296,20 +312,21 @@
                     ? scope.row.classPeriodSectionList
                     : ''
                 "
-                style="width: 98%; margin-left: 2%"
                 :default-expand-all="defaultExpand"
                 :header-cell-style="
                   scope.row.type === 1
                     ? {
-                        'background-color': 'rgb(255,255,204)',
+                        'background-color': '#D9ECFA',
                         padding: '8px',
-                        color: '#333',
+                        color: '#1565C0',
+                        'border-right-color': '#1565C0',
+                        'border-left-color': '#1565C0',
                       }
                     : scope.row.type === 2
                     ? {
-                        'background-color': '#eee',
+                        'background-color': '#f5f5f5',
                         padding: '8px',
-                        color: '#333',
+                        color: '#666',
                       }
                     : ''
                 "
@@ -411,7 +428,7 @@
                           :disabled="scope2.row.status !== 2"
                           class="btnstyles"
                           size="small"
-                          type="warning"
+                          type="danger"
                           @click="
                             changeStatusCharpter(
                               scope2.row,
@@ -434,14 +451,13 @@
                           ? scope2.row.classPeriodSectionList
                           : ''
                       "
-                      style="width: 98%; margin-left: 2%"
                       :default-expand-all="defaultExpand"
                       :header-cell-style="
                         scope2.row.type === 2
                           ? {
-                              'background-color': '#eee',
+                              'background-color': '#f5f5f5',
                               padding: '8px',
-                              color: '#333',
+                              color: '#666',
                             }
                           : ''
                       "
@@ -533,7 +549,7 @@
                                 :disabled="scope3.row.status !== 2"
                                 class="btnstyles"
                                 size="small"
-                                type="warning"
+                                type="danger"
                                 @click="
                                   changeStatusModule(
                                     scope3.row,
@@ -565,7 +581,13 @@
                               v-for="(k, ds) in item.options"
                               :key="ds"
                               :style="
-                                scope3.row[item.prop] === 0 ? 'color:red;' : ''
+                                scope3.row[item.prop] === 0
+                                  ? 'color:red;'
+                                  : scope3.row[item.prop] === 2
+                                  ? 'color:#0047D0;'
+                                  : scope3.row[item.prop] === 1
+                                  ? 'color:#67C23A;'
+                                  : ''
                               "
                             >
                               {{
@@ -658,7 +680,15 @@
                       <span
                         v-for="(k, ds) in item.options"
                         :key="ds"
-                        :style="scope2.row[item.prop] === 0 ? 'color:red;' : ''"
+                        :style="
+                          scope2.row[item.prop] === 0
+                            ? 'color:red;'
+                            : scope2.row[item.prop] === 2
+                            ? 'color:#0047D0;'
+                            : scope2.row[item.prop] === 1
+                            ? 'color:#67C23A;'
+                            : ''
+                        "
                       >
                         {{ k.value == scope2.row[item.prop] ? k.label : "" }}
                       </span>
@@ -743,7 +773,15 @@
                 <span
                   v-for="(k, ds) in item.options"
                   :key="ds"
-                  :style="scope.row[item.prop] === 0 ? 'color:red;' : ''"
+                  :style="
+                    scope.row[item.prop] === 0
+                      ? 'color:red;'
+                      : scope.row[item.prop] === 2
+                      ? 'color:#0047D0;'
+                      : scope.row[item.prop] === 1
+                      ? 'color:#67C23A;'
+                      : ''
+                  "
                 >
                   {{ k.value == scope.row[item.prop] ? k.label : "" }}
                 </span>
@@ -1039,10 +1077,6 @@ export default {
           label: "模块标题",
           prop: "typeName",
         },
-        {
-          label: "学时",
-          prop: "classHours",
-        },
       ],
       tableSet2: [
         {
@@ -1091,6 +1125,7 @@ export default {
           label: "类型",
           prop: "type",
           scope: "typeOptions",
+          width: "90px",
           options: [
             {
               label: "节",
@@ -1105,7 +1140,7 @@ export default {
         {
           label: "节时长",
           prop: "durationTime",
-          width: "180px",
+          width: "120px",
           scope: "durTime",
         },
         {
@@ -1122,6 +1157,7 @@ export default {
           label: "审核状态",
           prop: "status",
           scope: "select",
+          width: "100px",
           options: [
             {
               label: "待审核",
@@ -1144,6 +1180,7 @@ export default {
         {
           label: "审核人",
           prop: "auditUserName",
+          width: "100px",
         },
         {
           label: "审核时间",
@@ -1223,7 +1260,7 @@ export default {
               parseSession = JSON.parse(SESSION);
             }
             if (parseSession.options.length > 1) {
-              this.$emit("removeTab",this.setData.keyId)
+              this.$emit("removeTab", this.setData.keyId);
             } else {
               this.$store
                 .dispatch("tagsView/delView", this.$route)
@@ -1873,16 +1910,153 @@ export default {
   },
 };
 </script>
-
 <style lang="less" scoped>
-.topBoxStyle {
-  position: relative;
-  .btn_styleShow {
-    position: absolute;
-    top: 0;
-    right: 0;
+.top_style {
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
+  border-radius: 8px;
+  padding: 8px 16px;
+  & > header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    line-height: 48px;
+    & > .left {
+      display: flex;
+      align-items: center;
+      i {
+        display: inline-block;
+        width: 2px;
+        height: 18px;
+        background: #0c5dfb;
+        margin-right: 8px;
+      }
+      span {
+        color: #666;
+        font-weight: bold;
+      }
+    }
+  }
+  & > .info_img {
+    display: flex;
+    height: 210px;
+    ul {
+      width: 320px;
+      li {
+        margin-bottom: 12px;
+        font-size: 14px;
+      }
+    }
+    .img_by {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      .pos_bottom {
+        position: absolute;
+        z-index: 1;
+        bottom: 0px;
+        width: 100%;
+        height: 32px;
+        background-color: rgba(53, 53, 53, 0.6);
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+        line-height: 32px;
+      }
+      & > .photoSty1 {
+        width: 152px;
+        height: 208px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+        margin-right: 75px;
+        & > img {
+          width: 106px;
+          height: 150px;
+          margin: 29px auto 0px;
+          display: block;
+        }
+      }
+      & > .photoSty2 {
+        width: 328px;
+        height: 208px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+        margin-right: 75px;
+        & > img {
+          width: 243px;
+          height: 154px;
+          margin: 27px auto 0px;
+          display: block;
+        }
+        &:last-of-type {
+          margin-right: 0px;
+        }
+      }
+    }
+  }
+}
+.studyStyle {
+  margin: 16px 0px 0px;
+  display: flex;
+  align-items: center;
+  & > .a_style {
+    display: flex;
+    align-items: center;
+    margin: 0px 16px 16px 0px;
+    padding: 11px 16px;
+    box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
+    border-radius: 4px;
+    height: 40px;
+    width: 440px;
+    user-select: none;
+    i {
+      width: 2px;
+      height: 18px;
+      display: inline-block;
+      background-color: #0047d0;
+      margin-right: 8px;
+    }
+    span {
+      color: #666;
+      font-weight: bold;
+    }
+    .flex_style_study {
+      flex: 1;
+    }
+    .num_style {
+      float: right;
+      font-size: 14px;
+      margin-left: 14px;
+    }
+  }
+  .s_sd {
+    flex: 1;
+    justify-content:flex-end;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0px 16px 16px 0px;
+    .dis_colu {
+      height: 55px;
+      margin-right: 14px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      font-size: 14px;
+    }
   }
 }
+/deep/ .el-table__expanded-cell {
+  background: #f5f5f5;
+}
+/deep/ .el-table__expanded-cell {
+  padding: 0px !important;
+}
 .li_sty {
   cursor: pointer;
   transition: all 0.3s;
@@ -1918,135 +2092,30 @@ export default {
 .dis_flexs {
   display: flex;
   align-items: center;
-}
-.dis_fs {
-  display: flex;
-  align-items: center;
-  height: 211px;
-  background-color: #eee;
-  padding: 0px 30px;
-  overflow: auto;
-  .ul_ls {
-    margin-right: 30px;
-    align-self: flex-start;
-    li {
-      font-size: 14px;
-      white-space: nowrap;
-      margin-bottom: 14px;
-    }
+  padding: 10px 18px;
+  ul {
+    margin-bottom: 0px;
   }
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-  }
-
-  &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar-thumb {
-    border-radius: 999px;
-    border: 5px solid transparent;
-  }
-
-  &::-webkit-scrollbar-track {
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    min-height: 20px;
-    background-clip: content-box;
-    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-}
-.photoSty1 {
-  flex-shrink: 0;
-  width: 150px;
-  height: 160px;
-  background-color: #fff;
-  margin-right: 60px;
-  position: relative;
-}
-.photoSty2 {
-  position: relative;
-  flex-shrink: 0;
-  width: 230px;
-  height: 160px;
-  margin-right: 60px;
-  background-color: #fff;
-}
-.pos_bottom {
-  position: absolute;
-  height: 20px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background-color: rgba(0, 0, 0, 0.8);
-  text-align: center;
-  line-height: 20px;
-  font-size: 14px;
-  color: #fff;
-}
-.dis_fls {
-  height: 65px;
-  margin: 16px 0px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  .s_sd {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-bottom: 10px;
-    .dis_colu {
-      height: 55px;
-      margin-right: 14px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      font-size: 14px;
-    }
-  }
-}
-.jdNumSty {
-  border: 1px solid #000;
-  border-radius: 6px;
-  padding: 6px;
-}
-.shbtns {
-  padding: 0px 10px;
-  height: 55px;
-  line-height: 55px;
-  background-color: #eee;
-  border-radius: 6px;
-}
-.btnStys {
-  border: 1px solid #666;
-  padding: 0px 8px;
-  border-radius: 4px;
-  font-size: 15px;
-  margin-right: 8px;
-  cursor: pointer;
 }
 .liImgs {
   float: left;
-  width: 250px;
-  height: 250px;
-  margin-right: 20px;
-  margin-bottom: 20px;
+  width: 210px;
+  height: 280px;
+  margin-right: 16px;
+  margin-bottom: 16px;
   position: relative;
+  border-radius: 8px;
+  overflow: hidden;
   .abos {
     position: absolute;
     bottom: 0px;
     width: 100%;
-    height: 44px;
-    line-height: 44px;
-    font-size: 16px;
-    color: #000;
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    color: #fff;
     text-align: center;
-    background-color: rgba(90, 90, 90, 0.7);
+    background-color: rgba(51, 51, 51, 0.7);
   }
 }
 /deep/.el-button {

src/views/education/classManageMent/learningHoursRecordList/hoursTimesRecord.vue

@@ -1,92 +1,93 @@
 <template>
   <div id="hoursTimesRecord">
-    <div style="margin-bottom: 10px">
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「1」</strong>所在班级：{{
-          objs.className
-        }}</span
-      >
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「2」</strong>学时：{{
-          objs.classHours
-        }}</span
-      >
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「3」</strong>完成{{
-          userData.stuAllNum + userData.recordNum
-        }}节的内容学习</span
-      >
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「4」</strong>学习时间：{{
-          $methodsTools.onlyForma(userData.studyStartTime, false)
-        }}
-        - {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
-      >
-
-      <el-button
-        class="btn_styleShow"
-        type="primary"
-        size="mini"
-        @click="showBox = !showBox"
-        >{{ showBox ? "收起" : "展开" }}</el-button
-      >
-    </div>
-    <div class="dis_fs" :style="showBox ? '' : 'height:0px;'">
-      <ul class="ul_ls">
-        <li>学员编码：{{ userData.studentCode }}</li>
-        <li>学员姓名：{{ userData.realName }}</li>
-        <li>学员身份证号码：{{ userData.idCard }}</li>
-        <li>绑定手机号码：{{ userData.telPhone }}</li>
-      </ul>
-      <div class="photoSty1">
-        <img
-          style="width: 100%; height: 100%"
-          v-if="!userData.oneInchPhotos"
-          src="@/assets/404_images/wuyuxaog.png"
-          alt=""
-        />
-        <el-image
-          v-else
-          style="width: 100%; height: 100%"
-          :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
-          :preview-src-list="[
-            $methodsTools.splitImgHost(userData.oneInchPhotos),
-          ]"
+    <div class="top_style">
+      <header>
+        <div class="left"><i></i><span>学员信息</span></div>
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「1」</strong>所在班级：{{
+            objs.className
+          }}</span
         >
-        </el-image>
-        <div class="pos_bottom">一寸头像图</div>
-      </div>
-      <div class="photoSty2">
-        <img
-          style="width: 100%; height: 100%"
-          v-if="!userData.idCardImg1"
-          src="@/assets/404_images/wuyuxaog.png"
-          alt=""
-        />
-        <el-image
-          v-else
-          style="width: 100%; height: 100%"
-          :src="$methodsTools.splitImgHost(userData.idCardImg1)"
-          :preview-src-list="[$methodsTools.splitImgHost(userData.idCardImg1)]"
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「2」</strong>学时：{{
+            objs.classHours
+          }}</span
         >
-        </el-image>
-        <div class="pos_bottom">身份证头像照</div>
-      </div>
-      <div class="photoSty2" style="margin-right: 0px">
-        <img
-          style="width: 100%; height: 100%"
-          v-if="!userData.idCardImg2"
-          src="@/assets/404_images/wuyuxaog.png"
-          alt=""
-        />
-        <el-image
-          v-else
-          style="width: 100%; height: 100%"
-          :src="$methodsTools.splitImgHost(userData.idCardImg2)"
-          :preview-src-list="[$methodsTools.splitImgHost(userData.idCardImg2)]"
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「3」</strong>完成{{
+            userData.stuAllNum + userData.recordNum
+          }}节的内容学习</span
         >
-        </el-image>
-        <div class="pos_bottom">身份证国徽照</div>
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「4」</strong>学习时间：{{
+            $methodsTools.onlyForma(userData.studyStartTime, false)
+          }}
+          - {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
+        >
+        <el-button type="primary" size="mini" @click="showBox = !showBox">{{
+          showBox ? "收起" : "展开"
+        }}</el-button>
+      </header>
+      <div class="info_img" v-show="showBox">
+        <ul>
+          <li>学员编码：{{ userData.studentCode }}</li>
+          <li>学员姓名：{{ userData.realName }}</li>
+          <li>学员身份证号码：{{ userData.idCard }}</li>
+          <li>绑定手机号码：{{ userData.telPhone }}</li>
+        </ul>
+        <div class="img_by">
+          <div class="photoSty1">
+            <img
+              v-if="!userData.oneInchPhotos"
+              src="@/assets/images/peopleImg.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.oneInchPhotos),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">一寸头像图</div>
+          </div>
+          <div class="photoSty2">
+            <img
+              v-if="!userData.idCardImg1"
+              src="@/assets/images/idcardF.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.idCardImg1)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.idCardImg1),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">身份证头像照</div>
+          </div>
+          <div class="photoSty2" style="margin-right: 0px">
+            <img
+              v-if="!userData.idCardImg2"
+              src="@/assets/images/idcardZ.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.idCardImg2)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.idCardImg2),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">身份证国徽照</div>
+          </div>
+        </div>
       </div>
     </div>
     <div style="margin-top: 12px; overflow: auto; height: 100%">
@@ -282,7 +283,7 @@ export default {
 
 <style lang="less" scoped>
 #hoursTimesRecord {
-  max-height: 710px;
+  max-height: 70vh;
   display: flex;
   flex-direction: column;
 }
@@ -431,4 +432,93 @@ export default {
     background-color: rgba(90, 90, 90, 0.7);
   }
 }
+.top_style {
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
+  border-radius: 8px;
+  padding: 8px 16px;
+  & > header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    line-height: 48px;
+    & > .left {
+      display: flex;
+      align-items: center;
+      i {
+        display: inline-block;
+        width: 2px;
+        height: 18px;
+        background: #0c5dfb;
+        margin-right: 8px;
+      }
+      span {
+        color: #666;
+        font-weight: bold;
+      }
+    }
+  }
+  & > .info_img {
+    display: flex;
+    height: 210px;
+    ul {
+      width: 320px;
+      li {
+        margin-bottom: 12px;
+        font-size: 14px;
+      }
+    }
+    .img_by {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      .pos_bottom {
+        position: absolute;
+        z-index: 1;
+        bottom: 0px;
+        width: 100%;
+        height: 32px;
+        background-color: rgba(53, 53, 53, 0.6);
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+        line-height: 32px;
+      }
+      & > .photoSty1 {
+        width: 152px;
+        height: 208px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+        margin-right: 75px;
+        & > img {
+          width: 106px;
+          height: 150px;
+          margin: 29px auto 0px;
+          display: block;
+        }
+      }
+      & > .photoSty2 {
+        width: 328px;
+        height: 208px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+        margin-right: 75px;
+        & > img {
+          width: 243px;
+          height: 154px;
+          margin: 27px auto 0px;
+          display: block;
+        }
+        &:last-of-type {
+          margin-right: 0px;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/education/classManageMent/learningHoursRecordList/index.vue

@@ -303,14 +303,14 @@ export default {
         //   Diszing: true,
         //   scope: "TimeLists",
         // },
-        {
-          label: "班级有效期",
-          prop1: "classStartTime",
-          prop2: "classEndTime",
-          scope: "TimeLists",
-          Diszing: false,
-          hidden: false,
-        },
+        // {
+        //   label: "班级有效期",
+        //   prop1: "classStartTime",
+        //   prop2: "classEndTime",
+        //   scope: "TimeLists",
+        //   Diszing: false,
+        //   hidden: false,
+        // },
         {
           label: "学习时间",
           prop1: "startTime",
@@ -318,30 +318,30 @@ export default {
           scope: "TimeLists",
           hidden: false,
         },
-        {
-          label: "学习状态",
-          prop: "periodStatus",
-          hidden: true,
-          scope: "isOptions",
-          options: [
-            {
-              label: "已完成",
-              value: 0,
-            },
-            {
-              label: "已完成",
-              value: 1,
-            },
-            {
-              label: "已完成",
-              value: 2,
-            },
-            {
-              label: "未完成",
-              value: -1,
-            },
-          ],
-        },
+        // {
+        //   label: "学习状态",
+        //   prop: "periodStatus",
+        //   hidden: true,
+        //   scope: "isOptions",
+        //   options: [
+        //     {
+        //       label: "已完成",
+        //       value: 0,
+        //     },
+        //     {
+        //       label: "已完成",
+        //       value: 1,
+        //     },
+        //     {
+        //       label: "已完成",
+        //       value: 2,
+        //     },
+        //     {
+        //       label: "未完成",
+        //       value: -1,
+        //     },
+        //   ],
+        // },
         {
           label: "学时审核状态",
           prop: "periodStatus",
@@ -370,26 +370,26 @@ export default {
             },
           ],
         },
-        {
-          label: "学时官方推送状态",
-          prop: "periodPlush",
-          hidden: true,
-          scope: "isOptions",
-          options: [
-            {
-              label: "否",
-              value: null,
-            },
-            {
-              label: "否",
-              value: 0,
-            },
-            {
-              label: "是",
-              value: 1,
-            },
-          ],
-        },
+        // {
+        //   label: "学时官方推送状态",
+        //   prop: "periodPlush",
+        //   hidden: true,
+        //   scope: "isOptions",
+        //   options: [
+        //     {
+        //       label: "否",
+        //       value: null,
+        //     },
+        //     {
+        //       label: "否",
+        //       value: 0,
+        //     },
+        //     {
+        //       label: "是",
+        //       value: 1,
+        //     },
+        //   ],
+        // },
       ],
       tableData: [], //表单数据
       total: 0, //一共多少条

src/views/education/classManageMent/learningHoursRecordList/studyTimesRecord.vue

@@ -1,135 +1,148 @@
 <template>
   <div id="classHoursReview">
-    <div style="margin-bottom: 10px">
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「1」</strong>所在班级：{{
-          objs.className
-        }}</span
-      >
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「2」</strong>学时：{{
-          objs.classHours
-        }}</span
-      >
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「3」</strong>完成{{
-          userData.stuAllNum + userData.recordNum
-        }}节的内容学习</span
-      >
-      <span style="margin-left: 10px"
-        ><strong style="color: red">「4」</strong>学习时间：{{
-          $methodsTools.onlyForma(userData.studyStartTime, false)
-        }}
-        - {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
-      >
-      <el-button
-        class="btn_styleShow"
-        type="primary"
-        size="mini"
-        @click="showBox = !showBox"
-        >{{ showBox ? "收起" : "展开" }}</el-button
-      >
-      <div style="clear: both"></div>
-    </div>
-    <div class="dis_fs" :style="showBox ? '' : 'height:0px;'">
-      <ul class="ul_ls">
-        <li>学员编码：{{ userData.studentCode }}</li>
-        <li>学员姓名：{{ userData.realName }}</li>
-        <li>学员身份证号码：{{ userData.idCard }}</li>
-        <li>绑定手机号码：{{ userData.telPhone }}</li>
-      </ul>
-      <div class="photoSty1">
-        <img
-          style="width: 100%; height: 100%"
-          v-if="!userData.oneInchPhotos"
-          src="@/assets/404_images/wuyuxaog.png"
-          alt=""
-        />
-        <el-image
-          v-else
-          style="width: 100%; height: 100%"
-          :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
-          :preview-src-list="[
-            $methodsTools.splitImgHost(userData.oneInchPhotos),
-          ]"
+    <div class="top_style">
+      <header>
+        <div class="left"><i></i><span>学员信息</span></div>
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「1」</strong>所在班级：{{
+            objs.className
+          }}</span
         >
-        </el-image>
-        <div class="pos_bottom">一寸头像图</div>
-      </div>
-      <div class="photoSty2">
-        <img
-          style="width: 100%; height: 100%"
-          v-if="!userData.idCardImg1"
-          src="@/assets/404_images/wuyuxaog.png"
-          alt=""
-        />
-        <el-image
-          v-else
-          style="width: 100%; height: 100%"
-          :src="$methodsTools.splitImgHost(userData.idCardImg1)"
-          :preview-src-list="[$methodsTools.splitImgHost(userData.idCardImg1)]"
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「2」</strong>学时：{{
+            objs.classHours
+          }}</span
         >
-        </el-image>
-        <div class="pos_bottom">身份证头像照</div>
-      </div>
-      <div class="photoSty2" style="margin-right: 0px">
-        <img
-          style="width: 100%; height: 100%"
-          v-if="!userData.idCardImg2"
-          src="@/assets/404_images/wuyuxaog.png"
-          alt=""
-        />
-        <el-image
-          v-else
-          style="width: 100%; height: 100%"
-          :src="$methodsTools.splitImgHost(userData.idCardImg2)"
-          :preview-src-list="[$methodsTools.splitImgHost(userData.idCardImg2)]"
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「3」</strong>完成{{
+            userData.stuAllNum + userData.recordNum
+          }}节的内容学习</span
         >
-        </el-image>
-        <div class="pos_bottom">身份证国徽照</div>
+        <span style="margin-left: 10px"
+          ><strong style="color: red">「4」</strong>学习时间：{{
+            $methodsTools.onlyForma(userData.studyStartTime, false)
+          }}
+          - {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
+        >
+        <el-button type="primary" size="mini" @click="showBox = !showBox">{{
+          showBox ? "收起" : "展开"
+        }}</el-button>
+      </header>
+      <div class="info_img" v-show="showBox">
+        <ul>
+          <li>学员编码：{{ userData.studentCode }}</li>
+          <li>学员姓名：{{ userData.realName }}</li>
+          <li>学员身份证号码：{{ userData.idCard }}</li>
+          <li>绑定手机号码：{{ userData.telPhone }}</li>
+        </ul>
+        <div class="img_by">
+          <div class="photoSty1">
+            <img
+              v-if="!userData.oneInchPhotos"
+              src="@/assets/images/peopleImg.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.oneInchPhotos),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">一寸头像图</div>
+          </div>
+          <div class="photoSty2">
+            <img
+              v-if="!userData.idCardImg1"
+              src="@/assets/images/idcardF.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.idCardImg1)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.idCardImg1),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">身份证头像照</div>
+          </div>
+          <div class="photoSty2" style="margin-right: 0px">
+            <img
+              v-if="!userData.idCardImg2"
+              src="@/assets/images/idcardZ.png"
+              alt=""
+            />
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(userData.idCardImg2)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(userData.idCardImg2),
+              ]"
+            >
+            </el-image>
+            <div class="pos_bottom">身份证国徽照</div>
+          </div>
+        </div>
       </div>
     </div>
-
-    <div class="dis_fls">
-      <div class="s_sd">
-        <div class="dis_colu">
-          <div class="jdNumSty" style="margin-bottom: 4px">
-            视频学习进度：{{ userData.stuAllNum }}/{{ userData.secAllNum }}
-            {{
-              userData.stuAllNum == 0 && userData.secAllNum == 0
-                ? "0"
-                : ((userData.stuAllNum / userData.secAllNum) * 100).toFixed(2)
-            }}% 通过：{{ userData.pass }}节
-            <span style="color: #f56c6c">作弊：{{ userData.cheat }}节</span>
-            <span style="color: #409eff"> 待审：{{ userData.pending }}节</span>
+    <div class="studyStyle">
+      <div class="a_style">
+        <i></i>
+        <span>视频审核进度</span>
+        <div class="flex_style_study">
+          <div class="num_style" style="color: #0047d0">
+            待审：{{ userData.pending }}节
           </div>
-          <div class="jdNumSty">
-            做题学习进度：{{ userData.recordNum }}/{{ userData.examNum }}
-            {{
-              userData.recordNum == 0 && userData.examNum == 0
-                ? "0"
-                : ((userData.recordNum / userData.examNum) * 100).toFixed(2)
-            }}% 通过：{{ userData.examPass }}节
-            <span style="color: #f56c6c">作弊：{{ userData.examCheat }}节</span>
-            <span style="color: #409eff">
-              待审：{{ userData.examPending }}节</span
-            >
+          <div class="num_style" style="color: #e53935">
+            作弊：{{ userData.cheat }}节
+          </div>
+          <div class="num_style" style="color: #43a047">
+            通过：{{ userData.pass }}节
           </div>
+          <div style="clear: both"></div>
         </div>
-        <div class="shbtns">
-          学时审批状态：{{
-            userData.periodStatus === 0
-              ? "未通过"
-              : userData.periodStatus === 2
-              ? "待审核"
-              : userData.periodStatus === -1
-              ? "不可审核"
-              : userData.periodStatus === 1
-              ? "通过审核"
-              : userData.periodStatus === 3
-              ? "审核中"
-              : "未知状态，请联系管理员"
-          }}
+      </div>
+      <div class="a_style">
+        <i></i>
+        <span>做题审核进度</span>
+        <div class="flex_style_study">
+          <div class="num_style" style="color: #0047d0">
+            待审：{{ userData.examPending }}节
+          </div>
+          <div class="num_style" style="color: #e53935">
+            作弊：{{ userData.examCheat }}节
+          </div>
+          <div class="num_style" style="color: #43a047">
+            通过：{{ userData.examPass }}节
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </div>
+      <div class="a_style" style="width: 280px">
+        <i></i>
+        <span>学时审批状态</span>
+        <div class="flex_style_study">
+          <div class="num_style" style="color: #0047d0">
+            {{
+              userData.periodStatus === 0
+                ? "未通过"
+                : userData.periodStatus === 2
+                ? "待审核"
+                : userData.periodStatus === -1
+                ? "不可审核"
+                : userData.periodStatus === 1
+                ? "通过审核"
+                : userData.periodStatus === 3
+                ? "审核中"
+                : "未知状态，请联系管理员"
+            }}
+          </div>
+          <div style="clear: both"></div>
         </div>
       </div>
       <div class="s_sd">
@@ -145,12 +158,14 @@
           <el-button
             style="margin-left: 10px"
             size="mini"
+            type="success"
             v-if="userData.periodStatus === 2"
             @click="getChangeStatus(1)"
             >勾选通过</el-button
           >
           <el-button
             size="mini"
+            type="danger"
             v-if="userData.periodStatus === 2"
             @click="getChangeStatus(2)"
             >勾选作弊</el-button
@@ -188,25 +203,29 @@
                 : ''
             ]
           "
-          style="width: 100%"
+          style="width: 100%; border-radius: 4px; overflow: hidden"
           :header-cell-style="
             asrt.value === 0
               ? {
-                  'background-color': 'skyblue',
+                  'background-color': '#CCDDF7',
                   padding: '8px',
-                  color: '#333',
+                  color: '#0047D0',
+                  'border-right-color': '#0047D0',
+                  'border-left-color': '#0047D0',
                 }
               : asrt.value === 1
               ? {
-                  'background-color': 'rgb(255,255,204)',
+                  'background-color': '#D9ECFA',
                   padding: '8px',
-                  color: '#333',
+                  color: '#1565C0',
+                  'border-right-color': '#1565C0',
+                  'border-left-color': '#1565C0',
                 }
               : asrt.value === 2
               ? {
-                  'background-color': '#eee',
+                  'background-color': '#F5F5F5',
                   padding: '8px',
-                  color: '#333',
+                  color: '#666',
                 }
               : ''
           "
@@ -263,8 +282,8 @@
                 <div
                   class="styFlex"
                   v-if="
-                    (userData.periodStatus === 2 ||
-                      userData.periodStatus === 0 ||
+                    (userData.periodStatus === 0 ||
+                      userData.periodStatus === 2 ||
                       userData.periodStatus === 3) &&
                     scope.row.periodStatus === 1
                   "
@@ -296,7 +315,7 @@
                     :disabled="scope.row.status !== 2"
                     class="btnstyles"
                     size="small"
-                    type="warning"
+                    type="danger"
                     @click="changeStatus(scope.row, 2, scope.$index)"
                     >作弊</el-button
                   >
@@ -314,20 +333,21 @@
                     ? scope.row.classPeriodSectionList
                     : ''
                 "
-                style="width: 98%; margin-left: 2%"
                 :default-expand-all="defaultExpand"
                 :header-cell-style="
                   scope.row.type === 1
                     ? {
-                        'background-color': 'rgb(255,255,204)',
+                        'background-color': '#D9ECFA',
                         padding: '8px',
-                        color: '#333',
+                        color: '#1565C0',
+                        'border-right-color': '#1565C0',
+                        'border-left-color': '#1565C0',
                       }
                     : scope.row.type === 2
                     ? {
-                        'background-color': '#eee',
+                        'background-color': '#f5f5f5',
                         padding: '8px',
-                        color: '#333',
+                        color: '#666',
                       }
                     : ''
                 "
@@ -429,7 +449,7 @@
                           :disabled="scope2.row.status !== 2"
                           class="btnstyles"
                           size="small"
-                          type="warning"
+                          type="danger"
                           @click="
                             changeStatusCharpter(
                               scope2.row,
@@ -452,14 +472,13 @@
                           ? scope2.row.classPeriodSectionList
                           : ''
                       "
-                      style="width: 98%; margin-left: 2%"
                       :default-expand-all="defaultExpand"
                       :header-cell-style="
                         scope2.row.type === 2
                           ? {
-                              'background-color': '#eee',
+                              'background-color': '#f5f5f5',
                               padding: '8px',
-                              color: '#333',
+                              color: '#666',
                             }
                           : ''
                       "
@@ -551,7 +570,7 @@
                                 :disabled="scope3.row.status !== 2"
                                 class="btnstyles"
                                 size="small"
-                                type="warning"
+                                type="danger"
                                 @click="
                                   changeStatusModule(
                                     scope3.row,
@@ -583,7 +602,13 @@
                               v-for="(k, ds) in item.options"
                               :key="ds"
                               :style="
-                                scope3.row[item.prop] === 0 ? 'color:red;' : ''
+                                scope3.row[item.prop] === 0
+                                  ? 'color:red;'
+                                  : scope3.row[item.prop] === 2
+                                  ? 'color:#0047D0;'
+                                  : scope3.row[item.prop] === 1
+                                  ? 'color:#67C23A;'
+                                  : ''
                               "
                             >
                               {{
@@ -676,7 +701,15 @@
                       <span
                         v-for="(k, ds) in item.options"
                         :key="ds"
-                        :style="scope2.row[item.prop] === 0 ? 'color:red;' : ''"
+                        :style="
+                          scope2.row[item.prop] === 0
+                            ? 'color:red;'
+                            : scope2.row[item.prop] === 2
+                            ? 'color:#0047D0;'
+                            : scope2.row[item.prop] === 1
+                            ? 'color:#67C23A;'
+                            : ''
+                        "
                       >
                         {{ k.value == scope2.row[item.prop] ? k.label : "" }}
                       </span>
@@ -761,7 +794,15 @@
                 <span
                   v-for="(k, ds) in item.options"
                   :key="ds"
-                  :style="scope.row[item.prop] === 0 ? 'color:red;' : ''"
+                  :style="
+                    scope.row[item.prop] === 0
+                      ? 'color:red;'
+                      : scope.row[item.prop] === 2
+                      ? 'color:#0047D0;'
+                      : scope.row[item.prop] === 1
+                      ? 'color:#67C23A;'
+                      : ''
+                  "
                 >
                   {{ k.value == scope.row[item.prop] ? k.label : "" }}
                 </span>
@@ -1065,10 +1106,6 @@ export default {
           label: "模块标题",
           prop: "typeName",
         },
-        {
-          label: "学时",
-          prop: "classHours",
-        },
       ],
       tableSet2: [
         {
@@ -1891,16 +1928,12 @@ export default {
   },
 };
 </script>
-
 <style lang="less" scoped>
 #classHoursReview {
-  max-height: 710px;
+  max-height: 70vh;
   display: flex;
   flex-direction: column;
 }
-.btn_styleShow {
-  float: right;
-}
 .li_sty {
   cursor: pointer;
   transition: all 0.3s;
@@ -1914,106 +1947,136 @@ export default {
     box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
   }
 }
-.styFlex {
-  width: 80px;
-  text-align: center;
-}
-.checkboxList {
-  margin-bottom: 6px;
-  &/deep/.el-checkbox__label {
-    display: none;
+.top_style {
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
+  border-radius: 8px;
+  padding: 8px 16px;
+  & > header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    line-height: 48px;
+    & > .left {
+      display: flex;
+      align-items: center;
+      i {
+        display: inline-block;
+        width: 2px;
+        height: 18px;
+        background: #0c5dfb;
+        margin-right: 8px;
+      }
+      span {
+        color: #666;
+        font-weight: bold;
+      }
+    }
+  }
+  & > .info_img {
+    display: flex;
+    height: 210px;
+    ul {
+      width: 320px;
+      li {
+        margin-bottom: 12px;
+        font-size: 14px;
+      }
+    }
+    .img_by {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      .pos_bottom {
+        position: absolute;
+        z-index: 1;
+        bottom: 0px;
+        width: 100%;
+        height: 32px;
+        background-color: rgba(53, 53, 53, 0.6);
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+        line-height: 32px;
+      }
+      & > .photoSty1 {
+        width: 152px;
+        height: 208px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+        margin-right: 75px;
+        & > img {
+          width: 106px;
+          height: 150px;
+          margin: 29px auto 0px;
+          display: block;
+        }
+      }
+      & > .photoSty2 {
+        width: 328px;
+        height: 208px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+        margin-right: 75px;
+        & > img {
+          width: 243px;
+          height: 154px;
+          margin: 27px auto 0px;
+          display: block;
+        }
+        &:last-of-type {
+          margin-right: 0px;
+        }
+      }
+    }
   }
 }
-.btnstyles {
-  margin-left: 0px;
-  margin-bottom: 10px;
-}
-.dis_flexs {
-  display: flex;
-  align-items: center;
-}
-.dis_fs {
+.studyStyle {
+  margin: 16px 0px 0px;
   display: flex;
   align-items: center;
-  height: 211px;
-  background-color: #eee;
-  padding: 0px 30px;
-  overflow: auto;
-  flex-shrink: 0;
-  .ul_ls {
-    margin-right: 30px;
-    align-self: flex-start;
-    li {
+  & > .a_style {
+    display: flex;
+    align-items: center;
+    margin: 0px 16px 16px 0px;
+    padding: 11px 16px;
+    box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
+    border-radius: 4px;
+    height: 40px;
+    width: 440px;
+    user-select: none;
+    i {
+      width: 2px;
+      height: 18px;
+      display: inline-block;
+      background-color: #0047d0;
+      margin-right: 8px;
+    }
+    span {
+      color: #666;
+      font-weight: bold;
+    }
+    .flex_style_study {
+      flex: 1;
+    }
+    .num_style {
+      float: right;
       font-size: 14px;
-      white-space: nowrap;
-      margin-bottom: 14px;
+      margin-left: 14px;
     }
   }
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-  }
-
-  &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar-thumb {
-    border-radius: 999px;
-    border: 5px solid transparent;
-  }
-
-  &::-webkit-scrollbar-track {
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    min-height: 20px;
-    background-clip: content-box;
-    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-}
-.photoSty1 {
-  flex-shrink: 0;
-  width: 150px;
-  height: 160px;
-  background-color: #fff;
-  margin-right: 60px;
-  position: relative;
-}
-.photoSty2 {
-  position: relative;
-  flex-shrink: 0;
-  width: 230px;
-  height: 160px;
-  margin-right: 60px;
-  background-color: #fff;
-}
-.pos_bottom {
-  position: absolute;
-  height: 20px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background-color: rgba(0, 0, 0, 0.8);
-  text-align: center;
-  line-height: 20px;
-  font-size: 14px;
-  color: #fff;
-}
-.dis_fls {
-  height: 65px;
-  margin: 16px 0px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
   .s_sd {
+    flex: 1;
+    justify-content:flex-end;
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    margin-bottom: 10px;
+    margin: 0px 16px 16px 0px;
     .dis_colu {
       height: 55px;
       margin-right: 14px;
@@ -2024,43 +2087,58 @@ export default {
     }
   }
 }
-.jdNumSty {
-  border: 1px solid #000;
-  border-radius: 6px;
-  padding: 6px;
+/deep/ .el-table__expanded-cell {
+  background: #f5f5f5;
 }
-.shbtns {
-  padding: 0px 10px;
-  height: 55px;
-  line-height: 55px;
-  background-color: #eee;
-  border-radius: 6px;
+/deep/ .el-table__expanded-cell {
+  padding: 0px !important;
 }
-.btnStys {
-  border: 1px solid #666;
-  padding: 0px 8px;
-  border-radius: 4px;
-  font-size: 15px;
-  margin-right: 8px;
-  cursor: pointer;
+#studyTimes {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 190px);
+}
+.styFlex {
+  width: 80px;
+  text-align: center;
+}
+.checkboxList {
+  margin-bottom: 6px;
+  &/deep/.el-checkbox__label {
+    display: none;
+  }
+}
+.btnstyles {
+  margin-left: 0px;
+  margin-bottom: 10px;
+}
+.dis_flexs {
+  display: flex;
+  align-items: center;
+  padding: 10px 18px;
+  ul {
+    margin-bottom: 0px;
+  }
 }
 .liImgs {
   float: left;
-  width: 250px;
-  height: 250px;
-  margin-right: 20px;
-  margin-bottom: 20px;
+  width: 210px;
+  height: 280px;
+  margin-right: 16px;
+  margin-bottom: 16px;
   position: relative;
+  border-radius: 8px;
+  overflow: hidden;
   .abos {
     position: absolute;
     bottom: 0px;
     width: 100%;
-    height: 44px;
-    line-height: 44px;
-    font-size: 16px;
-    color: #000;
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    color: #fff;
     text-align: center;
-    background-color: rgba(90, 90, 90, 0.7);
+    background-color: rgba(51, 51, 51, 0.7);
   }
 }
 /deep/.el-button {

src/views/education/studentManageMent/studentList/index.vue

@@ -59,6 +59,17 @@ export default {
       },
       //搜索
       formList: [
+        {
+          prop: "educationTypeId",
+          placeholder: "教育类型",
+          scope: "educationType",
+        },
+        {
+          prop: "businessId",
+          placeholder: "业务层次",
+          scope: "businessLevel",
+          edu: "educationTypeId",
+        },
         {
           prop: "gradePoint",
           placeholder: "是否分班",
@@ -74,6 +85,22 @@ export default {
             },
           ],
         },
+        {
+          prop1: "startTime",
+          prop2: "endTime",
+          placeholder1: "创建开始时间",
+          placeholder2: "创建结束时间",
+          scope: "moreDataPicker",
+          Diszing: true,
+        },
+        {
+          prop: "goodsSearchKey",
+          placeholder: "请输入商品编码/商品名称",
+        },
+        {
+          prop: "companyName",
+          placeholder: "请输入公司名称",
+        },
         {
           prop: "realname",
           placeholder: "请输入学员名称",
@@ -98,6 +125,13 @@ export default {
           hidden: true,
           scope: "editInfo",
         },
+        {
+          label: "一寸头像",
+          prop: "oneInchPhotos",
+          hidden: true,
+          scope: "img",
+          width: "120px",
+        },
         {
           label: "学员身份证",
           prop: "idCard",
@@ -123,7 +157,7 @@ export default {
           label: "所购商品",
           prop1: "goodsCourseNum",
           prop2: "goodsBankNum",
-          prop3:"goodsLiveNum",
+          prop3: "goodsLiveNum",
           hidden: true,
           scope: "payGoodsList",
         },
@@ -133,7 +167,7 @@ export default {
           hidden: true,
           scope: "classNums",
           sort: true,
-          width:"120px"
+          width: "120px",
         },
       ],
       tableData: [], //表单数据
@@ -153,7 +187,21 @@ export default {
         this.$methodsTools.timestampConvert(this.$route.params.timeType)[1]
       );
     }
-    this.formData.businessId = this.$route.params.businessId || "";
+    if (this.$route.params.educationId) {
+      this.$set(
+        this.formData,
+        "educationTypeId",
+        this.$route.params.educationId
+      );
+      this.$refs.searchBox.changeEducationType(
+        this.$route.params.educationId,
+        true
+      );
+    }
+    if (this.$route.params.businessId) {
+      this.$set(this.formData, "businessId", this.$route.params.businessId);
+      this.$refs.searchBox.changeBusinessLevel(this.$route.params.businessId);
+    }
     this.search();
   },
   activated() {
@@ -176,7 +224,7 @@ export default {
           getOrderNum: 1,
         };
       }
-      var data = JSON.parse(JSON.stringify(this.formData))
+      var data = JSON.parse(JSON.stringify(this.formData));
       if (this.formData.startTime) {
         data.startTime = parseInt(data.startTime / 1000);
       }

src/views/index.vue

@@ -822,6 +822,7 @@ export default {
           this.$router.push({
             name: "StudentList",
             params: {
+              educationId: this.activeEduId,
               businessId: this.activeBusId,
               timeType: timeType,
             },

src/views/index_v1.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="dashboard-editor-container">
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    
-  </div>
-</template>
-
-<script>
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
-export default {
-  name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>

src/views/loginCopy.vue

@@ -1,215 +0,0 @@
-<template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">中正高校端后台管理系统</h3>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaOnOff">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
-
-export default {
-  name: "Login",
-  data() {
-    return {
-      codeUrl: "",
-      cookiePassword: "",
-      loginForm: {
-        username: "",
-        password: "",
-        rememberMe: false,
-        code: "",
-        uuid: ""
-      },
-      loginRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
-      },
-      loading: false,
-      // 验证码开关
-      captchaOnOff: true,
-      // 注册开关
-      register: false,
-      redirect: undefined
-    };
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect;
-      },
-      immediate: true
-    }
-  },
-  created() {
-    this.getCode();
-    this.getCookie();
-  },
-  methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        // this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
-        // if (this.captchaOnOff) {
-          this.codeUrl = "data:image/gif;base64," + res.data.img;
-          this.loginForm.uuid = res.data.uuid;
-        // }
-      });
-    },
-    getCookie() {
-      const username = Cookies.get("username");
-      const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
-      this.loginForm = {
-        username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-      };
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
-          } else {
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
-          }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaOnOff) {
-              this.getCode();
-            }
-          });
-        }
-      });
-    }
-  }
-};
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
-
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-.login-code-img {
-  height: 38px;
-}
-</style>

src/views/register.vue

@@ -1,208 +0,0 @@
-<template>
-  <div class="register">
-    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">中正高校端后台管理系统</h3>
-      <el-form-item prop="username">
-        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="registerForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleRegister"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="confirmPassword">
-        <el-input
-          v-model="registerForm.confirmPassword"
-          type="password"
-          auto-complete="off"
-          placeholder="确认密码"
-          @keyup.enter.native="handleRegister"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaOnOff">
-        <el-input
-          v-model="registerForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleRegister"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="register-code">
-          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
-        </div>
-      </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleRegister"
-        >
-          <span v-if="!loading">注 册</span>
-          <span v-else>注 册 中...</span>
-        </el-button>
-        <div style="float: right;">
-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-register-footer">
-      <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCodeImg, register } from "@/api/login";
-
-export default {
-  name: "Register",
-  data() {
-    const equalToPassword = (rule, value, callback) => {
-      if (this.registerForm.password !== value) {
-        callback(new Error("两次输入的密码不一致"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      codeUrl: "",
-      registerForm: {
-        username: "",
-        password: "",
-        confirmPassword: "",
-        code: "",
-        uuid: ""
-      },
-      registerRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" },
-          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, trigger: "blur", message: "请再次输入您的密码" },
-          { required: true, validator: equalToPassword, trigger: "blur" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
-      },
-      loading: false,
-      captchaOnOff: true
-    };
-  },
-  created() {
-    this.getCode();
-  },
-  methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
-        if (this.captchaOnOff) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.registerForm.uuid = res.uuid;
-        }
-      });
-    },
-    handleRegister() {
-      this.$refs.registerForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          register(this.registerForm).then(res => {
-            const username = this.registerForm.username;
-            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
-              dangerouslyUseHTMLString: true
-            }).then(() => {
-              this.$router.push("/login");
-            }).catch(() => {});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaOnOff) {
-              this.getCode();
-            }
-          })
-        }
-      });
-    }
-  }
-};
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-.register {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
-
-.register-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
-.register-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.register-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-register-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-.register-code-img {
-  height: 38px;
-}
-</style>