import { Button, Cell, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'content-information',
  setup() {
    return () => (
      <div class={styles.contentInformation}>
        <Button icon="plus" block class={styles.addPhone}>
          添加资讯
        </Button>

        {[1, 2, 3, 4, 5, 6].map((i) => (
          <Cell center border={false} class={styles.contentCell}>
            {{
              icon: () => (
                <Image
                  class={styles.img}
                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
                />
              ),
              title: () => <div class={styles.title}>带你认识一位管乐大师</div>,
              label: () => (
                <div class={styles.label}>
                  <div class={[styles.content, 'van-multi-ellipsis--l2']}>
                    音乐是人类共通的灵魂，而音乐大师就是灵魂的工程师。学习管乐音乐是人类共通的灵魂，而音乐大师就是灵魂的工程师。学习管乐
                  </div>
                  <div class={styles.time}>2021年10月15日</div>
                </div>
              )
            }}
          </Cell>
        ))}
      </div>
    )
  }
})
