zc_saas_h5/pages2/wd/question_bank.vue

<template>
  <view style="padding: 32rpx">
    <nav-bar title="我的题库通"></nav-bar>
    <navigator hover-class="none" url="/pages2/bank/my_question">
      <view class="my_question">
        <view class="flex">
          <view class="text">自购题卷<u-icon name="arrow-right"></u-icon></view>
        </view>
        <image src="/pages2/static/questionBank.png" class="my_bg"></image>
      </view>
    </navigator>
    <navigator hover-class="none" url="/pages2/bank/free_question">
      <view class="my_question">
        <view class="flex">
          <view class="text">赠送题卷<u-icon name="arrow-right"></u-icon></view>
        </view>
        <image src="/pages2/static/questionPresent.png" class="my_bg"></image>
      </view>
    </navigator>
    <view class="bottom">
      <navigator hover-class="none" url="/pages2/subject/collect">
        <view class="item collect">
          <view class="text">收藏集<u-icon name="arrow-right"></u-icon></view>
          <image class="img" src="/static/questionBank_collect.png"></image>
        </view>
      </navigator>
      <view class="item list">
        <navigator hover-class="none" url="/pages2/bank/question_record">
          <view class="list-in">
            <image class="img" src="/static/questionBank_record.png"></image>
            <view class="text">
              做题记录 <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </navigator>

        <navigator hover-class="none" url="/pages2/subject/wrong">
          <view class="list-in">
            <image class="img" src="/static/questionBank_wrong.png"></image>
            <view class="text">
              错题集 <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
// import { websocket } from '@/common/socket.js';
export default {
  data() {
    return {
      list: [1, 2, 3],
      timer: null,
    };
  },
  onLoad(option) {
    this.$api
      .lockLockAction({
        action: "bank",
      })
      .then((res) => {});
    this.timer = setInterval(() => {
      this.$api
        .lockLockAction({
          action: "bank",
        })
        .then((res) => {});
    }, 10000);
    // websocket.sendMsg('doQuestion')
    // this.getDict()
  },
  onUnload() {
    clearInterval(this.timer);
    this.$api
      .lockDelLock({
        action: "bank",
      })
      .then((res) => {});
    // websocket.sendMsg('delAction')
  },
  onShow() {},
  methods: {},
};
</script>
<style >
page {
  background: #fff;
}
</style>
<style lang="scss" scope>
.my_question {
  position: relative;
  display: flex;
  width: 686rpx;
  height: 240rpx;
  border-radius: 24rpx;
  padding: 0 40rpx;
  margin-bottom: 16rpx;

  .my_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .flex {
    position: relative;
    z-index: 10;
    .text {
      padding-top: 32rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

.bottom {
  display: flex;
  justify-content: space-between;
  .item {
    width: 335rpx;

    &.collect {
      position: relative;
      font-size: 32rpx;
      color: #ffffff;
      height: 240rpx;
      border-radius: 24rpx;
      padding: 32rpx;

      .text {
        position: relative;
        z-index: 10;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
      }

      .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }

    &.list {
      .list-in {
        position: relative;
        width: 335rpx;
        height: 112rpx;
        background: #007aff;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        font-size: 32rpx;
        color: #fff;

        &:first-of-type {
          margin-bottom: 16rpx;
        }

        .text {
          padding-left: 91rpx;
          position: relative;
          z-index: 10;
          font-size: 32rpx;
          font-weight: bold;
          color: #ffffff;
        }

        .img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>