<template>
  <view
    class="flex items-center h-92rpx pl-base pr-15rpx rounded-19rpx bg-white"
    :class="[{ 'card-shadow': shadow }]"
    @click="$emit('onClick')"
  >
    <view
      class="text-[#333333] font-400 text-27rpx"
      :style="[
        { width: `${getPx(titleWidth)}px`, fontSize: `${getPx(textSize)}px` },
      ]"
      >{{ title }}</view
    >
    <view class="flex-1">
      <slot></slot>
    </view>
    <view class="h-full flex-center">
      <slot name="right-icon">
        <image
          v-if="isLink"
          class="w-26rpx h-26rpx"
          src="@/static/images/me_icon_more_def.svg"
        ></image>
      </slot>
    </view>
  </view>
</template>
<script setup>
import { getPx } from '@climblee/uv-ui/libs/function/index.js'
const props = defineProps({
  title: {
    type: String,
  },
  isLink: {
    type: Boolean,
    default: true,
  },
  shadow: {
    type: Boolean,
    default: true,
  },
  titleWidth: {
    type: String,
    default: '1130rpx',
  },
  textSize: {
    type: String,
    default: '27rpx',
  },
})
</script>
<style scoped lang="scss"></style>
