<template>
  <view class="list-main bgF" :style="{ marginTop: mTop, marginBottom: mBot }" @tap="jumpPage">
    <image :src="imgUrl" mode="scaleToFill" />
    <view class="main-info" :class="[isBorder]">
      {{ title }}
      <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  mTop: {
    type: String,
    default: "0",
  },
  imgUrl: {
    type: String,
  },
  title: {
    type: String,
  },
  url: {
    type: String,
  },
  isBorder: {
    type: String,
  },
})
const jumpPage = () => {
  uni.navigateTo({
    url: props.url,
  })
}
</script>

<style lang="scss" scoped>
.list-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  font-size: 33rpx;
  image {
    width: 40rpx;
    height: 40rpx;
    // margin: 0 50rpx 0 0;
    margin-left: 50rpx;
    margin-right: 30rpx;
  }
  .main-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    border-bottom: 1rpx solid #e5e5e5;

    image {
      margin-right: 50rpx;
    }
  }
}
.isBorder {
  border: none !important;
}
</style>
