demo 原始链接:https://vux.li/demos/v2/#/component/card
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <divider>{{ $t('Simple card with header and content') }}</divider>\n\t <card :header=\"{title: $t('My wallet')}\">\n <div slot=\"content\" class=\"card-demo-flex card-demo-content01\">\n <div class=\"vux-1px-r\">\n <span>1130</span>\n <br/>\n {{ $t('Point') }}\n </div>\n <div class=\"vux-1px-r\">\n <span>15</span>\n <br/>\n {{ $t('Coupon') }}\n </div>\n <div class=\"vux-1px-r\">\n <span>0</span>\n <br/>\n {{ $t('Gift card') }}\n </div>\n <div>\n <span>88</span>\n <br/>\n {{ $t('Cash') }}\n </div>\n </div>\n </card>\n\n <br>\n <divider>{{ $t('With footer') }}</divider>\n <card :header=\"{title: $t('Product details') }\" :footer=\"{title: $t('More'),link:'/component/panel'}\">\n <p slot=\"content\" class=\"card-padding\">{{ $t('Custom content') }}</p>\n </card>\n\n <br>\n <divider>{{ $t('Use header slot and content slot') }}</divider>\n <card>\n <img slot=\"header\" src=\"http://placeholder.qiniudn.com/640x300\" style=\"width:100%;display:block;\">\n <div slot=\"content\" class=\"card-padding\">\n <p style=\"color:#999;font-size:12px;\">Posted on January 21, 2015</p>\n <p style=\"font-size:14px;line-height:1.2;\">Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit..</p>\n </div>\n </card>\n </div>\n</template>\n\n\n\n<script>\nimport { Divider, Card } from 'vux'\n\nexport default {\n components: {\n Card,\n Divider\n }\n}\n</script>\n\n<style scoped lang=\"less\">\n@import '~vux/src/styles/1px.less';\n\n.card-demo-flex {\n display: flex;\n}\n.card-demo-content01 {\n padding: 10px 0;\n}\n.card-padding {\n padding: 15px;\n}\n.card-demo-flex > div {\n flex: 1;\n text-align: center;\n font-size: 12px;\n}\n.card-demo-flex span {\n color: #f74c31;\n}\n</style>\n\n
\n