You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
9.0 KiB
369 lines
9.0 KiB
<template>
|
|
<view class="page">
|
|
<view class="content">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="banner sticky">
|
|
<view :class="['head-div', isSticky && 'iooo', isSticky && 'box-shadow-light']">
|
|
<view class="flex">
|
|
<view>
|
|
<uv-icon name="location" size="22" color="#333"></uv-icon>
|
|
</view>
|
|
<view>{{ area }}</view>
|
|
<view @click="showRoleSelector">
|
|
<uv-icon name="arrow-down" size="16" color="#333"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 角色切换按钮 -->
|
|
<view class="role-switch-container">
|
|
<view class="role-switch-btn" @click="showRoleSelector">
|
|
<text class="role-text">{{ currentRoleText }}</text>
|
|
<uv-icon name="arrow-down" size="14" color="#666"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- banner图片 -->
|
|
<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">
|
|
<uv-icon name="volume" size="24" color="#666"></uv-icon>
|
|
</view>
|
|
<view class="ellipsis">公告：{{ notice.content || '砼聚人平台全新上线，欢迎大家使用！' }}</view>
|
|
</view>
|
|
|
|
<!-- 主要内容 -->
|
|
<view class="content-div">
|
|
<view class="font-title mt32">砼聚人小程序全新上线啦</view>
|
|
<view class="font-subtitle m20">深度开放共创共赢</view>
|
|
<view class="description">
|
|
砼聚人平台隶属于长沙市砼聚人科技有限公司，平台专注于为混凝土行业的设备提供灵活用工（现主营业务为泵车，车载泵，搅拌车提供代驾服务），致力于解决行业用工成本及用工风险的行业痛点，帮助客户降低成本，提升市场竞争力。同时，提升泵车操作手应有的技术价值，实现工作自由度高，劳动强度低，收入高，结算快的未来工作场景，我们的梦想是，让行业的兄弟活得更有尊严
|
|
</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 class="description-with-image">
|
|
随着疫情到来，全民进入消费降级时代，行业进入寒冬，许多企业面临困境并关闭。然而，在这个
|
|
<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">{{ num1 || '1000+' }}</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">{{ num2 || '5000+' }}</view>
|
|
<view style="line-height:20rpx;font-size:20rpx;color:#aaa">司机入驻</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视频介绍 -->
|
|
<view @click="clickVideo">
|
|
<view class="m10">更多精彩更在视频介绍：</view>
|
|
<video style="width:690rpx;height:1272rpx" :src="videoUrl" :autoplay="true"></video>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<tabber select="home" />
|
|
|
|
<!-- 身份切换浮窗 -->
|
|
<view class="role-float-btn" @click="showRoleModal">
|
|
<uv-icon name="man" size="24" color="#fff"></uv-icon>
|
|
</view>
|
|
|
|
<!-- 角色选择组件 -->
|
|
<role-selector ref="roleSelector" @roleChanged="onRoleChanged"></role-selector>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import roleSelector from '@/components/config/roleSelector.vue'
|
|
import { mapState, mapGetters, mapMutations } from 'vuex'
|
|
|
|
export default {
|
|
components: {
|
|
tabber,
|
|
roleSelector,
|
|
},
|
|
data() {
|
|
return {
|
|
area: '长沙',
|
|
isSticky: false,
|
|
num1: '1000+',
|
|
num2: '5000+',
|
|
notice: {
|
|
content: '砼聚人平台全新上线，欢迎大家使用！'
|
|
},
|
|
leftIcon: false,
|
|
rightIcon: false,
|
|
videoUrl: 'https://relief.oss-cn-hangzhou.aliyuncs.com/home.mp4'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['role']),
|
|
...mapGetters(['currentRoleText'])
|
|
},
|
|
onShow() {
|
|
this.loadData();
|
|
// 初始化角色
|
|
this.initRole();
|
|
// 监听滚动实现粘性导航
|
|
const intersectionObserver = uni.createIntersectionObserver(this);
|
|
intersectionObserver.relativeToViewport({ top: 0 }).observe('.banner-div', (res) => {
|
|
if (res.intersectionRatio <= 0) {
|
|
this.isSticky = true;
|
|
} else {
|
|
this.isSticky = false;
|
|
}
|
|
});
|
|
|
|
// 获取存储的地区信息
|
|
this.area = uni.getStorageSync('area') || '长沙';
|
|
|
|
// 监听角色变更事件
|
|
uni.$on('roleChanged', (newRole) => {
|
|
console.log('角色已变更为:', newRole);
|
|
});
|
|
},
|
|
methods: {
|
|
...mapMutations(['initRole']),
|
|
// 点击公告
|
|
clickNotify() {
|
|
uni.navigateTo({ url: '/pages_order/base/notify' });
|
|
},
|
|
// 泵司入驻
|
|
clickDriver() {
|
|
uni.navigateTo({ url: '/pages_order/login/driver' });
|
|
},
|
|
// 企业入驻
|
|
clickEnter() {
|
|
uni.navigateTo({ url: '/pages_order/login/enter' });
|
|
},
|
|
// 加载数据
|
|
loadData() {
|
|
// 模拟加载统计数据
|
|
setTimeout(() => {
|
|
this.num1 = '1200+';
|
|
this.num2 = '5800+';
|
|
}, 1000);
|
|
},
|
|
// 点击视频
|
|
clickVideo() {
|
|
console.log('点击视频');
|
|
},
|
|
// 显示角色选择器
|
|
showRoleSelector() {
|
|
this.$refs.roleSelector.open();
|
|
},
|
|
|
|
// 显示身份切换弹窗
|
|
showRoleModal() {
|
|
this.$refs.roleSelector.open();
|
|
},
|
|
// 处理角色变更事件
|
|
onRoleChanged(newRole) {
|
|
console.log('角色已变更为:', newRole);
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
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);
|
|
}
|
|
|
|
.font-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.font-subtitle {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.font-botton {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.description {
|
|
text-align: justify;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.description-with-image {
|
|
text-align: justify;
|
|
line-height: 1.6;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-sb {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.mr10 {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.m20 {
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.m36 {
|
|
margin: 36rpx 0;
|
|
}
|
|
|
|
.mt32 {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.square40 {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.square80 {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.box-shadow-light {
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.m10 {
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
.role-switch-container {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 30rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.role-switch-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border-radius: 30rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.role-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.role-float-btn {
|
|
position: fixed;
|
|
bottom: 200rpx;
|
|
right: 30rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3);
|
|
z-index: 999;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|