<template>
  <div class="daily-set-content boder-box">
    <div class="table-condition flex flex-space-between m-b-23">
      <div class="table-condition-left flex flex-align-center">
        <el-input placeholder="请输入模板ID/名称、创建人" class="w-260"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
      </div>
    </div>
    <div class="tip-text">
      二维码只是样式预览效果，请勿直接使用
    </div>
    <div class="card-content">
      <card-view :content="item" v-for="item in list" :key="item.templateId" />
    </div>
  </div>
</template>
<script>
import cardView from './cardView';
export default {
  data() {
    return {
      list: [
        {
          templateName: '模板名称模板名称模板名称模板名称模板',
          templateCode: 'MB01123456789012300001',
          templateId: '1',
          pageTitle: '页面页面页面页面标题',
          merchantName: '商户名称商户名称商户名称商户名称商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二'
        },
        {
          templateName: '模板名称模板名称模板名称模板名称模板',
          templateCode: 'MB01123456789012300001',
          templateId: '2',
          pageTitle: '页面标题2',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: '',
          guideComment: '长按识别二维码添加您的专属导购'
        },
        {
          templateName: '模板名称模板名称模板名称模板名称模板',
          templateCode: 'MB01123456789012300001',
          templateId: '3',
          pageTitle: '页面标题3',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按识别二维码添加您的专属导购'
        },
        {
          templateName: '模板名称模板名称模板名称模板名称模板',
          templateCode: 'MB01123456789012300001',
          templateId: '4',
          pageTitle: '页面标题4',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按识别二维码添加您的专属导购'
        },
        {
          templateName: '模板名称模板名称模板名称模板名称模板',
          templateCode: 'MB01123456789012300001',
          templateId: '5',
          pageTitle: '页面标题5',
          merchantName: '商户名称',
          merchantPhoneNumber: '0571-1234567',
          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
          guideComment: '长按识别二维码添加您的专属导购'
        }
      ]
    };
  },
  components: {
    cardView
  },
  methods: {}
};
</script>

<style type="text/scss" lang="scss" scoped>
.daily-set-content {
  padding: 20px;
}
.card-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
</style>
