From 7b4cf17bee18ef8621c4b58ee72acfae5e8fa8f0 Mon Sep 17 00:00:00 2001 From: itgaojian163 Date: Sat, 18 Jan 2025 17:57:49 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A22?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 3 + app.wxss | 44 ++++- .../fui-bottom-popup/fui-bottom-popup.js | 40 +++++ .../fui-bottom-popup/fui-bottom-popup.json | 3 + .../fui-bottom-popup/fui-bottom-popup.wxml | 5 + .../fui-bottom-popup/fui-bottom-popup.wxss | 36 ++++ components/page-loading/page-loading.js | 24 +++ components/page-loading/page-loading.json | 4 + components/page-loading/page-loading.wxml | 4 + components/page-loading/page-loading.wxss | 53 ++++++ pages/domain/domain.wxml | 2 +- pages/domain/domain.wxss | 5 +- pages/index/index.js | 154 ++++++++++++++---- pages/index/index.json | 3 +- pages/index/index.wxml | 58 ++++--- pages/index/index.wxss | 146 +++++++++++++++-- pages/invest/invest.wxml | 2 +- pages/policy/policy.wxml | 2 +- 18 files changed, 516 insertions(+), 72 deletions(-) create mode 100755 components/fui-bottom-popup/fui-bottom-popup.js create mode 100755 components/fui-bottom-popup/fui-bottom-popup.json create mode 100755 components/fui-bottom-popup/fui-bottom-popup.wxml create mode 100755 components/fui-bottom-popup/fui-bottom-popup.wxss create mode 100644 components/page-loading/page-loading.js create mode 100644 components/page-loading/page-loading.json create mode 100644 components/page-loading/page-loading.wxml create mode 100644 components/page-loading/page-loading.wxss diff --git a/app.json b/app.json index 58181b8..2b514dd 100644 --- a/app.json +++ b/app.json @@ -42,5 +42,8 @@ "lazyCodeLoading": "requiredComponents", "useExtendedLib": { "weui": true + }, + "usingComponents": { + "page-loading": "/components/page-loading/page-loading" } } \ No newline at end of file diff --git a/app.wxss b/app.wxss index 3287793..0524169 100644 --- a/app.wxss +++ b/app.wxss @@ -8,6 +8,14 @@ page { display: flex; flex-direction: column; justify-content: flex-start; + overflow: hidden; +} + +::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + color: transparent; } page::after { @@ -36,6 +44,7 @@ page::after { align-items: center; justify-content: flex-start; box-sizing: border-box; + overflow: scroll; } .mt-10 { @@ -105,7 +114,7 @@ page::after { .func-title-box .name { font-family: Source Han Sans CN; font-weight: bold; - font-size: 24rpx; + font-size: 26rpx; color: #303030; margin-left: 20rpx; text-align: center; @@ -179,8 +188,41 @@ page::after { } + +.line-noappoint { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + width: 100%; +} + + .expand-btn { float: right; background-color: chartreuse; margin-top: 100rpx; +} + +.body { + overflow: scroll; +} + +.font-18 { + font-size: 18rpx; +} + +.font-20 { + font-size: 20rpx; +} + +.font-24 { + font-size: 24rpx; +} + +.font-40 { + font-size: 40rpx; +} + +.font-30 { + font-size: 30rpx; } \ No newline at end of file diff --git a/components/fui-bottom-popup/fui-bottom-popup.js b/components/fui-bottom-popup/fui-bottom-popup.js new file mode 100755 index 0000000..59351fc --- /dev/null +++ b/components/fui-bottom-popup/fui-bottom-popup.js @@ -0,0 +1,40 @@ +Component({ + properties: { + show: { + type: Boolean, + value: false + }, + //背景颜色 + background: { + type: String, + value: '#fff' + }, + //圆角 + radius: { + type: Number, + optionalTypes: [String], + value: 24 + }, + zIndex: { + type: Number, + optionalTypes: [String], + value: 1001 + }, + //点击遮罩 是否可关闭 + maskClosable: { + type: Boolean, + value: true + }, + maskBackground: { + type: String, + value: 'rgba(0,0,0,.6)' + } + }, + methods: { + handleClose(e) { + if (!this.data.maskClosable) return; + this.triggerEvent('close', {}); + }, + stop(e) {} + } +}) \ No newline at end of file diff --git a/components/fui-bottom-popup/fui-bottom-popup.json b/components/fui-bottom-popup/fui-bottom-popup.json new file mode 100755 index 0000000..32640e0 --- /dev/null +++ b/components/fui-bottom-popup/fui-bottom-popup.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/components/fui-bottom-popup/fui-bottom-popup.wxml b/components/fui-bottom-popup/fui-bottom-popup.wxml new file mode 100755 index 0000000..81c5a4a --- /dev/null +++ b/components/fui-bottom-popup/fui-bottom-popup.wxml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/components/fui-bottom-popup/fui-bottom-popup.wxss b/components/fui-bottom-popup/fui-bottom-popup.wxss new file mode 100755 index 0000000..e352b42 --- /dev/null +++ b/components/fui-bottom-popup/fui-bottom-popup.wxss @@ -0,0 +1,36 @@ +.fui-bottom__popup-wrap { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 1001; + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: center; + transition: all ease-in-out .2s; + visibility: hidden; + opacity: 0; + overflow: hidden; +} + +.fui-bottom__popwrap-show { + opacity: 1; + visibility: visible; +} + +.fui-bottom__popup { + width: 100%; + transform: translate3d(0, 100%, 0); + transition: all 0.3s ease-in-out; + min-height: 20rpx; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + flex: 1; + overflow: hidden; +} + +.fui-bottom__popup-show { + transform: translate3d(0, 0, 0); +} \ No newline at end of file diff --git a/components/page-loading/page-loading.js b/components/page-loading/page-loading.js new file mode 100644 index 0000000..def21bf --- /dev/null +++ b/components/page-loading/page-loading.js @@ -0,0 +1,24 @@ +// components/page-loading/page-loading.js +Component({ + + /** + * 组件的属性列表 + */ + properties: { + + }, + + /** + * 组件的初始数据 + */ + data: { + + }, + + /** + * 组件的方法列表 + */ + methods: { + + } +}) \ No newline at end of file diff --git a/components/page-loading/page-loading.json b/components/page-loading/page-loading.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/components/page-loading/page-loading.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/page-loading/page-loading.wxml b/components/page-loading/page-loading.wxml new file mode 100644 index 0000000..61243fc --- /dev/null +++ b/components/page-loading/page-loading.wxml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/components/page-loading/page-loading.wxss b/components/page-loading/page-loading.wxss new file mode 100644 index 0000000..5a43fc7 --- /dev/null +++ b/components/page-loading/page-loading.wxss @@ -0,0 +1,53 @@ +/* components/page-loading/page-loading.wxss */ +.page-body { + width: 100vw; + height: 100vh; + background-color: rgba(255, 255, 255, 1); + height: 100%; + width: 100%; + position: fixed; + z-index: 1; + margin-top: 0px; + top: 0px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.loading { + position: relative; + width: 50px; +} + +.loading:before, +.loading:after { + position: absolute; + width: 20px; + height: 20px; + content: ""; + animation: jumping 0.5s infinite alternate; + background: rgba(0, 0, 0, 0); +} + +.loading:before { + left: 0; +} + +.loading:after { + right: 0; + animation-delay: 0.15s; +} + +@keyframes jumping { + 0% { + transform: scale(1) translateY(0px) rotateX(0deg); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(1.2) translateY(-25px) rotateX(45deg); + background: #256742; + box-shadow: 0 25px 40px #256742; + } +} \ No newline at end of file diff --git a/pages/domain/domain.wxml b/pages/domain/domain.wxml index 9287c00..a5e0d01 100644 --- a/pages/domain/domain.wxml +++ b/pages/domain/domain.wxml @@ -1,5 +1,5 @@ - + diff --git a/pages/domain/domain.wxss b/pages/domain/domain.wxss index 48b46a4..14866b1 100644 --- a/pages/domain/domain.wxss +++ b/pages/domain/domain.wxss @@ -16,13 +16,12 @@ } .desc-content { - width: 683rpx; - height: 99rpx; font-family: Source Han Sans CN; font-weight: 400; - font-size: 20rpx; + font-size: 22rpx; color: #6F6F6F; margin-top: 33rpx; + text-indent: 2em; } .desc-tag-box { diff --git a/pages/index/index.js b/pages/index/index.js index ea0c7f6..60e706c 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -1,19 +1,24 @@ -var app = getApp(); -var defaultAvatarUrl = ''; import AuthService from '../../utils/api/testapi'; +const app = getApp(); +var defaultAvatarUrl = ''; +const date = new Date() Page({ data: { progress1: '60%', progress2: '80%', - progress3: '30%', + progress3: '90%', progress4: '40%', curTab: 1, isExpand: false, //简介展开和收起 collapseText: '收起', expandText: '查看更多>>', - years, + isAreaExpand: false, //投资环境展开和收起 + isShowAreaExpand: false, //是否显示投资环境展开收起 + years: [], year: date.getFullYear(), + tempYear: '', + yearValue: [0], showActionsheet: false, motto: 'Hello World', userInfo: { @@ -31,40 +36,94 @@ Page({ hasMore: true, isFixed: false, opacity: 1, - tabs: [{ - title: '测试1' - }, { - title: '测试2' - }, { - title: '测试3' - }, { - title: '测试4' - }, { - title: '测试5' - }, { - title: '测试6' - }, { - title: '测试7' - }, { - title: '测试8' - }, { - title: '测试9' - }, { - title: '测试10' - }], - activeTab: 0 + activeTab: 0, + indicatorWidth: 0, + scrollWidth: 0, //滚动视图的总宽度 + screenWidth: 0, //屏幕宽度 + sliderWidth: 20, //指示器宽度 + lastScrollLeft: 0, + defaultSliderWidth: 20, //默认指示器宽度 + isShowDot: false, //是否显示指示器 + testList: [], + showPageLoading: true }, onLoad(e) { - for (var i = 0; i < 80; i++) { - this.data.list.push(`ssss==${i}`) - } this.setData({ list: this.data.list, overtop: false }) - + var temp = [] + for (let i = 2010; i < 2041; i++) { + temp.push(i) + } + this.setData({ + years: temp + }) + var _self = this + _self.setData({ + 'yearValue[0]': _self.data.years.indexOf(_self.data.year) + }) + //屏幕宽度 + var window = wx.getWindowInfo() + var screenWidth = window.screenWidth + this.setData({ + screenWidth: screenWidth - 34 + }) + setTimeout(() => { + var temp = [] + for (let i = 0; i < 10; i++) { + temp.push(i) + } + _self.setData({ + testList: temp + }) + _self.countWidth() + }, 2000); + setTimeout(() => { + _self.setData({ + showPageLoading: false + }) + }, 5000); + }, + //计算滚动框的宽度 + countWidth() { + var _self = this + //计算滑动区域宽度 + setTimeout(_ => { + const query = wx.createSelectorQuery().in(this) + query.selectAll('.superiority-item').boundingClientRect() + query.exec(res => { + let width = 0 + let count = 0 + if (res) { + res[0].forEach(x => { + width += x.width + }) + count = res[0].length - 1 + } + //总长度 //剩余宽度 + var totalWidth = count * 10 + width + _self.setData({ + isShowDot: (totalWidth / 343) > 1 + }) + var surplus = totalWidth - 343 + _self.setData({ + scrollWidth: surplus + }) + }) + }, 5) + }, + //监听scroll-view滚动 + scrollPlates(e) { + var _self = this + var offsetLeft = e.detail.scrollLeft + var scale = _self.data.scrollWidth / 20 //缩放比例 + var offsetX = offsetLeft / scale + _self.setData({ + sliderWidth: _self.data.defaultSliderWidth + offsetX, + lastScrollLeft: offsetLeft + }) }, - expandClick() { this.setData({ isExpand: !this.data.isExpand @@ -75,6 +134,39 @@ Page({ curTab: e.currentTarget.dataset.index }) }, + showYears() { + console.log('点击') + this.setData({ + showActionsheet: !this.data.showActionsheet + }) + }, + closeSheet() { + this.setData({ + showActionsheet: !this.data.showActionsheet + }) + }, + //选中日期 + confirmSheet() { + this.setData({ + showActionsheet: !this.data.showActionsheet, + year: this.data.tempYear + }) + }, + //投资环境查看更多 + areaShowAll() { + var _self = this + _self.setData({ + isAreaExpand: !_self.data.isAreaExpand + }) + console.log(_self.data.isAreaExpand) + }, + bindChange(e) { + var _self = this + var index = e.detail.value[0] + _self.setData({ + tempYear: _self.data.years[index] + }) + }, doRefresh() { var _self = this; console.log('刷新中...') diff --git a/pages/index/index.json b/pages/index/index.json index 7a16316..b58254b 100644 --- a/pages/index/index.json +++ b/pages/index/index.json @@ -1,6 +1,7 @@ { "usingComponents": { "mp-loading": "weui-miniprogram/loading/loading", - "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet" + "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet", + "bottom-sheet": "/components/fui-bottom-popup/fui-bottom-popup" } } \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 752d7ae..db89600 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,13 +1,13 @@ - + - @@ -94,24 +94,33 @@ - 文字介绍 + + 总占地面积约100亩，总建筑面积约7万平方米。建设内容包括加工车间、展示营销中心、道路建设、地下室、人防、给排水管网、电力通信等，吸引全县小商品、总占地面积约100亩，总建筑面积约7万平方米。建设内容包括加工车间、展示营销中心、道路建设、地下室、人防、给排水管网、电力通信等，吸引全县小商品、小商品、总占地面积约100亩，总建筑面积约7万平方米。建设内容包括加工车间、展示营销中心、道路建设、地下室、人防、给排水管网、电力通信等，吸引全县小商品、 + - - + + {{isAreaExpand?'收取':'查看全部'}} + - + 投资优势 - - - - - - + + + + + + 电子信息 + + + + + + @@ -161,10 +170,17 @@ - - + + + 取消 + 选择日期 + 确定 + + - {{item}}年 + {{item}}年 - \ No newline at end of file + + + \ No newline at end of file diff --git a/pages/index/index.wxss b/pages/index/index.wxss index b2ef54b..96990c9 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -8,7 +8,7 @@ position: relative; overflow: hidden; line-height: 1.5; - font-size: 20rpx; + font-size: 24rpx; text-align: justify; max-height: calc(3em * 1.5); } @@ -31,7 +31,7 @@ .text-expansion__button { position: relative; - font-size: 16rpx; + font-size: 20rpx; color: #256742; float: right; font-weight: 400; @@ -84,6 +84,42 @@ } +.superiority-item { + display: flex; + flex-direction: column; + position: relative; +} + +.superiority-item:nth-of-type(n+2) { + margin-left: 20rpx; +} + +.superiory-txt { + position: absolute; + bottom: 0; + background: rgba(0, 0, 0, 0.49); + width: 100%; + text-align: center; + font-size: 20rpx; + color: white; + border-bottom-left-radius: 10rpx; + border-bottom-right-radius: 10rpx; +} + +.superiory-icon { + width: 257rpx; + height: 167rpx; + border-radius: 10rpx; +} + + +.scrollX-nowrap { + width: 100vw; + flex-wrap: nowrap; + white-space: nowrap; +} + + .invest-title { display: flex; @@ -148,17 +184,71 @@ flex-direction: column; justify-content: center; margin-top: 20rpx; + font-weight: 400; + font-size: 24rpx; + color: #303030; + line-height: 40rpx; + text-indent: 2em; +} + +.slider-bar-box { + width: 40px; + height: 5px; + background-color: #CDCDCD; + border-radius: 2.5px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + align-self: center; +} + +.slider-bar { + height: 5px; + background-color: #256742; + border-radius: 2.5px; } .desc-title { margin-top: 39rpx; - font-family: JiangChengYueHuTi600W; font-weight: 400; font-size: 40rpx; color: #303030; line-height: 27rpx; } +.sheet-title-box { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 20rpx 40rpx; +} + +.picker { + width: 100vw; + height: 300rpx; +} + +.picker-item { + line-height: 30px; + text-align: center; +} + +.title { + font-size: 35rpx; +} + +.cancel { + font-size: 30rpx; + color: crimson; +} + +.confirm { + font-size: 30rpx; + color: #256742; +} + /* .superiority-title-box { display: flex; flex-direction: row; @@ -181,13 +271,13 @@ .superiority-content { display: flex; flex-direction: row; - margin-top: 20rpx; + flex-wrap: nowrap; + min-height: 120rpx; } -.superiority-content image { +.superiority-content .item { width: 150rpx; height: 150rpx; - margin: 15rpx; } .chance-title-box { @@ -302,21 +392,26 @@ .desc-tag-box { display: flex; flex-direction: row; - justify-content: space-between; + justify-content: flex-start; margin-top: 39rpx; margin-bottom: 30rpx; } + .desc-tag { background: rgba(41, 176, 98, 0.08); border-radius: 13rpx; - padding: 15rpx 10rpx; + padding: 15rpx 20rpx; display: flex; flex-direction: row; justify-content: center; align-items: center; } +.desc-tag:nth-of-type(n+2) { + margin-left: 20rpx; +} + .desc-tag image { width: 28rpx; height: 28rpx; @@ -360,7 +455,7 @@ justify-content: center; align-items: center; color: black; - font-size: 20rpx; + font-size: 24rpx; width: 130rpx; text-align: center; height: 45rpx; @@ -398,11 +493,11 @@ .statistics-content-item-title { flex: 0.3; text-align: end; - font-size: 20rpx; + font-size: 24rpx; } .statistics-content-item-content { - flex: 0.7; + flex: 0.8; margin-left: 20rpx; font-size: 20rpx; height: 30rpx; @@ -414,6 +509,7 @@ align-items: center; border-radius: 6rpx; padding: 0rpx 5rpx; + position: relative; } .statistics-content-item-content .progress { @@ -422,13 +518,39 @@ } .statistics-content-item-content .text { - width: 54rpx; font-family: FZZhengHeiS-EB-GB; font-size: 24rpx; color: #CB3232; font-style: italic; text-align: end; margin-right: 5rpx; + font-weight: bold; + position: absolute; + right: 0px; +} + +.right-more-bg { + background: #E7E7E7; + font-weight: 500; + align-self: flex-end; + display: flex; + flex-direction: row; + justify-content: center; + padding: 5rpx 10rpx; + border-radius: 15rpx; + align-items: center; +} + +.right-more-bg .icon { + width: 20rpx; + height: 20rpx; + margin-left: 5rpx; +} + +.right-more-bg .txt { + font-size: 16rpx; + color: #256742; + text-align: center; } .statistics-box { diff --git a/pages/invest/invest.wxml b/pages/invest/invest.wxml index 226c271..7de80fc 100644 --- a/pages/invest/invest.wxml +++ b/pages/invest/invest.wxml @@ -1,5 +1,5 @@ - + 全部 diff --git a/pages/policy/policy.wxml b/pages/policy/policy.wxml index 1d3ed35..1f8d17a 100644 --- a/pages/policy/policy.wxml +++ b/pages/policy/policy.wxml @@ -1,5 +1,5 @@ - +