A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 添加悬停动画效果并优化音频播放逻辑

Browse Source 
为多个元素添加悬停动画效果，提升用户体验
重构音频播放逻辑，增加judgmentPlayUrl方法统一处理播放
更新HTML元数据，优化SEO和移动端适配
修改部分文案内容
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-25 15:34:07 +08:00
parent c5abafdc86
commit 523547871e
4 changed files with 105 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -1,14 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 基本元数据 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>朴见潮音官网</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta name="theme-color" content="#1e135e" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 网站标题和描述 -->
<title>朴见潮音官网 - AI音乐创作先锋品牌</title>
<meta name="description" content="朴见潮音是国内领先的AI音乐创作品牌，致力于通过人工智能技术推动音乐创作的创新与发展。" />
<meta name="keywords" content="朴见潮音,AI音乐,人工智能音乐,音乐创作,AI作曲" />
<meta name="author" content="朴见潮音" />
<!-- 社交媒体元数据 -->
<meta property="og:title" content="朴见潮音官网 - AI音乐创作先锋品牌" />
<meta property="og:description" content="朴见潮音是国内领先的AI音乐创作品牌，致力于通过人工智能技术推动音乐创作的创新与发展。" />
<meta property="og:image" content="./static/img/logo.png" />
<meta property="og:url" content="https://www.pujian.com" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="朴见潮音" />
<!-- 网站图标 -->
<link rel="shortcut icon" href="./static/img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="./static/img/logo.png" />
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
<script src="./static/js/vue.global.js"></script>
<script src="./static/js/artplayer.js"></script>
<script src="./static/js/axios.min.js"></script>
<link rel="stylesheet" href="./static/css/index.css" />
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
<style>
[v-cloak] {
display: none;
@@ -127,7 +155,7 @@
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow')" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.playurl, 'works')" src="./static/img/play-black-icon.svg" />
<img v-else class="play" @click="judgmentPlayUrl(item.playurl, 'works', index)" src="./static/img/play-black-icon.svg" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast')" />
</div>
</div>
@@ -140,7 +168,7 @@
<div class="custom" ref="customRef">
<div class="custom-box mar1200 flexflex">
<img class="title" src="./static/img/custom-title.png" />
<div class="subtitle">往事可成追忆，把你的故事谱成歌</div>
<div class="subtitle">释放音乐本能，用词曲表达人生</div>
<div class="list flexflex mar1200">
<div class="item flexacenter" v-for="(item, index) in customList" :key="index">
<div class="info flexflex">
@@ -153,7 +181,7 @@
<div class="operate flexcenter">
<img class="speed left" @click="fastForward('slow')" src="./static/img/speed-left.png" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="item.playurl ? manageAudio(item.playurl, 'custom') : getPlayUrl(index, 'custom')" src="./static/img/play-black-icon.svg" />
<img v-else class="play" @click="judgmentPlayUrl(item.playurl, 'custom', index)" src="./static/img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast')" src="./static/img/speed-right.png" />
</div>
</div>
@@ -190,7 +218,7 @@
<img class="cut left" src="./static/img/cut-left.svg" @click="cutSong('up', zeroOrderStudents.order)" />
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="zeroOrderStudents.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="zeroOrderStudents.playurl ? manageAudio(zeroOrderStudents.playurl, 'student') : getPlayUrl(index, 'student')" src="./static/img/play-white-icon.svg" />
<img v-else class="play" @click="judgmentPlayUrl(zeroOrderStudents.playurl, 'student', index)" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
<img class="cut right" src="./static/img/cut-right.svg" @click="cutSong('down', zeroOrderStudents.order)" />
</div>
@@ -207,7 +235,7 @@
<div class="footer flexcenter">
<img class="logo" src="./static/img/ai-title.png" />
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div>
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved</div>
</div>
<div v-if="previewState" class="preview flexcenter" @click="closePreview()">