englishread-front/subPages/home/components/MeaningPopup.vue

<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>