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

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

@ -3,14 +3,13 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-contact-card van-contact-card--add">
<div class="van-contact-card__content">
<i class="van-icon van-icon-add2 van-contact-card__icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
<div class="van-contact-card__text">添加订单联系人信息</div>
</div>
<i class="van-icon van-icon-arrow van-contact-card__arrow" style="color:undefined;font-size:undefined;">
<div class="van-cell van-cell--center van-cell--clickable van-contact-card van-contact-card--add">
<i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">添加订单联系人信息</div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
@ -22,7 +21,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<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>
<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 class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add">
<i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
</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>
<button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add">
<!----><span class="van-button__text">新建联系人</span></button>
</div>
</div>
<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 class="van-contact-card van-contact-card--edit van-contact-card--uneditable">
<div class="van-contact-card__content">
<i class="van-icon van-icon-contact van-contact-card__icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
<div class="van-contact-card__text">
<div>联系人：张三</div>
<div>电话：13000000000</div>
</div>
<div class="van-cell van-cell--center van-contact-card van-contact-card--edit">
<i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">
<div>张三：张三</div>
<div>电话：13000000000</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-cell-group van-hairline--top-bottom"></div>
</div>
<div class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add">
<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>
<van-button square="" size="large" type="danger" text="新建联系人" class="van-contact-list__add"></van-button>
</div>
`;

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

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

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

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

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

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

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

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

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

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

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

@ -1,68 +1,33 @@
@import './common/var.css';
.van-contact-card {
position: relative;
background-color: $white;
padding: 15px;
&:active {
background-color: $active-color;
}
&--uneditable {
&:active {
background-color: $white;
}
.van-cell__value {
margin-left: 5px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
&--add {
line-height: 40px;
.van-cell__value {
line-height: 40px;
}
.van-contact-card__icon {
width: 40px;
.van-cell__left-icon {
color: $blue;
font-size: 40px;
}
}
&--edit {
.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 {
&::before {
content: '';
display: block;
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: repeating-linear-gradient(
-45deg,
#ff6c6c 0,

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

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