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.
high-mini/pages/user/news/news.vue

119 lines
3.4 KiB

<template>
<view>
<!-- 顶部类型 -->
<scroll-view scroll-x='true' class="srollview width100" 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
}
},
methods: {
}
}
</script>
<style lang="scss">
page {
background-color: #f3f3f3;
}
.srollview {
position: fixed;
top: 0px;
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>