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>
      
      <view class="meaning-content">
        <image 
          v-if="currentWordMeaning.image" 
          class="meaning-image" 
          :src="currentWordMeaning.image" 
          mode="aspectFill"
        />
        
        <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"
            />
            <text class="phonetic-text">{{ currentWordMeaning.phonetic }}</text>
          </view>
          <view class="word-meaning">
            <text class="part-of-speech">{{ currentWordMeaning.partOfSpeech }}</text>
            <text class="meaning-text">{{ currentWordMeaning.meaning }}</text>
          </view>
        </view>
        
        <view class="knowledge-gain">
          <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>
    </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;
}

.meaning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid #EEEEEE;
}

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