[Improvement] add two new icon (#396)

This commit is contained in:
neverland 2017-12-08 16:09:14 +08:00 committed by GitHub
parent f9ae7e6422
commit 2550a4c507
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 251 additions and 325 deletions

View File

@ -10,98 +10,7 @@
</template>
<script>
const icons = [
'close',
'location',
'clock',
'gold-coin',
'chat',
'exchange',
'upgrade',
'edit',
'contact',
'passed',
'points',
'delete',
'records',
'logistics',
'check',
'checked',
'gift',
'like-o',
'like',
'qr',
'qr-invalid',
'shop',
'photograph',
'add',
'add2',
'add-o',
'photo',
'cart',
'arrow',
'search',
'clear',
'success',
'fail',
'wechat',
'alipay',
'password-view',
'wap-nav',
'password-not-view',
'wap-home',
'ecard-pay',
'balance-pay',
'peer-pay',
'credit-pay',
'debit-pay',
'other-pay',
'shopping-cart',
'browsing-history',
'goods-collect',
'shop-collect',
'receive-gift',
'send-gift',
'setting',
'coupon',
'free-postage',
'discount',
'birthday-privilege',
'member-day-privilege',
'balance-details',
'cash-back-record',
'points-mall',
'exchange-record',
'pending-payment',
'pending-orders',
'pending-deliver',
'pending-evaluate',
'cash-on-deliver',
'gift-card-pay',
'underway',
'point-gift',
'after-sale',
'edit-data',
'question',
'description',
'card',
'gift-card',
'coupon',
'completed',
'value-card',
'certificate',
'tosend',
'sign',
'home',
'phone',
'play',
'pause',
'stop',
'hot',
'new',
'hot-sale',
'new-arrival'
];
const icons = require('../../../packages/vant-css/scripts/icon-config');
export default {
i18n: {
@ -114,7 +23,7 @@ export default {
},
data() {
this.icons = icons;
this.icons = icons.glyphs.map(icon => icon.css);
return {};
}
}

View File

@ -1,73 +1,57 @@
module.exports = {
name: 'vant-icon',
glyphs: [
{
src: '二维码失效.svg',
css: 'qr-invalid'
},
{
src: '二维码.svg',
css: 'qr'
},
{
src: '兑换.svg',
css: 'exchange'
},
{
src: '关闭.svg',
css: 'close'
},
{
src: '其他分店.svg',
css: 'location'
},
{
src: '升级地址.svg',
css: 'upgrade'
},
{
src: '单选.svg',
css: 'check'
src: '加购.svg',
css: 'add-o'
},
{
src: '选中.svg',
css: 'checked'
},
{
src: '喜欢.svg',
css: 'like-o'
},
{
src: '喜欢2.svg',
css: 'like'
src: '认证通过.svg',
css: 'passed'
},
{
src: '客服.svg',
css: 'chat'
},
{
src: '店铺.svg',
css: 'shop'
src: '答疑.svg',
css: 'question'
},
{
src: '拍照.svg',
css: 'photograph'
src: '时钟.svg',
css: 'clock'
},
{
src: '新增地址.svg',
css: 'add'
src: '金币.svg',
css: 'gold-coin'
},
{
src: '添加.svg',
css: 'add2'
src: '播放.svg',
css: 'play'
},
{
src: '加购.svg',
css: 'add-o'
src: '暂停.svg',
css: 'pause'
},
{
src: '照片.svg',
css: 'photo'
src: '停止.svg',
css: 'stop'
},
{
src: 'more-o.svg',
css: 'more-o'
},
{
src: '喜欢.svg',
css: 'like-o'
},
{
src: '物流.svg',
@ -78,48 +62,124 @@ module.exports = {
css: 'edit'
},
{
src: '认证通过.svg',
css: 'passed'
src: '兑换.svg',
css: 'exchange'
},
{
src: '其他分店.svg',
css: 'location'
},
{
src: '购物车2.svg',
css: 'cart'
},
{
src: '进入箭头.svg',
css: 'arrow'
src: '店铺.svg',
css: 'shop'
},
{
src: '送礼.svg',
css: 'gift'
},
{
src: '搜索.svg',
css: 'search'
},
{
src: '清除搜索.svg',
css: 'clear'
},
{
src: '成功.svg',
css: 'success'
},
{
src: '失败.svg',
css: 'fail'
},
{
src: '联系人.svg',
css: 'contact'
},
{
src: '微信支付.svg',
css: 'wechat'
src: 'wap首页.svg',
css: 'wap-home'
},
{
src: '支付宝支付.svg',
css: 'alipay'
src: '积分.svg',
css: 'points'
},
{
src: '折扣.svg',
css: 'discount'
},
{
src: '积分礼包.svg',
css: 'point-gift'
},
{
src: '售后.svg',
css: 'after-sale'
},
{
src: '编辑资料.svg',
css: 'edit-data'
},
{
src: '删除.svg',
css: 'delete'
},
{
src: '记录.svg',
css: 'records'
},
{
src: '已完成.svg',
css: 'completed'
},
{
src: '认证.svg',
css: 'certificate'
},
{
src: '待发货2.svg',
css: 'tosend'
},
{
src: '已完成2.svg',
css: 'sign'
},
{
src: '首页.svg',
css: 'home'
},
{
src: '包邮.svg',
css: 'free-postage'
},
{
src: '生日特权.svg',
css: 'birthday-privilege'
},
{
src: '会员日特权.svg',
css: 'member-day-privilege'
},
{
src: '余额明细.svg',
css: 'balance-details'
},
{
src: '返现记录.svg',
css: 'cash-back-record'
},
{
src: '积分商城.svg',
css: 'points-mall'
},
{
src: '兑换记录.svg',
css: 'exchange-record'
},
{
src: '待付款.svg',
css: 'pending-payment'
},
{
src: '待接单.svg',
css: 'pending-orders'
},
{
src: '待发货.svg',
css: 'pending-deliver'
},
{
src: '待评价.svg',
css: 'pending-evaluate'
},
{
src: '密码可见.svg',
@ -130,12 +190,72 @@ module.exports = {
css: 'password-not-view'
},
{
src: 'wap导航.svg',
css: 'wap-nav'
src: '单选.svg',
css: 'check'
},
{
src: 'wap首页.svg',
css: 'wap-home'
src: '进入箭头.svg',
css: 'arrow'
},
{
src: '成功.svg',
css: 'success'
},
{
src: '失败.svg',
css: 'fail'
},
{
src: '新增地址.svg',
css: 'add'
},
{
src: '选中.svg',
css: 'checked'
},
{
src: '喜欢2.svg',
css: 'like'
},
{
src: '拍照.svg',
css: 'photograph'
},
{
src: '二维码失效.svg',
css: 'qr-invalid'
},
{
src: '二维码.svg',
css: 'qr'
},
{
src: '添加.svg',
css: 'add2'
},
{
src: '照片.svg',
css: 'photo'
},
{
src: '搜索.svg',
css: 'search'
},
{
src: '清除搜索.svg',
css: 'clear'
},
{
src: '微信支付.svg',
css: 'wechat'
},
{
src: '支付宝支付.svg',
css: 'alipay'
},
{
src: 'wap导航.svg',
css: 'wap-nav'
},
{
src: '有赞E卡.svg',
@ -189,62 +309,10 @@ module.exports = {
src: '设置.svg',
css: 'setting'
},
{
src: '积分.svg',
css: 'points'
},
{
src: '优惠券.svg',
css: 'coupon'
},
{
src: '包邮.svg',
css: 'free-postage'
},
{
src: '折扣.svg',
css: 'discount'
},
{
src: '生日特权.svg',
css: 'birthday-privilege'
},
{
src: '会员日特权.svg',
css: 'member-day-privilege'
},
{
src: '余额明细.svg',
css: 'balance-details'
},
{
src: '返现记录.svg',
css: 'cash-back-record'
},
{
src: '积分商城.svg',
css: 'points-mall'
},
{
src: '兑换记录.svg',
css: 'exchange-record'
},
{
src: '待付款.svg',
css: 'pending-payment'
},
{
src: '待接单.svg',
css: 'pending-orders'
},
{
src: '待发货.svg',
css: 'pending-deliver'
},
{
src: '待评价.svg',
css: 'pending-evaluate'
},
{
src: '礼品卡支付.svg',
css: 'gift-card-pay'
@ -258,28 +326,8 @@ module.exports = {
css: 'underway'
},
{
src: '积分礼包.svg',
css: 'point-gift'
},
{
src: '售后.svg',
css: 'after-sale'
},
{
src: '编辑资料.svg',
css: 'edit-data'
},
{
src: '答疑.svg',
css: 'question'
},
{
src: '删除.svg',
css: 'delete'
},
{
src: '记录.svg',
css: 'records'
src: '电话.svg',
css: 'phone'
},
{
src: '描述.svg',
@ -289,57 +337,13 @@ module.exports = {
src: '卡.svg',
css: 'card'
},
{
src: '礼卡.svg',
css: 'gift-card'
},
{
src: '时钟.svg',
css: 'clock'
},
{
src: '金币.svg',
css: 'gold-coin'
},
{
src: '已完成.svg',
css: 'completed'
},
{
src: '会员余额.svg',
css: 'value-card'
},
{
src: '认证.svg',
css: 'certificate'
},
{
src: '待发货2.svg',
css: 'tosend'
},
{
src: '已完成2.svg',
css: 'sign'
},
{
src: '首页.svg',
css: 'home'
},
{
src: '电话.svg',
css: 'phone'
},
{
src: '播放.svg',
css: 'play'
},
{
src: '暂停.svg',
css: 'pause'
},
{
src: '停止.svg',
css: 'stop'
src: '礼卡.svg',
css: 'gift-card'
},
{
src: 'HOT.svg',
@ -356,6 +360,10 @@ module.exports = {
{
src: '热卖.svg',
css: 'hot-sale'
},
{
src: 'more.svg',
css: 'more'
}
]
};

View File

@ -2,7 +2,7 @@
font-style: normal;
font-weight: normal;
font-family: 'vant-icon';
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-ee8bbfc9.ttf') format('truetype');
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-dbc12cf1.ttf') format('truetype');
}
.van-icon {
@ -163,123 +163,129 @@
.van-icon-member-day-privilege:before {
content: "\F030";
}
.van-icon-new-arrival:before {
.van-icon-more-o:before {
content: "\F031";
}
.van-icon-new:before {
.van-icon-more:before {
content: "\F032";
}
.van-icon-other-pay:before {
.van-icon-new-arrival:before {
content: "\F033";
}
.van-icon-passed:before {
.van-icon-new:before {
content: "\F034";
}
.van-icon-password-not-view:before {
.van-icon-other-pay:before {
content: "\F035";
}
.van-icon-password-view:before {
.van-icon-passed:before {
content: "\F036";
}
.van-icon-pause:before {
.van-icon-password-not-view:before {
content: "\F037";
}
.van-icon-peer-pay:before {
.van-icon-password-view:before {
content: "\F038";
}
.van-icon-pending-deliver:before {
.van-icon-pause:before {
content: "\F039";
}
.van-icon-pending-evaluate:before {
.van-icon-peer-pay:before {
content: "\F03A";
}
.van-icon-pending-orders:before {
.van-icon-pending-deliver:before {
content: "\F03B";
}
.van-icon-pending-payment:before {
.van-icon-pending-evaluate:before {
content: "\F03C";
}
.van-icon-phone:before {
.van-icon-pending-orders:before {
content: "\F03D";
}
.van-icon-photo:before {
.van-icon-pending-payment:before {
content: "\F03E";
}
.van-icon-photograph:before {
.van-icon-phone:before {
content: "\F03F";
}
.van-icon-play:before {
.van-icon-photo:before {
content: "\F040";
}
.van-icon-point-gift:before {
.van-icon-photograph:before {
content: "\F041";
}
.van-icon-points-mall:before {
.van-icon-play:before {
content: "\F042";
}
.van-icon-points:before {
.van-icon-point-gift:before {
content: "\F043";
}
.van-icon-qr-invalid:before {
.van-icon-points-mall:before {
content: "\F044";
}
.van-icon-qr:before {
.van-icon-points:before {
content: "\F045";
}
.van-icon-question:before {
.van-icon-qr-invalid:before {
content: "\F046";
}
.van-icon-receive-gift:before {
.van-icon-qr:before {
content: "\F047";
}
.van-icon-records:before {
.van-icon-question:before {
content: "\F048";
}
.van-icon-search:before {
.van-icon-receive-gift:before {
content: "\F049";
}
.van-icon-send-gift:before {
.van-icon-records:before {
content: "\F04A";
}
.van-icon-setting:before {
.van-icon-search:before {
content: "\F04B";
}
.van-icon-shop-collect:before {
.van-icon-send-gift:before {
content: "\F04C";
}
.van-icon-shop:before {
.van-icon-setting:before {
content: "\F04D";
}
.van-icon-shopping-cart:before {
.van-icon-shop-collect:before {
content: "\F04E";
}
.van-icon-sign:before {
.van-icon-shop:before {
content: "\F04F";
}
.van-icon-stop:before {
.van-icon-shopping-cart:before {
content: "\F050";
}
.van-icon-success:before {
.van-icon-sign:before {
content: "\F051";
}
.van-icon-tosend:before {
.van-icon-stop:before {
content: "\F052";
}
.van-icon-underway:before {
.van-icon-success:before {
content: "\F053";
}
.van-icon-upgrade:before {
.van-icon-tosend:before {
content: "\F054";
}
.van-icon-value-card:before {
.van-icon-underway:before {
content: "\F055";
}
.van-icon-wap-home:before {
.van-icon-upgrade:before {
content: "\F056";
}
.van-icon-wap-nav:before {
.van-icon-value-card:before {
content: "\F057";
}
.van-icon-wechat:before {
.van-icon-wap-home:before {
content: "\F058";
}
.van-icon-wap-nav:before {
content: "\F059";
}
.van-icon-wechat:before {
content: "\F05A";
}

View File

@ -2,7 +2,7 @@
@import './mixins/ellipsis.css';
$van-tabs-line-height: 44px;
$van-tabs-card-height: 28px;
$van-tabs-card-height: 30px;
.van-tabs {
position: relative;
@ -11,7 +11,8 @@ $van-tabs-card-height: 28px;
top: 0;
left: 0;
right: 0;
z-index: 1;
z-index: 99;
overflow: hidden;
position: absolute;
&--page-top {
@ -33,18 +34,20 @@ $van-tabs-card-height: 28px;
&--line {
height: 100%;
padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
box-sizing: content-box;
}
&--card {
margin: 0 15px;
border-radius: 2px;
box-sizing: border-box;
height: $van-tabs-card-height;
border: 1px solid $gray-darker;
.van-tab {
color: $gray-darker;
line-height: $van-tabs-card-height;
border-right: 1px solid $gray-darker;
line-height: calc($van-tabs-card-height - 2px);
&:last-child {
border-right: none;