<template>
  <!-- 单元格布局 -->
  <view
    class="cell-main"
    :hover-class="isTouch ? 'touch-hover' : ''"
    :style="{ '--border-width': borderWidth, marginTop: mT + 'rpx', '--m-rl': mRL + 'rpx', backgroundColor: bgColor }"
  >
    <view class="title" :style="{ color: color }"> {{ title }} </view>
    <slot name="right">
      <image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
    </slot>
  </view>
</template>

<script setup>
const props = defineProps({
  title: { type: String }, //标题
  mT: { type: Number }, //上边距
  mRL: { type: Number }, //左右两侧边距
  bgColor: { type: String }, //背景颜色
  color: { type: String }, //标题字体颜色
  borderWidth: { type: String, default: '100vw' }, //边框距离左侧距离 默认100vw 没有边框
  isTouch: { type: Boolean, default: true }, //是否有触摸反馈
})
</script>

<style lang="scss" scoped>
.cell-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: var(--m-rl);
  margin-right: var(--m-rl);
  height: 120rpx;
  .title {
    margin-left: 40rpx;
    font-size: 32rpx;
    font-weight: 400;
  }
  image {
    width: 120rpx;
    height: 120rpx;
  }
  background-color: #fff;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: calc(100vw - var(--border-width));
    height: 1rpx;
    background-color: #ededed;
  }
}
</style>
