<template>
  <view class="s-pickers-title">
    <view class="text-size-n" style="min-height: 48rpx;">{{title}}</view>
    <view class="s-pickers-close s-flex-xy-center">
      <s-icon
        @click="$emit('close')"
        name="close"
        size="14"
        bold
        :fllowTheme="false"
        color="#9e9e9e"
      ></s-icon>
    </view>
  </view>
</template>

<script>
import props from './props.js'
export default {
  name: 's-picker-header',
  mixins: [props],
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/flex.scss';
.s-pickers-title {
  position: relative;
  padding: 32rpx;
  padding-bottom: 16rpx;
  .text-size-n {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 50rpx;
    display: block;
    text-align: center;
  }
  .s-pickers-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
    width: 50rpx;
    height: 50rpx;
    background-color: #efeff1;
    border-radius: 50%;
  }
}
</style>