dvcp_v2_wxcp_app/src/sass/AppAskForm/Statistical.vue

<template>
  <div class="statistical">
    <div class="statistical-tab">
      <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">问卷统计</span>
      <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">人员统计</span>
    </div>
    <div class="statistical-content">
      <div class="list-wrapper" v-show="currIndex === 0">
        <div class="top">
          <span>共</span>
          <i>9</i>
          <span>题，其中多选</span>
          <i>9</i>
          <span>题，其中多选</span>
          <i>9</i>
          <span>道</span>
        </div>
        <div class="topic-list">
          <div class="topic-item" v-for="(item, i) in 10" :key="i">
            <h2>一、您是否了解社会治理？(单选）</h2>
            <div class="topic-item__wrapper">
              <div class="option-item" v-for="(item, index) in 4" :key="index">
                <div class="option-item__left">
                  <h2>A：</h2>
                  <span>每周监测</span>
                </div>
                <div class="option-item__right">
                  <span>10票</span>
                  <span>40%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-list" v-show="currIndex === 1">
        <div class="user-item" v-for="(item, index) in 10" :key="index">
          <div class="user-item__left">
            <image src="https://p26-passport.byteacctimg.com/img/user-avatar/6401428bcd3b2b9bfed4f31cca07b798~300x300.image" />
            <div class="right">
              <div class="right-top">
                <h2>且听风吟</h2>
                <span>微信用户</span>
              </div>
              <p>2021-10-10 10:30:00</p>
            </div>
          </div>
          <div class="user-item__right">
            <p>分值: 10</p>
            <div>查看表单</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    appName: '调查结果',

    name: 'Statistical',

    data () {
      return {
        currIndex: 0
      }
    },

    onLoad () {

    }
  }
</script>

<style lang="scss" scoped>
  .statistical {
    padding-top: 112px;
    padding-bottom: 60px;

    * {
      box-sizing: border-box;
    }

    i {
      font-style: normal;
    }

    .list-wrapper {
      padding-bottom: 40px;

      .top {
        display: flex;
        align-items: center;
        height: 116px;
        padding: 0 32px;
        font-size: 34px;
        color: #333;
        border-bottom: 4px solid #f3f6f9;

        i {
          color: #347FFF;
        }
      }

      .topic-item {
        padding: 40px 32px 0;

        & > h2 {
          line-height: 44px;
          color: #333333;
          font-size: 32px;
        }

        .option-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24px;
          padding: 34px 32px;
          border-radius: 16px;
          border: 1px solid #CCCCCC;
          background: #F5F5F5;

          & > div {
            display: flex;
          }

          h2 {
            font-weight: 600;
            font-size: 32px;
          }

          .option-item__left {
            flex: 1;
            margin-right: 18px;
            font-weight: 600;
            font-size: 32px;
            color: #333333;

            span {
              flex: 1;
              text-align: justify;
            }
          }

          .option-item__right {
            align-items: center;
            span {
              color: #666666;
              font-size: 28px;

              &:first-child {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .statistical-content {
      background: #fff;
    }

    .statistical-tab {
      display: flex;
      position: fixed;
      align-items: center;
      top: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      height: 96px;
      padding: 0 32px;
      background: #fff;

      span {
        position: relative;
        flex: 1;
        height: 100%;
        line-height: 96px;
        text-align: center;
        color: #000;
        font-size: 32px;
        font-weight: 600;

        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          z-index: 1;
          width: 192px;
          height: 6px;
          background: transparent;
          transform: translateX(-50%);
          content: ' ';
        }

        &.active {
          color: #1365DD;

          &::after {
            background: #1365DD;
          }
        }
      }
    }
  }
</style>