sunran 3 лет назад
Родитель
Сommit
b800fb41cf

+ 16 - 43
package-lock.json

@@ -2685,8 +2685,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -3446,7 +3445,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-2.0.2.tgz",
       "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==",
-      "dev": true,
       "requires": {
         "for-own": "^1.0.0",
         "is-plain-object": "^2.0.4",
@@ -4837,8 +4835,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -5758,14 +5755,12 @@
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
-      "dev": true
+      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ=="
     },
     "for-own": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/for-own/-/for-own-1.0.0.tgz",
       "integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
-      "dev": true,
       "requires": {
         "for-in": "^1.0.1"
       }
@@ -6962,8 +6957,7 @@
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="
     },
     "is-extglob": {
       "version": "2.1.1",
@@ -7061,7 +7055,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -7157,8 +7150,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
     },
     "isstream": {
       "version": "0.1.2",
@@ -7278,8 +7270,7 @@
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
     },
     "launch-editor": {
       "version": "2.4.0",
@@ -7437,8 +7428,7 @@
     "lodash.tail": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/lodash.tail/-/lodash.tail-4.1.1.tgz",
-      "integrity": "sha512-+7y6zfkH4TqgS5DYKIqJuxmL5xT3WUUumVMZVRpDUo0UqJREwZqKmGo9wluj12FbPGl1UjRf2TnAImbw/bKtdw==",
-      "dev": true
+      "integrity": "sha512-+7y6zfkH4TqgS5DYKIqJuxmL5xT3WUUumVMZVRpDUo0UqJREwZqKmGo9wluj12FbPGl1UjRf2TnAImbw/bKtdw=="
     },
     "lodash.transform": {
       "version": "4.6.0",
@@ -7727,8 +7717,7 @@
     "minimist": {
       "version": "1.2.6",
       "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-      "dev": true
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "minipass": {
       "version": "3.3.4",
@@ -7790,7 +7779,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/mixin-object/-/mixin-object-2.0.1.tgz",
       "integrity": "sha512-ALGF1Jt9ouehcaXaHhn6t1yGWRqGaHkPFndtFVHfZXOvkIZ/yoGaSi0AHVTafb3ZBGg4dr/bDwnaEKqCXzchMA==",
-      "dev": true,
       "requires": {
         "for-in": "^0.1.3",
         "is-extendable": "^0.1.1"
@@ -7799,8 +7787,7 @@
         "for-in": {
           "version": "0.1.8",
           "resolved": "https://registry.npmmirror.com/for-in/-/for-in-0.1.8.tgz",
-          "integrity": "sha512-F0to7vbBSHP8E3l6dCjxNOLuSFAACIxFy3UehTUlG7svlXi37HHsDkyVcHo0Pq8QwrE+pXvWSVX3ZT1T9wAZ9g==",
-          "dev": true
+          "integrity": "sha512-F0to7vbBSHP8E3l6dCjxNOLuSFAACIxFy3UehTUlG7svlXi37HHsDkyVcHo0Pq8QwrE+pXvWSVX3ZT1T9wAZ9g=="
         }
       }
     },
@@ -7905,8 +7892,7 @@
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "nice-try": {
       "version": "1.0.5",
@@ -9837,24 +9823,21 @@
       }
     },
     "sass-loader": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-7.1.0.tgz",
-      "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
-      "dev": true,
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-7.0.0.tgz",
+      "integrity": "sha512-WVAtAfnEdKT1wvoVNAXidSmYKxyL/C5Cgt0OnWluodjXh20hwN0HoAS9T5uBdPgSUYQso1iZ8tipYnyK+aJpew==",
       "requires": {
         "clone-deep": "^2.0.1",
         "loader-utils": "^1.0.1",
         "lodash.tail": "^4.1.1",
         "neo-async": "^2.5.0",
-        "pify": "^3.0.0",
-        "semver": "^5.5.0"
+        "pify": "^3.0.0"
       },
       "dependencies": {
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -9863,7 +9846,6 @@
           "version": "1.4.0",
           "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.0.tgz",
           "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -9873,14 +9855,7 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-          "dev": true
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="
         }
       }
     },
@@ -10118,7 +10093,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-1.0.0.tgz",
       "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==",
-      "dev": true,
       "requires": {
         "is-extendable": "^0.1.1",
         "kind-of": "^5.0.0",
@@ -10128,8 +10102,7 @@
         "kind-of": {
           "version": "5.1.0",
           "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
         }
       }
     },

+ 2 - 1
package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "lib-flexible": "^0.3.2",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^7.0.0",
     "vant": "^2.12.48",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
@@ -27,7 +29,6 @@
     "eslint-plugin-vue": "^6.2.2",
     "postcss-pxtorem": "^5.1.1",
     "sass": "^1.53.0",
-    "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

+ 16 - 2
src/styles/index.css

@@ -1,3 +1,17 @@
-.btn {
-    color: brown;
+/* navbar样式 */
+.van-nav-bar {
+    /* border-bottom: 1px solid #eee; */
+}
+
+.van-nav-bar .van-icon {
+    color: #000 !important;
+}
+
+/* tab样式 */
+.van-tabs {
+    border-bottom: 1px solid #eee;
+}
+
+.van-tabs .van-tabs__line {
+    background-color: #f93a4a;
 }

+ 1 - 14
src/views/weibao/App.vue

@@ -19,19 +19,6 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+  color: #333;
 }
 </style>

BIN
src/views/weibao/assets/icon1.png


BIN
src/views/weibao/assets/icon2.png


BIN
src/views/weibao/assets/icon3.png


BIN
src/views/weibao/assets/icon4.png


BIN
src/views/weibao/assets/icon5.png


BIN
src/views/weibao/assets/swiper.jpg


BIN
src/views/weibao/assets/swiper1.jpg


BIN
src/views/weibao/assets/swiper2.jpg


BIN
src/views/weibao/assets/swiper3.jpg


BIN
src/views/weibao/assets/tx.png


BIN
src/views/weibao/assets/warning.png


+ 54 - 0
src/views/weibao/components/newsInformation.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="list">
+      <div class="img">
+        <img src="../assets/swiper.jpg" alt="">
+      </div>
+      <div class="text">
+        <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+        <p class="mes">发布单位:滨州传媒网</p>
+        <p class="mes">帮扶地址:滨州传媒网</p>
+        <p class="date">发布日期:2022-02-17 16:12:22</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  .img {
+    img {
+      width: 260px;
+      height: 160px;
+    }
+  }
+  .text {
+    text-align: left;
+    margin-left: 26px;
+    width: calc(100% - 286px);
+    .title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 30px;
+    }
+    .mes {
+      font-size: 26px;
+    }
+    p {
+      margin: 0;
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>

+ 91 - 0
src/views/weibao/components/noticeAnnouncement.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+p {
+  margin: 0;
+  margin-top: 16px;
+}
+.list {
+  margin-top: 24px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 24px;
+  .title {
+    font-size: 30px;
+  }
+  .mes {
+    font-size: 26px;
+  }
+}
+</style>

+ 39 - 0
src/views/weibao/components/policyDocument.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+    <div class="list">
+      <p class="title">关于开展邹平市“精神障碍社区康复•困境儿童关爱”公益创投活动的公告</p>
+      <p class="mes">发布单位:滨州传媒网</p>
+      <p class="date">发布日期:2022-02-17 16:12:22</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+<style lang="scss" scoped>
+p {
+  margin: 0;
+  margin-top: 16px;
+}
+.list {
+  margin-top: 24px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 24px;
+  .title {
+    font-size: 30px;
+  }
+  .mes {
+    font-size: 26px;
+  }
+}
+</style>

+ 26 - 11
src/views/weibao/router/router.js

@@ -1,22 +1,37 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-// import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
-const routes = [
-    //   {
-    //     path: '/',
-    //     name: 'Home',
-    //     component: Home
-    //   },
-    {
+const routes = [{
         path: '/home',
         name: 'Home',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
         component: () => import('../views/home/index.vue')
+    },
+    {
+        path: '/followUp/director',
+        name: 'director',
+        component: () => import('../views/followUp/director.vue')
+    },
+    {
+        path: '/followUp/record',
+        name: 'record',
+        component: () => import('../views/followUp/record.vue')
+    },
+    {
+        path: '/followUp/details',
+        name: 'details',
+        component: () => import('../views/followUp/details.vue')
+    },
+    {
+        path: '/followUp/historySupervisor',
+        name: 'historySupervisor',
+        component: () => import('../views/followUp/historySupervisor.vue')
+    },
+    {
+        path: '/followUp/addfollow',
+        name: 'historySupervisor',
+        component: () => import('../views/followUp/addfollow.vue')
     }
 ]
 

+ 180 - 0
src/views/weibao/views/followUp/addfollow.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <van-nav-bar title="新建随访" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <div class="main">
+      <van-row class="cell">
+        <van-col span="4">姓名:</van-col>
+        <van-col span="8" @click="searchshow=true">
+          <van-field v-model="text" placeholder="请选择" disabled />
+        </van-col>
+        <van-popup position="bottom" v-model="searchshow">
+          <van-search placeholder="请输入姓名" v-model="positionSearch" />
+          <van-picker cancel-button-text='取消' value-key="title" show-toolbar :columns="getPositionList(1)" @confirm="onConfirmPicker" @cancel="showPicker = false" />
+        </van-popup>
+        <van-col span="6">儿童类型:</van-col>
+        <van-col span="6">
+          <van-field v-model="text" placeholder="请选择" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="4">年龄:</van-col>
+        <van-col span="8" @click="searchshow=true">
+          <van-field v-model="text" placeholder="请选择" disabled />
+        </van-col>
+        <van-col span="6">性别:</van-col>
+        <van-col span="6">
+          <van-field v-model="text" placeholder="请选择" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">教育情况:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="教育情况" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">健康情况:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="健康情况" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">监护人:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="监护人" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="9">监护人联系方式:</van-col>
+        <van-col span="15">
+          <van-field v-model="text" placeholder="监护人联系方式" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">居住地址:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="居住地址" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="7">帮扶责任人:</van-col>
+        <van-col span="17">
+          <van-field v-model="text" placeholder="帮扶责任人" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访时间:</van-col>
+        <van-col span="18" @click="showPopup">请选择</van-col>
+        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
+          <van-datetime-picker v-model="currentDate" type="date" :columns-order="[ 'year','month', 'day']" :formatter="formatter" />
+        </van-popup>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访地点:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="请输入随访地点" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访人员:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="请输入" />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">联系方式:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" type="tel" placeholder="请输入" />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访记录:</van-col>
+        <van-col span="18">
+          <van-field class="textarea" v-model="message" rows="1" type="textarea" placeholder="请输入随访记录" />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">图片视频:</van-col>
+        <van-col span="18">
+          <van-uploader v-model="fileList" accept="*" :after-read="afterRead" />
+        </van-col>
+      </van-row>
+    </div>
+    <van-button>确 定</van-button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      searchshow: false,
+      fileList: [],
+      positionSearch: '',
+    }
+  },
+  methods: {
+    showPopup() {
+      this.show = true
+    },
+    getPositionList() {},
+    afterRead(file) {
+      console.log(file)
+      file.status = 'uploading'
+      file.message = '上传中...'
+      setTimeout(() => {
+        file.status = 'failed'
+        file.message = '上传失败'
+      }, 1000)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.tx {
+  width: 160px;
+  height: 160px;
+}
+.message {
+  padding: 0 30px;
+}
+.topBox {
+  padding: 24px 0;
+  border-bottom: 1px solid #eee;
+}
+.van-row {
+  font-size: 30px;
+  text-align: left;
+}
+.row {
+  .van-col {
+    line-height: 60px;
+  }
+}
+.main {
+  padding: 0 30px;
+}
+.cell {
+  border-bottom: 1px solid #eee;
+  margin-top: 16px;
+  .van-col {
+    line-height: 80px;
+  }
+  .van-cell {
+    padding: 0;
+    line-height: 80px;
+  }
+}
+.textarea {
+  line-height: 30px !important;
+  margin-top: 25px;
+}
+.van-button {
+  width: 690px;
+  margin: 24px auto;
+  color: #fff;
+  background-color: #1677ff;
+  border-radius: 8px;
+  font-size: 30px;
+}
+</style>

+ 141 - 0
src/views/weibao/views/followUp/details.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <van-nav-bar title="随访记录" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <div class="message">
+      <van-row class="topBox">
+        <van-col span="18">
+          <van-row class="row">
+            <van-col span="10">姓名:陈超群</van-col>
+            <van-col span="7">性别:男</van-col>
+            <van-col span="7">年龄:8</van-col>
+          </van-row>
+          <van-row class="row">
+            <van-col span="24">儿童类型:低保 困境儿童</van-col>
+          </van-row>
+          <van-row class="row">
+            <van-col span="24">教育情况:高中在读</van-col>
+          </van-row>
+          <van-row class="row">
+            <van-col span="24">健康情况:健康</van-col>
+          </van-row>
+        </van-col>
+        <van-col span="6">
+          <img class="tx" src="../../assets/swiper.jpg" alt="">
+        </van-col>
+        <van-row class="row">
+          <van-col span="10">监护人:李静好</van-col>
+          <van-col span="14">联系方式:13456982032</van-col>
+        </van-row>
+        <van-row class="row">
+          <van-col span="24">居住地址:好生街道展店村15号</van-col>
+        </van-row>
+      </van-row>
+    </div>
+    <div class="main">
+      <div>
+        <p>随访详情:</p>
+        <div class="box">
+          导出导出导出导出导出导出导出导出的
+        </div>
+      </div>
+      <div>
+        <p>照片与视频:</p>
+        <div class="boximg">
+          <van-image fit="contain" src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" @click="showPopup" />
+          <van-image fit="contain" src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" @click="showPopup" />
+          <van-image fit="contain" src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" @click="showPopup" />
+          <video @click="showvideoplay=true" style="object-fit:cover;" :src="videourl"></video>
+        </div>
+        <van-image-preview v-model="show" :images="images" @change="onChange"></van-image-preview>
+      </div>
+    </div>
+    <van-dialog style="width:100%;border-radius:0;height:200px" v-model="showvideoplay" :show-cancel-button="false" :show-confirm-button="false" closeOnClickOverlay>
+      <video controls preload="auto" style="width:100%;height:200px;object-fit: contain;" :src="videourl" v-if="videourl"></video>
+    </van-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      fileList: [],
+      showvideoplay: false,
+      index: 0,
+      videourl:
+        'https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4',
+      images: [
+        'https://img01.yzcdn.cn/vant/apple-1.jpg',
+        'https://img01.yzcdn.cn/vant/apple-2.jpg',
+      ],
+    }
+  },
+  methods: {
+    showPopup() {
+      this.show = true
+    },
+    onChange(index) {
+      this.index = index
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.tx {
+  width: 160px;
+  height: 160px;
+}
+.message {
+  padding: 0 30px;
+}
+.topBox {
+  padding: 24px 0;
+  border-bottom: 1px solid #eee;
+}
+.van-row {
+  font-size: 30px;
+  text-align: left;
+}
+.row {
+  .van-col {
+    line-height: 60px;
+  }
+}
+.main {
+  padding: 0 30px;
+  font-size: 30px;
+  text-align: left;
+  .box {
+    min-height: 200px;
+    border: 1px solid #eee;
+    padding: 20px;
+    font-size: 26px;
+    color: #999;
+  }
+  .boximg {
+    min-height: 100px;
+    border: 1px solid #eee;
+    padding: 20px;
+    font-size: 26px;
+    color: #999;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .van-image {
+      max-width: 200px;
+      max-height: 200px;
+      //   margin-right: 16px;
+      margin-bottom: 16px;
+    }
+    video {
+      width: 180px;
+      height: 180px;
+      //   margin-right: 16px;
+      margin-bottom: 16px;
+    }
+  }
+}
+/deep/.van-overlay {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+</style>

+ 45 - 0
src/views/weibao/views/followUp/director.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <van-nav-bar title="关爱服务" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <van-sticky>
+      <van-tabs v-model="active">
+        <van-tab title="随访计划"></van-tab>
+        <van-tab title="历史随访"></van-tab>
+      </van-tabs>
+      <van-search v-show="active==1" v-model="value" shape="round" show-action placeholder="请输入搜索关键词" @search="onSearch">
+        <template #action>
+          <div @click="onSearch">搜索</div>
+        </template>
+      </van-search>
+    </van-sticky>
+    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <plan v-show="active==0"></plan>
+      <history v-show="active==1"></history>
+    </van-list>
+  </div>
+</template>
+<script>
+import plan from './plan.vue'
+import history from './history.vue'
+export default {
+  components: { plan, history },
+  data() {
+    return {
+      value: '',
+      active: 0,
+      loading: false,
+      finished: false,
+    }
+  },
+  methods: {
+    onLoad() {},
+    onSearch() {},
+  },
+}
+</script>
+<style lang="scss" scoped>
+.van-list {
+  padding: 0 30px;
+  padding-top: 26px;
+}
+</style>

+ 73 - 0
src/views/weibao/views/followUp/history.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="list" @click="$router.push({path:'/followUp/details'})">
+      <div class="img">
+        <img src="../../assets/swiper.jpg" alt="">
+      </div>
+      <div class="text">
+        <p class="title">韩雨桐-女-9岁<span class="mes">困境儿童</span></p>
+        <p class="num">随访时间:2022/2/25</p>
+        <p class="num">居住地址:哈哈哈哈或或或</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  display: flex;
+  align-items: center;
+  margin-bottom: 26px;
+  .img {
+    img {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+    }
+  }
+  .text {
+    text-align: left;
+    margin-left: 26px;
+    width: calc(100% - 116px);
+    .title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 30px;
+    }
+    .mes {
+      font-size: 26px;
+      margin-left: 10px;
+    }
+    .zero {
+      color: #ff3b30;
+    }
+    .num {
+      font-size: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .van-button {
+        border-radius: 8px;
+      }
+    }
+    p {
+      margin: 0;
+      margin-bottom: 16px;
+    }
+  }
+  .van-button {
+    width: 160px;
+    background-color: #1677ff;
+    color: #fff;
+    font-size: 24px;
+  }
+}
+</style>

+ 53 - 0
src/views/weibao/views/followUp/historySupervisor.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <van-nav-bar title="历史随访" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <van-sticky>
+      <van-search v-model="value" shape="round" show-action placeholder="请输入搜索关键词" @search="onSearch">
+        <template #action>
+          <div style="display:flex;align-items:center;">
+            <div @click="onSearch">搜索</div>
+            <van-button size="mini" @click="$router.push({path:'/followUp/addfollow'})">新建随访</van-button>
+          </div>
+        </template>
+      </van-search>
+    </van-sticky>
+    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <history></history>
+    </van-list>
+  </div>
+</template>
+<script>
+import history from './history.vue'
+export default {
+  components: { history },
+  data() {
+    return {
+      value: '',
+      active: 0,
+      loading: false,
+      finished: false,
+    }
+  },
+  methods: {
+    onLoad() {},
+    onSearch() {},
+  },
+}
+</script>
+<style lang="scss" scoped>
+.van-list {
+  padding: 0 30px;
+  padding-top: 26px;
+}
+.van-button {
+  width: 160px;
+  background-color: #1677ff;
+  color: #fff;
+  font-size: 24px;
+  border-radius: 8px;
+  margin-left: 10px;
+}
+.van-search__action:active {
+  background-color: transparent;
+}
+</style>

+ 107 - 0
src/views/weibao/views/followUp/plan.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class="list">
+      <div class="img">
+        <img class="tx" src="../../assets/tx.png" alt="">
+        <img class="warning" src="../../assets/warning.png" alt="">
+      </div>
+      <div class="text">
+        <p class="title">韩雨桐-女-9岁<span class="mes">困境儿童</span></p>
+        <div class="num">
+          <div>本月对方次数:<span class="zero">0</span></div>
+          <van-button size="mini">开始随访</van-button>
+        </div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="img">
+        <img class="tx" src="../../assets/tx.png" alt="">
+        <img v-if="false" class="warning" src="../../assets/warning.png" alt="">
+      </div>
+      <div class="text">
+        <p class="title">韩雨桐-女-9岁<span class="mes">困境儿童</span></p>
+        <div class="num">
+          <div>本月对方次数:<span>1</span></div>
+          <van-button size="mini" @click="$router.push({path:'/followUp/record'})">开始随访</van-button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  display: flex;
+  align-items: center;
+  margin-bottom: 26px;
+  .img {
+    position: relative;
+    .tx {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+    }
+    .warning {
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      animation: heart 1s ease infinite;
+    }
+    @keyframes heart {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  }
+  .text {
+    text-align: left;
+    margin-left: 26px;
+    width: calc(100% - 116px);
+    .title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 30px;
+    }
+    .mes {
+      font-size: 26px;
+      margin-left: 10px;
+    }
+    .zero {
+      color: #ff3b30;
+    }
+    .num {
+      font-size: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .van-button {
+        border-radius: 8px;
+      }
+    }
+    p {
+      margin: 0;
+      margin-bottom: 16px;
+    }
+  }
+  .van-button {
+    width: 160px;
+    background-color: #1677ff;
+    color: #fff;
+    font-size: 24px;
+  }
+}
+</style>

+ 138 - 0
src/views/weibao/views/followUp/record.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <van-nav-bar title="随访记录" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <div class="message">
+      <van-row class="topBox">
+        <van-col span="18">
+          <van-row class="row">
+            <van-col span="10">姓名:陈超群</van-col>
+            <van-col span="7">性别:男</van-col>
+            <van-col span="7">年龄:8</van-col>
+          </van-row>
+          <van-row class="row">
+            <van-col span="24">儿童类型:低保 困境儿童</van-col>
+          </van-row>
+          <van-row class="row">
+            <van-col span="24">教育情况:高中在读</van-col>
+          </van-row>
+          <van-row class="row">
+            <van-col span="24">健康情况:健康</van-col>
+          </van-row>
+        </van-col>
+        <van-col span="6">
+          <img class="tx" src="../../assets/swiper.jpg" alt="">
+        </van-col>
+        <van-row class="row">
+          <van-col span="10">监护人:李静好</van-col>
+          <van-col span="14">联系方式:13456982032</van-col>
+        </van-row>
+        <van-row class="row">
+          <van-col span="24">居住地址:好生街道展店村15号</van-col>
+        </van-row>
+      </van-row>
+    </div>
+    <div class="main">
+      <van-row class="cell">
+        <van-col span="6">随访时间:</van-col>
+        <van-col span="18" @click="showPopup">请选择</van-col>
+        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
+          <van-datetime-picker v-model="currentDate" type="date" :columns-order="[ 'year','month', 'day']" :formatter="formatter" />
+        </van-popup>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访地点:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="请输入随访地点" disabled />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访人员:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" placeholder="请输入" />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">联系方式:</van-col>
+        <van-col span="18">
+          <van-field v-model="text" type="tel" placeholder="请输入" />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">随访记录:</van-col>
+        <van-col span="18">
+          <van-field class="textarea" v-model="message" rows="1" type="textarea" placeholder="请输入随访记录" />
+        </van-col>
+      </van-row>
+      <van-row class="cell">
+        <van-col span="6">图片视频:</van-col>
+        <van-col span="18">
+          <van-uploader v-model="fileList" accept="*" :after-read="afterRead" />
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      fileList: [],
+    }
+  },
+  methods: {
+    showPopup() {
+      this.show = true
+    },
+    afterRead(file) {
+      console.log(file)
+      file.status = 'uploading'
+      file.message = '上传中...'
+      setTimeout(() => {
+        file.status = 'failed'
+        file.message = '上传失败'
+      }, 1000)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.tx {
+  width: 160px;
+  height: 160px;
+}
+.message {
+  padding: 0 30px;
+}
+.topBox {
+  padding: 24px 0;
+  border-bottom: 1px solid #eee;
+}
+.van-row {
+  font-size: 30px;
+  text-align: left;
+}
+.row {
+  .van-col {
+    line-height: 60px;
+  }
+}
+.main {
+  padding: 0 30px;
+}
+.cell {
+  border-bottom: 1px solid #eee;
+  margin-top: 16px;
+  .van-col {
+    line-height: 80px;
+  }
+  .van-cell {
+    padding: 0;
+    line-height: 80px;
+  }
+}
+.textarea {
+  line-height: 30px !important;
+  margin-top: 25px;
+}
+</style>

+ 122 - 9
src/views/weibao/views/home/index.vue

@@ -1,23 +1,136 @@
 <template>
   <div>
-    <van-swipe class="my-swiper" :autoplay="3000" indicator-color="white">
-      <van-swipe-item>1</van-swipe-item>
-      <van-swipe-item>2</van-swipe-item>
-      <van-swipe-item>3</van-swipe-item>
-      <van-swipe-item>4</van-swipe-item>
+    <van-nav-bar title="首页" fixed placeholder safe-area-inset-top />
+    <van-swipe class="my-swipe">
+      <van-swipe-item>
+        <img src="../../assets/swiper.jpg" alt="">
+      </van-swipe-item>
+      <van-swipe-item><img src="../../assets/swiper1.jpg" alt=""></van-swipe-item>
+      <van-swipe-item><img src="../../assets/swiper2.jpg" alt=""></van-swipe-item>
+      <van-swipe-item><img src="../../assets/swiper3.jpg" alt=""></van-swipe-item>
     </van-swipe>
+    <div class="category">
+      <div class="" @click="$router.push({path:'/followUp/historySupervisor'})">
+        <img src="../../assets/icon1.png" alt="">
+        <div>随访关爱</div>
+      </div>
+      <div class="">
+        <img src="../../assets/icon2.png" alt="">
+        <div>专项服务</div>
+      </div>
+      <div class="">
+        <img src="../../assets/icon3.png" alt="">
+        <div>爱心帮扶</div>
+      </div>
+      <div class="">
+        <img src="../../assets/icon4.png" alt="">
+        <div>个案会商</div>
+      </div>
+      <div class="">
+        <img src="../../assets/icon5.png" alt="">
+        <div>强制报告</div>
+      </div>
+    </div>
+    <div class="main">
+      <van-sticky>
+        <van-tabs v-model="active">
+          <van-tab title="通知公告"></van-tab>
+          <van-tab title="政策文件"></van-tab>
+          <van-tab title="新闻资讯"></van-tab>
+        </van-tabs>
+      </van-sticky>
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <noticeAnnouncement v-if="active==0"></noticeAnnouncement>
+          <policyDocument v-if="active==1"></policyDocument>
+          <newsInformation v-if="active==2"></newsInformation>
+        </van-list>
+      </van-pull-refresh>
+    </div>
   </div>
 </template>
 <script>
+import noticeAnnouncement from '../../components/noticeAnnouncement.vue'
+import policyDocument from '../../components/policyDocument.vue'
+import newsInformation from '../../components/newsInformation.vue'
 export default {
+  components: { noticeAnnouncement, policyDocument, newsInformation },
   data() {
-    return {}
+    return {
+      active: 2,
+      loading: false,
+      finished: false,
+      isLoading: false,
+    }
+  },
+  methods: {
+    onLoad() {
+      setTimeout(() => {
+        // 加载状态结束
+        this.loading = false
+        // 数据全部加载完成
+        this.finished = true
+      }, 1000)
+    },
+    onRefresh() {
+      setTimeout(() => {
+        this.isLoading = false
+      }, 1000)
+    },
   },
 }
 </script>
 <style lang="scss" scoped>
-.my-swiper {
-  width: 750px;
-  height: 200px;
+.my-swipe {
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  margin: 0 auto;
+  transform: translateY(0);
+  /deep/.van-swipe-item {
+    text-align: center;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+/deep/ .van-swipe__indicator {
+  width: 12px;
+  height: 12px;
+  background: rgba(255, 255, 255, 0.65);
+}
+
+/deep/.van-swipe__indicator--active {
+  width: 70px;
+  border-radius: 8px;
+}
+.category {
+  margin: 24px;
+  display: flex;
+  justify-content: center;
+  > div {
+    flex: 1;
+    img {
+      width: 80px;
+      height: 80px;
+      //   border-radius: 50%;
+    }
+    div {
+      margin-top: 8px;
+      font-size: 30px;
+      color: #333;
+    }
+  }
+}
+.main {
+  margin-top: 24px;
+}
+.van-tabs {
+  border-bottom: 1px solid #eee;
+}
+.van-list {
+  padding: 0 30px;
 }
 </style>