静态页面

src/pages/index/components/IndexBanner/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Swiper, SwiperItem, Image } from '@tarojs/components'
+
+export default function IndexBanner (props) {
+  const { List = [] } = props
+  return (
+    <view className='components IndexBanner'>
+      <Swiper autoplay={true} interval={2000} indicator-dots={true}>
+        {
+          List.map((item, index) => (
+            <SwiperItem key={`Banner-${index}`}>
+              <view className="swiper-item">
+                {
+                  item.img &&
+                  <Image mode='aspectFill' className='centerLabel' src={item.img || null} />
+                }
+              </view>
+            </SwiperItem>
+          ))
+        }
+      </Swiper>
+    </view>
+  )
+}

src/pages/index/components/IndexBanner/index.scss

+.components.IndexBanner {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background: #ccc;
+  position: relative;
+  overflow: hidden;
+  > swiper {
+    width: 100%;
+    height: 100%;
+    .swiper-item {
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/pages/index/components/IndexColumnTitle/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+
+export default function IndexColumnTitle (props) {
+  const { Icon = '', Name = '', ToMore = () => { }, children } = props
+  return (
+    <view className='components IndexColumnTitle flex-h'>
+      <text className={`iconfont ${Icon}`}></text>
+      <text className='Name'>{Name}</text>
+      {
+        children
+      }
+      <view className='flex-item'></view>
+      <view className='More' onClick={ToMore}>
+        <text>更多</text>
+        <text className='iconfont'></text>
+      </view>
+    </view>
+  )
+}

src/pages/index/components/IndexColumnTitle/index.scss

+.components.IndexColumnTitle {
+  align-items: center;
+  padding: 0 30px;
+  margin-top: 30px;
+  > text {
+    font-size: 32px;
+    font-weight: bold;
+    color: #000;
+    line-height: 40px;
+  }
+  > .More {
+    white-space: nowrap;
+    font-size: 0;
+    > text {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 24px;
+      line-height: 40px;
+    }
+  }
+}

src/pages/index/components/IndexHotActivity/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function IndexHotActivity (props) {
+  const { List = [] } = props
+  return (
+    <view className='components IndexHotActivity'>
+      <ScrollView scroll-x={true}>
+        <view className='Content'>
+          {
+            List.map((item, index) => (
+              <view className={`IndexHotActivity-${index}`}>
+                <view>
+                  {
+                    item.img &&
+                    <Image mode='aspectFill' className='centerLabel' src={item.img || null} />
+                  }
+                </view>
+              </view>
+            ))
+          }
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/index/components/IndexHotActivity/index.scss

+.components.IndexHotActivity {
+  margin-top: 30px;
+  .Content {
+    position: relative;
+    font-size: 0;
+    white-space: nowrap;
+    > view {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 30px;
+      width: calc((100vw - 90px) / 2);
+      position: relative;
+      &:first-child {
+        margin-left: 30px;
+      }
+      > view {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 56.25%;
+        background: #ccc;
+        height: 0;
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

src/pages/index/components/IndexMenu/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Image } from '@tarojs/components'
+
+export default function IndexMenu (props) {
+  const { List = [] } = props
+  return (
+    <view className='components IndexMenu'>
+
+      {/* tab */}
+      <view className='Tab flex-h'>
+        <view>
+          <text className='active'>住宅</text>
+        </view>
+        <view>
+          <text>文旅</text>
+        </view>
+        <view>
+          <text>商办</text>
+        </view>
+        <view>
+          <text>康养</text>
+        </view>
+      </view>
+
+      {/* menu */}
+      <view className='MenuList'>
+        {
+          List.map((item, index) => (
+            <view className='MenuItem' key={`MenuItem-${index}`}>
+              <view className='Img'>
+                {
+                  item.img &&
+                  <Image mode='aspectFit' className='centerLabel' src={item.img || null} />
+                }
+              </view>
+              <view className='Name'>菜单名称</view>
+            </view>
+          ))
+        }
+      </view>
+
+    </view>
+  )
+}

src/pages/index/components/IndexMenu/index.scss

+.components.IndexMenu {
+  padding: 0 20px;
+  position: relative;
+  overflow: hidden;
+  > .Tab {
+    border-bottom: 2px solid #eee;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    > view {
+      flex: 5;
+      -webkit-flex: 5;
+      text-align: center;
+      font-size: 0;
+      position: relative;
+      overflow: hidden;
+      &::after {
+        content: "";
+        display: block;
+        height: 40px;
+        width: 2px;
+        top: 50%;
+        left: 0;
+        position: absolute;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        background: #eee;
+      }
+      &:first-child {
+        text-align: left;
+        flex: 3;
+        -webkit-flex: 3;
+        &::after {
+          display: none;
+        }
+      }
+      &:last-child {
+        text-align: right;
+        flex: 3;
+        -webkit-flex: 3;
+      }
+      > text {
+        display: inline-block;
+        font-size: 32px;
+        position: relative;
+        line-height: 80px;
+        &.active {
+          font-weight: bold;
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+            height: 4px;
+            width: 100%;
+            background: blue;
+          }
+        }
+      }
+    }
+  }
+  > .MenuList {
+    position: relative;
+    overflow: hidden;
+    font-size: 0;
+    padding-bottom: 30px;
+    > view {
+      display: inline-block;
+      vertical-align: middle;
+      width: 20%;
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      margin-top: 30px;
+      > .Img {
+        width: 90px;
+        height: 90px;
+        position: relative;
+        overflow: hidden;
+        background: #ccc;
+        margin: 0 auto;
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      > .Name {
+        text-align: center;
+        font-size: 28px;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 6px;
+      }
+    }
+  }
+}

src/pages/index/components/SubBanner/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Swiper, SwiperItem, Image } from '@tarojs/components'
+
+export default function SubBanner (props) {
+  const { List = [] } = props
+  return (
+    <view className='components SubBanner'>
+      <Swiper autoplay={true} interval={2000} indicator-dots={true}>
+        {
+          List.map((item, index) => (
+            <SwiperItem key={`Banner-${index}`}>
+              <view className="swiper-item">
+                {
+                  item.img &&
+                  <Image mode='aspectFill' className='centerLabel' src={item.img || null} />
+                }
+              </view>
+            </SwiperItem>
+          ))
+        }
+      </Swiper>
+    </view>
+  )
+}

src/pages/index/components/SubBanner/index.scss

+.components.SubBanner {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background: #ccc;
+  position: relative;
+  overflow: hidden;
+  > swiper {
+    width: 100%;
+    height: 100%;
+    .swiper-item {
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}