Skip to content

S
shuchengMiniPro
Commit 8e3da4f4 authored by shilei's avatar shilei
Browse files
Options

首页滑动

parent 57b18f6b
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 55 deletions
src/components/bab-Touchbox/bab-Touchbox.vue
View file @ 8e3da4f4
......@@ -34,7 +34,7 @@
windowWidth: 0, // 屏幕宽度
firsttop: 0, // 默认高度
fixboxtop: 0, // 实际高度
phonetop: 200, // 默认滑动分界线 - 后面计算为最低与最高的一半
phonetop: 50, // 默认滑动分界线 - 后面计算为最低与最高的一半
isend: false, // 触摸结束
isfirst: true, // 手指第一次触摸
tapboxtop: 0, // 手指距离顶部距离
......@@ -52,7 +52,7 @@
},
maxHeight: {
type: Number,
default: 0.9
default: 1
},
touchHeight: {
type: Number,
......@@ -128,7 +128,7 @@
<style lang="scss" scoped>
.content {
overflow-y: auto;
// overflow-y: auto;
padding-bottom: 200rpx;
}
.tapBoxTouchLine {
......
src/pages/index/index.vue
View file @ 8e3da4f4
......@@ -4,65 +4,67 @@
<img src="/static/img/home/bg.png" style="width: 100vw;" mode='widthFix' alt="">
</div>
<bab-touchbox>
<div style="height: 50rpx;"></div>
<video v-if="videoInfo.videourl" style="width: 100%;height: 318rpx;" :src="videoInfo.videourl" :poster="videoInfo.videoCover" object-fit="fill"></video>
<section-title-vue title="舒城荣誉"></section-title-vue>
<div class="flex honor-group">
<div class="flex honor-item" v-for="item in honorList" :key="item.name">
<img class="honor-icon" :src="item.icon" alt="">
<div class="flex align-center" style="width: 130px">
<p>{{item.name}}</p>
<bab-touchbox @maxtHeight="handleMax" @currentHeight="handleCurrent">
<div :style="{height: maxHeight + 'px', 'overflow-y': allowScroll ? 'auto': 'hidden'}">
<div style="height: 50rpx;"></div>
<video v-if="videoInfo.videourl" style="width: 100%;height: 318rpx;" :src="videoInfo.videourl" :poster="videoInfo.videoCover" object-fit="fill"></video>
<section-title-vue title="舒城荣誉"></section-title-vue>
<div class="flex honor-group">
<div class="flex honor-item" v-for="item in honorList" :key="item.name">
<img class="honor-icon" :src="item.icon" alt="">
<div class="flex align-center" style="width: 130px">
<p>{{item.name}}</p>
</div>
</div>
<div class="honor-item flex flex-column align-center" style="width: 100%;text-align: center;padding-top: 14rpx;">
<img src="/static/img/home/icon-home10.png" style="width: 49rpx;height: 45rpx;margin-bottom: 10rpx;flex-shrink: 0;" alt="">
<p>国家生态文明建设示范区</p>
</div>
</div>
<div class="honor-item flex flex-column align-center" style="width: 100%;text-align: center;padding-top: 14rpx;">
<img src="/static/img/home/icon-home10.png" style="width: 49rpx;height: 45rpx;margin-bottom: 10rpx;flex-shrink: 0;" alt="">
<p>国家生态文明建设示范区</p>
</div>
</div>
<!-- -->
<section-title-vue title="数说舒城"></section-title-vue>
<div class="flex flex-wrap justify-between">
<div class="num-data" v-for="item in numList" :key="item">{{item}}</div>
</div>
<div style="margin-top: 50rpx;">
<img src="/static/img/home/data-banner.png" style="width: 100%" mode="widthFix" alt="">
</div>
<div class="flex flex-wrap justify-between data-box">
<div class="flex flex-column data-wrap">
<p class="top-text">23个</p>
<p class="bottom-text">2023年列入市亿元以上计划竣工项目</p>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">52个</p>
<p class="bottom-text">2023年招商引资签约项目</p>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">12项</p>
<p class="bottom-text">承接下放审批权限</p>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">100%</p>
<p class="bottom-text">政务服务好评率</p>
<!-- -->
<section-title-vue title="数说舒城"></section-title-vue>
<div class="flex flex-wrap justify-between">
<div class="num-data" v-for="item in numList" :key="item">{{item}}</div>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">3项</p>
<p class="bottom-text">投融资服务</p>
<div style="margin-top: 50rpx;">
<img src="/static/img/home/data-banner.png" style="width: 100%" mode="widthFix" alt="">
</div>
<div class="flex align-center data-wrap" style="width: 100%;">
<p class="bottom-text" style="margin-right: 100rpx;">受理群众热线：</p>
<div class="flex flex-column align-center">
<p class="top-text">5300余件</p>
<p class="bottom-text">办件量</p>
<div class="flex flex-wrap justify-between data-box">
<div class="flex flex-column data-wrap">
<p class="top-text">23个</p>
<p class="bottom-text">2023年列入市亿元以上计划竣工项目</p>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">52个</p>
<p class="bottom-text">2023年招商引资签约项目</p>
</div>
<span style="width: 2rpx;height: 48rpx;background: #fff;border-radius: 1rpx;margin-left: 50rpx;margin-right: 50rpx;"></span>
<div class="flex flex-column align-center">
<p class="top-text">15000余次</p>
<p class="bottom-text">接受咨询</p>
<div class="flex flex-column data-wrap">
<p class="top-text">12项</p>
<p class="bottom-text">承接下放审批权限</p>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">100%</p>
<p class="bottom-text">政务服务好评率</p>
</div>
<div class="flex flex-column data-wrap">
<p class="top-text">3项</p>
<p class="bottom-text">投融资服务</p>
</div>
<div class="flex align-center data-wrap" style="width: 100%;">
<p class="bottom-text" style="margin-right: 100rpx;">受理群众热线：</p>
<div class="flex flex-column align-center">
<p class="top-text">5300余件</p>
<p class="bottom-text">办件量</p>
</div>
<span style="width: 2rpx;height: 48rpx;background: #fff;border-radius: 1rpx;margin-left: 50rpx;margin-right: 50rpx;"></span>
<div class="flex flex-column align-center">
<p class="top-text">15000余次</p>
<p class="bottom-text">接受咨询</p>
</div>
</div>
</div>
<div style="height: 200rpx;"></div>
</div>
<div style="height: 200rpx;"></div>
</bab-touchbox>
</page-meta>
</template>
......@@ -116,7 +118,10 @@ export default{
videoInfo: {
videourl: '',
videoCover: ''
}
},
maxHeight: 0,
currentHeight: 0,
allowScroll: false
}
},
mounted() {
......@@ -130,6 +135,23 @@ export default{
}
})
},
methods: {
handleMax(e) {
console.log('max', e);
this.maxHeight = e;
},
handleCurrent(e){
console.log('handleCurrent', e);
this.initHeight = this.initHeight ? this.initHeight : e
this.currentHeight = e;
if(Number(this.currentHeight) + 1 >= Number(this.maxHeight)){
this.allowScroll = true;
}
if(Number(this.initHeight) + 1 >= Number(this.currentHeight)){
this.allowScroll = false
}
}
}
}
</script>
<style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment