Browse Source

style

dev_des
1054425342@qq.com 1 month ago
parent
commit
e24a43ffc2
  1. 10575
      audioBook/components/msg copy.json
  2. 9430
      audioBook/components/msg.json
  3. 484
      audioBook/pages/index.vue

10575
audioBook/components/msg copy.json

File diff suppressed because one or more lines are too long

9430
audioBook/components/msg.json

File diff suppressed because one or more lines are too long

484
audioBook/pages/index.vue

@ -1,10 +1,8 @@
<template> <template>
<view class="container"> <view class="container">
<!-- 顶部标题栏 --> <!-- 歌词显示区域 -->
<!-- 主要内容区域 -->
<!-- 文本显示区域 -->
<scroll-view <scroll-view
class="content" class="lyrics-container"
:show-scrollbar="false" :show-scrollbar="false"
enhanced enhanced
scroll-y scroll-y
@ -12,33 +10,39 @@
scroll-with-animation scroll-with-animation
:style="{ height: scrollViewHeight + 'px' }" :style="{ height: scrollViewHeight + 'px' }"
> >
<view class="content-wrapper"> <view class="lyrics-content">
<view class="article-content"> <text
<text v-for="(sentence, index) in currentChapter.sentences"
v-for="(sentence, index) in currentChapter.sentences" :key="index"
:key="index" :id="`sentence-${index}`"
:id="`sentence-${index}`" class="lyric-line"
class="sentence" :class="{ active: index === activeSentenceIndex }"
:class="{ active: index === activeSentenceIndex }" >
> {{ sentence.FinalSentence }}
{{ sentence.FinalSentence }} </text>
</text>
</view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 底部控制栏 -->
<view class="controls"> <!-- 播放控制区域 -->
<!-- 章节信息栏 --> <view class="player-controls">
<view class="chapter-info-bar"> <!-- 控制按钮区域进度条上方 -->
<text class="chapter-title">{{ currentChapter.title }}</text> <view class="control-icons" v-if="false">
<text class="chapter-count"> <view class="control-icon">
{{ currentChapterIndex + 1 }}/{{ chapters.length }} <text class="icon-text"></text>
</text> </view>
<view class="control-icon-group">
<view class="control-icon">
<text class="icon-text"></text>
</view>
<view class="control-icon">
<text class="icon-text">🔍</text>
</view>
</view>
</view> </view>
<!-- 进度条区域 --> <!-- 进度条区域 -->
<view class="progress-section"> <view class="progress-section">
<text class="current-time">{{ formatTime(currentTime) }}</text> <text class="time-text">{{ formatTime(currentTime) }}</text>
<view class="progress-container"> <view class="progress-container">
<view class="progress-bar" @click="seek"> <view class="progress-bar" @click="seek">
<view class="progress" :style="{ width: progress + '%' }"></view> <view class="progress" :style="{ width: progress + '%' }"></view>
@ -48,33 +52,25 @@
></view> ></view>
</view> </view>
</view> </view>
<text class="duration">{{ formatTime(duration) }}</text> <text class="time-text">{{ formatTime(duration) }}</text>
</view> </view>
<!-- 底部控制按钮 -->
<!-- 控制按钮区域 --> <view class="bottom-controls">
<view class="control-buttons"> <view class="control-btn">
<!-- 上一章按钮 --> <text class="control-icon-text"></text>
<button </view>
class="control-btn prev-btn" <view class="control-btn" @click="prevChapter">
@click="prevChapter" <text class="control-icon-text"></text>
:disabled="currentChapterIndex === 0" </view>
> <view class="control-btn play-btn" @click="togglePlay">
<text class="control-icon"></text> <text class="control-icon-text">{{ playing ? "⏸" : "▶" }}</text>
</button> </view>
<view class="control-btn" @click="nextChapter">
<!-- 播放/暂停按钮 --> <text class="control-icon-text"></text>
<button class="play-btn" @click="togglePlay"> </view>
<text class="play-icon">{{ playing ? "⏸️" : "▶️" }}</text> <view class="control-btn">
</button> <text class="control-icon-text"></text>
</view>
<!-- 下一章按钮 -->
<button
class="control-btn next-btn"
@click="nextChapter"
:disabled="currentChapterIndex === chapters.length - 1"
>
<text class="control-icon"></text>
</button>
</view> </view>
</view> </view>
@ -270,7 +266,8 @@ export default {
let minDistance = Infinity; let minDistance = Infinity;
for (let i = 0; i < sentences.length; i++) { for (let i = 0; i < sentences.length; i++) {
const sentence = sentences[i]; const sentence = sentences[i];
const sentenceMiddle = (sentence.startTimeInSeconds + sentence.endTimeInSeconds) / 2; const sentenceMiddle =
(sentence.startTimeInSeconds + sentence.endTimeInSeconds) / 2;
const distance = Math.abs(currentTimeSeconds - sentenceMiddle); const distance = Math.abs(currentTimeSeconds - sentenceMiddle);
if (distance < minDistance) { if (distance < minDistance) {
minDistance = distance; minDistance = distance;
@ -297,7 +294,7 @@ export default {
// //
query.select(`#sentence-${index}`).boundingClientRect(); query.select(`#sentence-${index}`).boundingClientRect();
// //
query.select('.article-content').boundingClientRect(); query.select(".lyrics-content").boundingClientRect();
query.exec((res) => { query.exec((res) => {
if (res && res[0] && res[1]) { if (res && res[0] && res[1]) {
@ -380,357 +377,214 @@ export default {
<style> <style>
.container { .container {
height: 100vh; height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 30rpx;
position: relative; position: relative;
}
/* 顶部标题栏样式 */
.header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center;
padding: 40rpx 48rpx;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.1);
}
.header-content {
flex: 1;
}
.title {
font-size: 48rpx;
font-weight: 700;
color: #2d3748;
margin-bottom: 8rpx;
} }
.subtitle { /* 顶部标签样式 */
font-size: 32rpx; .top-label {
color: #718096; display: flex;
font-weight: 500; justify-content: center;
padding: 40rpx 0 20rpx 0;
} }
.chapter-info { .label-content {
background: linear-gradient(135deg, #667eea, #764ba2); background: #e8e8e8;
padding: 16rpx 32rpx; border: 2rpx solid #d0d0d0;
border-radius: 40rpx; border-radius: 40rpx;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3); padding: 16rpx 32rpx;
display: flex;
align-items: center;
gap: 16rpx;
} }
.chapter-count { .label-number {
width: 32rpx;
height: 32rpx;
background: #666;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white; color: white;
font-size: 28rpx; font-size: 24rpx;
font-weight: 600; font-weight: 600;
} }
.content { .label-text {
width: 690rpx; color: #666;
background: rgba(255, 255, 255, 0.9); font-size: 28rpx;
backdrop-filter: blur(20rpx); font-weight: 500;
border-radius: 32rpx;
margin: 0 auto;
margin-bottom: 20rpx;
} }
.content-wrapper { /* 歌词容器样式 */
padding: 48rpx; .lyrics-container {
flex: 1;
padding: 0 20rpx;
margin-bottom: 20rpx;
width: 710rpx;
} }
.article-content { .lyrics-content {
line-height: 1.8; display: flex;
font-size: 32rpx; flex-direction: column;
color: #2d3748; align-items: center;
text-align: justify; padding: 40rpx 0;
} }
.sentence { .lyric-line {
display: block; display: block;
padding: 20rpx; text-align: center;
margin: 10rpx 0; font-size: 32rpx;
border-radius: 12rpx; color: #999;
line-height: 1.8; line-height: 1.6;
margin: 16rpx 0;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.sentence.active { .lyric-line.active {
background-color: rgba(255, 215, 0, 0.2); color: #333;
font-weight: 600; font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3); font-size: 36rpx;
transform: translateX(10rpx);
} }
/* 底部控制栏样式 */ /* 播放控制区域 */
.controls { .player-controls {
background: rgba(255, 255, 255, 0.98); background: white;
backdrop-filter: blur(40rpx); padding: 40rpx 60rpx 60rpx 60rpx;
border-top: 2rpx solid rgba(255, 255, 255, 0.3);
box-shadow: 0 -16rpx 64rpx rgba(0, 0, 0, 0.12),
0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
border-radius: 48rpx 48rpx 0 0;
padding: 32rpx 40rpx 40rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24rpx; gap: 24rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
} }
/* 章节信息栏 */ /* 控制图标区域 */
.chapter-info-bar { .control-icons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 8rpx; margin-bottom: 20rpx;
} }
.chapter-title { .control-icon {
font-size: 28rpx; width: 60rpx;
font-weight: 600; height: 60rpx;
color: #2d3748; display: flex;
flex: 1; align-items: center;
overflow: hidden; justify-content: center;
text-overflow: ellipsis; border-radius: 50%;
white-space: nowrap; background: #f0f0f0;
margin-right: 16rpx;
} }
.chapter-count { .control-icon-group {
font-size: 24rpx; display: flex;
color: #718096; gap: 40rpx;
font-weight: 500; }
background: rgba(139, 92, 246, 0.1);
padding: 8rpx 16rpx; .icon-text {
border-radius: 20rpx; font-size: 32rpx;
backdrop-filter: blur(10rpx); color: #666;
} }
/* 进度条区域 */ /* 进度条区域 */
.progress-section { .progress-section {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20rpx; gap: 24rpx;
margin-bottom: 16rpx;
} }
.current-time, .time-text {
.duration {
font-size: 24rpx; font-size: 24rpx;
color: #718096; color: #666;
font-weight: 500; font-weight: 500;
font-family: "Courier New", monospace; font-family: "Courier New", monospace;
min-width: 80rpx; min-width: 80rpx;
text-align: center; text-align: center;
} }
/* 控制按钮区域 */
.control-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 32rpx;
}
/* 播放按钮 */
.play-btn {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 12rpx 40rpx rgba(139, 92, 246, 0.4),
0 6rpx 20rpx rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
z-index: 2;
}
/* 控制按钮(上一章/下一章) */
.control-btn {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
border: none;
background: rgba(139, 92, 246, 0.08);
color: #8b5cf6;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.15);
backdrop-filter: blur(20rpx);
position: relative;
overflow: hidden;
}
.play-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.05)
);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.play-btn:hover {
transform: scale(1.08);
box-shadow: 0 18rpx 56rpx rgba(139, 92, 246, 0.5),
0 9rpx 28rpx rgba(0, 0, 0, 0.2);
}
.play-btn:hover::before {
opacity: 1;
}
.play-btn:active {
transform: scale(0.96);
transition: transform 0.1s ease;
}
/* 进度条容器 */
.progress-container { .progress-container {
flex: 1; flex: 1;
position: relative; position: relative;
} }
.progress-bar { .progress-bar {
height: 12rpx; height: 8rpx;
background: rgba(139, 92, 246, 0.12); background: #e0e0e0;
border-radius: 6rpx; border-radius: 4rpx;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
overflow: hidden;
backdrop-filter: blur(20rpx);
box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
} }
.progress { .progress {
height: 100%; height: 100%;
background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%); background: #333;
border-radius: 6rpx; border-radius: 4rpx;
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.2s ease;
box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.3);
position: relative;
}
.progress::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.1) 100%
);
border-radius: 6rpx;
} }
.progress-thumb { .progress-thumb {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 28rpx; width: 24rpx;
height: 28rpx; height: 24rpx;
background: white; background: #333;
border: 4rpx solid #8b5cf6;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-shadow: 0 6rpx 20rpx rgba(139, 92, 246, 0.4),
0 3rpx 6rpx rgba(0, 0, 0, 0.1);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
} }
.progress-thumb:hover { /* 无损标识 */
transform: translate(-50%, -50%) scale(1.2); .quality-label {
box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.5), display: flex;
0 4rpx 8rpx rgba(0, 0, 0, 0.15); justify-content: center;
} margin-bottom: 20rpx;
/* 控制按钮交互效果 */
.control-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.1),
rgba(168, 85, 247, 0.05)
);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.control-btn:hover {
background: rgba(139, 92, 246, 0.15);
transform: scale(1.1);
box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.25);
}
.control-btn:hover::before {
opacity: 1;
} }
.control-btn:active { .quality-text {
transform: scale(0.95); font-size: 24rpx;
transition: transform 0.1s ease; color: #999;
} }
.control-btn:disabled { /* 底部控制按钮 */
opacity: 0.3; .bottom-controls {
cursor: not-allowed; display: flex;
transform: none; justify-content: center;
box-shadow: 0 2rpx 6rpx rgba(139, 92, 246, 0.1); align-items: center;
gap: 60rpx;
} }
.control-btn:disabled:hover { .control-btn {
background: rgba(139, 92, 246, 0.08); width: 80rpx;
transform: none; height: 80rpx;
box-shadow: 0 2rpx 6rpx rgba(139, 92, 246, 0.1); display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
} }
.control-btn:disabled::before { .control-btn.play-btn {
opacity: 0; background: #333;
color: white;
} }
/* 控制图标样式 */ .control-icon-text {
.control-icon {
font-size: 32rpx; font-size: 32rpx;
color: #666;
line-height: 1; line-height: 1;
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
} }
.play-icon { .control-btn.play-btn .control-icon-text {
font-size: 42rpx; color: white;
line-height: 1; font-size: 36rpx;
margin-left: 3rpx; }
filter: drop-shadow(0 3rpx 6rpx rgba(0, 0, 0, 0.2));
.control-btn:active {
transform: scale(0.95);
} }
</style> </style>

Loading…
Cancel
Save