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>
    <view class="practise1" @click="toPractiseOne">
      <image src="../static/practise1.png" class="practise1" mode="widthFix" />
    </view>
    <view class="practise2" @click="toPractiseTwo">
      <image src="../static/practise2.png" class="practise2" mode="widthFix" />
    </view>
  </view>
</template>

<style scoped>
.practise1 {
  width: 100%;
  margin: 20px 0;
}
.practise2 {
  width: 100%;
}
</style>