shoot-miniprograms/src/pages/practise.vue

<script setup>
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import Guide from "@/components/Guide.vue";

const toPractiseOne = () => {
  uni.navigateTo({
    url: "/pages/practise-one",
  });
};

const toPractiseTwo = () => {
  uni.navigateTo({
    url: "/pages/practise-two",
  });
};
</script>

<template>
  <view>
    <AppBackground />
    <Header title="个人练习" />
    <Guide>
      <text :style="{ color: '#fed847' }"
        >师傅领进门，修行靠自身，赶紧练起来吧。</text
      >
      <text :style="{ fontSize: '12px' }"
        >坚持练习就能你快速升级，早日加入全国排位赛！</text
      >
    </Guide>
    <image
      src="../static/practise-bg.png"
      class="practise-bg"
      mode="widthFix"
      :style="{ marginTop: 0 }"
    />
    <view class="practise-btn" @click="toPractiseOne">
      <image src="../static/practise1.png" class="practise1" mode="widthFix" />
    </view>
    <image
      src="../static/practise-bg.png"
      class="practise-bg"
      mode="widthFix"
    />
    <view class="practise-btn" @click="toPractiseTwo">
      <image src="../static/practise2.png" class="practise2" mode="widthFix" />
    </view>
    <image
      src="../static/practise-bg.png"
      class="practise-bg"
      mode="widthFix"
    />
  </view>
</template>

<style scoped>
.practise-btn {
  width: 100%;
  margin-top: -6px;
}
.practise-btn > image {
  width: 100%;
}
.practise-bg {
  width: 100%;
  margin-top: -6px;
}
</style>