saas_pc/src/pages/goodsTopic/components/catalogue.vue

<template>
  <!-- <div> -->
  <div class="container">
    <div class="con_header">
      <div
        v-for="(item, index) in subList"
        :key="index"
        class="con_item"
        :class="{ nactive: subIndex == index }"
        @click="toChangeCou(item, index)"
      >
        {{ item.subjectName }}
      </div>
    </div>
    <div class="course_info">
      <div
        class="video_box"
        :style="{
          backgroundImage: `url(${$tools.splitImgHost(
            goodsDetail.coverUrl,
            false
          )})`,
        }"
      >
        <div v-show="vid" id="player" class="video"></div>
        <div v-show="vidzb" id="playerzb" class="video"></div>
      </div>
      <div class="right-box">
        <div class="right-box__header">
          <div class="tabs">
            <el-tabs v-model="courseTabIndex">
              <el-tab-pane
                :name="tab.name"
                v-for="(tab, index) in menuTab"
                :key="index"
              >
                <div slot="label">
                  <span class="label">{{ tab.label }}</span>
                </div>
                <!-- 章节目录 -->
                <template v-if="tab.name == '1'">
                  <div class="mulu_body">
                    <div class="left-box">
                      <div
                        v-for="(courseItem, tindex) in goodsTeacher"
                        :key="tindex + 'one'"
                      >
                        <div class="left-box__body">
                          <template
                            v-for="(course, cindex) in courseItem.courseList"
                          >
                            <!-- v-for="(course, cindex) in s_courseList" -->
                            <div v-if="course.show == 1" :key="cindex + 'two'">
                              <div
                                class="course-list-item"
                                v-show="
                                  course.subjectId === newActiveSubjectId ||
                                  !newActiveSubjectId
                                "
                              >
                                <div
                                  class="course-list-item_title"
                                  @click="openCourse(course)"
                                >
                                  <i
                                    :class="{
                                      'el-icon-caret-right': !course.showList,
                                      'el-icon-caret-bottom': course.showList,
                                    }"
                                  ></i>
                                  {{ course.courseName }}
                                </div>
                                <div
                                  v-if="
                                    courseItem.teaList &&
                                    courseItem.teaList.length > 0
                                  "
                                  class="teacher_names"
                                >
                                  <div
                                    v-for="(tea, index) in courseItem.teaList"
                                    :key="index + 'three'"
                                    class="names"
                                    :class="{
                                      nactive: States[tindex] == index,
                                    }"
                                    @click="switchTeacher(tea, index, tindex)"
                                  >
                                    {{ tea.aliasName }}
                                  </div>
                                </div>
                                <template v-if="course.showList">
                                  <div
                                    class="item"
                                    v-for="(item, index) in course.list"
                                    :key="index"
                                  >
                                    <template v-if="item.type == 1">
                                      <div
                                        class="item__title"
                                        @click="openModule(item)"
                                      >
                                        <i
                                          :class="{
                                            'el-icon-caret-right':
                                              !item.showList,
                                            'el-icon-caret-bottom':
                                              item.showList,
                                          }"
                                        ></i>
                                        {{ item.name }}
                                      </div>
                                      <div class="item__content">
                                        <div
                                          class="bank-chapter"
                                          v-if="item.showList"
                                        >
                                          <div
                                            class="bank-chapter__item"
                                            v-for="(
                                              chapter, chapterIndex
                                            ) in item.list"
                                            :key="chapterIndex"
                                          >
                                            <div
                                              class="bank-chapter__item__text"
                                              @click="openChapter(chapter)"
                                            >
                                              <i
                                                :class="{
                                                  'el-icon-caret-right':
                                                    !chapter.showList,
                                                  'el-icon-caret-bottom':
                                                    chapter.showList,
                                                }"
                                              ></i
                                              >{{ chapter.name }}
                                            </div>

                                            <div
                                              class="bank-section"
                                              v-if="chapter.showList"
                                            >
                                              <div
                                                class="bank-section__item"
                                                v-for="(
                                                  section, sectionIndex
                                                ) in chapter.list"
                                                :key="sectionIndex"
                                              >
                                                <div
                                                  class="
                                                    bank-section__item__text
                                                  "
                                                >
                                                  {{ section.name }}
                                                </div>
                                                <div
                                                  v-if="section.tryListen"
                                                  @click="
                                                    toDo(section, item.courseId)
                                                  "
                                                  class="btn"
                                                >
                                                  试看
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </template>

                                    <template v-if="item.type == 2">
                                      <div class="item__content">
                                        <div class="bank-chapter">
                                          <div class="bank-chapter__item">
                                            <div
                                              class="bank-chapter__item__text"
                                              @click="openChapter(item)"
                                            >
                                              <i
                                                :class="{
                                                  'el-icon-caret-right':
                                                    !item.showList,
                                                  'el-icon-caret-bottom':
                                                    item.showList,
                                                }"
                                              ></i
                                              >{{ item.name }}
                                            </div>

                                            <div
                                              class="bank-section"
                                              v-if="item.showList"
                                            >
                                              <div
                                                class="bank-section__item"
                                                v-for="(
                                                  section, sectionIndex
                                                ) in item.list"
                                                :key="sectionIndex"
                                              >
                                                <div
                                                  class="
                                                    bank-section__item__text
                                                  "
                                                >
                                                  {{ section.name }}
                                                </div>
                                                <div
                                                  v-if="section.tryListen"
                                                  @click="
                                                    toDo(section, item.courseId)
                                                  "
                                                  class="btn"
                                                >
                                                  试看
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </template>

                                    <template v-if="item.type == 3">
                                      <div class="item__content">
                                        <div class="bank-section">
                                          <div class="bank-section__item">
                                            <div
                                              class="bank-section__item__text"
                                            >
                                              {{ item.name }}
                                            </div>
                                            <div
                                              v-if="item.tryListen"
                                              @click="toDo(item, item.courseId)"
                                              class="btn"
                                            >
                                              试看
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                  </div>
                                </template>
                              </div>
                            </div>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="down_bottons">
                    <!-- <div class="asks">
                                            <div class="ask_manage" @click="toAskManage()">咨询管理</div>
                                            <div class="apply_ask">
                                                <div class="ask_titles">报名咨询</div>
                                                <div class="ask_time">{{ header.serviceTel.time }}</div>
                                                <div class="phones" v-for="(item, index) in getTel(header.serviceTel.tel)" :key="index">
                                                    <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
                                                    <span>{{ item }}</span>
                                                </div>
                                            </div>
                                        </div> -->
                    <el-popover placement="top" width="202" trigger="hover">
                      <div class="apply_ask">
                        <div class="ask_titles">报名咨询</div>
                        <div class="ask_time">{{ header.serviceTel.time }}</div>
                        <div
                          class="phones"
                          v-for="(item, index) in getTel(header.serviceTel.tel)"
                          :key="index"
                        >
                          <img
                            class="icon_phone"
                            src="@/assets/topic/ask_phone.png"
                            alt=""
                          />
                          <span>{{ item }}</span>
                        </div>
                      </div>
                      <div slot="reference">
                        <div class="ask_manage" @click="toAskManage()">
                          咨询管理
                        </div>
                      </div>
                    </el-popover>
                    <div class="ask_buy" @click="togoBuy()">立即购买</div>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <buy-dialog
      :buyModal.sync="buyModal"
      :topicId="topicId"
      :subjectType="1"
      :type="3"
    ></buy-dialog>
  </div>

  <!-- </div> -->
</template>

<script>
import { mapGetters } from "vuex";
import buyDialog from "./buyDialog.vue";
export default {
  name: "boxs",
  components: { buyDialog },
  props: {
    goodsId: {
      type: [String, Number],
      default: "",
    },
    topicId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      vid: "",
      vidzb: "",
      player: "",
      playerzb: "",
      activeId: "", //当前选中ID
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      uidzb: "egsxlptzdq",
      menuTab: [
        {
          name: "1",
          label: "章节目录",
        },
      ],
      courseTabIndex: "1",
      param: {
        pageNum: 1,
        pageSize: 100,
        total: 0,
      },
      needOpen: true, //是否需要一进来展开第一章节
      menuIndex: [], //需要展开的章节索引值
      courseList: [],
      s_courseList: [],
      goodsAuditionConfigIdList: [],
      listenConfigList: [],
      courserIndex: 0,
      goodsDetail: {},
      goodsExamConfig: [],
      subList: [],
      subIndex: 0,
      playCourseId: 0, // 播放课程id
      showAsk: false,
      buyModal: false,
      goodsTeacher: [],
      teaIndex: 0,
      States: { 0: 0 },
      newActiveSubjectId: "",
    };
  },
  watch: {
    async goodsId(newV, oldV) {
      if (newV) {
        await this.getGoodsDetail();
        this.goodsCourseList();
      }
    },
  },
  computed: {
    ...mapGetters(["header"]),
  },
  methods: {
    getTel(tel) {
      return tel ? tel.split(";") : [];
    },
    toAskManage() {
      this.showAsk = !this.showAsk;
    },
    toChangeCou(item, index) {
      this.newActiveSubjectId = item.subjectId;
      this.subIndex = index;
      // this.s_courseList = this.courseList.filter(e => e.subjectId == item.subjectId)
    },
    togoBuy() {
      this.buyModal = true;
    },
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        if (res.data.pcDetailHtml) {
          res.data.pcDetailHtml =
            res.data.pcDetailHtml &&
            res.data.pcDetailHtml.replace(
              /<img/gi,
              '<img style="max-width:100%;height:100%;display:block;margin:0px auto;"'
            );
        }
        this.goodsDetail = res.data;
        this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig);

        if (this.goodsDetail.goodsAuditionConfig) {
          this.listenConfigList = JSON.parse(
            this.goodsDetail.goodsAuditionConfig
          );
          for (var itemChild of this.listenConfigList) {
            this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
          }
          console.log(
            this.goodsAuditionConfigIdList,
            "this.goodsAuditionConfigIdList"
          );
        }
      });
    },
    //切换老师
    switchTeacher(data, index, tindex) {
      console.log(data, "data", index, tindex);
      this.States[tindex] = index;
      this.teaIndex = index;
      this.goodsTeacher.forEach((item, index) => {
        if (item.teaList && item.teaList.length > 0) {
          let list = item.teaList.filter((x) => x.courseId == data.courseId);
          if (list && list.length > 0) {
            item.courseList.forEach((course, courseIndex) => {
              if (course.courseId == data.courseId) {
                this.$set(
                  this.goodsTeacher[index].courseList[courseIndex],
                  "show",
                  1
                );
              } else {
                this.$set(
                  this.goodsTeacher[index].courseList[courseIndex],
                  "show",
                  0
                );
              }
            });
          }
        }
      });
    },
    /**
     * 获取课程章节列表，/app/common/goods/course/list/' + data,
     */
    goodsCourseList() {
      this.$request.goodsCourseList(this.goodsId).then(async (res) => {
        if (res.code == 200) {
          res.rows.forEach((item) => {
            item.showList = false;
            item.list = [];
          });
          // 获取双师制
          this.getCourseTeacher(res.rows);
          this.courseList = res.rows || [];
          // 筛选科目名称
          let ids = [];
          const newArr = [];
          this.courseList.forEach((item) => {
            if (ids.indexOf(item.subjectId) == -1) {
              ids.push(item.subjectId);
              newArr.push(item);
            }
          });
          this.subList = [...newArr];
          this.subList = this.subList.filter((item) => item.subjectName);
          console.log("this.subList", this.subList);
          this.subList.length &&
            (this.newActiveSubjectId = this.subList[0].subjectId);

          if (this.needOpen) {
            for (let i = 0; i < this.courseList.length; i++) {
              let menuIndexOrFalse = await this.getCourseMenus(
                this.courseList[i]
              );
              // console.log('111menuIndexOrFalse', menuIndexOrFalse)
              if (menuIndexOrFalse !== false) {
                this.menuIndex = [i, menuIndexOrFalse];
                this.openCourse(this.courseList[i]);
                break;
              }
            }
            this.s_courseList = this.courseList.filter(
              (item) => item.subjectId == this.subList[0].subjectId
            );
          }
          console.log("s_courseList", this.s_courseList);
        }
      });
    },
    getCourseTeacher(rows) {
      //获取商品双师资模板
      this.$request
        .getGoodsCourseTeacher({
          goodsId: this.goodsId,
        })
        .then((res1) => {
          console.log(res1, "res1");
          if (res1.data && res1.data.length > 0) {
            //课程老师模板
            let teacherTel = res1.data;
            //商品课程
            let courses = rows;
            teacherTel.forEach((tea) => {
              let dataList = [];
              let teacherList = [];
              courses.forEach((item) => {
                let data = tea.courseList.filter(
                  (x) => x.courseId == item.courseId
                );
                if (data && data.length > 0) {
                  dataList.push(item);
                  teacherList = tea.courseList;
                }
              });
              let result = {
                teaList: teacherList,
                courseList: dataList,
              };
              this.goodsTeacher.push(result);
            });
            if (this.goodsTeacher && this.goodsTeacher.length > 0) {
              let courseIds = [];
              this.goodsTeacher.forEach((item) => {
                item.courseList.forEach((course) => {
                  courseIds.push(course.courseId);
                });
              });
              if (courseIds.length > 0) {
                courses.forEach((item) => {
                  if (!courseIds.includes(item.courseId)) {
                    let data = {
                      teaList: [],
                      courseList: [],
                    };
                    data.courseList.push(item);
                    this.goodsTeacher.push(data);
                  }
                });
              }
              this.goodsTeacher.forEach((item) => {
                if (item.courseList && item.courseList.length > 0) {
                  item.courseList[0].show = 1;
                }
              });
            }
          } else {
            //没有双师资模板
            rows.forEach((item) => {
              item.show = 1;
              let data = {
                teaList: [],
                courseList: [],
              };
              data.courseList.push(item);
              this.goodsTeacher.push(data);
            });
          }
        });
      console.log(this.goodsTeacher, "this.goodsTeacher");
    },
    // 获取课程目录，/app/common/course/menuList
    getCourseMenus(item) {
      return new Promise((resolve) => {
        this.$request.menuList({ courseId: item.courseId }).then((res) => {
          if (res.code == 200) {
            for (let i = 0; i < res.rows.length; i++) {
              // 1模块 2章 3节
              if (res.rows[i].type == 1 || res.rows[i].type == 2) {
                resolve(i);
                break;
              }
            }
          }
        });
      });
    },
    /**
     * 点击课程大目录
     */
    openCourse(course) {
      course.showList = !course.showList;

      if (!course.list.length) {
        this.getMenuList(course);
      }
    },
    /**
     * 获取模块列表
     */
    getMenuList(item) {
      this.$request.menuList({ courseId: item.courseId }).then((res) => {
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i];
          item.showList = false;
          item.id = item.menuId;
          item.name = item.menuName;

          if (item.type == 3) {
            //判断是否试听
            item.tryListen = false;
            if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
              item.tryListen = true;
            }
          } else {
            item.list = [];
          }
        }
        item.list = res.rows;

        if (this.needOpen) {
          if (item.list[this.menuIndex[1]].type == 1) {
            this.openModule(item.list[this.menuIndex[1]]);
          } else if (item.list[this.menuIndex[1]].type == 2) {
            this.needOpen = false;
            this.openChapter(item.list[this.menuIndex[1]]);
          }
        }
      });
    },
    /**
     * 展开模块卷
     */
    openModule(Module) {
      console.log("点击模块卷");
      this.$set(Module, "showList", !Module.showList);
      if (!Module.list.length) {
        this.getChapterList(Module);
      }
    },
    getChapterList(Module) {
      this.$request.chapterList(Module.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.chapterId;
          item.showList = false;
          item.list = [];
          item.menuType = 2;
        }
        Module.list = res.data;

        if (this.needOpen) {
          this.needOpen = false;
          this.openChapter(Module.list[0]);
        }
      });
    },
    /**
     * 展开章卷
     */
    openChapter(chapter) {
      console.log("点开章卷");
      this.$set(chapter, "showList", !chapter.showList);

      if (!chapter.list.length) {
        this.getSectionList(chapter);
      }
    },
    getSectionList(chapter) {
      this.$request.sectionList(chapter.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.sectionId;
          item.menuType = 3;
          //判断是否试听
          item.tryListen = false;
          if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
            item.tryListen = true;
          }
        }
        chapter.list = res.data;
      });
    },
    /**
     * 试看
     */
    toDo(section, courseId) {
      console.log("section, courseId", section, courseId);
      this.playCourseId = courseId;
      console.log(this.playCourseId, "playCourseId");
      this.initVideo(section);
    },
    async initVideo(option) {
      await this.clears();
      console.log("option:", option);
      this.sectionItem = option;
      if (option.sectionType === 2) {
        this.vidzb = option.liveUrl;
        this.loadPlayerScriptzb(this.loadPlayerzb);
      } else {
        this.vid = option.recordingUrl;
        this.loadPlayerScript(this.loadPlayer);
      }
    },
    /**
     * @param {String} 关闭视频窗口-销毁实例
     */
    clears() {
      return new Promise((resolve, reject) => {
        this.vid = "";
        this.vidzb = "";
        if (this.player) {
          this.player.destroy();
        }
        if (this.playerzb) {
          this.playerzb.destroy();
        }
        resolve();
      });
    },
    loadPlayerzb() {
      const polyvLivePlayer = window.polyvLivePlayer;
      this.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        // width: 700,
        height: 484,
        uid: this.uidzb,
        vid: this.vidzb,
      });
    },
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      let auditionMinute = this.listenConfigList.find((item) => {
        if (
          item.sectionId ==
            (this.sectionItem.sectionId || this.sectionItem.menuId) &&
          item.courseId == this.playCourseId
        ) {
          return true;
        }
      }).auditionMinute;

      this.$request.obtainpolyvvideosign(this.vid).then((res) => {
        this.player = polyvPlayer({
          wrap: "#player",
          // width: 700,
          height: 484,
          vid: this.vid,
          start: 0,
          end: auditionMinute,
          teaser_show: 0,
          ts: res.data.ts,
          sign: res.data.sign,
          playsafe: function (vid, next) {
            self.$request.obtainpolyvvideopcsign(vid).then((res) => {
              next(res.data);
            });
          },
        });

        this.player.on("s2j_onPlayOver", () => {
          this.$confirm("试看结束，购买课程可学习全部", "提示", {
            closeOnClickModal: false,
            showCancelButton: false,
            closeOnPressEscape: false,
            distinguishCancelAndClose: false,
            showClose: false,
          }).then((res) => {
            // this.videoModalShow = false;
          });
        });
      });
    },
    /**
     * @param {String} 直播预览
     */
    loadPlayerScriptzb(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.playerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}
.con_header {
  width: 1113px;
  height: 44px;
  background: #3f4449;
  display: flex;
  @media screen and (max-width: 1370px) {
    width: 900px;
  }
  .con_item {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    &.nactive {
      background: #3f8dfd;
    }
  }
}
.course_info {
  display: flex;
  align-items: center;
  justify-items: center;
}
.video_box {
  width: 709px;
  height: 484px;
  background-size: 100% 100%;
  @media screen and (max-width: 1370px) {
    width: 497px;
  }
  .video {
    width: 100%;
    height: 100%;
  }
}
.right-box {
  width: 404px;
  height: 484px;
  background: #3f4449;
  border-radius: 0px;
  &__header {
    .tabs {
      /deep/.el-tabs__nav-wrap::after {
        background-color: #999;
      }

      /deep/ .el-tabs__header {
        margin: 0;
      }

      .label {
        color: #fff;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
      }
    }
  }
}
.mulu_body {
  width: 404px;
  height: 401px;
  background: #3f4449;
  border-radius: 0px;
  .left-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 10px;
    .course-list-item {
      padding: 0px 16px 10px;
      border-radius: 10px;

      .item {
        overflow: hidden;
        margin-top: 12px;
        &__title {
          padding: 10px 0;
          cursor: pointer;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #fff;
        }

        &__content {
          .bank-chapter {
            margin-left: 4px;

            &__item {
              padding-top: 10px;
              // padding-bottom: 10px;
              font-size: 14px;
              color: #fff;
              &__text {
                cursor: pointer;
                flex: 1;
              }
            }
          }

          .bank-section {
            margin-left: 40px;

            &__item {
              padding-top: 10px;
              // padding-bottom: 10px;
              font-size: 14px;
              display: flex;
              color: #3f8dfd;
              &__text {
                flex: 1;
              }

              .btn {
                margin-right: 20px;
                width: 40px;
                height: 24px;
                border: 1px solid #ff3b30;
                border-radius: 8px;
                line-height: 22px;
                color: #ff3b30;
                text-align: center;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .course-list-item_title {
      font-size: 16px;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
    }
  }
}
.down_bottons {
  width: 404px;
  height: 44px;
  display: flex;
  align-items: center;
}
.ask_manage,
.ask_buy {
  width: 202px;
  height: 44px;
  background: #1b2632;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}
.ask_buy {
  background: #3f8dfd;
}

.apply_ask {
  display: block;
  width: 173px;
  // height: 196px;
  background: #ffffff;
  border-radius: 2px;
  padding: 20px;
  .ask_titles {
    font-size: 14px;
    font-weight: bold;
    color: #222222;
  }
  .ask_time {
    font-size: 12px;
    color: #999999;
    margin: 3px 0px 21px 0px;
  }
  .phones {
    margin-bottom: 21px;
    display: flex;
    align-items: center;
    .icon_phone {
      width: 16px;
      height: 16px;
      margin-right: 12px;
    }
    > span {
      font-size: 14px;
      color: #222222;
    }
  }
}
// 老师名称样式
.teacher_names {
  display: flex;
  margin-left: 20px;
  margin-top: 10px;
  .names {
    font-size: 13px;
    color: #383838;
    margin-right: 8px;
    cursor: pointer;
    background: #818181;
    border-radius: 4px;
    padding: 3px 6px;
    &.nactive {
      background: #cccccc;
    }
  }
}
</style>