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

Compare commits

base: feie9454:f5cab67ef3a25d67072aaf1854b057b690ee5617
Branches Tags
feie9454:main
..
compare: feie9454:226d75352e8021b9b9c7724f13397b49b9fe8193
Branches Tags
feie9454:main

No commits in common. "f5cab67ef3a25d67072aaf1854b057b690ee5617" and "226d75352e8021b9b9c7724f13397b49b9fe8193" have entirely different histories.
f5cab67ef3 ... 226d75352e

6 changed files with 9 additions and 25 deletions
Show Stats Expand all files Collapse all files

4
index.html
View File

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

BIN
public/ico.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

27
src/App.vue
View File

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

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