教师节

2025-12-10 19:36:43 +08:00 · 2023-08-28 17:16:17 +08:00
parent 622bcf9d14
commit db2936f051
9 changed files with 666 additions and 105 deletions
--- a/src/views/grateful/GratefulHomePage.vue
+++ b/src/views/grateful/GratefulHomePage.vue
@@ -13,52 +13,30 @@
          </div>
          <div class="modules-list">
            <!--内容列表内容-->
-            <div
-              v-for="(course, ccidx) in courseList.list"
-              :key="'cc' + ccidx"
-              class="xindex-course"
-              style="position: relative"
-            >
+            <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
+              style="position: relative">
              <div style="position: absolute; right: 25px; bottom: 72px">
-                <interactBar
-                  nodeWidth="20px"
-                  :courseExclusive="true"
-                  :type="1"
-                  :data="course"
-                  :comments="false"
-                  :praises="false"
-                  :shares="false"
-                  :views="false"
-                >
+                <interactBar nodeWidth="20px" :courseExclusive="true" :type="1" :data="course" :comments="false"
+                  :praises="false" :shares="false" :views="false">
                </interactBar>
              </div>
              <a @click="toCourseDetail(course)">
                <div class="xindex-course-image">
                  <course-image :course="course"></course-image>
-                  <span v-if="course.type == 20 || 10" class="course-type"
-                    >录播课</span
-                  >
+                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                </div>
-                <div
-                  style="width: 80%"
-                  :title="course.name"
-                  class="course-title portal-title-tow two-line-ellipsis"
-                >
+                <div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
                  {{ course.name }}
                </div>
                <div class="course-author">
                  <div class="course-author-left">
                    {{ course.authorInfo.name }}

-                    <span class="study-num"
-                      >{{ formatNum(course.studys) }}人学习</span
-                    >
+                    <span class="study-num">{{ formatNum(course.studys) }}人学习</span>
                  </div>
                  <div style="display: flex">
                    <div v-if="course.score">
-                      <span class="course-score-value" style="margin-left: 10px"
-                        >{{ toScore(course.score) }}分</span
-                      >
+                      <span class="course-score-value" style="margin-left: 10px">{{ toScore(course.score) }}分</span>
                    </div>
                    <div v-else class="course-score-no">未评分</div>
                  </div>
@@ -69,12 +47,35 @@
        </div>
      </div>
    </div>
-    <div class="float-tools">
+    <div class="float-tools" @click="() => (gratefulVisible = !gratefulVisible)">
      <div class="content">
        <img src="../../assets/images/grateful/suggestion.png" alt="" />
        <span>给点意见</span>
      </div>
    </div>
+    <!-- 意见 -->
+    <el-dialog :close-on-click-modal="false" :visible.sync="gratefulVisible" :append-to-body="true" @closed="closeDlg"
+      :width="dlgWidth" title="感谢您百忙之中给我们提交您宝贵的意见~">
+      <div class="dialogContent" :style="{ 'min-height': dlgHeight }">
+        <el-form :model="form">
+          <el-form-item label="类型">
+            <el-checkbox-group v-model="form.type">
+              <el-checkbox v-for="(item, index) in roleList" :label="item" :key="index"
+                @change="handleChecked(form.type)"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="内容">
+            <el-input type="textarea" placeholder="请输入内容......" v-model="form.desc" class="textarea"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <div style="display: flex; justify-content: center">
+              <el-button style="width: 100px;" @click="closeDlg">取消</el-button>
+              <el-button style="width: 100px;" type="primary">确认</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -126,6 +127,14 @@ export default {
  },
  data() {
    return {
+      roleList: ["功能", "界面设计", "其他"],
+      form: {
+        type: [],
+        desc: "",
+      },
+      dlgHeight: "400px",
+      dlgWidth: "688px",
+      gratefulVisible: false,
      showUClass: false,
      showLoginMedal: false, //是否显示登录勋章
      needLoginMedal: false, //是否需要显示纪念勋章
@@ -263,6 +272,15 @@ export default {
    },
  },
  methods: {
+    handleChecked(list) {
+      if (list.length > 1) {
+        let one = list.splice(1);
+        this.form.type = one;
+      }
+    },
+    closeDlg() {
+      this.gratefulVisible = false
+    },
    tylClick() {
      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
    },
@@ -736,19 +754,28 @@ export default {
 </script>

 <style scoped lang="scss">
+.textarea {
+  width: 600px;
+
+  ::v-deep .el-textarea__inner {
+    min-height: 300px !important;
+  }
+}
+
 .team {
  display: grid;
-  // grid-template-columns: 1.5fr 1fr 1fr;
  .teamImg {
    width: 749px;
    height: 478px;
  }
 }
+
 .float-tools {
  position: fixed;
  right: 0;
  bottom: 50%;
  z-index: 999;
+
  .content {
    width: 152px;
    height: 55px;
@@ -757,10 +784,12 @@ export default {
    background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
    border-radius: 100px 0px 0px 100px;
    padding: 20px;
+
    img {
      width: 20px;
      height: 20px;
    }
+
    span {
      margin-left: 10px;
      color: #fff;
@@ -805,33 +834,35 @@ export default {

 .course-banner {
  height: 520px;
+
  .swiper-button-prev {
    height: 38px;
    padding: 0 16px;
-    background: rgba($color: #000000, $alpha: 0.8)
-      url("../../assets/images/icon/ban-left.png") no-repeat;
+    background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
    background-size: 12px 18px;
    background-position: 16px 10px;
    bottom: 66px;
    border-radius: 19px 0 0 19px;
  }
+
  .swiper-button-next {
    height: 38px;
    // right: 52.65%;
    bottom: 66px;
    top: auto;
    padding: 0 16px;
-    background: rgba($color: #000000, $alpha: 0.1)
-      url("../../assets/images/icon/ban-right.png") no-repeat;
+    background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
    background-size: 12px 18px;
    background-position: 6px 10px;
    border-radius: 0 19px 19px 0;
  }
+
  .swiper-pagination-bullets {
    // background: #000;
    left: 60px;
    bottom: 66px;
  }
+
  ::v-deep .swiper-pagination {
    line-height: 25px;
    height: 32px;
@@ -841,6 +872,7 @@ export default {
    left: 45%;
    padding: 0 20px;
    border-radius: 19px;
+
    .swiper-pagination-bullet {
      position: relative;
      width: 25px;
@@ -851,6 +883,7 @@ export default {
      // background: rgba($color: #fff, $alpha: 0.5);
      border-radius: 2px;
    }
+
    .swiper-pagination-bullet::before {
      content: "";
      position: absolute;
@@ -859,6 +892,7 @@ export default {
      left: -2px;
      right: -2px;
    }
+
    .swiper-pagination-bullet-active {
      height: 5px;
      opacity: 1 !important;
@@ -868,6 +902,7 @@ export default {
      // background: rgba($color: #fff, $alpha: 0.8);
      border-radius: 2px;
    }
+
    .swiper-container {
      // background-color: rgba($color: #000000, $alpha: 0.2);
    }
@@ -900,6 +935,7 @@ export default {

  .course-image-box {
    position: relative;
+
    .course-type {
      position: absolute;
      top: 0px;
@@ -982,9 +1018,11 @@ export default {
    /*早期浏览器*/
    user-select: none;
  }
+
  .course-title-box {
    display: flex;
  }
+
  .course-author {
    display: flex;
    justify-content: space-between;
@@ -1085,6 +1123,7 @@ export default {

  .modules-list {
    margin-top: 30px;
+
    .case-card {
      margin-bottom: 15px;

@@ -1164,6 +1203,7 @@ export default {
        .article-card-box {
          .article-info-image-box {
            border-radius: 4px;
+
            .article-info {
              height: 400px;

@@ -1284,6 +1324,7 @@ export default {
        position: relative;
        background: rgba($color: #04243c, $alpha: 0.04);
        border-radius: 4px;
+
        .qa-views {
          position: absolute;
          color: #6e7b84;