静态页面

project.config.json

@@ -5,23 +5,30 @@
 	"appid": "touristappid",
 	"setting": {
 		"urlCheck": true,
-		"scopeDataCheck": false,
-		"coverView": true,
 		"es6": false,
+		"enhance": false,
 		"postcss": false,
-		"compileHotReLoad": false,
 		"preloadBackgroundData": false,
 		"minified": false,
-		"autoAudits": 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,
-		"nodeModules": false,
-		"enhance": false,
 		"useCompilerModule": false,
-		"userConfirmedUseCompilerModuleSwitch": false,
-		"showShadowRootInWxmlPanel": true
+		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",
 	"simulatorType": "wechat",

src/app.config.js

@@ -1,9 +1,9 @@
 export default {
   pages: [
-    'pages/HuoDong/index',
+    'pages/FuLi/index',
     'pages/ShouYe/index',
     'pages/WuYe/index',
-    'pages/FuLi/index',
+    'pages/HuoDong/index',
     'pages/WoDe/index'
   ],
   tabBar: {

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/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 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
+    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/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

@@ -16,22 +16,20 @@ export default class TabPageCutNav extends Component {
 
   componentDidHide () { }
 
-  CutNav (e) { // 切换nav
-    return () => {
-      this.props.Change(e.id)
-    }
-  }
-
   render () {
-    const { List = [], CurrentNavId = null } = this.props
+    const { List = [], CurrentNavId = null, NavChange = () => { } } = this.props
     return (
       <view className='TabPageCutNav'>
         <view>
-          {
-            List.map((item, index) => (
-              <text key={`TabPageNav-${index}`} class={item.id - 0 === CurrentNavId - 0 ? 'active' : ''} onClick={this.CutNav(item)}>{item.name}</text>
-            ))
-          }
+          <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

@@ -7,41 +7,47 @@
 
   >view {
     width: 100%;
-    font-size: 0;
-    white-space: nowrap;
-    text-align: center;
     position: absolute;
     left: 0;
     bottom: 0;
+    overflow: hidden;
 
-    >text {
-      display: inline-block;
-      vertical-align: middle;
-      font-size: 32px;
-      color: #fff;
-      margin-left: 160px;
+    >view {
+      width: 100%;
       position: relative;
-      padding: 0 30px;
-      padding-bottom: 20px;
-      line-height: 60px;
+      overflow: hidden;
 
-      &:first-child {
-        margin-left: 0;
-      }
+      >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;
+          &.active {
+            color: #333;
+            font-weight: bold;
 
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          height: 2px;
-          background: #000;
-          width: 100%;
+            &::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,36 @@
+import React, { Component } from 'react'
+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'>
+        <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,38 @@
+import React, { Component } from 'react'
+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'>
+        <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/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/HuoDong/index.jsx

@@ -2,26 +2,31 @@ 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 Index extends Component {
+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,
-    DataLock: false,
-    PageList: [],
-    PageData: {
-      pageNum: 1,
-      pageSize: 10
-    },
-    HasNextPage: true
+    ActivityList: ['', '', '', '', '', '', '', ''],
+    NewsList: ['', '', '', '', '', '', '', '']
+    // DataLock: false,
+    // PageList: [],
+    // PageData: {
+    //   pageNum: 1,
+    //   pageSize: 10
+    // },
+    // HasNextPage: true
   }
 
   componentWillMount () { }
@@ -35,15 +40,71 @@ export default class Index extends Component {
   componentDidHide () { }
 
   NavChange (e) {
-    console.log(e)
+    return () => {
+      this.setState({
+        CurrentNavId: e.id
+      })
+    }
+  }
+
+  OnRefresh () {
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
   }
 
   render () {
-    const { CurrentNavId, DataLock, IsPull, NavList } = this.state
+    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} onChange={this.NavChange}></TabPageCutNav>
+        <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

@@ -3,13 +3,15 @@
   height: 100%;
   overflow: hidden;
   background: #f8f8f8;
-  > .TopNav {
+
+  >.TopNav {
     width: 100%;
     padding-bottom: 35%;
     background-image: linear-gradient(#f35844, #ff8d61);
     position: relative;
     z-index: 1;
-    > view {
+
+    >view {
       width: 100%;
       font-size: 0;
       white-space: nowrap;
@@ -17,7 +19,8 @@
       position: absolute;
       left: 0;
       bottom: 0;
-      > text {
+
+      >text {
         display: inline-block;
         vertical-align: middle;
         font-size: 32px;
@@ -26,13 +29,16 @@
         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;
@@ -47,23 +53,67 @@
       }
     }
   }
-  > .flex-item {
+
+  >.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 {
+
+        >.ListItem {
           width: 100%;
           position: relative;
           overflow: hidden;
-          background: #fff;
-          border-radius: 12px;
-          margin-top: 30px;
+          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/index.jsx

@@ -77,7 +77,7 @@ export default class Index extends Component {
 
           {/* 正文 */}
           <view className='PageContainer'>
-            <scroll-view scroll-y="true" style="height: 100%;" refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background="none">
+            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
               <view className='Content'>
 
                 {/* 背景图 */}

src/pages/WuYe/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '首页'
+  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

@@ -1,8 +1,26 @@
 import React, { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+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 Index extends Component {
+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 () { }
 
@@ -14,11 +32,72 @@ export default class Index extends Component {
 
   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='index'>
-        <Text>Hello world!</Text>
-      </View>
+      <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;
+      }
+    }
+  }
+}