<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>查看凭证</h3>
      <h5>查看应收账款等凭证</h5>
    </div>
    <div class="content">
      <div class="flex-item">
        <div>下载合同：</div>
        <ul>
          <li class="flex-item">
            <div>合同名字.pdf</div>
            <el-button size="mini">下载</el-button>
          </li>
        </ul>
      </div>
      <div class="flex" style="margin-top: 50px;">
        <div>查看图片：</div>
        <div class="img-list flex">
          <div v-for="(item,index) in imgList" :key="index">
            <el-image :src="item" :preview-src-list="srcList" style="width: 100px; height: 100px">
            </el-image>
          </div>       
        </div>
      </div>
      <div class="backButton">
        <el-button @click="back">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
export default {
  components: {
    dataBreadcrumb
  },
  data() {
    return {
      imgList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
      breads: ['应收账款买断管理', '应收账款买断列表'],
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    }   
  }

}
</script>

<style scoped>
	.img-list{
		flex-wrap: wrap;
	
	}
	.img-list>div{
		margin-right: 20px;
	}
	ul>li>div{
		margin-right: 10px;
	}
	.backButton{
		width:100px;
		margin: 200px auto 30px;
	}
</style>
