uni-app list组件（初级版）

<template>  <view class="box">    <view class="box-box" v-if="list.length > 0">      <view class="content-box" v-for="(item, index) in list" :key="index" @click.stop="handleContent(item)">        <image class="tip" :src="item.tip" mode="aspectFit"></image>        <image v-if="item.processed" class="processed" :src="item.processed" mode="aspectFit">        </image>        <view class="list">          <view class="image-box">            <image class="image" :src="item.image" mode="aspectFit"></image>          </view>          <view class="content">            <view class="title">{{ item.title }}</view>            <view class="note">              <view class="date">                <view v-if="item.dateTop">{{ item.dateTop }}</view>                <view v-else style="opacity: 0;">2022-07-24</view>                <view>{{ item.dateLabel || date }}：{{ item.date }}</view>              </view>              <view style="height: 100%;" v-if="item.button">                <view class="button" @click.stop="handleClick(item)">{{ button }}</view>              </view>            </view>          </view>        </view>      </view>    </view>    <view v-else class="nomessage">      暂无内容    </view>  </view></template>
<script>/** * tip: 左侧上方图片 * processed：右侧下方图片 * image：左侧中间图片 * title：标题 * dateTop: 上方时间 * dateBottom: 下方时间 * button：右侧下方按钮 */export default {  name: 'list',  props: {    list: {      type: Array,      default: () => []    },    button: {      type: String,      default: '处理'    },    date: {      type: String,      default: '申请时间'    }  },  data () {    return {}  },  methods: {    handleContent (item) {      this.$emit('itemClick', item)    },
    handleClick (item) {      console.log('222')      this.$emit('click', item)    }  },}</script>
<style lang="scss" scope>.box {  height: calc(100vh - 450rpx);  overflow: hidden;  .box-box {    height: 100%;    overflow: auto;  }}
.content-box {  position: relative;  border-bottom: 1rpx solid rgba(204, 204, 204, 0.5);  .tip {    position: absolute;    width: 18%;    height: 40rpx;    top: -2rpx;    left: 15rpx;  }  .processed {    position: absolute;    width: 100rpx;    height: 100rpx;    right: 10rpx;    bottom: 10rpx;  }}.list {  display: flex;  padding: 20rpx 10rpx 10rpx;  .image-box {    width: 20%;    display: flex;    justify-content: center;    align-items: center;    .image {      width: 50%;      height: 50%;    }  }  .content {    width: 80%;    .title {      color: #333333;      font-size: 32rpx;      line-height: 1.5;      margin-bottom: 10rpx;      font-weight: 600;      display: -webkit-box;      overflow: hidden;      -webkit-line-clamp: 2;      -webkit-box-orient: vertical;    }    .note {      display: flex;      justify-content: space-between;      .date {        color: #999;        font-size: 22rpx;        line-height: 1.5;      }      .button {        background: #3766ff;        color: #fff;        padding: 10rpx 30rpx;        border-radius: 40rpx;        font-size: 20rpx;      }    }  }}.nomessage {  text-align: center;  color: #ccc;  font-size: 30rpx;  margin-top: 10%;  line-height: 90rpx;}</style>

<template>  <view class="page">    <list :list="list" @click="handleClick" />  </view></template>
<script>import list from './list.vue'export default {  components: {    list  },  data () {    return {      list: [      {            tip: '/static/images/rw_label2.png',            image: '/static/images/rw_icon2.png',            title: '接待审批单-郑榕(计划财务科)',            dateTop: '',            date: 2022/7/24,            button: true,            dateLabel: '入库日期'         }      ]    }  },  mounted () {  },  methods: {    handleClick () {}  },}</script>
<style lang="scss" scope></style>