<template>
    <div class="params-item">
        <div class="params-label">焦距倍数：</div>
        <div class="params-value">
            <a-slider v-model:value="props.params.focalLength" :min="1" :max="112" :step="1" />
        </div>
        <div class="params-value-text">
        X {{ props.params.focalLength }} 
        </div>
    </div>
</template>

<script lang="ts" setup>

import {defineProps,defineComponent,defineOptions} from 'vue';

const props = defineProps(["params"])


defineComponent({
  name: 'zoom'
})


</script>

<style scoped>
.params-item{
  width:100%;
  display: flex;
  gap:20px;
}
.params-item .params-label{ 
    line-height:30px;
}



.params-item .params-value{
  flex:1;
}

.params-item .params-value-text{
  line-height:30px;
}

::v-deep .ant-input-number{
  color:#fff!important;
  background:#3F4150!important;
  border:0px !important;
}

::v-deep .ant-input-number-input{
  color:#fff!important;
  border:0px !important;
}

</style>