index.vue 1.16 KB
<template>
  <div class="wrapper">
    <van-image
      class="van-hairline--surround"
      round
      width="4rem"
      height="4rem"
      lazy-load
      :src="avatar"
      style="position: absolute; left: -2rem;"
    >
      <template v-slot:error>加载失败</template>
    </van-image>
    <div class="text-wrapper" @click="handle">
      <van-row>
        <van-col span="20" style="color: #713610;"><slot></slot></van-col>
        <van-col span="4"><van-icon name="arrow" /></van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
const props = defineProps({
  avatar: String
})
const emit = defineEmits(['on-click']);
const handle = () => {
  emit('on-click', '')
}

  onMounted(() => {
    
  })
</script>

<script>
export default {
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
  .wrapper {
    position: relative;
    background-color: #fff;
    margin: 1rem;
    margin-right: 0;
    margin-left: 4rem;
    height: 4rem;
    .text-wrapper {
      text-align: left; 
      line-height: 4rem; 
      padding-left: 3rem;
    }
  }
</style>