service_card/qianshancard_wx/pages/index/index.vue

<template>
    <view class="home" >
		<!-- 头部 -->
		<navbar :back="false" title="首页" :bgcolor="backgroundColor" color="#fff" fixed zIndex="1010" :center="true"	:custom='true' @getTop="getTop"/>
		<image :src="bgimg" class="homebg"></image>
		<view class="hometop">
			<swiper class="swiper" circular :indicator-active-color="activecolor" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<image :src="swpimga" class="swiperimg"></image>
				</swiper-item>
				<swiper-item>
					<image :src="swpimga" class="swiperimg"></image>
				</swiper-item>
				<swiper-item>
					<image :src="swpimga" class="swiperimg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="htlists">
			<view class="flexc flexdc w33">
				<image :src="topimga" class="htlisti"></image>
				<view class="f13 c0 ">招商政策</view>
			</view>
			<view class="flexc flexdc w33">
				<image :src="topimgb" class="htlisti"></image>
				<view class="f13 c0 ">使用指南</view>
			</view>
			<view class="flexc flexdc w33">
				<image :src="topimgc" class="htlisti"></image>
				<view class="f13 c0 ">权益内容</view>
			</view>
		</view>
		<view class="hgbox">
			<view class="flex1 ">
				<view class="hgboxtit">权益管理</view>
				<view class="hgboxtxt">可对拥有权益进行人员分配</view>
			</view>
			<view class="flex0 hgboxrtit">去管理</view>
		</view>
		<view class="hmlists">
			<view class="hmtop">
				<view class="hmtoptit">我的权益</view>
				<view class="hmtoptxt">
					权益具体说明
					<image :src="rimg"></image>
				</view>
			</view>
			<view class="hmlist">
				<view class="hmlistt">
					<view class="hmlista">
						<image :src="mbgimg" class="hmlistai"></image>
						<view class="hmlistat">投资服务</view>
					</view>
					<view class="hmlistr">可享用</view>
				</view>
				<view class="hmlistb">
					<view class="flex1 mbt5">
						<view class="f13 c0 lh18">在我市投资过程中问题可直接向与乡镇反馈</view>
						<view class="f13 c0 lh18">市政府政务大厅相关业务实行代办服务</view>
						<view class="hmline"></view>
					</view>
					<image :src="lista" class="hmlistbr"></image>
				</view>
			</view>
			<view class="hmlist">
				<view class="hmlistt">
					<view class="hmlista">
						<image :src="mbgimg" class="hmlistai"></image>
						<view class="hmlistat">子女入学</view>
					</view>
					<view class="hmlistr">可享用</view>
				</view>
				<view class="hmlistb">
					<view class="flex1 mbt5">
						<view class="f13 c0 lh18">优先就近安排子女义务教育阶段学校就读</view>
						<view class="f13 c0 lh18">优先安排子女转入城区省示范高中就读</view>
						<view class="hmline"></view> 
					</view>
					<image :src="lista" class="hmlistbr"></image>
				</view>
			</view>
			<view class="hmlist">
				<view class="hmlistt">
					<view class="hmlista">
						<image :src="mbgimg" class="hmlistai"></image>
						<view class="hmlistat">医疗保障</view>
					</view>
					<view class="hmlistr">可享用</view>
				</view>
				<view class="hmlistb">
					<view class="flex1 mbt5">
						<view class="f13 c0 lh18">每年享受医院的免费健康体检</view>
						<view class="f13 c0 lh18">提供免费核酸检测并开通绿色优先通道</view>
						<view class="hmline"></view>
					</view>
					<image :src="lista" class="hmlistbr"></image>
				</view>
			</view>
		</view>
    <!-- 底部 导航栏  currentPage 当前页面ID -->
        <tab-bar :currentPage="0"></tab-bar>
    </view>
</template>

<script>
	import url from "@/util/url";
	let {host} = url
    //导入组件
    import tabBar from '@/components/tabbar/tabbar.vue'
    export default {
        data() {
            return {
				padtop:this.$http._GET.customBarH||0,
				backgroundColor: 'transparent',
				bgimg:require('@/static/image/bg.png'),
				swpimga:require("@/static/image/swipera.png"),
				indicatorDots: true,
				autoplay: false,
				activecolor:'#ffffff',
				interval: 2000,
				duration: 500,
				topimga:require("@/static/image/topa.png"),
				topimgb:require("@/static/image/topb.png"),
				topimgc:require("@/static/image/topc.png"),
				rimg:require("@/static/image/rimg.png"),
				mbgimg:require("@/static/image/mbg.png"),
				lista:require("@/static/image/lista.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">

	.home{min-height: 100vh;background: #FFFFFF;overflow: auto;
		.homebg{width: 100%;height: 376rpx;}
		.hometop{margin-top:-208rpx;}
		.swiper{height: 260rpx;margin: 0 34rpx 28rpx;
			.swiperimg{width: 100%;height: 100%;}
		}
		.htlists{margin-bottom: 20rpx;display: flex;padding: 0 10rpx 32rpx;
			.htlisti{width: 146rpx;height: 146rpx;margin-bottom: 12rpx;}
		}
		.hgbox{margin:0rpx 32rpx 16rpx;background: #1B1B1D;border-radius: 14rpx;padding: 20rpx 20rpx 20rpx 16rpx;display: flex;align-items: center;justify-content: space-between;min-height: 128rpx;box-sizing: border-box;
			.hgboxtit{font-size: 34rpx;font-weight: bold;color: #C1A76B;margin-bottom: 8rpx;}
			.hgboxtxt{font-size: 24rpx;color: #B7AC93;}
			.hgboxrtit{width: 136rpx;height: 48rpx;background: linear-gradient(-89deg, #C6A36D, #E8D18A);border-radius: 24rpx;font-size: 26rpx;color: #FFFFFF;text-align: center;line-height: 48rpx;}
		
		}
	}
		
		
		.hmlists{padding:0 32rpx;
			.hmtop{padding: 28rpx 0;display: flex;align-items: center;justify-content: space-between;
				.hmtoptit{font-size: 34rpx;font-weight: bold;color: #3F3F3F;position: relative;line-height: 48rpx;
				&:after{width:38rpx;height: 6rpx;background: #B461F8;border-radius:2rpx;position: absolute;content: "";left: 50%;margin-left: -19rpx;bottom: -12rpx;border-radius: 2rpx;}
				}
				.hmtoptxt{
					font-size: 26rpx;color: #666666;
					display: flex;align-items: center;
					image{width: 16rpx;height: 28rpx;margin-left: 18rpx;}
				}
			}
			.hmlist{width: 100%;min-height: 188rpx;background: #F4F4F4;
border-radius: 14rpx;padding: 0 22rpx 14rpx 14rpx;box-sizing: border-box;margin-bottom: 20rpx;
				.hmlistt{
					display: flex;justify-content: space-between;margin-bottom: 8rpx;
					.hmlista{position: relative;width: 112rpx;height: 48rpx;
						.hmlistai{width: 112rpx;height: 48rpx;}
						.hmlistat{font-size: 22rpx;font-weight: bold;color: #FFFFFF;line-height: 40rpx;text-align: center;position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
						
					}
					.hmlistr{min-width: 70rpx;height: 26rpx;background: rgba(124, 198, 35, 0.3);border-radius: 12rpx;text-align: center;line-height: 26rpx;font-size: 16rpx;color: #21C050;padding: 0 10rpx;margin: 10rpx 10rpx 0 0 ;}
				}
				.hmlistb{
					display: flex;justify-content: space-between;
					.hmlistbr{margin-left: 16rpx;width: 140rpx;height: 102rpx;flex: 0 0 auto;}
					.hmline{width: 22rpx;height: 2rpx;background: #C5C5C5;margin-top: 16rpx;}
				}	
}
		}
</style>