<template>
  <common-header />
  <div class="content">
    <div class="main">
      <div class="title">徽章</div>
      <div class="prompt">
        徽章用来展示老师的荣誉，根据不同的情况触发获得徽章，如：观看时长满100分钟获得一个徽章，上传视频10个，获得一个徽章
      </div>
      <div class="sfzs">
        <p>是否展示在个人首页</p>
        <div>
          <el-radio v-model="radio" label="1">展示</el-radio>
          <el-radio v-model="radio" label="2">不展示</el-radio>
        </div>
      </div>
      <div class="hz-list">
        <div>
          <img src="@/assets/images/hz/hz1.png" alt="" />
          <div class="hz-name">徽章一</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz2.png" alt="" />
          <div class="hz-name">徽章二</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz3.png" alt="" />
          <div class="hz-name">徽章三</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz4.png" alt="" />
          <div class="hz-name">徽章四</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz5.png" alt="" />
          <div class="hz-name">徽章五</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz6.png" alt="" />
          <div class="hz-name">徽章六</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz7.png" alt="" />
          <div class="hz-name">徽章七</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hz8.png" alt="" />
          <div class="hz-name">徽章八</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz1.png" alt="" />
          <div class="hz-name">徽章一</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz2.png" alt="" />
          <div class="hz-name">徽章二</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz3.png" alt="" />
          <div class="hz-name">徽章三</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz4.png" alt="" />
          <div class="hz-name">徽章四</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz5.png" alt="" />
          <div class="hz-name">徽章五</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz6.png" alt="" />
          <div class="hz-name">徽章六</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz7.png" alt="" />
          <div class="hz-name">徽章七</div>
        </div>
        <div>
          <img src="@/assets/images/hz/hhz8.png" alt="" />
          <div class="hz-name">徽章八</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hz_list } from "./api";

import CommonHeader from "@/components/CommonHeader/index.vue";
export default {
  name: "index",
  components: {
    CommonHeader,
  },
  data() {
    return {
      radio: "1",
      listData: [],
    };
  },
  methods: {
    getListData() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };

      hz_list(data).then((res) => {
        this.listData = res.data.page_data;
      });
    },
  },
  mounted() {
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-width: 1400px;
  margin: 0 auto;
  background-image: url("@/assets/img/zhjy/xq_bg.png");
  background-repeat: no-repeat;
}
.main {
  width: 1400px;
  margin: 0 auto;
  background: #fcfeff;
  padding: 40px;
  margin-top: 15px;
  .title {
    width: 36px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #050026;
    line-height: 25px;
  }
  .prompt {
    width: 1220px;
    height: 80px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
    margin: 30px;
    padding-left: 35px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-decoration: underline;
    text-align: left;
    color: #00a3ff;
    line-height: 80px;
  }
}
.sfzs {
  width: 1400px;
  margin: 30px;
  p {
    width: 126px;
    height: 18px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #949494;
    line-height: 18px;
  }
}
.hz-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
  width: 1050px;
  //   border: 1px solid red;
  & > div {
    margin: 0px 25px 50px 0px;

    img {
      width: 98px;
      height: 98x;
      margin: 0 auto;
    }
    .hz-name {
      width: 90px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #000000;
      line-height: 22px;
    }
  }
}
</style>

