shoot-miniprograms/src/pages/device-intro.vue

<script setup>
import { ref, onMounted } from "vue";
import SButton from "@/components/SButton.vue";

import { capsuleHeight } from "@/util";

const images = [
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmf6yitekatwe.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmi475gqdtrvx.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmgy8ej5wuap5.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmg6y7nveaadv.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-12-04/depguhlqg9zxastyn3.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-12-04/depguhlfr041aedqmb.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-12-04/depguhlpnlyxndnor5.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmg68a8mezgzx.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-10-14/ddht51a3hiyw7ueli4.jpg",
];

const addBg = ref(false);

const onScrollView = (e) => {
  addBg.value = e.detail.scrollTop > 100;
};
</script>

<template>
  <view class="container">
    <view
      class="header"
      :style="{
        paddingTop: capsuleHeight + 'px',
      }"
    >
      <image
        :style="{ opacity: addBg ? 1 : 0 }"
        src="../static/app-bg.png"
        mode="widthFix"
      />
      <navigator open-type="navigateBack">
        <image class="header-back" src="../static/back.png" mode="widthFix" />
      </navigator>
      <text
        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
      >
      </text>
    </view>
    <scroll-view scroll-y @scroll="onScrollView" :style="{ height: '100vh' }">
      <view class="images">
        <image
          v-for="src in images"
          :key="src"
          :src="src"
          mode="widthFix"
          show-menu-by-longpress
        />
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
}
.header-bg {
  width: 100%;
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10;
  overflow: hidden;
}
.header-back {
  width: 22px;
  height: 22px;
  margin: 0px 15px;
  margin-top: 5px;
  position: relative;
}
.header > image:first-child {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
}
.header > text {
  color: #fff;
  font-weight: bold;
  transition: all 0.5s ease;
  position: relative;
}
.images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.images > image {
  width: 100vw;
}
</style>