我的&设置

package.json

@@ -26,6 +26,7 @@
     "@megalo/eslint-config-standard": "latest",
     "@megalo/target": "latest",
     "@megalo/template-compiler": "latest",
+    "@vant/area-data": "^1.1.1",
     "@vue/eslint-config-prettier": "^5.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^5.15.3",

project.config.json

@@ -1,96 +1,102 @@
 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": []
-  },
-  "setting": {
-    "urlCheck": false,
-    "es6": true,
-    "enhance": false,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": true,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": false,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "description": "项目配置文件",
+    "packOptions": {
+        "ignore": []
     },
-    "enableEngineNative": false,
-    "bundle": false,
-    "useIsolateContext": true,
-    "useCompilerModule": true,
-    "userConfirmedUseCompilerModuleSwitch": false,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.16.1",
-  "appid": "wx47bde0e3d49633b4",
-  "projectname": "%E5%8D%A1%E7%89%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F",
-  "cloudfunctionTemplateRoot": "",
-  "watchOptions": {
-    "ignore": []
-  },
-  "debugOptions": {
-    "hidedInDevtools": []
-  },
-  "scripts": {},
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "miniprogramRoot": "dist-wechat/",
-  "condition": {
-    "search": {
-      "list": []
-    },
-    "conversation": {
-      "list": []
-    },
-    "plugin": {
-      "list": []
+    "setting": {
+        "urlCheck": false,
+        "es6": true,
+        "enhance": false,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": true,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": false,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "bundle": false,
+        "useIsolateContext": true,
+        "useCompilerModule": true,
+        "userConfirmedUseCompilerModuleSwitch": false,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true
     },
-    "game": {
-      "list": []
+    "compileType": "miniprogram",
+    "libVersion": "2.16.1",
+    "appid": "wx47bde0e3d49633b4",
+    "projectname": "%E5%8D%A1%E7%89%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F",
+    "cloudfunctionTemplateRoot": "",
+    "watchOptions": {
+        "ignore": []
     },
-    "gamePlugin": {
-      "list": []
+    "debugOptions": {
+        "hidedInDevtools": []
     },
-    "miniprogram": {
-      "list": [
-        {
-          "id": -1,
-          "name": "消息",
-          "pathName": "/pages/news",
-          "scene": null
+    "scripts": {},
+    "simulatorType": "wechat",
+    "simulatorPluginLibVersion": {},
+    "miniprogramRoot": "dist-wechat/",
+    "condition": {
+        "search": {
+            "list": []
+        },
+        "conversation": {
+            "list": []
+        },
+        "plugin": {
+            "list": []
+        },
+        "game": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "聊天页面",
-          "pathName": "/pages/chat",
-          "scene": null
+        "gamePlugin": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "我的",
-          "pathName": "/pages/mine",
-          "scene": null
+        "miniprogram": {
+            "list": [
+                {
+                    "id": -1,
+                    "name": "消息",
+                    "pathName": "/pages/news",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "聊天页面",
+                    "pathName": "/pages/chat",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我的",
+                    "pathName": "/pages/mine",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "个人设置",
+                    "pathName": "/pages/setting",
+                    "scene": null
+                }
+            ]
         }
-      ]
     }
-  }
-}
+}

src/main.js

@@ -39,7 +39,8 @@ export default {
             'pages/details',
             'pages/news',
             'pages/order',
-            'pages/chat'
+            'pages/chat',
+            'pages/setting'
         ],
         tabBar: {
             color: '#7E7E80',

src/mixins/common.js

@@ -43,6 +43,11 @@ export default {
                     }
                 });
             });
+        },
+        phoneCall(phone = '18366668888') {
+            wx.makePhoneCall({
+                phoneNumber: phone
+            });
         }
     }
 };

src/native/svgs/img_defaultphoto.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="91px" height="90px" viewBox="0 0 91 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>img_defaultphoto</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-19.000000, -79.000000)">
+            <g id="路径" transform="translate(20.000000, 79.000000)">
+                <path d="M0,45 C0,69.8528137 20.1471863,90 45,90 C69.8528137,90 90,69.8528137 90,45 C90,20.1471863 69.8528137,0 45,0 C20.1471863,0 0,20.1471863 0,45 Z" fill="#F5F7FA"></path>
+                <path d="M56.818421,36.5625 C65.255921,25.0904605 63.6276315,44.1118421 55.7822369,44.8519736 C43.4220395,48.9226973 56.8184211,36.5625 56.818421,36.5625 Z" fill="#FBEBE8" fill-rule="nonzero"></path>
+                <path d="M34.1732602,36.5198676 C42.6107602,25.0478281 40.9824707,44.0692097 33.1370761,44.8093412 C20.7768787,48.8800648 34.1732603,36.5198676 34.1732602,36.5198676 Z" fill="#FBEBE8" fill-rule="nonzero" transform="translate(33.850935, 39.240991) scale(-1, 1) translate(-33.850935, -39.240991) "></path>
+                <path d="M34.0460526,45.2220395 C34.5184998,48.6463872 35.3540795,55.0852562 29.5334933,61.2917924 C23.7129071,67.4983286 45.1480263,75.3453947 45.1480264,75.3453947 C45.1480264,75.3453947 63.2108459,68.6222189 64.2470301,65.4396531 C70.6121618,60.0366926 53.308017,65.4396531 57.0641447,45.8141447 C48.7746711,40.5592105 34.0460526,45.2220395 34.0460526,45.2220395 Z" fill="#FFF0ED" fill-rule="nonzero"></path>
+                <path d="M34.9759826,48.3024871 C35.9098159,51.2002195 48.7305942,63.2776805 60.4382916,60.3171543 C55.73536,55.5666254 56.2826351,50.1405726 57.65625,44.8519736 C58.4650658,43.0756579 50.9049766,44.225829 34.9759826,48.3024871 Z" fill="#F3E6E4" fill-rule="nonzero"></path>
+                <path d="M45,90 C61.3835526,90 75.718421,81.242171 83.5880921,68.1548684 C83.5869079,68.1341447 83.5869079,68.1110526 83.5851316,68.0921053 C81.3155921,64.6383553 65.7230921,59.4076974 59.6048684,59.4076974 C47.0290607,78.2761042 30.96574,63.5659588 30.96574,59.4076974 C22.5843396,59.0693014 12.6888158,65.1446053 7.02,69.1229605 C15.0063158,81.669079 29.0255921,90 45,90 Z" fill="#FA964C"></path>
+                <path d="M45.7282895,14.8026316 C50.5391447,15.6907895 57.2743421,16.1348685 58.1625,22.8700658 C67.562171,62.0970394 25.5226974,67.5740131 30.9256579,26.4226974 C33.6641447,11.8421053 45.7282895,14.8026316 45.7282895,14.8026316 Z" fill="#FFF4F4"></path>
+                <path d="M35.1296053,20.131579 C37.7354605,21.9078947 42.9963158,27.7300658 55.7514474,24.868421 C56.8432895,29.1120394 56.2973684,29.1120394 59.2501974,33.6019736 C61.4090131,34.3421053 67.662829,13.1003289 49.348421,10.2138158 C27.9082895,6.88322364 25.0910526,26.0834219 30.6,32.8926324 C31.9399342,31.4863824 30.9605921,23.4621711 35.1296053,20.131579 Z" fill="#523926"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_fabu.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_fabu</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFC689" offset="0%"></stop>
+            <stop stop-color="#FFAE58" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="36" height="36" rx="18"></rect>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFECD8" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFDDBA" offset="0%"></stop>
+            <stop stop-color="#FFAE58" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
+            <stop stop-color="#FF8300" offset="0%"></stop>
+            <stop stop-color="#FFAE58" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-7">
+            <stop stop-color="#FFDCB6" offset="0%"></stop>
+            <stop stop-color="#FF823A" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-8">
+            <stop stop-color="#FFDCB6" offset="0%"></stop>
+            <stop stop-color="#FF823A" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50.3430609%" y2="96.1013424%" id="linearGradient-9">
+            <stop stop-color="#F4E0D3" offset="0%"></stop>
+            <stop stop-color="#FCF1ED" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="48.9735056%" y2="100%" id="linearGradient-10">
+            <stop stop-color="#FEECDF" offset="0%"></stop>
+            <stop stop-color="#FDDDCB" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-11">
+            <stop stop-color="#FFE2D4" offset="0%"></stop>
+            <stop stop-color="#FFEDE4" offset="39.8481145%"></stop>
+            <stop stop-color="#FFE4D3" offset="59.9150514%"></stop>
+            <stop stop-color="#FFAE7E" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-12" points="5 2.27318164e-13 10 6 7 7 3 7 2.13162821e-13 6"></polygon>
+        <radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="50%" id="radialGradient-14">
+            <stop stop-color="#FFB398" offset="0%"></stop>
+            <stop stop-color="#FF9763" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="49.5248939%" y2="95.8734838%" id="linearGradient-15">
+            <stop stop-color="#FFC5A0" offset="0%"></stop>
+            <stop stop-color="#FF945C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-58.000000, -316.000000)">
+            <g id="编组-3" transform="translate(20.000000, 288.000000)">
+                <g id="编组-2" transform="translate(0.000000, 16.000000)">
+                    <g id="info_icon_fabu" transform="translate(38.000000, 12.000000)">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="蒙版" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <path d="M30,13 L30,32 C30,34.209139 28.209139,36 26,36 L10,36 C7.790861,36 6,34.209139 6,32 L6,11 C6,9.8954305 5.1045695,9 4,9 L4,9 L4,9 L26,9 C28.209139,9 30,10.790861 30,13 Z" id="矩形" fill="url(#linearGradient-4)" mask="url(#mask-3)"></path>
+                        <path d="M30,13 L30,17 L30,17 L6,17 L6,11 C6,9.8954305 5.1045695,9 4,9 L4,9 L4,9 L26,9 C28.209139,9 30,10.790861 30,13 Z" id="矩形" fill="url(#linearGradient-5)" mask="url(#mask-3)"></path>
+                        <path d="M4,9 C5.1045695,9 6,9.8954305 6,11 L6,17 L6,17 L2,17 L2,11 C2,9.8954305 2.8954305,9 4,9 Z" id="矩形" fill="url(#linearGradient-6)" mask="url(#mask-3)"></path>
+                        <rect id="矩形" fill="url(#linearGradient-7)" mask="url(#mask-3)" x="10" y="20" width="11" height="3" rx="1.5"></rect>
+                        <rect id="矩形" fill="url(#linearGradient-8)" mask="url(#mask-3)" x="10" y="26" width="8" height="3" rx="1.5"></rect>
+                        <g id="编组-4" mask="url(#mask-3)">
+                            <g transform="translate(30.000000, 20.500000) rotate(-315.000000) translate(-30.000000, -20.500000) translate(25.000000, 6.000000)">
+                                <polygon id="矩形" fill="url(#linearGradient-9)" points="0 0 3 0 3 22 0 23"></polygon>
+                                <rect id="矩形" fill="url(#linearGradient-10)" x="3" y="0" width="4" height="22"></rect>
+                                <g id="椭圆形" stroke-width="1" fill="none" transform="translate(0.000000, 22.000000)">
+                                    <mask id="mask-13" fill="white">
+                                        <use xlink:href="#path-12"></use>
+                                    </mask>
+                                    <use id="蒙版" fill="url(#linearGradient-11)" transform="translate(5.000000, 3.500000) scale(1, -1) translate(-5.000000, -3.500000) " xlink:href="#path-12"></use>
+                                    <circle fill="url(#radialGradient-14)" mask="url(#mask-13)" cx="5" cy="7" r="3"></circle>
+                                </g>
+                                <polygon id="矩形" fill="url(#linearGradient-15)" points="7 0 10 0 10 23 7 22"></polygon>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_guanzu.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_guanzu</title>
+    <defs>
+        <linearGradient x1="19.9794126%" y1="21.2130183%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFE1C4" offset="0%"></stop>
+            <stop stop-color="#FF9E3C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-170.000000, -457.000000)">
+            <g id="编组-3" transform="translate(20.000000, 426.000000)">
+                <g id="编组-2" transform="translate(0.000000, 20.000000)">
+                    <g id="编组-6" transform="translate(150.000000, 11.000000)">
+                        <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+                        <path d="M8,5 L28,5 C29.1045695,5 30,5.8954305 30,7 L30,28.1446 C30,29.2491695 29.1045695,30.1446 28,30.1446 C27.766895,30.1446 27.5355845,30.1038489 27.3165139,30.0241869 L18.6834861,26.884904 C18.2419712,26.7243532 17.7580288,26.7243532 17.3165139,26.884904 L8.68348613,30.0241869 C7.64541897,30.4016658 6.49789212,29.8661533 6.12041315,28.8280861 C6.04075112,28.6090156 6,28.3777051 6,28.1446 L6,7 C6,5.8954305 6.8954305,5 8,5 Z" id="矩形" fill="#FF9E3C"></path>
+                        <path d="M22.7689406,20.5635428 C20.0967884,21.0739922 17.9264833,21.1367025 16.2580252,20.7516737 C13.5519854,20.127203 12,17.9717073 12,16.0650796 C12,14.1584519 13.5104992,12.6046202 15.4001059,12.5349764 L15.5325398,12.5325398 C15.5325398,10.5815719 17.1141117,9 19.0650796,9 C20.9717073,9 23.127203,10.5519854 23.7516737,13.2580252 C24.1367019,14.9264805 24.0739924,17.0967812 23.5635454,19.7689272 L23.5635542,19.7689289 C23.4866242,20.1716508 23.1716625,20.4866127 22.7689406,20.5635428 Z" id="路径" fill="url(#linearGradient-1)" transform="translate(18.000000, 15.000000) rotate(-315.000000) translate(-18.000000, -15.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_jiaoyi.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_jiaoyi</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFCB9C" offset="0%"></stop>
+            <stop stop-color="#FFB36E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="115.74808%" id="linearGradient-2">
+            <stop stop-color="#FFF3E8" offset="0%"></stop>
+            <stop stop-color="#FFBA7C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-281.000000, -557.000000)">
+            <g id="编组-3" transform="translate(20.000000, 426.000000)">
+                <g id="编组-2" transform="translate(0.000000, 120.000000)">
+                    <g id="编组-10" transform="translate(261.000000, 11.000000)">
+                        <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+                        <path d="M7.51492875,8.62126781 L17.5149287,6.12126781 C17.8334087,6.04164781 18.1665913,6.04164781 18.4850713,6.12126781 L28.4850713,8.62126781 C29.3754053,8.84385131 30,9.64381753 30,10.5615528 L30,13 L30,13 L30,15.8344749 C30,22.8546553 24.9246633,28.8458895 18,30 L18,30 L18,30 C11.0753367,28.8458895 6,22.8546553 6,15.8344749 L6,13 L6,13 L6,10.5615528 C6,9.64381753 6.62459475,8.84385131 7.51492875,8.62126781 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                        <path d="M15.6165635,11.475136 C16.4662629,11.5111402 17.1431418,12.1880185 17.1791453,13.0377179 L17.1791453,21.9622904 C17.1791453,22.8624394 16.4446582,23.5897208 15.5445563,23.5897208 C14.8604759,23.5897208 14.2484068,23.1576695 14.017978,22.5167941 L11.7425136,18.1242656 C11.3824716,17.4257862 11.728112,16.8425149 12.5274032,16.8425149 L13.9171646,16.8425149 L13.9171646,13.0377179 C13.9531688,12.1376118 14.7164573,11.4391324 15.6165635,11.475136 Z M20.3187209,11.359971 C21.0100029,11.359971 21.622072,11.7920223 21.8596981,12.4328976 L24.1567671,16.8254262 C24.5240099,17.5239055 24.1711688,18.1071769 23.364676,18.1071769 L21.9605115,18.1071339 L21.9605115,21.9119309 C21.9245073,22.812037 21.1540172,23.5105164 20.2467138,23.4745128 C19.3898128,23.4385086 18.7057366,22.7616303 18.6697287,21.9119309 L18.6697287,12.9873584 C18.6697287,12.0872523 19.4114132,11.359971 20.3187209,11.359971 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_kefu.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_kefu</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#65BBFF" offset="0%"></stop>
+            <stop stop-color="#2196F3" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="27.2537633%" y1="24.4897959%" x2="56.7007945%" y2="75.5102041%" id="linearGradient-2">
+            <stop stop-color="#CCE8FF" offset="0%"></stop>
+            <stop stop-color="#44A9F9" stop-opacity="0.108765502" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-170.000000, -557.000000)">
+            <g id="编组-3" transform="translate(20.000000, 426.000000)">
+                <g id="编组-2" transform="translate(0.000000, 120.000000)">
+                    <g id="编组-9" transform="translate(150.000000, 11.000000)">
+                        <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+                        <path d="M8,7 L28,7 C29.1045695,7 30,7.8954305 30,9 L30,23.2857143 C30,24.3902838 29.1045695,25.2857143 28,25.2857143 L23.9941842,25.2857143 C23.6407449,25.2857143 23.2936178,25.3793759 22.9881486,25.5571622 L16.0773071,29.5793451 C15.1226542,30.1349632 13.8983375,29.8114815 13.3427194,28.8568286 C13.228951,28.6613537 13.1491631,28.4479974 13.1067509,28.2258378 L12.8556733,26.9106694 C12.6756609,25.9677478 11.8511035,25.2857143 10.8911526,25.2857143 L8,25.2857143 C6.8954305,25.2857143 6,24.3902838 6,23.2857143 L6,9 C6,7.8954305 6.8954305,7 8,7 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                        <path d="M17,18 C18.1045695,18 19,18.8954305 19,20 C19,21.1045695 18.1045695,22 17,22 L13,22 C11.8954305,22 11,21.1045695 11,20 C11,18.8954305 11.8954305,18 13,18 L17,18 Z M23,12 C24.1045695,12 25,12.8954305 25,14 C25,15.1045695 24.1045695,16 23,16 L13,16 C11.8954305,16 11,15.1045695 11,14 C11,12.8954305 11.8954305,12 13,12 L23,12 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_maichu.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_maichu</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9CBDFF" offset="0%"></stop>
+            <stop stop-color="#6A9CFF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="36" height="36" rx="18"></rect>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#AEC9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#E8F0FF" offset="0%"></stop>
+            <stop stop-color="#6A9CFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="6.37235969%" x2="63.8039714%" y2="100%" id="linearGradient-6">
+            <stop stop-color="#F4F8FF" offset="0%"></stop>
+            <stop stop-color="#78A4F9" stop-opacity="0.865956553" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="22.0958289%" x2="1.3762561%" y2="22.0958289%" id="linearGradient-7">
+            <stop stop-color="#A4BFF4" offset="0%"></stop>
+            <stop stop-color="#A7C1F6" offset="10.3995617%"></stop>
+            <stop stop-color="#C2D7FF" offset="13.1592101%"></stop>
+            <stop stop-color="#B8D0FF" offset="87.7981194%"></stop>
+            <stop stop-color="#A4BFF4" offset="92.5815851%"></stop>
+            <stop stop-color="#AEC9FF" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="57.6069519%" cy="28.9437932%" fx="57.6069519%" fy="28.9437932%" r="71.4622294%" id="radialGradient-8">
+            <stop stop-color="#FDFEFF" offset="0%"></stop>
+            <stop stop-color="#9CBDFF" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-170.000000, -316.000000)">
+            <g id="编组-3" transform="translate(20.000000, 288.000000)">
+                <g id="编组-2" transform="translate(0.000000, 16.000000)">
+                    <g id="info_icon_maichu" transform="translate(150.000000, 12.000000)">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="蒙版" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <path d="M6,16 L30,16 L30,32 C30,34.209139 28.209139,36 26,36 L10,36 C7.790861,36 6,34.209139 6,32 L6,16 L6,16 Z" id="矩形" fill="url(#linearGradient-4)" mask="url(#mask-3)"></path>
+                        <path d="M12.9761871,23.8611151 L17.2407434,18.8857994 C17.6001655,18.4664735 18.2314655,18.417912 18.6507914,18.7773341 C18.6896702,18.8106588 18.7259319,18.8469206 18.7592566,18.8857994 L23.0238129,23.8611151 C23.2717791,24.150409 23.2382764,24.5859444 22.9489825,24.8339106 C22.8239425,24.9410877 22.6646875,25 22.5,25 L22,25 C21.4477153,25 21,25.4477153 21,26 L21,30 C21,30.5522847 20.5522847,31 20,31 L16,31 C15.4477153,31 15,30.5522847 15,30 L15,26 C15,25.4477153 14.5522847,25 14,25 L13.5,25 C13.1189774,25 12.8100976,24.6911202 12.8100976,24.3100976 C12.8100976,24.1454101 12.8690099,23.9861551 12.9761871,23.8611151 Z" id="矩形" stroke="url(#linearGradient-6)" stroke-width="0.5" fill="url(#linearGradient-5)" mask="url(#mask-3)"></path>
+                        <path d="M6,9 L30,9 L28.4144451,14.5494423 C28.1691299,15.4080454 27.3843579,16 26.4913972,16 L9.50860283,16 C8.61564211,16 7.83087011,15.4080454 7.58555493,14.5494423 L6,9 L6,9 Z" id="蒙版" fill="url(#linearGradient-7)" mask="url(#mask-3)" transform="translate(18.000000, 12.500000) scale(1, -1) translate(-18.000000, -12.500000) "></path>
+                        <circle id="椭圆形" fill="url(#radialGradient-8)" mask="url(#mask-3)" cx="12" cy="11" r="3"></circle>
+                        <circle id="椭圆形" fill="url(#radialGradient-8)" mask="url(#mask-3)" cx="19.5" cy="6.5" r="1.5"></circle>
+                        <circle id="椭圆形" fill="url(#radialGradient-8)" mask="url(#mask-3)" cx="22" cy="13" r="2"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_maidao.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_maidao</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFB2A3" offset="0%"></stop>
+            <stop stop-color="#F57C65" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="36" height="36" rx="18"></rect>
+        <linearGradient x1="56.6624429%" y1="4.4000757%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FFDCD5" offset="0%"></stop>
+            <stop stop-color="#FFC0B4" offset="9.2492359%"></stop>
+            <stop stop-color="#FB775E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="65.2914143%" y2="95.8042705%" id="linearGradient-5">
+            <stop stop-color="#FFA594" offset="0%"></stop>
+            <stop stop-color="#FFEAE6" offset="11.9823284%"></stop>
+            <stop stop-color="#FFE9E5" offset="14.9962624%"></stop>
+            <stop stop-color="#FFB5A7" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="12.8276766%" cy="60.4642977%" fx="12.8276766%" fy="60.4642977%" r="84.3142859%" id="radialGradient-6">
+            <stop stop-color="#FFDCD5" offset="0%"></stop>
+            <stop stop-color="#F3735B" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-7">
+            <stop stop-color="#FFD9D4" offset="0%"></stop>
+            <stop stop-color="#F8826B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-8">
+            <stop stop-color="#FFF7F6" offset="0%"></stop>
+            <stop stop-color="#FCA291" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-281.000000, -316.000000)">
+            <g id="编组-3" transform="translate(20.000000, 288.000000)">
+                <g id="编组-2" transform="translate(0.000000, 16.000000)">
+                    <g id="info_icon_maidao" transform="translate(261.000000, 12.000000)">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="蒙版" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <path d="M12.0966507,20.2862257 C12.0966507,17.6219082 10.0644338,16.1931663 6,16 L1.08171596,38.1322782 C0.602486428,40.2888111 1.96220947,42.4255187 4.11874237,42.9047482 C4.40364196,42.9680593 4.69461482,43 4.9864642,43 L6.41866558,43 C8.45937676,43.0000016 10.1729003,41.4637849 10.3949232,39.4351874 C11.5294082,29.0695263 12.0966507,22.6865391 12.0966507,20.2862257 Z" id="矩形" fill="url(#linearGradient-4)" mask="url(#mask-3)"></path>
+                        <path d="M6,16 L25.801607,12.6997322 C27.9806883,12.336552 30.0415984,13.8086306 30.4047787,15.9877119 C30.4183848,16.0693486 30.4294539,16.1513878 30.4379701,16.2337113 L32.581621,36.9556695 C32.8089395,39.153082 31.2118629,41.1187148 29.0144504,41.3460333 C28.9927749,41.3482756 28.9710815,41.3503407 28.9493723,41.3522285 L14.4741018,42.6109477 C12.2732711,42.8023173 10.3340044,41.1733333 10.1426279,38.9725032 C10.1295304,38.8218817 10.124983,38.6706388 10.1290078,38.5195026 C10.4378581,26.9217412 10.3948555,20.4152404 10,19 C9.5568862,17.4117924 8.22355287,16.4117924 6,16 Z" id="矩形" fill="url(#linearGradient-5)" mask="url(#mask-3)"></path>
+                        <path d="M32.9485948,31.7459118 C29.470542,32.3942768 26.6385511,32.4662367 24.452622,31.9617915 C20.844569,31.1291639 18.7752551,28.2551696 18.7752551,25.7129994 C18.7752551,23.1708291 20.7892541,21.0990535 23.3087297,21.006195 L23.4853082,21.0029463 C23.4853082,18.4016558 25.5940708,16.2928932 28.1953613,16.2928932 C30.7375315,16.2928932 33.6115258,18.3622071 34.4441534,21.9702601 C34.948597,24.1561823 34.8766392,26.9881622 34.2282799,30.4661999 L34.2283017,30.4662039 C34.1071295,31.1162161 33.5986068,31.6247392 32.9485948,31.7459118 Z" id="路径" fill="url(#radialGradient-6)" mask="url(#mask-3)" transform="translate(26.775255, 24.292893) rotate(-285.000000) translate(-26.775255, -24.292893) "></path>
+                        <path d="M17.5799216,4.98407423 C21.4535937,4.35753724 25.101734,6.98986035 25.728271,10.8635325 C25.788941,11.2386352 25.8194227,11.6180005 25.8194227,11.997978 L25.8194227,11.997978 L25.8194227,13.6903852 L22.8184227,14.1648551 L22.8194227,11.997978 C22.8194227,11.9247987 22.8174659,11.8516588 22.8135585,11.7786362 L22.7959912,11.5599988 L22.7667584,11.3425346 C22.404767,9.10446074 20.2969976,7.58359543 18.0589238,7.94558685 C15.0389331,8.43404737 12.8194227,11.0413911 12.8194227,14.1006291 L12.8194227,14.1006291 L12.8194227,15.7488551 L9.81942269,16.223904 L9.81942269,14.1006291 C9.81942269,9.56943172 13.1068555,5.70755865 17.5799216,4.98407423 Z" id="矩形" fill="url(#linearGradient-7)" fill-rule="nonzero" mask="url(#mask-3)"></path>
+                        <polygon id="路径-2" fill="#F8846E" mask="url(#mask-3)" points="9.81942269 16.223904 10.6765863 16.331608 10.9326199 15.7105466"></polygon>
+                        <path d="M18.4370853,5.09177832 C22.3107574,4.46524132 25.9588977,7.09756444 26.5854347,10.9712365 C26.6461047,11.3463393 26.6765863,11.7257046 26.6765863,12.1056821 L26.6765863,12.1056821 L26.6765863,13.7980893 L23.6755863,14.2725592 L23.6765863,12.1056821 C23.6765863,12.0325028 23.6746295,11.9593628 23.6707222,11.8863403 L23.6531549,11.6677029 L23.6239221,11.4502387 C23.2619306,9.21216482 21.1541613,7.69129951 18.9160874,8.05329093 C15.8960967,8.54175145 13.6765863,11.1490952 13.6765863,14.2083332 L13.6765863,14.2083332 L13.6765863,15.8565592 L10.6765863,16.331608 L10.6765863,14.2083332 C10.6765863,9.67713581 13.9640192,5.81526273 18.4370853,5.09177832 Z" id="矩形" fill="url(#linearGradient-8)" fill-rule="nonzero" mask="url(#mask-3)"></path>
+                        <polygon id="路径-3" fill="#F9927F" mask="url(#mask-3)" points="22.8194227 14.1614146 23.6765863 14.269858 23.6765863 13.7375556"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_qianbao.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_qianbao</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFEFE9" offset="0%"></stop>
+            <stop stop-color="#FF8754" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FF9366" offset="0%"></stop>
+            <stop stop-color="#FF7338" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#FFD1BE" offset="0%"></stop>
+            <stop stop-color="#FF7F49" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-58.000000, -457.000000)">
+            <g id="编组-3" transform="translate(20.000000, 426.000000)">
+                <g id="编组-2" transform="translate(0.000000, 20.000000)">
+                    <g id="编组-5" transform="translate(38.000000, 11.000000)">
+                        <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+                        <path d="M15.5767359,3.41723879 L24,8.44 L24,8.44 L21.3,25 L6,12.12 L11.5958111,4.25477655 C12.5019594,2.98113482 14.2342037,2.61669185 15.5767359,3.41723879 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                        <rect id="矩形" fill="url(#linearGradient-2)" x="4" y="7" width="25" height="22" rx="4"></rect>
+                        <rect id="矩形" fill="url(#linearGradient-3)" x="21" y="12" width="11" height="13" rx="4"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_shezhi.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_shezhi</title>
+    <defs>
+        <linearGradient x1="50%" y1="1.24443428%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#A4AFFF" offset="0%"></stop>
+            <stop stop-color="#6672F7" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#DCE0FF" offset="0%"></stop>
+            <stop stop-color="#7B87F9" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-281.000000, -457.000000)">
+            <g id="编组-3" transform="translate(20.000000, 426.000000)">
+                <g id="编组-2" transform="translate(0.000000, 20.000000)">
+                    <g id="编组-7" transform="translate(261.000000, 11.000000)">
+                        <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+                        <path d="M20,5.15470054 L28.1243557,9.84529946 C29.36196,10.5598306 30.1243557,11.8803387 30.1243557,13.3094011 L30.1243557,22.6905989 C30.1243557,24.1196613 29.36196,25.4401694 28.1243557,26.1547005 L20,30.8452995 C18.7623957,31.5598306 17.2376043,31.5598306 16,30.8452995 L7.87564435,26.1547005 C6.63804004,25.4401694 5.87564435,24.1196613 5.87564435,22.6905989 L5.87564435,13.3094011 C5.87564435,11.8803387 6.63804004,10.5598306 7.87564435,9.84529946 L16,5.15470054 C17.2376043,4.44016936 18.7623957,4.44016936 20,5.15470054 Z" id="多边形" fill="url(#linearGradient-1)"></path>
+                        <circle id="椭圆形" fill="url(#linearGradient-2)" cx="18" cy="18" r="5"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/info_icon_wenti.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_wenti</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFE499" offset="0%"></stop>
+            <stop stop-color="#FFD153" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="34.7224519%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFFCF4" offset="0%"></stop>
+            <stop stop-color="#FFD972" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的-未登录" transform="translate(-58.000000, -557.000000)">
+            <g id="编组-3" transform="translate(20.000000, 426.000000)">
+                <g id="编组-2" transform="translate(0.000000, 120.000000)">
+                    <g id="编组-8" transform="translate(38.000000, 11.000000)">
+                        <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+                        <rect id="矩形" fill="url(#linearGradient-1)" x="7" y="6" width="22" height="24" rx="4"></rect>
+                        <path d="M17,21 C18.1045695,21 19,21.8954305 19,23 C19,24.1045695 18.1045695,25 17,25 L13,25 C11.8954305,25 11,24.1045695 11,23 C11,21.8954305 11.8954305,21 13,21 L17,21 Z M21.5,11 C23.4329966,11 25,12.5670034 25,14.5 C25,16.4329966 23.4329966,18 21.5,18 L14.5,18 C12.5670034,18 11,16.4329966 11,14.5 C11,12.5670034 12.5670034,11 14.5,11 L21.5,11 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/pages/mine.vue

@@ -1,18 +1,74 @@
 <config>
 {
     "navigationBarTitleText": "",
-    "disableScroll":true
+    "disableScroll":true,
+    "usingComponents": {
+        "van-grid": "/vant/grid/index",
+        "van-grid-item": "/vant/grid-item/index"
+    }
 }
 </config>
 <template>
-    <div>
+    <div class="page-scroll">
         <div class="top">
-            <van-image src="/native/imgs/avatar.png" width="90" height="90" round class="avatar" fit="cover">
+            <van-image src="/native/svgs/img_defaultphoto.svg" width="90" height="90" round class="avatar" fit="cover">
             </van-image>
 
             <van-button type="primary">点击授权登录</van-button>
+            <van-image
+                class="authentication"
+                width="100%"
+                height="86"
+                src="/native/imgs/info_img_renzhengdianjia.png"
+                fit="contain"
+            />
+        </div>
+
+        <van-grid class="menu" column-num="3" :border="false" clickable>
+            <van-grid-item text="我发布的">
+                <img class="gird-icon" src="/native/svgs/info_icon_fabu.svg" slot="icon" alt="" />
+            </van-grid-item>
+            <van-grid-item text="我卖出的">
+                <img class="gird-icon" src="/native/svgs/info_icon_maichu.svg" slot="icon" alt="" />
+            </van-grid-item>
+            <van-grid-item text="我买到的">
+                <img class="gird-icon" src="/native/svgs/info_icon_maidao.svg" slot="icon" alt="" />
+            </van-grid-item>
+        </van-grid>
+
+        <van-grid class="menu menu-l" column-num="3" :border="false" clickable>
+            <van-grid-item text="我的钱包">
+                <img class="gird-icon" src="/native/svgs/info_icon_qianbao.svg" slot="icon" alt="" />
+            </van-grid-item>
+            <van-grid-item text="我的关注">
+                <img class="gird-icon" src="/native/svgs/info_icon_guanzu.svg" slot="icon" alt="" />
+            </van-grid-item>
+            <van-grid-item text="个人设置" url="/pages/setting">
+                <img class="gird-icon" src="/native/svgs/info_icon_shezhi.svg" slot="icon" alt="" />
+            </van-grid-item>
+            <van-grid-item text="常见问题">
+                <img class="gird-icon" src="/native/svgs/info_icon_wenti.svg" slot="icon" alt="" />
+            </van-grid-item>
+            <van-grid-item>
+                <img class="gird-icon" src="/native/svgs/info_icon_kefu.svg" slot="icon" alt="" />
+                <div slot="text">
+                    <span>客服中心</span>
+                    <button class="grid-btn" open-type="contact" />
+                </div>
+            </van-grid-item>
+            <van-grid-item text="交易规范">
+                <img class="gird-icon" src="/native/svgs/info_icon_jiaoyi.svg" slot="icon" alt="" />
+            </van-grid-item>
+        </van-grid>
+
+        <div class="invitation">
+            <van-image radius="4" width="34" height="34" fit="cover" />
+            <div class="invitation-center">
+                <div class="text1">邀请好友赚大钱</div>
+                <div class="text2">邀请好友 赚大钱</div>
+            </div>
+            <van-button type="default" size="small">立即邀请</van-button>
         </div>
-        <van-image width="100%" height="86" src="/native/imgs/info_img_renzhengdianjia.png" fit="contain" />
     </div>
 </template>
 
@@ -21,18 +77,91 @@ export default {};
 </script>
 
 <style lang="less" scoped>
+.page-scroll {
+    overflow: auto;
+    height: 100vh;
+}
 .top {
-    padding: 0 20px 34px;
+    padding: 0 20px 86px;
     background: #fff;
+    position: relative;
+    margin-bottom: 34px;
 
     .flex();
 
     ._van-button {
         margin-left: 20px;
     }
+
+    .authentication {
+        position: absolute;
+        bottom: -43px;
+        left: 0;
+        right: 0;
+    }
+}
+.menu {
+    display: block;
+}
+.menu + .menu {
+    margin-top: 18px;
+}
+
+.invitation {
+    .flex();
+    background-color: @prim;
+    margin: 14px 20px 100px;
+    padding: 18px 12px;
+    border-radius: 8px;
+
+    .invitation-center {
+        flex-grow: 1;
+        margin-left: 10px;
+        color: #ffffff;
+        .text1 {
+            font-size: 18px;
+            font-weight: bold;
+            line-height: 28px;
+        }
+        .text2 {
+            font-size: 12px;
+            line-height: 22px;
+        }
+    }
+}
+
+/deep/ .menu-l {
+    .van-grid {
+        padding: 10px 0;
+        --grid-item-content-padding: 20px 8px;
+        box-sizing: content-box;
+        overflow: hidden;
+        background-color: #fff;
+    }
 }
 
 /deep/ page {
     background-color: @bg;
 }
+
+/deep/ .van-grid {
+    --grid-item-icon-size: 36px;
+    --grid-item-content-padding: 28px 8px;
+    margin: 0 20px;
+    border-radius: 12px;
+
+    .gird-icon {
+        width: 36px;
+        height: 36px;
+    }
+
+    .grid-btn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+    }
+}
 </style>

src/pages/news.vue

@@ -1,27 +1,18 @@
 <config>
 {
-    "navigationStyle": "custom",
-    "disableScroll":true
+    "navigationBarTitleText": "消息中心",
+    "navigationStyle": "default"
 }
 </config>
 <template>
     <div>
-        <div class="page-title" :style="{ paddingTop: `${pageTop + 26}px` }">消息中心</div>
-        <scroll-view
-            :style="{ height: `calc( 100vh - ${pageTop}px - ${152}rpx)` }"
-            scroll-y
-            scroll-with-animation
-            @scrolltolower="scrollDown"
-        >
-            <news-info></news-info>
-            <news-info :dot="1"></news-info>
-            <news-info></news-info>
-        </scroll-view>
+        <news-info></news-info>
+        <news-info :dot="1"></news-info>
+        <news-info></news-info>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import NewsInfo from '../components/newsInfo.vue';
 export default {
     name: 'News',
@@ -30,26 +21,6 @@ export default {
     },
     data() {
         return {};
-    },
-    computed: {
-        ...mapState(['systemInfo']),
-        pageTop() {
-            return this.systemInfo.safeArea ? this.systemInfo.safeArea.top : 44;
-        }
-    },
-    methods: {
-        scrollDown() {
-            console.log('727263');
-        }
     }
 };
 </script>
-<style lang="less" scoped>
-.page-title {
-    font-size: 24;
-    font-weight: bold;
-    color: #000000;
-    line-height: 34px;
-    padding: 70px 20px 16px;
-}
-</style>

src/pages/setting.vue

@@ -0,0 +1,63 @@
+<config>
+{
+    "navigationBarTitleText": "个人设置",
+}
+</config>
+<template>
+    <div>
+        <van-cell-group :border="false">
+            <van-cell title="头像" is-link>
+                <van-image round width="36" height="36" src="/native/svgs/img_defaultphoto.svg" fit="cover" />
+            </van-cell>
+            <van-cell title="昵称" value="粉条" is-link />
+            <van-cell title="性别" is-link @click="chooseSex" />
+            <van-cell title="地区" is-link />
+            <van-cell title="收货地址" is-link />
+            <van-cell title="手机号" class="not" value="未绑定" is-link />
+        </van-cell-group>
+    </div>
+</template>
+
+<script>
+import { areaList } from '@vant/area-data';
+export default {
+    name: 'Setting',
+    data() {
+        return {};
+    },
+    methods: {
+        chooseSex() {
+            wx.showActionSheet({
+                itemList: ['男', '女'],
+                success(res) {
+                    console.log(res.tapIndex);
+                },
+                fail(res) {
+                    console.log(res.errMsg);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .van-cell {
+    --cell-horizontal-padding: 23px;
+    --cell-vertical-padding: 20px;
+    --cell-text-color: #000;
+    --cell-value-color: #000;
+    .van-cell__value {
+        font-size: 16px;
+    }
+}
+
+/deep/ .not {
+    .van-cell {
+        --cell-value-color: #c8c9cc;
+        .van-cell__value {
+            font-size: 13px;
+        }
+    }
+}
+</style>

src/styles/vanIndex.less

@@ -4,4 +4,13 @@
     --button-primary-background-color: @prim;
     --button-primary-border-color: @prim;
     --button-border-radius: 8px;
+    --button-default-color: @prim;
+    --button-small-height: 34px;
+    --button-small-min-width: 80px;
+    --button-default-border-color: #fff;
+}
+
+.van-grid {
+    --grid-item-text-color: #000;
+    --grid-item-text-font-size: 14px;
 }

yarn.lock

@@ -1152,6 +1152,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@vant/area-data@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@vant/area-data/-/area-data-1.1.1.tgz#b9acf8a804c0d60f721b6900680299422b006b1a"
+  integrity sha512-MmXTuSh6YYWSvC112iK2/rZhEfe+3vfh6G9TD1sOTOrtw+H9bAnw8ZOiHdkL6hTUCXV+AJEDbFyFsNLpJxqkoA==
+
 "@vant/weapp@^1.6.8":
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/@vant/weapp/-/weapp-1.6.8.tgz#948ae16fba07c5a2054c52783f22aaf6a04453e1"