<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>
