deming/pageD/activity/activity.vue
2020-06-11 08:43:51 +08:00

121 lines
2.3 KiB
Vue

<template>
<view id="actives">
<!-- 活动消息推送 -->
<view class="activity" v-for="(item, index) in actives" :key="index">
<view class="times">{{item.type}}</view>
<view class="content">
<view class="title">{{item.name}}</view>
<view class="images_about">
<image :src="item.url"></image>
<view>
<text>{{item.about}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
actives: [
{
url: '../../pageE/static/mine/1.png',
name: '百元趋势新品',
type: '2020-05-14 20:11',
about: '百搭休闲格纹裙!你值得有用!'
},
{
url: '../../pageE/static/mine/1.png',
name: '百元趋势新品',
type: '2020-05-14 20:11',
about: '百搭休闲格纹裙!你值得有用!'
},
{
url: '../../pageE/static/mine/1.png',
name: '百元趋势新品',
type: '2020-05-14 20:11',
about: '百搭休闲格纹裙!你值得有用!'
},
{
url: '../../pageE/static/mine/1.png',
name: '百元趋势新品',
type: '2020-05-14 20:11',
about: '百搭休闲格纹裙!你值得有用!'
},
{
url: '../../pageE/static/mine/1.png',
name: '百元趋势新品',
type: '2020-05-14 20:11',
about: '百搭休闲格纹裙!你值得有用!'
},
]
};
},
methods: {
titletext(){
console.log("22345")
}
},
components:{
}
};
</script>
<style lang="scss" scoped>
#actives{
background: #ECECEC;
height: 100%;
}
.activity{
.times{
width:100%;
font-size:28rpx;
font-weight:400;
color:rgba(102,102,102,1);
text-align: center;
padding: 39rpx 0 30rpx;
}
.content{
width:630rpx;
padding: 30rpx;
background:rgba(255,255,255,1);
border-radius:20rpx;
margin: 0 auto;
overflow: hidden;
image{
width: 137rpx;
height: 140rpx;
float: left;
}
.title{
font-size:30rpx;
color:rgba(51,51,51,1);
padding: 0rpx 0 19rpx;
}
.images_about{
overflow: hidden;
text{
display: table-cell;
height: 140rpx;
vertical-align: middle;
width: 400rpx;
padding-left: 15rpx;
line-height: 36rpx;
}
view{
display: inline-block;
float: left;
width:430rpx;
height:140rpx;
background:rgba(241,241,241,1);
}
}
}
}
</style>