Details

.idea/antd-demo-ts.iml

@@ -8,5 +8,9 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="1.international-home.6395933647838c973480598b9d75d2e94c363819" level="application" />
+    <orderEntry type="library" name="pc" level="application" />
+    <orderEntry type="library" name="international-home.6395933647838c973480598b9d75d2e94c363819" level="application" />
+    <orderEntry type="library" name="footer" level="application" />
   </component>
 </module>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

@@ -6,8 +6,9 @@
       <option name="myIgnoreVendorSpecificProperties" value="false" />
       <option name="myCustomPropertiesList">
         <value>
-          <list size="1">
+          <list size="2">
             <item index="0" class="java.lang.String" itemvalue="lineheight" />
+            <item index="1" class="java.lang.String" itemvalue="transition" />
           </list>
         </value>
       </option>

.idea/jsLibraryMappings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{1.international-home.6395933647838c973480598b9d75d2e94c363819, footer, international-home.6395933647838c973480598b9d75d2e94c363819, pc}" />
+  </component>
+</project>
\ No newline at end of file

aaa.js

+/*
+ * aaa.js
+ * Created by 还有醋v on 2020/11/8.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */"use strict";
+
+function _toConsumableArray(t) {
+    return _arrayWithoutHoles(t) || _iterableToArray(t) || _unsupportedIterableToArray(t) || _nonIterableSpread()
+}
+
+function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
+}
+
+function _unsupportedIterableToArray(t, e) {
+    if (t) {
+        if ("string" == typeof t) return _arrayLikeToArray(t, e);
+        var i = Object.prototype.toString.call(t).slice(8, -1);
+        return "Object" === i && t.constructor && (i = t.constructor.name), "Map" === i || "Set" === i ? Array.from(t) : "Arguments" === i || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i) ? _arrayLikeToArray(t, e) : void 0
+    }
+}
+
+function _iterableToArray(t) {
+    if ("undefined" != typeof Symbol && Symbol.iterator in Object(t)) return Array.from(t)
+}
+
+function _arrayWithoutHoles(t) {
+    if (Array.isArray(t)) return _arrayLikeToArray(t)
+}
+
+function _arrayLikeToArray(t, e) {
+    (null == e || e > t.length) && (e = t.length);
+    for (var i = 0, a = new Array(e); i < e; i++) a[i] = t[i];
+    return a
+}
+
+!function (t) {
+    function e(e) {
+        for (var a, r, s = e[0], l = e[1], c = e[2], d = 0, m = []; d < s.length; d++) r = s[d], Object.prototype.hasOwnProperty.call(n, r) && n[r] && m.push(n[r][0]), n[r] = 0;
+        for (a in l) Object.prototype.hasOwnProperty.call(l, a) && (t[a] = l[a]);
+        for (u && u(e); m.length;) m.shift()();
+        return o.push.apply(o, c || []), i()
+    }
+
+    function i() {
+        for (var t, e = 0; e < o.length; e++) {
+            for (var i = o[e], a = !0, s = 1; s < i.length; s++) {
+                var l = i[s];
+                0 !== n[l] && (a = !1)
+            }
+            a && (o.splice(e--, 1), t = r(r.s = i[0]))
+        }
+        return t
+    }
+
+    var a = {}, n = {0: 0}, o = [];
+
+    function r(e) {
+        if (a[e]) return a[e].exports;
+        var i = a[e] = {i: e, l: !1, exports: {}};
+        return t[e].call(i.exports, i, i.exports, r), i.l = !0, i.exports
+    }
+
+    r.m = t, r.c = a, r.d = function (t, e, i) {
+        r.o(t, e) || Object.defineProperty(t, e, {enumerable: !0, get: i})
+    }, r.r = function (t) {
+        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(t, "__esModule", {value: !0})
+    }, r.t = function (t, e) {
+        if (1 & e && (t = r(t)), 8 & e) return t;
+        if (4 & e && "object" == typeof t && t && t.__esModule) return t;
+        var i = Object.create(null);
+        if (r.r(i), Object.defineProperty(i, "default", {
+            enumerable: !0,
+            value: t
+        }), 2 & e && "string" != typeof t) for (var a in t) r.d(i, a, function (e) {
+            return t[e]
+        }.bind(null, a));
+        return i
+    }, r.n = function (t) {
+        var e = t && t.__esModule ? function () {
+            return t.default
+        } : function () {
+            return t
+        };
+        return r.d(e, "a", e), e
+    }, r.o = function (t, e) {
+        return Object.prototype.hasOwnProperty.call(t, e)
+    }, r.p = "//s1.hdslb.com/bfs/static/jinkela/international-home/";
+    var s = window.webpackJsonp = window.webpackJsonp || [], l = s.push.bind(s);
+    s.push = e, s = s.slice();
+    for (var c = 0; c < s.length; c++) e(s[c]);
+    var u = l;
+    o.push([379, 1]), i()
+}(Array(119).concat([function (t, e, i) {
+    var ge = {
+        props: {layerConfig: {type: Array, required: !0}}, mounted: function () {
+            var t = this;
+            return U()(z.a.mark((function e() {
+                var i, a, n, o, r, s, l, c, u, d, m, p, h, f, v;
+                return z.a.wrap((function (e) {
+                    for (; ;) switch (e.prev = e.next) {
+                        case 0:
+                            (i = t.layerConfig).length || t.$emit("error"), a = t.$refs.container, n = a.clientHeight, o = a.clientWidth, r = n / 155, i.forEach((function (t) {
+                                t.images.forEach((function (e, i) {
+                                    var a = t.images[i].img;
+                                    a.dataset.height = a.height, a.dataset.width = a.width, a.height = a.dataset.height * r * (t.initial.scale || 1), a.width = a.dataset.width * r * (t.initial.scale || 1)
+                                }))
+                            })), s = i.map((function (t) {
+                                var e = document.createElement("div");
+                                return e.classList.add("layer"), a.appendChild(e), e
+                            })), l = 0, c = 0, u = 0, d = function () {
+                                try {
+                                    s.map((function (t, e) {
+                                        var a = i[e], n = t.firstChild, o = "", r = "";
+                                        if (a.initial.rotate && (o = "rotate(".concat(a.initial.rotate, "deg)")), a.initial.translate) {
+                                            var s = a.initial.translate || [0, 0];
+                                            r = "translate(".concat(s[0], "px, ").concat(s[1], "px)")
+                                        }
+                                        n.style.transform = "".concat(r, " ").concat(o), a.initial.blur && (n.style.filter = "blur(".concat(Math.abs(a.initial.blur), "px)"))
+                                    }))
+                                } catch (e) {
+                                    console.error(e), t.$emit("error")
+                                }
+                            }, m = function (t) {
+                                var e = be.apply(void 0, ce()(t));
+                                return function (t) {
+                                    return t > 0 ? e(t) : -e(-t)
+                                }
+                            }, p = function (e) {
+                                try {
+                                    s.map((function (t, e) {
+                                        var a = i[e], n = t.firstChild;
+                                        if (a.offset && n) {
+                                            var o = a.initial.rotate || 0, s = a.initial.translate || [0, 0], c = "",
+                                                u = "rotate(".concat(a.initial.rotate || 0, "deg)"),
+                                                d = "translate(".concat(s[0], "px, ").concat(s[1], "px)");
+                                            if (a.offset.scale) {
+                                                var p = a.offsetCurve && a.offsetCurve.scale ? m(a.offsetCurve.scale) : function (t) {
+                                                    return t
+                                                }, h = a.offset.scale * p(l);
+                                                c = "scale(".concat(1 + h, ")")
+                                            }
+                                            if (a.offset.rotate) {
+                                                var f = a.offsetCurve && a.offsetCurve.rotate ? m(a.offsetCurve.rotate) : function (t) {
+                                                    return t
+                                                }, v = a.offset.rotate * f(l);
+                                                u = "rotate(".concat(o + v, "deg)")
+                                            }
+                                            if (a.offset.translate) {
+                                                var b = a.offsetCurve && a.offsetCurve.translate ? m(a.offsetCurve.translate) : function (t) {
+                                                    return t
+                                                }, g = a.offset.translate.map((function (t) {
+                                                    return b(l) * t
+                                                })), w = s.map((function (t, e) {
+                                                    return (t + g[e]) * r * (a.initial.scale || 1)
+                                                }));
+                                                d = "translate(".concat(w[0], "px, ").concat(w[1], "px)")
+                                            }
+                                            if (n.style.transform = "".concat(c, " ").concat(d, " ").concat(u), a.offset.blur) {
+                                                var y = (a.offsetCurve && a.offsetCurve.blur ? m(a.offsetCurve.blur) : function (t) {
+                                                    return t
+                                                })(l) * a.offset.blur;
+                                                n.style.filter = "blur(".concat(Math.abs((a.initial.blur || 0) + y), "px)")
+                                            }
+                                        }
+                                    }))
+                                } catch (e) {
+                                    console.error(e), t.$emit("error")
+                                }
+                            }, h = function t(e, i, a) {
+                                setTimeout((function () {
+                                    var n = a === i.length - 1 ? 0 : a + 1;
+                                    e.removeChild(e.firstChild), e.appendChild(i[n].img), t(e, i, n), requestAnimationFrame(p)
+                                }), i[a].duration)
+                            }, i.map((function (t, e) {
+                                var i = t.images[0].img;
+                                s[e].appendChild(i), requestAnimationFrame(d), t.images.length > 1 && t.loopTime > 0 && h(s[e], t.images, 0)
+                            })), f = function () {
+                                var t = performance.now(), e = l;
+                                cancelAnimationFrame(u);
+                                u = requestAnimationFrame((function i(a) {
+                                    a - t < 200 ? (l = e * (1 - (a - t) / 200), p(), requestAnimationFrame(i)) : (l = 0, p())
+                                }))
+                            }, v = !1, t.handleMouseLeave = function () {
+                                v = !1, f()
+                            }, t.handleMouseMove = function (t) {
+                                document.documentElement.scrollTop + t.clientY < n ? (v || (v = !0, c = t.clientX), l = (t.clientX - c) / o, cancelAnimationFrame(u), u = requestAnimationFrame(p)) : v && (v = !1, f())
+                            }, t.handleResize = function () {
+                                n = a.clientHeight, o = a.clientWidth, r = n / 155, i.forEach((function (t) {
+                                    t.images.forEach((function (e) {
+                                        var i = e.img;
+                                        i.height = i.dataset.height * r * (t.initial.scale || 1), i.width = i.dataset.width * r * (t.initial.scale || 1)
+                                    }))
+                                })), cancelAnimationFrame(u), u = requestAnimationFrame((function (t) {
+                                    p()
+                                }))
+                            }, document.addEventListener("mouseleave", t.handleMouseLeave), window.addEventListener("mousemove", t.handleMouseMove), window.addEventListener("resize", t.handleResize);
+                        case 24:
+                        case"end":
+                            return e.stop()
+                    }
+                }), e)
+            })))()
+        }, beforeDestroy: function () {
+            document.removeEventListener("mouseleave", this.handleMouseLeave), window.removeEventListener("mousemove", this.handleMouseMove), window.removeEventListener("resize", this.handleResize)
+        }, methods: {}
+    }, we = (i(784), i(785), {
+        components: {
+            AnimatedBanner: Object(at.a)(ge, (function () {
+                var t = this.$createElement;
+                return (this._self._c || t)("div", {ref: "container", staticClass: "animated-banner"})
+            }), [], !1, null, "0a487de8", null).exports
+        }, props: {
+            bid: {type: Number, default: 142}, locsData: {
+                type: Object, default: function () {
+                    return {}
+                }
+            }, userInfo: {
+                type: Object, default: function () {
+                    return {}
+                }
+            }, bannerData: {
+                type: Array, default: function () {
+                    return []
+                }
+            }
+        }, data: function () {
+            return {
+                mid: null,
+                animatedBannerSupport: !1,
+                animatedBannerEnabled: !1,
+                animatedBannerLoaded: !1,
+                layerConfig: null
+            }
+        }, watch: {
+            userInfo: {
+                deep: !0, handler: function (t) {
+                    this.mid = t.mid
+                }
+            }, bannerImg: function (t) {
+                t && this.bannerDataFetched && this.bannerDataFetched()
+            }
+        }, computed: {
+            locs: function () {
+                return this.bannerData[0] || this.locsData && this.locsData[this.bid][0]
+            }, bannerImg: function () {
+                return Q(this.locs && this.locs.pic)
+            }, logoImg: function () {
+                return Q(this.locs && this.locs.litpic)
+            }, bannerTitle: function () {
+                return this.locs && this.locs.name
+            }, bannerLink: function () {
+                var t = Q(this.locs && this.locs.url) || null;
+                return t && -1 !== t.indexOf("__MID__") && -1 !== t.indexOf("__REQUESTID__") && this.mid ? t.replace("__MID__", this.mid || "__MID__").replace("__REQUESTID__", this.locs.request_id || "__REQUESTID__") : t
+            }, animatedBannerShow: function () {
+                return this.animatedBannerEnabled && this.animatedBannerSupport && this.animatedBannerLoaded
+            }
+        }, mounted: function () {
+            this.animatedBanner()
+        }, methods: {
+            animatedBanner: function () {
+                var t = this;
+                return U()(z.a.mark((function e() {
+                    var i;
+                    return z.a.wrap((function (e) {
+                        for (; ;) switch (e.prev = e.next) {
+                            case 0:
+                                if (t.locs) {
+                                    e.next = 3;
+                                    break
+                                }
+                                return e.next = 3, new Promise((function (e) {
+                                    return t.bannerDataFetched = e
+                                }));
+                            case 3:
+                                return (i = document.createElement("img")).src = Q(t.locs && t.locs.pic), e.next = 7, new Promise((function (t) {
+                                    return i.onload = t
+                                }));
+                            case 7:
+                                if (t.locs.litpic.indexOf("/bfs/archive/622017dd4b0140432962d3ce0c6db99d77d2e937.png") > 0) {
+                                    t.animatedBannerEnabled = !0;
+                                    try {
+                                        t.layerConfig = JSON.parse('[{"images":[{"src":"https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"}],"initial":{"scale":1,"blur":4},"offset":{"blur":4},"offsetCurve":{"blur":[0,0,1,1]}},{"images":[{"src":"https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png","duration":5000},{"src":"https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png","duration":60},{"src":"https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png","duration":200},{"src":"https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png","duration":60}],"initial":{"scale":0.6,"blur":0},"offset":{"translate":[15,0],"blur":10},"offsetCurve":{"blur":[0.3,0.7,0.5,0.5]}},{"images":[{"src":"https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"}],"initial":{"scale":1,"translate":[-50,0],"blur":1},"offset":{"translate":[30,0],"blur":-5},"offsetCurve":{"blur":[0.25,1,1,0]}},{"images":[{"src":"https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"}],"initial":{"scale":0.6,"translate":[0,7],"blur":4},"offset":{"translate":[60,0],"blur":-10},"offsetCurve":{"blur":[0.4,1,1,0]}},{"images":[{"src":"https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"}],"initial":{"scale":0.6,"translate":[0,-3],"blur":5},"offset":{"translate":[130,0],"blur":-10},"offsetCurve":{"blur":[0.5,1,1,0]}},{"images":[{"src":"https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"}],"initial":{"scale":0.65,"blur":6},"offset":{"translate":[150,0],"blur":-6},"offsetCurve":{}}]')
+                                    } catch (e) {
+                                        console.error("animated_banner_config parse error"), t.layerConfig = [], t.animatedBannerEnabled = !1
+                                    }
+                                }
+                                if (t.animatedBannerSupport = "undefined" != typeof CSS && CSS.supports && CSS.supports("filter: blur(1px)"), !t.animatedBannerSupport || !t.animatedBannerEnabled) {
+                                    e.next = 20;
+                                    break
+                                }
+                                return t.layerConfig.map((function (t) {
+                                    t.loopTime = t.images.reduce((function (t, e) {
+                                        return t + (e.duration || 0)
+                                    }), 0)
+                                })), e.prev = 11, e.next = 14, Promise.all(t.layerConfig.map(function () {
+                                    var t = U()(z.a.mark((function t(e) {
+                                        return z.a.wrap((function (t) {
+                                            for (; ;) switch (t.prev = t.next) {
+                                                case 0:
+                                                    return t.abrupt("return", Promise.all(e.images.map(function () {
+                                                        var t = U()(z.a.mark((function t(i, a) {
+                                                            var n;
+                                                            return z.a.wrap((function (t) {
+                                                                for (; ;) switch (t.prev = t.next) {
+                                                                    case 0:
+                                                                        return (n = document.createElement("img")).src = i.src, t.next = 4, new Promise((function (t) {
+                                                                            return n.onload = t
+                                                                        }));
+                                                                    case 4:
+                                                                        e.images[a].img = n;
+                                                                    case 5:
+                                                                    case"end":
+                                                                        return t.stop()
+                                                                }
+                                                            }), t)
+                                                        })));
+                                                        return function (e, i) {
+                                                            return t.apply(this, arguments)
+                                                        }
+                                                    }())));
+                                                case 1:
+                                                case"end":
+                                                    return t.stop()
+                                            }
+                                        }), t)
+                                    })));
+                                    return function (e) {
+                                        return t.apply(this, arguments)
+                                    }
+                                }()));
+                            case 14:
+                                t.animatedBannerLoaded = !0, e.next = 20;
+                                break;
+                            case 17:
+                                e.prev = 17, e.t0 = e.catch(11), console.log("load animated banner images error");
+                            case 20:
+                            case"end":
+                                return e.stop()
+                        }
+                    }), e, null, [[11, 17]])
+                })))()
+            }
+        }
+    }), ye = (i(786), Object(at.a)(we, (function () {
+        var t = this, e = t.$createElement, i = t._self._c || e;
+        return i("div", {
+            staticClass: "bili-banner",
+            style: t.animatedBannerShow ? "" : "background-image: url(" + t.bannerImg + ")"
+        }, [t.animatedBannerShow ? i("AnimatedBanner", {
+            attrs: {layerConfig: t.layerConfig}, on: {
+                error: function (e) {
+                    t.animatedBannerLoaded = !1
+                }
+            }
+        }) : t._e(), i("div", {staticClass: "taper-line"}), i("div", {
+            staticClass: "b-logo b-wrap",
+            staticStyle: {margin: "0"}
+        }, [i("a", {
+            directives: [{
+                name: "van-report",
+                rawName: "v-van-report:headBannerLogo.click",
+                arg: "headBannerLogo",
+                modifiers: {click: !0}
+            }], staticClass: "head-logo", attrs: {href: "//www.bilibili.com"}
+        }, [i("img", {
+            staticClass: "logo-img",
+            attrs: {src: t.logoImg}
+        })]), t.bannerTitle ? i("a", {
+            directives: [{
+                name: "van-report",
+                rawName: "v-van-report:headBanner.click",
+                arg: "headBanner",
+                modifiers: {click: !0}
+            }],
+            staticClass: "head-title",
+            attrs: {href: t.bannerLink, target: "_blank"},
+            domProps: {textContent: t._s(t.bannerTitle)}
+        }) : t._e()]), t.bannerLink ? i("a", {
+            directives: [{
+                name: "van-report",
+                rawName: "v-van-report:headBanner.click",
+                arg: "headBanner",
+                modifiers: {click: !0}
+            }], staticClass: "banner-link", attrs: {href: t.bannerLink, target: "_blank"}
+        }) : t._e()], 1)
+    }), [], !1, null, "7965f258", null).exports)
+}]));

aaa.json

+[
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
+      }
+    ],
+    "initial": {
+      "scale": 1,
+      "blur": 4
+    },
+    "offset": {
+      "blur": 4
+    },
+    "offsetCurve": {
+      "blur": [
+        0,
+        0,
+        1,
+        1
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png",
+        "duration": 5000
+      },
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png",
+        "duration": 60
+      },
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png",
+        "duration": 200
+      },
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png",
+        "duration": 60
+      }
+    ],
+    "initial": {
+      "scale": 0.6,
+      "blur": 0
+    },
+    "offset": {
+      "translate": [
+        15,
+        0
+      ],
+      "blur": 10
+    },
+    "offsetCurve": {
+      "blur": [
+        0.3,
+        0.7,
+        0.5,
+        0.5
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
+      }
+    ],
+    "initial": {
+      "scale": 1,
+      "translate": [
+        -50,
+        0
+      ],
+      "blur": 1
+    },
+    "offset": {
+      "translate": [
+        30,
+        0
+      ],
+      "blur": -5
+    },
+    "offsetCurve": {
+      "blur": [
+        0.25,
+        1,
+        1,
+        0
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
+      }
+    ],
+    "initial": {
+      "scale": 0.6,
+      "translate": [
+        0,
+        7
+      ],
+      "blur": 4
+    },
+    "offset": {
+      "translate": [
+        60,
+        0
+      ],
+      "blur": -10
+    },
+    "offsetCurve": {
+      "blur": [
+        0.4,
+        1,
+        1,
+        0
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
+      }
+    ],
+    "initial": {
+      "scale": 0.6,
+      "translate": [
+        0,
+        -3
+      ],
+      "blur": 5
+    },
+    "offset": {
+      "translate": [
+        130,
+        0
+      ],
+      "blur": -10
+    },
+    "offsetCurve": {
+      "blur": [
+        0.5,
+        1,
+        1,
+        0
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
+      }
+    ],
+    "initial": {
+      "scale": 0.65,
+      "blur": 6
+    },
+    "offset": {
+      "translate": [
+        150,
+        0
+      ],
+      "blur": -6
+    },
+    "offsetCurve": {}
+  }
+]
\ No newline at end of file

package-lock.json

@@ -1309,6 +1309,8 @@
     },
     "@craco/craco": {
       "version": "5.7.0",
+      "resolved": "https://registry.npm.taobao.org/@craco/craco/download/@craco/craco-5.7.0.tgz",
+      "integrity": "sha1-rWokDg+FrJSPKTVYHaEtQiPWY2Y=",
       "requires": {
         "cross-spawn": "^7.0.0",
         "lodash": "^4.17.15",
@@ -1989,6 +1991,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "5.11.5",
+      "resolved": "https://registry.npm.taobao.org/@testing-library/jest-dom/download/@testing-library/jest-dom-5.11.5.tgz?cache=0&sync_timestamp=1603458867233&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40testing-library%2Fjest-dom%2Fdownload%2F%40testing-library%2Fjest-dom-5.11.5.tgz",
+      "integrity": "sha1-RAEPN/Sx4V+dQzljtRXbCwUYL8g=",
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -2013,6 +2017,8 @@
     },
     "@testing-library/react": {
       "version": "11.1.1",
+      "resolved": "https://registry.npm.taobao.org/@testing-library/react/download/@testing-library/react-11.1.1.tgz",
+      "integrity": "sha1-Im2Nx0kbcC/KrC19iNQokuZViTo=",
       "requires": {
         "@babel/runtime": "^7.12.1",
         "@testing-library/dom": "^7.26.4"
@@ -2020,6 +2026,8 @@
     },
     "@testing-library/user-event": {
       "version": "12.2.0",
+      "resolved": "https://registry.npm.taobao.org/@testing-library/user-event/download/@testing-library/user-event-12.2.0.tgz",
+      "integrity": "sha1-+7BxD5PWiii5QH4jgOsVI1TJRKc=",
       "requires": {
         "@babel/runtime": "^7.10.2"
       },
@@ -2194,6 +2202,8 @@
     },
     "@types/react-dom": {
       "version": "16.9.9",
+      "resolved": "https://registry.npm.taobao.org/@types/react-dom/download/@types/react-dom-16.9.9.tgz",
+      "integrity": "sha1-0tCm9yCgIGNpzL7/91K6N7lYMTY=",
       "requires": {
         "@types/react": "*"
       },
@@ -2749,6 +2759,8 @@
     },
     "antd": {
       "version": "4.8.0",
+      "resolved": "https://registry.npm.taobao.org/antd/download/antd-4.8.0.tgz?cache=0&sync_timestamp=1604313489813&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fantd%2Fdownload%2Fantd-4.8.0.tgz",
+      "integrity": "sha1-GY3BkCjnrm4E0HFPZGHYbEgS/4w=",
       "requires": {
         "@ant-design/colors": "^4.0.5",
         "@ant-design/css-animation": "^1.7.2",
@@ -4028,6 +4040,16 @@
       "resolved": "https://registry.npm.taobao.org/cli-width/download/cli-width-3.0.0.tgz",
       "integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY="
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz",
+      "integrity": "sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&sync_timestamp=1602861359936&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz",
@@ -4433,6 +4455,8 @@
     },
     "craco-less": {
       "version": "1.17.0",
+      "resolved": "https://registry.npm.taobao.org/craco-less/download/craco-less-1.17.0.tgz",
+      "integrity": "sha1-PZLlmWbh/ezvTRc7I4mYWnXLa7k=",
       "requires": {
         "less": "^3.11.1",
         "less-loader": "^6.1.0"
@@ -5020,6 +5044,11 @@
       "resolved": "https://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz",
+      "integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -6868,6 +6897,14 @@
         "slash": "^3.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz",
@@ -9232,6 +9269,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npm.taobao.org/marked/download/marked-1.2.3.tgz",
+      "integrity": "sha1-WIF7o0inyTmMuU1A0S4NCN+Dr1c="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -12149,6 +12191,8 @@
     },
     "react": {
       "version": "17.0.1",
+      "resolved": "https://registry.npm.taobao.org/react/download/react-17.0.1.tgz?cache=0&sync_timestamp=1603367627799&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-17.0.1.tgz",
+      "integrity": "sha1-bgYAQWvVdXTj+G2S7bo9kAhyYSc=",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -12251,6 +12295,8 @@
     },
     "react-dom": {
       "version": "17.0.1",
+      "resolved": "https://registry.npm.taobao.org/react-dom/download/react-dom-17.0.1.tgz?cache=0&sync_timestamp=1603367630204&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dom%2Fdownload%2Freact-dom-17.0.1.tgz",
+      "integrity": "sha1-HeJWBHTsnw4zQoVmLt5S28VCb8Y=",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12279,6 +12325,8 @@
     },
     "react-scripts": {
       "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/react-scripts/download/react-scripts-4.0.0.tgz?cache=0&sync_timestamp=1603464317651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-scripts%2Fdownload%2Freact-scripts-4.0.0.tgz",
+      "integrity": "sha1-NvPYT//3CKwGGP1h5x6q6hHCZBc=",
       "requires": {
         "@babel/core": "7.12.3",
         "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
@@ -13185,6 +13233,11 @@
         "compute-scroll-into-view": "^1.0.16"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -14554,6 +14607,11 @@
       "resolved": "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM="
+    },
     "tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz?cache=0&sync_timestamp=1601056395015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftinycolor2%2Fdownload%2Ftinycolor2-1.4.2.tgz",
@@ -14736,7 +14794,9 @@
       }
     },
     "typescript": {
-      "version": "4.0.5"
+      "version": "4.0.5",
+      "resolved": "https://registry.npm.taobao.org/typescript/download/typescript-4.0.5.tgz",
+      "integrity": "sha1-rp3d/RBp8ctb6z7zshcN18EzI4k="
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
@@ -15228,7 +15288,9 @@
       }
     },
     "web-vitals": {
-      "version": "0.2.4"
+      "version": "0.2.4",
+      "resolved": "https://registry.npm.taobao.org/web-vitals/download/web-vitals-0.2.4.tgz?cache=0&sync_timestamp=1595904283068&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fweb-vitals%2Fdownload%2Fweb-vitals-0.2.4.tgz",
+      "integrity": "sha1-7D30PINKIH/Xze/XMrKYeJbghRE="
     },
     "webidl-conversions": {
       "version": "6.1.0",

package.json

@@ -13,7 +13,9 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "antd": "^4.8.0",
+    "clipboard": "^2.0.6",
     "craco-less": "^1.17.0",
+    "marked": "^1.2.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.0",

src/App.less

 @import '~antd/dist/antd.less';
+@import './style/animate.less';
 
 .app {
   background-color: #fff;
   text-align: center;
 
   .header {
-    background-color: #fff;
+    position: sticky;
+    top: 0;
+    left: 0;
+    height: 175px;
+    width: 100%;
+    z-index: 2;
+
+    .search {
+      display: block;
+      opacity: 1;
+      z-index: 3;
+    }
   }
 
   .main {
@@ -16,17 +28,3 @@
     background-color: #fff;
   }
 }
-
-.logo {
-  height: 50px;
-  pointer-events: none;
-}
-
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

-import React from 'react';
+import React, {ReactInstance, ReactNode} from 'react';
+import ReactDOM from 'react-dom';
+
 import './App.less';
 
-import Index from "./Pages/Index/Index";
-import {Layout, Divider, BackTop} from "antd";
+import {BackTop} from "antd";
 import AppHeader from "./Element/AppHeader/AppHeader";
 import AppFooter from "./Element/AppFooter/AppFooter";
-import AppSearch from "./Component/AppSearch/AppSearch";
 import SearchList from "./Element/SearchLIst/SearchList";
+import AppSearch from "./Component/AppSearch/AppSearch";
+import {VerticalAlignTopOutlined} from "@ant-design/icons";
+import Details from "./Pages/Details/Details";
+import Index from "./Pages/Index/Index";
+
+class App extends React.Component {
 
-const {Header, Footer, Content} = Layout;
-
-
-function App() {
-    return (
-        <div>
-            <Layout className='app'>
-                <Header className='header'>
-                    <AppHeader/>
-                </Header>
-
-
-                <AppSearch/>
-
-                <Content className='main'>
-                    {/*<Index/>*/}
-                    <SearchList/>
-                </Content>
-
-                <Footer className='footer'>
-                    <AppFooter/>
-                </Footer>
-            </Layout>
-
-            <BackTop>
-                <div style={{
-                    height: 40,
-                    width: 40,
-                    lineHeight: '40px',
-                    borderRadius: 4,
-                    backgroundColor: '#101010',
-                    color: '#fff',
-                    textAlign: 'center',
-                    fontSize: 14,
-                }}>UP
+    public componentDidMount(): void {
+        this.setHeaderEffect();
+    }
+
+    private setHeaderEffect(){
+        const searchDiv = ReactDOM.findDOMNode(this.refs.searchDiv) as HTMLDivElement;
+        document.addEventListener('scroll', (e) => {
+            let scrolled = document.documentElement.scrollTop / (searchDiv.clientHeight + 30);
+            searchDiv.style.opacity = (1 - scrolled) + '';
+            searchDiv.style.zIndex = (scrolled >= 1) ? '-1' : '2';  // 不用display，否则会导致页面高度改变
+        });
+    }
+
+    public render(): ReactNode {
+        return (
+            <div>
+                <div className='app'>
+                    <div className='header' ref='searchDiv'>
+                        <AppHeader/>
+                        <div className='search'>
+                            <AppSearch/>
+                        </div>
+                    </div>
+
+
+                    <div className='main'>
+                        <Index/>
+                        {/*<SearchList/>*/}
+                        {/*<Details/>*/}
+                    </div>
+
+                    <div className='footer'>
+                        <AppFooter/>
+                    </div>
                 </div>
-            </BackTop>
-        </div>
-    );
+
+                <BackTop
+                    visibilityHeight={100}
+                >
+                    <VerticalAlignTopOutlined
+                        style={{
+                            height: 50,
+                            width: 50,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderRadius: 4,
+                            backgroundColor: '#101010',
+                            color: '#fff',
+                            fontSize: 30,
+                        }}/>
+                </BackTop>
+            </div>
+        );
+    }
 }
 
 export default App;

src/Component/AppSearch/AppSearch.less

@@ -8,23 +8,33 @@
   border-top-style: solid;
   border-top-width: 1px;
   border-color: rgba(0, 0, 0, .1);
-  padding: 10px 0;
+  padding: 1em 3em;
+
+  background-color: #fff;
+  //position: sticky;
+  //top: 78px;
+  //left: 0;
+  //height: auto;
+  //width: 100%;
+
+  box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
+  border-bottom: 0 solid #d2d2d2;
+
 
   .app-search-cont {
     display: flex;
     margin-left: auto;
     margin-right: auto;
-    padding-left: 2rem;
-    padding-right: 2rem;
+
+    align-items: center;
 
     .app-search-logo {
-      width: 80px;
+      height: 52px;
       margin-right: 0.5rem;
 
       &:hover {
-        animation: index-logo-spin 1s;
+        animation: spin 1s;
       }
-
     }
 
     .app-search-div {
@@ -52,10 +62,10 @@
         padding: 5px 35px;
         text-align: center;
         align-items: center;
+        transition-duration: .3s;
 
         &:hover {
           background-color: #767676;
-          color: white;
         }
       }
     }
@@ -63,6 +73,11 @@
     .app-search-input-icon {
       width: 50px;
       color: #767676;
+      transition-duration: .3s;
+
+      &:hover {
+        color: black;
+      }
     }
   }
 }
\ No newline at end of file

src/Component/SearchListItem/SearchListItem.less

@@ -5,7 +5,7 @@
  */
 
 .search-item {
-  display: flex;
+  display: inline-flex;
   padding: 1rem .25rem .5rem;
   flex: 1 1 auto;
 
@@ -14,12 +14,14 @@
 
     .search-item-title {
       color: black;
-      display: inline-block;
       font-weight: 600;
       color: rgba(0, 0, 0, .9);
-      margin: 0;
-      text-decoration: none;
       font-size: 1.25rem;
+      transition-duration: .3s;
+
+      &:hover {
+        font-size: 1.5rem;
+      }
     }
 
     .search-item-description {
@@ -30,17 +32,24 @@
       margin-top: .25rem;
       text-decoration: none;
       font-size: 1rem;
+      text-align: justify;
+
+      transition-duration: .3s;
+
+      &:hover {
+        color: black;
+      }
     }
 
     .search-item-info {
+      display: flex;
       flex-direction: row;
+      align-items: center;
       line-height: 1.5;
       color: rgba(0, 0, 0, .8);
       margin-bottom: .25rem;
       margin-top: .25rem;
       font-size: .875rem;
-      display: flex;
-      align-items: center;
 
       .search-item-info-avatar {
         width: 22px;
@@ -57,7 +66,6 @@
       }
 
       .search-item-info-date {
-        --wombat-red-hover: #c40b0a;
         font-size: .875rem;
         color: rgba(0, 0, 0, .5);
       }

src/Component/SearchListItem/SearchListItem.tsx

@@ -26,16 +26,17 @@ export default class SearchListItem extends React.Component<any> {
     }
 
     public render(): ReactNode {
-        const {title, link, description, userNick} = this.props.data;
+        const {title, link, description, userNick, date} = this.props.data;
         return (
             <div className='search-item'>
                 <div className='search-item-left'>
                     <a href={link}><h3 className='search-item-title'>{title}</h3></a>
                     <p className='search-item-description'>{description}</p>
                     <div className='search-item-info'>
-                        <img className='search-item-info-avatar' src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
+                        <img className='search-item-info-avatar'
+                             src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                         <div className='search-item-info-user'>{userNick}</div>
-                        <div className='search-item-info-date'>{userNick}</div>
+                        <div className='search-item-info-date'>{date}</div>
                     </div>
                 </div>
             </div>

src/Element/AppFooter/AppFooter.less

@@ -5,5 +5,9 @@
  */
 
 .app-footer {
+  border-top: solid rgba(0, 0, 0, 0.1) 1px;
 
+  flex: 0 0 auto;
+  background-color: transparent;
+  padding: 2rem;
 }
\ No newline at end of file

src/Element/AppHeader/AppHeader.less

@@ -7,13 +7,24 @@
 .app-header {
   display: flex;
   align-items: center;
+  padding: 1em 3em;
+
+  background-color: #fff;
+
+  //position: sticky;
+  //top: 0;
+  //left: 0;
+  //height: auto;
+  //width: 100%;
+
+  border-color: rgba(0,0,0,.2);
+  box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
 
   .app-logo {
     height: 50px;
-    //pointer-events: none;
 
     &:hover {
-      animation: index-logo-spin 1s;
+      animation: spin 1s;
     }
   }
 

src/Element/SearchLIst/SearchList.less

@@ -5,30 +5,38 @@
  */
 
 
-.search-list{
-  .search-list-pagination-top{
+.search-list {
+  .search-list-cont{
+    padding-left: 26px;
+    padding-right: 26px;
+  }
+
+  .search-list-pagination-top {
     border-bottom-style: solid;
     border-bottom-width: 1px;
-    border-color: rgba(0,0,0,.1);
+    border-color: rgba(0, 0, 0, .1);
     background-color: #f9f9f9;
 
-    .search-list-pagination{
+    .search-list-pagination-cont {
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       justify-content: space-between;
+      align-items: center;
       font-weight: 400;
-      max-width: 96rem;
-      margin: 0 auto;
-      padding: 0 2rem;
+      padding: 1.3rem 80px;
 
-      .search-list-num{
-        box-sizing: border-box;
-        float: left;
+      .search-list-num {
         font-weight: 600;
         color: #000;
-        padding-top: .5rem;
         font-size: 1.25rem;
-        margin-left: 0;
+        display: flex;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+      }
+
+      .search-list-pagination {
+        font-weight: 400;
       }
     }
 

src/Element/SearchLIst/SearchList.tsx

@@ -15,7 +15,7 @@ export default class SearchList extends React.Component<any> {
 
     public state: any = {
         showData: [],
-        totalLength: 0,
+        total: 0,
         pageIndex: 1,
         pageSize: 10,
         current: 1,
@@ -28,18 +28,25 @@ export default class SearchList extends React.Component<any> {
     }
 
     public componentDidMount(): void {
-        for (let i = 0; i < 50; i++) {
+        for (let i = 0; i < 500; i++) {
             this.totalData.push({
                 title: `Ant Design Title ${i}`,
-                userNick: `${i} 1111`,
-                date: `${i} 1111`,
+                userNick: `userNick${i}`,
+                date: 'publish 2020年10月31日',
                 link: 'https://www.baidu.com/',
-                description: "Ant Design, a design language for background applications, is refined by Ant UED Team",
+                description: `Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                `,
             });
         }
 
         this.setState({
-            totalLength: this.totalData.length,
+            total: this.totalData.length,
         });
         this.showPage(1);
     }
@@ -66,18 +73,19 @@ export default class SearchList extends React.Component<any> {
     }
 
     public render(): ReactNode {
-        const {showData, totalLength, pageSize, current} = this.state;
+        const {showData, total, pageSize, current} = this.state;
 
-        return (
-            <div className='search-list'>
+        const getPagination = () => {
+            return (
                 <div className='search-list-pagination-top'>
-                    <div className='search-list-pagination'>
+                    <div className='search-list-pagination-cont'>
                         <div>
-                            <h2 className="search-list-num">143147 packages found</h2>
+                            <h2 className="search-list-num">{`${total} packages found`}</h2>
                         </div>
                         <Pagination
+                            className='search-list-pagination'
                             current={current}
-                            total={totalLength}
+                            total={total}
                             pageSize={pageSize}
                             hideOnSinglePage={false}
                             showSizeChanger
@@ -85,9 +93,14 @@ export default class SearchList extends React.Component<any> {
                             onShowSizeChange={this.onShowSizeChange}
                         />
                     </div>
-
                 </div>
-                <Card>
+            );
+        }
+
+        return (
+            <div className='search-list'>
+                {getPagination()}
+                <Card className='search-list-cont'>
                     <List
                         itemLayout="horizontal"
                         dataSource={showData}
@@ -98,15 +111,7 @@ export default class SearchList extends React.Component<any> {
                         )}
                     />
                 </Card>
-
-                <Pagination
-                    total={totalLength}
-                    pageSize={pageSize}
-                    hideOnSinglePage={false}
-                    showSizeChanger
-                    onChange={this.onPageChange}
-                    onShowSizeChange={this.onShowSizeChange}
-                />
+                {getPagination()}
             </div>
         );
     }

src/Pages/Details/Details.less

+/*
+ * Details.less
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+.details {
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .details-title {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+    text-align: left;
+    background-color: #fff;
+    box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
+    padding: 1rem 2rem .3rem;
+
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .details-title-div {
+      width: 66.666%;
+      flex: 1 1 auto;
+
+      & > h2 {
+        font-weight: 600;
+        margin: 1rem 0 0;
+        font-size: 1.5rem;
+
+        & > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          letter-spacing: -0.8px;
+        }
+      }
+
+      & > span {
+        font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
+      }
+
+    }
+
+    .details-install-div {
+
+      min-width: 300px;
+
+      flex: 1 1 auto;
+
+      & > h3 {
+        color: rgba(0, 0, 0, .5);
+        padding-top: .5rem;
+        margin-bottom: 0;
+        margin-top: .5rem;
+        font-size: 1rem;
+      }
+
+      .details-install-cmd {
+        overflow: hidden;
+        padding: 1rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: left;
+        color: rgba(0, 0, 0, .8);
+        margin-bottom: 1rem;
+        height: 46px;
+        border: 1px solid #cbcbcb;
+        border-radius: 5px;
+
+        cursor:pointer;
+
+        transition-duration: .5s;
+
+        & > code {
+          font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
+          line-height: 24px;
+          display: block;
+          flex: 1 1 auto;
+          min-width: 0;
+          min-height: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-left: .5rem;
+        }
+
+        & > svg {
+          width: 12.59px;
+          fill: rgba(0, 0, 0, .5);
+        }
+
+        & > .svg-copy {
+          transition: .5s;
+          opacity: 0;
+        }
+
+        &:hover {
+          background-color: #DBFFDB;
+
+          & > .svg-copy {
+            opacity: 1;
+          }
+        }
+      }
+
+    }
+
+  }
+
+  .md-cont {
+    @import "/src/style/markdown";
+    text-align: left;
+    font-family: "Microsoft YaHei", arial, sans-serif;
+    color: #444444;
+    line-height: 1;
+    width: 66.66666%;
+    padding: 1rem 1rem .3rem 2rem;
+
+    flex: 1 1 auto;
+
+  }
+
+  .right-cont {
+    padding: 4rem 2rem .3rem 1rem;
+    text-align: left;
+
+    flex: 1 1 auto;
+
+  }
+
+}
\ No newline at end of file

src/Pages/Details/Details.tsx

+/*
+ * Details.tsx
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+
+import './Details.less';
+import ReactDOM from "react-dom";
+
+const ClipboardJS = require('clipboard');
+
+const marked = require('marked');
+const rendererMD = new marked.Renderer();
+marked.setOptions({
+    renderer: rendererMD,
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: false,
+    smartLists: true,
+    smartypants: false
+});//基本设置
+
+export default class Details extends React.Component<any> {
+
+    public state: any = {}
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+        const clipboard = new ClipboardJS('.click-copy', {
+            text: () => {
+                return 'npm i react'
+            }
+        });
+
+        clipboard.on('success', (e: any) => {
+            console.log(e);
+        });
+
+        clipboard.on('error', (e: any) => {
+            console.log(e);
+        });
+
+        const div = ReactDOM.findDOMNode(this.refs.mdDiv) as HTMLDivElement;
+        div.innerHTML = marked('# Getting Started with Create React App\n' +
+            '\n' +
+            'This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n' +
+            '\n' +
+            '## Available Scripts\n' +
+            '\n' +
+            'In the project directory, you can run:\n' +
+            '\n' +
+            '### `yarn start`\n' +
+            '```javascript\n' +
+            '    var a = 1;\n' +
+            '```\n' +
+            'Runs the app in the development mode.\\\n' +
+            'Open [http://localhost:3000](http://localhost:3000) to view it in the browser.\n' +
+            '\n' +
+            'The page will reload if you make edits.\\\n' +
+            'You will also see any lint errors in the console.\n' +
+            '\n' +
+            '### `yarn test`\n' +
+            '\n' +
+            'Launches the test runner in the interactive watch mode.\\\n' +
+            'See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n' +
+            '\n' +
+            '### `yarn build`\n' +
+            '\n' +
+            'Builds the app for production to the `build` folder.\\\n' +
+            'It correctly bundles React in production mode and optimizes the build for the best performance.\n' +
+            '\n' +
+            'The build is minified and the filenames include the hashes.\\\n' +
+            'Your app is ready to be deployed!\n' +
+            '\n' +
+            'See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n' +
+            '\n' +
+            '### `yarn eject`\n' +
+            '\n' +
+            '**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n' +
+            '\n' +
+            'If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n' +
+            '\n' +
+            'Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n' +
+            '\n' +
+            'You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n' +
+            '\n' +
+            '## Learn More\n' +
+            '\n' +
+            'You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n' +
+            '\n' +
+            'To learn React, check out the [React documentation](https://reactjs.org/).\n');
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    public render(): ReactNode {
+        return (
+            <div className='details'>
+                <div className="details-title">
+                    <div className='details-title-div'>
+                        <h2><span>react</span></h2>
+                        <span className="details-version">17.0.1&nbsp;•&nbsp;</span>
+                        <span className="details-date">Published&nbsp;•&nbsp;
+                        <time>18 days ago</time>
+                    </span>
+                    </div>
+
+                    <div className='details-install-div'>
+                        <h3>Install</h3>
+                        <p className="details-install-cmd click-copy">
+                            <svg viewBox="0 0 12.32 9.33">
+                                <g>
+                                    <line x1="7.6" y1="8.9" x2="7.6" y2="6.9"/>
+                                    <rect width="1.9" height="1.9"/>
+                                    <rect x="1.9" y="1.9" width="1.9" height="1.9"/>
+                                    <rect x="3.7" y="3.7" width="1.9" height="1.9"/>
+                                    <rect x="1.9" y="5.6" width="1.9" height="1.9"/>
+                                    <rect y="7.5" width="1.9" height="1.9"/>
+                                </g>
+                            </svg>
+                            <code title="Copy Command to Clipboard">npm i react</code>
+
+                            <svg className='svg-copy'
+                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                <path
+                                    d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/>
+                            </svg>
+                        </p>
+                    </div>
+
+                </div>
+
+                <div className='md-cont' ref='mdDiv'/>
+
+                <div className='right-cont'>
+                    aaaaaaaaa
+                </div>
+
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/Pages/Index/Index.less

@@ -5,26 +5,40 @@
  */
 
 .index {
+  height: 300vh;
+  margin: 0;
+  background-color: #000;
 
   .index-bg {
-    height: 796px;
+
+    --percentage: 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    //background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
+    background-size: 300% 100%;
+    background-position-x: calc(100% - var(--percentage));
+    background-clip: text;
+    -webkit-background-clip: text;
+
+    //height: 796px;
     background-image: url("https://static.npmjs.com/attachments/ck3uwvv67mydydr74ea00ip4j-bg-stripes.png");
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
+    //background-position: center center;
+    //background-repeat: no-repeat;
+    //background-size: cover;
+
+    display: flex;
+    align-items: center;
 
     .index-txt {
-      max-width: 48rem;
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
+      padding: 0 1rem;
       text-align: center;
       margin-left: auto;
       margin-right: auto;
 
       .index-txt-h1 {
-        color: #fff;
+        color: transparent;
+
         margin: .67em 0;
         box-sizing: border-box;
         line-height: 1.25;
@@ -34,102 +48,52 @@
       }
 
       .index-txt-cont {
+        color: transparent;
+
         font-family: 'Arimo', sans-serif;
-        color: #fff;
         text-align: center;
         box-sizing: border-box;
         line-height: 1.5;
-        max-width: 32rem;
+        font-size: 1rem;
+        max-width: 42rem;
         margin-left: auto;
         margin-right: auto;
       }
 
       .index-txt-cont-center {
+        color: transparent;
+
         margin-block-start: 0.83em;
         margin-block-end: 0.83em;
         margin-inline-start: 0;
         margin-inline-end: 0;
-        color: #fff;
-        font-size: 1.5rem;
+        font-size: 1.7rem;
         font-weight: 600;
       }
 
-      .index-btn-group {
-        text-align: center;
-        box-sizing: border-box;
-        display: flex;
-        flex-wrap: wrap;
+      .index-btn {
         margin-top: 4rem;
+        padding-bottom: 1rem;
+        text-align: center;
 
-        a {
-          display: block;
-          font-weight: 700;
-          color: #fff;
-          padding-top: 1rem;
-          padding-bottom: 1rem;
-          padding-left: 2rem;
-          padding-right: 2rem;
+        & > a {
+          color: transparent;
+          font-size: 2rem;
+          display: inline-block;
+          font-weight: bolder;
+          padding: 1rem 2rem;
           text-decoration: none;
           margin-left: auto;
           margin-right: auto;
-          max-width: 16rem;
-          border-bottom: solid 5px;
-          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-        }
-
-        .a-left {
-          background: #c12127;
-          border-color: #fa8717;
-        }
-
-        .a-right {
-          background: #e81aa8;
-          border-color: #b30ad2;
         }
 
-        .index-btn {
-          padding-bottom: 1rem;
-          width: 50%;
-          padding-right: 1rem;
+        & > a > div {
+          line-height: 0;
+          font-weight: bolder;
         }
       }
     }
   }
-
-  .index-header {
-    display: flex;
-    justify-content: left;
-    align-items: center;
-
-    .index-logo {
-      height: 50px;
-      pointer-events: none;
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      .index-logo {
-        animation: index-logo-spin infinite 20s linear;
-      }
-    }
-
-    @keyframes index-logo-spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-  }
-
-  .index-main {
-
-  }
-
-  .index-footer {
-
-  }
 }
 
 

src/Pages/Index/Index.tsx

@@ -6,11 +6,10 @@
 
 
 import React, {ReactNode} from 'react';
+import ReactDOM from 'react-dom';
 
 import './Index.less';
 
-import {Button} from "antd";
-
 export default class Index extends React.Component<any> {
 
     public state: any = {}
@@ -20,7 +19,13 @@ export default class Index extends React.Component<any> {
     }
 
     public componentDidMount(): void {
+        const indexTxt = ReactDOM.findDOMNode(this.refs.indexTxt) as HTMLDivElement;
+
+        document.addEventListener('scroll', (e) => {
+            let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
 
+            indexTxt.style.setProperty('--percentage', `${scrolled * 100}%`)
+        })
     }
 
     public componentWillUnmount(): void {
@@ -30,7 +35,7 @@ export default class Index extends React.Component<any> {
     public render(): ReactNode {
         return (
             <div className='index'>
-                <div className='index-bg'>
+                <div className='index-bg'  ref='indexTxt'>
                     <div className="index-txt">
                         <h1 className="index-txt-h1">
                             Build amazing things
@@ -52,20 +57,11 @@ export default class Index extends React.Component<any> {
                                 JavaScript development experience, with features like private packages.
                             </div>
 
-                            <div className="index-btn-group">
-                                <div className="index-btn">
-                                    <a href="/signup"
-                                       className="a-left">
-                                        Sign up for free
-                                    </a>
-                                </div>
-
-                                <div className="index-btn">
-                                    <a href="/products/pro"
-                                       className="a-right">
-                                        Learn about Pro
-                                    </a>
-                                </div>
+                            <div className="index-btn">
+                                <a href="/start">
+                                    Let's Get To Start
+                                    <div>____________________</div>
+                                </a>
                             </div>
                         </div>
                     </div>

src/index.less

-body {
+html,body {
   margin: 0;
+  padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+//
+//code {
+//  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+//  monospace;
+//}
\ No newline at end of file

src/style/animate.less

+/*
+ * animate.less
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+@keyframes bounce {
+  0%{
+    transform: translate3d(0,0,0);
+  }
+
+  from, 20%, 53%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+}
+
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/style/markdown.css

+/*
+ * markdown.css
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+@media screen and (min-width: 768px) {
+    body {
+        width: 748px;
+        margin: 10px auto;
+    }
+}
+
+h1, h2, h3, h4 {
+    color: #111111;
+    font-weight: 400;
+    margin-top: 1em;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: Georgia, Palatino, serif;
+}
+
+h1, h2, h3, h4, h5, p, dl {
+    margin-bottom: 16px;
+    padding: 0;
+}
+
+h1 {
+    font-size: 48px;
+    line-height: 54px;
+}
+
+h2 {
+    font-size: 36px;
+    line-height: 42px;
+}
+
+h1, h2 {
+    border-bottom: 1px solid #EFEAEA;
+    padding-bottom: 10px;
+}
+
+h3 {
+    font-size: 24px;
+    line-height: 30px;
+}
+
+h4 {
+    font-size: 21px;
+    line-height: 26px;
+}
+
+h5 {
+    font-size: 18px;
+    list-style: 23px;
+}
+
+a {
+    color: #0099ff;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+
+a:hover {
+    text-decoration: none;
+    color: #ff6600;
+}
+
+a:visited {
+    /*color: purple;*/
+}
+
+ul, ol {
+    padding: 0 0 0 24px;
+    margin: 0;
+}
+
+li {
+    line-height: 24px;
+}
+
+p, ul, ol {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+ol ol, ul ol {
+    list-style-type: lower-roman;
+}
+
+/*pre {
+    padding: 0px 24px;
+    max-width: 800px;
+    white-space: pre-wrap;
+}
+code {
+    font-family: Consolas, Monaco, Andale Mono, monospace;
+    line-height: 1.5;
+    font-size: 13px;
+}*/
+
+code, pre {
+    border-radius: 3px;
+    background-color: #f7f7f7;
+    color: inherit;
+}
+
+code {
+    font-family: Consolas, Monaco, Andale Mono, monospace;
+    margin: 0 2px;
+    padding: 5px 10px;
+}
+
+pre {
+    line-height: 1.7em;
+    overflow: auto;
+    padding: 6px 10px;
+    border-left: 5px solid #6CE26C;
+}
+
+pre > code {
+    border: 0;
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    font-size: .85em;
+    white-space: pre;
+    background: 0 0;
+
+}
+
+code {
+    color: #666555;
+}
+
+
+/** markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色 */
+/*code .keyword {
+  color: #8959a8;
+}
+
+code .number {
+  color: #f5871f;
+}
+
+code .comment {
+  color: #998
+}*/
+
+aside {
+    display: block;
+    float: right;
+    width: 390px;
+}
+
+blockquote {
+    border-left: .5em solid #eee;
+    padding: 0 0 0 2em;
+    margin-left: 0;
+}
+
+blockquote cite {
+    font-size: 14px;
+    line-height: 20px;
+    color: #bfbfbf;
+}
+
+blockquote cite:before {
+    content: '\2014 \00A0';
+}
+
+blockquote p {
+    color: #666;
+}
+
+hr {
+    text-align: left;
+    color: #999;
+    height: 2px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+}
+
+dl {
+    padding: 0;
+}
+
+dl dt {
+    padding: 10px 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+}
+
+dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+}
+
+dd {
+    margin-left: 0;
+}
+
+/* Code below this line is copyright Twitter Inc. */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%;
+    margin: 0;
+    vertical-align: baseline;
+    *vertical-align: middle;
+}
+
+button, input {
+    line-height: normal;
+    *overflow: visible;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer;
+    -webkit-appearance: button;
+}
+
+input[type=checkbox], input[type=radio] {
+    cursor: pointer;
+}
+
+/* override default chrome & firefox settings */
+input:not([type="image"]), textarea {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+input[type="search"] {
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+label,
+input,
+select,
+textarea {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: normal;
+    margin-bottom: 18px;
+}
+
+input[type=checkbox], input[type=radio] {
+    cursor: pointer;
+    margin-bottom: 0;
+}
+
+input[type=text],
+input[type=password],
+textarea,
+select {
+    display: inline-block;
+    width: 210px;
+    padding: 4px;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 18px;
+    height: 18px;
+    color: #808080;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+select, input[type=file] {
+    height: 27px;
+    line-height: 27px;
+}
+
+textarea {
+    height: auto;
+}
+
+/* grey out placeholders */
+:-moz-placeholder {
+    color: #bfbfbf;
+}
+
+::-webkit-input-placeholder {
+    color: #bfbfbf;
+}
+
+input[type=text],
+input[type=password],
+select,
+textarea {
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+    outline: none;
+    border-color: rgba(82, 168, 236, 0.8);
+    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+/* buttons */
+button {
+    display: inline-block;
+    padding: 4px 14px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-color: #0064cd;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+    background-image: linear-gradient(top, #049cdb, #0064cd);
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    border: 1px solid #004b9a;
+    border-bottom-color: #003f81;
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    border-color: #0064cd #0064cd #003f81;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+button:hover {
+    color: #fff;
+    background-position: 0 -15px;
+    text-decoration: none;
+}
+
+button:active {
+    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+table {
+    *border-collapse: collapse; /* IE7 and lower */
+    border-spacing: 0;
+    width: 100%;
+}
+
+table {
+    border: solid #ccc 1px;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    /*-webkit-box-shadow: 0 1px 1px #ccc;
+    -moz-box-shadow: 0 1px 1px #ccc;
+    box-shadow: 0 1px 1px #ccc;   */
+}
+
+table tr:hover {
+    background: #fbf8e9;
+    -o-transition: all 0.1s ease-in-out;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -ms-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+}
+
+table td, .table th {
+    border-left: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+    padding: 10px;
+    text-align: left;
+}
+
+table th {
+    background-color: #dce9f9;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
+    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
+    /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
+    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
+    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;*/
+    border-top: none;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+    padding: 5px;
+}
+
+table td:first-child, table th:first-child {
+    border-left: none;
+}
+
+table th:first-child {
+    -moz-border-radius: 6px 0 0 0;
+    -webkit-border-radius: 6px 0 0 0;
+    border-radius: 6px 0 0 0;
+}
+
+table th:last-child {
+    -moz-border-radius: 0 6px 0 0;
+    -webkit-border-radius: 0 6px 0 0;
+    border-radius: 0 6px 0 0;
+}
+
+table th:only-child {
+    -moz-border-radius: 6px 6px 0 0;
+    -webkit-border-radius: 6px 6px 0 0;
+    border-radius: 6px 6px 0 0;
+}
+
+table tr:last-child td:first-child {
+    -moz-border-radius: 0 0 0 6px;
+    -webkit-border-radius: 0 0 0 6px;
+    border-radius: 0 0 0 6px;
+}
+
+table tr:last-child td:last-child {
+    -moz-border-radius: 0 0 6px 0;
+    -webkit-border-radius: 0 0 6px 0;
+    border-radius: 0 0 6px 0;
+}
\ No newline at end of file

src/style/markdown.less

+/*
+ * markdown.less
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+@media screen and (min-width: 768px) {
+  body {
+    width: 748px;
+    margin: 10px auto;
+  }
+}
+
+h1, h2, h3, h4 {
+  color: #111111;
+  font-weight: 400;
+  margin-top: 1em;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: Georgia, Palatino, serif;
+}
+
+h1, h2, h3, h4, h5, p, dl {
+  margin-bottom: 16px;
+  padding: 0;
+}
+
+h1 {
+  font-size: 48px;
+  line-height: 54px;
+}
+
+h2 {
+  font-size: 36px;
+  line-height: 42px;
+}
+
+h1, h2 {
+  border-bottom: 1px solid #efeaea;
+  padding-bottom: 10px;
+}
+
+h3 {
+  font-size: 24px;
+  line-height: 30px;
+}
+
+h4 {
+  font-size: 21px;
+  line-height: 26px;
+}
+
+h5 {
+  font-size: 18px;
+  list-style: 23px;
+}
+
+a {
+  color: #0099ff;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+
+  &:hover {
+    text-decoration: none;
+    color: #ff6600;
+  }
+
+  &:visited {
+    color: purple;
+  }
+}
+
+ul, ol {
+  padding: 0 0 0 24px;
+  margin: 0;
+}
+
+li {
+  line-height: 24px;
+}
+
+p, ul, ol {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+ol ol, ul ol {
+  list-style-type: lower-roman;
+}
+
+/**/
+pre {
+  //padding: 0px 24px;
+  //max-width: 800px;
+  //white-space: pre-wrap;
+  line-height: 1.7em;
+  overflow: auto;
+  padding: 6px 10px;
+  border-left: 5px solid #6ce26c;
+
+  & > code {
+    border: 0;
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    font-size: .85em;
+    white-space: pre;
+    background: 0 0;
+  }
+}
+
+code {
+  //font-family: Consolas, Monaco, Andale Mono, monospace;
+  //line-height: 1.5;
+  //font-size: 13px;
+  font-family: Consolas, Monaco, Andale Mono, monospace;
+  margin: 0 2px;
+  color: #666555;
+  padding: 5px 10px;
+
+  // markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色
+  //.keyword {
+  //  color: #8959a8;
+  //}
+  //
+  //.number {
+  //  color: #f5871f;
+  //}
+  //
+  //.comment {
+  //  color: #998;
+  //}
+}
+
+
+code, pre {
+  border-radius: 3px;
+  background-color: #f7f7f7;
+  color: inherit;
+}
+
+
+aside {
+  display: block;
+  float: right;
+  width: 390px;
+}
+
+blockquote {
+  border-left: .5em solid #eee;
+  padding: 0 0 0 2em;
+  margin-left: 0;
+
+  cite {
+    font-size: 14px;
+    line-height: 20px;
+    color: #bfbfbf;
+
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+
+  p {
+    color: #666;
+  }
+}
+
+hr {
+  text-align: left;
+  color: #999;
+  height: 2px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: #e7e7e7;
+  border: 0 none;
+}
+
+dl {
+  padding: 0;
+
+  dt {
+    padding: 10px 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+}
+
+dd {
+  margin-left: 0;
+}
+
+/* Code below this line is copyright Twitter Inc. */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+
+button, input {
+  line-height: normal;
+  *overflow: visible;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+
+input[type=checkbox], input[type=radio] {
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+/* override default chrome & firefox settings */
+input:not([type="image"]), textarea {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label,
+input,
+select,
+textarea {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: normal;
+  margin-bottom: 18px;
+}
+
+input[type=text],
+input[type=password],
+textarea,
+select {
+  display: inline-block;
+  width: 210px;
+  padding: 4px;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 18px;
+  height: 18px;
+  color: #808080;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+select, input[type=file] {
+  height: 27px;
+  line-height: 27px;
+}
+
+textarea {
+  height: auto;
+}
+
+/* grey out placeholders */
+:-moz-placeholder {
+  color: #bfbfbf;
+}
+
+::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+
+input[type=text],
+input[type=password],
+select,
+textarea {
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+  outline: none;
+  border-color: rgba(82, 168, 236, 0.8);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+/* buttons */
+button {
+  display: inline-block;
+  padding: 4px 14px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-color: #0064cd;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+  background-image: linear-gradient(top, #049cdb, #0064cd);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  border: 1px solid #004b9a;
+  border-bottom-color: #003f81;
+  -webkit-transition: 0.1s linear all;
+  -moz-transition: 0.1s linear all;
+  transition: 0.1s linear all;
+  border-color: #0064cd #0064cd #003f81;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+
+  &:hover {
+    color: #fff;
+    background-position: 0 -15px;
+    text-decoration: none;
+  }
+
+  &:active {
+    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+}
+
+table {
+  *border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  border: solid #ccc 1px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  //-webkit-box-shadow: 0 1px 1px #ccc;
+  //-moz-box-shadow: 0 1px 1px #ccc;
+  //box-shadow: 0 1px 1px #ccc;
+
+  tr {
+    &:hover {
+      background: #fbf8e9;
+      -o-transition: all 0.1s ease-in-out;
+      -webkit-transition: all 0.1s ease-in-out;
+      -moz-transition: all 0.1s ease-in-out;
+      -ms-transition: all 0.1s ease-in-out;
+      transition: all 0.1s ease-in-out;
+    }
+
+    &:last-child {
+      td {
+        &:first-child {
+          -moz-border-radius: 0 0 0 6px;
+          -webkit-border-radius: 0 0 0 6px;
+          border-radius: 0 0 0 6px;
+        }
+
+        &:last-child {
+          -moz-border-radius: 0 0 6px 0;
+          -webkit-border-radius: 0 0 6px 0;
+          border-radius: 0 0 6px 0;
+        }
+      }
+    }
+  }
+
+  th {
+    background-color: #dce9f9;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
+    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
+    //-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+    //-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+    //box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+    border-top: none;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+    padding: 5px;
+
+    &:first-child {
+      -moz-border-radius: 6px 0 0 0;
+      -webkit-border-radius: 6px 0 0 0;
+      border-radius: 6px 0 0 0;
+    }
+
+    &:last-child {
+      -moz-border-radius: 0 6px 0 0;
+      -webkit-border-radius: 0 6px 0 0;
+      border-radius: 0 6px 0 0;
+    }
+
+    &:only-child {
+      -moz-border-radius: 6px 6px 0 0;
+      -webkit-border-radius: 6px 6px 0 0;
+      border-radius: 6px 6px 0 0;
+    }
+  }
+}
+
+table td, .table th {
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+  padding: 10px;
+  text-align: left;
+}
+
+table td:first-child, table th:first-child {
+  border-left: none;
+}

yarn.lock

@@ -3253,6 +3253,15 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
+clipboard@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
+  integrity sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -4062,6 +4071,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=
+
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -5405,6 +5419,13 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
@@ -7222,6 +7243,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npm.taobao.org/marked/download/marked-1.2.3.tgz#58817ba348a7c9398cb94d40d12e0d08df83af57"
+  integrity sha1-WIF7o0inyTmMuU1A0S4NCN+Dr1c=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -10295,6 +10321,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selfsigned@^1.10.7:
   version "1.10.8"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
@@ -11157,6 +11188,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=
+
 tinycolor2@^1.4.1:
   version "1.4.2"
   resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"