shoot-miniprograms/src/pages/practise.vue

<script setup>
import Container from "@/components/Container.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>
  <Container title="个人练习">
    <view :style="{ width: '100%' }">
      <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>
  </Container>
</template>

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