feie9454/asm-introduction-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0817

Browse Source
This commit is contained in:
feie9456 2025-08-17 16:40:04 +08:00
parent 98b4d3a543
commit 8dd2842059
6 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/ico.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>ASM 科普 H5</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
public/ico.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

27
src/App.vue
View File

@ -162,7 +162,7 @@ const currentDesc = computed(() => {
<template> <template>
<div class="app" :class="{ rotate: isPortrait }"> <div class="app" :class="{ rotate: isPortrait }">
<audio :src="bgmURL" loop autoplay ref="bgm-ele"></audio> <audio :src="bgmURL" loop autoplay ref="bgm-ele" volume="0.7"></audio>
<Transition name="fade"> <Transition name="fade">
<Loader v-if="loadProgress.decode < 1" :progress="loadProgress" /> <Loader v-if="loadProgress.decode < 1" :progress="loadProgress" />
@ -197,7 +197,10 @@ const currentDesc = computed(() => {
<div class="action" v-for="(s, index) in stages" :key="index" <div class="action" v-for="(s, index) in stages" :key="index"
:style="{ cursor: currentStage == index ? 'pointer' : 'not-allowed' }" @click="clickBtn(index)"> :style="{ cursor: currentStage == index ? 'pointer' : 'not-allowed' }" @click="clickBtn(index)">
<img src="./assets/icon_bg.png" alt="" class="bg" /> <img src="./assets/icon_bg.png" alt="" class="bg" />
<img :src="stageIcons[index]" alt="" class="icon" /> <div class="icon">
<span class="step-label">Step</span>
<span class="step-number">{{ index + 1 }}</span>
</div>
<AniEle :url="icon_grow" :width="210" :height="242" :rules="[{ <AniEle :url="icon_grow" :width="210" :height="242" :rules="[{
name: 'grow', name: 'grow',
duration: 33, duration: 33,
@ -267,7 +270,7 @@ const currentDesc = computed(() => {
/* 标题与内容间距 */ /* 标题与内容间距 */
padding: 1vmin .5vmin; padding: 1vmin .5vmin;
/* 给下划线留空间 */ /* 给下划线留空间 */
width: 70vmin; width: 90vmin;
&::after { &::after {
content: ''; content: '';
@ -283,7 +286,7 @@ const currentDesc = computed(() => {
} }
.desc-title { .desc-title {
font-size: 5.5vmin; font-size: 6vmin;
letter-spacing: .2em; letter-spacing: .2em;
line-height: 1; line-height: 1;
/* 避免额外高度 */ /* 避免额外高度 */
@ -292,7 +295,7 @@ const currentDesc = computed(() => {
} }
.desc-content { .desc-content {
font-size: 2vmin; font-size: 2.8vmin;
line-height: 1.2; line-height: 1.2;
font-weight: light; font-weight: light;
} }
@ -370,9 +373,21 @@ img {
.icon { .icon {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 49%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 8vmin; width: 8vmin;
color: #3C163F;
display: flex;
flex-direction: column;
align-items: center;
.step-label {
font-size: 2.5vmin;
}
.step-number {
font-size: 6vmin;
font-weight: bold;
line-height: 5vmin;
}
} }
.intro { .intro {

BIN
src/assets/main.mp4
View File

Binary file not shown.

BIN
src/assets/main.zip
View File

Binary file not shown.

3
src/style.css
View File

@ -1,5 +1,6 @@
body{ body{
margin: 0; margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} }
* { * {
@ -19,7 +20,7 @@ body{
.slide-in-enter-active, .slide-in-enter-active,
.slide-in-leave-active { .slide-in-leave-active {
transition: transform 0.5s ease; transition: transform .75s ease;
} }
.slide-in-enter-from, .slide-in-enter-from,