diff --git a/src/App.vue b/src/App.vue
index d16fb31..c719e62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,9 @@
     #app {
         width: 100%;
         height: 100%;
+        font-size: 14px;
+        padding: 0;
+        margin: 0;
     }
 
     $width: 1000;
@@ -94,6 +97,14 @@
         $padding: $padding - 1;
     }
 
+    $padding: 50;
+    @while $padding > 0 {
+        .p#{$padding}p {
+            padding: #{$padding}px !important;
+        }
+        $padding: $padding - 1;
+    }
+
     $font: 30;
     @while $font > 0 {
         .f#{$font} {
@@ -102,6 +113,13 @@
         $font: $font - 1;
     }
 
+    $width: 300;
+    @while $width > 0 {
+        .w#{$width} {
+            width: percentage($width / 100);
+        }
+        $width: $width - 10;
+    }
 
     .pull-left {
         float: left;
@@ -111,14 +129,15 @@
         float: right;
     }
 
-    .block{
+    .block {
         display: block;
     }
 
-    .oh{
+    .oh {
         overflow: hidden;
     }
-    .tac{
+
+    .tac {
         text-align: center;
     }
 </style>
diff --git a/src/assets/img/More.svg b/src/assets/img/More.svg
new file mode 100644
index 0000000..012d378
--- /dev/null
+++ b/src/assets/img/More.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704446177" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36679" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M146.030911 517.349845m-87.923492 0a87.923492 87.923492 0 1 0 175.846984 0 87.923492 87.923492 0 1 0-175.846984 0Z" fill="#ffffff" p-id="36680"></path><path d="M512 512m-87.923492 0a87.923492 87.923492 0 1 0 175.846984 0 87.923492 87.923492 0 1 0-175.846984 0Z" fill="#ffffff" p-id="36681"></path><path d="M873.565802 512m-87.923491 0a87.923492 87.923492 0 1 0 175.846983 0 87.923492 87.923492 0 1 0-175.846983 0Z" fill="#ffffff" p-id="36682"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/QQ.svg b/src/assets/img/QQ.svg
new file mode 100644
index 0000000..aceac9e
--- /dev/null
+++ b/src/assets/img/QQ.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704183989" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35475" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M918.67136 594.22848c-15.26656-37.2352-35.32928-70.4064-56.28288-96.06016 9.82016-13.0304 16.0768-32.64256 16.0768-54.58176 0-30.01088-11.6992-55.65952-28.2112-66.07616 2.5792-16.48 3.92576-33.36448 3.92576-50.56128C854.17984 146.34752 706.68032 0 524.69888 0 342.8096 0 195.29728 146.34752 195.29728 326.94912c0 17.36064 1.37728 34.40128 4.00512 51.03104-16.14976 10.70976-27.50592 36.04736-27.50592 65.6064 0 17.15072 3.82592 32.88064 10.19392 45.15584-21.12512 22.8032-41.71392 52.03968-58.58048 85.6384-46.71104 93.10848-39.7376 187.2192-10.97088 202.54592 14.75584 7.85664 53.2352-16.82432 91.0272-62.62656 6.12992 53.89696 31.6352 103.09248 70.6688 142.68672-64.66816 19.12192-107.52768 56.8704-101.78432 95.18592 7.15392 48.41728 89.03808 79.4432 182.95552 69.31072 68.7296-7.44576 124.7936-34.87872 147.1232-68.04864 5.76256 0.25984 11.56352 0.39936 17.40416 0.39936 9.36832 0 18.63552-0.3584 27.79776-1.02016 22.82112 32.79872 76.86144 60.31616 142.4064 68.68992 91.05792 11.56864 169.87392-18.18624 175.99488-66.46912 4.90112-38.49088-37.76256-77.15968-101.35808-97.15072 37.82144-38.016 63.12192-84.98304 70.65984-136.51712 33.55904 45.888 67.87072 75.2 85.81888 71.25888C942.36288 787.97312 957.5232 689.01376 918.67136 594.22848z" p-id="35476" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/collect.svg b/src/assets/img/collect.svg
new file mode 100644
index 0000000..f8b511f
--- /dev/null
+++ b/src/assets/img/collect.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702140748" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7467" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 134.608l121.136 248.451 270.871 39.867L708.005 616.305l46.265 273.088L512 760.464 269.73 889.393l46.266-273.088L119.993 422.926l270.873-39.867L512 134.608M512 77.923c-21.302 0-40.771 12.251-50.204 31.583l-108.12 221.763-241.724 35.547c-21.109 3.118-38.637 18.047-45.227 38.583-6.563 20.535-1.094 43.066 14.165 58.106l174.921 172.598L214.549 879.82c-3.609 21.274 5.032 42.767 22.286 55.43 9.762 7.163 21.301 10.827 32.896 10.827 8.914 0 17.882-2.16 26.087-6.509L512 824.505l216.239 115.063c8.176 4.349 17.117 6.509 26.03 6.509 11.622 0 23.188-3.664 32.923-10.827 17.256-12.69 25.896-34.181 22.287-55.43l-41.29-243.718L943.11 463.504c15.256-15.04 20.727-37.571 14.164-58.106-6.589-20.536-24.118-35.465-45.228-38.583l-241.722-35.547L562.229 109.533C552.797 90.174 533.328 77.923 512 77.923L512 77.923z" p-id="7468"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/dislike.svg b/src/assets/img/dislike.svg
new file mode 100644
index 0000000..008daf3
--- /dev/null
+++ b/src/assets/img/dislike.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539703523601" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28527" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1022.306364 319.860915c-14.947324-164.51903-131.394657-283.880993-277.126142-283.880993-97.088678 0-185.984884 52.246707-236.006231 135.98323-49.568398-84.819663-134.821317-136.002923-230.354213-136.002924C133.107987 35.960228 16.64096 155.322192 1.71333 319.841222c-1.181607 7.266881-6.026194 45.511549 8.704502 107.880685 21.229532 89.959652 70.266208 171.785911 141.773102 236.577341l356.746735 323.740524 21.190146-18.886013 0.551416 0.177241 0.315096-0.964979 340.814739-304.027386c71.506895-64.811124 120.54357-146.617689 141.773102-236.597035 14.730696-62.369137 9.886109-100.613805 8.724196-107.880685zM502.576687 929.097294L178.658923 635.113564c-65.598861-59.434814-110.499913-134.2699-129.897956-216.430948-13.942958-59.021251-8.212166-92.362252-8.192473-92.578879l0.295402-1.989038c12.800739-144.136316 112.863127-248.767583 237.955882-248.767583 92.303171 0 173.558321 56.717118 212.118084 147.996231l1.280074 3.052484-160.166779 160.166778 293.136912 39.071793-224.347713 205.658634 166.35052 103.96169-64.614189 193.842568z m472.662346-510.394984c-19.378349 82.161048-64.299094 157.015828-129.779795 216.33248L556.024694 893.27492l58.33198-174.976249-148.744581-92.972748 248.29494-227.597131-297.666404-39.701983 92.480413-92.480412 0.334788 0.768044 0.807431-1.89057 16.069851-16.069851-6.538224-6.538223 7.798604-18.492144c37.949266-89.880878 123.497586-147.976537 217.98673-147.976537 125.073062 0 225.155144 104.631267 238.211897 250.63846 0.05908 0.334789 5.789872 33.695482-8.153086 92.716734z" fill="" p-id="28528"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/dongtaibizhi.svg b/src/assets/img/dongtaibizhi.svg
new file mode 100644
index 0000000..a7d50f4
--- /dev/null
+++ b/src/assets/img/dongtaibizhi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702346012" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18136" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M941.281043 465.126436C920.593885 260.512269 754.041592 90.146113 549.363979 66.837244c-200.047152-22.781866-395.149689 92.659353-469.016023 280.413528l45.288462 20.782326C187.904601 206.733435 355.301122 99.341542 528.307408 114.756627c203.221448 18.107403 365.580233 190.388165 365.580233 395.940704l0 0.072655 0 0.01228-0.01228 3.315512c-1.50119 182.809559-135.028323 347.731726-314.391387 385.303436-188.956559 39.581484-383.957789-65.12116-453.852672-245.89434l-45.352931 20.808932c81.570807 207.079312 309.844837 324.028884 525.582343 269.673929C818.177308 890.49845 963.404923 683.143868 941.281043 465.126436z" p-id="18137"></path><path d="M718.39472 619.670232l47.597041 17.657148c7.095605-15.127536 12.96529-30.656207 17.375739-46.557362 27.580149-99.366102 3.03308-210.279191-74.463945-289.085024-115.479081-117.420293-304.279075-118.998231-421.703461-3.52222-0.606821 0.597611-1.201361 1.189082-1.802042 1.789763-115.624391 115.624391-116.595508 303.096133-1.720178 419.913699 78.753645 80.075757 191.58441 106.170065 292.63999 78.111009 15.888875-4.41045 31.396057-10.377348 46.523593-17.472953l-17.663288-47.62774c-15.08558 7.373944-30.579459 13.164834-46.590108 17.300015-83.157955 21.473057-175.043688 0.352017-239.473093-65.164139-95.27697-96.878444-94.63945-253.851569 2.936889-351.412558 97.694019-96.077196 255.338433-94.761224 351.415628 2.932796 63.186088 64.25135 83.23368 154.713664 62.188364 236.537228C731.536019 589.089749 725.742059 604.596931 718.39472 619.670232z" p-id="18138"></path><path d="M433.806103 434.18882c12.837376-10.504238 28.095895-18.006096 45.028543-21.049409l-21.021779-45.813419c-16.338107 4.38589-31.751145 10.993378-45.37442 20.287045-38.992059 26.599821-64.818261 71.148433-65.239863 121.918747-0.688685 82.34238 65.506946 149.650345 147.846256 150.33596 0.427742 0.00614 0.846274 0.00614 1.274016 0.00614 81.757049 0 148.382469-65.937758 149.065014-147.852396 0.430812-51.671846-25.501814-97.378841-65.209164-124.461663-13.607926-9.282411-29.033243-15.904225-45.376467-20.287045l-21.051455 45.871747c16.623609 2.936889 31.933293 10.213619 45.073568 20.961404 2.805906 2.293229 5.763261 4.353145 8.341992 6.973832 18.615986 18.931165 28.747741 43.975561 28.526707 70.527286-0.455371 54.349839-45.030589 98.567923-100.227726 98.564853-54.80521-0.458441-99.023294-45.419446-98.564853-100.227726C397.150252 479.335043 411.694503 452.28292 433.806103 434.18882z" p-id="18139"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/download.svg b/src/assets/img/download.svg
new file mode 100644
index 0000000..3572bcd
--- /dev/null
+++ b/src/assets/img/download.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702126092" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6756" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M760.4736 493.9264a25.6 25.6 0 0 0-36.1984 0L512 706.2016V128a25.6 25.6 0 0 0-51.2 0v578.2016L248.5248 493.9264a25.6 25.6 0 0 0-36.1984 36.1984l256 256a25.4976 25.4976 0 0 0 36.2496-0.0512l256-256a25.6 25.6 0 0 0 0-36.1984z" fill="" p-id="6757"></path><path d="M896 972.8h-819.2C34.4576 972.8 0 938.3424 0 896v-102.4a25.6 25.6 0 0 1 51.2 0v102.4a25.6 25.6 0 0 0 25.6 25.6h819.2a25.6 25.6 0 0 0 25.6-25.6v-102.4a25.6 25.6 0 0 1 51.2 0v102.4c0 42.3424-34.4576 76.8-76.8 76.8z" fill="" p-id="6758"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/friend_circle.svg b/src/assets/img/friend_circle.svg
new file mode 100644
index 0000000..7fc8cca
--- /dev/null
+++ b/src/assets/img/friend_circle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539699529646" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2226" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.666 64.134c-17.104 0-33.904 1.032-50.431 2.977-40.505 4.583-79.33 14.702-115.828 29.397 0 0 300.947 297.82 308.96 308.891L656.367 87.804c-8.969-3.053-18.131-5.802-27.369-8.362C592.237 69.553 553.561 64.134 513.666 64.134L513.666 64.134zM828.014 193.516c-12.064-12.064-24.703-23.215-37.756-33.556-31.916-25.352-66.504-45.735-102.66-61.085 0 0 2.215 423.265 0 436.781l224.637-224.593c-4.203-8.478-8.742-16.917-13.518-25.199C879.666 252.879 856.229 221.688 828.014 193.516L828.014 193.516zM926.621 346.301c0 0-297.736 300.91-308.885 308.924l317.631 0c3.053-8.969 5.805-18.133 8.322-27.371 9.924-36.842 15.35-75.399 15.35-115.332 0-17.067-1.07-33.903-3.021-50.432C951.438 421.584 941.362 382.76 926.621 346.301L926.621 346.301zM484.917 688.668l224.632 224.595c8.553-4.237 16.916-8.704 25.236-13.513 32.986-18.977 64.139-42.452 92.391-70.703 12.021-12.027 23.135-24.703 33.518-37.756 25.309-31.921 45.738-66.468 61.082-102.662C921.778 688.629 498.474 690.847 484.917 688.668L484.917 688.668zM369.663 618.118l0 317.63c9.013 3.054 18.17 5.841 27.372 8.326 36.804 9.926 75.403 15.345 115.337 15.345 17.023 0 33.859-1.07 50.353-2.978 40.506-4.62 79.332-14.695 115.828-29.436C678.59 927.006 377.679 629.267 369.663 618.118L369.663 618.118zM338.051 485.643 113.495 710.235c4.203 8.592 8.747 16.992 13.518 25.236 18.976 33.062 42.451 64.213 70.703 92.428 12.026 12.065 24.702 23.173 37.756 33.52 31.952 25.39 66.429 45.736 102.698 61.08C338.169 922.5 335.878 499.197 338.051 485.643L338.051 485.643zM82.267 395.89c-9.888 36.804-15.307 75.402-15.307 115.336 0 17.024 1.069 33.897 3.015 50.393 4.583 40.542 14.622 79.369 29.435 115.789 0 0 297.706-300.911 308.853-308.89L90.592 368.518C87.538 377.449 84.789 386.65 82.267 395.89L82.267 395.89zM289.073 125.521c-33.061 19.013-64.214 42.494-92.391 70.665-12.139 12.104-23.21 24.779-33.556 37.756-25.352 31.921-45.736 66.506-61.119 102.736 0 0 423.377-2.253 436.895-0.076L314.305 112.009C305.757 116.282 297.318 120.751 289.073 125.521L289.073 125.521z" p-id="2227" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/hepai.svg b/src/assets/img/hepai.svg
new file mode 100644
index 0000000..e7d25db
--- /dev/null
+++ b/src/assets/img/hepai.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702397110" class="icon" style="" viewBox="0 0 1306 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21378" xmlns:xlink="http://www.w3.org/1999/xlink" width="255.078125" height="200"><defs><style type="text/css"></style></defs><path d="M0 358.982899c26.670259-186.69181 154.22367-278.298351 318.303739-328.160139 175.675834-53.340517 348.452727-38.266023 510.793432 51.601153 78.851199 43.484117 142.048117 103.782093 174.516258 189.590752 45.223482 120.016164 13.914918 225.537622-72.473529 314.82501-92.186329 95.08527-209.88334 140.88854-339.176115 153.064093-60.877764 5.797882-122.335317-0.579788-183.792869-2.898941-16.813859-0.579788-30.148988 0.579788-44.643694 10.436188-66.095858 43.484117-137.989599 73.053317-215.681222 87.548023-16.813859 2.898941-37.686235 12.755341-49.282-8.117035-12.175553-21.452165 6.377671-34.787294 18.553223-48.702211 30.728776-33.047929 59.718188-66.675647 75.952258-111.899129-17.973435-12.755341-36.526659-25.510682-53.920306-38.845811C66.675647 570.025815 15.654282 499.871439 2.898941 405.945746c-0.579788-2.898941-1.739365-5.218094-2.898941-8.117035C0 385.073369 0 371.73824 0 358.982899zM287.574963 681.345155c1.159576 1.159576 2.319153 2.319153 2.898941 3.478729 19.7128-13.335129 39.4256-26.670259 59.718188-38.845811 7.537247-4.058518 17.393647-7.537247 25.510682-6.377671 67.255435 12.175553 134.51087 19.133012 202.925881 10.436188 102.622517-12.755341 197.127999-45.223482 275.39941-115.957646 92.186329-84.069294 103.202305-197.707787 28.409623-290.473904-31.308564-38.266023-69.574588-67.255435-113.638493-89.287388C648.783031 92.860101 521.809408 79.524971 390.777268 106.775018c-91.606541 18.553223-174.516258 56.819247-239.452539 126.973623-60.297976 64.936282-75.37247 150.74494-37.106447 226.697198 23.191529 46.383058 59.1384 81.750141 102.042729 110.159764 30.148988 19.7128 61.457553 37.106447 93.345905 56.819247C302.069668 645.978073 295.11221 663.37172 287.574963 681.345155z" p-id="21379"></path><path d="M1304.52352 589.158827c-12.755341 37.106447-22.611741 75.952258-40.005388 111.31934-30.148988 60.297976-79.430988 104.361882-136.250234 139.728964-15.654282 9.8564-19.133012 17.973435-8.696823 32.468141 22.031953 30.148988 44.063906 60.877764 66.675647 90.446964 4.638306 6.377671 12.755341 11.015976 15.074494 17.973435 3.478729 9.8564 7.537247 23.191529 4.058518 31.308564-2.898941 6.377671-18.553223 12.755341-26.670259 11.015976-45.80327-11.015976-91.606541-20.872376-135.090658-37.686235-37.686235-14.494706-71.313952-37.106447-107.840611-55.079882-9.276612-4.638306-22.031953-8.117035-31.888353-6.957459-113.638493 16.23407-225.537622 9.8564-333.958021-29.5692-38.266023-13.914918-74.792682-33.047929-112.478917-49.861788 0.579788-2.319153 1.159576-4.638306 1.739365-6.957459 38.845811 0 78.271411 2.898941 117.117223-0.579788 161.181128-13.335129 306.707974-66.095858 422.085832-183.792869 102.622517-105.521458 142.627905-230.755716 107.260823-376.282562-0.579788-1.739365-0.579788-4.058518-0.579788-12.755341 28.409623 20.872376 55.079882 37.106447 78.851199 57.399035 61.457553 53.920306 106.101246 118.276799 117.697011 201.766304 0 1.739365 2.319153 3.478729 3.478729 5.218094C1304.52352 548.57365 1304.52352 568.866238 1304.52352 589.158827z" p-id="21380"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/href.svg b/src/assets/img/href.svg
new file mode 100644
index 0000000..fccc311
--- /dev/null
+++ b/src/assets/img/href.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702514032" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27551" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M565.536 421.504a93.952 93.952 0 0 0-35.344 16.96 132.656 132.656 0 0 1-0.192 187.456c-2.88 2.896-5.904 5.552-8.96 8.08l-0.24-0.208a133.056 133.056 0 0 1-33.296 20.32l0.208 0.208a133.12 133.12 0 0 1-88.304 5.216l-3.28-1.008a126.56 126.56 0 0 1-7.52-2.608c-1.376-0.544-2.752-1.024-4.112-1.616a152.624 152.624 0 0 1-16.256-8.256c-0.832-0.512-1.712-0.992-2.544-1.504a121.008 121.008 0 0 1-8.368-5.744 131.92 131.92 0 0 1-15.488-13.072c-0.656-0.624-1.184-1.344-1.808-2L116.352 400.128c-0.656-0.624-1.36-1.168-2-1.808a132.784 132.784 0 0 1 0-187.808 132.88 132.88 0 0 1 177.856-9.024c3.568 2.88 7.008 5.968 10.32 9.264l146.928 146.96a206.16 206.16 0 0 1 30.704-22.688l-151.136-151.088-0.08 0.064-0.112-0.128a169.968 169.968 0 0 0-120.224-49.904 170.016 170.016 0 0 0-120.576 49.984c-66.624 66.624-66.624 174.656 0 241.296L315.28 652.48l0.048-0.048c66.592 66.432 174.448 66.384 240.976-0.112 63.296-63.296 66.288-163.856 9.232-230.816m370.72 198.768l-0.128-0.096 0.016-0.032-0.192-0.176-175.424-175.424-51.904-51.888-0.112 0.096c-66.608-66.432-174.512-66.4-241.088 0.112-63.328 63.28-66.304 163.888-9.2 230.832a93.6 93.6 0 0 0 35.344-16.96 132.08 132.08 0 0 1-38.176-88.384 132.208 132.208 0 0 1 38.608-99.088c2.88-2.88 5.888-5.536 8.976-8.08l0.112 0.128a131.696 131.696 0 0 1 33.344-20.288l-0.176-0.16a133.36 133.36 0 0 1 89.072-4.96l1.168 0.352c3.568 1.072 7.104 2.32 10.592 3.712l1.36 0.512c3.776 1.552 7.504 3.248 11.136 5.184l1.328 0.736a117.872 117.872 0 0 1 12.592 7.808c1.776 1.216 3.52 2.496 5.216 3.824 1.648 1.232 3.232 2.48 4.832 3.824 1.024 0.88 2.016 1.84 3.024 2.736 1.808 1.616 3.664 3.136 5.408 4.88 0.48 0.496 0.944 1.024 1.392 1.536l54.064 54.08 170.128 169.968c0.64 0.608 1.36 1.168 2 1.808a132.704 132.704 0 0 1 0 187.792 132.944 132.944 0 0 1-187.936 0 6.464 6.464 0 0 1-0.704-0.8l-145.008-144.992-1.52-1.488a206.64 206.64 0 0 1-30.832 22.8l9.264 9.264 141.984 141.856 0.064-0.096 0.112 0.128a170.096 170.096 0 0 0 120.336 49.872 170.08 170.08 0 0 0 120.624-49.936c66.528-66.544 66.608-174.336 0.304-240.992" fill="#515151" p-id="27552"></path><path d="M121.952 459.312l121.616 121.584 26.8-26.816-121.632-121.584-26.784 26.816z m241.232-241.248l-26.8 26.8 112.96 112.928a206.944 206.944 0 0 1 30.816-22.784l-116.976-116.944z" fill="#515151" p-id="27553"></path><path d="M543.584 710.176l117.136 117.04 26.816-26.832-113.104-113.008a209.28 209.28 0 0 1-30.848 22.8m236.784-245.808l-26.8 26.8 121.632 121.552 26.832-26.816-121.664-121.536z" fill="#515151" p-id="27554"></path><path d="M549.92 645.808h18.944V626.88H549.92v18.928z m18.944-18.928h18.976v-18.976h-18.976v18.976z m-37.904 0h18.976v-18.976h-18.976v18.976z m37.904-37.936H549.92v18.976h18.944v-18.976z m0 0h18.976v-18.944h-18.976v18.944z m-37.904 0h18.976v-18.944h-18.976v18.944z m37.904-37.92H549.92v18.976h18.944v-18.976z m0 0h18.976v-18.96h-18.976v18.96z m-37.904 0h18.976v-18.96h-18.976v18.96z m37.904-37.904H549.92v18.96h18.944V513.12z m0 0h18.976v-18.96h-18.976v18.96z m-37.904 0h18.976v-18.96h-18.976v18.96z m37.904-37.92H549.92v18.96h18.944V475.2z m0 0h18.976v-18.96h-18.976V475.2z m-37.904 0h18.976v-18.96h-18.976V475.2z m37.904-37.904H549.92v18.96h18.944v-18.96z m18.96-18.96h-18.976v18.96h18.976v-18.96z m-56.864 18.96h18.976v-18.96h-18.976v18.96z m75.824 151.648h-18.96v18.976h18.96v-18.976z m0-37.92h-18.96v18.976h18.96v-18.976z m0-37.904h-18.96v18.96h18.96V513.12z m0-37.92h-18.96v18.96h18.96V475.2z m0-37.904h-18.96v18.96h18.96v-18.96z" fill="#515151" p-id="27555"></path><path d="M962.912 593.376l0.144-0.096-227.616-227.408c-59.232-59.2-145.184-75.136-219.024-48.24l-158.352-158.304A207.872 207.872 0 0 0 208.528 96C93.344 96 0 189.328 0 304.448c0 57.552 23.328 109.632 61.04 147.36l-0.112 0.096 227.488 227.408c59.216 59.184 145.12 75.136 218.928 48.256l158.416 158.288a208 208 0 0 0 149.616 63.344c115.232 0 208.64-93.328 208.64-208.48a207.744 207.744 0 0 0-61.104-147.344m-647.6 59.056l-0.096 0.096L87.728 425.104l0.08-0.08-0.128-0.128c-66.56-66.544-66.56-174.464 0-241.024 66.608-66.56 174.544-66.56 241.136 0l0.096 0.128 0.112-0.096 151.136 151.088c-10.8 6.528-21.104 14.128-30.816 22.784l-145.312-145.248c-0.624-0.656-1.168-1.36-1.808-2.016a132.88 132.88 0 0 0-187.872 0 132.784 132.784 0 0 0 0 187.808c0.656 0.656 1.344 1.184 2 1.808l223.664 223.584c0.624 0.656 1.168 1.36 1.808 2a132.864 132.864 0 0 0 187.856 0c51.712-51.68 51.84-135.344 0.48-187.264a93.728 93.728 0 0 1 35.344-16.96c57.056 66.96 54.096 167.536-9.232 230.816-66.512 66.544-174.368 66.576-240.96 0.128M141.36 371.376a94.624 94.624 0 0 1 0-133.856 94.72 94.72 0 0 1 133.904 0l0.048 0.08 0.08-0.08 147.952 147.904c-53.968 69.2-58.112 164.384-12.512 237.664a94.144 94.144 0 0 1-41.92-24.24l-0.08 0.096L141.344 371.52l0.08-0.096-0.064-0.048m363.776 96.192a94.56 94.56 0 0 1 13.472 110.016 94.512 94.512 0 0 1-13.472-110.016m377.408 206.256a94.56 94.56 0 0 1 0 133.84 94.752 94.752 0 0 1-134-0.08l-0.096 0.08-148.048-147.936c53.888-69.2 58.032-164.384 12.432-237.648a94.336 94.336 0 0 1 42.048 24.256l0.096-0.08L882.56 673.68l-0.08 0.08 0.064 0.064m53.712 187.504c-66.624 66.544-174.608 66.544-241.232 0l-0.128-0.128-0.064 0.08-151.248-151.104a207.472 207.472 0 0 0 30.832-22.8l145.408 145.28c0.624 0.656 1.168 1.376 1.808 2.016 51.92 51.856 136.048 51.856 187.952 0s51.904-135.936 0-187.792c-0.624-0.64-1.36-1.2-2-1.808L683.808 421.472c-0.64-0.656-1.184-1.36-1.808-2a132.992 132.992 0 0 0-187.952 0 132.704 132.704 0 0 0-0.48 187.28 93.84 93.84 0 0 1-35.344 16.96c-57.104-66.96-54.112-167.552 9.2-230.832 66.576-66.512 174.48-66.544 241.088-0.112l0.112-0.08 227.6 227.392-0.096 0.112a0.432 0.432 0 0 1 0.128 0.112c66.608 66.544 66.608 174.448 0 241.024" fill="#515151" p-id="27556"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/ic_more.svg b/src/assets/img/ic_more.svg
new file mode 100644
index 0000000..7aecccf
--- /dev/null
+++ b/src/assets/img/ic_more.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704504667" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M702.144 547.392L393.792 855.68a50.816 50.816 0 0 1-71.936-71.872l270.976-270.912-270.848-273.728a51.2 51.2 0 0 1 72.384-72.384l300.8 304.32a48.448 48.448 0 0 1 6.4 4.416 50.816 50.816 0 0 1 0.576 71.872z" fill="#ffffff" p-id="37949"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/loved.svg b/src/assets/img/loved.svg
new file mode 100644
index 0000000..7a14a6a
--- /dev/null
+++ b/src/assets/img/loved.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#eb6276"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/qiangjing.svg b/src/assets/img/qiangjing.svg
new file mode 100644
index 0000000..4a18d07
--- /dev/null
+++ b/src/assets/img/qiangjing.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702199514" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10387" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M509.866667 896a106.773333 106.773333 0 0 1-104.384 85.333333H149.184A106.688 106.688 0 0 1 42.666667 874.816V618.517333a106.752 106.752 0 0 1 85.333333-104.405333V149.482667A106.816 106.816 0 0 1 234.816 42.666667h639.701333A106.816 106.816 0 0 1 981.333333 149.482667v639.701333A106.816 106.816 0 0 1 874.517333 896H509.866667z m2.133333-85.333333h362.517333c11.861333 0 21.482667-9.6 21.482667-21.482667V149.482667C896 137.621333 886.4 128 874.517333 128H234.816C222.954667 128 213.333333 137.6 213.333333 149.482667V512h192.149334A106.688 106.688 0 0 1 512 618.517333V810.666667zM128 618.517333v256.298667c0 11.541333 9.6 21.184 21.184 21.184h256.298667c11.541333 0 21.184-9.6 21.184-21.184V618.517333c0-11.541333-9.6-21.184-21.184-21.184H149.184c-11.541333 0-21.184 9.6-21.184 21.184z" fill="#000000" p-id="10388"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/qr_code.svg b/src/assets/img/qr_code.svg
new file mode 100644
index 0000000..7d801b0
--- /dev/null
+++ b/src/assets/img/qr_code.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702255514" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12890" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M384 128c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667V170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666667H170.666667C123.733333 85.333333 85.333333 123.733333 85.333333 170.666667v213.333333c0 46.933333 38.4 85.333333 85.333334 85.333333h213.333333c46.933333 0 85.333333-38.4 85.333333-85.333333V170.666667c0-46.933333-38.4-85.333333-85.333333-85.333334zM853.333333 128c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H640c-23.466667 0-42.666667-19.2-42.666667-42.666667V170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666667H640c-46.933333 0-85.333333 38.4-85.333333 85.333334v213.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h213.333333c46.933333 0 85.333333-38.4 85.333334-85.333333V170.666667c0-46.933333-38.4-85.333333-85.333334-85.333334zM384 597.333333c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667V640c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666666H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v213.333333c0 46.933333 38.4 85.333333 85.333334 85.333334h213.333333c46.933333 0 85.333333-38.4 85.333333-85.333334V640c0-46.933333-38.4-85.333333-85.333333-85.333333zM748.8 917.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333333 21.333333zM898.133333 917.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333334 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333334 21.333333zM599.466667 917.333333c-12.8 0-21.333333-8.533333-21.333334-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333334-21.333333s21.333333 8.533333 21.333333 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333333 21.333333z" p-id="12891"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/sina.svg b/src/assets/img/sina.svg
new file mode 100644
index 0000000..b69b0bb
--- /dev/null
+++ b/src/assets/img/sina.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704331644" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35930" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M759.466667 499.2c-38.4-8.533333-21.333333-29.866667-21.333334-29.866667s38.4-64-8.533333-110.933333c-59.733333-59.733333-200.533333 8.533333-200.533333 8.533333-55.466667 17.066667-38.4-8.533333-29.866667-51.2 0-46.933333-17.066667-132.266667-157.866667-81.066666-140.8 51.2-264.533333 221.866667-264.533333 221.866666-85.333333 115.2-72.533333 204.8-72.533333 204.8 21.333333 196.266667 226.133333 247.466667 388.266666 260.266667 174.933333 12.8 396.8-59.733333 465.066667-204.8 68.266667-149.333333-59.733333-209.066667-98.133333-217.6z m-358.4 366.933333c-166.4 8.533333-302.933333-76.8-302.933334-187.733333 0-110.933333 136.533333-204.8 302.933334-209.066667 166.4-8.533333 302.933333 59.733333 302.933333 174.933334 0 110.933333-136.533333 217.6-302.933333 221.866666z m-34.133334-324.266666c-170.666667 21.333333-149.333333 179.2-149.333333 179.2s0 46.933333 46.933333 76.8c98.133333 55.466667 200.533333 21.333333 251.733334-46.933334 51.2-68.266667 21.333333-230.4-149.333334-209.066666z m-42.666666 221.866666c-29.866667 4.266667-55.466667-12.8-55.466667-42.666666 0-25.6 21.333333-55.466667 55.466667-55.466667 34.133333-4.266667 59.733333 17.066667 59.733333 42.666667 0 29.866667-25.6 51.2-59.733333 55.466666z m102.4-85.333333c-8.533333 8.533333-25.6 8.533333-29.866667-4.266667-4.266667-8.533333-4.266667-25.6 8.533333-34.133333 12.8-8.533333 25.6-8.533333 29.866667 4.266667 4.266667 12.8 0 25.6-8.533333 34.133333z m413.866666-247.466667c12.8 0 25.6-8.533333 25.6-21.333333v-4.266667c21.333333-187.733333-153.6-153.6-153.6-153.6-17.066667 0-25.6 12.8-25.6 29.866667 0 17.066667 12.8 29.866667 25.6 29.866667 128-29.866667 98.133333 93.866667 98.133334 93.866666 0 12.8 12.8 25.6 29.866666 25.6z m-21.333333-324.266666c-59.733333-12.8-119.466667 0-136.533333 0h-4.266667c-17.066667 4.266667-29.866667 21.333333-29.866667 38.4 0 21.333333 17.066667 38.4 38.4 38.4 0 0 21.333333-4.266667 38.4-8.533334 12.8-4.266667 136.533333-4.266667 200.533334 98.133334 34.133333 76.8 12.8 128 12.8 136.533333 0 0-8.533333 21.333333-8.533334 38.4 0 21.333333 17.066667 38.4 38.4 38.4 17.066667 0 34.133333-4.266667 38.4-34.133333 68.266667-217.6-81.066667-320-187.733333-345.6z" fill="#ffffff" p-id="35931"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/sq-share-qqzone-01.svg b/src/assets/img/sq-share-qqzone-01.svg
new file mode 100644
index 0000000..bfa9519
--- /dev/null
+++ b/src/assets/img/sq-share-qqzone-01.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704109094" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34711" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M959.312722 404.165016c0-9.907651 0-7.187703-9.907651-7.187703h-267.524986l-39.658231-70.61836-108.965738-209.4278h-19.84293l-99.06218 209.4278-39.654138 70.61836h-310.008567v4.496408l55.912428 39.654138 156.795069 138.79409-35.58138 317.240271c0 9.907651 2.035356 9.907651 21.846564 9.907651l258.654968-158.621671 258.109546 158.621671c9.93528 0 10.177803 0 20.085454-9.907651l-49.409317-317.240271 148.683321-127.548978 59.527768-48.207955z m-653.959176 303.975153l287.340288-234.193857-267.52908-45.853327h406.245398l-247.716848 224.286206 257.621429 55.759955h-435.961187z" p-id="34712" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/wechat.svg b/src/assets/img/wechat.svg
new file mode 100644
index 0000000..19d2fa3
--- /dev/null
+++ b/src/assets/img/wechat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539703648430" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M692.313043 347.269565c11.130435 0 22.26087 0 35.617391 2.226087C696.765217 204.8 540.93913 95.721739 362.852174 95.721739c-198.121739 0-360.626087 135.791304-360.626087 307.2 0 100.173913 53.426087 180.313043 144.695652 242.643478L111.304348 756.869565l126.886957-62.330435c44.521739 8.904348 82.365217 17.808696 126.886957 17.808696 11.130435 0 22.26087 0 33.391304-2.226087-6.678261-24.486957-11.130435-48.973913-11.130435-75.686957C385.113043 476.382609 520.904348 347.269565 692.313043 347.269565L692.313043 347.269565zM498.643478 249.321739c26.713043 0 44.521739 17.808696 44.521739 44.521739 0 26.713043-17.808696 44.521739-44.521739 44.521739-26.713043 0-53.426087-17.808696-53.426087-44.521739C445.217391 267.130435 471.930435 249.321739 498.643478 249.321739L498.643478 249.321739zM244.869565 340.591304c-26.713043 0-53.426087-17.808696-53.426087-44.521739 0-26.713043 26.713043-44.521739 53.426087-44.521739 26.713043 0 44.521739 17.808696 44.521739 44.521739C291.617391 322.782609 273.808696 340.591304 244.869565 340.591304L244.869565 340.591304zM244.869565 340.591304" p-id="29220" fill="#ffffff"></path><path d="M1021.773913 629.982609c0-144.695652-144.695652-262.678261-307.2-262.678261-171.408696 0-307.2 117.982609-307.2 262.678261 0 144.695652 135.791304 262.678261 307.2 262.678261 35.617391 0 71.234783-8.904348 109.078261-17.808696l97.947826 53.426087-26.713043-91.269565C968.347826 783.582609 1021.773913 710.121739 1021.773913 629.982609L1021.773913 629.982609zM616.626087 583.234783c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617391 26.713043 0 44.521739 17.808696 44.521739 35.617391C661.147826 565.426087 643.33913 583.234783 616.626087 583.234783L616.626087 583.234783zM814.747826 583.234783c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617391 26.713043 0 44.521739 17.808696 44.521739 35.617391C859.269565 565.426087 841.46087 583.234783 814.747826 583.234783L814.747826 583.234783zM814.747826 583.234783" p-id="29221" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/举报.svg b/src/assets/img/举报.svg
new file mode 100644
index 0000000..e228111
--- /dev/null
+++ b/src/assets/img/举报.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702074319" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4164" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 358.555826c-12.288 0-22.26087 9.97287-22.26087 22.26087l0 268.221217c0 12.288 9.97287 22.26087 22.26087 22.26087s22.26087-9.97287 22.26087-22.26087L534.26087 380.816696C534.26087 368.528696 524.288 358.555826 512 358.555826zM512 716.176696c-12.288 0-22.26087 9.97287-22.26087 22.26087l0 44.699826c0 12.288 9.97287 22.26087 22.26087 22.26087s22.26087-9.97287 22.26087-22.26087l0-44.699826C534.26087 726.149565 524.288 716.176696 512 716.176696zM998.912 867.394783 575.688348 131.33913C559.972174 104.025043 536.754087 88.33113 512 88.33113S464.027826 104.025043 448.311652 131.33913L25.088 867.394783c-8.859826 15.426783-13.356522 30.675478-13.356522 45.345391 0 32.456348 23.908174 65.224348 77.312 65.224348l845.913043 0c53.381565 0 77.289739-32.768 77.312-65.224348C1012.268522 898.070261 1007.771826 882.821565 998.912 867.394783zM934.956522 933.420522 89.043478 933.420522c-9.861565 0-32.790261-2.025739-32.790261-20.702609 0-6.678261 2.56-14.669913 7.41287-23.129043L486.912 153.533217c15.137391-26.290087 35.06087-26.290087 50.198261 0l423.223652 736.033391c4.85287 8.45913 7.41287 16.450783 7.41287 23.129043C967.746783 931.394783 944.818087 933.420522 934.956522 933.420522z" p-id="4165"></path></svg>
\ No newline at end of file
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
new file mode 100644
index 0000000..c4655f9
--- /dev/null
+++ b/src/components/Comment.vue
@@ -0,0 +1,209 @@
+<template>
+    <transition name="comment">
+        <div class="comment f14" v-if="isCommenting">
+            <div class="title">
+                <p>2.7w条评论</p>
+                <img src="../assets/img/close.svg" @click.stop="$emit('showComment')">
+            </div>
+            <div class="items">
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+                <div class="item pl5p pr15p mb5p  oh">
+                    <div class="content pull-left ">
+                        <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">@ttentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                            <div class="time mt10p">10-02</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                        <span class="f14 block">3453</span>
+                    </div>
+                </div>
+            </div>
+            <div class="input-comment">
+                <input type="text" placeholder="留下你的精彩评论哦">
+                <span>@</span>
+            </div>
+        </div>
+    </transition>
+
+</template>
+
+<script>
+    export default {
+        name: "Comment",
+        props: ['isCommenting'],
+        methods: {
+            // showComment() {
+            //     this.isCommenting = !this.isCommenting;
+            //     console.log(666)
+            // }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .comment {
+        position: absolute;
+        bottom: 0;
+        background: #fff;
+        z-index: 2;
+        border-radius: 10px 10px 0 0;
+        .title {
+            position: relative;
+            p {
+                text-align: center;
+            }
+            img {
+                width: 15px;
+                height: 15px;
+                position: absolute;
+                right: 20px;
+                top: 0;
+            }
+        }
+        .input-comment {
+            height: 30px;
+            border-top: 1px solid #e2e1e1;
+            input {
+                height: 100%;
+                width: 90%;
+            }
+            span {
+                color: #999;
+                font-size: 22px;
+            }
+        }
+        .items {
+            overflow-y: scroll;
+            max-height: 300px;
+            .item {
+                .head-image {
+                    width: 40px;
+                    border-radius: 50%;
+                    float: left;
+                }
+                .content {
+                    float: left;
+                    width: 85%;
+                    .head-image {
+                        width: 15%;
+                    }
+                    .comment-container {
+                        width: 80%;
+                        .time {
+                            color: gray;
+                        }
+                    }
+
+                }
+                .love {
+                    text-align: center;
+                    .love-image {
+                        width: 30px;
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+
+    }
+
+    .comment-enter-active {
+        transition: all .3s ease;
+    }
+
+    .comment-leave-active {
+        transition: all .3s ease;
+    }
+
+    .comment-enter, .comment-leave-to {
+        transform: translateY(300px);
+    }
+
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..9faee8a
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="footer f16 ">
+        <div class="button" @click="tab(1)"><span v-bind:class="{active:currentTab==1}">首页</span></div>
+        <div class="button" @click="tab(2)"><span v-bind:class="{active:currentTab==2}">关注</span></div>
+        <div class="button" @click="tab(3)"><img src="../assets/img/add.svg" alt=""></div>
+        <div class="button" @click="tab(4)"><span v-bind:class="{active:currentTab==4}">消息</span></div>
+        <div class="button" @click="tab(5)"><span v-bind:class="{active:currentTab==5}">我</span></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Footer",
+        data() {
+            return {
+                currentTab: 1
+            }
+        },
+        methods: {
+            tab(index) {
+                this.currentTab = index;
+                console.log(index);
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+
+    .footer {
+        border-top: 1px solid #7b7878;
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        width: 100%;
+        background: #020202b3;
+        color: white;
+        .button {
+            width: 20%;
+            /*height: 35px;*/
+            float: left;
+            text-align: center;
+            margin-top: 8px;
+            span {
+                border-bottom: 0px solid white;
+                padding-bottom: 5px;
+            }
+            .active {
+                border-bottom: 2px solid white;
+            }
+            img {
+                height: 15px;
+                background: white;
+                padding: 5px 15px;
+                border-radius: 5px;
+            }
+        }
+    }
+</style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index d0127b6..aae7043 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,27 +1,36 @@
 <template>
     <div id="home">
-        <div class="bg-video">
+        <div class="bg-video" v-for="(item,index) in data">
+            <!--<video :src="data[0].videoUrl">-->
             <video src="../assets/video/吴三二的光年之外.mp4">
                 您的浏览器不支持 video 标签。
             </video>
             <div class="float" @click="togglePlayVideo($event)">
                 <transition name="pause">
                     <img src="../assets/img/play.svg" class="pause" v-show="!isPlaying"
-                         @click.stop="playVideo2($event)">
+                         @click.stop="togglePlayVideo($event)">
                 </transition>
                 <div class="toolbar mb10p">
                     <img src="../assets/img/head-image.jpeg" alt="" class="head-image mb15p">
-                    <div class="love mb15p">
-                        <img src="../assets/img/love.svg" alt="" class="love-image">
-                        <span class="f14">3453</span>
+                    <div class="love mb15p" @click.stop="loved($event,index)">
+                        <div>
+                            <transition name="love">
+                                <img src="../assets/img/love.svg" class="love-image" v-if="!item.isLoved">
+                                <img src="../assets/img/loved.svg" class="love-image" v-if="item.isLoved">
+
+                            </transition>
+                            <transition name="loved">
+                            </transition>
+                        </div>
+                        <span class="f14">{{item.loves}}</span>
                     </div>
-                    <div class="message mb15p" @click.stop="showComment()">
+                    <div class="message mb15p" @click.stop="isCommenting=!isCommenting">
                         <img src="../assets/img/message.svg" alt="" class="message-image">
-                        <span class="f14">6666</span>
+                        <span class="f14">{{item.comments}}</span>
                     </div>
-                    <div class="share mb35p">
+                    <div class="share mb35p" @click.stop="isSharing=!isSharing">
                         <img src="../assets/img/share.svg" alt="" class="share-image">
-                        <span class="f14">555</span>
+                        <span class="f14">{{item.shared}}</span>
                     </div>
                     <img src="../assets/img/head-image.jpeg" alt="" class="music">
                 </div>
@@ -37,149 +46,83 @@
                 </div>
             </div>
         </div>
-        <transition name="comment">
-            <div class="comment f14" v-if="isComment">
-                <div class="title">
-                    <p>2.7w条评论</p>
-                    <img src="../assets/img/close.svg" @click.stop="showComment()">
-                </div>
-                <div class="items">
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                    <div class="item pl5p pr15p mb5p  oh">
-                        <div class="content pull-left ">
-                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
-                            <div class="pull-right comment-container">
-                                <div class="name">@ttentau</div>
-                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-                                <div class="time mt10p">10-02</div>
-                            </div>
-                        </div>
-                        <div class="love pull-right">
-                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
-                            <span class="f14 block">3453</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="input-comment">
-                    <input type="text" placeholder="留下你的精彩评论哦">
-                    <span>@</span>
-                </div>
-            </div>
-        </transition>
-
+        <Comment v-bind:is-commenting="isCommenting" v-on:showComment='isCommenting=!isCommenting'/>
+        <Share v-bind:is-sharing="isSharing"/>
+        <Footer/>
     </div>
 </template>
 
 <script>
+    import Comment from './Comment';
+    import Share from './Share';
+    import Footer from './Footer';
+
     export default {
         name: "Home",
+        components: {
+            Comment,
+            Share,
+            Footer
+        },
         data() {
             return {
                 isPlaying: true,
-                isComment: false,
+                isCommenting: false,
+                isSharing: false,
+                data: [
+                    {
+                        videoUrl: '../assets/video/吴三二的光年之外.mp4',
+                        isLoved: false,
+                        loves: 1234,
+                        comments: 666,
+                        shared: 999
+                    }
+                ]
             }
         },
         methods: {
             togglePlayVideo(e) {
-                console.log(e.target);
-                let float = e.target;
-                let video = float.previousSibling;
+                if (this.isSharing) {
+                    this.isSharing = false;
+                    return;
+                }
+                if (this.isCommenting) {
+                    this.isCommenting = false;
+                    return;
+                }
+                // console.log(e);
+                let el = e.target;
+                // console.log(el)
+                // console.log(el.nodeName);
+                let video = '';
+                if (el.nodeName == 'IMG') {
+                    video = el.parentNode.previousSibling;
+                } else {
+                    video = el.previousSibling;
+                }
                 if (video.paused) {
                     video.play();
                 } else {
                     video.pause();
                 }
                 this.isPlaying = !video.paused;
+
+                // this.isPlaying = !this.isPlaying;
             },
             showComment() {
-                this.isComment = !this.isComment;
+                this.isCommenting = !this.isCommenting;
+            },
+            loved(e, index) {
+                let img = e.target.parentNode.childNodes[0];
+                console.log(img);
+                console.log(index);
+                this.data[index].isLoved = !this.data[index].isLoved;
+
             }
+
         },
         created() {
-            console.log(55)
+            // console.log(55)
         },
         mounted() {
         }
@@ -232,6 +175,14 @@
                         height: 100%;
                         border-radius: 50%;
                     }
+                    .love {
+                        img {
+
+                        }
+                    }
+                    .loved {
+                        background: red;
+                    }
                     .music {
                         animation: animations 4s linear forwards infinite;
                     }
@@ -266,71 +217,6 @@
                 }
             }
         }
-        .comment {
-            position: absolute;
-            bottom: 0;
-            background: #fff;
-            z-index: 2;
-            border-radius: 10px;
-            .title {
-                position: relative;
-                p {
-                    text-align: center;
-                }
-                img {
-                    width: 15px;
-                    height: 15px;
-                    position: absolute;
-                    right: 20px;
-                    top: 0;
-                }
-            }
-            .input-comment {
-                height: 30px;
-                border-top: 1px solid #e2e1e1;
-                input {
-                    height: 100%;
-                    width: 90%;
-                }
-                span {
-                    color: #999;
-                    font-size: 22px;
-                }
-            }
-            .items {
-                overflow-y: scroll;
-                max-height: 300px;
-                .item {
-                    .head-image {
-                        width: 40px;
-                        border-radius: 50%;
-                        float: left;
-                    }
-                    .content {
-                        float: left;
-                        width: 85%;
-                        .head-image {
-                            width: 15%;
-                        }
-                        .comment-container {
-                            width: 80%;
-                            .time {
-                                color: gray;
-                            }
-                        }
-
-                    }
-                    .love {
-                        text-align: center;
-                        .love-image {
-                            width: 30px;
-                            border-radius: 50%;
-                        }
-                    }
-                }
-            }
-
-        }
     }
 
     .pause-enter-active {
@@ -346,16 +232,29 @@
         opacity: 0;
     }
 
-    .comment-enter-active {
+    .love-enter-active {
         transition: all .3s ease;
     }
 
-    .comment-leave-active {
-        transition: all .3s ease ;
+    .love-leave-active {
+        transition: all .3s ease;
     }
 
-    .comment-enter, .comment-leave-to {
-        transform: translateY(300px);
+    .love-leave-to {
+        transform: scale(2);
+        opacity: 0;
     }
+    .loved-enter-active {
+        transition: all .3s ease;
+    }
+
+    .loved-leave-active {
+        transition: all .3s ease;
+    }
+
+    .loved-leave-to {
+        opacity: 0;
+    }
+
 
 </style>
diff --git a/src/components/Share.vue b/src/components/Share.vue
new file mode 100644
index 0000000..fa5c7eb
--- /dev/null
+++ b/src/components/Share.vue
@@ -0,0 +1,206 @@
+<template>
+    <transition name="comment">
+        <div class="share" v-if="isSharing">
+            <div class="friends oh p10p ">
+                <div class="title tac pb10p">私信给</div>
+                <div class="w200">
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/head-image.jpeg" alt="">
+                        <span>ttentau</span>
+                    </div>
+                    <div class="friend pr10p">
+                        <img src="../assets/img/ic_more.svg" alt="">
+                        <span>更多</span>
+                    </div>
+                </div>
+            </div>
+            <div class="shares oh pl20p pr20p pt10p pb10p">
+                <div class="title tac pb10p">分享到</div>
+                <div class="w200">
+                    <div class="share-to pr10p">
+                        <img src="../assets/img/friend_circle.svg" alt="">
+                        <span>朋友圈</span>
+                    </div>
+                    <div class="share-to pr10p">
+                        <img src="../assets/img/wechat.svg" alt="">
+                        <span>微信</span>
+                    </div>
+                    <div class="share-to pr10p">
+                        <img src="../assets/img/sq-share-qqzone-01.svg">
+                        <span>QQ空间</span>
+                    </div>
+                    <div class="share-to pr10p">
+                        <img src="../assets/img/QQ.svg">
+                        <span>QQ</span>
+                    </div>
+                    <div class="share-to pr10p">
+                        <img src="../assets/img/sina.svg">
+                        <span>微博</span>
+                    </div>
+                    <div class="share-to pr10p">
+                        <img src="../assets/img/More.svg">
+                        <span>更多</span>
+                    </div>
+                </div>
+
+            </div>
+            <div class="toolbar oh pl20p pr20p pt10p pb10p f11">
+                <div class="w200">
+                    <div class="tool pr10p ">
+                        <img src="../assets/img/举报.svg" alt="">
+                        <span>举报</span>
+                    </div>
+                    <div class="tool pr10p ">
+                        <img src="../assets/img/download.svg" alt="">
+                        <span>保存本地</span>
+                    </div>
+                    <div class="tool pr10p ">
+                        <img src="../assets/img/collect.svg" alt="">
+                        <span>收藏</span>
+                    </div>
+                    <div class="tool pr10p ">
+                        <img src="../assets/img/qiangjing.svg" alt="">
+                        <span>抢镜</span>
+                    </div>
+                    <div class="tool pr10p">
+                        <img src="../assets/img/qr_code.svg" alt="">
+                        <span>二维码</span>
+                    </div>
+                    <div class="tool pr10p">
+                        <img src="../assets/img/dongtaibizhi.svg" alt="">
+                        <span>动态壁纸</span>
+                    </div>
+                    <div class="tool pr10p">
+                        <img src="../assets/img/hepai.svg" alt="">
+                        <span>合拍</span>
+                    </div>
+                    <div class="tool pr10p">
+                        <img src="../assets/img/dislike.svg" alt="">
+                        <span>不感兴趣</span>
+                    </div>
+                    <div class="tool pr10p">
+                        <img src="../assets/img/href.svg" alt="">
+                        <span>复制链接</span>
+                    </div>
+                </div>
+            </div>
+            <div class="dismiss">
+                取消
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+    export default {
+        name: "Share",
+        props:['isSharing']
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .share {
+        position: absolute;
+        bottom: 0;
+        z-index: 2;
+        background: #eaeaea;
+        border-radius: 10px 10px 0 0;
+        .friends {
+            overflow-x: scroll;
+            .friend {
+                float: left;
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                }
+                span {
+                    display: block;
+                    text-align: center;
+                }
+            }
+        }
+        .shares {
+            background: white;
+            overflow-x: scroll;
+            .share-to {
+                float: left;
+                width: 50px;
+                img {
+                    width: 27px;
+                    height: 27px;
+                    padding: 6px;
+                    border-radius: 50%;
+                    background: #1ace04;
+                }
+                span {
+                    display: block;
+                    text-align: center;
+                }
+            }
+        }
+        .toolbar {
+            border-top: 1px solid #eaeaea;
+            background: white;
+            overflow-x: scroll;
+            .tool {
+                float: left;
+                img {
+                    width: 22px;
+                    height: 22px;
+                    padding: 10px;
+                    border-radius: 50%;
+                    background: #eaeaea;
+                }
+                span {
+                    display: block;
+                    text-align: center;
+                }
+            }
+        }
+        .dismiss {
+            background: white;
+            border-top: 1px solid #eaeaea;
+            text-align: center;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+
+    .comment-enter-active {
+        transition: all .3s ease;
+    }
+
+    .comment-leave-active {
+        transition: all .3s ease;
+    }
+
+    .comment-enter, .comment-leave-to {
+        transform: translateY(300px);
+    }
+</style>