service_card/qianshancardshang_wx/pages/mine/mine.vue

<template>
    <view class="mine">
		<!-- 头部 -->
		<navbar :back="false" title="我的" :bgcolor="backgroundColor" color="#fff" fixed zIndex="1010" :center="true"	:custom='true' @getTop="getTop"/>
		<image :src="bgimg" class="minebg"></image>
		<view class="minebox">
			<view class="minetop flexc">
				<image :src="headimg" class="minetopa flex0"></image>
				<view class="flex1">
					<view class="minetopt">蒋小华</view>
					<view class="minetoptx">
						<image :src="mtitimg"></image>
						天柱山风景区
					</view>
				</view>
				<!-- <view class="minetoptr flex0">
						我的卡片<image :src="rimg"></image>
				</view>	 -->
			</view>
			<view class="minelists">
				<view class="minelist">
					<view class="minelista">
						<image :src="listd" mode="aspectFit" style="height: 40rpx;"></image>
					</view>
					<view class="minelistit">核销记录</view>
					<image :src="rimg" class="minelistr"></image>
				</view>
				<view class="minelist">
					<view class="minelista">
						<image :src="listf" mode="aspectFit"></image>
					</view>
					<view class="minelistit">使用指南</view>
					<image :src="rimg" class="minelistr"></image>
				</view>
				<view class="minelist">
					<view class="minelista">
						<image :src="listg" mode="aspectFit"></image>
					</view>
					<view class="minelistit">修改密码</view>
					<image :src="rimg" class="minelistr"></image>
				</view>
			</view>
		</view>
    <!-- 底部 导航栏  currentPage 当前页面ID -->
        <tab-bar :currentPage="2"></tab-bar>
    </view>
</template>

<script>
    //导入组件
    import tabBar from '@/components/tabbar/tabbar.vue'
    export default {
        data() {
            return {
				padtop:this.$http._GET.customBarH||0,
				backgroundColor: 'transparent',
				bgimg:require('@/static/image/minebg.png'),
				headimg:require('@/static/image/head.png'),
				mtitimg:require('@/static/image/mtit.png'),
				rimg:require("@/static/image/rimg.png"),
				lista:require("@/static/image/mlista.png"),
				listb:require("@/static/image/mlistb.png"),
				listc:require("@/static/image/mlistc.png"),
				listd:require("@/static/image/mlistd.png"),
				liste:require("@/static/image/mliste.png"),
				listf:require("@/static/image/mlistf.png"),
				listg:require("@/static/image/mlistg.png"),
            };
        },
        components:{
            tabBar
        },
        methods: {
			getTop(e){
				this.padtop=e;
			},
			
		},
		onPageScroll(res) {
			var scrolltop=res.scrollTop;
			if(scrolltop>0){
				this.backgroundColor='linear-gradient(60deg, #6A6BF1, #CB4BFA)'
			}else{
				this.backgroundColor='transparent'
			}
		 },
    };
</script>
<style scoped lang="scss">
	.mine{min-height: 100vh;background: #f5f5f5;overflow: auto;
		.minebg{width: 100%;height: 296rpx;}
		.minebox{
			padding: 0 34rpx;margin-top: -128rpx;box-sizing: border-box;overflow: hidden;position: relative;
			.minetop{width: 684rpx;min-height: 166rpx;
background: #FFFFFF;box-shadow: 4rpx 6rpx 6rpx 0px rgba(91,91,91,0.2);border-radius: 10rpx;margin-bottom: 20rpx;padding: 28rpx 30rpx 24rpx;box-sizing: border-box;margin-bottom: 20rpx;
				.minetopa{width: 112rpx;height: 114rpx;margin-right: 30rpx;border-radius: 50%;}
				.minetopt{font-size: 30rpx;font-weight: bold;color: #000000;margin-bottom: 8rpx;}
				.minetoptx{font-size: 26rpx;color: #666666;display: flex;align-items: center;
					image{width: 16rpx;height: 26rpx;margin-right: 12rpx;flex: 0 0 auto;}
				}
				.minetoptr{font-size: 28rpx;color: #000000;display: flex;align-items: center;
					image{width: 16rpx;height: 28rpx;margin-left: 18rpx;flex: 0 0 auto;}
				}
			}
			.minelists{width: 100%;border-radius: 10rpx;background-color: #FFFFFF;padding: 4rpx 32rpx;box-sizing: border-box;
				.minelist{display: flex;align-items: center;padding: 30rpx 0;
					.minelista{width: 42rpx;height: 42rpx;display: flex;align-items: center;justify-content: center;margin-right: 24rpx;flex: 0 0 auto;
						image{max-width: 100%;max-height: 100%;}
					}
					.minelistit{font-size: 28rpx;color: #000000;flex: 1;}
					.minelistr{width: 16rpx;height: 28rpx;margin-left: 18rpx;flex: 0 0 auto;}
				}
			}
			
		
		
		}
	}
</style>