话不多说,直接上代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/cube-ui/lib/cube.min.css">
<style type="text/css">
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#app{
margin-bottom: 70px;
}
.index-navigation{
width: 100%;
margin: 10px 0px;
}
.index-navigation .cube-scroll-content{
display: inline-block;
}
.index-navigation .navigation-class{
height: 40px;
background-color: #fff;
padding-left: 10px;
overflow-x: auto;
white-space:nowrap;
}
.index-navigation .navigation-span{
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 40px;
line-height: 40px;
}
.index-navigation .navigation-active{
border-bottom: 3px solid #028482;
font-weight: bold;
}
.goods-containter{
width: 100%;
padding: 0px 10px;
overflow: hidden;
}
.goods-containter .goods-box{
width: 50%;
vertical-align: top;
margin-bottom: 10px;
padding: 0px 5px;
}
.goods-containter .goods-left{
float: left;
}
.goods-containter .goods-right{
float: right;
}
.goods-containter .goods-box .goods-box-pic{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
.goods-containter .goods-box .goods-box-pic img{
width: 100%;
}
.goods-containter .goods-box .goods-box-content{
width: 100%;
font-size: 14px;
color: #333;
}
.goods-containter .goods-box .goods-content-show{
width: 100%;
font-weight: bold;
}
.goods-containter .goods-box .goods-box-content .goods-content-price{
color: red;
line-height: 30px;
position: relative;
}
.goods-containter .goods-box .goods-box-content .goods-content-price .goods-price-right{
position: absolute;
right: 0px;
color: #888;
font-size: 12px;
}
.goods-containter .goods-box .goods-box-user{
width: 100%;
}
.goods-containter .goods-box .goods-box-user .goods-user-head{
display: inline-block;
vertical-align: top;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.goods-containter .goods-box .goods-box-user .goods-user-content{
display: inline-block;
vertical-align: top;
width: calc(100% - 45px);
height: 40px;
}
.goods-containter .goods-box .goods-box-user .goods-user-content .goods-content-show{
line-height: 20px;
font-size: 14px;
}
.goods-containter .goods-box .goods-box-user .goods-user-content .goods-content-note{
line-height: 20px;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<div id="app">
<div class="index-container">
<div class="index-navigation">
<cube-scroll ref="horScroll" direction="horizontal">
<div class="navigation-class">
<span class="navigation-span" v-for="(item,index) in navigationData" :class="{'navigation-active': navigationIndex==index}" @click="navigationClick(item,index)">{{item.text}}</span>
</div>
</cube-scroll>
</div>
<div class="goods-containter">
<div class="goods-box" v-for="(item,index) in goodsData" :class="judgeClass(index)" :key="index">
<div class="goods-box-pic"><img :src="item.goods_pic"></div>
<div class="goods-box-content">
<p class="goods-content-show">{{item.goods_content}}</p>
<p class="goods-content-price">¥<span>{{item.goods_price}}</span> <span class="goods-price-right">已有{{item.goods_browse_num}}人看过</span></p>
</div>
<div class="goods-box-user">
<div class="goods-user-head"><img :src="item.user_head_img" width="100%" height="100%"></div>
<div class="goods-user-content">
<p class="goods-content-show">{{item.user_name}}</p>
<p class="goods-content-note">成功交易{{item.deal_success_num}}件宝贝</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<script type="text/javascript">
Vue.component('my-component-menu',{
template: '#menu'
})
Vue.component('my-component-banner',{
template: '#banner',
props: ['images']
})
var vm = new Vue({
el: '#app',
data: {
navigationIndex: 0, //选中的标签条
goodsData: "",
navigationData: [
{id: 1, text: "推荐"},
{id: 1, text: "二手机"},
{id: 1, text: "二手电脑"},
{id: 1, text: "数码"},
{id: 1, text: "租房"},
{id: 1, text: "服装"},
{id: 1, text: "书籍"},
{id: 1, text: "生活用品"},
{id: 1, text: "其他"}
]
},
mounted: function(){ //在实例被创建,并且el更新后执行
var _this = this;
_this.getGoodsData();
},
methods: {
navigationClick(item,index){ //导航条点击事件
var _this = this;
_this.navigationIndex = index;
},
judgeClass(index){ //判断左浮动还是右浮动
var _this = this;
if(index%2==0){
return "goods-left";
}else{
return "goods-right";
}
},
getGoodsData(){
var _this = this;
_this.goodsData = [{
"id": 1,
"goods_pic": "img/goods/n_v1bj3gzr22dpgvqoglirka_750_0.jpg",
"goods_content": "九成新的卫衣,刚买来,试穿了一下,尺寸不合适,现转卖",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/8ef6abfbd5982ecc4f3304b345533113.jpg",
"user_name": "对方是否",
"deal_success_num": 23
},{
"id": 2,
"goods_pic": "img/goods/n_v1bj3gzrymzpjvq3ivjr2a_750_0.jpg",
"goods_content": "视屏线",
"goods_price": "12",
"goods_browse_num": 15,
"user_id": 1,
"user_head_img": "img/headImg/803b2de23d4d042c1c3d217b7b47a783.jpg",
"user_name": "大头非鲫",
"deal_success_num": 23
},{
"id": 3,
"goods_pic": "img/goods/n_v1bl2lwko7htvfqzmlijbq_750_0.jpg",
"goods_content": "智能吸尘器,9成新,刚裁开,无损坏",
"goods_price": "200",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/5588962c85763d73c2a3a8968b516ca1.jpg",
"user_name": "食堂门口",
"deal_success_num": 23
},{
"id": 4,
"goods_pic": "img/goods/n_v1bl2lwxt2726fr6laraaa_750_0.jpg",
"goods_content": "耐克球鞋,8成新,才穿一天",
"goods_price": "123",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/b800d9e9a33769b74d5c4a6c43304ebb.jpg",
"user_name": "与",
"deal_success_num": 23
},{
"id": 5,
"goods_pic": "img/goods/n_v2a0334dbb23a042068ff7cd8f5fdb5243_750_0.jpg",
"goods_content": "挎包",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/dbede3148589f5ca19d05a082f757f39.jpg",
"user_name": "两",
"deal_success_num": 23
},{
"id": 6,
"goods_pic": "img/goods/n_v21f76a6e5a0c44f38b5472e2ce789eaf4.jpg",
"goods_content": "古筝,使用了一年的新古筝,无任何毛病",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/ebe01051e831c2c03caf0f33497629b8.jpg",
"user_name": "嗯",
"deal_success_num": 23
},{
"id": 6,
"goods_pic": "img/goods/n_v28def611059974920872b464a67f919da_750_0.jpg",
"goods_content": "玉佩",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/5588962c85763d73c2a3a8968b516ca1.jpg",
"user_name": "突然",
"deal_success_num": 23
}];
}
}
})
</script>
</body>
</html>
用到了滴滴封装的UI库,使用时需要替换图片路径