静态页面

src/app.config.js

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

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/components/TabPageCutNav/index.jsx

@@ -1,5 +1,7 @@
 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 {
@@ -14,9 +16,23 @@ export default class TabPageCutNav extends Component {
 
   componentDidHide () { }
 
+  CutNav (e) { // 切换nav
+    return () => {
+      this.props.Change(e.id)
+    }
+  }
+
   render () {
+    const { List = [], CurrentNavId = null } = this.props
     return (
-      <view className='TabPageCutNav flex-v'>
+      <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>
       </view >
     )
   }

src/components/TabPageCutNav/index.less

@@ -0,0 +1,49 @@
+.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%;
+    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;
+      line-height: 60px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &.active {
+        color: #333;
+        font-weight: bold;
+
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 2px;
+          background: #000;
+          width: 100%;
+        }
+      }
+    }
+  }
+}

src/pages/HuoDong/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
 }

src/pages/HuoDong/index.jsx

@@ -1,9 +1,29 @@
 import React, { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+// import { View, Text } from '@tarojs/components'
+import TabPageCutNav from '../../components/TabPageCutNav/index'
+import NavHeader from '../../components/NavHeader/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
 import './index.less'
 
 export default class Index extends Component {
 
+  state = {
+    NavList: [
+      { name: '活动', id: 1 },
+      { name: '资讯', id: 2 }
+    ],
+    CurrentNavId: 1,
+    IsPull: false,
+    DataLock: false,
+    PageList: [],
+    PageData: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    HasNextPage: true
+  }
+
   componentWillMount () { }
 
   componentDidMount () { }
@@ -14,11 +34,17 @@ export default class Index extends Component {
 
   componentDidHide () { }
 
+  NavChange (e) {
+    console.log(e)
+  }
+
   render () {
+    const { CurrentNavId, DataLock, IsPull, NavList } = this.state
     return (
-      <View className='index'>
-        <Text>Hello world!</Text>
-      </View>
+      <view className='HuoDong flex-v'>
+        <NavHeader BgColor='none' Title='活动' IsFixed={true}></NavHeader>
+        <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} onChange={this.NavChange}></TabPageCutNav>
+      </view>
     )
   }
 }

src/pages/HuoDong/index.less

@@ -0,0 +1,69 @@
+.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;
+    .Content {
+      position: relative;
+      overflow: hidden;
+      &.Activity {
+        padding: 0 30px;
+        > .ListItem {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          background: #fff;
+          border-radius: 12px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}

src/pages/ShouYe/index.jsx

@@ -1,10 +1,43 @@
 import React, { Component } from 'react'
 import NavHeader from '../../components/NavHeader/index'
-import '../../app.less'
+import { Swiper, SwiperItem } from '@tarojs/components'
+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 },
+      { icon: 'iconfuli', name: '福利', id: 2 },
+      { icon: 'iconfuwu', name: '服务', id: 3 },
+      { icon: 'iconxinwen', name: '资讯', id: 4 }
+    ],
+    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 () { }
@@ -15,11 +48,149 @@ export default class Index extends Component {
 
   componentDidHide () { }
 
+  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>
+        <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="none">
+              <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>
+                            <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>热门活动</text>
+                        <text className='iconfont icongengduo'></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>查看全部</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;
+            }
+          }
+        }
+      }
+    }
+  }
+}