minnan/src/pages/parts/Box2LinePlayRightArrow.vue

<template>
  <view 
    class="d-flex w-100 flex-row align-center bg-light-light-primary radius-base mt-2 p-2"
    @click="$emit('click')"
  >
    <image class="width-100 height-100 radius-base" 
      :src="'https://mncdn.wenlvti.net/app_static/minnan/images/discover/' + (isPlaying && isCurrent ? 'PauseButtonLarge.png' : 'PlayButtonLarge.png')" 
      mode="aspectFill" 
    />
    <view class="d-flex flex-col ml-3 flex-one">
      <text class="color-primary">{{ title }}</text>
      <text v-if="desc" class="color-primary-second-text">{{ desc }}</text>
    </view>
    <view v-if="isCurrent" class="playing-anim">
      <view class="line line1"></view>
      <view class="line line2"></view>
      <view class="line line3"></view>
    </view>
    <text v-else class="iconfont icon-arrow-right color-primary" />
  </view>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: ''
  },
  desc: {
    type: String,
    default: ''
  },
  isCurrent: {
    type: Boolean,
    default: false
  },
  isPlaying: {
    type: Boolean,
    default: false
  },
})
</script>

<style lang="scss">
.playing-anim {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50rpx;
  height: 50rpx;

  .line {
    width: 4rpx;
    border-radius: 2rpx;
    margin-right: 4rpx;
    background-color: #d94a2f;
    animation: playing-anim-loading 1.2s infinite ease-in-out;
  }
  .line1 {
    animation-delay: -0.4s;
  }
  .line2 {
    animation-delay: -0.2s;
  }
  .line3 {
    animation-delay: 0;
    margin-right: 0;
  }
}

@keyframes playing-anim-loading {
  0%, 100% {
    height: 25rpx;
  }
  50% {
    height: 40rpx;
  }
}
</style>