You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.5 KiB
123 lines
3.5 KiB
<template>
|
|
<view>
|
|
<!-- 顶部类型 -->
|
|
<scroll-view scroll-x='true' class="srollview width100" :style="{top:headerTop}" scroll-with-animation>
|
|
<view class="conent" :class="[newstypeid == index ? 'activeconent' : 'frontconent']"
|
|
v-for="(item,index) in newsTyplist" :key="index">{{item}}</view>
|
|
</scroll-view>
|
|
<view class="mart10 height70"></view>
|
|
<!-- 内容 -->
|
|
<view class="newscont width90 border-8r backcorfff mart20" v-for="(item,index) in newsTyplist" :key="index">
|
|
<view class="alijusstart mart10 margle10">
|
|
<image src="../../../static/img/cusservice.png" mode="widthFix" class="icon30"></image>
|
|
<text class="font18 margle" style="color: #0B1D83;">服务通知</text>
|
|
</view>
|
|
<view class="width90 line1 mart10"></view>
|
|
<!-- 服务通知 -->
|
|
<view class="width90 mart20" v-if="index != 1">
|
|
<view class="font18 fcor333">最新电影已上映快来抢购</view>
|
|
<image mode="widthFix" class="width100 mart10" src="../../../static/img/user/1.png"></image>
|
|
</view>
|
|
|
|
<!-- 交易信息 -->
|
|
<view class="width90 mart20" v-if="index == 1">
|
|
<view class="font18 fcor333">付款成功</view>
|
|
<view class="mart10 border-r backcor9">
|
|
<view class="font20 colore95 fontwig6 paddtop10 fotct">¥9.58</view>
|
|
<view class="width94 mart10 alijusstart font14">
|
|
<view class="fontwig6 fcor333 width30">交易对象</view>
|
|
<view class="width70 fcor666 fotrt">电信话费充值200元</view>
|
|
</view>
|
|
|
|
<view class="width94 mart15 alijusstart font14">
|
|
<view class="fontwig6 fcor333 width30">交易时间</view>
|
|
<view class="width70 fcor666 fotrt">2022年9月30日</view>
|
|
</view>
|
|
<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
|
|
src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 客服消息 -->
|
|
<view class="width90 mart20" v-if="index == 2">
|
|
<view class="font18 fcor333">客服消息提醒</view>
|
|
<view class="mart10 border-r backcor9">
|
|
<view class="width92 fcor333 fontwig6 paddtop15">
|
|
你的问题我们已提交技术人员处理，请耐心等候
|
|
</view>
|
|
|
|
<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
|
|
src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
newsTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //消息类型
|
|
newstypeid: 1 ,//类型id
|
|
headerTop:'0px'
|
|
}
|
|
},
|
|
onLoad() {
|
|
// #ifdef H5
|
|
this.headerTop = '44px';
|
|
// #endif
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.srollview {
|
|
position: fixed;
|
|
height: 70px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
|
|
.conent {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin-top: 15px;
|
|
padding-left: 10px;
|
|
font-size: 11px;
|
|
padding-right: 10px;
|
|
margin-left: 15px;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.frontconent {
|
|
background-color: #eeeeee;
|
|
color: #333333;
|
|
}
|
|
|
|
.activeconent {
|
|
background-color: #e8eff4;
|
|
color: #009DFF;
|
|
}
|
|
|
|
.newscont {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
</style>
|
|
|