deming/components/informations/notice/notice.vue
2020-08-04 21:46:52 +08:00

95 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="notice">
<view v-for="(item,index) in notice" :key="index">
<view class="time_notice">2020-05-14 20:11</view>
<view class="notice_view">
<image :src="item.url" mode="aspectFill" ></image>
<view class="text_view">{{item.content}}</view>
<view class="notice_list">
<text>查看详情</text>
<u-icon name="arrow-right" color="#666"></u-icon>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.notice {
.notice_view{
width: 690rpx;
height: 489rpx;
border-radius: 20rpx;
background: #fff;
margin: 0 auto;
}
.notice_view image{
height: 285rpx;
width: 100%;
border-radius: 20rpx 20rpx 0px 0px;
}
.text_view{
font-size:26rpx;
font-weight:400;
color:rgba(51,51,51,1);
margin: 28rpx 0 30rpx 0;
width: 643rpx;
margin: 0 auto;
text-align: left;
line-height: 40rpx;
}
.notice_view > view:nth-child(3){
height: 84rpx;
line-height: 84rpx;
border-top: 1px #F5F5F5 solid;
margin-top: 30rpx;
}
}
.time_notice{
text-align: center;
font-size:28rpx;
font-weight:400;
color:rgba(102,102,102,1);
padding: 26rpx 0 39rpx 0;
}
.notice_list{
text-align: left;
display: inline-block;
width: 100%;
position: relative;
padding: 0 25rpx;
margin: 0 auto;
display: block;
}
.notice_list > view{
text-align: right;
position: absolute;
right: 25rpx;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<script>
export default {
name: "notice",
data() {
return {
notice : [
{
time : '2020-05-14 20:11',
content:'潮牌1折秒杀杨幂同款小白鞋今日43元送10000元大红包还有明星限量签名照',
url : '../../../pageE/static/mine/23.png'
},
{
time : '2020-05-14 20:11',
content:'潮牌1折秒杀杨幂同款小白鞋今日43元送10000元大红包还有明星限量签名照',
url : '../../../pageE/static/mine/23.png'
}
]
};
}
}
</script>