AI_Painting_V2.0/src/components/dialogBox/proportion/video.vue

<template>
    <Popover placement="top">
        <div class="proportion-container">
            <div class="section">
                <h3>选择比例</h3>
                <div class="proportion-options" :style="{ marginBottom: props.type === 'Video' ? '0px' : '20px' }">
                    <div 
                        v-for="item in proportionOptions" 
                        :key="item.value"
                        class="proportion-item"
                        :class="{ active: proportion === item.value }"
                        :style="getProportionStyle(item.value)"
                        @click="selectProportion(item.value)"
                    >
                        {{ item.label }}
                    </div>
                </div>
            </div>

            <div class="section">
                <h3>选择分辨率</h3>
                <div class="resolution-options">
                    <div 
                        v-for="item in resolutionOptions" 
                        :key="item.value"
                        class="resolution-item"
                        :class="{ active: resolution === item.value }"
                        @click="selectResolution(item.value)"
                    >
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
        <template #reference>
            <div class="choice-btn">
                <img src="@/assets/dialog/proportion.svg" alt="" style="width: 16px;">
                <span>{{ proportion }}</span>
                <div style="border: 0.5px solid #000; width: 1px; height:13px;margin: 0 5px;" />
                <span>{{ resolution }}</span>
            </div>
        </template>
    </Popover>
</template>

<script setup>
import Popover from '@/components/Popover/index.vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '1:1'
  },
  resolution: {
    type: String,
    default: '2k'
  },
  proportionOptions: {
    type: Array,
    default: () => [
      { value: '21:9', label: '21:9' },
      { value: '16:9', label: '16:9' },
      { value: '4:3', label: '4:3' },
      { value: '1:1', label: '1:1' },
      { value: '3:4', label: '3:4' },
      { value: '9:16', label: '9:16' }
    ]
  },
  resolutionOptions: {
    type: Array,
    default: () => [
      { value: '360', label: '流畅 360P' },
      { value: '540', label: '标清 540P' },
      { value: '720', label: '高清 720P' },
      { value: '1k', label: '超清 1K' }
    ]
  }
})

const emit = defineEmits(['update:modelValue', 'update:resolution'])

const proportion = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const resolution = computed({
  get: () => props.resolution,
  set: (value) => emit('update:resolution', value)
})

const selectProportion = (value) => {
  proportion.value = value
}

const selectResolution = (value) => {
  resolution.value = value
}

const getProportionStyle = (value) => {
  if (value === '智能') {
    return {
      '--width': '20px',
      '--height': '20px'
    }
  }
  const [w, h] = value.split(':').map(Number)
  const aspectRatio = w / h
  const baseSize = 20
  
  if (aspectRatio > 1) {
    return {
      '--width': `${baseSize}px`,
      '--height': `${Math.round(baseSize / aspectRatio)}px`
    }
  } else {
    return {
      '--width': `${Math.round(baseSize * aspectRatio)}px`,
      '--height': `${baseSize}px`
    }
  }
}
</script>

<style lang="less" scoped>
.choice-btn{
  display: flex;
  height: 40px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  border: 1px solid #E8E9EB;
  background: #f5f6f7;
  cursor: pointer;
  position: relative;
}
.choice-btn:hover{
  background: #e9eaeb;
}

.proportion-container{
  padding: 20px;
  min-width: 300px;
}

.section{
  margin-bottom: 20px;
  border-radius: 20px;
  
  &:last-child{
    margin-bottom: 0;
  }
  
  h3{
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 12px;
    color: #999;
  }
}
.proportion-options{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 16px;
  background-color: #F8F9FA;
  padding: 5px;
  border-radius: 10px;
}

.proportion-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 5px;
  width: auto;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  border-radius: 5px;
  text-align: bottom;
  color: #999;
  
  &::before{
    content: '';
    width: var(--width, 20px);
    height: var(--height, 20px);
    background: #F5F6F7;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 2px solid #999;
  }
  
  &:hover{
    background: #e0e0e0;
  }
  
  &.active{
    color: #000F33;
    background: #ffffff;
  }
  &.active::before{
    border-color: #000F33;
  }
}

.resolution-options{
  display: flex;
  padding: 5px;
  align-items: center;
  align-self: stretch;
  border-radius: 10px;
  background: #F8F9FA;
  gap: 10px;
}

.resolution-item{
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
  color: #666;
  
  &:hover{
    background: #e0e0e0;
  }
  
  &.active{
    background: #ffffff;
    color: #000000;
    font-weight: 500;
  }
}
</style>