concrete-transportation-uniapp-20250821/pages/index/index.vue

<template>
	<view class="content">
		
		<view class="banner sticky">
			<view class="head-div" :class="{'iooo': isSticky, 'box-shadow-light': isSticky}">
				<view class="flex">
					<view><uni-icons type="location" color="#333" size="22"/></view>
					<view>{{ area }}</view> 
					<view><uni-icons type="down" color="#333" size="16"/></view>
				</view>
			</view>
		</view>
		
		<view class="banner-div">
			<image style="width: 690rpx;height: 268rpx;border-radius: 10rpx;" src="/static/re/banner.png"></image>
		</view>
		
		<view class="notify-div flex" @click="clickNotify">
			<view class="mr10"><uni-icons type="notification" color="#FF0000" size="38rpx"></uni-icons></view>
			<view class="ellipsis">公告：{{notice.title}}</view>
		</view>
	
		<view class="content-div">
			<view class="font-title mt32">砼聚人小程序全新上线啦</view>
			<view class="font-subtitle m20">深度开放共创共赢</view>
			<view>
				砼聚人平台隶属于长沙市砼聚人科技有限公司，平台专注于为混凝土行业的设备提供灵活用工（现主营业务为泵车，车载泵，搅拌车提供代驾服务），致力于解决行业用工成本及用工风险的行业痛点，帮助客户降低成本，提升市场竞争力。同时，提升泵车操作手应有的技术价值，实现工作自由度高，劳动强度低，收入高，结算快的未来工作场景，我们的梦想是，让行业的兄弟活得更有尊严
			</view>
			<view class="flex m20 font-botton">
				<view class="flex" style="width: 50%;" @click="clickDriver()">
					<image src="/static/re/ideic3.png" class="square40 mr10"/>
					<view style="line-height: 40rpx;">泵司入驻</view>
				</view>
				<view class="flex" style="width: 50%;" @click="clickEnter()">
					<image src="/static/re/ideic4.png" class="square40 mr10"/>
					<view style="line-height: 40rpx;">企业入驻</view>
				</view>
			</view>
			<view>
				随着疫情到来，全民进入消费降级时代，行业进入寒冬，许多企业面临困境并关闭。然而，在这个
				<image style="float: right; width: 480rpx; height: 378rpx;" src="/static/re/ide1.png"></image>
				挑战中，人们开始重视居家生活质量和健康，促进了需求量上升。行业逐渐适应新常态，加强线上销售和定制服务，不断创新和改进产品。逆境中孕育机遇，希望新的一年能带来行业的复苏和发展。
			</view>
			<view class="flex m36">
				<view class="flex" style="width: 50%;">
					<image src="/static/re/ideic1.png" class="square80 mr10"/>
					<view>
						<view style="line-height: 60rpx;font-size: 60rpx;color: #F40000;font-weight: bolder;">{{ num2 }}</view>
						<view style="line-height: 20rpx;font-size: 20rpx;color: #aaa">企业入驻</view>
					</view>
				</view>
				<view class="flex" style="width: 50%;">
					<image src="/static/re/ideic2.png" class="square80 mr10"/>
					<view>
						<view style="line-height: 60rpx;font-size: 60rpx;color: #F40000;font-weight: bolder;">{{ num1 }}</view>
						<view style="line-height: 20rpx;font-size: 20rpx;color: #aaa;">司机入驻</view>
					</view>
				</view>
			</view>
			<view @click="menubar">
				<view class="m10">更多精彩更在视频介绍：</view>
				<!-- <image style="width: 690rpx;height: 572rpx;" src="/static/re/ide2.png"></image> -->
				<video style="width: 690rpx;height: 1272rpx;" src="https://relief.oss-cn-hangzhou.aliyuncs.com/home.mp4" autoplay="true"></video>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				area: "长沙",
				isSticky: false,
				num1: "",
				num2: "",
				notice: {}
			}
		},
		onShow() {
			//this.loadArea()
			this.loadData()
			const intersectionObserver = uni.createIntersectionObserver(this);
			intersectionObserver.relativeToViewport({ top: 0 }).observe('.banner-div', (res) => {
			    if (res.intersectionRatio <= 0) {
				    this.isSticky = true
			    } else {
				    this.isSticky = false
			    }
			});
			if (uni.getStorageSync("role") === '1'){
				uni.setStorageSync("role", "1")
			} else if (uni.getStorageSync("role") === '2'){
				uni.setStorageSync("role", "2")
			} else if (uni.getStorageSync("role") === '3'){
				uni.setStorageSync("role", "3")
			} else if (uni.getStorageSync("role") === '4'){
				uni.setStorageSync("role", "4")
			} else {
				uni.setStorageSync("role", "0")
			}
			console.log("role", uni.getStorageSync("role")); 
			this.area = uni.getStorageSync("area");
		},
		methods: {
			clickNotify(){ 
				uni.navigateTo({ url: `/pages/base/notify`}) 
			},
			clickDriver(){
				uni.navigateTo({ url: '/pages/login/driver'})
			},
			clickEnter(){
				uni.navigateTo({ url: '/pages/login/enter'})
			},
			loadArea(){
				this.$httpGet("/api/area/get", {}, (res) => {
					console.log('[/area/get]', res);
					if(res.data){
						this.area=res.data
					}
				})
			},
			loadData(){
				this.$httpGet("/api/index/count", {}, (res) => {
					console.log('[/index/count]', res);
					if(res.data){
						this.num1=res.data.num1
						this.num2=res.data.num2
					}
				})
				this.$httpGet("/api/admin/notice", {}, (res) => {
					console.log('[/admin/notice]', res);
					if(res.data){
						this.notice=res.data
					}
				})
			},
		}
	}
</script>

<style>
	body{
		background-color: #FFF;
	}
	.iooo {
	  background-color: #FFF;
	}
	.banner {
		width: 100vw;
		height: 344rpx;
		background: radial-gradient(200% 100% at 49% 0%, rgba(205, 0, 0, 0.2) 0%, rgba(233, 244, 252, 0) 100%);
	}
	.head-div{
		width: 690rpx;
		height: 88rpx;
		padding: 88rpx 30rpx 0rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #000000;
	}
	.banner-div{
		width: 690rpx;
		height: 260rpx;
		margin: -160rpx auto 10rpx;
	}
	.notify-div{
		width: 690rpx;
		margin: 30rpx auto 10rpx;
		
		font-size: 24rpx;
		line-height: 36rpx;
		color: #1C1C1C;
	}
	.content-div{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		
		font-size: 28rpx;
		line-height: 52rpx;
		color: rgba(51, 51, 51, 0.85);
	}
	
	
	.head-input{
		width: 448rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #ffffff;
		border-radius: 32rpx;
		
		line-height: 64rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #333;
		
		padding-left: 258rpx;
	}
	.head-address{
		width: 100rpx;
		font-size: 24rpx;
		line-height: 64rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #292929;
		
	}
	.search-button{
		width: 96rpx;
		height: 52rpx;
		line-height: 52rpx;
		background: #60bda2;
		border-radius: 26rpx;
		
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}
	
	
	
	.banner-font{
		width: 292rpx;
		height: 142rpx;
		font-size: 72rpx;
		line-height: 66rpx;
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		text-align: left;
		color: #ffffff;
		letter-spacing: -1;
		text-shadow: 0px 6px 6px 0px rgba(0,165,141,0.70); 
		
		position: absolute;
		left: 52rpx;
		top: 34rpx;
	}
	.font-3{
		height: 28rpx;
		line-height: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #ffffff;
		
		text-shadow: 0px 4px 6px 0px rgba(0,165,141,0.70); 
		position: absolute;
		left: 52rpx;
		top: 178rpx;
	}
	.banner-button{
		width: 240rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #ffdb75;
		border-radius: 24rpx;
		box-shadow: 0px 6px 6px 0px rgba(17,106,93,0.23); 
		
		position: absolute;
		left: 52rpx;
		top: 220rpx;
		
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #26c591;
	}
	
	
	.item-card{
		width: 666rpx;
		height: 156rpx;
		padding: 22rpx; 
		background: #ffffff;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	
	.item-font{
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #b8b8b8;
		
		line-height: 34rpx;
	}
	.item-button{
		width: 160rpx;
		height: 52rpx;
		line-height: 52rpx;
		background: linear-gradient(178deg,#4fd3bc 0%, #60c285 99%);
		border-radius: 26px;
		box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.16); 
		
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		
		position: absolute;
		top: 74rpx;
		right: 22rpx;
	}
</style>