静态页面

src/pages/HuiAiXin/index.vue

@@ -1,30 +1,95 @@
 <template>
-  <view class="page">
-    明星业主
+  <view class="page HuiAiXin">
+    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">
+
+      <!-- banner -->
+      <view class="Banner">
+        <view>
+          <BannerSwiper></BannerSwiper>
+        </view>
+      </view>
+
+      <!-- 明星业主 -->
+      <view class="StarOwnerList">
+        <view class="flex-h">
+          <view class="flex-item">
+            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/mingxingyezhu.png"></image>
+          </view>
+          <navigator url="./StarOwner/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
+        </view>
+        <view class="ListContainer">
+          <scroll-view scroll-x="true">
+            <view class="List">
+              <navigator v-for="(item, index) in 10" :key="index" url="./StarOwner/StarOwnerDetail/index" hover-class="other-navigator-hover" class="Item">
+                <view class="Img"></view>
+                <text class="Info">业主家庭名称</text>
+              </navigator>
+            </view>
+            <view style="width: 100%; height: 20px;"></view>
+          </scroll-view>
+        </view>
+      </view>
+
+      <!-- 正能量事迹 -->
+      <view class="StoryList">
+        <view class="flex-h">
+          <view class="flex-item">
+            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/zhengnengliangshiji.png"></image>
+          </view>
+          <navigator url="./EnergyStory/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
+        </view>
+        <view class="List">
+          <navigator v-for="(item, index) in 20" :key="index" url="./EnergyStory/EnergyStoryDetail/index" hover-class="other-navigator-hover" class="Item flex-h">
+            <view class="flex-item">
+              <text>事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题事迹标题</text>
+              <text>副标题</text>
+              <text>来源</text>
+            </view>
+            <view class="Img">
+              <view></view>
+            </view>
+          </navigator>
+        </view>
+      </view>
+
+    </ScrollY>
   </view>
 </template>
 
 <script>
-
+import ScrollY from '../../components/ScrollY/index'
+import BannerSwiper from '../../components/BannerSwiper/index'
 export default {
-  name: 'StarOwner',
+  name: 'HuiAiXin',
   data () {
     return {
-
+      IsRefreshing: false,
+      DataLock: false
     }
   },
   components: {
+    ScrollY,
+    BannerSwiper
   },
   created () {
     this.Init()
   },
   methods: {
     Init () {
+    },
+    Refresh (e) {
+      if (this.DataLock) return
+      this.DataLock = true
+      this.IsRefreshing = true
+      setTimeout(() => {
+        this.IsRefreshing = false
+        this.DataLock = false
+      }, 1000)
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "page.scss";
 </style>

src/pages/HuiAiXin/page.scss

@@ -1,3 +1,159 @@
-.page {
+.page.HuiAiXin {
   width: 100%;
-}
+  height: 100%;
+  .Banner {
+    width: 100%;
+    padding-bottom: 38%;
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      background: #ccc;
+    }
+  }
+  .StarOwnerList {
+    padding: 20px 0;
+    background: #fff;
+    margin-top: 20px;
+    > .flex-h {
+      padding: 0 20px;
+      align-items: center;
+      margin-top: 10px;
+      > .flex-item {
+        > image {
+          height: 48px;
+        }
+      }
+      > .More {
+        font-size: 26px;
+        color: #999;
+        > text {
+          font-size: 26px;
+        }
+      }
+    }
+    > .ListContainer {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-top: 40px;
+      margin-bottom: 10px;
+      > scroll-view {
+        .List {
+          font-size: 0;
+          white-space: nowrap;
+          overflow: visible;
+          > .Item {
+            width: 80%;
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 25px;
+            border-radius: 20px;
+            box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.08);
+            &:last-child {
+              margin-right: 25px;
+            }
+            > .Img {
+              width: 100%;
+              padding-bottom: 45%;
+              background: #ccc;
+              position: relative;
+              overflow: hidden;
+            }
+            > .Info {
+              display: block;
+              padding: 0 34px;
+              font-size: 24px;
+              line-height: 70px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: #333;
+            }
+          }
+        }
+      }
+    }
+  }
+  .StoryList {
+    padding: 20px 0;
+    background: #fff;
+    margin-top: 20px;
+    > .flex-h {
+      padding: 0 20px;
+      align-items: center;
+      margin-top: 10px;
+      > .flex-item {
+        > image {
+          height: 48px;
+        }
+      }
+      > .More {
+        font-size: 26px;
+        color: #999;
+        > text {
+          font-size: 26px;
+        }
+      }
+    }
+    > .List {
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+      padding-left: 30px;
+      > .Item {
+        padding: 40px 0;
+        border-bottom: 2px solid #f5f5f5;
+        > .flex-item {
+          margin-right: 20px;
+          > text {
+            display: block;
+            font-size: 28px;
+            line-height: 40px;
+            overflow: hidden;
+            margin-top: 6px;
+            &:nth-child(1) {
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+              margin-top: 0;
+            }
+            &:nth-child(2) {
+              color: #666;
+              font-size: 24px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+            &:nth-child(3) {
+              color: #FE4E45;
+              font-size: 24px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > .Img {
+          width: 34%;
+          margin-right: 20px;
+          position: relative;
+          overflow: hidden;
+          > view {
+            width: 100%;
+            padding-bottom: 70%;
+            background: #ccc;
+            position: relative;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/HuiQuanYi/index.vue

@@ -1,21 +1,40 @@
 <template>
   <view class="page HuiQuanYi">
-    <!-- <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh"> -->
+    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">
 
       <!-- banner -->
-      <!-- <view class="Banner">
+      <view class="Banner">
         <view>
           <BannerSwiper></BannerSwiper>
         </view>
-      </view> -->
+      </view>
 
-    <!-- </ScrollY> -->
+      <!-- 业主资讯 -->
+      <view class="NewsList">
+        <view class="flex-h">
+          <view class="flex-item">
+            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/yezhuzixun.png"></image>
+          </view>
+          <navigator url="./OwnersNews/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
+        </view>
+        <view class="List">
+          <navigator v-for="(item, index) in 10" class="flex-h" :key="index" url="./OwnersNews/NewsDetail/index" hover-class="other-navigator-hover">
+            <view class="Num"><text>{{index + 1}}</text></view>
+            <view class="flex-item">
+              <text>资讯标题</text>
+              <text>1234</text>
+            </view>
+          </navigator>
+        </view>
+      </view>
+
+    </ScrollY>
   </view>
 </template>
 
 <script>
-// import ScrollY from '../../components/ScrollY/index'
-// import BannerSwiper from '../../components/BannerSwiper/index'
+import ScrollY from '../../components/ScrollY/index'
+import BannerSwiper from '../../components/BannerSwiper/index'
 export default {
   name: 'HuiQuanYi',
   data () {
@@ -25,8 +44,8 @@ export default {
     }
   },
   components: {
-    // ScrollY,
-    // BannerSwiper
+    ScrollY,
+    BannerSwiper
   },
   created () {
     this.Init()

src/pages/HuiQuanYi/page.scss

@@ -16,4 +16,118 @@
       background: #ccc;
     }
   }
+  .NewsList {
+    padding: 20px 0;
+    background: #fff;
+    margin-top: 20px;
+    > .flex-h {
+      padding: 0 20px;
+      align-items: center;
+      margin-top: 10px;
+      > .flex-item {
+        > image {
+          height: 48px;
+        }
+      }
+      > .More {
+        font-size: 26px;
+        color: #999;
+        > text {
+          font-size: 26px;
+        }
+      }
+    }
+    > .List {
+      position: relative;
+      overflow: hidden;
+      margin-top: 40px;
+      margin-bottom: 30px;
+      > .flex-h {
+        align-items: center;
+        &:nth-child(1) {
+          > .Num {
+            > text {
+              width: 40px;
+              text-align: center;
+              line-height: 40px;
+              display: inline-block;
+              border-radius: 100%;
+              background: #fe4e45;
+              color: #fff;
+              box-shadow: 0 10px 20px 5px rgba(254, 78, 69, 0.1);
+            }
+          }
+        }
+        &:nth-child(2) {
+          > .Num {
+            > text {
+              display: inline-block;
+              width: 40px;
+              text-align: center;
+              line-height: 40px;
+              display: inline-block;
+              border-radius: 100%;
+              background: #fe7e48;
+              color: #fff;
+              box-shadow: 0 10px 20px 5px rgba(254, 126, 72, 0.1);
+            }
+          }
+        }
+        &:nth-child(3) {
+          > .Num {
+            > text {
+              width: 40px;
+              text-align: center;
+              line-height: 40px;
+              display: inline-block;
+              border-radius: 100%;
+              background: #ffa93a;
+              color: #fff;
+              box-shadow: 0 10px 20px 5px rgba(255, 169, 58, 0.1);
+            }
+          }
+        }
+        > .Num {
+          width: 56px;
+          margin-left: 10px;
+          text-align: center;
+          font-size: 0;
+          height: 40px;
+          overflow: visible;
+          > text {
+            font-size: 24px;
+            color: #999;
+          }
+        }
+        > .flex-item {
+          padding: 20px 0;
+          margin-left: 10px;
+          border-bottom: 2px solid #f5f5f5;
+          font-size: 0;
+          white-space: nowrap;
+          > text {
+            display: inline-block;
+            vertical-align: middle;
+            max-width: 100%;
+            font-size: 28px;
+            line-height: 1.5;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            &:nth-child(1) {
+              max-width: 88%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            &:nth-child(2) {
+              color: #999;
+              width: 10%;
+              margin-left: 2%;
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/pages/WoDe/index.vue

@@ -1,6 +1,37 @@
 <template>
-  <view class="page">
-    我的
+  <view class="page WoDe">
+
+    <!-- 背景 -->
+    <view class="Bg">
+      <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodebeijingtu.png"></image>
+      <view class="centerLabel">
+        <view class="flex-h">
+          <view class="Icon">
+            <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/morentouxiang.png"></image>
+          </view>
+          <view class="flex-item">
+            <!-- <navigator url="../SignIn/index" hover-class="other-navigator-hover" class="SiginIn">立即登录</navigator> -->
+            <text>用户名</text>
+            <text>123456789</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- tab -->
+    <view class="TabList">
+      <navigator url="./MyActivityList/index" hover-class="other-navigator-hover" class="flex-h">
+        <view><image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon1.png"></image></view>
+        <text class="flex-item">我的报名</text>
+        <text class="iconfont iconjiantouright"></text>
+      </navigator>
+      <navigator url="./Feedback/index" hover-class="other-navigator-hover" class="flex-h">
+        <view><image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon2.png"></image></view>
+        <text class="flex-item">意见反馈</text>
+        <text class="iconfont iconjiantouright"></text>
+      </navigator>
+    </view>
+
   </view>
 </template>
 
@@ -25,6 +56,6 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "page.scss";
-</style>
+</style>

src/pages/WoDe/page.scss

@@ -1,3 +1,90 @@
-.page {
+.page.WoDe {
   width: 100%;
-}
+  height: 100%;
+  overflow-y: scroll;
+  background: #fff;
+  > .Bg {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    > image {
+      width: 100%;
+      display: block;
+      z-index: 1;
+      position: relative;
+    }
+    > .centerLabel {
+      width: 100%;
+      z-index: 2;
+      > view {
+        padding: 0 44px;
+        align-items: center;
+        > .Icon {
+          width: 122px;
+          height: 122px;
+          border-radius: 100%;
+          background: #fff;
+          position: relative;
+          overflow: hidden;
+          margin-right: 26px;
+          > image {
+            width: 100%;
+          }
+        }
+        > .flex-item {
+          > .SiginIn {
+            font-size: 32px;
+            font-weight: bold;
+            line-height: 40px;
+          }
+          > text {
+            display: block;
+            white-space: nowrap;
+            font-size: 32px;
+            font-weight: bold;
+            line-height: 40px;
+            &:nth-child(2) {
+              font-size: 24px;
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+  > .TabList {
+    padding-top: 54px;
+    border-radius: 28px 28px 0 0;
+    background: #fff;
+    z-index: 2;
+    margin-top: -54px;
+    position: relative;
+    padding-left: 40px;
+    > .flex-h {
+      align-items: center;
+      border-bottom: 2px solid #f5f5f5;
+      padding: 26px 0;
+      > view {
+        width: 60px;
+        margin-right: 20px;
+        font-size: 0;
+        > image {
+          height: 50px;
+          display: inline-block;
+        }
+      }
+      > .flex-item {
+        font-size: 28px;
+        line-height: 40px;
+        margin-right: 20px;
+        color: #333;
+      }
+      > .iconfont {
+        font-size: 26px;
+        color: #999;
+        margin-right: 20px;
+      }
+    }
+  }
+}