Skip to content

Commit

Permalink
update GoodsContent
Browse files Browse the repository at this point in the history
  • Loading branch information
@taomas
taomas committed Aug 22, 2016
1 parent b392cdd commit 5687341
Show file tree
Hide file tree
Showing 6 changed files with 455 additions and 21 deletions.
8 changes: 7 additions & 1 deletion src/components/Goods.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<goods-accessories></goods-accessories>
<goods-around></goods-around>
<recommend></recommend>
<hot-product></hot-product>
<goods-content></goods-content>
</div>
</template>

Expand All @@ -14,14 +16,18 @@ import GoodsCollocation from './GoodsCollocation'
import GoodsAccessories from './GoodsAccessories'
import GoodsAround from './GoodsAround'
import Recommend from './Recommend'
import HotProduct from './HotProduct'
import GoodsContent from './GoodsContent'
export default {
components: {
'goods-top-box': GoodsTopBox,
'goods-collocation': GoodsCollocation,
'goods-accessories': GoodsAccessories,
'goods-around': GoodsAround,
'recommend': Recommend
'recommend': Recommend,
'hot-product': HotProduct,
'goods-content': GoodsContent
}
}
</script>
Expand Down
136 changes: 136 additions & 0 deletions src/components/GoodsContent.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<template>
<div class="product-container">
<goods-header :title="title"></goods-header>
<div class="box-bd">
<ul class="content-list clearfix">
<li>
<template v-for="content in contents">
<good-content-slide :content="content"></good-content-slide>
</template>
</li>
</ul>
</div>
</div>
</template>

<script>
import GoodsHeader from './common/GoodsHeader'
import GoodsContentSlide from './common/GoodsContentSlide'
export default {
data () {
return {
currPage: 0,
title: '内容',
contents: [
{
title: '图书',
type: 'book',
list: [
{title: '哈利·波特与魔法石', desc: '哈利波特来了', imgUrl: '//i3.mifile.cn/a4/8e3584b6-3169-41c6-9356-939ec79aac2b', type: 0},
{title: '特价专区', desc: '精选畅销好书，特价促销，天天更新，天天特价！', price: '限时优惠', imgUrl: '//i3.mifile.cn/a4/T1dlVgBbbT1RXrhCrK.jpg', type: 1},
{title: '杂志专区', desc: '纸媒杂志＋互联网杂志，你想看的这都有！', price: '同步新刊上线', imgUrl: '//i3.mifile.cn/a4/T1R3WgBjKT1RXrhCrK.jpg', type: 1},
{desc1: '海量好书，享受精品阅读时光', desc2: '漂亮的中文排版，千万读者选择！', btnTxt: '前往多看阅读', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-duokan.jpg', type: 2}
]
},
{
title: '图书',
type: 'book',
list: [
{title: '哈利·波特与魔法石', desc: '哈利波特来了', imgUrl: '//i3.mifile.cn/a4/8e3584b6-3169-41c6-9356-939ec79aac2b', type: 0},
{title: '特价专区', desc: '精选畅销好书，特价促销，天天更新，天天特价！', price: '限时优惠', imgUrl: '//i3.mifile.cn/a4/T1dlVgBbbT1RXrhCrK.jpg', type: 1},
{title: '杂志专区', desc: '纸媒杂志＋互联网杂志，你想看的这都有！', price: '同步新刊上线', imgUrl: '//i3.mifile.cn/a4/T1R3WgBjKT1RXrhCrK.jpg', type: 1},
{desc1: '海量好书，享受精品阅读时光', desc2: '漂亮的中文排版，千万读者选择！', btnTxt: '前往多看阅读', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-duokan.jpg', type: 2}
]
},
{
title: '图书',
type: 'book',
list: [
{title: '哈利·波特与魔法石', desc: '哈利波特来了', imgUrl: '//i3.mifile.cn/a4/8e3584b6-3169-41c6-9356-939ec79aac2b', type: 0},
{title: '特价专区', desc: '精选畅销好书，特价促销，天天更新，天天特价！', price: '限时优惠', imgUrl: '//i3.mifile.cn/a4/T1dlVgBbbT1RXrhCrK.jpg', type: 1},
{title: '杂志专区', desc: '纸媒杂志＋互联网杂志，你想看的这都有！', price: '同步新刊上线', imgUrl: '//i3.mifile.cn/a4/T1R3WgBjKT1RXrhCrK.jpg', type: 1},
{desc1: '海量好书，享受精品阅读时光', desc2: '漂亮的中文排版，千万读者选择！', btnTxt: '前往多看阅读', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-duokan.jpg', type: 2}
]
},
{
title: '图书',
type: 'book',
list: [
{title: '哈利·波特与魔法石', desc: '哈利波特来了', imgUrl: '//i3.mifile.cn/a4/8e3584b6-3169-41c6-9356-939ec79aac2b', type: 0},
{title: '特价专区', desc: '精选畅销好书，特价促销，天天更新，天天特价！', price: '限时优惠', imgUrl: '//i3.mifile.cn/a4/T1dlVgBbbT1RXrhCrK.jpg', type: 1},
{title: '杂志专区', desc: '纸媒杂志＋互联网杂志，你想看的这都有！', price: '同步新刊上线', imgUrl: '//i3.mifile.cn/a4/T1R3WgBjKT1RXrhCrK.jpg', type: 1},
{desc1: '海量好书，享受精品阅读时光', desc2: '漂亮的中文排版，千万读者选择！', btnTxt: '前往多看阅读', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-duokan.jpg', type: 2}
]
}]
}
},
components: {
'goods-header': GoodsHeader,
'good-content-slide': GoodsContentSlide
}
}
</script>

<style>
.product-container {
width: 1226px;
height: auto;
margin: 0 auto;
}
.content-list {
.content {
position: relative;
float: left;
width: 296px;
height: auto;
margin: 0 0 14px 14px;
padding-top: 45px;
background: #fff;
transition: all 0.3s;
&:hover {
transform: translateY(-3px);
box-shadow: 5px 5px 20px #ccc;
}
&:nth-child(1) {
margin-left: 0;
}
}
.book {
.title {
color: #ffac13;
}
}
}
/*.content-list {
.content {
position: relative;
float: left;
width: 296px;
height: auto;
margin: 0 0 14px 14px;
padding-top: 45px;
background: #fff;
transition: all 0.3s;
&:hover {
transform: translateY(-3px);
box-shadow: 5px 5px 20px #ccc;
}
&:nth-child(1) {
margin-left: 0;
}
.title {
margin: 0 10px 18px;
font-size: 16px;
font-weight: 400;
text-align: center;
}
}
.book {
.title {
color: #ffac13;
}
}
}*/
</style>
91 changes: 73 additions & 18 deletions src/components/HotProduct.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<template>
<div class="hot-container">
<div class="hot-header">
<h2 class="title">热评产品</h2>
</div>
<div class="recommend-wrap">
<ul class="recommend-content">
<li class="recomend-item"
v-for="item in recomends">
<goods-header :title="title"></goods-header>
<div class="hot-wrap">
<ul class="hot-content clearfix">
<li class="hot-item"
v-for="item in hots">
<img class="item-image" :src="item.imageUrl" alt="" />
<h3 class="item-name">{{item.name}}</h3>
<div class="item-evaluation">
<p>{{item.evaluation}}</p>
<p class="review-txt">{{item.review}}</p>
<p class="author">来自{{item.author}}的评价</p>
</div>
<div class="item-desc">
<span class="item-name"></span>|
<span class="item-price"></span>
<span class="item-name">{{item.name}}</span>
<span class="sep">|</span>
<span class="item-price">{{item.price}}</span>
</div>
</li>
</ul>
Expand All @@ -24,17 +22,21 @@
</template>

<script>
import GoodsHeader from './common/GoodsHeader'
export default {
data () {
return {
recomends: [
{imageUrl: '//i1.mifile.cn/a1/T1CDbjBgAT1RXrhCrK.jpg?width=140&height=140', name: ' 90分旅行箱 24寸', price: '299元', favorable: '1.1万'},
{imageUrl: '//i1.mifile.cn/a1/T1CDbjBgAT1RXrhCrK.jpg?width=140&height=140', name: ' 90分旅行箱 24寸', price: '299元', favorable: '1.1万'},
{imageUrl: '//i1.mifile.cn/a1/T1CDbjBgAT1RXrhCrK.jpg?width=140&height=140', name: ' 90分旅行箱 24寸', price: '299元', favorable: '1.1万'},
{imageUrl: '//i1.mifile.cn/a1/T1CDbjBgAT1RXrhCrK.jpg?width=140&height=140', name: ' 90分旅行箱 24寸', price: '299元', favorable: '1.1万'},
{imageUrl: '//i1.mifile.cn/a1/T1CDbjBgAT1RXrhCrK.jpg?width=140&height=140', name: ' 90分旅行箱 24寸', price: '299元', favorable: '1.1万'}
title: '热评产品',
hots: [
{imageUrl: 'http://i3.mifile.cn/a4/bae79ac6-60d5-478d-90e7-ff1222764bd1', review: '东西很小，做工挺精致，电池待机也比想象中好。值得买。', author: '同路者', name: '小米随身蓝牙音箱', price: '299元', favorable: '1.1万'},
{imageUrl: 'http://i3.mifile.cn/a4/62d44838-f464-4c11-887c-9168645ae797', review: '东西很小，做工挺精致，电池待机也比想象中好。值得买。', author: '同路者', name: '小米随身蓝牙音箱', price: '299元', favorable: '1.1万'},
{imageUrl: 'http://i3.mifile.cn/a4/1e737b55-91bd-4f5b-b085-405fa722142f', review: '东西很小，做工挺精致，电池待机也比想象中好。值得买。', author: '同路者', name: '小米随身蓝牙音箱', price: '299元', favorable: '1.1万'},
{imageUrl: 'http://i3.mifile.cn/a4/a14bd55a-2a7f-4e5f-9d8d-79e3e1bdb467', review: '东西很小，做工挺精致，电池待机也比想象中好。值得买。', author: '同路者', name: '小米随身蓝牙音箱', price: '299元', favorable: '1.1万'}
]
}
},
components: {
'goods-header': GoodsHeader
}
}
</script>
Expand All @@ -46,7 +48,7 @@ export default {
margin: 0 auto;
}
.recommend-header {
.hot-header {
position: relative;
.title {
margin: 0;
Expand All @@ -57,4 +59,57 @@ export default {
}
}
.hot-content {
.hot-item {
float: left;
width: 296px;
height: 415px;
padding: 0 0 14px 14px;
cursor: pointer;
transition: all 0.3s;
&:nth-child(1) {
padding-left: 0;
}
&:hover {
transform: translateY(-3px);
box-shadow: 5px 5px 20px #ccc;
}
.item-image {
width: 296px;
height: 220px;
}
.review-txt {
height: 72px;
margin: 22px 28px;
font-size: 14px;
line-height: 24px;
font-weight: 400;
overflow: hidden;
}
.author {
position: relative;
height: 18px;
margin: 0 28px 8px;
padding: 0 10px 0 0;
font-size: 12px;
color: #b0b0b0;
}
}
}
.item-desc {
padding-left: 30px;
.item-name {
font-size: 14px;
color: #333;
}
.sep {
margin: 0 4px;
color: #e0e0e0;
}
.item-price {
font-size: 14px;
color: #ff6700;
}
}
</style>
4 changes: 2 additions & 2 deletions src/components/Recommend.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</div>
</div>
<div class="recommend-wrap">
<ul class="recommend-content">
<ul class="recommend-content clearfix">
<li class="recomend-item"
v-for="item in recomends">
<img class="item-image" :src="item.imageUrl" alt="" />
Expand Down Expand Up @@ -151,7 +151,7 @@ export default {
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
transform: translateY(-3px);
}
&:nth-last-child(5n+1) {
margin-right: 0;
Expand Down
Loading

0 comments on commit 5687341

Please sign in to comment.