xc/pages/user/ship.vue

<template>
	<view class="page">
		<view class="tabBanner flex">
			<view class="tabItemBox flex">
				<view class="tahItem position-relative" v-for="(item,index) in taber">
					{{item.title}}
					<view class="actionIcon" v-if="action==index"></view>
				</view>
			</view>

			<view class="rightMoney flex">
				<image class="rightTipImg" src="../../static/index/index/icon01.png" mode="scaleToFill"></image>
				<text>123123123123.222s</text>
			</view>
		</view>
		<view class="itemList">
			<view class="item flex">
				<view class="itemLeft">
					<view class="name">

					</view>
					<view class="tip">

					</view>
					<view class="payMoney flex">
						<image class="payMoneyTIp" src="../../static/index/index/icon01.png" mode="widthFix"></image>
						<text>22</text>
					</view>
				</view>
				<view class="itemRight">
					<view class="tiptext">

					</view>
					<view class="moneyNum flex">
						<image class="moneyTIp" src="../../static/index/index/icon01.png" mode="widthFix"></image>
						<text>22</text>
					</view>
					<view class="buttom">
						派遣飞船
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:0,
				taber: [{
						title: '星级飞船',
						page: 1,
						limit: 10,
						loding: 'more',
						list: [],
					},

					{
						title: '我的飞船',
						page: 1,
						limit: 10,
						loding: 'more',
						list: [],
					}

				]
			};
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {

		}
	};
</script>
<style lang="scss" scoped>
	.page {
		min-height: calc(100vh - var(--window-bottom));
		line-height: 1;
		padding: 30rpx;
	}
	.tabBanner{
		position: sticky;
		.tabItemBox{
			.tahItem{
				.actionIcon{
					background: linear-gradient(268deg, rgba(244,177,228,0.99), #9D47C6, #5D289A);
					border-radius: 3px;
					width: 46rpx;
					height: 6rpx;
				}
			}
		}
		.rightMoney{
			.rightTipImg{
				width: 36rpx;
				height: 29rpx;
			}
		}
		
		
	}
	
	
</style>