You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
5.4 KiB
220 lines
5.4 KiB
<template>
|
|
<uv-popup mode="bottom" ref="meaningPopup" round="32rpx" bg-color="#FFFFFF" :overlay="true" safeAreaInsetBottom>
|
|
<view class="meaning-popup" v-if="currentWordMeaning">
|
|
<view class="meaning-header">
|
|
<view class="close-btn" @click="closeMeaningPopup">
|
|
<text class="close-text">关闭</text>
|
|
</view>
|
|
<view class="meaning-title">释义</view>
|
|
<view style="width: 80rpx;"></view>
|
|
</view>
|
|
|
|
<scroll-view class="meaning-scroll-container" scroll-y="true" :show-scrollbar="false" :enhanced="true">
|
|
<view class="meaning-content">
|
|
<image v-if="currentWordMeaning.image" class="meaning-image" :src="currentWordMeaning.image"
|
|
mode="widthFix" />
|
|
|
|
<view class="word-info">
|
|
<view class="word-main">
|
|
<text class="word-text">{{ currentWordMeaning.word }}</text>
|
|
</view>
|
|
<view class="phonetic-container">
|
|
<uv-icon name="volume-fill" size="16" color="#007AFF" class="speaker-icon"
|
|
@click="repeatWordAudio" v-if="currentWordMeaning.phonetic" />
|
|
<text class="phonetic-text" v-if="currentWordMeaning.phonetic">{{ currentWordMeaning.phonetic }}</text>
|
|
</view>
|
|
<view class="word-meaning">
|
|
<text class="part-of-speech" v-if="currentWordMeaning.partOfSpeech">{{ currentWordMeaning.partOfSpeech }}</text>
|
|
<text class="meaning-text" v-if="currentWordMeaning.meaning">{{ currentWordMeaning.meaning }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="knowledge-gain" v-if="currentWordMeaning.knowledgeGain">
|
|
<view class="knowledge-header">
|
|
<image src="/static/knowledge-icon.png" class="knowledge-icon" mode="aspectFill" />
|
|
<text class="knowledge-title">知识收获</text>
|
|
</view>
|
|
<text class="knowledge-content">{{ currentWordMeaning.knowledgeGain }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MeaningPopup',
|
|
props: {
|
|
currentWordMeaning: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
if (this.$refs.meaningPopup) {
|
|
this.$refs.meaningPopup.open()
|
|
}
|
|
},
|
|
close() {
|
|
if (this.$refs.meaningPopup) {
|
|
this.$refs.meaningPopup.close()
|
|
}
|
|
},
|
|
closeMeaningPopup() {
|
|
this.$emit('close-meaning-popup')
|
|
this.close()
|
|
},
|
|
repeatWordAudio() {
|
|
this.$emit('repeat-word-audio')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 释义弹窗样式 */
|
|
.meaning-popup {
|
|
background-color: #FFFFFF;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.meaning-scroll-container {
|
|
flex: 1;
|
|
height: 60vh;
|
|
}
|
|
|
|
.meaning-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 80rpx;
|
|
}
|
|
|
|
.close-text {
|
|
font-family: PingFang SC;
|
|
font-size: 32rpx;
|
|
color: #8b8b8b;
|
|
}
|
|
|
|
.meaning-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.meaning-content {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.meaning-image {
|
|
width: 670rpx;
|
|
height: 268rpx;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.word-info {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.word-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.word-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.phonetic-container {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
align-items: center;
|
|
|
|
.speaker-icon {
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
padding: 8rpx;
|
|
border-radius: 8rpx;
|
|
|
|
&:hover {
|
|
opacity: 0.7;
|
|
background-color: rgba(0, 122, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.phonetic-text {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
|
|
.word-meaning {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.part-of-speech {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
}
|
|
|
|
.meaning-text {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #181818;
|
|
flex: 1;
|
|
}
|
|
|
|
.knowledge-gain {
|
|
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx 40rpx;
|
|
}
|
|
|
|
.knowledge-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.knowledge-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.knowledge-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #3B3D3D;
|
|
}
|
|
|
|
.knowledge-content {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #4f4f4f;
|
|
line-height: 48rpx;
|
|
}
|
|
</style>
|