Skip to content

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

首页

parent 56144b4a
Show whitespace changes
Inline Side-by-side
Showing with 435 additions and 53 deletions
src/App.vue
View file @ c7717f9c
......@@ -130,6 +130,9 @@ button::after {
.flex1 {
flex: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-center {
align-items: center;
......
src/api/url/index.js
View file @ c7717f9c
export default {
// 首页
homeInfo: '/postcard/api/developmentInfo/v1.0/source',
// 列表
// 产业园列表
parkList: '/postcard/api/parkInfo/v1.0/page',
......
src/components/bab-Touchbox/bab-Touchbox.vue 0 → 100644
View file @ c7717f9c
<template>
<view>
<view :class="isend?'fixedbox2' :'fixedbox'"
:style="{'height':windowHeight + 'px','width':windowWidth + 'px','top':fixboxtop +'px','border-top-left-radius':radius,'border-top-right-radius':radius}"
@touchmove="getstart($event)" @tap="tap" @touchend="getend" ref="fixbox">
<view class="content" :style="{'height':windowHeight + 'px'}">
<view class="tapBoxTouchLine" v-if="showLine">
<view class="line"></view>
</view>
<slot />
</view>
</view>
</view>
</template>
<script>
/**
* tapBox 触摸上拉组件
* @description 触摸上拉组件，类似于高德美团上拉组件
* @property {String} radius 左上右上圆角
* @property {Number} minHeight 最低高度 占总屏幕高度占比
* @property {Number} minHeight 最高高度 占总屏幕高度占比
* @property {Number} touchHeight 允许滑动区域高度默认顶部横线高度 0为任意区域可滑动，单位rpx
* @property {Boolean} showLine 上否显示顶部滑动线
* @event {Function} tap 点击事件
* @event {Function} getstart 开始滑动时触发事件
* @event {Function} getend 滑动结束事件
*/
export default {
name: "tapBox",
data() {
return {
windowHeight: 0, // 屏幕高度
windowWidth: 0, // 屏幕宽度
firsttop: 0, // 默认高度
fixboxtop: 0, // 实际高度
phonetop: 200, // 默认滑动分界线 - 后面计算为最低与最高的一半
isend: false, // 触摸结束
isfirst: true, // 手指第一次触摸
tapboxtop: 0, // 手指距离顶部距离
};
},
props: {
radius: {
type: String,
default: '50rpx'
},
minHeight: {
type: Number,
default: 0.35
},
maxHeight: {
type: Number,
default: 0.9
},
touchHeight: {
type: Number,
default: 0
},
showLine: {
type: Boolean,
default: true
},
},
mounted() {
this.$nextTick(function() {
this.windowWidth = uni.getSystemInfoSync().windowWidth;
this.windowHeight = uni.getSystemInfoSync().windowHeight;
var defaultHeight = this.windowHeight * (1 - this.minHeight)
this.firsttop = defaultHeight
this.phonetop = (this.windowHeight * this.maxHeight - this.windowHeight * this.minHeight) /
2
this.fixboxtop = defaultHeight
this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
this.$emit('maxtHeight', (this.windowHeight * this.maxHeight))
})
},
onReady() {},
computed: {},
methods: {
tap(e) {
// console.log(e)
},
getstart(e) {
var screenY;
//#ifdef MP-WEIXIN
screenY = e.touches[0].clientY;
//#endif
//#ifndef MP-WEIXIN
screenY = e.touches[0].screenY;
//#endif
// console.log(screenY)
// 这里特殊处理 解决：在滑动框内如果存在滚动元素，则会出现滑动时滑动框和内部滚动同时滑的问题
if (this.touchHeight !== 0) {
if (screenY - this.fixboxtop > this.touchHeight) {
return false;
}
}
this.isend = false
if (this.isfirst) {
this.isfirst = false
this.tapboxtop = screenY - this.fixboxtop
}
this.fixboxtop = screenY - this.tapboxtop
if (this.fixboxtop > this.firsttop) { // 往下滑 不允许
this.fixboxtop = this.firsttop
} else { // 往上滑
if (this.fixboxtop <= this.windowHeight * (1 - this.maxHeight)) {
this.fixboxtop = this.windowHeight * (1 - this.maxHeight)
}
}
this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
},
getend() {
this.isend = true
this.isfirst = true
if ((this.firsttop - this.fixboxtop) <= this.phonetop) {
this.fixboxtop = this.firsttop
} else {
this.fixboxtop = this.windowHeight * (1 - this.maxHeight)
}
this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
}
},
}
</script>
<style lang="scss" scoped>
.content {
overflow-y: auto;
padding-bottom: 200rpx;
}
.tapBoxTouchLine {
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.line {
margin: 0px;
vertical-align: middle;
border-bottom: 8rpx solid rgb(214, 215, 217);
width: 60rpx;
transform: scaleY(0.5);
border-top-color: rgb(214, 215, 217);
border-right-color: rgb(214, 215, 217);
border-left-color: rgb(214, 215, 217);
}
.fixedbox {
position: fixed;
left: 0;
background-color: #FFFFFF;
padding: 0 12px;
box-sizing: border-box;
}
.fixedbox2 {
position: fixed;
left: 0;
background-color: #FFFFFF;
padding: 0 12px;
transition-property: top;
transition-duration: .8s;
box-sizing: border-box;
}
</style>
src/components/media/card.vue
View file @ c7717f9c
......@@ -114,7 +114,7 @@ export default {
overflow: hidden;
}
.media-left {
height: 178rpx;
height: 134rpx;
}
.media-right {
display: flex;
......@@ -128,7 +128,7 @@ export default {
color: #333;
font-weight: 500;
font-size: 28rpx;
line-height: 30rpx;
line-height: 36rpx;
font-family: PingFang SC-Medium, PingFang SC;
margin-bottom: 15rpx;
}
......
src/components/media/carrier-card.vue
View file @ c7717f9c
......@@ -6,17 +6,17 @@
>
<template v-slot:rightMedia>
<view>
<div class="flex right-media f24">
<div style="margin-left: 24rpx; width: 200rpx" class="ell">
<div class="flex right-media f18">
<div style="width: 180rpx" class="ell">
<span class="c80">面积：</span>{{ areaInfo.planArea || "--" }}k㎡
</div>
</div>
<div class="f24 flex right-footer">
<div style="width: 200rpx" class="ell">
<div class="f18 flex right-footer">
<div style="width: 180rpx" class="ell">
<span class="c80">载体类型：</span>
<span>{{ areaInfo.levelName || "--" }}</span>
</div>
<div style="margin-left: 24rpx; width: 200rpx" class="ell">
<div style="margin-left: 18rpx; width: 180rpx" class="ell">
<span class="c80">建筑结构：</span>{{ areaInfo.type || "--" }}
</div>
</div>
......
src/components/media/land-card.vue
View file @ c7717f9c
<template>
<media-card
:img="parkInfo.imgUrl"
:title="parkInfo.name"
:img="detail.imgUrl"
:title="detail.name"
:keyWords="keyWords"
:cardId="parkInfo.id"
:cardId="detail.id"
>
<template v-slot:rightMedia>
<view class="cell">
<view class="line">
<view class="info">
<view class="title">土地类型：</view>
<view class="content">{{ detail.provinceName }}</view>
</view>
<view class="info">
<view class="title">占地面积</view>
<view class="content ell">{{}}</view>
</view>
</view>
<view>
<div class="f18 flex right-footer">
<div style="width: 200rpx">
<span class="c80">土地类型：</span>
<span>{{ detail.type || "--" }}</span>
</div>
<div style="margin-left: 10rpx">
<span class="c80">占地面积：</span
>{{ detail.area ? parkInfo.area + "亩" : "--" }}
</div>
</div>
</view>
</template>
</media-card>
......@@ -37,35 +37,16 @@ export default {
</script>
<style lang="scss" scoped>
.cell {
padding: 44rpx 30rpx 20rpx 30rpx;
background: white;
border-radius: 10rpx;
box-shadow: 0 4rpx 5rpx 0 rgba(0, 0, 0, 0.15);
.right-media {
color: #4d4d4d;
line-height: 34rpx;
margin-bottom: 10rpx;
}
.line {
display: flex;
align-items: center;
& + & {
margin-top: 30rpx;
}
.right-footer {
color: #4d4d4d;
line-height: 34rpx;
}
.info {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
overflow: hidden;
}
.title {
margin-right: 10rpx;
.c80 {
color: #808080;
}
.content {
flex: 1;
color: 4d4d4d;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
src/components/section-title/section-title.vue 0 → 100644
View file @ c7717f9c
<template>
<div class="flex mt-20 mb-20">
<span class="title-left"></span>
<p class="section-title">{{title}}</p>
</div>
</template>
<script>
export default {
props: {
title: ''
}
}
</script>
<style scoped>
.title-left {
width: 4rpx;
height: 30rxp;
border-radius: 2rpx;
background: #4374EF;
margin-right: 8rpx;
}
.section-title {
line-height: 30rpx;
color: #333;
font-weight: bold;
font-size: 28rpx;
}
.mt-20 {
margin-top: 20rpx;
}
.mb-20 {
margin-bottom: 20rpx;
}
</style>
\ No newline at end of file
src/pages.json
View file @ c7717f9c
......@@ -11,7 +11,7 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "合伙招商·深产发"
"navigationStyle": "custom"
}
},
{
......@@ -65,7 +65,7 @@
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "园区字典",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#F8F8F8"
}
......
src/pages/entryPark/index.vue
View file @ c7717f9c
......@@ -16,7 +16,7 @@
<div style="height: 80rpx"></div>
<div
class="flex align-center justify-between"
style="padding: 25rpx 23rpx;background: #fff;"
style="padding: 25rpx 23rpx;background: #fff;position: fixed;top: 80rpx;width: 100vw "
>
<div class="flex align-center">
<div class="search-input">
......@@ -53,7 +53,7 @@
themeColor="#C0322B"
:top="192"
></dropdown-vue>
<div style="height: 156rpx"></div>
<div style="height: 192rpx" :style="{height: activeBar === 1 ? '112rpx': '192rpx'}"></div>
<view class="tab-contant">
<view
class="media-card"
......@@ -161,6 +161,7 @@ export default {
data: {
current: this.pageNum,
size: 20,
condition: {}
},
success: (res) => {
this.isLoading = false;
......
src/pages/index/index.vue
View file @ c7717f9c
<template>
<div>投资舒城</div>
<page-meta page-style="overflow: hidden">
<div style="width: 100vw;height: 70vh;background: #021129">
<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>
</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>
</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>
</bab-touchbox>
</page-meta>
</template>
<script>
import BabTouchbox from '@/components/bab-Touchbox/bab-Touchbox.vue'
import API from '@/api/url'
import sectionTitleVue from '@/components/section-title/section-title.vue'
export default{
components: {BabTouchbox, sectionTitleVue},
data() {
return {
honorList: [
{
icon: '/static/img/home/icon-home1.png',
name: '全国环境百强县'
},
{
icon: '/static/img/home/icon-home2.png',
name: '安徽省制造业发展增速十快县'
},
{
icon: '/static/img/home/icon-home3.png',
name: '安徽省民营经济发展先进县'
},
{
icon: '/static/img/home/icon-home4.png',
name: '国家卫生县城'
},
{
icon: '/static/img/home/icon-home5.png',
name: '中国未来投资热点百佳县'
},
{
icon: '/static/img/home/icon-home6.png',
name: '全国科技进步先进县'
},
{
icon: '/static/img/home/icon-home7.png',
name: '全国交通运输一体化创建示范县'
},
{
icon: '/static/img/home/icon-home8.png',
name: '全国电子商务进农村综合示范县'
},
{
icon: '/static/img/home/icon-home9.png',
name: '安徽省质量认证示范县'
},
],
numList: [],
videoInfo: {
videourl: '',
videoCover: ''
}
}
},
mounted() {
this.$fetch({
url: API.homeInfo,
methods: 'get',
success: res => {
console.log(res)
this.numList = res.details;
this.videoInfo = res.videoVoList.length?res.videoVoList[0] : {}
}
})
},
}
</script>
<style lang="scss" scoped>
.honor-group {
flex-wrap: wrap;
justify-content: space-between;
}
.honor-item {
background: #F2F6FF;
border-radius: 4rpx;
width: 225rpx;
height: 100rpx;
padding: 23rpx 17rpx;
box-sizing: border-box;
margin-bottom: 15rpx;
font-size: 18rpx;
line-height: 26rpx;
color: #606266;
.honor-icon {
width: 52rpx;
height: 52rpx;
margin-right: 10rpx;
flex-shrink: 0;
}
}
.num-data {
background: #4374EF;
border-radius: 18rpx;
line-height: 24rpx;
color: #fff;
padding: 5rpx 20rpx;
font-size: 20rpx;
margin-bottom: 20rpx;
}
.top-text {
color: #333;
font-size: 24rpx;
line-height: 1;
margin-bottom: 10rpx;
font-weight: 600;
}
.bottom-text {
font-size: 20rpx;
color: #606266;
line-height: 1;
}
.data-box {
padding: 10rpx 14rpx;
border: 1px solid;
border-image: radial-gradient(circle, rgba(67, 116, 239, 1), rgba(221, 111, 59, 1), rgba(65, 119, 253, 1)) 1 1;
border-radius: 8rpx;
background: #FBFCFF;
margin-top: 60rpx;
overflow: hidden;
}
.data-wrap {
padding: 12rpx 14rpx;
border-radius: 2rxp;
margin-bottom: 10rpx;
align-items: center;
background: #E6EDFF;
}
</style>>
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