HealthStudentWeb/src/views/insight/index.vue

<!--  -->
<template>
  <div class="pageContent insight">
    <div class="periodNav">
      <div class="periodItem week" :class="{ active: active == 0 }" @click="active = 0">周</div>
      <div class="periodItem month" :class="{ active: active == 1 }" @click="active = 1">月</div>
    </div>
    <!-- 带有前后箭头的切换器 -->
    <div class="periodSwitch">
      <div class="arrow arrowLeft" @click="active = active == 0 ? 1 : 0">
        <van-icon name="arrow-left"></van-icon>
      </div>
      <div class="timearea">kdfdfkjhsojldkfho</div>
      <div class="arrow arrowRight" @click="active = active == 1 ? 0 : 1">
        <van-icon name="arrow"></van-icon>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="scss">
@import './include.scss';

.insight {
  padding-top: 20px;

  .periodNav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .periodItem {
      width: 48%;
      font-size: 28px;
      color: black;
      text-align: center;
      padding: 12px;
      border-radius: 30px;
      background: #E6E6E6;
      &.active {
        color: white;
        background: #179B3B;
      }
    }
  }
  .periodSwitch {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 40px 10px;

    .timearea {
      font-size: 28px;
      justify-self: center;
    }
    .arrow {
      font-size: 45px;
    }
  }
}
</style>