静态页面

package-lock.json

         }
       }
     },
-    "@tarojs/plugin-babel": {
-      "version": "2.2.10",
-      "resolved": "https://registry.npm.taobao.org/@tarojs/plugin-babel/download/@tarojs/plugin-babel-2.2.10.tgz",
-      "integrity": "sha1-WHyHLnofwHwujQoWVSO9M9j6eFY=",
-      "dev": true,
-      "requires": {
-        "babel-core": "^6.26.0"
-      }
-    },
     "@tarojs/react": {
       "version": "3.0.14",
       "resolved": "https://registry.npm.taobao.org/@tarojs/react/download/@tarojs/react-3.0.14.tgz",
         "loader-utils": "^1.2.3"
       }
     },
-    "@tarojs/taro-weapp": {
-      "version": "2.2.10",
-      "resolved": "https://registry.npm.taobao.org/@tarojs/taro-weapp/download/@tarojs/taro-weapp-2.2.10.tgz",
-      "integrity": "sha1-TuprrF5tPgrt859ICkCuz12zUwQ=",
-      "requires": {
-        "@tarojs/taro": "^2.2.10",
-        "@tarojs/utils": "^2.2.10",
-        "lodash": "^4.17.10",
-        "prop-types": "^15.6.1"
-      },
-      "dependencies": {
-        "@tarojs/taro": {
-          "version": "2.2.15",
-          "resolved": "https://registry.npm.taobao.org/@tarojs/taro/download/@tarojs/taro-2.2.15.tgz?cache=0&sync_timestamp=1605862215749&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40tarojs%2Ftaro%2Fdownload%2F%40tarojs%2Ftaro-2.2.15.tgz",
-          "integrity": "sha1-VqA99rDz87Ug8R95Soxpz+v3oGA=",
-          "requires": {
-            "@tarojs/utils": "2.2.15"
-          },
-          "dependencies": {
-            "@tarojs/utils": {
-              "version": "2.2.15",
-              "resolved": "https://registry.npm.taobao.org/@tarojs/utils/download/@tarojs/utils-2.2.15.tgz",
-              "integrity": "sha1-neClMK94rMx2qRoq0J1nqbs1ZeU="
-            }
-          }
-        }
-      }
-    },
-    "@tarojs/utils": {
-      "version": "2.2.10",
-      "resolved": "https://registry.npm.taobao.org/@tarojs/utils/download/@tarojs/utils-2.2.10.tgz",
-      "integrity": "sha1-3fgqd67M/DFcL7eLPRwHmGCu01A="
-    },
     "@tarojs/webpack-runner": {
       "version": "3.0.14",
       "resolved": "https://registry.npm.taobao.org/@tarojs/webpack-runner/download/@tarojs/webpack-runner-3.0.14.tgz?cache=0&sync_timestamp=1605865144538&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40tarojs%2Fwebpack-runner%2Fdownload%2F%40tarojs%2Fwebpack-runner-3.0.14.tgz",
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
-    "babel-code-frame": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
-      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
-      "dev": true,
-      "requires": {
-        "chalk": "^1.1.3",
-        "esutils": "^2.0.2",
-        "js-tokens": "^3.0.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz?cache=0&sync_timestamp=1601839122515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz?cache=0&sync_timestamp=1591687028262&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "js-tokens": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",
-          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz?cache=0&sync_timestamp=1606205060845&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true
-        }
-      }
-    },
-    "babel-core": {
-      "version": "6.26.3",
-      "resolved": "https://registry.npm.taobao.org/babel-core/download/babel-core-6.26.3.tgz",
-      "integrity": "sha1-suLwnjQtDwyI4vAuBneUEl51wgc=",
-      "dev": true,
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "babel-generator": "^6.26.0",
-        "babel-helpers": "^6.24.1",
-        "babel-messages": "^6.23.0",
-        "babel-register": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "babel-template": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "convert-source-map": "^1.5.1",
-        "debug": "^2.6.9",
-        "json5": "^0.5.1",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.4",
-        "path-is-absolute": "^1.0.1",
-        "private": "^0.1.8",
-        "slash": "^1.0.0",
-        "source-map": "^0.5.7"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1605791507452&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
-          "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "json5": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npm.taobao.org/json5/download/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
-      }
-    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1593529664540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
         "resolve": "^1.12.0"
       }
     },
-    "babel-generator": {
-      "version": "6.26.1",
-      "resolved": "https://registry.npm.taobao.org/babel-generator/download/babel-generator-6.26.1.tgz",
-      "integrity": "sha1-GERAjTuPDTWkBOp6wYDwh6YBvZA=",
-      "dev": true,
-      "requires": {
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "detect-indent": "^4.0.0",
-        "jsesc": "^1.3.0",
-        "lodash": "^4.17.4",
-        "source-map": "^0.5.7",
-        "trim-right": "^1.0.1"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npm.taobao.org/jsesc/download/jsesc-1.3.0.tgz?cache=0&sync_timestamp=1603891198638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsesc%2Fdownload%2Fjsesc-1.3.0.tgz",
-          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
-          "dev": true
-        }
-      }
-    },
     "babel-helper-builder-react-jsx": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-helper-builder-react-jsx/download/babel-helper-builder-react-jsx-6.26.0.tgz",
         "esutils": "^2.0.2"
       }
     },
-    "babel-helpers": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npm.taobao.org/babel-helpers/download/babel-helpers-6.24.1.tgz",
-      "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.6.tgz?cache=0&sync_timestamp=1605043140696&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.0.6.tgz",
         "pify": "^4.0.1"
       }
     },
-    "babel-messages": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npm.taobao.org/babel-messages/download/babel-messages-6.23.0.tgz",
-      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-dynamic-import-node/download/babel-plugin-dynamic-import-node-2.3.3.tgz",
         }
       }
     },
-    "babel-register": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-register/download/babel-register-6.26.0.tgz",
-      "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
-      "dev": true,
-      "requires": {
-        "babel-core": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "home-or-tmp": "^2.0.0",
-        "lodash": "^4.17.4",
-        "mkdirp": "^0.5.1",
-        "source-map-support": "^0.4.15"
-      },
-      "dependencies": {
-        "source-map-support": {
-          "version": "0.4.18",
-          "resolved": "https://registry.npm.taobao.org/source-map-support/download/source-map-support-0.4.18.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map-support%2Fdownload%2Fsource-map-support-0.4.18.tgz",
-          "integrity": "sha1-Aoam3ovkJkEzhZTpfM6nXwosWF8=",
-          "dev": true,
-          "requires": {
-            "source-map": "^0.5.6"
-          }
-        }
-      }
-    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
         }
       }
     },
-    "babel-template": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-template/download/babel-template-6.26.0.tgz",
-      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "lodash": "^4.17.4"
-      }
-    },
-    "babel-traverse": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-traverse/download/babel-traverse-6.26.0.tgz",
-      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
-      "dev": true,
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "debug": "^2.6.8",
-        "globals": "^9.18.0",
-        "invariant": "^2.2.2",
-        "lodash": "^4.17.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1605791507452&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
-          "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "globals": {
-          "version": "9.18.0",
-          "resolved": "https://registry.npm.taobao.org/globals/download/globals-9.18.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglobals%2Fdownload%2Fglobals-9.18.0.tgz",
-          "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
-      }
-    },
     "babel-types": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-types/download/babel-types-6.26.0.tgz",
         }
       }
     },
-    "babylon": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npm.taobao.org/babylon/download/babylon-6.18.0.tgz?cache=0&sync_timestamp=1593529713109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabylon%2Fdownload%2Fbabylon-6.18.0.tgz",
-      "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM=",
-      "dev": true
-    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/bail/download/bail-1.0.5.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
-    "detect-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npm.taobao.org/detect-indent/download/detect-indent-4.0.0.tgz",
-      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
-      "dev": true,
-      "requires": {
-        "repeating": "^2.0.0"
-      }
-    },
     "detect-node": {
       "version": "2.0.4",
       "resolved": "https://registry.npm.taobao.org/detect-node/download/detect-node-2.0.4.tgz",
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz?cache=0&sync_timestamp=1591599659970&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
-      "dev": true
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-glob": {
       "version": "2.2.7",
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
-    "home-or-tmp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npm.taobao.org/home-or-tmp/download/home-or-tmp-2.0.0.tgz",
-      "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.1"
-      }
-    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npm.taobao.org/hosted-git-info/download/hosted-git-info-2.8.8.tgz",
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597336125847&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz",
-      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI="
+      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=",
+      "dev": true
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
         "renderkid": "^2.0.4"
       }
     },
-    "private": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
-      "integrity": "sha1-I4Hts2ifelPWUxkAYPz4ItLzaP8=",
-      "dev": true
-    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
       "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
       "dev": true
     },
-    "trim-right": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/trim-right/download/trim-right-1.0.1.tgz",
-      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
-      "dev": true
-    },
     "trim-trailing-lines": {
       "version": "1.1.4",
       "resolved": "https://registry.npm.taobao.org/trim-trailing-lines/download/trim-trailing-lines-1.1.4.tgz",

src/app.config.js

 export default {
   pages: [
-    'pages/WuYe/BaoXiuFeiYong/index', // 物业-报修费用
+    'pages/WoDe/GeRenXinXi/index', // 我的-个人信息
     'pages/ShouYe/index', // tab-首页
     'pages/ShouYe/HuoDong/index', // 首页-活动
     'pages/ShouYe/ZiXun/index', // 首页-资讯
     'pages/WuYe/BaoXiuQuYu/index', // 物业-报修区域
     'pages/WuYe/TianJiaBaoXiu/index', // 物业-添加报修
     'pages/WuYe/BaoXiuDetail/index', // 物业-报修详情
+    'pages/WuYe/BaoXiuFeiYong/index', // 物业-报修费用
+    'pages/WuYe/JiaoFeiDetail/index', // 物业-缴费详情
 
     'pages/HuoDong/index', // tab-活动
+    'pages/HuoDong/HuoDongDetail/index', // 活动-活动详情
+    'pages/HuoDong/ZiXunDetail/index', // 活动-资讯详情
 
     'pages/FuLi/index', // tab-福利
 

src/components/ActivityListItem/index.jsx

-import React, { Component } from 'react'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class Index extends Component {
+export default function ActivityListItem (props) {
 
-  state = {
-    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
-  }
+  const { Data } = props
 
-  componentWillMount () { }
+  const [TestImg, setTestImg] = useState('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg')
 
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { TestImg } = this.state
-    return (
-      <view className='ActivityListItem'>
-        <view className='Img'>
-          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
-        </view>
-        <view className='Info flex-h'>
-          <view className='flex-item'>
-            <text>核销拼团</text>
-            <text>参与截止时间：2019年10月20日 10:00:00</text>
-          </view>
-          <text className='active'>未开始</text>
+  return (
+    <view className='ActivityListItem' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/HuoDongDetail/index?id=` }) }}>
+      <view className='Img'>
+        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+      </view>
+      <view className='Info flex-h'>
+        <view className='flex-item'>
+          <text>核销拼团</text>
+          <text>参与截止时间：2019年10月20日 10:00:00</text>
         </view>
-      </view >
-    )
-  }
+        <text className='active'>未开始</text>
+      </view>
+    </view >
+  )
 }

src/components/NavHeader/index.jsx

-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class NavHeader extends Component {
+export default function NavHeader (props) {
 
-  state = {
-    MarginTop: 0,
-    LineHeight: 0
+  const [MarginTop, setMarginTop] = useState(0)
+  const [LineHeight, setLineHeight] = useState(0)
+  const { BgColor = '#fff', IsFixed = false, Title = '香颂蔚澜' } = props
+  
+  if (MarginTop === 0) {
+    setMarginTop(Taro.getMenuButtonBoundingClientRect().top)
   }
-
-  componentWillMount () {
-    console.log(this.props.IsFixed)
-    this.setState({
-      MarginTop: Taro.getMenuButtonBoundingClientRect().top,
-      LineHeight: Taro.getMenuButtonBoundingClientRect().height
-    })
+  if (LineHeight === 0) {
+    setLineHeight(Taro.getMenuButtonBoundingClientRect().height)
   }
 
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { MarginTop, LineHeight } = this.state
-    const { BgColor = '#fff', IsFixed = false, Title = '香颂蔚澜' } = this.props
-    return (
-      <view className='NavHeader' style={{background: BgColor, position: IsFixed ? 'absolute' : 'relative'}}>
-        <text style={{marginTop: `${MarginTop}px`, lineHeight: `${LineHeight}px`}}>{Title}</text>
-      </view>
-    )
-  }
+  return (
+    <view className='NavHeader' style={{ background: BgColor, position: IsFixed ? 'absolute' : 'relative' }}>
+      <text style={{ marginTop: `${MarginTop}px`, lineHeight: `${LineHeight}px` }}>{Title}</text>
+    </view>
+  )
 }

src/components/NewsListItem/index.jsx

-import React, { Component } from 'react'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class NewsListItem extends Component {
-
-  state = {
-    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { TestImg } = this.state
-    const { ShowTips } = this.props
-    return (
-      <view className='NewsListItem flex-h'>
-        <view className='Img'>
-          <image mode='aspectFill' src={TestImg}></image>
-          {
-            ShowTips &&
-            <text>置顶</text>
-          }
-        </view>
-        <view className='Info flex-item'>
-          <text>破晓·内容生态下半场的版权之道—2019企业版权</text>
-          <text>于2019-12-12 14:20:30发布</text>
-        </view>
-      </view >
-    )
-  }
+export default function NewsListItem (props) {
+
+  const [TestImg, setTestImg] = useState('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg')
+  const { ShowTips } = props
+
+  return (
+    <view className='NewsListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/ZiXunDetail/index?id=` }) }}>
+      <view className='Img'>
+        <image mode='aspectFill' src={TestImg}></image>
+        {
+          ShowTips &&
+          <text>置顶</text>
+        }
+      </view>
+      <view className='Info flex-item'>
+        <text>破晓·内容生态下半场的版权之道—2019企业版权</text>
+        <text>于2019-12-12 14:20:30发布</text>
+      </view>
+    </view >
+  )
 }

src/components/SlidePopup/index.jsx

+import React, { useState } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function SlidePopup (props) {
+
+  const { Close = () => { }, Show = false } = props
+
+  return (
+    <view className={Show ? 'SlidePopup active' : 'SlidePopup'}>
+      <view>
+        <view className='Title'>
+          <text className='iconfont iconguanbi1 Close' onClick={Close}></text>
+        </view>
+        <view className='PopupContent'>
+          {
+            props.children
+          }
+        </view>
+      </view>
+    </view>
+  )
+}

src/components/SlidePopup/index.less

+.SlidePopup {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: -100%;
+  top: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+
+  &.active {
+    left: 0;
+
+    >view {
+      bottom: 0;
+    }
+  }
+
+  >view {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: -100vh;
+    background: #fff;
+    border-radius: 40px 40px 0 0;
+    padding: 40px 0;
+    transition: all .3s linear;
+    -webkit-transition: all .3s linear;
+
+    >.Title {
+      padding: 0 30px;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      white-space: nowrap;
+      text-align: right;
+      z-index: 2;
+
+      >text {
+        display: inline-block;
+        vertical-align: middle;
+
+        &.Close {
+          font-size: 36px;
+          color: #666;
+        }
+      }
+    }
+
+    >.PopupContent {
+      width: 100%;
+      position: relative;
+      overflow: visible;
+      z-index: 1;
+    }
+  }
+}

src/components/UploadImg/index.jsx

+import React, { useState } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function UploadImg (props) {
+
+  return (
+    <view className='UploadImg'>
+      <view className='Add'>
+        <view className='centerLabel'>
+          <text className='iconfont iconxiangji'></text>
+          <text>添加照片</text>
+        </view>
+      </view>
+      <view className='ImgItem'>
+        <text className='iconfont iconguanbi'></text>
+        <image mode='aspectFit' src={null}></image>
+      </view>
+    </view>
+  )
+}

src/components/UploadImg/index.less

+.UploadImg {
+  position: relative;
+  overflow: hidden;
+  font-size: 0;
+
+  >view {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    overflow: hidden;
+    width: 150px;
+    height: 150px;
+    margin-right: 20px;
+    margin-top: 20px;
+
+    &.Add {
+
+      >view {
+        width: 100%;
+
+        >text {
+          display: block;
+          width: 100%;
+          text-align: center;
+          font-size: 28px;
+          color: #999;
+          line-height: 40px;
+
+          &:first-child {
+            font-size: 80px;
+            line-height: 100px;
+          }
+        }
+      }
+    }
+
+    &.ImgItem {
+      background: #f8f8f8;
+
+      >image {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+      }
+
+      >text {
+        display: inline-block;
+        z-index: 2;
+        font-size: 40px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: red;
+      }
+    }
+  }
+}

src/components/WuYeJiaoFei/index.jsx

-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import WuYeJiaoFeiItem from '../WuYeJiaoFeiItem/index'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeJiaoFei extends Component {
+export default function WuYeJiaoFei () {
 
-  state = {
-    PageList: ['', '', '', '', '', '', ''],
-    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
-  }
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', ''])
+  const [TestImg, setTestImg] = useState('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg')
 
-  componentWillMount () { }
+  return (
+    <view className='WuYeJiaoFei'>
 
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { TestImg, PageList } = this.state
-    return (
-      <view className='WuYeJiaoFei'>
-
-        {/* 大图 */}
-        <view className='BigImg'>
-          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
-        </view>
-
-        {/* 缴费列表 */}
-        <view className='List'>
-          {
-            PageList.map((item, index) => (
-              <view key={`WuYeJiaoFeiItem-${index}`}>
-                <WuYeJiaoFeiItem Data={item}></WuYeJiaoFeiItem>
-              </view>
-            ))
-          }
-        </view>
+      {/* 大图 */}
+      <view className='BigImg'>
+        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+      </view>
 
+      {/* 缴费列表 */}
+      <view className='List'>
+        {
+          PageList.map((item, index) => (
+            <view key={`WuYeJiaoFeiItem-${index}`}>
+              <WuYeJiaoFeiItem Data={item}></WuYeJiaoFeiItem>
+            </view>
+          ))
+        }
       </view>
-    )
-  }
+
+    </view>
+  )
 }

src/components/WuYeJiaoFeiItem/index.jsx

-import React, { Component } from 'react'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeJiaoFeiItem extends Component {
+export default function WuYeJiaoFeiItem (props) {
 
-  state = {
+  const { Data } = props
 
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { } = this.state
-    return (
-      <view className='WuYeJiaoFeiItem'>
-        <view className='Title flex-h'>
-          <text className='flex-item'>物业费</text>
-          <text>2020/06/08  0:00截止</text>
+  return (
+    <view className='WuYeJiaoFeiItem' onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/JiaoFeiDetail/index?id=${Data.id}` }) }}>
+      <view className='Title flex-h'>
+        <text className='flex-item'>物业费</text>
+        <text>2020/06/08  0:00截止</text>
+      </view>
+      <view className='JiaoFeiContent'>
+        <view className='Name flex-h'>
+          <text className='flex-item'>2020年5月物业管理费</text>
+          <text>剩余缴费时间</text>
+          <text className='Num'>3</text>
+          <text>天</text>
         </view>
-        <view className='JiaoFeiContent'>
-          <view className='Name flex-h'>
-            <text className='flex-item'>2020年5月物业管理费</text>
-            <text>剩余缴费时间</text>
-            <text className='Num'>3</text>
-            <text>天</text>
-          </view>
-          <text>垃圾费：300元</text>
-          <text>电费：300.83元</text>
-          <text>物业费：300元</text>
-          <view className='Price flex-h'>
-            <text className='Num'>340</text>
-            <text>元</text>
-            <view className='flex-item'></view>
-            <text className='Btn'>立即缴费</text>
-          </view>
+        <text>垃圾费：300元</text>
+        <text>电费：300.83元</text>
+        <text>物业费：300元</text>
+        <view className='Price flex-h'>
+          <text className='Num'>340</text>
+          <text>元</text>
+          <view className='flex-item'></view>
+          <text className='Btn'>立即缴费</text>
         </view>
       </view>
-    )
-  }
+    </view>
+  )
 }

src/components/demo/index.jsx

-import React, { Component } from 'react'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class Demo extends Component {
+export default function demo (props) {
 
-  componentWillMount () { }
+  return (
+    <view className='demo'>
 
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <view className='Demo'>
-
-      </view>
-    )
-  }
+    </view>
+  )
 }

src/pages/HuoDong/HuoDongDetail/index.config.js

+export default {
+  navigationBarTitleText: '活动详情'
+}

src/pages/HuoDong/HuoDongDetail/index.jsx

+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import { RichText } from '@tarojs/components'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function HuoDongDetail (props) {
+
+  const CurrnetHuoDongId = Current.router.params.id
+
+  return (
+    <view className='HuoDongDetail'>
+      <view className='BannerLayer'></view>
+      <view className='Banner'>
+        <image mode='aspectFill' src={null} className='centerLabel'></image>
+      </view>
+      <view className='Info'>
+        <view className='MainInfo'>
+          <text className='Name'>业主拔河比赛正式开始了~</text>
+          <text className='Tips'>17人已报名</text>
+          <view className='flex-h'>
+            <text>活动时间：</text>
+            <view className='flex-item'>2019-08 08 12:00:00 <text>限100人</text></view>
+          </view>
+          <view className='flex-h'>
+            <text>活动地址：</text>
+            <view className='flex-item'>江苏省南京市秦淮区</view>
+          </view>
+          <view className='flex-h'>
+            <text>报名截止：</text>
+            <view className='flex-item'>2020-09-09 08:00:00</view>
+          </view>
+        </view>
+
+        <view className='Desc'>
+          <text>活动介绍</text>
+          <RichText nodes={null}></RichText>
+        </view>
+
+        <text className='BottomBtn'>立即参加</text>
+
+      </view>
+    </view>
+  )
+}

src/pages/HuoDong/HuoDongDetail/index.less

+.HuoDongDetail {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  >.BannerLayer {
+    width: 100%;
+    padding-bottom: 75.2%;
+    background: #ccc;
+    position: relative;
+    z-index: 2;
+  }
+
+  >.Banner {
+    width: 100%;
+    padding-bottom: 75.2%;
+    background: #ccc;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.Info {
+    padding: 30px;
+    position: relative;
+    overflow: hidden;
+    z-index: 3;
+    border-radius: 40px 40px 0 0;
+    margin-top: -30px;
+    background: #fff;
+
+    >.MainInfo {
+      position: relative;
+      overflow: visible;
+      padding-bottom: 40px;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+
+      >.Name {
+        font-size: 30px;
+        font-weight: bold;
+        color: #333;
+        line-height: 40px;
+        width: 100%;
+        display: block;
+        margin-top: 10px;
+        position: relative;
+        z-index: 1;
+      }
+
+      >.Tips {
+        display: inline-block;
+        font-size: 28px;
+        color: #F35844;
+        position: absolute;
+        z-index: 2;
+        right: -30px;
+        top: -40px;
+        background: rgba(243, 88, 68, 0.2);
+        padding: 0 20px;
+        line-height: 58px;
+        border-radius: 0 0 0 40px;
+      }
+
+      >.flex-h {
+        align-items: center;
+        margin-top: 20px;
+
+        >text {
+          font-size: 28px;
+          color: #333;
+          line-height: 40px;
+          margin-right: 10px;
+        }
+
+        >view {
+          font-size: 28px;
+          color: #333;
+          line-height: 40px;
+
+          >text {
+            font-size: 28px;
+            color: #F35844;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+
+    >.Desc {
+      position: relative;
+      overflow: hidden;
+      margin-top: 140px;
+
+      >text {
+        font-size: 34px;
+        width: 100%;
+        display: block;
+        text-align: center;
+        color: #333;
+        line-height: 40px;
+      }
+    }
+
+    >.BottomBtn {
+      width: 100%;
+      display: block;
+      text-align: center;
+      color: #fff;
+      line-height: 98px;
+      border-radius: 98px;
+      background: #F35844;
+      margin-top: 60px;
+    }
+  }
+}

src/pages/HuoDong/ZiXunDetail/index.config.js

+export default {
+  navigationBarTitleText: '资讯详情'
+}

src/pages/HuoDong/ZiXunDetail/index.jsx

+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function ZiXunDetail (props) {
+
+  const CurrnetZiXunId = Current.router.params.id
+
+  return (
+    <view className='ZiXunDetail'>
+      
+    </view>
+  )
+}

src/pages/HuoDong/ZiXunDetail/index.less

+.ZiXunDetail {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+}

src/pages/HuoDong/index.jsx

-import React, { Component } from 'react'
-// import { View, Text } from '@tarojs/components'
-import TabPageCutNav from '../../components/TabPageCutNav/index'
-import NavHeader from '../../components/NavHeader/index'
-import ActivityListItem from '../../components/ActivityListItem/index'
-import NewsListItem from '../../components/NewsListItem/index'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import TabPageCutNav from '@/components/TabPageCutNav/index'
+import NavHeader from '@/components/NavHeader/index'
+import ActivityListItem from '@/components/ActivityListItem/index'
+import NewsListItem from '@/components/NewsListItem/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class HuoDong extends Component {
+export default function HuoDong (props) {
 
-  state = {
-    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg',
-    NavList: [
-      { name: '活动', id: 1 },
-      { name: '资讯', id: 2 }
-    ],
-    CurrentNavId: 1,
-    IsPull: false,
-    ActivityList: ['', '', '', '', '', '', '', ''],
-    NewsList: ['', '', '', '', '', '', '', '']
-    // DataLock: false,
-    // PageList: [],
-    // PageData: {
-    //   pageNum: 1,
-    //   pageSize: 10
-    // },
-    // HasNextPage: true
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
+  const [CurrentNavId, setCurrentNavId] = useState(1)
+  const [TestImg, setTestImg] = useState('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg')
+  const [NavList, setNavList] = useState([{ name: '活动', id: 1 }, { name: '资讯', id: 2 }])
+  const [IsPull, setIsPull] = useState(false)
+  const [ActivityList, setActivityList] = useState(['', '', '', '', '', '', '', ''])
+  const [NewsList, setNewsList] = useState(['', '', '', '', '', '', '', ''])
 
-  NavChange (e) {
+  const NavChange = (e) => {
     return () => {
-      this.setState({
-        CurrentNavId: e.id
-      })
+      setCurrentNavId(e.id)
     }
   }
 
-  OnRefresh () {
-    this.setState({
-      IsPull: true
-    }, () => {
-      window.setTimeout(() => {
-        this.setState({
-          IsPull: false
-        })
-      }, 1000)
-    })
+  const OnRefresh = () => {
+    setIsPull(true)
+    window.setTimeout(() => {
+      setIsPull(false)
+    }, 1000)
   }
 
-  render () {
-    const { CurrentNavId, NavList, IsPull, ActivityList, NewsList, TestImg } = this.state
-    return (
-      <view className='HuoDong flex-v'>
-        <NavHeader BgColor='none' Title='活动' IsFixed={true}></NavHeader>
-        <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={this.NavChange.bind(this)}></TabPageCutNav>
-        <view className='flex-item'>
-          <view>
-            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
+  return (
+    <view className='HuoDong flex-v'>
+      <NavHeader BgColor='none' Title='活动' IsFixed={true}></NavHeader>
+      <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={NavChange}></TabPageCutNav>
+      <view className='flex-item'>
+        <view>
+          <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
 
-              {/* 活动 */}
-              {
-                CurrentNavId - 0 === 1 &&
-                <view className='Content Activity'>
+            {/* 活动 */}
+            {
+              CurrentNavId - 0 === 1 &&
+              <view className='Content Activity'>
+                {
+                  ActivityList.map((item, index) => (
+                    <view className='ListItem' key={`ActivityItem-${index}`}>
+                      <ActivityListItem Data={item}></ActivityListItem>
+                    </view>
+                  ))
+                }
+              </view>
+            }
+
+            {/* 资讯 */}
+            {
+              CurrentNavId - 0 === 2 &&
+              <view className='Content News'>
+                <view className='BigImg'>
+                  <image mode='aspectFill' src={TestImg} class='centerLabel'></image>
+                </view>
+                <view className='List'>
                   {
-                    ActivityList.map((item, index) => (
-                      <view className='ListItem' key={`ActivityItem-${index}`}>
-                        <ActivityListItem Data={item}></ActivityListItem>
+                    NewsList.map((item, index) => (
+                      <view className='ListItem' key={`NewsItem-${index}`}>
+                        <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
                       </view>
                     ))
                   }
                 </view>
-              }
+              </view>
+            }
 
-              {/* 资讯 */}
-              {
-                CurrentNavId - 0 === 2 &&
-                <view className='Content News'>
-                  <view className='BigImg'>
-                    <image mode='aspectFill' src={TestImg} class='centerLabel'></image>
-                  </view>
-                  <view className='List'>
-                    {
-                      NewsList.map((item, index) => (
-                        <view className='ListItem' key={`NewsItem-${index}`}>
-                          <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
-                        </view>
-                      ))
-                    }
-                  </view>
-                </view>
-              }
-
-            </scroll-view>
-          </view>
+          </scroll-view>
         </view>
       </view>
-    )
-  }
+    </view>
+  )
 }

src/pages/WoDe/GeRenXinXi/index.config.js

+export default {
+  navigationBarTitleText: '个人信息'
+}

src/pages/WoDe/GeRenXinXi/index.jsx

+import React, { useState } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function GeRenXinXi (props) {
+
+  return (
+    <view className='GeRenXinXi'>
+      
+    </view>
+  )
+}

src/pages/WuYe/FuWuDetail/index.css → src/pages/WoDe/GeRenXinXi/index.less

-.WuYeFuWuDetail {
+.GeRenXinXi {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   position: relative;
   background: #f8f8f8;
-}
+}

src/pages/WoDe/index.css

-.WoDe {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: #fff;
-}
-.WoDe .WoDeContent {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-.WoDe .WoDeContent > .TopBg {
-  width: 400vw;
-  height: 400vw;
-  position: relative;
-  overflow: hidden;
-  border-radius: 100%;
-  margin-left: -150vw;
-  margin-top: -340vw;
-}
-.WoDe .WoDeContent > .TopBg > .ColorBg {
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: 60vw;
-  z-index: 1;
-  background-image: linear-gradient(#F35844, #ff8d61);
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  -webkit-transform: translateX(-50%);
-  bottom: 60px;
-  z-index: 2;
-  width: 100vw;
-  align-items: center;
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo > .Icon {
-  width: 196px;
-  height: 196px;
-  border-radius: 100%;
-  position: relative;
-  overflow: hidden;
-  background-color: #fff;
-  margin-right: 40px;
-  margin-left: 30px;
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo > .Icon > image {
-  width: 100%;
-  height: 100%;
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item {
-  position: relative;
-  overflow: hidden;
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item > text {
-  display: block;
-  white-space: nowrap;
-  font-size: 30px;
-  color: #333;
-  line-height: 40px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item > text:first-child {
-  font-size: 34px;
-  margin-bottom: 30px;
-}
-.WoDe .WoDeContent > .TopBg > .UserInfo > text {
-  font-size: 30px;
-  line-height: 58px;
-  border: 2px solid #000;
-  border-radius: 8px;
-  padding: 0 20px;
-  margin-right: 30px;
-}
-.WoDe .WoDeContent > .UserTab {
-  padding: 30px 0;
-  margin-top: 20px;
-  position: relative;
-  overflow: hidden;
-}
-.WoDe .WoDeContent > .UserTab > .Line {
-  width: 100%;
-  height: 20px;
-  background-color: #f8f8f8;
-}
-.WoDe .WoDeContent > .UserTab > .flex-h {
-  padding: 0 30px;
-  align-items: center;
-}
-.WoDe .WoDeContent > .UserTab > .flex-h > text {
-  font-size: 44px;
-  color: #F35844;
-  margin-right: 20px;
-}
-.WoDe .WoDeContent > .UserTab > .flex-h > view {
-  align-items: center;
-  border-bottom: 2px solid #f8f8f8;
-}
-.WoDe .WoDeContent > .UserTab > .flex-h > view > text {
-  font-size: 32px;
-  color: #999;
-  line-height: 100px;
-  margin-left: 20px;
-  overflow: hidden;
-}
-.WoDe .WoDeContent > .UserTab > .flex-h > view > text:first-child {
-  margin-left: 0;
-  color: #333;
-}

src/pages/WoDe/index.jsx

 import React, { useState } from 'react'
-import NavHeader from '../../components/NavHeader/index'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import NavHeader from '@/components/NavHeader/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function WoDe (props) {

src/pages/WuYe/BaoXiuDetail/index.css

-.BaoXiuDetail {
-  width: 100%;
-  min-height: 100%;
-  position: relative;
-  background: #f8f8f8;
-}
-.BaoXiuDetail > .TopLine {
-  width: 100%;
-  height: 20px;
-  background-color: #f8f8f8;
-  background: #f8f8f8;
-}
-.BaoXiuDetail > .TopInfo {
-  padding: 0 30px;
-  background: #fff;
-  position: relative;
-  overflow: hidden;
-}
-.BaoXiuDetail > .TopInfo > .flex-h {
-  align-items: center;
-  border-top: 2px solid rgba(0, 0, 0, 0.08);
-}
-.BaoXiuDetail > .TopInfo > .flex-h:first-child {
-  border-top: none;
-}
-.BaoXiuDetail > .TopInfo > .flex-h:first-child > text:first-child {
-  color: #333;
-  font-weight: bold;
-  font-size: 32px;
-}
-.BaoXiuDetail > .TopInfo > .flex-h > text {
-  font-size: 28px;
-  color: #999;
-  line-height: 98px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.BaoXiuDetail > .TopInfo > .flex-h > text:first-child {
-  margin-right: 20px;
-}
-.BaoXiuDetail > .Detail {
-  padding: 0 30px;
-  background: #fff;
-  position: relative;
-  overflow: hidden;
-  margin-top: 20px;
-  padding-bottom: 40px;
-}
-.BaoXiuDetail > .Detail > text {
-  display: block;
-  width: 100%;
-  font-size: 30px;
-  color: #333;
-  font-weight: bold;
-  line-height: 98px;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
-}
-.BaoXiuDetail > .Detail > .flex-h {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .Line {
-  width: 50px;
-  position: relative;
-  overflow: visible;
-  border-left: 2px dashed #F35844;
-}
-.BaoXiuDetail > .Detail > .flex-h > .Line > view {
-  width: 14px;
-  height: 14px;
-  background: #F35844;
-  border-radius: 100%;
-  position: absolute;
-  left: -8px;
-  top: 30px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item {
-  position: relative;
-  overflow: visible;
-  background: rgba(243, 88, 68, 0.08);
-  padding: 20px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item::after {
-  content: '';
-  width: 0;
-  height: 0;
-  display: block;
-  position: absolute;
-  left: -40px;
-  top: 16px;
-  border-color: transparent rgba(243, 88, 68, 0.08) transparent transparent;
-  border-style: solid dashed solid solid;
-  border-width: 20px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList {
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 40px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title {
-  align-items: center;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text {
-  font-size: 24px;
-  color: #999;
-  line-height: 40px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text.Red {
-  color: #F35844;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text.Green {
-  color: #14DC05;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text.Blue {
-  color: #77A5F0;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Text {
-  font-size: 24px;
-  color: #333;
-  line-height: 40px;
-  margin-top: 10px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Text > text.Blue {
-  color: #77A5F0;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Text > text.Red {
-  color: #F35844;
-  font-size: 34px;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .ImgList {
-  font-size: 0;
-}
-.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .ImgList > view {
-  display: inline-block;
-  vertical-align: middle;
-  width: 136px;
-  height: 136px;
-  position: relative;
-  overflow: hidden;
-  margin-top: 12px;
-  margin-right: 12px;
-  background: #f8f8f8;
-}
-.BaoXiuDetail > .Detail > .BottomBtn {
-  position: relative;
-  overflow: hidden;
-  margin-top: 30px;
-}
-.BaoXiuDetail > .Detail > .BottomBtn.active > text {
-  color: #fff;
-  background: #F35844;
-}
-.BaoXiuDetail > .Detail > .BottomBtn > text {
-  width: 100%;
-  display: block;
-  text-align: center;
-  font-size: 34px;
-  line-height: 98px;
-  border-radius: 98px;
-  color: #F35844;
-  background: #fff;
-  border: 2px solid #F35844;
-  box-sizing: border-box;
-}

src/pages/WuYe/BaoXiuFeiYong/index.jsx

 import React, { useState } from 'react'
 import Taro, { Current } from '@tarojs/taro'
+import SlidePopup from '@/components/SlidePopup/index'
+import UploadImg from '@/components/UploadImg/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function BaoXiuFeiYong () {
 
+  const [ShowPopup, setShowPopup] = useState(false)
+  const [PopupType, setPopupType] = useState(0)
   const CurrnetBaoXiuId = Current.router.params.id
 
+  const SlidePopupClose = () => {
+    setShowPopup(false)
+  }
+
   return (
     <view className='BaoXiuFeiYong'>
+
+      {/* 费用信息 */}
       <view className='Info'>
         <view>
           <text>1栋3单元2楼-3楼走廊声控灯出现故障</text>
         </view>
         <view className='InfoBottom'></view>
       </view>
+
       <view className='BottomBtn'>
-        <text className='active'>我要缴费</text>
-        <text>线下缴费</text>
+        <text className='active' onClick={() => { setPopupType(1); setShowPopup(true) }}>我要缴费</text>
+        <text onClick={() => { setPopupType(2); setShowPopup(true) }}>线下缴费</text>
       </view>
+
+      {/* 弹窗 */}
+      <SlidePopup Close={SlidePopupClose} Show={ShowPopup}>
+
+        {/* 线上缴费 */}
+        {
+          PopupType - 0 === 1 &&
+          <view className='JiaoFeiPopup XianShang'>
+            <view className='Price'>立即支付<text>150</text>元</view>
+            <view className='flex-h'>
+              <text className='iconfont iconweixinzhifu'></text>
+              <text className='flex-item'>微信支付</text>
+              <text className='iconfont icongou'></text>
+            </view>
+            <view className='Btn'>
+              <text>去付款</text>
+            </view>
+          </view>
+        }
+
+        {/* 线下缴费 */}
+        {
+          PopupType - 0 === 2 &&
+          <view className='JiaoFeiPopup XianXia'>
+            <text>上传线下支付凭证</text>
+            <view className='UploadContainer'>
+              <UploadImg></UploadImg>
+            </view>
+          </view>
+        }
+
+      </SlidePopup>
+
     </view>
   )
 }

src/pages/WuYe/BaoXiuFeiYong/index.less

     >.InfoBottom {
       height: 264px;
       position: relative;
+      background: none;
     }
 
     >view {
       }
     }
   }
+
+  .JiaoFeiPopup {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+
+    &.XianShang {
+      >.Price {
+        font-size: 34px;
+        color: #333;
+        line-height: 60px;
+        text-align: center;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+        padding-bottom: 60px;
+        // margin-top: 20px;
+
+        >text {
+          font-size: 48px;
+          font-weight: bold;
+          color: #F35844;
+          line-height: 60px;
+        }
+      }
+
+      >.flex-h {
+        align-items: center;
+        padding: 20px 0;
+
+        >text {
+          font-size: 30px;
+          color: #333;
+          line-height: 60px;
+          margin-left: 20px;
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &.iconfont {
+            font-size: 54px;
+            color: #00c005;
+
+            &.icongou {
+              color: #F35844;
+              font-size: 42px;
+            }
+          }
+        }
+      }
+
+      >.Btn {
+        position: relative;
+        overflow: hidden;
+        margin-top: 40px;
+
+        >text {
+          font-size: 34px;
+          color: #fff;
+          line-height: 98px;
+          display: block;
+          width: 100%;
+          text-align: center;
+          background: #F35844;
+          border-radius: 98px;
+        }
+      }
+    }
+
+    &.XianXia {
+      >text {
+        font-size: 34px;
+        color: #333;
+        line-height: 60px;
+        display: block;
+        width: 100%;
+        text-align: center;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+        padding-bottom: 60px;
+      }
+    }
+  }
 }

src/pages/WuYe/JiaoFeiDetail/index.config.js

+export default {
+  navigationBarTitleText: '费用详情'
+}

src/pages/WuYe/JiaoFeiDetail/index.jsx

+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import SlidePopup from '@/components/SlidePopup/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function JiaoFeiDetail () {
+
+  const [ShowPopup, setShowPopup] = useState(false)
+
+  const [PopupType, setPopupType] = useState(0)
+
+  const CurrnetJiaoFeiId = Current.router.params.id
+
+  return (
+    <view className='JiaoFeiDetail'>
+      <view className='DetailContainer'>
+        <view className='Info'>
+          <view className='flex-h'>
+            <text className='flex-item'>物业费</text>
+            <text>2020/06/08  0:00截止</text>
+          </view>
+          <view className='Detail'>
+            <view className='Title flex-h'>
+              <text className='flex-item'>缴费金额</text>
+              <text className='Num'>300</text>
+              <text>元</text>
+            </view>
+            <text>2020年5月物业管理费</text>
+            <view className='Line flex-h'>
+              <text>垃圾费：</text>
+              <text className='flex-item'>100元</text>
+            </view>
+            <view className='Line flex-h'>
+              <text>绿地维护费：</text>
+              <text className='flex-item'>100元</text>
+            </view>
+            <view className='Line flex-h'>
+              <text>公摊电费：</text>
+              <text className='flex-item'>100元</text>
+            </view>
+          </view>
+        </view>
+        <view className='InfoBottom'></view>
+      </view>
+      <view className='BottomContainer'>
+        <text onClick={() => { setPopupType(2); setShowPopup(true) }}>对费用有疑问？</text>
+        <text onClick={() => { setPopupType(1); setShowPopup(true) }}>立即缴费</text>
+      </view>
+
+      {/* 弹窗 */}
+      <SlidePopup Close={() => { setShowPopup(false); setPopupType(0) }} Show={ShowPopup}>
+        {
+          PopupType - 0 === 1 &&
+          <view className='JiaoFeiPopup'>
+            <view className='Price'>立即支付<text>150</text>元</view>
+            <view className='flex-h'>
+              <text className='iconfont iconweixinzhifu'></text>
+              <text className='flex-item'>微信支付</text>
+              <text className='iconfont icongou'></text>
+            </view>
+            <view className='Btn'>
+              <text>去付款</text>
+            </view>
+          </view>
+        }
+        {
+          PopupType - 0 === 2 &&
+          <view className='LianXiPopup'>
+            <text>联系物业</text>
+            <text>对此费用有疑问</text>
+            <view className='flex-h'>
+              <text className='flex-item'>物业电话</text>
+              <text>17826982167</text>
+              <text className='iconfont icondianhua'></text>
+            </view>
+            <view className='flex-h'>
+              <text className='flex-item'>门卫电话</text>
+              <text>17826982167</text>
+              <text className='iconfont icondianhua'></text>
+            </view>
+            <view className='flex-h'>
+              <text className='flex-item'>物业领导</text>
+              <text>17826982167</text>
+              <text className='iconfont icondianhua'></text>
+            </view>
+          </view>
+        }
+      </SlidePopup>
+    </view>
+  )
+}

src/pages/WuYe/JiaoFeiDetail/index.less

+.JiaoFeiDetail {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+
+  >.DetailContainer {
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+
+    >.Info {
+      padding: 30px;
+      position: relative;
+      overflow: hidden;
+      background: #fff;
+
+      >.flex-h {
+        align-items: center;
+
+        >text {
+          font-size: 24px;
+          color: #F35844;
+          line-height: 40px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          &:first-child {
+            font-size: 30px;
+            font-weight: bold;
+            color: #333;
+            margin-right: 20px;
+          }
+        }
+      }
+
+      >.Detail {
+        position: relative;
+        overflow: hidden;
+        padding: 20px;
+        background: rgba(243, 88, 68, 0.08);
+        margin-top: 50px;
+
+        >.Title {
+          align-items: center;
+          padding-bottom: 10px;
+          border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+
+          >text {
+            font-size: 24px;
+            color: #999;
+            line-height: 80px;
+
+            &.flex-item {
+              font-size: 30px;
+              font-weight: bold;
+              color: #333;
+            }
+
+            &.Num {
+              font-size: 48px;
+              font-weight: bold;
+              color: #F35844;
+            }
+          }
+        }
+
+        >text {
+          display: block;
+          width: 100%;
+          font-size: 24px;
+          color: #333;
+          line-height: 40px;
+          padding: 30px 0;
+        }
+
+        >.Line {
+          align-items: center;
+
+          >text {
+            font-size: 24px;
+            color: #333;
+            line-height: 40px;
+
+            &:first-child {
+              min-width: 160px;
+              margin-right: 20px;
+            }
+          }
+        }
+      }
+    }
+
+    >.InfoBottom {
+      width: 100%;
+      height: 228px;
+    }
+  }
+
+  >.BottomContainer {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    margin-top: -228px;
+    text-align: center;
+    font-size: 0;
+
+    >text {
+      &:first-child {
+        font-size: 24px;
+        color: #77A5F0;
+        display: inline-block;
+        line-height: 40px;
+      }
+
+      &:nth-child(2) {
+        font-size: 34px;
+        color: #fff;
+        background: #F35844;
+        line-height: 98px;
+        border-radius: 98px;
+        width: 100%;
+        display: block;
+        text-align: center;
+        margin-top: 50px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+
+  .JiaoFeiPopup {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+
+    >.Price {
+      font-size: 34px;
+      color: #333;
+      line-height: 60px;
+      text-align: center;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+      padding-bottom: 60px;
+      // margin-top: 20px;
+
+      >text {
+        font-size: 48px;
+        font-weight: bold;
+        color: #F35844;
+        line-height: 60px;
+      }
+    }
+
+    >.flex-h {
+      align-items: center;
+      padding: 20px 0;
+
+      >text {
+        font-size: 30px;
+        color: #333;
+        line-height: 60px;
+        margin-left: 20px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.iconfont {
+          font-size: 54px;
+          color: #00c005;
+
+          &.icongou {
+            color: #F35844;
+            font-size: 42px;
+          }
+        }
+      }
+    }
+
+    >.Btn {
+      position: relative;
+      overflow: hidden;
+      margin-top: 40px;
+
+      >text {
+        font-size: 34px;
+        color: #fff;
+        line-height: 98px;
+        display: block;
+        width: 100%;
+        text-align: center;
+        background: #F35844;
+        border-radius: 98px;
+      }
+    }
+  }
+
+  .LianXiPopup {
+    padding: 0 30px;
+    position: relative;
+    overflow: visible;
+    padding-bottom: 40px;
+
+    >text {
+      width: 100%;
+      display: block;
+      font-size: 24px;
+      color: #999;
+      line-height: 40px;
+      text-align: center;
+      margin-bottom: 30px;
+
+      &:first-child {
+        font-size: 34px;
+        color: #333;
+        margin-bottom: 10px;
+        margin-top: -30px;
+      }
+    }
+
+    >.flex-h {
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+
+      >text {
+        font-size: 30px;
+        line-height: 100px;
+        color: #77A5F0;
+        &:first-child {
+          color: #333;
+        }
+        &:last-child {
+          font-size: 40px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}