响应式优化

2020-11-15 16:47:42 +08:00
parent 8de6c6900c
commit 30686dab03
33 changed files with 2803 additions and 1824 deletions
--- a/ruoyi-ui/src/views/benyi_train/lecturer/index.vue
+++ b/ruoyi-ui/src/views/benyi_train/lecturer/index.vue
@@ -1,6 +1,11 @@
 <template>
  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
      <el-form-item label="讲师姓名" prop="name">
        <el-input
          v-model="queryParams.name"
@@ -11,63 +16,81 @@
        />
      </el-form-item>
      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
      </el-form-item>
    </el-form>

-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['benyi:lecturer:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['benyi:lecturer:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['benyi:lecturer:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['benyi:lecturer:export']"
-        >导出</el-button>
-      </el-col>
-    </el-row>
+    <div class="mb8 btn-list">
+      <el-button
+        type="primary"
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleAdd"
+        v-hasPermi="['benyi:lecturer:add']"
+        >新增</el-button
+      >
+      <!-- <el-button
+        type="success"
+        icon="el-icon-edit"
+        size="mini"
+        :disabled="single"
+        @click="handleUpdate"
+        v-hasPermi="['benyi:lecturer:edit']"
+        >修改</el-button
+      > -->
+      <el-button
+        type="danger"
+        icon="el-icon-delete"
+        size="mini"
+        :disabled="multiple"
+        @click="handleDelete"
+        v-hasPermi="['benyi:lecturer:remove']"
+        >删除</el-button
+      >
+      <el-button
+        type="warning"
+        icon="el-icon-download"
+        size="mini"
+        @click="handleExport"
+        v-hasPermi="['benyi:lecturer:export']"
+        >导出</el-button
+      >
+    </div>

-    <el-table v-loading="loading" :data="lecturerList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="lecturerList"
+      @selection-change="handleSelectionChange"
+    >
      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="编号" width="80" align="center" prop="id" />
      <el-table-column label="讲师姓名" align="center" prop="name" />
      <el-table-column label="讲师简介" align="center" prop="information" />
-      <el-table-column label="创建时间" align="center" prop="createtime" width="180">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createtime"
+        width="180"
+      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createtime) }}</span>
        </template>
      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        width="150"
+        class-name="small-padding fixed-width"
+      >
        <template slot-scope="scope">
          <el-button
            size="mini"
@@ -75,20 +98,22 @@
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['benyi:lecturer:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['benyi:lecturer:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
-      v-show="total>0"
+      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
@@ -96,13 +121,17 @@
    />

    <!-- 添加或修改讲师对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px">
+    <el-dialog :title="title" :visible.sync="open" class="v-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="讲师姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="讲师简介" prop="information">
-          <el-input v-model="form.information" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.information"
+            type="textarea"
+            placeholder="请输入内容"
+          />
          <el-input v-model="form.imgurl" v-if="false" />
        </el-form-item>
        <el-form-item label="选择照片" prop="imgurl">
@@ -344,15 +373,15 @@ export default {
 };
 </script>

-<style>
-.avatar-uploader .el-upload {
+<style lang="scss" scoped>
+.avatar-uploader ::v-deep.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
 }
-.avatar-uploader .el-upload:hover {
+.avatar-uploader ::v-deep.el-upload:hover {
  border-color: #409eff;
 }
 .avatar-uploader-icon {
@@ -368,4 +397,4 @@ export default {
  height: 178px;
  display: block;
 }
-</style>
+</style>
--- a/ruoyi-ui/src/views/benyi_train/video/index.vue
+++ b/ruoyi-ui/src/views/benyi_train/video/index.vue
@@ -1,6 +1,11 @@
 <template>
  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
      <el-form-item label="所属类别" prop="type">
        <el-cascader
          placeholder="请选择所属类别"
@@ -11,7 +16,11 @@
        ></el-cascader>
      </el-form-item>
      <el-form-item label="讲师姓名" prop="lecturer">
-        <el-select v-model="queryParams.lecturer" filterable placeholder="请选择讲师">
+        <el-select
+          v-model="queryParams.lecturer"
+          filterable
+          placeholder="请选择讲师"
+        >
          <el-option
            v-for="item in lecturerOptions"
            :key="item.id"
@@ -30,47 +39,61 @@
        />
      </el-form-item>
      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
      </el-form-item>
    </el-form>

-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['benyi:video:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['benyi:video:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['benyi:video:remove']"
-        >删除</el-button>
-      </el-col>
-    </el-row>
+    <div class="mb8 btn-list">
+      <el-button
+        type="primary"
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleAdd"
+        v-hasPermi="['benyi:video:add']"
+        >新增</el-button
+      >
+      <!-- <el-button
+        type="success"
+        icon="el-icon-edit"
+        size="mini"
+        :disabled="single"
+        @click="handleUpdate"
+        v-hasPermi="['benyi:video:edit']"
+        >修改</el-button
+      > -->
+      <el-button
+        type="danger"
+        icon="el-icon-delete"
+        size="mini"
+        :disabled="multiple"
+        @click="handleDelete"
+        v-hasPermi="['benyi:video:remove']"
+        >删除</el-button
+      >
+    </div>

-    <el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="videoList"
+      @selection-change="handleSelectionChange"
+    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="培训视频标题" align="center" prop="title" :show-overflow-tooltip="true" />
+      <el-table-column
+        label="培训视频标题"
+        align="center"
+        prop="title"
+        :show-overflow-tooltip="true"
+      />
      <el-table-column
        label="视频简介"
        align="center"
@@ -92,15 +115,26 @@
            size="mini"
            type="text"
            @click="lookDetails(scope.row)"
-          >{{ scope.row.avgscore }}</el-button>
+            >{{ scope.row.avgscore }}</el-button
+          >
        </template>
      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createtime" width="180">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createtime"
+        width="180"
+      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createtime) }}</span>
        </template>
      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        width="160"
+        class-name="small-padding fixed-width"
+      >
        <template slot-scope="scope">
          <el-button
            size="mini"
@@ -108,20 +142,22 @@
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['benyi:video:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['benyi:video:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
-      v-show="total>0"
+      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
@@ -129,7 +165,7 @@
    />

    <!-- 添加或修改培训对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px">
+    <el-dialog :title="title" :visible.sync="open" class="v-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属类别" prop="type">
          <el-cascader
@@ -143,10 +179,18 @@
          ></el-cascader>
        </el-form-item>
        <el-form-item label="视频标题" prop="title">
-          <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.title"
+            type="textarea"
+            placeholder="请输入内容"
+          />
        </el-form-item>
        <el-form-item label="视频简介" prop="information">
-          <el-input v-model="form.information" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.information"
+            type="textarea"
+            placeholder="请输入内容"
+          />
        </el-form-item>
        <el-form-item label="培训讲师" prop="lecturer">
          <el-select v-model="form.lecturer" placeholder="请选择讲师">
@@ -183,7 +227,11 @@
              v-else-if="imageUrl.length < 1 && imgFlag == false"
              class="el-icon-plus avatar-uploader-icon"
            ></i>
-            <el-progress v-if="imgFlag == true" type="circle" :percentage="percent"></el-progress>
+            <el-progress
+              v-if="imgFlag == true"
+              type="circle"
+              :percentage="percent"
+            ></el-progress>
          </el-upload>
        </el-form-item>
      </el-form>
@@ -194,14 +242,23 @@
    </el-dialog>

    <!-- 添加或修改培训对话框 -->
-    <el-dialog title="查看分数和评价详情页" :visible.sync="opendetail" width="800px">
+    <el-dialog
+      title="查看分数和评价详情页"
+      :visible.sync="opendetail"
+      class="big-dialog"
+    >
      <el-table v-loading="loading" :data="scoreandfreeList">
        <el-table-column label="分数" align="center" prop="score" />
-        <el-table-column label="评价" align="center" prop="content" :show-overflow-tooltip="true" />
+        <el-table-column
+          label="评价"
+          align="center"
+          prop="content"
+          :show-overflow-tooltip="true"
+        />
      </el-table>

      <pagination
-        v-show="detailtotal>0"
+        v-show="detailtotal > 0"
        :total="detailtotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
@@ -576,7 +633,7 @@ export default {
 };
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
@@ -648,4 +705,4 @@ export default {
 .image-preview:hover .image-preview-action {
  opacity: 1;
 }
-</style>
+</style>
--- a/ruoyi-ui/src/views/benyi_train/video_study/detail.vue
+++ b/ruoyi-ui/src/views/benyi_train/video_study/detail.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="app-container">
-    <el-row>
-      <el-col :xs="24" :sm="12" style="padding: 10px;">
+    <el-row :gutter="10">
+      <el-col :xs="24" :sm="12">
        <el-card>
          <video-player
            class="vjs-custom-skin"
@@ -11,7 +11,7 @@
          ></video-player>
        </el-card>
      </el-col>
-      <el-col :xs="24" :sm="12" style="padding: 10px;">
+      <el-col :xs="24" :sm="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>内容介绍</span>
@@ -44,13 +44,18 @@
                />
              </el-form-item>
            </div>
+            <div class="item">
+              <el-form-item label="">
+                <el-button
+                class="sub-btn"
+                type="primary"
+                :disabled="dis"
+                @click="submitForm"
+                v-hasPermi="['benyi:feedback_score:add']"
+              >提交</el-button>
+              </el-form-item>
+            </div>
          </el-form>
-          <el-button
-            type="primary"
-            :disabled="dis"
-            @click="submitForm"
-            v-hasPermi="['benyi:feedback_score:add']"
-          >提交</el-button>
        </el-card>
      </el-col>
    </el-row>
@@ -176,3 +181,16 @@ export default {
  }
 };
 </script>
+<style lang="scss" scoped>
+.sub-btn {
+  margin-top: 5px;
+}
+.el-rate {
+  margin-top: 8px;
+}
+.item {
+  ::v-deep.el-form-item {
+    margin-bottom: 5px;
+  }
+}
+</style>
--- a/ruoyi-ui/src/views/benyi_train/video_study/index.vue
+++ b/ruoyi-ui/src/views/benyi_train/video_study/index.vue
@@ -36,7 +36,7 @@
      </el-form-item>
    </el-form>
    <el-row v-loading="loading">
-      <el-col :xs="12" :sm="6" v-for="(o, index) in videoList" :key="index" style="padding: 10px;">
+      <el-col :xs="24" :sm="8" :md="6" v-for="(o, index) in videoList" :key="index" style="padding: 10px;">
        <el-card :body-style="{ padding: '2px' }">
          <video-player
            class="vjs-custom-skin"
@@ -214,6 +214,7 @@ export default {
 }

 .info-title-name {
+  padding-top: 5px;
  font-size: 12px;
 }
-</style>
+</style>