blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Contact: upgrade style (#1693)

Browse Source
This commit is contained in:
neverland 2018-08-27 14:05:46 +08:00 committed by GitHub
parent 5458a83ef1
commit d9fb7f7e6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 82 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/contact-card/index.vue
View File

@ -1,20 +1,18 @@
<template> <template>
<div :class="b([type, { uneditable: !editable }])" @click="onClick"> <cell
<div :class="b('content')"> center
<template v-if="type === 'add'"> :border="false"
<icon :class="b('icon')" name="add2" /> :class="b([type])"
<div :class="b('text')">{{ addText || $t('addText') }}</div> :is-link="editable"
</template> :icon="type === 'edit' ? 'contact' : 'add2'"
<template v-else-if="type === 'edit'"> @click="onClick"
<icon :class="b('icon')" name="contact" /> >
<div :class="b('text')"> <template v-if="type === 'add'">{{ addText || $t('addText') }}</template>
<div>{{ $t('contact') }}：{{ name }}</div> <template v-else>
<div>{{ $t('tel') }}：{{ tel }}</div> <div>{{ $t('name') }}：{{ name }}</div>
</div> <div>{{ $t('tel') }}：{{ tel }}</div>
</template> </template>
</div> </cell>
<icon v-if="editable" :class="b('arrow')" name="arrow" />
</div>
</template> </template>
<script> <script>

48
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -3,14 +3,13 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-contact-card van-contact-card--add"> <div class="van-cell van-cell--center van-cell--clickable van-contact-card van-contact-card--add">
<div class="van-contact-card__content"> <i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-add2 van-contact-card__icon" style="color:undefined;font-size:undefined;"> <!---->
<!----> </i>
</i> <!---->
<div class="van-contact-card__text">添加订单联系人信息</div> <div class="van-cell__value van-cell__value--alone">添加订单联系人信息</div>
</div> <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow van-contact-card__arrow" style="color:undefined;font-size:undefined;">
<!----> <!---->
</i> </i>
</div> </div>
@ -22,7 +21,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><p class="van-contact-list__text">联系人：张三</p> <p class="van-contact-list__text">电话：13000000000</p></span></div> <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
</div> </div>
<i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;"> <i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
<!----> <!---->
@ -30,18 +29,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add"> <button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add">
<i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;font-size:undefined;"> <!----><span class="van-button__text">新建联系人</span></button>
<!---->
</i>
<div class="van-cell__title"><span>新建联系人</span>
<!---->
</div>
<!---->
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
</div> </div>
</div> </div>
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;"> <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
@ -89,15 +78,14 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-contact-card van-contact-card--edit van-contact-card--uneditable"> <div class="van-cell van-cell--center van-contact-card van-contact-card--edit">
<div class="van-contact-card__content"> <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-contact van-contact-card__icon" style="color:undefined;font-size:undefined;"> <!---->
<!----> </i>
</i> <!---->
<div class="van-contact-card__text"> <div class="van-cell__value van-cell__value--alone">
<div>联系人：张三</div> <div>张三：张三</div>
<div>电话：13000000000</div> <div>电话：13000000000</div>
</div>
</div> </div>
<!----> <!---->
</div> </div>

13
packages/contact-card/test/__snapshots__/index.spec.js.snap
View File

@ -5,17 +5,6 @@ exports[`ContactList render 1`] = `
<div class="van-radio-group"> <div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom"></div> <div class="van-cell-group van-hairline--top-bottom"></div>
</div> </div>
<div class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add"> <van-button square="" size="large" type="danger" text="新建联系人" class="van-contact-list__add"></van-button>
<i class="van-icon van-icon-add van-cell__left-icon">
<!---->
</i>
<div class="van-cell__title"><span>新建联系人</span>
<!---->
</div>
<!---->
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
</i>
</div>
</div> </div>
`; `;

20
packages/contact-list/index.vue
View File

@ -4,19 +4,23 @@
<cell-group> <cell-group>
<cell v-for="(item, index) in list" :key="item.id" is-link> <cell v-for="(item, index) in list" :key="item.id" is-link>
<radio :name="item.id" @click="$emit('select', item, index)"> <radio :name="item.id" @click="$emit('select', item, index)">
<p :class="b('text')">{{ $t('contact') }}：{{ item.name }}</p> <div :class="b('name')">{{ item.name }}，{{ item.tel }}</div>
<p :class="b('text')">{{ $t('tel') }}：{{ item.tel }}</p>
</radio> </radio>
<icon slot="right-icon" name="edit" :class="b('edit')" @click="$emit('edit', item, index)" /> <icon
slot="right-icon"
name="edit"
:class="b('edit')"
@click="$emit('edit', item, index)"
/>
</cell> </cell>
</cell-group> </cell-group>
</radio-group> </radio-group>
<cell <van-button
icon="add" square
is-link size="large"
type="danger"
:class="b('add')" :class="b('add')"
class="van-hairline--top" :text="addText || $t('addText')"
:title="addText || $t('addText')"
@click="$emit('add')" @click="$emit('add')"
/> />
</div> </div>

1
packages/locale/lang/en-US.js
View File

@ -6,7 +6,6 @@ export default {
cancel: 'Cancel', cancel: 'Cancel',
delete: 'Delete', delete: 'Delete',
complete: 'Complete', complete: 'Complete',
contact: 'Name',
loadingTip: 'Loading...', loadingTip: 'Loading...',
telEmpty: 'Please fill in the tel', telEmpty: 'Please fill in the tel',
nameEmpty: 'Please fill in the name', nameEmpty: 'Please fill in the name',

1
packages/locale/lang/zh-CN.js
View File

@ -6,7 +6,6 @@ export default {
cancel: '取消', cancel: '取消',
delete: '删除', delete: '删除',
complete: '完成', complete: '完成',
contact: '联系人',
loadingTip: '加载中...', loadingTip: '加载中...',
telEmpty: '请填写电话', telEmpty: '请填写电话',
nameEmpty: '请填写姓名', nameEmpty: '请填写姓名',

1
packages/locale/lang/zh-HK.js
View File

@ -6,7 +6,6 @@ export default {
cancel: '取消', cancel: '取消',
delete: '刪除', delete: '刪除',
complete: '完成', complete: '完成',
contact: '聯系人',
loadingTip: '加載中...', loadingTip: '加載中...',
telEmpty: '請填寫電話', telEmpty: '請填寫電話',
nameEmpty: '請填寫姓名', nameEmpty: '請填寫姓名',

2
packages/vant-css/src/address-list.css
View File

@ -2,6 +2,8 @@
.van-address-list { .van-address-list {
height: 100%; height: 100%;
padding-bottom: 100px;
box-sizing: border-box;
.van-cell { .van-cell {
padding: 15px; padding: 15px;

65
packages/vant-css/src/contact-card.css
View File

@ -1,68 +1,33 @@
@import './common/var.css'; @import './common/var.css';
.van-contact-card { .van-contact-card {
position: relative; padding: 15px;
background-color: $white;
&:active { .van-cell__value {
background-color: $active-color; margin-left: 5px;
} line-height: 20px;
display: inline-block;
&--uneditable { vertical-align: middle;
&:active {
background-color: $white;
}
} }
&--add { &--add {
line-height: 40px; .van-cell__value {
line-height: 40px;
}
.van-contact-card__icon { .van-cell__left-icon {
width: 40px;
color: $blue; color: $blue;
font-size: 40px; font-size: 40px;
} }
} }
&--edit { &::before {
.van-contact-card__icon {
font-size: 18px;
vertical-align: top;
}
}
&__content {
padding: 15px 10px;
}
&__icon,
&__text {
display: inline-block;
vertical-align: middle;
}
&__icon {
margin-right: 10px;
}
&__text {
line-height: 20px;
font-size: 14px;
}
&__arrow {
top: 50%;
right: 10px;
font-size: 12px;
position: absolute;
color: $gray-dark;
transform: translate3d(0, -50%, 0);
}
&::after {
content: ''; content: '';
display: block; left: 0;
right: 0;
bottom: 0;
height: 2px; height: 2px;
position: absolute;
background: repeating-linear-gradient( background: repeating-linear-gradient(
-45deg, -45deg,
#ff6c6c 0, #ff6c6c 0,

39
packages/vant-css/src/contact-list.css
View File

@ -2,10 +2,12 @@
.van-contact-list { .van-contact-list {
height: 100%; height: 100%;
overflow-y: auto; padding-bottom: 65px;
padding-bottom: 55px;
box-sizing: border-box; box-sizing: border-box;
background-color: $background-color;
.van-cell {
padding: 15px;
}
.van-cell__value { .van-cell__value {
color: $text-color; color: $text-color;
@ -14,33 +16,40 @@
} }
.van-radio__label { .van-radio__label {
margin-left: 32px; margin-left: 27px;
} }
.van-radio__input { .van-radio__input {
top: 50%; top: 50%;
left: 0; left: 0;
font-size: 16px;
position: absolute; position: absolute;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.van-icon-checked { .van-icon-checked {
color: $blue; color: $red;
} }
&__text { &__group {
margin: 0; height: 100%;
color: $text-color; overflow-y: scroll;
padding-bottom: 100px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
&__name {
font-size: 14px; font-size: 14px;
line-height: 1.5; font-weight: 500;
line-height: 20px;
} }
&__edit { &__edit {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 15px; right: 15px;
font-size: 20px; font-size: 16px;
color: $gray-dark;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
@ -49,13 +58,5 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 9999; z-index: 9999;
padding-left: 15px;
font-size: 16px;
.van-icon-add {
color: $blue;
font-size: 20px;
line-height: 1.2;
}
} }
} }