Skip to content

Commit

Permalink
docs(card): edit style (jd-opensource#2133)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Drjingfubo
Drjingfubo authored Feb 24, 2023
1 parent 74bdbe3 commit 035b3c8
Show file tree
Hide file tree
Showing 2 changed files with 236 additions and 67 deletions.
150 changes: 116 additions & 34 deletions src/packages/__VUE/card/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,37 +62,30 @@ app.use(Price);
```
:::

### Custom Content

### Custom prolist

:::demo
```html
<template>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #prolist>
<div class="search_prolist_attr">
<span class="word">word</span>
<span class="word">word</span>
<span class="word">word</span>
</div>
</template>
<template #tag>
<img
class="tag"
src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=""
/>
</template>
<template #footer>
<div class="customize">cuttom</div>
</template>
</nut-card>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #prolist>
<div class="search_prolist_attr">
<span class="word">tag</span>
<span class="word">tag</span>
<span class="word">tag</span>
</div>
</template>

</nut-card>
</template>
<script>
import { reactive } from 'vue';
Expand All @@ -114,14 +107,12 @@ app.use(Price);
}
}
</script>
<style>
.search_prolist_attr {
<style lang="scss">
.search_prolist_attr {
margin: 3px 0 1px;
height: 15px;
overflow: hidden;
}
.search_prolist_attr > span{
> span {
float: left;
padding: 0 5px;
border-radius: 1px;
Expand All @@ -131,19 +122,110 @@ app.use(Price);
color: #999;
background-color: #f2f2f7;
margin-right: 5px;
}
}
</style>
```
:::
### Custom Content

:::demo
```html
<template>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #shop-tag>
<div>Custom Content</div>
</template>
<template #price>
<span>inquiry</span>
</template>
<template #origin>
<img
class="tag"
src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=""
/>
</template>
</nut-card>
</template>
<script>
import { reactive } from 'vue';
export default{
setup() {
const state = reactive({
imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
title: 'title',
shopName: 'shopName>'
});
return {
state
};
}
}
</script>
<style lang="scss">
.tag {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 2px;
height: 14px;
}
</style>
```
:::

### Customize bottom right content
:::demo
```html
<template>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #footer>
<div class="customize">custom</div>
</template>
</nut-card>
</template>
<script>
import { reactive } from 'vue';
export default{
setup() {
const state = reactive({
imgUrl:
'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
title: 'title',
price: '388',
vipPrice: '378',
shopDesc: 'desc',
delivery: 'delivery',
shopName: 'shopName>'
});
return {
state
};
}
}
</script>
<style lang="scss">
.customize {
font-size: 12px;
}
</style>

```
:::
## API
Expand Down
153 changes: 120 additions & 33 deletions src/packages/__VUE/card/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,37 +61,29 @@ app.use(Price);
```
:::

### 自定义内容
### 自定义商品标签

:::demo
```html
<template>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #prolist>
<div class="search_prolist_attr">
<span class="word">活鲜</span>
<span class="word">礼盒</span>
<span class="word">国产</span>
</div>
</template>
<template #tag>
<img
class="tag"
src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=""
/>
</template>
<template #footer>
<div class="customize">自定义</div>
</template>
</nut-card>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #prolist>
<div class="search_prolist_attr">
<span class="word">活鲜</span>
<span class="word">礼盒</span>
<span class="word">国产</span>
</div>
</template>

</nut-card>
</template>
<script>
import { reactive } from 'vue';
Expand All @@ -113,14 +105,12 @@ app.use(Price);
}
}
</script>
<style>
.search_prolist_attr {
<style lang="scss">
.search_prolist_attr {
margin: 3px 0 1px;
height: 15px;
overflow: hidden;
}
.search_prolist_attr > span{
> span {
float: left;
padding: 0 5px;
border-radius: 1px;
Expand All @@ -130,19 +120,116 @@ app.use(Price);
color: #999;
background-color: #f2f2f7;
margin-right: 5px;
}
}
</style>
```
:::
### 自定义店铺介绍

:::demo
```html
<template>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #shop-tag>
<div>自定义店铺介绍</div>
</template>
<template #price>
<span>询价</span>
</template>
<template #origin>
<img
class="tag"
src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=""
/>
</template>
</nut-card>
</template>
<script>
import { reactive } from 'vue';
export default{
setup() {
const state = reactive({
imgUrl:'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
price: '388',
vipPrice: '378',
shopDesc: '自营',
delivery: '厂商配送',
shopName: '阳澄湖大闸蟹自营店>'
});
return {
state
};
}
}
</script>
<style lang="scss">
.tag {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 2px;
height: 14px;
}
</style>
```
:::

### 自定义右下角内容
:::demo
```html
<template>
<nut-card
:img-url="state.imgUrl"
:title="state.title"
:price="state.price"
:vipPrice="state.vipPrice"
:shopDesc="state.shopDesc"
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #footer>
<div class="customize">自定义右下角内容</div>
</template>
</nut-card>
</template>
<script>
import { reactive } from 'vue';
export default{
setup() {
const state = reactive({
imgUrl:
'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
price: '388',
vipPrice: '378',
shopDesc: '自营',
delivery: '厂商配送',
shopName: '阳澄湖大闸蟹自营店>'
});
return {
state
};
}
}
</script>
<style lang="scss">
.customize {
font-size: 12px;
}
</style>


```
:::
## API
Expand Down

0 comments on commit 035b3c8

Please sign in to comment.