Merge branch 'master' of http://git.ycjcjy.com/xiangsong/miniapp into master

package.json

@@ -56,6 +56,8 @@
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "less": "^3.12.2",
+    "less-loader": "^7.1.0",
     "stylelint": "9.3.0"
   }
 }

project.config.json

@@ -1,13 +1,37 @@
 {
-  "miniprogramRoot": "./dist",
-  "projectname": "miniapp",
-  "description": "",
-  "appid": "touristappid",
-  "setting": {
-    "urlCheck": true,
-    "es6": false,
-    "postcss": false,
-    "minified": false
-  },
-  "compileType": "miniprogram"
-}
+	"miniprogramRoot": "dist/",
+	"projectname": "miniapp",
+	"description": "",
+	"appid": "wx1d9348230d6a0da6",
+	"setting": {
+		"urlCheck": true,
+		"es6": false,
+		"enhance": false,
+		"postcss": false,
+		"preloadBackgroundData": false,
+		"minified": false,
+		"newFeature": false,
+		"coverView": true,
+		"nodeModules": false,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"uglifyFileName": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useIsolateContext": true,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {}
+}

src/app.config.js

@@ -1,9 +1,57 @@
 export default {
   pages: [
-    'pages/index/index',
-    'pages/foo/index',
-    'pages/bar/index'
+    'pages/WuYe/TianJiaBaoXiu/index', // 物业-添加报修
+    'pages/ShouYe/index', // tab-首页
+    'pages/ShouYe/HuoDong/index', // 首页-活动
+    'pages/ShouYe/ZiXun/index', // 首页-资讯
+
+    'pages/WuYe/index', // tab-物业
+    'pages/WuYe/FuWuDetail/index', // 物业-服务详情
+    'pages/WuYe/GongGaoDetail/index', // 物业-公告详情
+    'pages/WuYe/BaoXiuQuYu/index', // 物业-报修区域
+
+    'pages/HuoDong/index', // tab-活动
+
+    'pages/FuLi/index', // tab-福利
+
+    'pages/WoDe/index', // tab-我的
   ],
+  tabBar: {
+    color: '#666666',
+    selectedColor: '#971C21',
+    list: [
+      {
+        iconPath: 'assets/img/tabicon1.png',
+        selectedIconPath: 'assets/img/tabicon1-.png',
+        pagePath: 'pages/ShouYe/index',
+        text: '首页'
+      },
+      {
+        iconPath: 'assets/img/tabicon2.png',
+        selectedIconPath: 'assets/img/tabicon2-.png',
+        pagePath: 'pages/WuYe/index',
+        text: '物业'
+      },
+      {
+        iconPath: 'assets/img/tabicon3.png',
+        selectedIconPath: 'assets/img/tabicon3-.png',
+        pagePath: 'pages/HuoDong/index',
+        text: '活动'
+      },
+      {
+        iconPath: 'assets/img/tabicon4.png',
+        selectedIconPath: 'assets/img/tabicon4-.png',
+        pagePath: 'pages/FuLi/index',
+        text: '福利'
+      },
+      {
+        iconPath: 'assets/img/tabicon5.png',
+        selectedIconPath: 'assets/img/tabicon5-.png',
+        pagePath: 'pages/WoDe/index',
+        text: '我的'
+      }
+    ]
+  },
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/app.css

@@ -0,0 +1,36 @@
+page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.centerLabel {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+.flex-v {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+}
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.text-overflow-line2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

src/app.less

@@ -0,0 +1,36 @@
+page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.centerLabel {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+.flex-v {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+}
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.text-overflow-line2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

src/assets/css/reset.less

@@ -0,0 +1,36 @@
+page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.centerLabel {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+.flex-v {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+}
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.text-overflow-line2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

src/assets/img/bars.svg

@@ -0,0 +1,52 @@
+<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#ccc">
+    <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="30" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="90" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+</svg>

src/components/ActivityListItem/index.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class Index 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
+    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>
+        </view>
+      </view >
+    )
+  }
+}

src/components/ActivityListItem/index.less

@@ -0,0 +1,58 @@
+.ActivityListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  > .Img {
+    width: 100%;
+    padding-bottom: 56.25%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+    > image {
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+  > .Info {
+    padding: 0 20px;
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    > .flex-item {
+      position: relative;
+      overflow: hidden;
+      margin-right: 20px;
+      padding: 24px 0;
+      > text {
+        display: block;
+        font-size: 24px;
+        color: #999;
+        line-height: 40px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:first-child {
+          color: #333;
+          font-size: 32px;
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+      }
+    }
+    > text {
+      font-size: 30px;
+      color: #333;
+      line-height: 60px;
+      padding: 0 30px;
+      border-radius: 60px;
+      background: #ccc;
+      &.active {
+        color: #f35844;
+        background: rgba(243, 88, 68, 0.3);
+      }
+    }
+  }
+}

src/components/NavHeader/index.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import Taro from '@tarojs/taro'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class NavHeader extends Component {
+
+  state = {
+    MarginTop: 0,
+    LineHeight: 0
+  }
+
+  componentWillMount () {
+    console.log(this.props.IsFixed)
+    this.setState({
+      MarginTop: Taro.getMenuButtonBoundingClientRect().top,
+      LineHeight: 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>
+    )
+  }
+}

src/components/NavHeader/index.less

@@ -0,0 +1,13 @@
+.NavHeader {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  > text {
+    display: block;
+    font-size: 32px;
+    color: #fff;
+    text-indent: 30px;
+    padding-bottom: 20px;
+  }
+}

src/components/NewsListItem/index.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+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 >
+    )
+  }
+}

src/components/NewsListItem/index.less

@@ -0,0 +1,53 @@
+.NewsListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 0 12px 12px 0;
+  align-items: center;
+  > .Img {
+    width: 220px;
+    height: 176px;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+    margin-right: 20px;
+    > image {
+      display: block;
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+    }
+    > text {
+      font-size: 24px;
+      color: #971c21;
+      display: inline-block;
+      position: absolute;
+      z-index: 2;
+      left: 0;
+      top: 0;
+      line-height: 40px;
+      width: 80px;
+      text-align: center;
+      background: rgba(255, 255, 255, 0.8);
+    }
+  }
+  > .Info {
+    margin-right: 20px;
+    position: relative;
+    overflow: hidden;
+    > text {
+      display: block;
+      font-size: 24px;
+      color: #666;
+      line-height: 40px;
+      &:first-child {
+        font-size: 28px;
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

src/components/PrizeListItem/index.css

@@ -0,0 +1,53 @@
+.PrizeListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+}
+.PrizeListItem > .Img {
+  width: 100%;
+  padding-bottom: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.PrizeListItem > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.PrizeListItem > .Info {
+  padding: 10px;
+  position: relative;
+  overflow: hidden;
+}
+.PrizeListItem > .Info > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 40px;
+  display: block;
+  font-weight: bold;
+  height: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.PrizeListItem > .Info > .flex-h {
+  align-items: center;
+}
+.PrizeListItem > .Info > .flex-h > text {
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+}
+.PrizeListItem > .Info > .flex-h > text.Count {
+  color: #971C21;
+}
+.PrizeListItem > .Info > .flex-h > text.Num {
+  color: #FF2C28;
+}
+.PrizeListItem > .Info > .flex-h > text:last-child {
+  color: #999;
+}

src/components/PrizeListItem/index.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class PrizeListItem 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
+    return (
+      <view className='PrizeListItem'>
+        <view className='Img'>
+          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        </view>
+        <view className='Info'>
+          <text>沙发垫欧式轻奢</text>
+          <view className='flex-h'>
+            <text className='Count'>70</text>
+            <text className='flex-item'>人已兑换</text>
+            <text className='Num'>30000</text>
+            <text>积分</text>
+          </view>
+        </view>
+      </view >
+    )
+  }
+}

src/components/PrizeListItem/index.less

@@ -0,0 +1,62 @@
+.PrizeListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+
+  >.Img {
+    width: 100%;
+    padding-bottom: 100%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.Info {
+    padding: 10px;
+    position: relative;
+    overflow: hidden;
+
+    >text {
+      font-size: 28px;
+      color: #333;
+      line-height: 40px;
+      display: block;
+      font-weight: bold;
+      height: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+
+    >.flex-h {
+      align-items: center;
+
+      >text {
+        font-size: 24px;
+        color: #333;
+        line-height: 40px;
+
+        &.Count {
+          color: #971C21;
+        }
+
+        &.Num {
+          color: #FF2C28;
+        }
+
+        &:last-child {
+          color: #999;
+        }
+      }
+    }
+  }
+}

src/components/TabPageCutNav/index.css

@@ -0,0 +1,49 @@
+.TabPageCutNav {
+  width: 100%;
+  padding-bottom: 35%;
+  background-image: linear-gradient(#F35844, #ff8d61);
+  position: relative;
+  z-index: 1;
+}
+.TabPageCutNav > view {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+.TabPageCutNav > view > view {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.TabPageCutNav > view > view > view {
+  align-items: center;
+  font-size: 0;
+  white-space: nowrap;
+  text-align: center;
+}
+.TabPageCutNav > view > view > view > text {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 32px;
+  color: #fff;
+  position: relative;
+  padding: 0 30px;
+  padding-bottom: 20px;
+  line-height: 60px;
+}
+.TabPageCutNav > view > view > view > text.active {
+  color: #333;
+  font-weight: bold;
+}
+.TabPageCutNav > view > view > view > text.active::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  background: #000;
+  width: 100%;
+}

src/components/TabPageCutNav/index.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+// import { View, Text } from '@tarojs/components'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class TabPageCutNav extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { List = [], CurrentNavId = null, NavChange = () => { } } = this.props
+    return (
+      <view className='TabPageCutNav'>
+        <view>
+          <view className='flex-h'>
+            {
+              List.map((item, index) => (
+                <view className='flex-item' key={`TabPageNav-${index}`}>
+                  <text class={item.id - 0 === CurrentNavId - 0 ? 'active' : ''} onClick={NavChange(item)}>{item.name}</text>
+                </view>
+              ))
+            }
+          </view>
+        </view>
+      </view >
+    )
+  }
+}

src/components/TabPageCutNav/index.less

@@ -0,0 +1,55 @@
+.TabPageCutNav {
+  width: 100%;
+  padding-bottom: 35%;
+  background-image: linear-gradient(#F35844, rgba(255, 141, 97, 1, 0.5));
+  position: relative;
+  z-index: 1;
+
+  >view {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+
+      >view {
+        align-items: center;
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
+
+        >text {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 32px;
+          color: #fff;
+          position: relative;
+          padding: 0 30px;
+          padding-bottom: 20px;
+          line-height: 60px;
+
+          &.active {
+            color: #333;
+            font-weight: bold;
+
+            &::after {
+              content: "";
+              display: block;
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              height: 2px;
+              background: #000;
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/WuYeBaoXiu/index.css

@@ -0,0 +1,52 @@
+.WuYeBaoXiu {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeBaoXiu > .BigImg {
+  width: 100%;
+  padding-bottom: 50%;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.WuYeBaoXiu > .BigImg > image {
+  width: 100%;
+  height: 100%;
+}
+.WuYeBaoXiu > .WoYaoBaoXiu {
+  padding: 0 30px;
+  margin-top: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeBaoXiu > .WoYaoBaoXiu > view {
+  font-size: 0;
+  white-space: nowrap;
+  background: #fff;
+  border-radius: 98px;
+  text-align: center;
+}
+.WuYeBaoXiu > .WoYaoBaoXiu > view > text {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 32px;
+  color: #971C21;
+  line-height: 98px;
+}
+.WuYeBaoXiu > .WoYaoBaoXiu > view > text.iconfont {
+  margin-right: 10px;
+}
+.WuYeBaoXiu > .List {
+  position: relative;
+  overflow: hidden;
+}
+.WuYeBaoXiu > .List > view {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.WuYeBaoXiu > .List > view:first-child {
+  margin-top: 30px;
+}

src/components/WuYeBaoXiu/index.jsx

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import WuYeBaoXiuItem from '../WuYeBaoXiuItem/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeBaoXiu extends Component {
+
+  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'
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { TestImg, PageList } = this.state
+    return (
+      <view className='WuYeBaoXiu'>
+
+        {/* 大图 */}
+        <view className='BigImg'>
+          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        </view>
+
+        {/* 我要报修 */}
+        <view className='WoYaoBaoXiu'>
+          <view>
+            <text className='iconfont iconjia'></text>
+            <text>我要报修</text>
+          </view>
+        </view>
+
+        {/* 报修列表 */}
+        <view className='List'>
+          {
+            PageList.map((item, index) => (
+              <view key={`WuYeBaoXiuItem-${index}`}>
+                <WuYeBaoXiuItem Data={item}></WuYeBaoXiuItem>
+              </view>
+            ))
+          }
+        </view>
+
+      </view>
+    )
+  }
+}

src/components/WuYeBaoXiu/index.less

@@ -0,0 +1,60 @@
+.WuYeBaoXiu {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  >.BigImg {
+    width: 100%;
+    padding-bottom: 50%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.WoYaoBaoXiu {
+    padding: 0 30px;
+    margin-top: 30px;
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      font-size: 0;
+      white-space: nowrap;
+      background: #fff;
+      border-radius: 98px;
+      text-align: center;
+
+      >text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 32px;
+        color: #971C21;
+        line-height: 98px;
+        &.iconfont {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  >.List {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/components/WuYeBaoXiuItem/index.css

@@ -0,0 +1,110 @@
+.WuYeBaoXiuItem {
+  position: relative;
+  background: #fff;
+  padding: 0 30px;
+}
+.WuYeBaoXiuItem > .Title {
+  align-items: center;
+  padding-top: 10px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+}
+.WuYeBaoXiuItem > .Title > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 88px;
+  margin-left: 10px;
+}
+.WuYeBaoXiuItem > .Title > text:first-child {
+  margin-left: 0;
+  font-size: 34px;
+  color: #F35844;
+}
+.WuYeBaoXiuItem > .Title > text.flex-item {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  white-space: nowrap;
+}
+.WuYeBaoXiuItem > .Name {
+  align-items: center;
+  margin-top: 20px;
+}
+.WuYeBaoXiuItem > .Name > text {
+  font-size: 30px;
+  font-weight: bold;
+  line-height: 60px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.WuYeBaoXiuItem > .Name > text.iconfont {
+  font-size: 40px;
+  color: #F35844;
+  margin-left: 20px;
+  font-weight: normal;
+}
+.WuYeBaoXiuItem > .Detail {
+  position: relative;
+  margin-top: 40px;
+  padding-bottom: 30px;
+}
+.WuYeBaoXiuItem > .Detail > .Line {
+  width: 50px;
+  position: relative;
+  overflow: visible;
+  border-left: 2px dashed #F35844;
+}
+.WuYeBaoXiuItem > .Detail > .Line > view {
+  width: 14px;
+  height: 14px;
+  background: #F35844;
+  border-radius: 100%;
+  position: absolute;
+  left: -8px;
+  top: 30px;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item {
+  position: relative;
+  overflow: visible;
+  background: rgba(243, 88, 68, 0.08);
+  padding: 20px;
+}
+.WuYeBaoXiuItem > .Detail > .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;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item > .flex-h {
+  align-items: center;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item > .flex-h > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item > .flex-h > text:first-child {
+  color: #F35844;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item > .Desc {
+  font-size: 24px;
+  line-height: 40px;
+  color: #333;
+  margin-top: 10px;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item > .Desc > text.Name {
+  color: #F35844;
+  font-size: 24px;
+  line-height: 40px;
+}
+.WuYeBaoXiuItem > .Detail > .flex-item > .Desc > text.Phone {
+  color: #14DC05;
+  font-size: 24px;
+  line-height: 40px;
+}

src/components/WuYeBaoXiuItem/index.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeBaoXiuItem extends Component {
+
+  state = {
+
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { } = this.state
+    return (
+      <view className='WuYeBaoXiuItem'>
+        <view className='Title flex-h'>
+          <text className='iconfont icongonggongquyu'></text>
+          <text className='flex-item'>公共区域问题</text>
+          <text className='Time'>2020/06/08 13:00</text>
+        </view>
+        <view className='Name flex-h'>
+          <text className='flex-item'>1栋3单元2楼-3楼走廊声控灯出现故障</text>
+          <text className='iconfont iconbianji'></text>
+        </view>
+        <view className='Detail flex-h'>
+          <view className='Line'><view></view></view>
+          <view className='flex-item'>
+            <view className='flex-h'>
+              <text className='flex-item'>正在处理</text>
+              <text className='Time'>2020/06/08 12:58</text>
+            </view>
+            <view className='Desc'>您的报修已经分配给物业处理人员<text className='Name'>郭培军</text>处理，联系方式<text className='Phone'>18266666666</text></view>
+          </view>
+        </view>
+      </view>
+    )
+  }
+}

src/components/WuYeBaoXiuItem/index.less

@@ -0,0 +1,129 @@
+.WuYeBaoXiuItem {
+  position: relative;
+  background: #fff;
+  padding: 0 30px;
+
+  >.Title {
+    align-items: center;
+    padding-top: 10px;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+
+    >text {
+      font-size: 24px;
+      color: #999;
+      line-height: 88px;
+      margin-left: 10px;
+
+      &:first-child {
+        margin-left: 0;
+        font-size: 34px;
+        color: #F35844;
+      }
+
+      &.flex-item {
+        font-size: 24px;
+        font-weight: bold;
+        color: #333;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  >.Name {
+    align-items: center;
+    margin-top: 20px;
+
+    >text {
+      font-size: 30px;
+      font-weight: bold;
+      line-height: 60px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &.iconfont {
+        font-size: 40px;
+        color: #F35844;
+        margin-left: 20px;
+        font-weight: normal;
+      }
+    }
+  }
+
+  >.Detail {
+    position: relative;
+    margin-top: 40px;
+    padding-bottom: 30px;
+
+    >.Line {
+      width: 50px;
+      position: relative;
+      overflow: visible;
+      border-left: 2px dashed #F35844;
+
+      >view {
+        width: 14px;
+        height: 14px;
+        background: #F35844;
+        border-radius: 100%;
+        position: absolute;
+        left: -8px;
+        top: 30px;
+      }
+    }
+
+    >.flex-item {
+      position: relative;
+      overflow: visible;
+      background: rgba(243, 88, 68, 0.08);
+      padding: 20px;
+
+      &::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;
+      }
+
+      >.flex-h {
+        align-items: center;
+
+        >text {
+          font-size: 24px;
+          color: #999;
+          line-height: 40px;
+
+          &:first-child {
+            color: #F35844;
+          }
+        }
+      }
+
+      >.Desc {
+        font-size: 24px;
+        line-height: 40px;
+        color: #333;
+        margin-top: 10px;
+
+        >text {
+          &.Name {
+            color: #F35844;
+            font-size: 24px;
+            line-height: 40px;
+          }
+          &.Phone {
+            color: #14DC05;
+            font-size: 24px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+  }
+}

src/components/WuYeFuWu/index.css

@@ -0,0 +1,89 @@
+.WuYeFuWu {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeFuWu > .BigImg {
+  width: 100%;
+  padding-bottom: 50%;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.WuYeFuWu > .BigImg > image {
+  width: 100%;
+  height: 100%;
+}
+.WuYeFuWu > .BanShiZhiNan {
+  padding: 40px 30px;
+  background: #fff;
+  margin-top: 30px;
+  overflow: hidden;
+}
+.WuYeFuWu > .BanShiZhiNan > text {
+  font-size: 30px;
+  color: #333;
+  font-weight: bold;
+  line-height: 40px;
+  display: block;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h {
+  position: relative;
+  margin-top: 60px;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h > .Line {
+  width: 50px;
+  position: relative;
+  overflow: visible;
+  border-left: 2px dashed #586FF8;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h > .Line > view {
+  width: 14px;
+  height: 14px;
+  background: #586FF8;
+  border-radius: 100%;
+  position: absolute;
+  left: -8px;
+  top: 30px;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item {
+  position: relative;
+  overflow: visible;
+  background: rgba(88, 111, 248, 0.08);
+  padding: 20px;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item::after {
+  content: '';
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  left: -40px;
+  top: 16px;
+  border-color: transparent rgba(88, 111, 248, 0.08) transparent transparent;
+  border-style: solid dashed solid solid;
+  border-width: 20px;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item > text {
+  display: block;
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+  margin-top: 10px;
+}
+.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item > text:first-child {
+  margin-top: 0;
+}
+.WuYeFuWu > .List {
+  position: relative;
+  overflow: hidden;
+}
+.WuYeFuWu > .List > view {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.WuYeFuWu > .List > view:first-child {
+  margin-top: 30px;
+}

src/components/WuYeFuWu/index.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import WuYeFuWuItem from '../WuYeFuWuItem/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeFuWu extends Component {
+
+  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'
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { TestImg, PageList } = this.state
+    return (
+      <view className='WuYeFuWu'>
+
+        {/* 大图 */}
+        <view className='BigImg'>
+          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        </view>
+
+        {/* 物业办事指南 */}
+        <view className='BanShiZhiNan'>
+          <text>物业办事指南</text>
+          <view className='flex-h'>
+            <view className='Line'><view></view></view>
+            <view className='flex-item'>
+              <text>1、业主收楼手续办理</text>
+              <text>2、物业转名手续办理</text>
+              <text>3、业主卡、住户卡办理</text>
+            </view>
+          </view>
+        </view>
+
+        {/* 服务列表 */}
+        <view className='List'>
+          {
+            PageList.map((item, index) => (
+              <view key={`WuYeFuWuItem-${index}`}>
+                <WuYeFuWuItem Data={item}></WuYeFuWuItem>
+              </view>
+            ))
+          }
+        </view>
+
+      </view>
+    )
+  }
+}

src/components/WuYeFuWu/index.less

@@ -0,0 +1,103 @@
+.WuYeFuWu {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  >.BigImg {
+    width: 100%;
+    padding-bottom: 50%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.BanShiZhiNan {
+    padding: 40px 30px;
+    background: #fff;
+    margin-top: 30px;
+    overflow: hidden;
+
+    >text {
+      font-size: 30px;
+      color: #333;
+      font-weight: bold;
+      line-height: 40px;
+      display: block;
+    }
+
+    >.flex-h {
+      position: relative;
+      margin-top: 60px;
+
+      >.Line {
+        width: 50px;
+        position: relative;
+        overflow: visible;
+        border-left: 2px dashed #586FF8;
+
+        >view {
+          width: 14px;
+          height: 14px;
+          background: #586FF8;
+          border-radius: 100%;
+          position: absolute;
+          left: -8px;
+          top: 30px;
+        }
+      }
+
+      >.flex-item {
+        position: relative;
+        overflow: visible;
+        background: rgba(88, 111, 248, 0.08);
+        padding: 20px;
+
+        &::after {
+          content: '';
+          width: 0;
+          height: 0;
+          display: block;
+          position: absolute;
+          left: -40px;
+          top: 16px;
+          border-color: transparent rgba(88, 111, 248, 0.08) transparent transparent;
+          border-style: solid dashed solid solid;
+          border-width: 20px;
+        }
+
+        >text {
+          display: block;
+          font-size: 24px;
+          color: #333;
+          line-height: 40px;
+          margin-top: 10px;
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+
+  }
+
+  >.List {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/components/WuYeFuWuItem/index.css

@@ -0,0 +1,35 @@
+.WuYeFuWuItem {
+  position: relative;
+  background: #fff;
+  padding: 0 30px;
+  align-items: center;
+}
+.WuYeFuWuItem > .Img {
+  width: 220px;
+  height: 176px;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+  margin-right: 20px;
+}
+.WuYeFuWuItem > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.WuYeFuWuItem > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.WuYeFuWuItem > .flex-item > text {
+  display: block;
+  font-size: 24px;
+  line-height: 40px;
+  width: 100%;
+  color: #666;
+}
+.WuYeFuWuItem > .flex-item > text:first-child {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+}

src/components/WuYeFuWuItem/index.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import Taro from '@tarojs/taro'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeFuWuItem 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
+    return (
+      <view className='WuYeFuWuItem flex-h' onClick={() => { Taro.navigateTo({ url: '/pages/WuYe/FuWuDetail/index' }) }}>
+        <view className='Img'>
+          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        </view>
+        <view className='flex-item'>
+          <text>业主收楼办理手续</text>
+          <text>于2019-12-12 14:20:30发布</text>
+        </view>
+      </view>
+    )
+  }
+}

src/components/WuYeFuWuItem/index.less

@@ -0,0 +1,40 @@
+.WuYeFuWuItem {
+  position: relative;
+  background: #fff;
+  padding: 0 30px;
+  align-items: center;
+
+  >.Img {
+    width: 220px;
+    height: 176px;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+    margin-right: 20px;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+
+    >text {
+      display: block;
+      font-size: 24px;
+      line-height: 40px;
+      width: 100%;
+      color: #666;
+
+      &:first-child {
+        font-size: 28px;
+        font-weight: bold;
+        margin-bottom: 20px;
+        color: #333;
+      }
+    }
+  }
+}

src/components/WuYeGongGao/index.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import WuYeGongGaoItem from '../../components/WuYeGongGaoItem/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeGongGao extends Component {
+
+  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'
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { TestImg, PageList } = this.state
+    return (
+      <view className='WuYeGongGao'>
+
+        {/* 大图 */}
+        <view className='BigImg'>
+          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        </view>
+
+        {/* 列表 */}
+        <view className='List'>
+          {
+            PageList.map((item, index) => (
+              <view key={`WuYeGongGaoItem-${index}`}>
+                <WuYeGongGaoItem Data={item}></WuYeGongGaoItem>
+              </view>
+            ))
+          }
+        </view>
+
+      </view>
+    )
+  }
+}

src/components/WuYeGongGao/index.less

@@ -0,0 +1,34 @@
+.WuYeGongGao {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  >.BigImg {
+    width: 100%;
+    padding-bottom: 50%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.List {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/components/WuYeGongGaoItem/index.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import Taro from '@tarojs/taro'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeGongGaoItem extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <view className='WuYeGongGaoItem' onClick={() => { Taro.navigateTo({ url: '/pages/WuYe/GongGaoDetail/index?id=1' }) }}>
+        <view className='Title flex-h'>
+          <text className='flex-item'>处理绿化带种菜公告</text>
+          <text>2020/06/08</text>
+        </view>
+        <view className='GaoItemContent'>
+          <text>为了小区能有一个舒适、温馨、绿化美好的居住环境，请各位业主不要在绿化带内种菜。对于这种种树种花...</text>
+          <view className='flex-h'>
+            <text>孙琪琪</text>
+            <text>物业</text>
+            <view className='flex-item'></view>
+            <text className='iconfont iconguankan'></text>
+            <text>1234人观看</text>
+          </view>
+        </view>
+      </view>
+    )
+  }
+}

src/components/WuYeGongGaoItem/index.less

@@ -0,0 +1,61 @@
+.WuYeGongGaoItem {
+  position: relative;
+  background: #fff;
+  padding: 40px 30px;
+
+  >.Title {
+    align-items: center;
+
+    >text {
+      font-size: 24px;
+      color: #999;
+      line-height: 40px;
+      white-space: nowrap;
+
+      &:first-child {
+        font-size: 30px;
+        color: #333;
+        font-weight: bold;
+        margin-right: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  >.GaoItemContent {
+    position: relative;
+    overflow: hidden;
+    background: rgba(243, 88, 68, 0.08);
+    padding: 20px;
+    margin-top: 40px;
+
+    >text {
+      font-size: 24px;
+      line-height: 38px;
+      color: #333;
+      display: block;
+    }
+
+    >.flex-h {
+      align-items: center;
+      margin-top: 20px;
+
+      >text {
+        font-size: 24px;
+        line-height: 40px;
+        color: #999;
+        margin-left: 10px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.iconfont {
+          color: #F35844;
+          font-size: 40px;
+        }
+      }
+    }
+  }
+}

src/components/WuYeJiaoFei/index.css

@@ -0,0 +1,29 @@
+.WuYeJiaoFei {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeJiaoFei > .BigImg {
+  width: 100%;
+  padding-bottom: 50%;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.WuYeJiaoFei > .BigImg > image {
+  width: 100%;
+  height: 100%;
+}
+.WuYeJiaoFei > .List {
+  position: relative;
+  overflow: hidden;
+}
+.WuYeJiaoFei > .List > view {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.WuYeJiaoFei > .List > view:first-child {
+  margin-top: 30px;
+}

src/components/WuYeJiaoFei/index.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import WuYeJiaoFeiItem from '../WuYeJiaoFeiItem/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeJiaoFei extends Component {
+
+  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'
+  }
+
+  componentWillMount () { }
+
+  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>
+    )
+  }
+}

src/components/WuYeJiaoFei/index.less

@@ -0,0 +1,34 @@
+.WuYeJiaoFei {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  >.BigImg {
+    width: 100%;
+    padding-bottom: 50%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.List {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/components/WuYeJiaoFeiItem/index.css

@@ -0,0 +1,76 @@
+.WuYeJiaoFeiItem {
+  position: relative;
+  background: #fff;
+  padding: 30px;
+}
+.WuYeJiaoFeiItem > .Title {
+  align-items: center;
+}
+.WuYeJiaoFeiItem > .Title > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+}
+.WuYeJiaoFeiItem > .Title > text:first-child {
+  font-size: 30px;
+  color: #333;
+  font-weight: bold;
+  margin-right: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent {
+  padding: 20px;
+  background: rgba(243, 88, 68, 0.08);
+  position: relative;
+  overflow: hidden;
+  margin-top: 40px;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Name {
+  align-items: center;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Name > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Name > text:first-child {
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 20px;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Name > text.Num {
+  color: #F35844;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > text {
+  display: block;
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+  margin-top: 6px;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Price {
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+  padding: 20px 0;
+  align-items: center;
+  margin-top: 20px;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Price > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 60px;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Price > text.Num {
+  font-size: 48px;
+  font-weight: bold;
+  color: #F35844;
+}
+.WuYeJiaoFeiItem > .JiaoFeiContent > .Price > text.Btn {
+  padding: 0 30px;
+  background: #F35844;
+  border-radius: 60px;
+  color: #fff;
+}

src/components/WuYeJiaoFeiItem/index.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeJiaoFeiItem extends Component {
+
+  state = {
+
+  }
+
+  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>
+        </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>
+        </view>
+      </view>
+    )
+  }
+}

src/components/WuYeJiaoFeiItem/index.less

@@ -0,0 +1,89 @@
+.WuYeJiaoFeiItem {
+  position: relative;
+  background: #fff;
+  padding: 30px;
+
+  >.Title {
+    align-items: center;
+
+    >text {
+      font-size: 24px;
+      color: #999;
+      line-height: 40px;
+
+      &:first-child {
+        font-size: 30px;
+        color: #333;
+        font-weight: bold;
+        margin-right: 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  >.JiaoFeiContent {
+    padding: 20px;
+    background: rgba(243, 88, 68, 0.08);
+    position: relative;
+    overflow: hidden;
+    margin-top: 40px;
+
+    >.Name {
+      align-items: center;
+
+      >text {
+        font-size: 24px;
+        color: #999;
+        line-height: 40px;
+
+        &:first-child {
+          color: #333;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-right: 20px;
+        }
+
+        &.Num {
+          color: #F35844;
+        }
+      }
+    }
+
+    >text {
+      display: block;
+      font-size: 24px;
+      color: #333;
+      line-height: 40px;
+      margin-top: 6px;
+    }
+
+    >.Price {
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+      padding: 20px 0;
+      align-items: center;
+      margin-top: 20px;
+
+      >text {
+        font-size: 24px;
+        color: #999;
+        line-height: 60px;
+
+        &.Num {
+          font-size: 48px;
+          font-weight: bold;
+          color: #F35844;
+        }
+
+        &.Btn {
+          padding: 0 30px;
+          background: #F35844;
+          border-radius: 60px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}

src/pages/index/index.jsx → src/components/demo/index.jsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
 import './index.less'
 
-export default class Index extends Component {
+export default class Demo extends Component {
 
   componentWillMount () { }
 
@@ -16,9 +17,9 @@ export default class Index extends Component {
 
   render () {
     return (
-      <View className='index'>
-        <Text>Hello world!</Text>
-      </View>
+      <view className='Demo'>
+
+      </view>
     )
   }
 }

src/pages/FuLi/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/FuLi/index.css

@@ -0,0 +1,179 @@
+.FuLi {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.FuLi > .TopBg {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  background-image: linear-gradient(#ff8d61, #F35844);
+}
+.FuLi > .TopBg > image {
+  width: 100%;
+  height: 100%;
+}
+.FuLi > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view .FuLiContent {
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view {
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 24px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info {
+  align-items: center;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .Icon {
+  width: 132px;
+  height: 132px;
+  background: #ccc;
+  border-radius: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-right: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .Icon > image {
+  width: 100%;
+  height: 100%;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .flex-item > text {
+  display: block;
+  font-size: 28px;
+  color: #666;
+  line-height: 40px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .flex-item > text:first-child {
+  font-size: 32px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > text {
+  line-height: 48px;
+  font-size: 28px;
+  border: 2px solid rgba(243, 88, 68, 0.5);
+  border-radius: 8px;
+  padding: 0 10px;
+  color: rgba(243, 88, 68, 0.5);
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > text.active {
+  color: #f35844;
+  border-color: #f35844;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule {
+  align-items: center;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+  margin-top: 20px;
+  padding-top: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view {
+  overflow: hidden;
+  font-size: 0;
+  white-space: nowrap;
+  text-align: center;
+  position: relative;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view::after {
+  content: '';
+  display: block;
+  width: 2px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  height: 50px;
+  background: rgba(0, 0, 0, 0.08);
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view:first-child::after {
+  display: none;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 60px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view > text.iconfont {
+  font-size: 46px;
+  color: #F35844;
+  margin-right: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  font-size: 0;
+  white-space: nowrap;
+  border-radius: 68px;
+  text-align: center;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view > text {
+  font-size: 24px;
+  color: #666;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 68px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view > text:first-child {
+  margin-right: 10px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view > text.iconfont {
+  font-size: 36px;
+}
+.FuLi > .flex-item > view .FuLiContent > .PirzeList {
+  padding-right: 30px;
+  position: relative;
+  overflow: hidden;
+  font-size: 0;
+  padding-bottom: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .PirzeList > view {
+  width: 50%;
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .PirzeList > view > view {
+  padding-left: 30px;
+  position: relative;
+  overflow: hidden;
+}

src/pages/FuLi/index.jsx

@@ -0,0 +1,110 @@
+import React, { Component } from 'react'
+import NavHeader from '../../components/NavHeader/index'
+import PrizeListItem from '../../components/PrizeListItem/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class FuLi extends Component {
+
+  state = {
+    PirzeList: ['', '', '', '', '', '', '', '', ''],
+    IsPull: false,
+    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 () { }
+
+  OnRefresh () {
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
+  render () {
+    const { IsPull, TestImg, PirzeList } = this.state
+    return (
+      <view className='FuLi flex-v'>
+        <NavHeader BgColor='none' Title='福利' IsFixed={true}></NavHeader>
+
+        {/* 顶部背景图 */}
+        <view className='TopBg'>
+          {/* <image mode='aspectFill' src={TestImg} class='centerLabel'></image> */}
+        </view>
+
+        {/* 正文 */}
+        <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'>
+              <view className='FuLiContent'>
+
+                {/* 用户面板 */}
+                <view className='UserTab'>
+                  <view>
+                    <view className='Info flex-h'>
+                      <view className='Icon'>
+                        <image mode='aspectFill' src={TestImg} class='centerLabel'></image>
+                      </view>
+                      <view className='flex-item'>
+                        <text>三十而已</text>
+                        <text>积分10</text>
+                      </view>
+                      <text className='active'>签到</text>
+                    </view>
+                    <view className='Rule flex-h'>
+                      <view className='flex-item'>
+                        <text className='iconfont iconjifen'></text>
+                        <text>积分规则</text>
+                      </view>
+                      <view className='flex-item'>
+                        <text className='iconfont iconjifenguize'></text>
+                        <text>积分明细</text>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+
+                {/* 搜索框 */}
+                <view className='SearchContainer'>
+                  <view>
+                    <text className='iconfont iconsousuo'></text>
+                    <text>附近热搜：火锅</text>
+                  </view>
+                </view>
+
+                {/* 积分礼品列表 */}
+                <view className='PirzeList'>
+                  {
+                    PirzeList.map((item, index) => (
+                      <view key={`PirzeListItem-${index}`}>
+                        <view>
+                          <PrizeListItem></PrizeListItem>
+                        </view>
+                      </view>
+                    ))
+                  }
+                </view>
+
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+
+      </view>
+    )
+  }
+}

src/pages/FuLi/index.less

@@ -0,0 +1,210 @@
+.FuLi {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+
+  >.TopBg {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 56.25%;
+    background-image: linear-gradient(rgba(255, 141, 97, 1, 0.5), #F35844);
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+
+      .FuLiContent {
+        position: relative;
+        overflow: hidden;
+
+        >.UserTab {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 30px;
+
+          >view {
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+            background: #fff;
+            border-radius: 24px;
+
+            >.Info {
+              align-items: center;
+
+              >.Icon {
+                width: 132px;
+                height: 132px;
+                background: #ccc;
+                border-radius: 100%;
+                position: relative;
+                overflow: hidden;
+                margin-right: 20px;
+
+                >image {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              >.flex-item {
+                position: relative;
+                overflow: hidden;
+
+                >text {
+                  display: block;
+                  font-size: 28px;
+                  color: #666;
+                  line-height: 40px;
+
+                  &:first-child {
+                    font-size: 32px;
+                    color: #333;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin-bottom: 20px;
+                  }
+                }
+              }
+
+              >text {
+                line-height: 48px;
+                font-size: 28px;
+                border: 2px solid rgba(243, 88, 68, 0.5);
+                border-radius: 8px;
+                padding: 0 10px;
+                color: rgba(243, 88, 68, 0.5);
+                margin-left: 20px;
+                margin-right: 20px;
+
+                &.active {
+                  color: rgba(243, 88, 68, 1);
+                  border-color: rgba(243, 88, 68, 1);
+                }
+              }
+            }
+
+            >.Rule {
+              align-items: center;
+              border-top: 2px solid rgba(0, 0, 0, 0.08);
+              margin-top: 20px;
+              padding-top: 20px;
+
+              >view {
+                position: relative;
+                overflow: hidden;
+                font-size: 0;
+                white-space: nowrap;
+                text-align: center;
+                position: relative;
+
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 2px;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  -webkit-transform: translateY(-50%);
+                  height: 50px;
+                  background: rgba(0, 0, 0, 0.08);
+                }
+
+                &:first-child {
+                  &::after {
+                    display: none;
+                  }
+                }
+
+                >text {
+                  font-size: 28px;
+                  color: #333;
+                  line-height: 60px;
+                  display: inline-block;
+                  vertical-align: middle;
+
+                  &.iconfont {
+                    font-size: 46px;
+                    color: #F35844;
+                    margin-right: 20px;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        >.SearchContainer {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 30px;
+
+          >view {
+            position: relative;
+            overflow: hidden;
+            background: #fff;
+            font-size: 0;
+            white-space: nowrap;
+            border-radius: 68px;
+            text-align: center;
+
+            >text {
+              font-size: 24px;
+              color: #666;
+              display: inline-block;
+              vertical-align: middle;
+              line-height: 68px;
+
+              &:first-child {
+                margin-right: 10px;
+              }
+
+              &.iconfont {
+                font-size: 36px;
+              }
+            }
+          }
+        }
+
+        >.PirzeList {
+          padding-right: 30px;
+          position: relative;
+          overflow: hidden;
+          font-size: 0;
+          padding-bottom: 30px;
+
+          >view {
+            width: 50%;
+            display: inline-block;
+            vertical-align: middle;
+            margin-top: 30px;
+            >view {
+              padding-left: 30px;
+              position: relative;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/HuoDong/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/HuoDong/index.jsx

@@ -0,0 +1,111 @@
+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 './index.less'
+
+export default class HuoDong 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',
+    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 () { }
+
+  NavChange (e) {
+    return () => {
+      this.setState({
+        CurrentNavId: e.id
+      })
+    }
+  }
+
+  OnRefresh () {
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: 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'>
+
+              {/* 活动 */}
+              {
+                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'>
+                    {
+                      NewsList.map((item, index) => (
+                        <view className='ListItem' key={`NewsItem-${index}`}>
+                          <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
+                        </view>
+                      ))
+                    }
+                  </view>
+                </view>
+              }
+
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    )
+  }
+}

src/pages/HuoDong/index.less

@@ -0,0 +1,119 @@
+.HuoDong {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f8f8;
+
+  >.TopNav {
+    width: 100%;
+    padding-bottom: 35%;
+    background-image: linear-gradient(#f35844, #ff8d61);
+    position: relative;
+    z-index: 1;
+
+    >view {
+      width: 100%;
+      font-size: 0;
+      white-space: nowrap;
+      text-align: center;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+
+      >text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 32px;
+        color: #fff;
+        margin-left: 160px;
+        position: relative;
+        padding: 0 30px;
+        padding-bottom: 20px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.active {
+          color: #333;
+          line-height: 60px;
+          font-weight: bold;
+
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 2px;
+            background: #000;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .Content {
+      position: relative;
+      overflow: hidden;
+
+      &.Activity {
+        padding: 0 30px;
+
+        >.ListItem {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin-bottom: 30px;
+
+          &:first-child {
+            margin-top: 30px;
+          }
+        }
+      }
+
+      &.News {
+
+        >.BigImg {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          padding-bottom: 50%;
+          background: #ccc;
+
+          >image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        >.List {
+          padding: 0 30px;
+
+          >.ListItem {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            margin-bottom: 30px;
+
+            &:first-child {
+              margin-top: 30px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '活动'
+}

src/pages/ShouYe/HuoDong/index.css

@@ -0,0 +1,20 @@
+.ShouYeHuoDong {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.ShouYeHuoDong .ShouYeHuoDongContent {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+}
+.ShouYeHuoDong .ShouYeHuoDongContent > .ListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.ShouYeHuoDong .ShouYeHuoDongContent > .ListItem:first-child {
+  margin-top: 30px;
+}

src/pages/ShouYe/HuoDong/index.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import ActivityListItem from '../../../components/ActivityListItem/index'
+import '../../../assets/css/reset.less'
+import '../../../assets/css/iconfont.less'
+import './index.less'
+
+export default class ShouYeHuoDong extends Component {
+
+  state = {
+    ActivityList: ['', '', '', '', '', '', '', ''],
+    IsPull: false
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  OnRefresh () { // 页面下拉刷新
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
+  render () {
+    const { IsPull, ActivityList } = this.state
+    return (
+      <view className='ShouYeHuoDong'>
+        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
+          <view className='ShouYeHuoDongContent'>
+            {
+              ActivityList.map((item, index) => (
+                <view className='ListItem' key={`ActivityItem-${index}`}>
+                  <ActivityListItem Data={item}></ActivityListItem>
+                </view>
+              ))
+            }
+          </view>
+        </scroll-view>
+      </view >
+    )
+  }
+}

src/pages/ShouYe/HuoDong/index.less

@@ -0,0 +1,20 @@
+.ShouYeHuoDong {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f8f8;
+  .ShouYeHuoDongContent {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    >.ListItem {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/pages/ShouYe/ZiXun/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '资讯'
+}

src/pages/ShouYe/ZiXun/index.css

@@ -0,0 +1,20 @@
+.ShouYeZiXun {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.ShouYeZiXun .ShouYeHuoDongContent {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+}
+.ShouYeZiXun .ShouYeHuoDongContent > .ListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.ShouYeZiXun .ShouYeHuoDongContent > .ListItem:first-child {
+  margin-top: 30px;
+}

src/pages/ShouYe/ZiXun/index.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import NewsListItem from '../../../components/NewsListItem/index'
+import '../../../assets/css/reset.less'
+import '../../../assets/css/iconfont.less'
+import './index.less'
+
+export default class ShouYeZiXun extends Component {
+
+  state = {
+    ActivityList: ['', '', '', '', '', '', '', ''],
+    IsPull: false
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  OnRefresh () { // 页面下拉刷新
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
+  render () {
+    const { IsPull, ActivityList } = this.state
+    return (
+      <view className='ShouYeZiXun'>
+        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
+          <view className='ShouYeHuoDongContent'>
+            {
+              ActivityList.map((item, index) => (
+                <view className='ListItem' key={`ActivityItem-${index}`}>
+                  <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
+                </view>
+              ))
+            }
+          </view>
+        </scroll-view>
+      </view >
+    )
+  }
+}

src/pages/ShouYe/ZiXun/index.less

@@ -0,0 +1,20 @@
+.ShouYeZiXun {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f8f8;
+  .ShouYeHuoDongContent {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    >.ListItem {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/pages/ShouYe/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/ShouYe/index.jsx

@@ -0,0 +1,207 @@
+import React, { Component } from 'react'
+import NavHeader from '../../components/NavHeader/index'
+import { Swiper, SwiperItem, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class Index extends Component {
+
+  state = {
+    ShowAdvLayer: false,
+    IsPull: false,
+    NewsList: [
+      { img: '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', title: '标题', desc: '描述' },
+      { img: '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', title: '标题', desc: '描述' },
+      { img: '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', title: '标题', desc: '描述' },
+      { img: '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', title: '标题', desc: '描述' }
+    ],
+    OwnerList: [
+      { icon: 'iconjiaofei', name: '物业缴费', id: 1 },
+      { icon: 'icontongzhi', name: '物业通知', id: 2 },
+      { icon: 'iconbaoxiu', name: '物业报修', id: 3 },
+      { icon: 'iconrenzheng', name: '业主认证', id: 4 }
+    ],
+    NavList: [
+      { icon: 'iconhuodong1', name: '活动', id: 1, router: '/pages/ShouYe/HuoDong/index', isTab: false },
+      { icon: 'iconfuli', name: '福利', id: 2, router: '/pages/FuLi/index', isTab: true },
+      { icon: 'iconfuwu', name: '服务', id: 3, router: '/pages/WuYe/index', isTab: true },
+      { icon: 'iconxinwen', name: '资讯', id: 4, router: '/pages/ShouYe/ZiXun/index', isTab: false }
+    ],
+    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',
+    BannerList: [
+      { img: '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' },
+      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=16024dc7edcdbb6c325d40cdff6373a1&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F213601f2xz7usscm2z1mjh.jpg' },
+      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=3f54f5330ec21728ecb02352fbb6af90&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F15%2F152011zser9o5oa9ee9xx6.jpg' },
+      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989359&di=46ae1d0f0d4f1f3740139191398f2a81&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20131230%2F20131230165604-1960511167.jpg' },
+      { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989359&di=2ec3fe46fb98c01055601cece86f111f&imgtype=0&src=http%3A%2F%2Fbenyouhuifile.it168.com%2Fforum%2Fday_100429%2F1004291840008539c8ac02cd5c.jpg' }
+    ]
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  NavClick (item) {
+    return () => {
+      if (item.isTab) {
+        Taro.switchTab({ url: item.router })
+      } else {
+        Taro.navigateTo({ url: item.router })
+      }
+    }
+  }
+
+  OnRefresh () { // 页面下拉刷新
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
+  render () {
+    const { TestImg, ShowAdvLayer, IsPull, BannerList, NavList, OwnerList, NewsList } = this.state
+    return (
+      <view className='ShouYe flex-v'>
+        <NavHeader BgColor='#f35844' Title='首页'></NavHeader>
+        <view className='flex-item'>
+
+          {/* 广告 */}
+          <view className='AdvLayer' style={{ display: ShowAdvLayer ? 'block' : 'none' }}>
+            <view className='centerLabel'>
+              <image mode='aspectFit' src={TestImg}></image>
+              <Text className='iconfont iconguanbi'></Text>
+            </view>
+          </view>
+
+          {/* 正文 */}
+          <view className='PageContainer'>
+            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='#f35844'>
+              <view className='Content'>
+
+                {/* 背景图 */}
+                <view className='TopBg'></view>
+
+                <view>
+
+                  {/* 欢迎词 */}
+                  <Text className='Welcome'>欢迎来到远道智慧社区！</Text>
+
+                  {/* banner */}
+                  <view className='BannerContainer'>
+                    <view>
+                      <view>
+                        <Swiper className='BannerSwiper' autoplay circular indicator-dots indicator-color='rgba(0,0,0,0.4)' indicator-active-color='rgba(255,255,255,0.8)'>
+                          {
+                            BannerList.map((item, index) => (
+                              <SwiperItem className='SwiperItem' key={`Banner-${index}`}>
+                                <view className='BannerItem'>
+                                  <image mode='aspectFill' src={item.img}></image>
+                                </view>
+                              </SwiperItem>
+                            ))
+                          }
+                        </Swiper>
+                      </view>
+                    </view>
+                  </view>
+
+                  {/* 导航 */}
+                  <view className='NavContainer flex-h'>
+                    {
+                      NavList.map((item, index) => (
+                        <view key={`Nav-${index}`} className='flex-item'>
+                          <view onClick={this.NavClick(item)}>
+                            <view className='centerLabel'>
+                              <Text className={`iconfont ${item.icon}`}></Text>
+                              <Text>{item.name}</Text>
+                            </view>
+                          </view>
+                        </view>
+                      ))
+                    }
+                  </view>
+
+                  {/* 热门活动 */}
+                  <view className='HotActivityContainer'>
+                    <view>
+                      <view className='Title'>
+                        <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}>热门活动</Text>
+                        <Text className='iconfont icongengduo' onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}></Text>
+                      </view>
+                      <view className='Activity'>
+                        <image className='centerLabel' mode='aspectFill' src={TestImg}></image>
+                      </view>
+                    </view>
+                  </view>
+
+                  {/* 业主专区 */}
+                  <view className='OwnerContainer'>
+                    <view>
+                      <view className='Title'>
+                        <Text>业主专区</Text>
+                      </view>
+                      <view className='OwnerList flex-h'>
+                        {
+                          OwnerList.map((item, index) => (
+                            <view className='flex-item' key={`Owners-${index}`}>
+                              <Text className={`iconfont ${item.icon}`}></Text>
+                              <Text>{item.name}</Text>
+                            </view>
+                          ))
+                        }
+                      </view>
+                    </view>
+                  </view>
+
+                  {/* 热门资讯 */}
+                  <view className='NewsContainer'>
+                    <view>
+                      <view className='Title flex-h'>
+                        <Text className='flex-item'>热门资讯</Text>
+                        <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/ZiXun/index' }) }}>查看全部</Text>
+                        <Text className='iconfont iconjiantouright'></Text>
+                      </view>
+                      <view className='List'>
+                        {
+                          NewsList.map((item, index) => (
+                            <view key={`News-${index}`} className='flex-h'>
+                              <view className='Img'>
+                                <image mode='aspectFill' src={item.img} className='centerLabel'></image>
+                              </view>
+                              <view className='flex-item'>
+                                <Text>{item.title}</Text>
+                                <Text>{item.desc}</Text>
+                              </view>
+                            </view>
+                          ))
+                        }
+                      </view>
+                    </view>
+                  </view>
+
+                  <view className='PageBottom'></view>
+
+                </view>
+
+              </view>
+            </scroll-view>
+          </view>
+
+        </view>
+      </view >
+    )
+  }
+}

src/pages/ShouYe/index.less

@@ -0,0 +1,372 @@
+.ShouYe {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f8f8;
+  > view {
+    position: relative;
+    &.flex-item {
+      position: relative;
+      overflow: hidden;
+      > .AdvLayer {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background: rgba(0, 0, 0, 0.8);
+        > view {
+          width: 100%;
+          height: 100vw;
+          overflow: visible;
+          > image {
+            width: 60%;
+            height: 60%;
+            position: relative;
+            z-index: 1;
+            margin: 0 auto;
+            display: block;
+          }
+          >text {
+            display: inline-block;
+            color: #fff;
+            font-size: 60px;
+            position: absolute;
+            left: 50%;
+            bottom: -30px;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+            z-index: 2;
+          }
+        }
+      }
+      > .PageContainer {
+        width: 100%;
+        position: relative;
+        z-index: 2;
+        height: 100%;
+        overflow: hidden;
+        z-index: 1;
+        .Content {
+          position: relative;
+          overflow: hidden;
+          > view {
+            position: relative;
+            z-index: 2;
+            &.TopBg {
+              width: 100%;
+              position: absolute;
+              z-index: 1;
+              left: 0;
+              top: 0;
+              padding-bottom: 60%;
+              border-radius: 0 0 100px 100px;
+              background-image: linear-gradient(#f35844, #ff8d61);
+              z-index: 1;
+            }
+            > .Welcome {
+              display: block;
+              font-size: 30px;
+              color: #fff;
+              margin-top: 60px;
+              text-indent: 30px;
+            }
+            > .BannerContainer {
+              padding: 0 30px;
+              position: relative;
+              overflow: hidden;
+              margin-top: 50px;
+              > view {
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                padding-bottom: 50%;
+                background: #f8f8f8;
+                border-radius: 24px;
+                height: 0;
+                > view {
+                  width: 100%;
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  bottom: 0;
+                  overflow: hidden;
+                  > .BannerSwiper {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    overflow: hidden;
+                    border-radius: 24px;
+                    .BannerItem {
+                      width: 100%;
+                      height: 100%;
+                      position: relative;
+                      overflow: hidden;
+                      border-radius: 24px;
+                      > image {
+                        width: 100%;
+                        height: 100%;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            > .NavContainer {
+              position: relative;
+              overflow: hidden;
+              align-items: center;
+              padding: 0 30px;
+              margin-top: 40px;
+              > view {
+                margin-left: 30px;
+                position: relative;
+                overflow: hidden;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &:nth-child(1) {
+                  > view {
+                    > view {
+                      > text {
+                        &:first-child {
+                          color: #ffc412;
+                        }
+                      }
+                    }
+                  }
+                }
+                &:nth-child(2) {
+                  > view {
+                    > view {
+                      > text {
+                        &:first-child {
+                          color: #fb3fc8;
+                        }
+                      }
+                    }
+                  }
+                }
+                &:nth-child(3) {
+                  > view {
+                    > view {
+                      > text {
+                        &:first-child {
+                          color: #fb7820;
+                        }
+                      }
+                    }
+                  }
+                }
+                &:nth-child(4) {
+                  > view {
+                    > view {
+                      > text {
+                        &:first-child {
+                          color: #586ff8;
+                        }
+                      }
+                    }
+                  }
+                }
+                > view {
+                  width: 100%;
+                  padding-bottom: 100%;
+                  background: #fff;
+                  position: relative;
+                  overflow: hidden;
+                  border-radius: 12px;
+                  > view {
+                    width: 100%;
+                    > text {
+                      display: block;
+                      text-align: center;
+                      line-height: 40px;
+                      color: #333;
+                      font-size: 26px;
+                      &:first-child {
+                        font-size: 50px;
+                        line-height: 60px;
+                        margin-bottom: 10px;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            > .HotActivityContainer {
+              padding: 0 30px;
+              position: relative;
+              overflow: hidden;
+              margin-top: 30px;
+              > view {
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                border-radius: 40px;
+                background: #fff;
+                > .Title {
+                  font-size: 0;
+                  white-space: nowrap;
+                  text-align: center;
+                  padding: 30px 0;
+                  > text {
+                    display: inline-block;
+                    vertical-align: middle;
+                    font-size: 24px;
+                    color: #999;
+                    &:first-child {
+                      font-size: 34px;
+                      color: #333;
+                      line-height: 40px;
+                      font-weight: bold;
+                      margin-right: 20px;
+                    }
+                  }
+                }
+                > .Activity {
+                  width: 100%;
+                  padding-bottom: 33.33%;
+                  position: relative;
+                  overflow: hidden;
+                  > image {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+            }
+            > .OwnerContainer {
+              padding: 0 30px;
+              position: relative;
+              overflow: hidden;
+              margin-top: 30px;
+              > view {
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                border-radius: 40px;
+                background: #fff;
+                > .Title {
+                  font-size: 0;
+                  white-space: nowrap;
+                  text-align: center;
+                  padding: 30px 0;
+                  > text {
+                    display: inline-block;
+                    vertical-align: middle;
+                    font-size: 24px;
+                    color: #999;
+                    &:first-child {
+                      font-size: 34px;
+                      color: #333;
+                      line-height: 40px;
+                      font-weight: bold;
+                      margin-right: 20px;
+                    }
+                  }
+                }
+                > .OwnerList {
+                  border-top: 2px solid #f8f8f8;
+                  align-items: center;
+                  padding: 30px 0;
+                  > view {
+                    > text {
+                      display: block;
+                      width: 100%;
+                      text-align: center;
+                      font-size: 26px;
+                      color: #333;
+                      line-height: 40px;
+                      &:first-child {
+                        color: #f35844;
+                        font-size: 60px;
+                        line-height: 70px;
+                        margin-bottom: 10px;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            > .NewsContainer {
+              padding: 0 30px;
+              position: relative;
+              overflow: hidden;
+              margin-top: 30px;
+              > view {
+                position: relative;
+                overflow: hidden;
+                background: #fff;
+                border-radius: 40px;
+                > .Title {
+                  align-items: center;
+                  padding: 0 20px;
+                  > text {
+                    font-size: 24px;
+                    color: #666;
+                    line-height: 98px;
+                    margin-left: 10px;
+                    &:first-child {
+                      font-size: 30px;
+                      color: #333;
+                    }
+                  }
+                }
+                > .List {
+                  > view {
+                    align-items: center;
+                    border-top: 2px solid #f8f8f8;
+                    padding: 30px 20px;
+                    position: relative;
+                    overflow: hidden;
+                    &:first-child {
+                      border-top: none;
+                    }
+                    > .Img {
+                      width: 160px;
+                      height: 128px;
+                      position: relative;
+                      overflow: hidden;
+                      background: #f8f8f8;
+                      margin-right: 20px;
+                      > image {
+                        width: 100%;
+                        height: 100%;
+                      }
+                    }
+                    > .flex-item {
+                      position: relative;
+                      overflow: hidden;
+                      > text {
+                        display: block;
+                        font-size: 26px;
+                        color: #666;
+                        line-height: 40px;
+                        &:first-child {
+                          font-size: 30px;
+                          color: #333;
+                          margin-bottom: 10px;
+                        }
+                        &:last-child {
+                          white-space: nowrap;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            > .PageBottom {
+              width: 100%;
+              height: 30px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/WoDe/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/WoDe/index.css

@@ -0,0 +1,113 @@
+.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

@@ -0,0 +1,101 @@
+import React, { Component } from 'react'
+import NavHeader from '../../components/NavHeader/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WoDe extends Component {
+
+  state = {
+    IsPull: false,
+    UserTab: [
+      { icon: 'iconrenzheng1', name: '业主认证', id: 1 },
+      { icon: 'iconjifenguize', name: '积分明细', id: 2 },
+      { icon: 'iconjiaofei', name: '物业缴费', id: 3 },
+      { icon: 'iconfuwu1', name: '物业服务', id: 4 }
+    ],
+    MoreUserTab: [
+      { icon: 'iconerweima', name: '推荐二维码', id: 5 },
+      { icon: 'iconfenxiang', name: '推荐分享', id: 6 },
+      { icon: 'iconhuodong', name: '参与活动', id: 7 }
+    ]
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  OnRefresh () { // 页面下拉刷新
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
+  render () {
+    const { IsPull, UserTab, MoreUserTab } = this.state
+    return (
+      <view className='WoDe'>
+        <NavHeader BgColor='none' Title='我的' IsFixed={true}></NavHeader>
+        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='#F35844'>
+          <view className='WoDeContent'>
+
+            {/* 顶部背景图 */}
+            <view className='TopBg'>
+              <view className='ColorBg'></view>
+              <view className='UserInfo flex-h'>
+                <view className='Icon'>
+                  <image mode='aspectFill' src={null} class='centerLabel'></image>
+                </view>
+                <view className='flex-item'>
+                  <text>徐慧慧</text>
+                  <text>13613949434</text>
+                </view>
+                <text>签到</text>
+              </view>
+            </view>
+
+            {/* 用户选项 */}
+            <view className='UserTab'>
+              {
+                UserTab.map((item, index) => (
+                  <view key={`UserTab-${index}`} className='flex-h'>
+                    <text className={`iconfont ${item.icon}`}></text>
+                    <view className='flex-h flex-item'>
+                      <text className='flex-item'>{item.name}</text>
+                      <text className='iconfont iconjiantouright'></text>
+                    </view>
+                  </view>
+                ))
+              }
+              <view className='Line'></view>
+              {
+                MoreUserTab.map((item, index) => (
+                  <view key={`UserTab-${index}`} className='flex-h'>
+                    <text className={`iconfont ${item.icon}`}></text>
+                    <view className='flex-h flex-item'>
+                      <text className='flex-item'>{item.name}</text>
+                      <text className='iconfont iconjiantouright'></text>
+                    </view>
+                  </view>
+                ))
+              }
+            </view>
+
+          </view>
+        </scroll-view>
+      </view>
+    )
+  }
+}

src/pages/WoDe/index.less

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

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '报修区域'
+}

src/pages/WuYe/BaoXiuQuYu/index.css

@@ -0,0 +1,50 @@
+.WuYeBaoXiuQuYu {
+  width: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+  min-height: 100%;
+}
+.WuYeBaoXiuQuYu > view {
+  padding: 0 30px;
+  margin-bottom: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeBaoXiuQuYu > view:first-child {
+  margin-top: 30px;
+}
+.WuYeBaoXiuQuYu > view > view {
+  padding: 60px 0;
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 12px;
+}
+.WuYeBaoXiuQuYu > view > view > view {
+  font-size: 0;
+  white-space: nowrap;
+  text-align: center;
+}
+.WuYeBaoXiuQuYu > view > view > view > text {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 32px;
+  color: #333;
+  font-weight: bold;
+  line-height: 60px;
+}
+.WuYeBaoXiuQuYu > view > view > view > text:first-child {
+  font-weight: normal;
+  font-size: 40px;
+  color: #F35844;
+  margin-right: 20px;
+}
+.WuYeBaoXiuQuYu > view > view > text {
+  display: block;
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+  text-align: center;
+  margin-top: 20px;
+}

src/pages/WuYe/BaoXiuQuYu/index.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import Taro from '@tarojs/taro'
+import '../../../assets/css/reset.less'
+import '../../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeBaoXiuQuYu extends Component {
+
+  state = {
+    TypeList: [
+      { icon: 'icongonggongquyu', name: '公共区域问题', desc: '如绿植被破坏、楼道灯不亮等问题', id: 1 },
+      { icon: 'iconfangwuzhiliang', name: '房屋质量问题', desc: '如家中墙体开裂、墙皮脱落等问题', id: 2 },
+      { icon: 'iconhuneisheshi', name: '户内设施问题', desc: '如通浴室下水道、保洁等可能需要收费的项目', id: 3 }
+    ]
+  }
+
+  componentWillMount () {
+  }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { TypeList } = this.state
+    return (
+      <view className='WuYeBaoXiuQuYu'>
+        {
+          TypeList.map((item, index) => (
+            <view key={`WuYeBaoXiuQuYu-${index}`}>
+              <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
+                <view>
+                  <text className={`iconfont ${item.icon}`}></text>
+                  <text>{item.name}</text>
+                </view>
+                <text>{item.desc}</text>
+              </view>
+            </view>
+          ))
+        }
+      </view>
+    )
+  }
+}

src/pages/WuYe/BaoXiuQuYu/index.less

@@ -0,0 +1,56 @@
+.WuYeBaoXiuQuYu {
+  width: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+  min-height: 100%;
+
+  >view {
+    padding: 0 30px;
+    margin-bottom: 30px;
+    position: relative;
+    overflow: hidden;
+
+    &:first-child {
+      margin-top: 30px;
+    }
+
+    >view {
+      padding: 60px 0;
+      position: relative;
+      overflow: hidden;
+      background-color: #fff;
+      border-radius: 12px;
+
+      >view {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
+
+        >text {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 32px;
+          color: #333;
+          font-weight: bold;
+          line-height: 60px;
+
+          &:first-child {
+            font-weight: normal;
+            font-size: 40px;
+            color: #F35844;
+            margin-right: 20px;
+          }
+        }
+      }
+      >text {
+        display: block;
+        font-size: 24px;
+        color: #999;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 20px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '服务详情'
+}

src/pages/WuYe/FuWuDetail/index.css

@@ -0,0 +1,6 @@
+.WuYeFuWuDetail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}

src/pages/WuYe/FuWuDetail/index.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import '../../../assets/css/reset.less'
+import '../../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeFuWuDetail extends Component {
+
+  state = {
+  }
+
+  componentWillMount () {
+  }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <view className='WuYeFuWuDetail'>
+
+      </view>
+    )
+  }
+}

src/pages/WuYe/FuWuDetail/index.less

@@ -0,0 +1,6 @@
+.WuYeFuWuDetail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '公告详情'
+}

src/pages/WuYe/GongGaoDetail/index.css

@@ -0,0 +1,6 @@
+.WuYeGongGaoDetail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}

src/pages/WuYe/GongGaoDetail/index.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import '../../../assets/css/reset.less'
+import '../../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeGongGaoDetail extends Component {
+
+  state = {
+  }
+
+  componentWillMount () {
+  }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+  
+  onLoad (opt) {
+    console.log(opt.id)
+  }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <view className='WuYeGongGaoDetail'>
+
+      </view>
+    )
+  }
+}

src/pages/WuYe/GongGaoDetail/index.less

@@ -0,0 +1,6 @@
+.WuYeGongGaoDetail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '添加报修'
+}

src/pages/WuYe/TianJiaBaoXiu/index.css

@@ -0,0 +1,7 @@
+.WuYeTianJiaBaoXiu {
+  width: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+  min-height: 100%;
+}

src/pages/WuYe/TianJiaBaoXiu/index.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+// import Taro from '@tarojs/taro'
+import '../../../assets/css/reset.less'
+import '../../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYeTianJiaBaoXiu extends Component {
+
+  state = {
+  }
+
+  componentWillMount () {
+  }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <view className='WuYeTianJiaBaoXiu'>
+
+      </view>
+    )
+  }
+}

src/pages/WuYe/TianJiaBaoXiu/index.less

@@ -0,0 +1,7 @@
+.WuYeTianJiaBaoXiu {
+  width: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+  min-height: 100%;
+}

src/pages/WuYe/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/WuYe/index.css

@@ -0,0 +1,20 @@
+.WuYe {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}
+.WuYe > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.WuYe > .flex-item > view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.WuYe > .flex-item > view .Content {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}

src/pages/WuYe/index.jsx

@@ -0,0 +1,104 @@
+import React, { Component } from 'react'
+import TabPageCutNav from '../../components/TabPageCutNav/index'
+import NavHeader from '../../components/NavHeader/index'
+import WuYeGongGao from '../../components/WuYeGongGao/index'
+import WuYeFuWu from '../../components/WuYeFuWu/index'
+import WuYeBaoXiu from '../../components/WuYeBaoXiu/index'
+import WuYeJiaoFei from '../../components/WuYeJiaoFei/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class WuYe extends Component {
+
+  state = {
+    NavList: [
+      { name: '公告', id: 1 },
+      { name: '服务', id: 2 },
+      { name: '报修', id: 3 },
+      { name: '缴费', id: 4 }
+    ],
+    CurrentNavId: 1,
+    IsPull: false
+  }
+
+  componentWillMount () {
+  }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  NavChange (e) {
+    return () => {
+      this.setState({
+        CurrentNavId: e.id
+      })
+    }
+  }
+
+  OnRefresh () {
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
+  render () {
+    const { NavList, CurrentNavId, IsPull } = this.state
+    return (
+      <view className='WuYe flex-v'>
+        <NavHeader Title='物业' BgColor='none' 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'>
+
+              {/* 公告 */}
+              {
+                CurrentNavId - 0 === 1 &&
+                <view className='Content GongGao'>
+                  <WuYeGongGao></WuYeGongGao>
+                </view>
+              }
+
+              {/* 服务 */}
+              {
+                CurrentNavId - 0 === 2 &&
+                <view className='Content FuWu'>
+                  <WuYeFuWu></WuYeFuWu>
+                </view>
+              }
+
+              {/* 报修 */}
+              {
+                CurrentNavId - 0 === 3 &&
+                <view className='Content BaoXiu'>
+                  <WuYeBaoXiu></WuYeBaoXiu>
+                </view>
+              }
+
+              {/* 缴费 */}
+              {
+                CurrentNavId - 0 === 4 &&
+                <view className='Content JiaoFei'>
+                  <WuYeJiaoFei></WuYeJiaoFei>
+                </view>
+              }
+
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    )
+  }
+}

src/pages/WuYe/index.less

@@ -0,0 +1,23 @@
+.WuYe {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .Content {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+}

src/pages/index/index.config.js

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: '首页'
-}