<template>
  <common-header />
  <div class="tzkc_detail">
    <div class="top">
      <div class="top_nav">
        <div class="title">详情</div>
        <div class="sub_title">
          艺术广场 - 学生优秀作业 - <span class="t_detail">详情</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="ad">
        <img class="img" src="../../../../assets/ysgc/tzkc1.png" alt="" />
        <div class="notice">
          <h3 class="n_title">通知公告</h3>
          <div class="n_nav">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :hollow="activity.hollow"
                :timestamp="activity.timestamp"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
          <div class="cover"></div>
        </div>
      </div>
      <div class="con_class">
        <div class="classLeft">
          <div class="nav">
            <h3 class="navTitle">学校课程</h3>
            <div
              v-for="(kind, index) in classKind"
              :key="index"
              class="nav-list"
            >
              <span  class="kindName">{{ kind.name }}</span>
              <div v-show="i<8 && !is_more"
                :class="kindIndex == i ? 'kindsActive' : ''"
                @click="kindChange(i)"
                v-for="(k, i) in kind.kind"
                class="kinds"
                :key="i"
              >
                {{ k }}
              </div>
              <div v-show="is_more==true"
                :class="kindIndex == i ? 'kindsActive' : ''"
                @click="kindChange(i)"
                v-for="(k, i) in kind.kind"
                class="kinds"
                :key="i"
              >
                {{ k }}
              </div>
              <span @click="moreShow($event)" class="more" v-if="kind.kind.length>8">更多</span>
            </div>
          </div>
          <ul class="stuWorks">
            <li class="s-works" v-for="s in 5" :key="s">
              <!-- <router-link to="/ysgc_detail"> -->
                <div class="img">
                  <img
                    class="kc-back"
                    src="../../../../assets/ysgc/kc3.png"
                    alt=""
                  />
                  <!-- 悬浮遮罩层 -->
                  <div v-show="is_Sq == '1'" class="img_mask">
                    <img class="play" src="" alt="" />
                  </div>
                </div>

                <div class="kc-des">
                  <p class="kc-name">安徒生世界插画</p>
                  <div class="rate">
                    <img
                      v-for="star in 5"
                      :key="star"
                      src="../../../../assets/ysgc/star.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="zan">
                  <img src="../../../../assets/ysgc/zan.png" /> 10w+
                  <img src="../../../../assets/ysgc/xin.png" alt="" />14w+
                </div>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>
        <div class="classRight">
          <h3 class="n_title">优秀作品</h3>
          <ul v-for="s in 5" :key="s" class="goodWorks">
            <li class="s-works">
              <router-link to="/ysgc_detail">
                <div class="img">
                  <img
                    class="kc-back"
                    src="../../../../assets/ysgc/kc3.png"
                    alt=""
                  />
                  <!-- 悬浮遮罩层 -->
                  <div v-show="is_Sq == '1'" class="img_mask">
                    <img class="play" src="" alt="" />
                  </div>
                  <div class="zan">
                    <img src="../../../../assets/ysgc/zan.png" /> 10w+
                    <img src="../../../../assets/ysgc/xin.png" alt="" />14w+
                  </div>
                </div>
                <div class="kc-des">
                  <p class="kc-name">安徒生世界插画</p>
                  <div class="rate">
                    <img
                      v-for="star in 5"
                      :key="star"
                      src="../../../../assets/ysgc/star.png"
                      alt=""
                    />
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import CommonHeader from "@/components/CommonHeader/index.vue";;
import { MoreFilled } from "@element-plus/icons-vue";
import { ref } from "vue";
const name = ref("index");
const kmActiveName = ref("a");
const njActiveName = ref("a");
const searMsg = ref("");
let kindIndex = ref("0");
let is_more = ref(false);
const activities = [
  {
    content:
      "各省（区、市）、各高校要根据本地实际情况，按照构建社会主义和谐文化的要求，蹈…",
    timestamp: "一小时前",
    type: "primary",
    hollow: true,
  },
  {
    content:
      "就理论学习、文化艺术、体育竞赛、心理健康和网络文化等各方面广泛开展校园文化活动.形成浓郁的校园文化氛围…",
    timestamp: "一小时前",
    type: "primary",
    hollow: true,
  },
  {
    content:
      "邀请主办单位领导、著名大学校长、教育专家、高校学工处长、宣传部长、团学组织干部等，就校园文化的基本…",
    timestamp: "一小时前",
    type: "primary",
    hollow: true,
  },
  {
    content:
      "构建和谐校园过程中的独特作用、途径和方式以及有效载体等进行全方位探讨，为校园文化建设提供理论支…",
    timestamp: "一小时前",
    type: "primary",
    hollow: true,
  },
  {
    content:
      "构建和谐校园过程中的独特作用、途径和方式以及有效载体等进行全方位探讨，为校园文化建设提供理论支…",
    timestamp: "一小时前",
    type: "primary",
    hollow: true,
  },
];
let classKind = ref([
  {
    name: "年级",
    kind: [
      "全部",
      "幼儿园",
      "一年级",
      "二年级",
      "三年级",
      "四年级",
      "五年级",
      "六年级",
      "初一",
      "初二",
      "初三",
      "高一",
      "高二",
      "高三",
    ],
  },
  {
    name: "科目",
    kind: ["全部", "语文", "数学", "英语", "物理", "化学", "地理"],
  },
]);
function kindChange(i) {
  kindIndex.value = i;
}
function moreShow(e){
  is_more.value=!is_more.value;
  if(e.target.innerHTML=='更多'){
    e.target.innerHTML='收起';
  }else{
    e.target.innerHTML='更多';
  }
}
</script>

<style lang="scss" scoped>
.tzkc_detail {
  width: 100%;
  margin: 0 auto;
  background-color: #fcfeff;
  background-image: url("../../../../assets/ysgc/back.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(17, 46, 74, 0.1);
    .top_nav {
      width: 1650px;
      min-width: 1280px;
      margin: 0 auto;
      display: flex;
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #050026;
        margin-right: 45px;
      }
      .sub_title {
        font-size: 14px;
        color: #949494;
        .t_detail {
          color: #000;
        }
      }
    }
  }
  .content {
    width: 1650px;
    min-width: 1280px;
    margin: 24px auto;
    .ad {
      width: 100%;
      height: 451px;
      display: flex;
      .img {
        width: 1062px;
        margin-right: 40px;
      }
      .notice {
        width: 320px;
        height: 451px;
        background: #ffffff;
        border-radius: 12px;
        padding: 33px 24px;
        box-sizing: border-box;
        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
        overflow-y: scroll;
        overflow-x: hidden;
        position: relative;
        .n_title {
          font-size: 18px;
          font-family: PingFang, PingFang-Heavy;
          font-weight: 800;
          color: #222222;
          margin: 13px 0 33px 0;
        }
        .cover {
          position: absolute;
          width: 100%;
          height: 80px;
          background-color: #fff;
          bottom: 0;
          left: 0;
          opacity: 0.4;
        }
      }
      .notice::-webkit-scrollbar {
        width: 2px;
      }
      .notice::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #00a3ff;
      }
    }
    .con_class {
      width: 100%;
      display: flex;
      margin-top: 10px;
      .classLeft,
      .classRight {
        .s-works {
          position: relative;
          width: 268px;
          height: 234px;
          margin-top: 30px;
          border-radius: 12px;
          margin-right: 17px;
          box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
          .img {
            position: relative;
            width: 100%;
            .img_mask {
              position: absolute;
              top: 0;
              border-radius: 12px 12px 0 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.59);
            }
          }
          .kc-des {
            padding: 11px 6px;
            box-sizing: border-box;
            .kc-name {
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #000000;
              line-height: 22px;
            }
            .rate {
              display: flex;
              margin: 11px 0;
              img {
                width: 15px;
                margin-right: 6px;
              }
            }
          }
          .zan {
            position: absolute;
            top: 0;
            right: 0;
            width: 173px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            color: #fff;
            display: flex;
            padding-left: 20px;
            background: rgba(0, 0, 0, 0.59);
            border-radius: 0px 12px 0px 12px;
            img {
              display: inline-block;
              width: 17px;
              height: 16px;
              margin: 8px 5px 0 10px;
            }
          }
        }
      }
      .classLeft {
        width: 920px;
        .nav {
          .navTitle {
            font-size: 18px;
            font-family: PingFang, PingFang-Heavy;
            font-weight: 800;
            color: #222222;
            margin: 18px 14px;
          }
          .nav-list {
            width: 100%;
            display: flex;
            min-width: 0;
            flex-wrap: wrap;
            margin-left: 20px;
            border-bottom: 1px solid #E4E6E8;
            .kindName {
              display: inline-block;
              width: 60px;
              height: 100%;
              font-size: 16px;
              color: #000;
              font-weight: 600;
              margin-top: 12px;
            }
            .kinds {
              margin-right: 34px;
              margin-top: 10px;
              font-size: 16px;
              text-align: center;
              height: 30px;
              line-height: 30px;
              white-space: nowrap;
            }
            .kindsActive {
              background-color: #e8f4f8;
              border-radius: 6px;
              color: #2e99cf;
            }
            .more{
              line-height: 50px;
              color: #00a3ff;
            }
          }
        }
        .stuWorks {
          display: flex;
          flex-wrap: wrap;
          padding-left: 18px;
        }
      }
      .classRight {
        width: 524px;
        height: 675px;
        margin-top: 20px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
        padding: 20px 10px;
        overflow-y: scroll;

        .n_title {
          font-size: 18px;
          font-family: PingFang, PingFang-Heavy;
          font-weight: 800;
          color: #222222;
          margin: 13px 0 33px 0;
        }
        .goodWorks {
          width: 100%;
          .s-works {
            width: 100%;
            height: 155px;
            box-shadow: unset;
            a {
              display: flex;
              .img {
                width: 264px;
                position: relative;
                border-radius: 10px;
                overflow: hidden;
                .kc-name{
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
      .classRight::-webkit-scrollbar {
        width: 2px;
      }
      .classRight::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #00a3ff;
      }
    }
  }
}
::v-deep .el-timeline {
  .el-timeline-item__content {
    display: -webkit-box;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .el-timeline-item__content:hover {
    color: #00a3ff;
  }
  .el-timeline-item__timestamp {
    height: 20px;
    line-height: 10px;
    font-size: 10px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #a3a3a3;
  }
}
</style>

