<template>
  <view style="display: flex">
    <image class="bg" mode="widthFix" :src="bg"></image>
    <view class="buttons">
      <view
        @click="
          goExerciseMi({
            category: 3,
             title:'新规秘卷一'
          })
        "
        class="buttons-left"
        >进入秘卷一</view
      >
      <view
        @click="
          goExerciseMi({
            category: 4,
            title:'新规秘卷二'
          })
        "
        class="buttons-right"
        >进入秘卷二</view
      >
    </view>
  </view>
</template>

<script>
//试卷
import utils from "@/utils/index";
export default {
  data() {
    return {
      bg: "https://ct.zzxcx.net/ctjk/mp-wx/selectRulePaper/selectrulePaperBg.png",
      query: {},
    };
  },
  onLoad(query) {
    this.query = query;
  },
  methods: {
    goExerciseMi(extraQuery) {
      let query = Object.assign({}, this.query);
      if (extraQuery) {
        query = {
          ...query,
          ...extraQuery,
        };
      } else {
      }

      uni.navigateTo({
        url: "/otherPages/exerciseMi/index?" + utils.mapToUrlQuery(query),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
}
.buttons {
  position: absolute;
  top: 875rpx;
  width: 100%;
  padding: 0 76rpx;
  display: flex;
  justify-content: space-between;
  .buttons-left {
    width: 287rpx;
    height: 90rpx;
    background: linear-gradient(0deg, #df262a, #c3060a, #e33135);
    border-radius: 45rpx;
    color: #fff;
    font-size: 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .buttons-right {
    width: 287rpx;
    height: 90rpx;
    background: linear-gradient(0deg, #df262a, #c3060a, #e33135);
    border-radius: 45rpx;
    color: #fff;
    font-size: 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>