feats

src/pages/index/components/MenuItem/index.jsx

@@ -1,34 +1,26 @@
 import React, { useMemo } from 'react'
 import { View } from '@tarojs/components'
+import RatioItem from '@/components/RatioItem'
 
 import './style.less'
 
-let inx = 0;
-const colorList = [
-  '#d48806',
-  '#7cb305',
-  '#08979c',
-  '#096dd9',
-  '#531dab',
-  '#c41d7f',
-]
-
 export default (props) => {
-  const { title } = props;
-
-  const style = useMemo(() => {
-    const back = colorList[inx % 6];
-    inx += 1;
+  const { title, subtitle, desc, icon, ratio = '470:310' } = props;
 
+  const iconStyle = useMemo(() => {
     return {
-      background: back
+      background: `url(@/assets/${icon}.png)`
     }
-  }, [])
+  }, [icon])
 
   return (
-    <View className='index-menu-item weui-flex'>
-      <View className='index-menu-item-title weui-flex__item'>{title}</View>
-      <View className='index-menu-item-icon weui-flex__item' style={style}></View>
-    </View>
+    <RatioItem ratio={ratio}>
+      <View className='index-menu-item'>
+        <View className='index-menu-item-title'>{title}</View>
+        <View className='index-menu-item-subtitle'>{subtitle}</View>
+        <View className='index-menu-item-desc'>{desc}</View>
+        <View className='index-menu-item-icon' style={iconStyle}></View>
+      </View>
+    </RatioItem>
   )
 }

src/pages/index/components/MenuItem/style.less

@@ -1,19 +1,39 @@
+
+@index-menu-space: 16rpx;
+
 .index-menu-item {
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
-  padding: 16rpx;
-  border-radius: 12rpx;
-  background: rgba(0, 0, 0, 0.08);
+  padding: @index-menu-space;
+  border-radius: 24rpx;
+  background: #FBD802;
+  position: relative;
 
   .index-menu-item-title {
-    line-height: 64px;
+    font-size: 1.1em;
+    letter-spacing: 6px;
+    font-weight: bold;
+  }
+  
+  .index-menu-item-subtitle {
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  .index-menu-item-desc {
+    position: absolute;
+    left: @index-menu-space;
+    bottom: @index-menu-space;
+    line-height: 2em;
+    font-size: 16px;
+    letter-spacing: 2px;
   }
 
   .index-menu-item-icon {
-    flex: none;
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: #999;
+    position: absolute;
+    right: @index-menu-space;
+    bottom: @index-menu-space;
   }
 }

src/pages/index/index.jsx

@@ -15,10 +15,14 @@ import MenuItem from './components/MenuItem'
 
 import './style.less'
 
-const spaceStyle = {
+const pt16 = {
   paddingTop: '16px'
 }
 
+const ml16 = {
+  marginLeft: '16px'
+}
+
 export default (props) => {
 
   const banner = [
@@ -51,28 +55,35 @@ export default (props) => {
     }}
     >
       <View className='index-page-box'>
-          <View>
-            <Banner banner={banner} />
+        <View style={{ padding: '16px', boxSizing: 'border-box' }}>
+          <Banner banner={banner} />
+        </View>
+        <View className='border-card-group'>
+          <View class='weui-flex'>
+            <View class='weui-flex__item'>
+              <MenuItem title='办证申请' subtitle='Registration application' desc='您有1条办证申请记录' icon='dog' />
+            </View>
+            <View class='weui-flex__item' style={ml16}>
+              <MenuItem title='证件查看' subtitle='Certificate check' desc='您有1条办证申请记录' icon='certificate' />
+            </View>
+          </View>
+          <View class='weui-flex' style={pt16}>
+              <View class='weui-flex__item'>
+                <MenuItem title='个人中心' subtitle='Personal center' ratio='470:452' icon='personal' />
+              </View>
+              <View class='weui-flex__item' style={ml16}>
+                <MenuItem title='证件续期' subtitle='Certificate renewal' ratio='470:206' icon='renewal' />
+
+                <View style={pt16}>
+                  <MenuItem title='证件补办' subtitle='Replacement certificate' ratio='470:206' icon='repalcement' />
+                </View>
+              </View>
           </View>
-        <View style={spaceStyle}>
-          <Notice Notice={NoticeList} />
         </View>
 
-<View className='border-card-group'>
-  <View class='weui-flex'>
-        <View class='weui-flex__item'><MenuItem title='办证申请' /></View>
-        <View class='weui-flex__item' style={{ marginLeft: '16px' }}><MenuItem title='证件查看' /></View>
-    </View>
-  <View class='weui-flex' style={spaceStyle}>
-        <View class='weui-flex__item'><MenuItem title='证件续期' /></View>
-        <View class='weui-flex__item' style={{ marginLeft: '16px' }}><MenuItem title='挂失补办' /></View>
-    </View>
-  <View class='weui-flex' style={spaceStyle}>
-        <View class='weui-flex__item'><MenuItem title='消息通知' /></View>
-        <View class='weui-flex__item' style={{ marginLeft: '16px' }}><MenuItem title='个人中心' /></View>
-    </View>
-</View>
+        <View className='message-box'>
 
+        </View>
       </View>
     </ScrollView>
   )

src/pages/index/style.less

@@ -1,77 +1,13 @@
+@index-spaceing: 16PX;
+
 .index-page-box {
-  padding: 0 16PX;
-  box-sizing: border-box;
-  background: linear-gradient(180deg, #FBD804, transparent 75%);
+  background-color: #F7F8FC;
 }
 
 .border-card-group {
-  border-radius: 12px;
-  background: #fff;
-  padding: 16PX;
-  margin-top: 16PX;
-  border: 1px solid rgba(0,0,0, .1);
-  box-shadow: 0 5px 5px rgba(0,0,0, .1);
-}
-
-.haderBox {
-  width: 100vw;
-  height: 56vw;
-  margin: 0 auto;
-  background-color: #fff;
-  border-bottom-left-radius: 30px;
-  border-bottom-right-radius: 30px;
-}
-.FastEntry-Box {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 3vh 0 3vh 0;
-  &-content {
-    width: 42%;
-    height: 150px;
-    // border: 2px dashed red;
-    background-image: linear-gradient(to right, #fbd804, #ffe96ade);
-    border-radius: 10px;
-    padding: 15px;
-    > View {
-      font-weight: 700;
-      color: #fff;
-    }
-    > Image {
-      width: 80px;
-      height: 80px;
-      position: relative;
-      top: -15px;
-      left: 200px;
-    }
-  }
+  padding: @index-spaceing;
 }
-.Operation-box {
-  width: 100vw;
-  height: 50vw;
-  margin: 0 auto;
+.message-box {
   background-color: #fff;
-  border-bottom-left-radius: 30px;
-  border-bottom-right-radius: 30px;
-  &-header {
-    width: 95%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    padding: 2vh 0 2vh 0;
-    &-centent {
-      width: 38%;
-      height: 10vh;
-      // border: 1px solid #fbd804;
-      border: 1px solid #000;
-      display: flex;
-      align-items: center;
-      border-radius: 10px;
-      // > Image {
-      //   width: 60px;
-      //   height: 50px;
-      // }
-    }
-  }
-}
+  padding: @index-spaceing;
+}