health-front/pages_order/report/test/step.vue

<template>
  <view class="page__view">
		<navbar title="问卷测评" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="transparent" />

    <view class="main">
      <view :class="['step', item.step === current ? 'is-active' : '']" v-for="item in steps" :key="item.step">
        <view class="step-zh">{{ `{ ${item.zh} }` }}</view>
        <view class="step-en">{{ item.en }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      steps: [
        { step: 0, zh: '基本信息', en: 'Personal Nutrition Survey' },
        { step: 1, zh: '营养目标', en: 'Nutritional Goal' },
        { step: 2, zh: '生活习惯', en: 'Living habits' },
        { step: 3, zh: '身体状况', en: 'Physical condition' },
      ],
    }
  },
  onLoad(arg) {
    this.current = parseInt(arg.step)

    setTimeout(() => {
      this.$utils.redirectTo(`/pages_order/report/test/answer?step=${this.current}`)
    }, 1500)
  }
}
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
	}

  .main {
    margin-top: 214rpx;
  }

  .step {
    text-align: center;
    font-family: PingFang SC;
    line-height: 1.4;
    color: #989898;

    &.is-active {
      color: #252545;
    }

    &-zh {
      font-weight: 600;
      font-size: 48rpx;
    }

    &-en {
      font-weight: 400;
      font-size: 26rpx;
    }

    & + & {
      margin-top: 80rpx;
    }
  }

</style>