静态页面

project.config.json

@@ -27,7 +27,7 @@
 			"outputPath": ""
 		},
 		"useIsolateContext": true,
-		"useCompilerModule": false,
+		"useCompilerModule": true,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",

src/assets/css/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8353259",
+      "name": "关  闭",
+      "font_class": "guanbi",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "11747664",
+      "name": "人气",
+      "font_class": "renqi",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "12542410",
+      "name": "点赞",
+      "font_class": "dianzan",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
     {
       "icon_id": "18609904",
       "name": "编 辑",

src/assets/css/iconfont.svg

@@ -20,6 +20,15 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="guanbi" unicode="&#58890;" d="M512-37.875C278.95608521-37.875 90.125 150.95608520999997 90.125 384S278.95608521 805.875 512 805.875s421.875-188.83108521 421.875-421.875-188.83108521-421.875-421.875-421.875z m0 803.56311035C301.73815917 765.68811036 130.31188964 594.2626647899999 130.31188964 384S301.73733521 2.311889640000004 512 2.311889640000004c210.26184083 0 381.68811036 171.42544555 381.68811036 381.68811036S722.26266479 765.68811036 512 765.68811036zM542.80841065 384l163.39910888 163.39828492c8.02716065 8.02798462 8.02716065 21.43157959 0 30.80841063l-1.35049438 1.32659913a21.02124023 21.02124023 0 0 1-29.45874023 0L512 414.80841065 348.60171508 578.20751953a21.02124023 21.02124023 0 0 1-29.45874023 0l-1.35049438-1.35049438c-8.02716065-8.02716065-8.02716065-21.43157959 0-30.80841065L481.19158935 384 317.79248047 220.60171507999996c-8.02716065-8.02798462-8.02716065-21.43157959 0-30.80841063l1.35049438-1.35049439a21.02124023 21.02124023 0 0 1 29.45874023 0L512 353.16687011l163.39828492-163.3982849a21.02124023 21.02124023 0 0 1 29.45874023 0l1.35049438 1.35049438c8.02716065 8.02716065 8.02716065 21.43157959 0 30.80841064L542.80841065 384z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="renqi" unicode="&#58910;" d="M857.11662529 451.5c-22.5 45-52.49999971 90-90 127.50000029-22.5 15.00000029-37.50000029 29.99999971-37.50000029 29.99999971s0-74.99999971-67.5-119.99999971h-7.49999971-7.50000058v7.49999971C654.61662529 646.50000029 579.61662471 781.50000029 437.116625 834 414.616625 654 242.11662471 609 174.61662471 466.50000029 129.61662471 368.99999971 122.116625 256.49999971 167.116625 159c37.50000029-90 112.5-157.5 202.5-195.00000029 45-22.5 90-29.99999971 142.49999971-29.99999971s97.49999971 7.49999971 142.50000058 29.99999971c45 15.00000029 82.50000029 45 119.99999971 82.50000029 74.99999971 67.5 112.5 157.5 112.5 254.99999971 0 52.49999971-7.49999971 105.00000029-29.99999971 150.00000029z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dianzan" unicode="&#58883;" d="M861.57115063 467.30320031L638.53484937 467.30320031c86.42396437 319.18519219-59.5468275 335.48741906-59.5468275 335.48741907-61.86845344 0-49.04290875-48.92107125-53.72165625-57.07650188 0-156.0957675-165.79671-278.41091719-165.79671-278.41091719l0-442.66115531c0-43.694535 59.5468275-59.43170531 82.90602938-59.43170531l335.11135406 0c31.53861656 0 57.22136438 82.7103225 57.22136438 82.7103225 82.90698937 281.91158438 82.90698937 365.79135375 82.90698937 365.79135375C917.61635188 471.95700469 861.57115063 467.30320031 861.57115063 467.30320031L861.57115063 467.30320031 861.57115063 467.30320031zM861.57115063 467.30320031M267.94195156 467.15641969L134.38898 467.15641969c-27.58129969 0-28.00629187-27.0901125-28.00629187-27.0901125l27.58129968-446.44003406c0-28.41497437 28.46390156-28.41497437 28.46390157-28.41497438L278.01895906-34.78870125000003c24.08063344 0 23.86765781 18.79653563 23.86765782 18.79653563L301.88661687 433.30193344C301.88661687 467.59004625 267.94195156 467.15641969 267.94195156 467.15641969L267.94195156 467.15641969 267.94195156 467.15641969zM267.94195156 467.15641969"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="xiugai" unicode="&#59205;" d="M368.13359375 247.74492186999998c15.89238281-15.89150391 40.98515625-15.89150391 56.04082031 0L861.62890625 685.19853516c15.89238281 15.89238281 15.89238281 40.98515625 0 56.87753906s-40.98515625 15.89238281-56.04082031 0L368.13359375 304.62246094c-15.89238281-15.89238281-15.89238281-40.98515625 0-56.87753907zM852.42675781 444.30703125c-21.74677734 0-40.1484375-17.56582031-40.1484375-40.1484375v-320.35341797h-600.55664062v600.55664063h320.35253906c21.74765625 0 39.31259766 17.56582031 40.1484375 40.1493164 0 21.74765625-17.56494141 40.1484375-39.31171875 40.1484375H171.57236328c-21.74677734 0-40.1484375-17.56494141-40.1484375-40.1484375v-680.85527343c0-10.87294922 4.18183594-20.9109375 11.70966797-28.43876954 7.52783203-7.52783203 17.56494141-11.70966797 28.43876953-11.70966796h680.85527344c10.87382813 0 20.9109375 4.18183594 28.43876953 11.70966796 7.52783203 7.52783203 11.70966797 17.56582031 11.70966797 28.43876954V404.15771484c0 22.58349609-18.40166016 40.1484375-40.1484375 40.1484375z"  horiz-adv-x="1024" />
 
     

src/pages/mine/components/EditUserDetailBasicInfo/index.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+import { ScrollView, Image, Input } from '@tarojs/components'
+
+export default function EditUserDetailBasicInfo (props) {
+  const { Data = {}, close = () => {} } = props
+
+  return (
+    <view className='components EditUserDetailBasicInfo'>
+      <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <text>姓名</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入姓名'></Input>
+            </view>
+          </view>
+
+          <text>昵称</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入昵称'></Input>
+            </view>
+          </view>
+
+          <text>手机号码</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入手机号码'></Input>
+            </view>
+          </view>
+
+          <text>性别</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>家庭住址</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入家庭住址'></Input>
+            </view>
+          </view>
+
+          <text>工作地址</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入工作地址'></Input>
+            </view>
+          </view>
+
+          <text>年龄段</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>职业</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入职业'></Input>
+            </view>
+          </view>
+
+          <text>家庭年收入范围</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>家庭成员数</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入家庭成员数'></Input>
+            </view>
+          </view>
+
+          <text>已有房产数</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入已有房产数'></Input>
+            </view>
+          </view>
+
+          <text>已有车辆数</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入已有车辆数'></Input>
+            </view>
+          </view>
+
+          <text>预计购房时间</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>客户咨询重点</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等；'></Input>
+            </view>
+          </view>
+
+          <text>购房动机</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>客户抗性分析</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等；'></Input>
+            </view>
+          </view>
+
+          <text>客户对项目认可点</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等；'></Input>
+            </view>
+          </view>
+
+          <text>备注</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='补充说明（选填）'></Input>
+            </view>
+          </view>
+
+          <view className='Btn'>
+            <text onClick={close}>提交</text>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/EditUserDetailBasicInfo/index.scss

@@ -0,0 +1,67 @@
+.components.EditUserDetailBasicInfo {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 24px 24px 0 0;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+      > text {
+        font-size: 34px;
+        font-weight: bold;
+        color: #333;
+        display: block;
+        text-indent: 40px;
+        margin-top: 30px;
+      }
+      > .flex-h {
+        padding: 20px 40px;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+        margin-top: 10px;
+        align-items: center;
+        >view {
+          > input {
+            display: block;
+            width: 100%;
+            background: none;
+            font-size: 26px;
+            line-height: 40px;
+            height: 40px;
+          }
+          >text {
+            display: block;
+            width: 100%;
+            background: none;
+            font-size: 26px;
+            line-height: 40px;
+            height: 40px;
+          }
+        }
+        >text {
+          font-size: 30px;
+        }
+      }
+      .Btn {
+        padding: 40px;
+        position: relative;
+        overflow: hidden;
+        >text {
+          display: block;
+          text-align: center;
+          font-size: 32px;
+          line-height: 92px;
+          background: #193C83;
+          color: #fff;
+          font-weight: bold;
+          border-radius: 92px;
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/UserDetailBasicInfo/index.jsx

@@ -2,10 +2,11 @@ import React, { useState, useEffect } from 'react'
 import './index.scss'
 import Taro from '@tarojs/taro'
 import { ScrollView, Image } from '@tarojs/components'
+import EditUserDetailBasicInfo from '../EditUserDetailBasicInfo/index'
 
 export default function UserDetailBasicInfo (props) {
   const { Data = {} } = props
-  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [ShowEditPopup, setShowEditPopup] = useState(false)
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
@@ -34,8 +35,8 @@ export default function UserDetailBasicInfo (props) {
               <view className='flex-item'>
                 <text>范丞丞</text>
               </view>
-              <text className='iconfont icon-xiugai active'></text>
-              <text className='active'>修改</text>
+              <text className='iconfont icon-xiugai active' onClick={() => {setShowEditPopup(true)}}></text>
+              <text className='active' onClick={() => {setShowEditPopup(true)}}>修改</text>
             </view>
             <view className='flex-h'>
               <text>昵称</text>
@@ -165,6 +166,16 @@ export default function UserDetailBasicInfo (props) {
 
         </view>
       </ScrollView>
+      {
+        ShowEditPopup &&
+        <view className='EditUserInfo'>
+          <view>
+            <view>
+              <EditUserDetailBasicInfo close={() => {setShowEditPopup(false)}}></EditUserDetailBasicInfo>
+            </view>
+          </view>
+        </view>
+      }
     </view>
   )
 }

src/pages/mine/components/UserDetailBasicInfo/index.scss

@@ -80,4 +80,26 @@
       }
     }
   }
+  >.EditUserInfo {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.6);
+    >view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      top: 60px;
+      >view{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+      }
+    }
+  }
 }

src/pages/mine/customerDetail/index.scss

@@ -8,6 +8,7 @@
     padding: 0 30px;
     position: relative;
     overflow: hidden;
+    z-index: 1;
     >view {
       width: 100%;
       position: relative;
@@ -117,7 +118,7 @@
   >.MenuList {
     position: relative;
     overflow: hidden;
-    z-index: 2;
+    z-index: 1;
     padding: 0 50px;
     margin-top: 10px;
     >view {

src/pages/mine/mortgageCalc/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '房贷计算器'
+}

src/pages/mine/mortgageCalc/index.jsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView, Input } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+
+  return (
+    <view className='Page mortgageCalc'>
+
+      <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <text>房产总价/万元</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入房产总额'></Input>
+            </view>
+          </view>
+
+          <text>首付比例</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>首付金额/万元</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入首付金额/万元'></Input>
+            </view>
+          </view>
+
+          <text>商业贷款/万元</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入商业贷款/万元'></Input>
+            </view>
+          </view>
+
+          <text>贷款年限</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <slider min="10" max="30" show-value activeColor='#193C83' />
+            </view>
+          </view>
+
+          <text>商业贷款利率</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <view className='Agree'>
+            <text className='iconfont icon-gou'></text>
+            <text>使用公积金贷款</text>
+          </view>
+
+          <view className='Btn'>
+            <text>计算</text>
+          </view>
+
+        </view>
+      </ScrollView>
+
+    </view>
+  )
+})

src/pages/mine/mortgageCalc/index.scss

@@ -0,0 +1,87 @@
+.Page.mortgageCalc {
+  background: #fff;
+  height: 100vh;
+  width: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+      > text {
+        font-size: 34px;
+        font-weight: bold;
+        color: #333;
+        display: block;
+        text-indent: 40px;
+        margin-top: 30px;
+      }
+      > .flex-h {
+        padding: 20px 40px;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+        margin-top: 10px;
+        align-items: center;
+        >view {
+          > input {
+            display: block;
+            width: 100%;
+            background: none;
+            font-size: 26px;
+            line-height: 40px;
+            height: 40px;
+          }
+          >text {
+            display: block;
+            width: 100%;
+            background: none;
+            font-size: 26px;
+            line-height: 40px;
+            height: 40px;
+          }
+        }
+        >text {
+          font-size: 30px;
+        }
+      }
+      >.Agree {
+        font-size: 0;
+        white-space: nowrap;
+        padding: 0 30px;
+        >text {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 30px;
+          font-weight: bold;
+          color: #333;
+          line-height: 1;
+          margin-top: 40px;
+          &.iconfont {
+            font-weight: normal;
+            margin-right: 10px;
+            color: #ccc;
+            &.active {
+              color: #193C83;
+            }
+          }
+        }
+      }
+      .Btn {
+        padding: 40px;
+        position: relative;
+        overflow: hidden;
+        margin-top: 80px;
+        >text {
+          display: block;
+          text-align: center;
+          font-size: 32px;
+          line-height: 92px;
+          background: #193C83;
+          color: #fff;
+          font-weight: bold;
+          border-radius: 92px;
+        }
+      }
+    }
+  }
+}

src/pages/mine/myHomepage/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '个人主页'
+}

src/pages/mine/myHomepage/index.jsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView, Image } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+import ProjectListItem from '../../../components/ProjectListItem/index'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [PageList, setPageList] = useState(['', ''])
+  const [IsPull, setPull] = useState(false)
+  const [ShowPopup, setShowPopup] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page myHomepage'>
+
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <view className='Card UserInfo'>
+            <view className='flex-h Top'>
+              <view className='Icon'>
+                <Image mode='aspectFill' src={null}></Image>
+              </view>
+              <view className='flex-item'>
+                <view className='flex-h'>
+                  <view className='flex-item'>
+                    <text>陆毅 13045678976</text>
+                  </view>
+                  <text className='iconfont icon-dianzan'></text>
+                  <text>23赞</text>
+                </view>
+                <view className='Tag'>
+                  <view>
+                    <Image mode='heightFix' src={require('../../../assets/mine-icon28.png')}></Image>
+                    <text>金牌置业顾问</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view className='Work flex-h'>
+              <view className='flex-item'>
+                <text>营销</text>
+                <text>部门</text>
+              </view>
+              <view className='flex-item'>
+                <text>营销经理</text>
+                <text>职位</text>
+              </view>
+              <view className='flex-item'>
+                <text>香颂·蔚澜半岛</text>
+                <text>楼盘</text>
+              </view>
+            </view>
+            <view className='Hot flex-h'>
+              <view className='flex-item'>
+                {
+                  ['', '', '', '', '', ''].map((item, index) => (
+                    <view key={`UserItem-${index}`}>
+                      <Image mode='aspectFill' src={null}></Image>
+                    </view>
+                  ))
+                }
+              </view>
+              <text className='iconfont icon-renqi'></text>
+              <text>人气值6</text>
+            </view>
+          </view>
+
+          <view className='Card DetailInfo'>
+            <text className='Title'>详细信息</text>
+            <view className='flex-h'>
+              <text className='iconfont icon-dianhua'></text>
+              <text>手机：</text>
+              <view className='flex-item'>
+                <text>136 1394 9434</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text className='iconfont icon-dingwei'></text>
+              <text>地址：</text>
+              <view className='flex-item'>
+                <text>江苏省南京市雨花台区汇智大厦</text>
+              </view>
+            </view>
+            <view className='Btn'>
+              <text>分享主页</text>
+            </view>
+          </view>
+
+          <view className='ProjectList'>
+            <view className='flex-h'>
+              <view className='flex-item'>
+                <text>项目信息</text>
+              </view>
+              <text>更多</text>
+              <text className='iconfont icon-jiantouright'></text>
+            </view>
+            <view className='List'>
+              {
+                PageList.map((item, index) => (
+                  <ProjectListItem key={`ListItem-${index}`} data={item}></ProjectListItem>
+                ))
+              }
+            </view>
+          </view>
+
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+
+          <view className='Share'>
+            <text onClick={() => {setShowPopup(true)}}>生成海报分享好友</text>
+          </view>
+
+        </view>
+      </ScrollView>
+
+      {
+        ShowPopup &&
+        <view className='SharePopup'>
+          <view>
+            <view className='flex-v'>
+              <view className='Top flex-h'>
+                <view className='flex-item'>
+                  <text>保存后分享图片</text>
+                </view>
+                <text className='iconfont icon-guanbi' onClick={() => {setShowPopup(false)}}></text>
+              </view>
+              <view className='flex-item'>
+                <view>
+                  <view>
+                    <Image className='centerLabel' mode='aspectFill' src={null}></Image>
+                  </view>
+                </view>
+              </view>
+              <view className='Btn'>
+                <text>保存海报</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      }
+
+    </view>
+  )
+})

src/pages/mine/myHomepage/index.scss

@@ -0,0 +1,352 @@
+.Page.myHomepage {
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: visible;
+      min-height: 100vh;
+      padding: 0 30px;
+      > .Card {
+        position: relative;
+        overflow: hidden;
+        background: #fff;
+        border-radius: 16px;
+        box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+        margin-top: 40px;
+        padding: 30px;
+        &.UserInfo {
+          > .Top {
+            align-items: center;
+            > .Icon {
+              width: 138px;
+              height: 138px;
+              position: relative;
+              overflow: hidden;
+              border-radius: 100%;
+              background: #eee;
+              margin-right: 20px;
+              > image {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            > .flex-item {
+              > .flex-h {
+                align-items: center;
+                > .flex-item {
+                  > text {
+                    display: block;
+                    font-size: 34px;
+                    line-height: 1;
+                    font-weight: bold;
+                    color: #333;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+                > text {
+                  font-size: 24px;
+                  color: #333;
+                  line-height: 1;
+                  &.iconfont {
+                    font-size: 34px;
+                    color: #fccb34;
+                    margin-right: 6px;
+                    margin-left: 10px;
+                  }
+                }
+              }
+              > .Tag {
+                font-size: 0;
+                white-space: nowrap;
+                > view {
+                  display: inline-block;
+                  font-size: 0;
+                  white-space: nowrap;
+                  padding: 0 10px;
+                  position: relative;
+                  overflow: hidden;
+                  background: #f8f8f8;
+                  margin-top: 30px;
+                  > image {
+                    display: inline-block;
+                    vertical-align: middle;
+                    height: 36px;
+                  }
+                  > text {
+                    display: inline-block;
+                    vertical-align: middle;
+                    font-size: 24px;
+                    line-height: 44px;
+                    margin-left: 10px;
+                  }
+                }
+              }
+            }
+          }
+          > .Work {
+            border-top: 2px solid rgba(0, 0, 0, 0.08);
+            position: relative;
+            margin-top: 30px;
+            padding-top: 30px;
+            > view {
+              position: relative;
+              overflow: hidden;
+              text-align: center;
+              &::before {
+                content: "";
+                width: 2px;
+                height: 100%;
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 0;
+                background: rgba(0, 0, 0, 0.08);
+              }
+              &:first-child {
+                &::before {
+                  display: none;
+                }
+              }
+              > text {
+                display: block;
+                text-align: center;
+                font-size: 24px;
+                color: #999;
+                line-height: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:first-child {
+                  font-weight: bold;
+                  font-size: 28px;
+                  color: #333;
+                  margin-bottom: 30px;
+                }
+              }
+            }
+          }
+          > .Hot {
+            align-items: center;
+            margin-top: 30px;
+            > .flex-item {
+              position: relative;
+              overflow: hidden;
+              font-size: 0;
+              white-space: nowrap;
+              > view {
+                display: inline-block;
+                vertical-align: middle;
+                width: 36px;
+                height: 36px;
+                position: relative;
+                overflow: hidden;
+                border-radius: 100%;
+                background: #eee;
+                margin-left: 20px;
+                &:first-child {
+                  margin-left: 0;
+                }
+                > image {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
+            > text {
+              font-size: 24px;
+              color: #333;
+              &.iconfont {
+                font-size: 44px;
+                color: #ff8c1f;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+        &.DetailInfo {
+          > .Title {
+            display: block;
+            font-size: 34px;
+            color: #333;
+            font-weight: bold;
+          }
+          > .flex-h {
+            align-items: center;
+            margin-top: 30px;
+            > text {
+              font-size: 30px;
+              color: #333;
+              line-height: 1;
+              &.iconfont {
+                color: #193c83;
+                margin-right: 10px;
+              }
+            }
+            > .flex-item {
+              position: relative;
+              overflow: hidden;
+              > text {
+                display: block;
+                font-size: 30px;
+                color: #333;
+                line-height: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+          > .Btn {
+            margin-top: 40px;
+            > text {
+              display: block;
+              text-align: center;
+              font-size: 32px;
+              line-height: 92px;
+              border-radius: 92px;
+              color: #333;
+              font-weight: bold;
+              background: #f2f2f2;
+            }
+          }
+        }
+      }
+      > .ProjectList {
+        margin-top: 40px;
+        position: relative;
+        overflow: hidden;
+        > .flex-h {
+          align-items: center;
+          > .flex-item {
+            > text {
+              display: block;
+              font-size: 34px;
+              font-weight: bold;
+              color: #333;
+              line-height: 1;
+            }
+          }
+          > text {
+            font-size: 24px;
+            color: #333;
+            line-height: 1;
+            &.iconfont {
+              margin-left: 4px;
+            }
+          }
+        }
+        > .List {
+          > view {
+            margin-top: 30px;
+          }
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+      > .Share {
+        margin: 60px auto;
+        > text {
+          display: block;
+          font-size: 32px;
+          color: #fff;
+          font-weight: bold;
+          line-height: 92px;
+          background: #193c83;
+          border-radius: 92px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  > .SharePopup {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 1000;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 156px;
+      bottom: 0;
+      > view {
+        background: #fff;
+        border-radius: 40px 40px 0 0;
+        position: relative;
+        overflow: hidden;
+        padding: 0 30px;
+        height: 100%;
+        > .Top {
+          align-items: center;
+          margin-top: 30px;
+          > .flex-item {
+            > text {
+              display: block;
+              font-size: 30px;
+              color: #333;
+              font-weight: bold;
+            }
+          }
+          > text {
+            font-size: 34px;
+          }
+        }
+        > .flex-item {
+          position: relative;
+          overflow: hidden;
+          margin-top: 30px;
+          >view {
+            width: 440px;
+            position: relative;
+            overflow: hidden;
+            margin: 0 auto;
+            >view {
+              width: 100%;
+              padding-bottom: 180%;
+              position: relative;
+              overflow: hidden;
+              background: #eee;
+              >image {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+        > .Btn {
+          margin-bottom: 30px;
+          margin-top: 30px;
+          > text {
+            display: block;
+            text-align: center;
+            font-size: 32px;
+            color: #fff;
+            font-weight: bold;
+            line-height: 92px;
+            background: #193c83;
+            border-radius: 92px;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/tabData.js

@@ -9,7 +9,7 @@ const MineMenuList = {
       { name: '我的收藏', icon: require('../../assets/mine-icon13.png'), router: '/pages/mine/myCollect/index' }
     ],
     [
-      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '' },
+      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '/pages/mine/mortgageCalc/index' },
       { name: '购房百科', icon: require('../../assets/mine-icon2.png'), router: '/pages/index/encyclopediasOfBuyHouse/index' },
       { name: '意见反馈', icon: require('../../assets/mine-icon16.png'), router: '/pages/mine/feedBack/index' }
     ]
@@ -27,7 +27,7 @@ const MineMenuList = {
       { name: '我的收藏', icon: require('../../assets/mine-icon13.png'), router: '/pages/mine/myCollect/index' }
     ],
     [
-      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '' },
+      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '/pages/mine/mortgageCalc/index' },
       { name: '购房百科', icon: require('../../assets/mine-icon2.png'), router: '/pages/index/encyclopediasOfBuyHouse/index' },
       { name: '意见反馈', icon: require('../../assets/mine-icon16.png'), router: '/pages/mine/feedBack/index' }
     ]
@@ -35,7 +35,7 @@ const MineMenuList = {
   Adviser: [ // 置业顾问
     [
       { name: '添加客户', icon: require('../../assets/mine-icon7.png'), router: '/pages/mine/addCustomer/index' },
-      { name: '我的主页', icon: require('../../assets/mine-icon15.png'), router: '' },
+      { name: '我的主页', icon: require('../../assets/mine-icon15.png'), router: '/pages/mine/myHomepage/index' },
       { name: '我的推广码', icon: require('../../assets/mine-icon14.png'), router: '' },
       { name: '客户分析', icon: require('../../assets/mine-icon5.png'), router: '/pages/mine/customerAnalyse/index' },
       { name: '盘客工具', icon: require('../../assets/mine-icon6.png'), router: '/pages/mine/statCustomer/index' }
@@ -47,7 +47,7 @@ const MineMenuList = {
       { name: '我的收藏', icon: require('../../assets/mine-icon13.png'), router: '/pages/mine/myCollect/index' }
     ],
     [
-      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '' },
+      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '/pages/mine/mortgageCalc/index' },
       { name: '购房百科', icon: require('../../assets/mine-icon2.png'), router: '/pages/index/encyclopediasOfBuyHouse/index' },
       { name: '意见反馈', icon: require('../../assets/mine-icon16.png'), router: '/pages/mine/feedBack/index' }
     ]
@@ -64,7 +64,7 @@ const MineMenuList = {
       { name: '我的收藏', icon: require('../../assets/mine-icon13.png'), router: '/pages/mine/myCollect/index' }
     ],
     [
-      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '' },
+      { name: '房贷计算器', icon: require('../../assets/mine-icon4.png'), router: '/pages/mine/mortgageCalc/index' },
       { name: '购房百科', icon: require('../../assets/mine-icon2.png'), router: '/pages/index/encyclopediasOfBuyHouse/index' },
       { name: '意见反馈', icon: require('../../assets/mine-icon16.png'), router: '/pages/mine/feedBack/index' }
     ]

src/routes.js

@@ -248,6 +248,18 @@ const routes = [
     pkg: 'main',
     type: 'mine',
   },
+  {
+    name: '房贷计算器',
+    page: 'pages/mine/mortgageCalc/index',
+    pkg: 'main',
+    type: 'mine',
+  },
+  {
+    name: '个人主页',
+    page: 'pages/mine/myHomepage/index',
+    pkg: 'main',
+    type: 'mine',
+  },
   {
     name: '意见反馈',
     page: 'pages/mine/feedBack/index',