mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Remove OrderGoods
This commit is contained in:
陈嘉涵
parent
061334a820
commit
378ef55a0a
@ -1,229 +0,0 @@
|
||||
## OrderGoods 下单页商品列表
|
||||
|
||||
<script>
|
||||
|
||||
const item1 = {
|
||||
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg',
|
||||
pay_price: 1050,
|
||||
title: '商品 A',
|
||||
num: '1'
|
||||
};
|
||||
|
||||
const item2 = {
|
||||
points_price: 200,
|
||||
pay_price: 50,
|
||||
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg',
|
||||
title: '商品 B',
|
||||
num: '15',
|
||||
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }]
|
||||
}
|
||||
|
||||
const item3 = {
|
||||
pay_price: 50,
|
||||
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg',
|
||||
title: '商品 C',
|
||||
num: '15',
|
||||
is_presale: true,
|
||||
delivery_time: '三天后发货',
|
||||
show_delivery_time: true,
|
||||
is_presale: true,
|
||||
is_present: true,
|
||||
message: {
|
||||
'留言1': '留言1内容',
|
||||
'留言2': 'https://img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemList1: [item1],
|
||||
itemList2: [item2],
|
||||
itemList3: [item3],
|
||||
itemListMulti: [item1, item2, item3],
|
||||
emptyItemList: [],
|
||||
message1: '',
|
||||
message2: '',
|
||||
message3: '',
|
||||
message4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { OrderGoods } from 'vant';
|
||||
|
||||
Vue.component(OrderGoods.name, OrderGoods);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-order-goods
|
||||
v-model="message1"
|
||||
shop-name="起码运动馆"
|
||||
:price="1050"
|
||||
:item-list="itemList1"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
message1: '',
|
||||
itemList1: [{
|
||||
img_url: '//img.yzcdn.cn/...',
|
||||
pay_price: 1050,
|
||||
title: '商品 A',
|
||||
num: '1'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 积分商品
|
||||
|
||||
:::demo 积分商品
|
||||
```html
|
||||
<van-order-goods
|
||||
v-model="message2"
|
||||
shop-name="起码运动馆"
|
||||
:item-list="itemList2"
|
||||
:price="50"
|
||||
:points="200"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
message2: '',
|
||||
itemList2: [{
|
||||
points_price: 200,
|
||||
pay_price: 50,
|
||||
img_url: '//img.yzcdn.cn/...',
|
||||
title: '商品 B',
|
||||
num: '15',
|
||||
sku: [
|
||||
{ v: '商品SKU1' },
|
||||
{ v: '商品SKU2' }
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 预售商品
|
||||
|
||||
:::demo 预售商品
|
||||
```html
|
||||
<van-order-goods
|
||||
v-model="message3"
|
||||
shop-name="起码运动馆"
|
||||
:price="1050"
|
||||
:item-list="itemList3"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
message3: '',
|
||||
itemList3: [{
|
||||
pay_price: 50,
|
||||
img_url: '//img.yzcdn.cn/...',
|
||||
title: '商品 C',
|
||||
num: '15',
|
||||
delivery_time: '三天后发货',
|
||||
show_delivery_time: true,
|
||||
is_presale: true,
|
||||
is_present: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 商品为空
|
||||
|
||||
:::demo 商品为空
|
||||
```html
|
||||
<van-order-goods shop-name="起码运动馆" :item-list="[]" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 多个商品
|
||||
|
||||
:::demo 多个商品
|
||||
```html
|
||||
<van-order-goods
|
||||
v-model="message4"
|
||||
shop-name="起码运动馆"
|
||||
:item-list="itemListMulti"
|
||||
:price="1050"
|
||||
:message-editable="false"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| shop-name | 店铺名称 | `String` | |
|
||||
| shop-link | 店铺链接 | `String` | |
|
||||
| header-icon | 店铺名称左侧的图标类型 | `String` | `shop` |
|
||||
| header-badge | 店铺名称右侧的徽章链接 | `String` | |
|
||||
| item-list | 商品列表 | `Array` | `[]` |
|
||||
| empty-icon | 商品列表为空时的图标 | `String` | |
|
||||
| empty-message | 商品列表为空时的提示文案 | `String` | `当前没有可购买的商品，请重新选择` |
|
||||
| empty-button-text | 商品列表为空时的按钮文案 | `String` | `返回重新选择` |
|
||||
| v-model | 买家留言 | `String` | `''` |
|
||||
| show-total-price | 是否显示价格栏 | `Boolean` | `true` |
|
||||
| show-message | 是否显示留言栏 | `Boolean` | `true` |
|
||||
| message-editable | 留言是否可以编辑 | `Boolean` | `true` |
|
||||
| price | 合计金额（单位分） | `Number` | |
|
||||
| points | 合计积分 | `Number` | |
|
||||
|
||||
### 数据格式
|
||||
#### itemList 中的配送方式字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| title | 商品名称 | `String` |
|
||||
| img_url | 图片地址 | `String` |
|
||||
| delivery_time | 发货时间 | `String` |
|
||||
| num | 商品数量 | `Number` |
|
||||
| points_price | 积分价格 | `Number` |
|
||||
| pay_price（单位分） | 金额 | `Number` |
|
||||
| sku | 商品 sku | `Array` |
|
||||
| message | 商品留言 | `Array` |
|
||||
| is_presale | 是否为预售 | `Boolean` |
|
||||
| is_present | 是否为赠品 | `Boolean` |
|
||||
| is_period_buy | 是否为周期购 | `Boolean` |
|
||||
| show_delivery_time | 是否显示发货时间 | `Boolean` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| clickEmptyButton | 点击商品为空时的按钮时触发 | - |
|
||||
|
||||
### Slot
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| 默认 | 在商品列表和留言之间插入内容 |
|
||||
| top | 在标题和商品列表之间插入内容 |
|
||||
| bottom | 在合计价格下方插入内容 |
|
||||
@ -24,7 +24,6 @@ import ImagePreview from './image-preview';
|
||||
import Lazyload from './lazyload';
|
||||
import Loading from './loading';
|
||||
import NoticeBar from './notice-bar';
|
||||
import OrderGoods from './order-goods';
|
||||
import Panel from './panel';
|
||||
import PayOrder from './pay-order';
|
||||
import Picker from './picker';
|
||||
@ -74,7 +73,6 @@ const components = [
|
||||
Icon,
|
||||
Loading,
|
||||
NoticeBar,
|
||||
OrderGoods,
|
||||
Panel,
|
||||
PayOrder,
|
||||
Picker,
|
||||
@ -140,7 +138,6 @@ export {
|
||||
Lazyload,
|
||||
Loading,
|
||||
NoticeBar,
|
||||
OrderGoods,
|
||||
Panel,
|
||||
PayOrder,
|
||||
Picker,
|
||||
|
||||
@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="van-order-goods-card van-hairline">
|
||||
<van-card>
|
||||
<div slot="thumb">
|
||||
<img :src="data.img_url" />
|
||||
<span v-if="data.is_present" class="van-order-goods-card__present"></span>
|
||||
</div>
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">{{ data.title }}</h4>
|
||||
<span class="van-card__price">{{ price }}</span>
|
||||
</div>
|
||||
<template slot="desc">
|
||||
<div class="van-card__row">
|
||||
<p class="van-card__desc">{{ desc }}</p>
|
||||
<span class="van-card__num">x {{ data.num }}</span>
|
||||
</div>
|
||||
<div class="van-card__row">
|
||||
<div class="van-order-goods-card__tags">
|
||||
<span v-if="data.is_presale" class="van-order-goods-card__tag-green">预售</span>
|
||||
<span v-if="data.is_period_buy" class="van-order-goods-card__tag-red">周期购</span>
|
||||
</div>
|
||||
<van-button
|
||||
class="van-order-goods-card__message-button"
|
||||
v-if="hasMessage"
|
||||
@click="onClickMessageButton"
|
||||
>
|
||||
查看留言
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-card>
|
||||
<van-cell class="van-order-goods-card__delivery van-hairline--top" v-if="data.show_delivery_time" title="发货时间" :value="data.delivery_time" />
|
||||
<van-popup v-if="hasMessage" class="van-order-goods-card__message" v-model="showMessage" position="right">
|
||||
<h2>备注信息</h2>
|
||||
<ul>
|
||||
<li v-for="(value, key) in data.message" class="van-hairline">
|
||||
<label>{{ key }}</label>
|
||||
<a v-if="isURL(value)" :href="value">
|
||||
<img :src="value" />
|
||||
</a>
|
||||
<p v-else>{{ value }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="van-order-goods-card__button">
|
||||
<van-button size="large" @click="showMessage = false">查看订单详情</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../card';
|
||||
import Cell from '../cell';
|
||||
import Button from '../button';
|
||||
import Popup from '../popup';
|
||||
import { getTotalPrice } from './utils';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-card',
|
||||
|
||||
components: {
|
||||
[Card.name]: Card,
|
||||
[Cell.name]: Cell,
|
||||
[Popup.name]: Popup,
|
||||
[Button.name]: Button
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showMessage: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
price() {
|
||||
return getTotalPrice(this.data.pay_price, this.data.points_price);
|
||||
},
|
||||
desc() {
|
||||
return this.data.sku ? this.data.sku.filter(item => item.v).map(item => item.v).join(', ') : '';
|
||||
},
|
||||
hasMessage() {
|
||||
return this.data.message && Object.keys(this.data.message).length;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickMessageButton() {
|
||||
this.showMessage = true;
|
||||
},
|
||||
isURL(value) {
|
||||
return /^\s*http(s)*:\/\/.+/.test(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="van-order-goods-empty van-hairline--top">
|
||||
<img :src="icon" />
|
||||
<p>{{ message }}</p>
|
||||
<van-button @click="$emit('clickEmptyButton')">{{ buttonText }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../button';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-empty',
|
||||
|
||||
components: {
|
||||
[Button.name]: Button
|
||||
},
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
message: String,
|
||||
buttonText: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div class="van-order-goods-header">
|
||||
<van-icon :name="icon" />
|
||||
<a :href="link">{{ title }}</a>
|
||||
<img v-if="badge" :src="badge" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-header',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon
|
||||
},
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
icon: String,
|
||||
link: String,
|
||||
badge: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<van-cell class="van-order-goods-message" title="买家留言：">
|
||||
<textarea
|
||||
v-if="editable"
|
||||
:value="message"
|
||||
:class="{ 'van-order-goods-message-focused': textareaFocused }"
|
||||
placeholder="点击给商家留言"
|
||||
@focus="textareaFocused = true"
|
||||
@blur="textareaFocused = false"
|
||||
@input="onChange"
|
||||
/>
|
||||
<p v-else>{{ message }}</p>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-message',
|
||||
|
||||
components: {
|
||||
[Cell.name]: Cell
|
||||
},
|
||||
|
||||
props: {
|
||||
message: String,
|
||||
editable: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
textareaFocused: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(event) {
|
||||
this.$emit('change', event.target.value);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 不可编辑的情况下，默认留言为"无"
|
||||
if (!this.editable && !this.message) {
|
||||
this.$emit('change', '无');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<van-cell
|
||||
class="van-order-goods-price"
|
||||
title="合计"
|
||||
:value="totalPrice"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
import { getTotalPrice } from './utils';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-price',
|
||||
|
||||
components: {
|
||||
[Cell.name]: Cell
|
||||
},
|
||||
|
||||
props: {
|
||||
price: Number,
|
||||
points: Number,
|
||||
isPoints: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
totalPrice() {
|
||||
return getTotalPrice(this.price, this.points, this.isPoints);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<van-cell-group class="van-order-goods">
|
||||
<van-order-goods-header
|
||||
:title="shopName"
|
||||
:link="shopLink"
|
||||
:icon="headerIcon"
|
||||
:badge="headerBadge"
|
||||
/>
|
||||
<slot name="top"></slot>
|
||||
<van-order-goods-empty
|
||||
v-if="isEmpty"
|
||||
:icon="emptyIcon"
|
||||
:message="emptyMessage"
|
||||
:button-text="emptyButtonText"
|
||||
@clickEmptyButton="$emit('clickEmptyButton')"
|
||||
/>
|
||||
<div class="van-order-goods-list">
|
||||
<van-order-goods-card
|
||||
v-for="item in itemList"
|
||||
:data="item"
|
||||
:express-way="expressWay"
|
||||
:key="item.title + item.img_url"
|
||||
/>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<template v-if="!isEmpty">
|
||||
<van-order-goods-message v-if="showMessage" :message="message" :editable="messageEditable" @change="onMessageChange" />
|
||||
<van-order-goods-price v-if="showTotalPrice" :price="price" :points="points" />
|
||||
</template>
|
||||
<slot name="bottom"></slot>
|
||||
</van-cell-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './Header';
|
||||
import Empty from './Empty';
|
||||
import Message from './Message';
|
||||
import Price from './Price';
|
||||
import Card from './Card';
|
||||
import CellGroup from '../cell-group';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods',
|
||||
|
||||
components: {
|
||||
[Empty.name]: Empty,
|
||||
[Header.name]: Header,
|
||||
[Message.name]: Message,
|
||||
[Price.name]: Price,
|
||||
[Card.name]: Card,
|
||||
[CellGroup.name]: CellGroup
|
||||
},
|
||||
|
||||
model: {
|
||||
prop: 'message'
|
||||
},
|
||||
|
||||
props: {
|
||||
shopName: String,
|
||||
shopLink: String,
|
||||
message: String,
|
||||
price: Number,
|
||||
points: Number,
|
||||
expressWay: String,
|
||||
headerBadge: String,
|
||||
headerIcon: {
|
||||
type: String,
|
||||
default: 'shop'
|
||||
},
|
||||
emptyIcon: {
|
||||
type: String,
|
||||
default: '//b.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png'
|
||||
},
|
||||
emptyMessage: {
|
||||
type: String,
|
||||
default: '当前没有可购买的商品，请重新选择'
|
||||
},
|
||||
emptyButtonText: {
|
||||
type: String,
|
||||
default: '返回重新选择'
|
||||
},
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showTotalPrice: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
messageEditable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isEmpty() {
|
||||
return this.itemList.length === 0;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMessageChange(message) {
|
||||
this.$emit('input', message);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,13 +0,0 @@
|
||||
/**
|
||||
* 拼接商品价格（金额和积分）
|
||||
*/
|
||||
export function getTotalPrice(price, points) {
|
||||
const arr = [];
|
||||
if (points) {
|
||||
arr.push(points + '积分');
|
||||
}
|
||||
if (price) {
|
||||
arr.push('¥' + (price / 100).toFixed(2));
|
||||
}
|
||||
return arr.join(' + ');
|
||||
}
|
||||
@ -49,5 +49,4 @@
|
||||
@import './goods-action.css';
|
||||
@import './notice-bar.css';
|
||||
@import './coupon.css';
|
||||
@import './order-goods.css';
|
||||
@import './pay-order.css';
|
||||
|
||||
@ -1,205 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-order-goods {
|
||||
background-color: $white;
|
||||
|
||||
&-card {
|
||||
margin-left: -15px;
|
||||
background-color: #fafafa;
|
||||
|
||||
&:not(:first-child) {
|
||||
&::after {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__tag-green,
|
||||
&__tag-red {
|
||||
font-size: 10px;
|
||||
padding: 3px 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__tag-green {
|
||||
color: $white;
|
||||
background-color: $green-wx;
|
||||
}
|
||||
|
||||
&__tag-red {
|
||||
color: $gray;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid $gray;
|
||||
}
|
||||
|
||||
&__delivery {
|
||||
padding-left: 15px;
|
||||
background-color: transparent;
|
||||
|
||||
.van-cell__value {
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
&__present {
|
||||
top: 0;
|
||||
left: 3px;
|
||||
width: 18px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
background: url("https://b.yzcdn.cn/v2/image/wap/trade/confirm/present@2x.png") no-repeat;
|
||||
background-size: 18px 36px;
|
||||
}
|
||||
|
||||
.van-button&__message-button {
|
||||
height: 24px;
|
||||
padding: 0 5px;
|
||||
font-size: 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 20px 15px 0;
|
||||
.van-button {
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $background-color;
|
||||
|
||||
h2 {
|
||||
color: $gray-dark;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 5px 0 5px 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
label {
|
||||
font-size: 14px;
|
||||
padding: 14px 0;
|
||||
line-height: 20px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #c9c9c9;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-empty {
|
||||
margin-left: -15px;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: $gray-dark;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 84px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
height: 41px;
|
||||
margin: 15px 0;
|
||||
padding: 0 10px;
|
||||
line-height: 39px;
|
||||
border-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
line-height: 50px;
|
||||
|
||||
a,
|
||||
img,
|
||||
.van-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
textarea {
|
||||
color: $gray-darker;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
border: none;
|
||||
resize: none;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
transition: height .3s ease-in-out;
|
||||
}
|
||||
|
||||
textarea&-focused {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-darker;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
&-price {
|
||||
.van-cell__value {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user