我的

src/App.vue

@@ -8,12 +8,14 @@
 <script>
 import BetterScroll from "better-scroll";
 import Pulldown from "@better-scroll/pull-down";
+import { computed } from "@vue/reactivity";
 BetterScroll.use(Pulldown);
 export default {
   name: "App",
   provide() {
     return {
       changeCheck: this.changeCheck,
+      bs: computed(() => this.bs),
     };
   },
   data() {
@@ -43,17 +45,13 @@ export default {
   mounted() {
     this.timer = setTimeout(() => {
       this.init();
-    }, 500);
+    }, 1000);
   },
   methods: {
     init() {
       this.bs = new BetterScroll(this.$refs.scroll, {
         scrollY: true,
         click: true,
-        pullUpLoad: true,
-      });
-      this.bs.on("pullingUp", () => {
-        this.onLoad();
       });
     },
     onLoad() {
@@ -75,7 +73,7 @@ export default {
         this.loading = false;
         if (this.bs) {
           this.bs.finishPullUp();
-          this.bs.closePullUp();
+          // this.bs.closePullUp();
           this.bs.refresh();
         }
       }

src/assets/svgs/icon-anquan.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-anquan</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-20.000000, -883.000000)" fill-rule="nonzero" stroke="#979797" stroke-width="1.6">
+            <g id="编组-9" transform="translate(0.000000, 435.000000)">
+                <g id="编组-2" transform="translate(0.000000, 425.000000)">
+                    <g id="info_icon_list_01" transform="translate(20.000000, 23.000000)">
+                        <g id="编组-7" transform="translate(1.945652, 2.922215)">
+                            <path d="M13.7114276,18.7272727 L1.24591768,18.7272727 C0.99475127,18.7272727 0.802682841,18.5308773 0.802682841,18.2740525 L0.802682841,5.95229261 C0.802682841,2.67399947 3.41776838,1.8189894e-12 6.6238337,1.8189894e-12 L19.0893436,1.8189894e-12 C19.34051,1.8189894e-12 19.5325785,0.196395441 19.5325785,0.453220249 L19.5325785,13.7900875 C19.517804,17.0683806 16.9027184,18.7272727 13.7114276,18.7272727 Z" id="路径"></path>
+                            <path d="M16.235756,15.3468244 C16.235756,14.5543715 16.0848126,13.7619187 15.7640579,13.0260696 C15.4621711,12.3090885 15.0282089,11.6675791 14.481039,11.1204093 C13.9338692,10.5732394 13.2923598,10.1392772 12.5753787,9.83739039 C12.4055673,9.76191869 12.2168881,9.70531492 12.0282089,9.62984322 C12.9716051,9.02606964 13.6131145,7.96946586 13.6131145,6.76191869 C13.6131145,4.87512624 12.0848126,3.34682435 10.1980202,3.34682435 C8.31122773,3.34682435 6.78292584,4.87512624 6.78292584,6.76191869 C6.78292584,7.98833379 7.42443527,9.04493756 8.38669942,9.64871114 C8.2168881,9.70531492 8.04707678,9.76191869 7.89613339,9.83739039 C7.17915225,10.1392772 6.53764282,10.5732394 5.99047301,11.1204093 C5.4433032,11.6675791 5.00934093,12.3090885 4.70745414,13.0260696 C4.38669942,13.7619187 4.23575603,14.5543715 4.23575603,15.3468244" id="路径" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-dianzan.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-dianzan</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-20.000000, -599.000000)" stroke="#939599" stroke-width="1.6">
+            <g id="编组-9" transform="translate(0.000000, 435.000000)">
+                <g id="编组-10" transform="translate(0.000000, 141.000000)">
+                    <g id="编组" transform="translate(20.000000, 23.000000)">
+                        <g transform="translate(2.000000, 4.000000)">
+                            <path d="M18.2643886,1.67322888 C15.9264302,-0.46048296 12.4195115,-0.602819936 10.0815906,1.53091005 C7.59791966,-0.60280179 4.09141304,-0.46048296 1.7534547,1.67322888 C-0.5844849,3.94964061 -0.5844849,7.50543384 1.7534547,9.78108344 L8.62036194,16.4664574 C8.96722254,16.8077866 9.44099683,17 9.93545648,17 C10.4299161,17 10.9036904,16.8077866 11.250551,16.4664574 L18.1182638,9.7810653 C20.6023282,7.64735346 20.6023469,3.80694071 18.2643886,1.67322888 Z" id="路径" fill-rule="nonzero"></path>
+                            <path d="M14.6379537,3.82044137 C16.3109401,4.42036124 16.8090561,5.65441207 16.1323018,7.52259385" id="路径-3" stroke-linecap="round"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-guanyuwomen.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-guanyuwomen</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-20.000000, -812.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(0.000000, 435.000000)">
+                <g id="编组-8" transform="translate(0.000000, 354.000000)">
+                    <g id="info_icon_list_01" transform="translate(20.000000, 23.000000)">
+                        <g id="编组" transform="translate(2.000000, 2.000000)">
+                            <path d="M0.56682444,10.0246272 C0.56682444,4.77860496 4.81150749,0.541455467 10.0668244,0.541455467 C15.3221226,0.541455467 19.5668244,4.77862367 19.5668244,10.0246272 C19.5668244,15.2706307 15.3221414,19.5414555 10.0668244,19.5414555 C4.81150749,19.5414555 0.56682444,15.2706494 0.56682444,10.0246272 Z" id="路径" stroke="#979797" stroke-width="1.6"></path>
+                            <path d="M10.5327323,4.32243159 C10.2141235,4.32243159 9.96633415,4.4286411 9.71852509,4.64102071 C9.50614547,4.85343974 9.36454592,5.13661913 9.36454592,5.45522796 C9.36454592,5.77383679 9.47075544,6.02160644 9.71854479,6.2694155 C9.93092441,6.48181482 10.2141235,6.58800463 10.5327323,6.58800463 C10.8513215,6.58800463 11.0991305,6.48179512 11.3469396,6.2694155 C11.5593192,6.05701618 11.6655287,5.77381709 11.6655287,5.45520826 C11.6655287,5.13661913 11.5593192,4.88882977 11.3469199,4.64102071 C11.0991305,4.42862139 10.8513412,4.32243159 10.5327126,4.32243159 L10.5327323,4.32243159 Z" id="路径" fill="#939599"></path>
+                            <path d="M10.4619326,14.4467401 C10.355723,14.3405306 10.320333,14.1281509 10.320333,13.8449518 C10.320333,13.7387423 10.320333,13.5617528 10.355723,13.3493731 C10.3911328,13.1369541 10.4265228,12.9245548 10.4619326,12.7475652 L10.8867312,10.5527722 C10.9221212,10.3403729 10.957531,10.1279736 10.957531,9.88018424 C10.957531,9.63239489 10.992921,9.4553856 10.992921,9.38460553 C10.992921,8.92439715 10.8867115,8.53498855 10.6389221,8.25178945 C10.4265228,7.96859036 10.1079337,7.82701052 9.68313505,7.82701052 C9.47073573,7.82701052 9.22294638,7.89781029 8.93974728,8.0040001 C8.69193823,8.11020961 8.40873913,8.25178945 8.12554004,8.42879874 L8.01933053,9.10138673 C8.09015,9.0659967 8.19633981,8.99517722 8.30254932,8.95978719 C8.40875884,8.92439715 8.55033868,8.88898741 8.65654819,8.88898741 C8.86894751,8.88898741 9.04593709,8.95978719 9.11673687,9.0659967 C9.18753664,9.17220621 9.22294638,9.38458583 9.22294638,9.66778492 C9.22294638,9.80938447 9.22294638,9.98637405 9.18753664,10.1633636 C9.1521466,10.3403729 9.11673687,10.5527722 9.08132713,10.7651716 L8.69195793,12.9599645 C8.65654819,13.2077539 8.62113845,13.3847632 8.62113845,13.5617528 C8.58574842,13.738762 8.58574842,13.9157516 8.58574842,14.0927412 C8.58574842,14.5529496 8.69195793,14.9069484 8.93974728,15.2255376 C9.18753664,15.5087367 9.50614547,15.6503362 9.93092441,15.6503362 C10.2141235,15.6503362 10.4265228,15.6149462 10.6389221,15.5087367 C10.8513412,15.4025272 11.1345206,15.2609473 11.4531294,15.048548 L11.5593389,14.3759403 L11.2761201,14.5175398 C11.1345206,14.5529496 11.0283307,14.5883396 10.9221212,14.5883396 C10.7097219,14.6237494 10.5327323,14.5529496 10.4619326,14.4467401 L10.4619326,14.4467401 Z" id="路径" fill="#939599"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-jifen.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-jifen</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.580392 0 0 0 0 0.588235 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+        <path d="M9.94121751,8.85419437 C5.57789998,8.85419437 0.94126773,7.30277593 0.94126773,4.43046321 C0.94126773,1.55801197 5.57789998,0.00443262411 9.94121751,0.00443262411 C14.3046355,0.00443262411 18.9412677,1.55585106 18.9412677,4.42819149 C18.9412677,7.30050421 14.3046606,8.85419437 9.94121751,8.85419437 Z" id="path-2"></path>
+    </defs>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-20.000000, -528.000000)">
+            <g id="编组-9" transform="translate(0.000000, 435.000000)">
+                <g id="编组" transform="translate(0.000000, 70.000000)" filter="url(#filter-1)">
+                    <g transform="translate(20.000000, 23.000000)">
+                        <g transform="translate(2.000000, 4.000000)" fill-rule="nonzero" id="路径">
+                            <g stroke="#979797">
+                                <use stroke-width="1" xlink:href="#path-2"></use>
+                                <use stroke-width="1.6" xlink:href="#path-2"></use>
+                            </g>
+                            <path d="M9.94121232,13.2185007 C5.15852172,13.2185007 0.0121897163,12.0948305 0.0121897163,9.62585882 C0.0121897163,9.21581339 0.346797429,8.88336658 0.756842863,8.88336658 C1.1668883,8.88336658 1.50160683,9.21581339 1.50160683,9.62585882 C1.50160683,10.2553746 4.37391955,11.733627 9.94121232,11.733627 C15.5085882,11.733627 18.3809286,10.2554023 18.3809286,9.62585882 C18.3809286,9.21581339 18.7133754,8.88336658 19.1256926,8.88336658 C19.5356272,8.88336658 19.8703457,9.21581339 19.8703457,9.62585882 C19.8703457,12.0948305 14.7240414,13.2185007 9.94121232,13.2185007 Z" fill="#000000"></path>
+                            <path d="M9.94121232,16.7557347 C5.15852172,16.7557347 0.0121897163,15.6320922 0.0121897163,13.1630929 C0.0121897163,12.7530474 0.346797429,12.4206006 0.756842863,12.4206006 C1.1668883,12.4206006 1.50160683,12.7530474 1.50160683,13.1630929 C1.50160683,13.7926086 4.37391955,15.270861 9.94121232,15.270861 C15.5085882,15.270861 18.3809286,13.7926086 18.3809286,13.1630929 C18.3809286,12.7530474 18.7133754,12.4206006 19.1256926,12.4206006 C19.5356272,12.4206006 19.8703457,12.7530474 19.8703457,13.1630929 C19.8703457,15.6320922 14.7240414,16.7557347 9.94121232,16.7557347 Z" fill="#000000"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon_dizhi.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_dizhi</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.580392 0 0 0 0 0.588235 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-20.000000, -670.000000)">
+            <g id="编组-9" transform="translate(0.000000, 435.000000)">
+                <g id="编组-8" transform="translate(0.000000, 212.000000)">
+                    <g id="编组" transform="translate(20.000000, 23.000000)" filter="url(#filter-1)">
+                        <g transform="translate(2.000000, 2.000000)">
+                            <path d="M4.99493465,2.20390422 C7.731133,-0.528545753 12.1567389,-0.528545753 14.8935924,2.20390422 C16.2094347,3.5148584 16.9458642,5.29985064 16.9381058,7.15934209 C16.9444094,8.94010759 16.2681107,10.6553053 15.0488423,11.9506491 L14.8935924,12.1101843 L11.5101917,15.5057228 C10.6802449,16.3351304 9.34968653,16.3742418 8.47266437,15.59501 L8.37768022,15.5057228 L4.99493465,12.1246278 C2.31397641,9.45002027 2.24514524,5.12232727 4.8396847,2.36343938 L4.99493465,2.20390422 Z" id="路径" stroke="#979797" stroke-width="1.6" fill-rule="nonzero"></path>
+                            <path d="M10.659307,4.39352018 C11.527524,4.62283323 12.2060358,5.30012606 12.4368259,6.16784592 C12.667616,7.03556578 12.415224,7.96038908 11.7756266,8.59063515 C10.7978779,9.55408834 9.22605635,9.54900802 8.25455773,8.57925462 C7.28305911,7.60950123 7.27535783,6.03789618 8.23730594,5.05867087 C8.86656747,4.41810741 9.79108989,4.16420714 10.659307,4.39352018 Z" id="路径" stroke="#979797" stroke-width="1.6" fill-rule="nonzero"></path>
+                            <path d="M15.8910463,13.8941406 C15.6676831,14.2841406 15.790918,14.7746406 16.1737164,15.0198906 C16.8361041,15.3813906 17.1996471,15.7683906 17.1996471,16.0503906 C17.1996471,17.0666406 13.9154366,18.2913906 9.93802966,18.2913906 C5.96062273,18.2913906 2.6764122,17.0666406 2.6764122,16.0503906 C2.6764122,15.7683906 3.03918499,15.3813906 3.69078961,15.0273906 C4.08514134,14.7746406 4.20837626,14.2833906 3.98501297,13.8941406 C3.76162258,13.5050275 3.26777504,13.3496398 2.85279218,13.5378906 C1.50876137,14.2713906 0.938029661,15.1481406 0.938029661,16.0503906 C0.938029661,18.4353906 5.03173955,19.9893906 9.93802966,19.9893906 C14.8443198,19.9893906 18.9380297,18.4353906 18.9380297,16.0503906 C18.9380297,15.1481406 18.3680682,14.2713906 17.0363609,13.5446406 L17.0240374,13.5378906 C16.6088548,13.3491697 16.1144753,13.504619 15.8910463,13.8941406 Z" id="路径" fill="#000000" fill-rule="nonzero"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon_liaojiegengduo.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_liaojiegengduo</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-20.000000, -741.000000)" fill-rule="nonzero" stroke="#979797" stroke-width="1.6">
+            <g id="编组-9" transform="translate(0.000000, 435.000000)">
+                <g id="编组-8" transform="translate(0.000000, 283.000000)">
+                    <g id="info_icon_list_01" transform="translate(20.000000, 23.000000)">
+                        <g id="编组-3" transform="translate(3.001125, 3.016031)">
+                            <path d="M5.51226316,7.66089474 L2.14863158,7.66089474 C0.965360186,7.652762 0.0081327369,6.69553455 5.91526828e-13,5.51226316 L5.91526828e-13,2.14863158 C0.0081327369,0.965360186 0.965360186,0.0081327369 2.14863158,-2.68416868e-13 L5.51226316,-2.68416868e-13 C6.69553455,0.0081327369 7.652762,0.965360186 7.66089474,2.14863158 L7.66089474,5.51226316 C7.652762,6.69553455 6.69553455,7.652762 5.51226316,7.66089474 Z" id="路径"></path>
+                            <path d="M5.51226316,17.9744211 L2.14863158,17.9744211 C0.965120259,17.9668622 0.00755888817,17.0093008 4.03803307e-12,15.8257895 L4.03803307e-12,12.4621579 C0.0081327369,11.2788865 0.965360186,10.3216591 2.14863158,10.3135263 L5.51226316,10.3135263 C6.69553455,10.3216591 7.652762,11.2788865 7.66089474,12.4621579 L7.66089474,15.8257895 C7.652762,17.0090609 6.69553455,17.9662883 5.51226316,17.9744211 Z" id="路径"></path>
+                            <path d="M15.8225921,7.66089474 L12.4589605,7.66089474 C11.2754492,7.65333585 10.3178878,6.69577448 10.3103289,5.51226316 L10.3103289,2.14863158 C10.3103289,0.973065789 11.2823289,-2.692583e-13 12.4589605,-2.692583e-13 L15.8225921,-2.692583e-13 C16.9981579,-2.692583e-13 17.9701579,0.973065789 17.9701579,2.14863158 L17.9701579,5.51226316 C17.9626055,6.69536214 17.0056872,7.65275535 15.8225921,7.66089474 L15.8225921,7.66089474 Z" id="路径"></path>
+                            <path d="M14.7290921,17.9744211 L13.5524605,17.9744211 C11.7642396,17.9697384 10.3155996,16.5215745 10.3103289,14.7333553 L10.3103289,13.5567237 C10.3144288,11.767672 11.7634103,10.3182142 13.5524605,10.3135263 L14.7290921,10.3135263 C16.5177261,10.3187996 17.9660606,11.7680866 17.9701579,13.5567237 L17.9701579,14.7333553 C17.9643085,16.520918 16.5166548,17.9685717 14.7290921,17.9744211 L14.7290921,17.9744211 Z" id="路径"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/img_default_photo.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="78px" height="78px" viewBox="0 0 78 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>img_default_photo</title>
+    <defs>
+        <linearGradient x1="6.08107286%" y1="43.7750736%" x2="94.0756092%" y2="57.9888332%" id="linearGradient-1">
+            <stop stop-color="#FDFB60" offset="0%"></stop>
+            <stop stop-color="#FF8F3E" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-21.000000, -119.000000)">
+            <g id="编组-2" transform="translate(16.000000, 114.000000)">
+                <g id="路径" transform="translate(5.000000, 5.000000)">
+                    <path d="M0,39 C0,60.5391052 17.4608948,78 39,78 C60.5391052,78 78,60.5391052 78,39 C78,17.4608948 60.5391052,0 39,0 C17.4608948,0 0,17.4608948 0,39 Z" fill="#FFE7D4"></path>
+                    <path d="M49.2426315,31.6875 C56.5551315,21.7450658 55.1439473,38.2302632 48.3446053,38.8717105 C37.6324342,42.399671 49.2426316,31.6875 49.2426315,31.6875 Z" fill="#FBEBE8" fill-rule="nonzero"></path>
+                    <path d="M29.6168255,31.6505519 C36.9293255,21.7081177 35.5181413,38.1933151 28.7187993,38.8347624 C18.0066282,42.3627229 29.6168256,31.6505519 29.6168255,31.6505519 Z" fill="#FBEBE8" fill-rule="nonzero" transform="translate(29.337477, 34.008859) scale(-1, 1) translate(-29.337477, -34.008859) "></path>
+                    <path d="M29.5065789,39.1924342 C29.9160331,42.1602022 30.6402022,47.7405553 25.5956942,53.1195534 C20.5511861,58.4985515 39.1282894,65.2993421 39.1282895,65.2993421 C39.1282896,65.2993421 54.7827331,59.4725897 55.6807595,56.714366 C61.1972069,52.0318002 46.2002814,56.714366 49.4555921,39.7055921 C42.2713816,35.1513158 29.5065789,39.1924342 29.5065789,39.1924342 Z" fill="#FFFCF4" fill-rule="nonzero"></path>
+                    <path d="M30.3125183,41.8621555 C31.1218404,44.3735236 42.2331817,54.8406565 52.3798527,52.274867 C48.3039786,48.157742 48.7782838,43.4551629 49.96875,38.8717105 C50.6697237,37.3322368 44.1176464,38.3290518 30.3125183,41.8621555 Z" fill="#F3E8E4" fill-rule="nonzero"></path>
+                    <path d="M39,78 C53.1990789,78 65.6226315,70.4098815 72.4430132,59.0675526 C72.4419868,59.0495921 72.4419868,59.0295789 72.4404474,59.0131579 C70.4735132,56.0199079 56.9600132,51.4866711 51.6575526,51.4866711 C40.7585193,67.8392903 26.8369747,55.0904976 26.8369747,51.4866711 C19.5730943,51.1933945 10.9969737,56.4586579 6.084,59.9065658 C13.0054737,70.7798685 25.1555132,78 39,78 Z" fill="url(#linearGradient-1)"></path>
+                    <path d="M39.6311842,12.8289474 C43.8005921,13.5986842 49.6377632,13.9835527 50.4075,19.8207237 C58.5538815,53.8174342 22.1196711,58.5641447 26.8022368,22.8996711 C29.1755921,10.2631579 39.6311842,12.8289474 39.6311842,12.8289474 Z" fill="#FFFCF4"></path>
+                    <path d="M30.4456579,17.4473685 C32.7040658,18.9868421 37.2634737,24.0327237 48.3179211,21.5526315 C49.2641842,25.2304342 48.7910526,25.2304342 51.3501711,29.1217105 C53.2211447,29.7631579 58.6411185,11.3536184 42.7686315,8.85197366 C24.1871842,5.96546049 21.7455789,22.6056323 26.52,28.5069481 C27.6812763,27.2881981 26.8325132,20.3338816 30.4456579,17.4473685 Z" fill="#766B5A"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_daizhifu.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="30px" viewBox="0 0 31 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_daizhifu</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-127.000000, -309.000000)">
+            <g id="编组-4" transform="translate(128.000000, 309.000000)">
+                <g id="编组-11"></g>
+                <g id="编组" transform="translate(3.000000, 4.000000)" fill-rule="nonzero">
+                    <path d="M18.1377461,12.2536925 C18.1559933,11.6678396 18.5939257,11.1770678 19.1855186,11.0771846 C19.7719131,10.9713835 20.3538353,11.2838502 20.5895914,11.8311101 C20.8133595,12.3727839 20.6116801,12.9932117 20.1094024,13.3111089 C19.6031123,13.6327292 18.9428542,13.5681664 18.5084521,13.1545614 C18.2631787,12.9205209 18.1284881,12.5935523 18.1377461,12.2546529 L18.1377461,12.2536925 Z" id="路径" fill="#FDFB60"></path>
+                    <path d="M7.27748336,4.14034723 C8.27051432,3.59963384 9.26546603,3.12038697 10.1355686,2.64210048 C10.9451673,2.22047849 11.6913811,1.86032301 12.4980987,1.4415823 C13.2433521,1.02092073 13.8685583,0.721271377 14.3007284,0.480207301 C14.8325519,0.177109125 15.4318071,0.0120187701 16.0438147,-7.47299658e-13 C16.4884698,0.0105645565 16.9292833,0.0921997951 17.3480082,0.24010365 C17.7484858,0.431226158 18.1067069,0.696300561 18.4044241,1.0209207 C19.0548474,2.18684514 19.5426649,3.06128848 19.8678765,3.6442507 C19.9293771,3.75449437 20.021628,3.91985989 20.1446292,4.14034723" id="路径" stroke="#FDFB60" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M21.4028177,4.51284258 C21.8327183,4.49719697 22.249349,4.66202231 22.552134,4.96712188 C22.8714781,5.26931788 23.0407695,5.65751996 23.0371624,6.0715039 L23.0371624,6.0715039 L23.0371624,8.89214993 L17.6072957,8.89214993 C16.6926423,8.8686427 15.8085026,9.22236453 15.1623811,9.87022435 C14.5078159,10.4909109 14.1395542,11.355447 14.1459819,12.2517716 C14.1459819,12.8266529 14.2835298,13.3929481 14.549455,13.9077316 C14.7802632,14.4082207 15.1577291,14.8299036 15.6350376,15.1207527 C16.248471,15.4735099 16.929368,15.6417276 17.6148119,15.6133142 L17.6148119,15.6133142 L23.0998035,15.6133142 L23.0998035,19.6994976 C23.1030937,19.9026843 23.0650399,20.1043769 22.9878197,20.2921973 C22.8988111,20.483247 22.7854839,20.6619652 22.6506538,20.8238883 C22.5141791,20.9579726 22.3530343,21.0644834 22.1760102,21.1374848 C21.9668483,21.2166969 21.7439862,21.2556078 21.5122076,21.2537477 L21.5122076,21.2537477 L2.66865278,21.2537803 C2.20696203,21.2577095 1.76110975,21.0855327 1.42194996,20.7722337 C1.21749971,20.6096532 1.09476853,20.4720538 1.00002727,20.3158236 C0.931584108,20.1373226 0.897806199,19.9472214 0.900698452,19.7557301 L0.900698452,19.7557301 L0.900698452,6.05894949 C0.887873551,5.65700706 1.0523187,5.26995203 1.35013145,5.00021198 C1.68622517,4.67320872 2.10655518,4.50594918 2.54223853,4.51284258 L2.54223853,4.51284258 Z" id="路径" stroke="#FFFFFF" stroke-width="1.8"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_dingdan.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="30px" viewBox="0 0 31 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_dingdan</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-37.000000, -309.000000)" fill-rule="nonzero">
+            <g id="编组-5" transform="translate(38.000000, 309.000000)">
+                <g id="编组" transform="translate(4.000000, 3.000000)">
+                    <path d="M17.402151,11.1423227 C17.3600847,10.5931459 16.8925735,10.1791045 16.3144889,10.1791045 L5.65503879,10.1791045 C5.08162511,10.1791045 4.59701493,10.6302991 4.59701493,11.1642816 C4.59701493,11.6981615 5.08162511,12.1492537 5.65503879,12.1492537 L16.3447666,12.1492537 C16.9183749,12.1492537 17.4029851,11.6981615 17.4029851,11.1642816 L17.402151,11.1423227 Z" id="路径" fill="#FDFB60"></path>
+                    <path d="M8.66393465,2.95522388 L13.6950684,2.95522388 C14.4590206,2.95522388 15.1044776,2.27853933 15.1044776,1.47757316 C15.1044776,0.662826652 14.458401,0 13.6643109,0 L8.66393465,0 C7.86984455,0 7.2238806,0.662800806 7.2238806,1.47757316 C7.2238806,2.29234551 7.86987274,2.95522388 8.66393465,2.95522388 Z" id="路径" fill="#FFFFFF"></path>
+                    <path d="M16.3447388,6.23880597 L5.65503879,6.23880597 C5.08162511,6.23880597 4.59701493,6.68987469 4.59701493,7.22393184 C4.59701493,7.7578865 5.08162511,8.20895522 5.65503879,8.20895522 L16.3447666,8.20895522 C16.9183749,8.20895522 17.4029851,7.7578865 17.4029851,7.22393184 C17.4029851,6.68987467 16.9183471,6.23880597 16.3447388,6.23880597 Z" id="路径" fill="#FDFB60"></path>
+                    <path d="M16.3144889,14.4477612 L5.65503879,14.4477612 C5.08162511,14.4477612 4.59701493,14.8989559 4.59701493,15.4329383 C4.59701493,15.9668183 5.08162511,16.4179104 5.65503879,16.4179104 L16.3447666,16.4179104 C16.9183749,16.4179104 17.4029851,15.9668183 17.4029851,15.4329383 L17.402151,15.4109794 C17.3600847,14.8618282 16.8925457,14.4477612 16.3144889,14.4477612 Z" id="路径" fill="#FDFB60"></path>
+                    <path d="M21.1818613,1.58378228 C20.6146144,0.977302117 19.8006938,0.656716418 18.8281516,0.656716418 L17.4075784,0.656716418 C16.8414693,0.656716418 16.2305709,1.02526658 16.2305709,1.62047551 C16.2305709,2.1831048 16.8135523,2.73528557 17.4075784,2.73528557 L18.8281516,2.73528557 C19.4901385,2.73528557 19.9179672,3.16227614 19.9179672,3.82322019 L19.9179672,20.1469291 C19.9179672,20.8078731 19.4901108,21.2348637 18.8281516,21.2348637 L3.53443578,21.2348637 C2.84886096,21.2348637 2.08203284,20.7696442 2.08203284,20.1469291 L2.08203284,3.82324761 C2.08203284,3.16230353 2.50977825,2.73531299 3.17184843,2.73531299 L4.95509219,2.73531299 C5.47829913,2.73531299 5.82981407,2.28726085 5.82981407,1.62050292 C5.82981407,1.01701198 5.5028028,0.656716418 4.95509219,0.656716418 L3.17184843,0.656716418 C1.18569338,0.656716418 0,1.85179631 0,3.85341394 L0,19.9960426 C0,22.0112625 1.30432655,23.3134328 3.32294961,23.3134328 L18.6769394,23.3134328 C20.8198844,23.3134328 22,22.1352461 22,19.9960426 L22,3.85338652 C22,2.94082791 21.7171397,2.15600995 21.1818613,1.58378228 Z" id="路径" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_dingdan_daishouhuo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="30px" viewBox="0 0 31 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_dingdan_daishouhuo</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-217.000000, -309.000000)" fill-rule="nonzero">
+            <g id="编组-3" transform="translate(218.000000, 309.000000)">
+                <g id="编组" transform="translate(3.000000, 3.000000)">
+                    <path d="M15.3979167,18.863447 L15.3494318,18.863447 C15.1070076,18.8513258 14.8888258,18.7422348 14.7191288,18.5604167 C14.4039773,18.2210227 14.4039773,17.6998106 14.7191288,17.3482955 C14.7191288,17.3361742 14.73125,17.3361742 14.73125,17.324053 L16.0767045,15.9785985 L5.65246212,15.9785985 C5.16761364,16.0028409 4.74337121,15.6149621 4.70700758,15.1301136 C4.69488636,14.8876894 4.77973485,14.6573864 4.93731061,14.4755682 C5.09488636,14.29375 5.32518939,14.1846591 5.56761364,14.1725379 L18.2706439,14.1725379 C18.7797348,14.1846591 19.1797348,14.5967803 19.1676136,15.09375 C19.1676136,15.324053 19.0706439,15.5543561 18.9130682,15.724053 L16.0160985,18.6210227 C16.0039773,18.6331439 16.0039773,18.6331439 15.9918561,18.6331439 C15.8342803,18.7785985 15.6160985,18.863447 15.3979167,18.863447 Z M18.2706439,10.8270833 L5.64034091,10.8270833 C5.13125,10.8270833 4.73125,10.4149621 4.73125,9.90587121 C4.73125,9.67556818 4.8282197,9.44526515 4.98579545,9.27556818 L7.88276515,6.37859848 L7.90700758,6.35435606 C8.08882576,6.1967803 8.31912879,6.11193182 8.56155303,6.13617424 C8.80397727,6.14829545 9.02215909,6.26950758 9.17973485,6.45132576 C9.47064394,6.7907197 9.47064394,7.29981061 9.17973485,7.63920455 L9.15549242,7.66344697 L7.8342803,9.02102273 L18.2706439,9.02102273 C18.5130682,9.02102273 18.7433712,9.11799242 18.9130682,9.28768939 C19.0827652,9.45738636 19.1797348,9.68768939 19.1797348,9.93011364 C19.1797348,10.4149621 18.8039773,10.8028409 18.33125,10.8392045 C18.3070076,10.8270833 18.2827652,10.8270833 18.2706439,10.8270833 L18.2706439,10.8270833 Z" id="形状" fill="#FDFB60"></path>
+                    <path d="M11.9554924,0.705871212 C5.74943182,0.705871212 0.707007576,5.77253788 0.707007576,12.0028409 C0.707007576,18.2331439 5.74943182,23.2998106 11.9554924,23.2998106 C18.161553,23.2998106 23.2039773,18.2331439 23.2039773,12.0028409 C23.2039773,5.77253788 18.161553,0.705871212 11.9554924,0.705871212 Z" id="路径" stroke="#FFFFFF" stroke-width="1.8"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_jingxuanxilie.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_jingxuanxilie</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="收藏探索" transform="translate(-27.000000, -320.000000)">
+            <g id="编组-8" transform="translate(16.000000, 306.000000)">
+                <g id="编组-2" transform="translate(4.000000, 14.000000)">
+                    <g id="编组" transform="translate(7.000000, 0.000000)">
+                        <circle id="椭圆形" fill="#E0E1FF" cx="19" cy="19" r="19"></circle>
+                        <g transform="translate(6.333333, 8.444444)" fill-rule="nonzero">
+                            <path d="M17.8434809,6.82175141 L19.6316039,1.27608914 C19.7079379,1.03945386 19.5323697,0.799001883 19.2842844,0.799001883 L14.2710515,0.799001883 C13.9886158,0.799001883 13.8130477,1.10433773 13.9542655,1.3486064 L17.1793754,6.89426868 C17.3396767,7.16716259 17.7461551,7.12327056 17.8434809,6.82175141 Z" id="路径" fill="#656CF9"></path>
+                            <path d="M3.9220747,2.3333145 C4.04978729,2.13073591 4.31526235,2.11447542 4.47355022,2.25326286 C4.50648003,2.28229258 4.53427419,2.31667607 4.55553855,2.35672859 L4.58236347,2.42109856 L6.38002825,8.16522913 C6.4476879,8.38035211 6.30716401,8.59862939 6.09466483,8.635113 L6.02889203,8.64041932 L0.635897677,8.60987445 C0.373499686,8.60812513 0.205710748,8.34179117 0.297161308,8.11073516 L0.328653484,8.04881984 L3.9220747,2.3333145 Z" id="路径" fill="#868CFF"></path>
+                            <path d="M19.3682517,8.71865035 L24.6658286,8.74919272 C24.9501726,8.75109228 25.1276491,8.44193974 24.9826146,8.19767106 L21.5475863,2.39247332 C21.387285,2.12148776 20.9808067,2.16728814 20.8853892,2.46689893 L19.0247489,8.24156309 C18.987982,8.35203348 19.0065005,8.47343987 19.07453,8.56792531 C19.1425596,8.66241075 19.2518237,8.7184803 19.3682517,8.71865035 L19.3682517,8.71865035 Z M6.75215631,10.2014375 L0.903066541,10.1670797 C0.593913999,10.1651789 0.422162586,10.5239485 0.616814187,10.7644005 L10.1051255,22.4225047 C10.358936,22.7354739 10.8589234,22.4663967 10.7386974,22.0828186 L7.09756748,10.4590647 C7.04985876,10.3063967 6.91054928,10.2033459 6.75215631,10.2014375 Z M18.6354457,10.2720204 L24.3681262,10.3044884 C24.6753704,10.3063967 24.8433051,10.663258 24.6486535,10.9018016 L24.6486535,10.9018016 L15.1985091,22.4034212 C14.940882,22.7163905 14.4428029,22.4434965 14.5668456,22.0599184 L14.5668456,22.0599184 L18.2862178,10.5239485 C18.3339266,10.373189 18.4770527,10.2701381 18.6354457,10.2720204 L18.6354457,10.2720204 Z M9.15285938,10.2166935 L16.236651,10.258688 C16.482828,10.258688 16.6583961,10.5010483 16.5820621,10.7357753 L16.5820621,10.7357753 L12.9962743,21.8614501 C12.8855901,22.2011362 12.4046861,22.1992279 12.2978186,21.8595417 L12.2978186,21.8595417 L8.80172316,10.6918832 C8.76654791,10.5804293 8.78683157,10.4588728 8.85628917,10.3648786 C8.92574678,10.2708843 9.03598993,10.2158039 9.15285938,10.2166935 L9.15285938,10.2166935 Z" id="形状" fill="#3640FF"></path>
+                            <path d="M9.58223792,8.66139987 L15.7900973,8.69766735 C16.072533,8.69956685 16.2500094,8.39232266 16.1087916,8.14805399 L13.0363497,2.86765223 C12.8970402,2.62720025 12.5497207,2.6252919 12.4065945,2.86383553 L9.26926868,8.10797866 C9.12423415,8.35033898 9.29789391,8.65949153 9.58223792,8.66139987 Z" id="路径" fill="#868CFF"></path>
+                            <path d="M8.22731011,6.81793471 L11.496312,1.3524231 C11.6413465,1.10815443 11.4657784,0.799001883 11.1814344,0.799001883 L6.20255179,0.799001883 C5.95637476,0.799001883 5.77889831,1.03754551 5.85332392,1.27418079 L7.56511299,6.7396924 C7.6586221,7.04121155 8.06510044,7.08892028 8.22731011,6.81793471 L8.22731011,6.81793471 Z" id="路径" fill="#868CFF"></path>
+                            <path d="M10.3150439,20.7297991 L7.09756748,10.4590647 C7.05058789,10.3067487 6.90964402,10.2029768 6.75024796,10.2033459 L0.901158192,10.168988 C0.59200565,10.1670873 0.420254237,10.5258569 0.614905838,10.7663089 L8.9238575,20.9740678 C9.39521971,20.9130006 9.85894852,20.8309416 10.3150439,20.7297991 Z M16.236651,10.2567797 L9.15285938,10.2147851 C9.03598993,10.2138956 8.92574678,10.268976 8.85628917,10.3629702 C8.78683157,10.4569645 8.76654791,10.5785209 8.80172316,10.6899749 L11.8150063,20.313779 C12.4791117,20.0924105 13.1260421,19.8309667 13.7481638,19.5275392 L16.5820621,10.7338669 C16.6583961,10.49914 16.482828,10.258688 16.236651,10.2567797 L16.236651,10.2567797 Z M20.8834809,2.46689893 L19.0228406,8.24156309 C18.9465066,8.47629002 19.1220747,8.71865035 19.3682517,8.71865035 L22.1258161,8.73391714 C22.3377961,7.70031015 22.4445721,6.64789497 22.4445104,5.59277464 C22.4445104,4.95538606 22.4006183,4.32753923 22.3261927,3.70923415 L21.545678,2.39247332 C21.3853766,2.12148776 20.9808067,2.16537979 20.8834809,2.46689893 L20.8834809,2.46689893 Z M21.7193377,10.2892216 L18.637354,10.2720465 C18.4770527,10.2720465 18.3358349,10.373189 18.2862178,10.5258569 L15.7671971,18.3424545 C18.54957,16.4073886 20.6716541,13.5887571 21.7193377,10.2892216 L21.7193377,10.2892216 Z" id="形状" fill="#656CF9"></path>
+                            <path d="M8.36852793,14.518123 L7.09756748,10.4590647 C7.05058789,10.3067487 6.90964402,10.2029768 6.75024796,10.2033459 L0.901158192,10.168988 C0.59200565,10.1670873 0.420254237,10.5258569 0.614905838,10.7663089 L4.46213748,15.4932894 C5.82660703,15.3368048 7.13573446,15.0028437 8.36852793,14.518123 Z M8.80172316,10.6899749 L9.79788136,13.8692844 C11.5485859,12.963984 13.1112656,11.7341752 14.4027276,10.2453296 L9.15285938,10.214796 C8.90477401,10.214796 8.72729755,10.455248 8.80172316,10.6899749 L8.80172316,10.6899749 Z M14.2691431,0.799001883 C13.9867075,0.799001883 13.8111394,1.10433773 13.9523572,1.3486064 L16.8702228,6.36565599 C17.6316541,4.65005022 18.0915662,2.77414313 18.1812586,0.799001883 L14.2691431,0.799001883 Z" id="形状" fill="#868CFF"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_manghexilie.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_manghexilie</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="收藏探索" transform="translate(-215.000000, -320.000000)">
+            <g id="编组-8" transform="translate(16.000000, 306.000000)">
+                <g id="编组-2" transform="translate(192.000000, 14.000000)">
+                    <g id="编组" transform="translate(7.000000, 0.000000)">
+                        <circle id="椭圆形" fill="#C4E3FF" cx="19" cy="19" r="19"></circle>
+                        <g id="编组-6" transform="translate(8.018322, 9.008273)">
+                            <path d="M21.9218105,6.39899007 L21.9218105,18.7189431 C21.9218105,19.3160403 21.4421176,19.8000832 20.8503863,19.8000832 L1.07294973,19.8000832 C0.481109115,19.8000832 0.00122292544,19.3161505 0.000849994999,18.7189431 L0.000849994999,6.39899007 L6.6273316,6.39899007 L6.6273316,9.15841959 L6.63408711,9.24840099 C6.67936298,9.54727481 6.93367392,9.76830689 7.23330102,9.76920241 L14.6893595,9.76920241 L14.7792078,9.76170396 C15.0751437,9.7160576 15.2941094,9.45982346 15.2953289,9.15773791 L15.2953289,6.39830839 L21.921135,6.39830839 L21.9218105,6.39899007 Z" id="路径" fill="#1142EB" fill-rule="nonzero"></path>
+                            <path d="M17.6448959,8.44380449e-05 L4.34059083,8.44380449e-05 C3.99777092,-0.000439339134 3.6753754,0.164500479 3.4731831,0.44385758 L0.00625440451,5.24218377 L22.00085,5.24218377 L18.5089259,0.441812548 C18.3069316,0.164283828 17.9861373,0.000280880082 17.6448959,8.44380449e-05 Z" id="路径" fill="#1142EB" fill-rule="nonzero"></path>
+                            <g id="编组-5" transform="translate(0.000831, 0.000083)" fill="#2857F9" fill-rule="nonzero">
+                                <path d="M6.62650056,6.39890687 L6.62650056,9.15833639 L6.63325607,9.24831779 C6.67853194,9.54719161 6.93284288,9.7682237 7.23246998,9.76911921 L14.6885284,9.76911921 L14.7783767,9.76162076 C15.0743126,9.71597441 15.2932783,9.45974027 15.2944979,9.15765472 L15.2944979,6.3982252 L20.9746152,6.39805734 C20.7599104,13.3897069 15.0245799,18.9916433 7.98084717,18.9916433 C4.97236357,18.9916433 2.20256812,17.9696979 -0.000333780997,16.2540123 L1.89527766e-05,6.39890687 L6.62650056,6.39890687 Z" id="形状结合"></path>
+                                <polygon id="路径" points="14.0818835 6.39890687 14.0818835 8.54550854 7.83641274 8.54550854 7.83641274 6.39890687"></polygon>
+                                <path d="M17.6440649,1.24372063e-06 C17.9853063,0.000197685758 18.3061006,0.164200633 18.5080949,0.441729354 L18.5080949,0.441729354 L20.7459031,3.51856317 C20.8542413,4.08108114 20.9263202,4.65650637 20.9596119,5.2423109 L0.00542336228,5.24210057 L3.47235206,0.443774385 C3.67454436,0.164417284 3.99693988,-0.000522533458 4.33975979,1.24372063e-06 L4.33975979,1.24372063e-06 Z" id="形状结合"></path>
+                            </g>
+                            <g id="编组-4">
+                                <path d="M14.0827145,6.39899007 L14.0833899,7.47174508 C13.8438494,7.84439279 13.5842523,8.20292264 13.3061233,8.5458099 L7.83724378,8.54559174 L7.83724378,6.39899007 L14.0827145,6.39899007 Z" id="形状结合" fill="#577DFF" fill-rule="nonzero"></path>
+                                <path d="M6.6273316,6.39899007 L6.6273316,9.15841959 L6.63408711,9.24840099 C6.67936298,9.54727481 6.93367392,9.76830689 7.23330102,9.76920241 L12.1640716,9.76951335 C10.02051,11.7685483 7.14393842,12.9917265 3.98167822,12.9917265 C2.58572228,12.9917265 1.2454389,12.753364 -0.000691315474,12.3151196 L0.000849994999,6.39899007 L6.6273316,6.39899007 Z" id="形状结合" fill="#577DFF" fill-rule="nonzero"></path>
+                                <path d="M15.9412841,3.5249581e-13 C15.9680379,0.327038475 15.9816782,0.657789579 15.9816782,0.991726543 C15.9816782,2.48865423 15.7075863,3.92156433 15.2068518,5.24300758 L0.00625440451,5.24218377 L3.4731831,0.44385758 C3.6753754,0.164500479 3.99777092,-0.000439339134 4.34059083,8.44380449e-05 L4.34059083,8.44380449e-05 Z" id="形状结合" fill="#577DFF" fill-rule="nonzero"></path>
+                                <rect id="矩形" fill="#C4E3FF" x="1.75945599" y="15.4917265" width="7.91666667" height="1.68888889" rx="0.8"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_paimaixilie.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_paimaixilie</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 0.288743 0 0 0 0 0.359532 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="收藏探索" transform="translate(-309.000000, -320.000000)">
+            <g id="编组-8" transform="translate(16.000000, 306.000000)">
+                <g id="编组-2" transform="translate(286.000000, 14.000000)">
+                    <g id="编组" transform="translate(7.000000, 0.000000)">
+                        <circle id="椭圆形" fill="#FFE7E8" cx="19" cy="19" r="19"></circle>
+                        <g transform="translate(7.000000, 5.000000)">
+                            <rect id="矩形" fill="#FF2C41" fill-rule="nonzero" x="1.07142857" y="22.8571429" width="18.6428571" height="2.07142857" rx="1"></rect>
+                            <path d="M25.3936665,15.2268395 L16.6064527,11.8077057 L17.7494887,8.87132003 C18.3933894,9.08159839 19.0894283,8.75240267 19.3353763,8.121265 C19.5907142,7.46297202 19.2655573,6.72289113 18.6072644,6.46555842 L8.7049421,2.61554191 C8.04664912,2.36020403 7.30656823,2.68536086 7.04923552,3.34365384 C6.79389763,4.00194682 7.11905447,4.74202771 7.77734745,4.99936042 L7.82322847,5.01731387 L3.64805513,15.7474894 C3.00372594,15.5280584 2.29556228,15.8532153 2.04620888,16.4935548 C1.790871,17.1518478 2.11602784,17.8919287 2.77432081,18.1492614 L12.6766431,22.0012727 C13.334936,22.2566106 14.0750169,21.9314538 14.3323496,21.2731608 C14.5876875,20.6148678 14.2625307,19.8747869 13.6042377,19.6174542 L13.5743153,19.6054852 L14.7492685,16.5873117 L23.5364824,20.0064455 C24.7772649,20.4891937 26.1756388,19.8747869 26.658387,18.6320096 L26.7681025,18.3507389 C27.2508506,17.1079616 26.634449,15.7095877 25.3936665,15.2268395 L25.3936665,15.2268395 Z" id="路径" fill="#FF2C41" fill-rule="nonzero" transform="translate(14.445841, 12.308407) rotate(10.000000) translate(-14.445841, -12.308407) "></path>
+                            <g filter="url(#filter-1)" id="编组-7">
+                                <g transform="translate(1.322350, 1.580408)">
+                                    <path d="M12.0139094,21.2774056 C10.3858037,22.0112285 8.57941579,22.4195918 6.67764956,22.4195918 C4.77567208,22.4195918 2.96909414,22.0111378 1.34084714,21.2771611 Z" id="形状结合" fill="#FF2C41" fill-rule="nonzero"></path>
+                                    <path d="M7.39596923,0.615033323 C7.76370386,0.0114266501 8.54900415,-0.180276623 9.15295722,0.185493479 L9.15295722,0.185493479 L18.2362926,5.6965398 C18.8398993,6.06427442 19.0316025,6.84957472 18.6658324,7.45352779 C18.314025,8.03236863 17.5713963,8.23569725 16.9737923,7.9168013 L16.9737923,7.9168013 L15.3382236,10.6100905 L19.1926181,12.9497434 C18.7172424,14.6384344 17.9092781,16.1878069 16.8438957,17.5226902 L12.6792844,14.9945869 L10.998081,17.7628792 L11.0254704,17.7798623 C11.6290771,18.1475969 11.8207804,18.9328972 11.4550103,19.5368503 C11.0872757,20.1404569 10.3019754,20.3321602 9.6980223,19.9663901 L9.6980223,19.9663901 L0.615033323,14.4533793 C0.0114266501,14.0856446 -0.180276623,13.3003443 0.185493479,12.6963913 C0.542252435,12.1090797 1.29612039,11.9118341 1.89255698,12.239818 L1.89255698,12.239818 L7.86757548,2.39766916 L7.82550908,2.37202131 C7.2219024,2.00428669 7.03019913,1.21898639 7.39596923,0.615033323 Z" id="形状结合" fill="#FF2C41" fill-rule="nonzero"></path>
+                                </g>
+                            </g>
+                            <path d="M8.71831968,2.19544154 C9.0860543,1.59183487 9.87135459,1.40013159 10.4753077,1.7659017 L10.4753077,1.7659017 L13.5610486,3.63788263 C13.8473682,4.71031002 14,5.83733048 14,7 C14,12.2214578 10.9216643,16.7239318 6.480838,18.7915768 L1.93738377,16.0337875 C1.33377709,15.6660529 1.14207382,14.8807526 1.50784392,14.2767995 C1.86460288,13.6894879 2.61847083,13.4922423 3.21490742,13.8202262 L3.21490742,13.8202262 L9.18992593,3.97807738 L9.14785952,3.95242953 C8.54425285,3.5846949 8.35254957,2.79939461 8.71831968,2.19544154 Z" id="形状结合" fill="#FF5B5D" fill-rule="nonzero"></path>
+                            <path d="M10.3775188,8.03255908 L8.43455707,13.1652495 C8.28350845,13.5641837 7.89753033,13.824699 7.47105553,13.8155631 C7.3593452,13.8135683 7.24564005,13.7916252 7.13592456,13.7497339 C6.88607123,13.6552079 6.68406239,13.4652052 6.5744235,13.2216048 C6.46478461,12.9780044 6.456516,12.7008036 6.55144018,12.4511013 L8.49440188,7.31641611 C8.69188978,6.79576621 9.27238449,6.53444384 9.79303439,6.72993691 C10.3117855,6.9307383 10.5723964,7.51155365 10.3775188,8.03255908 L10.3775188,8.03255908 Z" id="路径" fill="#FFE7E8" fill-rule="nonzero" transform="translate(8.463952, 10.240452) rotate(10.000000) translate(-8.463952, -10.240452) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_yiwancheng.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="30px" viewBox="0 0 31 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_yiwancheng</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人中心" transform="translate(-307.000000, -309.000000)">
+            <g id="编组-6" transform="translate(308.000000, 309.000000)">
+                <path d="M21.0043139,5.09999999 L8.88769369,5.09999999 C8.24120543,5.10120322 7.63344593,5.40868959 7.25580158,5.92844545 L4.18333333,10.9543173 L4.18333333,23.4893086 C4.18333333,24.588556 5.0877748,25.4729167 6.19533094,25.4729167 L23.8046691,25.4729167 C24.9122252,25.4729167 25.8166667,24.588556 25.8166667,23.4893086 L25.8156011,10.9627686 L22.7089305,6.02029859 C22.3298055,5.43976273 21.6893328,5.09794347 21.0043139,5.09999999 Z" id="路径" stroke="#FFFFFF" stroke-width="1.8" fill-rule="nonzero"></path>
+                <rect id="矩形" fill="#FFFFFF" fill-rule="nonzero" x="4" y="10.4166667" width="22" height="1.8" rx="0.9"></rect>
+                <path d="M12.6916667,7.20833333 L17.3083333,7.20833333 C17.8053896,7.20833333 18.2083333,7.61127706 18.2083333,8.10833333 C18.2083333,8.60538961 17.8053896,9.00833333 17.3083333,9.00833333 L12.6916667,9.00833333 C12.1946104,9.00833333 11.7916667,8.60538961 11.7916667,8.10833333 C11.7916667,7.61127706 12.1946104,7.20833333 12.6916667,7.20833333 Z" id="矩形" fill="#FFFFFF" fill-rule="nonzero" transform="translate(15.000000, 8.108333) rotate(-270.000000) translate(-15.000000, -8.108333) "></path>
+                <rect id="矩形" fill="#FDFB60" x="6.66666667" y="15" width="4.58333333" height="1.8" rx="0.9"></rect>
+                <rect id="矩形" fill="#FDFB60" x="6.66666667" y="18.3" width="6.41666667" height="1.8" rx="0.9"></rect>
+                <path d="M16.6470422,18.0773901 L19.3388237,17.9575162 C19.8137663,17.9363654 20.2159295,18.3042364 20.2370802,18.7791791 C20.2376484,18.7919368 20.2379325,18.8047055 20.2379325,18.8174759 L20.2379325,18.8566639 C20.2379325,19.3381494 19.8589816,19.7343518 19.3779728,19.7557727 L16.6861913,19.8756466 C16.2112487,19.8967974 15.8090855,19.5289264 15.7879348,19.0539837 C15.7873666,19.041226 15.7870825,19.0284573 15.7870825,19.0156869 L15.7870825,18.9764989 C15.7870825,18.4950134 16.1660334,18.098811 16.6470422,18.0773901 Z" id="矩形" fill="#FDFB60" transform="translate(18.012508, 18.916581) rotate(-321.000000) translate(-18.012508, -18.916581) "></path>
+                <path d="M18.4075493,16.7946676 L23.024216,16.7946676 C23.5212723,16.7946676 23.924216,17.1976113 23.924216,17.6946676 C23.924216,18.1917238 23.5212723,18.5946676 23.024216,18.5946676 L18.4075493,18.5946676 C17.910493,18.5946676 17.5075493,18.1917238 17.5075493,17.6946676 C17.5075493,17.1976113 17.910493,16.7946676 18.4075493,16.7946676 Z" id="矩形" fill="#FDFB60" transform="translate(20.715883, 17.694668) rotate(-51.000000) translate(-20.715883, -17.694668) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/info_icon_yuanchangxilie.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info_icon_yuanchangxilie</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="收藏探索" transform="translate(-121.000000, -320.000000)">
+            <g id="编组-8" transform="translate(16.000000, 306.000000)">
+                <g id="编组-2" transform="translate(98.000000, 14.000000)">
+                    <g id="编组" transform="translate(7.000000, 0.000000)">
+                        <circle id="椭圆形" fill="#FFF1DC" cx="19" cy="19" r="19"></circle>
+                        <g id="编组-3" transform="translate(8.444444, 6.333333)" fill-rule="nonzero">
+                            <path d="M10.5173108,3.72925285e-13 C16.3167711,3.72925285e-13 21.0346216,4.71785049 21.0346216,10.5173108 C21.0346216,12.6610666 20.402585,14.7033845 19.1991804,16.4549789 L18.964026,16.7828792 L15.1395494,21.3467546 C14.9543013,21.6246268 14.6495383,21.7740204 14.3417874,21.7740204 L6.69283414,21.7740204 C6.38508328,21.7740204 6.0803203,21.6246268 5.89507221,21.3467546 L2.06771605,16.778642 L1.86716664,16.5008983 C0.643147284,14.7391228 1.8333757e-13,12.6798274 1.8333757e-13,10.5173108 C1.8333757e-13,4.71785049 4.71785049,3.72925285e-13 10.5173108,3.72925285e-13 Z" id="路径" fill="#FC7032"></path>
+                            <path d="M10.5173108,-9.09494702e-13 C13.1330041,-9.09494702e-13 15.5286739,0.959715816 17.3707015,2.54552878 C18.1520293,4.06891472 18.5925926,5.79473622 18.5925926,7.62345679 C18.5925926,13.7769998 13.6041603,18.7654321 7.45061728,18.7654321 C5.84168826,18.7654321 4.3124101,18.4244062 2.93112294,17.8106945 L2.06771605,16.778642 L1.86716664,16.5008983 C0.643147284,14.7391228 0,12.6798274 0,10.5173108 C0,4.71785049 4.71785049,-9.09494702e-13 10.5173108,-9.09494702e-13 Z" id="形状结合" fill="#FF7E3E"></path>
+                            <path d="M10.5173108,-5.33345658e-13 C11.6682155,-5.33345658e-13 12.7765236,0.185800863 13.8138163,0.528983643 C13.9843899,1.30286607 14.0740741,2.10700898 14.0740741,2.93209877 C14.0740741,9.08564181 9.08564181,14.0740741 2.93209877,14.0740741 C2.10487789,14.0740741 1.29871222,13.983926 0.522889931,13.8129179 C0.177449351,12.7606382 0,11.6532143 0,10.5173108 C0,4.71785049 4.71785049,-5.33345658e-13 10.5173108,-5.33345658e-13 Z" id="形状结合" fill="#FFA56A"></path>
+                            <path d="M10.9445765,5.83830264 C10.511833,5.62193088 9.99372765,5.76458104 9.72856954,6.1534834 L9.66277929,6.26556839 L7.75054096,10.090045 C7.60114734,10.3858444 7.61907458,10.7384133 7.79237118,11.0192733 C7.9440057,11.2650259 8.19858176,11.4284251 8.48203865,11.4654351 L8.60507246,11.47343 L10.8818312,11.47343 L9.66277929,13.9145217 C9.42673737,14.3866055 9.6179612,14.960277 10.090045,15.1963189 C10.2274872,15.26504 10.3738929,15.2979066 10.5173108,15.2979066 C10.8231942,15.2979066 11.1199273,15.1492133 11.301423,14.8878561 L11.3718423,14.7690532 L13.2840806,10.9445765 C13.4334742,10.6487772 13.415547,10.2962082 13.2422504,10.0153482 C13.0906159,9.76959573 12.8360398,9.60619645 12.5525829,9.56918652 L12.4295491,9.56119163 L10.1527904,9.56119163 L11.3718423,7.12009989 C11.6078842,6.64801605 11.4166604,6.07434456 10.9445765,5.83830264 Z" id="路径" fill="#FFF1DC"></path>
+                        </g>
+                        <rect id="矩形" fill="#FC7032" x="14.7777778" y="28.5" width="7.91666667" height="1.68888889" rx="0.8"></rect>
+                        <rect id="矩形" fill="#FC7032" x="14.7777778" y="31.2444444" width="7.91666667" height="1.68888889" rx="0.8"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/creator/CreatorInfo.vue

@@ -22,6 +22,10 @@
           <span>已售400</span>
           <i class="font_family icon-a-icon-dianzan2"></i>
         </div>
+        <div class="text4">
+          <span>粉丝</span>
+          <span>233</span>
+        </div>
         <van-button plain type="primary" size="mini" round>关注</van-button>
       </div>
     </div>
@@ -112,6 +116,16 @@ export default {
         box-sizing: border-box;
         background-clip: content-box, border-box;
       }
+
+      .text4 {
+        span {
+          font-size: 14px;
+          &:first-child {
+            color: #939599;
+            margin-right: 5px;
+          }
+        }
+      }
     }
   }
 

src/components/product/productInfo.vue

@@ -35,8 +35,9 @@ export default {
 <style lang="less" scoped>
 .product {
   width: calc(50vw - 24px);
-  margin: 0 8px;
+  margin: 8px;
   background-color: @bg2;
+  display: inline-block;
 
   .van-image {
     border-radius: 8px 8px 0px 0px;

src/router/index.js

@@ -19,6 +19,11 @@ const routes = [
         name: "discover",
         component: () => import("../views/Discover.vue"),
       },
+      {
+        path: "/store",
+        name: "store",
+        component: () => import("../views/Store.vue"),
+      },
       {
         path: "/mine",
         name: "mine",

src/styles/app.less

@@ -8,8 +8,14 @@
   --van-gray-6: #939599;
   --van-tabbar-item-active-color: #fff;
   --van-button-plain-background-color: transparent;
+  --van-grid-item-content-background-color: transparent;
   --van-button-mini-height: 26px;
   --van-button-mini-font-size: 14px;
+  --van-tabs-nav-background-color: @bg;
+  --van-tabs-default-color: @prim;
+  --van-tabs-bottom-bar-color: @prim;
+  --van-tab-active-text-color: @prim;
+  --van-tab-disabled-text-color: #fff;
 }
 
 body {

src/styles/common/theme.less

@@ -1,5 +1,5 @@
 @divider: #f2f4f5;
-@prim: #FDFB60;
+@prim: #fdfb60;
 @success: #67c23a;
 @danger: #f56c6c;
 @warn: #e6a23c;
@@ -13,10 +13,11 @@
 @border3: #dfe1e6;
 @border4: #f2f6fc;
 @bg: #181818;
-@bg2: #1C1E25;
+@bg2: #1c1e25;
+@bg3: #0f0f0f;
 @menu-text-color: #bfcbd9;
 @menu-text-color-active: #409eff;
 @menu-bg: #324157;
 @menu-bg-active: #1f2d3d;
 @menu-bg-hover: #232e3b;
-@background-color-light:#181818;
+@background-color-light: #181818;

src/views/Creator.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <creator-info></creator-info>
+    <creator-info></creator-info>
+    <creator-info></creator-info>
+    <creator-info></creator-info>
+  </div>
+</template>
+
+<script>
+import CreatorInfo from "../components/creator/CreatorInfo.vue";
+export default {
+  components: { CreatorInfo },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/Discover.vue

@@ -1,31 +1,162 @@
 <template>
   <div class="discover">
-    <div class="top">
-      <div class="top-btn">
-        <div
-          class="btn"
-          :class="{ active: active === 'creator' }"
-          @click="active = 'creator'"
-        >
-          铸造者
+    <van-sticky ref="top" @change="change">
+      <div class="top">
+        <div class="top-btn">
+          <div
+            class="btn"
+            :class="{ active: active === 'explore' }"
+            @click="changeActive('explore')"
+          >
+            收藏探索
+          </div>
+          <div
+            class="btn"
+            :class="{ active: active === 'creator' }"
+            @click="changeActive('creator')"
+          >
+            铸造者
+          </div>
+        </div>
+        <div class="search">
+          <img src="../assets/svgs/search.svg" alt="" />
         </div>
-        <div class="btn">收藏探索</div>
       </div>
-      <div class="search">
-        <img src="../assets/svgs/search.svg" alt="" />
+
+      <van-tabs
+        v-if="active === 'creator'"
+        v-model:active="type"
+        line-width="16"
+        line-height="2"
+      >
+        <van-tab title="全部"></van-tab>
+        <van-tab title="最新"></van-tab>
+        <van-tab title="人气"></van-tab>
+        <van-tab title="关注"></van-tab>
+      </van-tabs>
+    </van-sticky>
+
+    <template v-if="active === 'explore'">
+      <swiper pagination class="mySwiper">
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+        <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
+      </swiper>
+
+      <van-grid :border="false">
+        <van-grid-item text="精选推荐">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_jingxuanxilie.svg"
+            />
+          </template>
+        </van-grid-item>
+        <van-grid-item text="原创系列">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_yuanchangxilie.svg"
+            />
+          </template>
+        </van-grid-item>
+        <van-grid-item text="数字盲盒">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_manghexilie.svg"
+            />
+          </template>
+        </van-grid-item>
+        <van-grid-item text="拍卖系列">
+          <template v-slot:icon>
+            <img
+              class="grid-img"
+              src="../assets/svgs/info_icon_paimaixilie.svg"
+            />
+          </template>
+        </van-grid-item>
+      </van-grid>
+
+      <div class="title">本期推荐</div>
+      <div class="box-list">
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
+        <product-info></product-info>
       </div>
-    </div>
+    </template>
+
+    <creator v-else> </creator>
   </div>
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+import "swiper/swiper.min.css";
+import "swiper/swiper-bundle.min.css";
+
+import SwiperCore, { Pagination } from "swiper";
+
+// install Swiper modules
+SwiperCore.use([Pagination]);
+
+import ProductInfo from "../components/product/productInfo.vue";
+import Creator from "./Creator.vue";
+
 export default {
   name: "discover",
+  inject: ["bs"],
+  components: {
+    Swiper,
+    SwiperSlide,
+    ProductInfo,
+    Creator,
+  },
   data() {
     return {
-      active: "creator",
+      active: "explore",
+      stiky: null,
+      type: 0,
     };
   },
+  beforeUnmount() {
+    console.log(this.stiky);
+    console.log(this.stiky.parentNode);
+    // this.$nextTick(() => {
+    //   document.body.removeChild(this.stiky);
+    // });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.stiky = this.$refs.top.$el.childNodes[0];
+    });
+  },
+  methods: {
+    change(isFixed) {
+      console.log(this.stiky.parentNode);
+      if (isFixed) {
+        this.$nextTick(() => {
+          document.body.appendChild(this.stiky);
+        });
+      } else {
+        this.$refs.top.$el.appendChild(this.stiky);
+      }
+    },
+    changeActive(active) {
+      this.active = active;
+      this.$nextTick(() => {
+        this.bs.value.scrollTo(0, 0);
+        this.bs.value.refresh();
+      });
+    },
+  },
 };
 </script>
 
@@ -33,8 +164,7 @@ export default {
 .top {
   display: flex;
   padding: 10px 16px;
-  position: sticky;
-  top: 0;
+  background-color: @bg;
   .top-btn {
     flex-grow: 1;
     .btn {
@@ -58,4 +188,103 @@ export default {
     }
   }
 }
+
+.discover {
+  background-color: @bg3;
+}
+
+/deep/ .mySwiper {
+  width: calc(100vw - 32px);
+  height: calc(41vw - 13px);
+
+  .swiper-pagination {
+    bottom: 12px;
+  }
+
+  .swiper-pagination-bullet {
+    width: 6px;
+    height: 2px;
+    border-radius: 1px;
+    background: #d7d7d7;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: @prim;
+  }
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.grid-img {
+  display: block;
+}
+.van-grid {
+  margin-top: 12px;
+}
+/deep/ .van-grid-item__content {
+  padding: 14px 20px 16px;
+}
+/deep/ .van-grid-item__text {
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+.title {
+  padding: 16px 20px 8px;
+  color: @prim;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.box-list {
+  // display: flex;
+  // flex-wrap: wrap;
+  padding: 0 8px;
+}
+
+.discover {
+  padding-bottom: 50px;
+}
+
+/deep/.van-tab {
+  color: #fff;
+  flex: 0;
+  padding: 20px;
+  flex-shrink: 0;
+  min-width: 74px;
+
+  &.van-tab--active {
+    color: @prim;
+  }
+}
+
+/deep/ .van-tabs__line {
+  bottom: 20px;
+}
 </style>

src/views/Home.vue

@@ -13,7 +13,6 @@
         slideShadows: true,
       }"
       loop
-      :pagination="true"
       class="mySwiper"
     >
       <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
@@ -62,14 +61,15 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 // Import Swiper styles
 
 import "swiper/swiper.min.css";
+import "swiper/swiper-bundle.min.css";
 
-import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
+import SwiperCore, { EffectCoverflow } from "swiper";
 import ProductInfo from "../components/product/productInfo.vue";
 import ProductSmall from "../components/product/productSmall.vue";
 import CreatorInfo from "../components/creator/CreatorInfo.vue";
 
 // install Swiper modules
-SwiperCore.use([EffectCoverflow, Pagination]);
+SwiperCore.use([EffectCoverflow]);
 
 export default {
   name: "Home",

src/views/Index.vue

@@ -42,7 +42,7 @@ export default {
         preIcon: require("../assets/svgs/tabbar_icon_02_pre.svg"),
       },
       {
-        name: "box",
+        name: "store",
         title: "柜子",
         icon: require("../assets/svgs/tabbar_icon_03.svg"),
         preIcon: require("../assets/svgs/tabbar_icon_03_pre.svg"),

src/views/Mine.vue

@@ -1,9 +1,129 @@
 <template>
-  <div></div>
+  <div>
+    <div class="top">
+      <van-image
+        round
+        width="78"
+        height="78"
+        :src="require('../assets/svgs/img_default_photo.svg')"
+        fit="cover"
+      />
+
+      <div class="text">
+        <div class="text1">点击登录</div>
+        <div class="text2">立即登录获取精彩服务</div>
+      </div>
+    </div>
+    <van-cell
+      class="title"
+      title="商品订单"
+      :border="false"
+      is-link
+      value="查看全部"
+    />
+    <van-grid :border="false" :gutter="10">
+      <van-grid-item text="全部订单" :border="false">
+        <template v-slot:icon>
+          <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="待支付" :border="false">
+        <template v-slot:icon>
+          <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="交易中" :border="false">
+        <template v-slot:icon>
+          <img
+            class="grid-img"
+            src="../assets/svgs/info_icon_dingdan_daishouhuo.svg"
+          />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="已完成" :border="false">
+        <template v-slot:icon>
+          <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
+        </template>
+      </van-grid-item>
+    </van-grid>
+
+    <van-cell class="title" title="我的服务" :border="false" />
+
+    <van-cell-group>
+      <van-cell title="钱包" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-qiabao.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  padding: 26px 16px 30px;
+  border-bottom: 5px solid #202122;
+
+  .text {
+    margin-left: 12px;
+
+    .text1 {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 34px;
+    }
+
+    .text2 {
+      font-size: 16px;
+      color: #949699;
+      line-height: 24px;
+      margin-top: 6px;
+    }
+  }
+}
+
+/deep/ .title {
+  padding: 20px 16px 10px;
+  .van-cell__title {
+    span {
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 28px;
+    }
+  }
+
+  .van-cell__value {
+    span {
+      font-size: 13px;
+      line-height: 28px;
+    }
+  }
+
+  .van-icon {
+    line-height: 28px;
+  }
+}
+
+.grid-img {
+  display: block;
+}
+
+/deep/ .van-grid-item {
+  .van-grid-item__text {
+    font-size: 13px;
+    color: #ffffff;
+    line-height: 18px;
+    margin-top: 4px;
+  }
+}
+</style>

src/views/Store.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="discover">
+    <van-sticky ref="top" @change="change">
+      <div class="top">
+        <div class="top-btn">
+          <div
+            class="btn"
+            :class="{ active: active === 'explore' }"
+            @click="changeActive('explore')"
+          >
+            我拥有的
+          </div>
+          <div
+            class="btn"
+            :class="{ active: active === 'creator' }"
+            @click="changeActive('creator')"
+          >
+            我卖出的
+          </div>
+        </div>
+        <div class="search">
+          <img src="../assets/svgs/search.svg" alt="" />
+        </div>
+      </div>
+
+      <van-tabs v-model:active="type" line-width="16" line-height="2">
+        <van-tab title="全部"></van-tab>
+        <van-tab title="售卖"></van-tab>
+        <van-tab title="仅展示"></van-tab>
+        <van-tab title="综合排序"></van-tab>
+      </van-tabs>
+    </van-sticky>
+
+    <div class="box-list">
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+      <product-info></product-info>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductInfo from "../components/product/productInfo.vue";
+
+export default {
+  name: "discover",
+  inject: ["bs"],
+  components: {
+    ProductInfo,
+  },
+  data() {
+    return {
+      active: "explore",
+      stiky: null,
+      type: 0,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.stiky = this.$refs.top.$el.childNodes[0];
+    });
+  },
+  unmounted() {
+    this.$nextTick(() => {
+      document.body.removeChild(this.stiky);
+    });
+  },
+  methods: {
+    change(isFixed) {
+      if (isFixed) {
+        this.$nextTick(() => {
+          document.body.appendChild(this.stiky);
+        });
+      } else {
+        this.$refs.top.$el.appendChild(this.stiky);
+      }
+    },
+    changeActive(active) {
+      this.active = active;
+      this.$nextTick(() => {
+        this.bs.value.scrollTo(0, 0);
+        this.bs.value.refresh();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  display: flex;
+  padding: 10px 16px;
+  background-color: @bg;
+  .top-btn {
+    flex-grow: 1;
+    .btn {
+      font-size: 16px;
+      font-family: ZhenyanGB;
+      font-weight: 400;
+      line-height: 26px;
+      display: inline-block;
+      vertical-align: text-bottom;
+
+      &.active {
+        color: @prim;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 30px;
+      }
+    }
+
+    .btn + .btn {
+      margin-left: 30px;
+    }
+  }
+}
+
+.discover {
+  background-color: @bg3;
+}
+
+/deep/ .mySwiper {
+  width: calc(100vw - 32px);
+  height: calc(41vw - 13px);
+
+  .swiper-pagination {
+    bottom: 12px;
+  }
+
+  .swiper-pagination-bullet {
+    width: 6px;
+    height: 2px;
+    border-radius: 1px;
+    background: #d7d7d7;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: @prim;
+  }
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.grid-img {
+  display: block;
+}
+.van-grid {
+  margin-top: 12px;
+}
+/deep/ .van-grid-item__content {
+  padding: 14px 20px 16px;
+}
+/deep/ .van-grid-item__text {
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+.title {
+  padding: 16px 20px 8px;
+  color: @prim;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.box-list {
+  // display: flex;
+  // flex-wrap: wrap;
+  padding: 0 8px;
+}
+
+.discover {
+  padding-bottom: 50px;
+}
+
+/deep/.van-tab {
+  color: #fff;
+
+  &.van-tab--active {
+    color: @prim;
+  }
+}
+
+/deep/ .van-tabs__line {
+  bottom: 20px;
+}
+</style>