<template>
  <div class="content">
    <div class="nav" style="position: relative">
      <img
        style="width: 7.5*13.3vw; height: 3.4*13.3vw"
        src="@/assets/images/bg.png"
        alt=""
      />
      <van-nav-bar title="云尚活动" left-arrow @click-left="onClickLeft" />
    </div>
    <ul class="hd-type-list">
      <li
        v-for="item in hd_type"
        :key="item.value"
        :class="item.id == dialogForm.btrqlx.id ? 'selected' : ''"
        @click="chooseType(item)"
      >
        {{ item.label }}
      </li>
    </ul>
    <div class="survey-questionnaire">
      <div>
        <div>
          <img src="@/assets/images/wjdc.png" />
          <span>共7题</span>
        </div>
        <p>教学满意度评价</p>
        <div class="detail">查看</div>
      </div>
      <div>
        <div>
          <img src="@/assets/images/wjdc.png" />
          <span>共7题</span>
        </div>
        <p>教学满意度评价</p>
        <div class="detail">查看</div>
      </div>
      <div>
        <div>
          <img src="@/assets/images/wjdc.png" />
          <span>共7题</span>
        </div>
        <p>教学满意度评价</p>
        <div class="detail">查看</div>
      </div>
      <div>
        <div>
          <img src="@/assets/images/wjdc.png" />
          <span>共7题</span>
        </div>
        <p>教学满意度评价</p>
        <div class="detail">查看</div>
      </div>
      <div>
        <div>
          <img src="@/assets/images/wjdc.png" />
          <span>共7题</span>
        </div>
        <p>教学满意度评价</p>
        <div class="detail">查看</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      dialogForm: {
        btrqlx: {
          id: "1",
          label: "工作日",
        },
      },
      hd_type: [
        {
          id: "1",
          label: "问卷调查",
        },
        {
          id: "2",
          label: "图片收集",
        },
        {
          id: "3",
          label: "视频展播",
        },
      ],
    };
  },
  methods: {
    chooseTimeType(item) {
      this.dialogForm = {
        btrqlx: {
          id: "1",
          label: "问卷调查",
        },
        btgzlx: "",
        zxbtsj: "",
        btsjje: "",
      };
      this.dialogForm.btrqlx.id = item.id;
      this.dialogForm.btrqlx.label = item.label;
    },
  },
};
</script>

<style  lang="scss" scoped>
.content {
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  height: 100vh;
}

::v-deep .van-nav-bar {
  width: 100%;
  height: 1*13.3vw;
  line-height: 1*13.3vw;
  position: absolute;
  top: 0*13.3vw;
  left: 0*13.3vw;
  background-color: transparent;

  .van-nav-bar__title {
    color: #fff !important;
    font-size: 0.32*13.3vw;
    font-weight: 350;
  }
  .van-nav-bar__text {
    color: #fff !important;
    font-size: 0.32*13.3vw;
    font-weight: 350;
  }
  .van-hairline__bottom {
    border-bottom-width: none !important;
    border-color: none;
  }
}
.hd-type-list {
  width: 100%;
  margin-bottom: 0.3*13.3vw;
  position: absolute;
  top: 1*13.3vw;
  left: 0;
  display: flex;
  li {
    position: relative;
    width: 1.8*13.3vw;
    height: 0.6*13.3vw;
    font-size: 0.28*13.3vw;
    line-height: 0.6*13.3vw;
    text-align: center;
    border: 0.01*13.3vw solid #ffffff;
    border-radius: 0.06*13.3vw;
    font-family: PingFang-SC-Regular;
    color: #fff;
    margin-left: 0.53*13.3vw;
    &.selected {
      color: #265cd4;
      background: #ffffff;
    }
  }
}
.survey-questionnaire {
  width: 7.1*13.3vw;
  height: 0.8*13.3vw;
  margin: 0 0.2*13.3vw;
  position: absolute;
  top: 2.2*13.3vw;
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 3.5*13.3vw;
    height: 3.3*13.3vw;
    background: #fff;
    box-shadow: 0*13.3vw 0.02*13.3vw 0.1*13.3vw 0*13.3vw rgba(20, 7, 0, 0.1);
    margin-bottom: 0.11*13.3vw;
    img {
      width: 0.8*13.3vw;
      height: 0.8*13.3vw;
      margin-left: 0.31*13.3vw;
    }
    > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.25*13.3vw;
    }
    span {
      height: 0.8*13.3vw;
      font-size: 0.24*13.3vw;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #a6a6a6;
      margin-right: 0.23*13.3vw;
      line-height: 0.8*13.3vw;
    }
    p {
      font-size: 0.32*13.3vw;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #020202;
      margin-left: 0.31*13.3vw;
    }
  }
  .detail {
    width: 1.6*13.3vw;
    height: 0.48*13.3vw;
    line-height: 0.48*13.3vw;
    margin: 0 0.95*13.3vw;
    background-color: #3b4df5;
    border-radius: 0.24*13.3vw;
    font-size: 0.22*13.3vw;
    font-family: PingFang-SC-Regular;
    text-align: center;
    padding: 0 0.56*13.3vw;
    color: #ffffff;
    margin-top: 0.89*13.3vw;
  }
  div:nth-child(odd) {
    margin-right: 0.1*13.3vw;
  }
}
</style>





