详情页

src/main/pc-space/package.json

@@ -13,7 +13,9 @@
         "element-ui": "^2.15.6",
         "qs": "^6.10.1",
         "vue": "^2.6.11",
+        "vue-clipboard2": "^0.3.3",
         "vue-router": "^3.2.0",
+        "vue-social-share": "^0.0.3",
         "vuex": "^3.4.0"
     },
     "devDependencies": {

src/main/pc-space/public/client.css

@@ -0,0 +1,222 @@
+@font-face {
+    font-family: 'socialshare';
+    src: url(./fonts/iconfont.eot);
+    src: url(./fonts/iconfont.eot?#iefix) format('embedded-opentype'), url(./fonts/iconfont.woff) format('woff'),
+        url(./fonts/iconfont.ttf) format('truetype'), url(./fonts/iconfont.svg#iconfont) format('svg');
+}
+.social-share {
+    font-family: 'socialshare' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+.social-share * {
+    font-family: 'socialshare' !important;
+}
+.social-share .icon-tencent:before {
+    content: '\F07A';
+}
+.social-share .icon-qq:before {
+    content: '\F11A';
+}
+.social-share .icon-weibo:before {
+    content: '\F12A';
+}
+.social-share .icon-wechat:before {
+    content: '\F09A';
+}
+.social-share .icon-douban:before {
+    content: '\F10A';
+}
+.social-share .icon-heart:before {
+    content: '\F20A';
+}
+.social-share .icon-like:before {
+    content: '\F00A';
+}
+.social-share .icon-qzone:before {
+    content: '\F08A';
+}
+.social-share .icon-linkedin:before {
+    content: '\F01A';
+}
+.social-share .icon-diandian:before {
+    content: '\F05A';
+}
+.social-share .icon-facebook:before {
+    content: '\F03A';
+}
+.social-share .icon-google:before {
+    content: '\F04A';
+}
+.social-share .icon-twitter:before {
+    content: '\F06A';
+}
+.social-share a {
+    position: relative;
+    text-decoration: none;
+    margin: 4px;
+    display: inline-block;
+    outline: none;
+}
+.social-share .social-share-icon {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    font-size: 20px;
+    border-radius: 50%;
+    line-height: 32px;
+    border: 1px solid #666;
+    color: #666;
+    text-align: center;
+    vertical-align: middle;
+    transition: background 0.6s ease-out 0s;
+}
+.social-share .social-share-icon:hover {
+    background: #666;
+    color: #fff;
+}
+.social-share .icon-weibo {
+    color: #ff763b;
+    border-color: #ff763b;
+}
+.social-share .icon-weibo:hover {
+    background: #ff763b;
+}
+.social-share .icon-tencent {
+    color: #56b6e7;
+    border-color: #56b6e7;
+}
+.social-share .icon-tencent:hover {
+    background: #56b6e7;
+}
+.social-share .icon-qq {
+    color: #56b6e7;
+    border-color: #56b6e7;
+}
+.social-share .icon-qq:hover {
+    background: #56b6e7;
+}
+.social-share .icon-qzone {
+    color: #fdbe3d;
+    border-color: #fdbe3d;
+}
+.social-share .icon-qzone:hover {
+    background: #fdbe3d;
+}
+.social-share .icon-douban {
+    color: #33b045;
+    border-color: #33b045;
+}
+.social-share .icon-douban:hover {
+    background: #33b045;
+}
+.social-share .icon-linkedin {
+    color: #0077b5;
+    border-color: #0077b5;
+}
+.social-share .icon-linkedin:hover {
+    background: #0077b5;
+}
+.social-share .icon-facebook {
+    color: #44619d;
+    border-color: #44619d;
+}
+.social-share .icon-facebook:hover {
+    background: #44619d;
+}
+.social-share .icon-google {
+    color: #db4437;
+    border-color: #db4437;
+}
+.social-share .icon-google:hover {
+    background: #db4437;
+}
+.social-share .icon-twitter {
+    color: #55acee;
+    border-color: #55acee;
+}
+.social-share .icon-twitter:hover {
+    background: #55acee;
+}
+.social-share .icon-diandian {
+    color: #307dca;
+    border-color: #307dca;
+}
+.social-share .icon-diandian:hover {
+    background: #307dca;
+}
+.social-share .icon-wechat {
+    position: relative;
+    color: #7bc549;
+    border-color: #7bc549;
+}
+.social-share .icon-wechat:hover {
+    background: #7bc549;
+}
+.social-share .icon-wechat .wechat-qrcode {
+    display: none;
+    border: 1px solid #eee;
+    position: absolute;
+    z-index: 9;
+    top: -205px;
+    left: -84px;
+    width: 200px;
+    height: 192px;
+    color: #666;
+    font-size: 12px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 2px 10px #aaa;
+    transition: all 200ms;
+    -webkit-tansition: all 350ms;
+    -moz-transition: all 350ms;
+}
+.social-share .icon-wechat .wechat-qrcode.bottom {
+    top: 40px;
+    left: -84px;
+}
+.social-share .icon-wechat .wechat-qrcode.bottom:after {
+    display: none;
+}
+.social-share .icon-wechat .wechat-qrcode h4 {
+    font-weight: normal;
+    height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+    background-color: #f3f3f3;
+    margin: 0;
+    padding: 0;
+    color: #777;
+}
+.social-share .icon-wechat .wechat-qrcode .qrcode {
+    width: 105px;
+    margin: 10px auto;
+}
+.social-share .icon-wechat .wechat-qrcode .qrcode table {
+    margin: 0 !important;
+}
+.social-share .icon-wechat .wechat-qrcode .help p {
+    font-weight: normal;
+    line-height: 16px;
+    padding: 0;
+    margin: 0;
+}
+.social-share .icon-wechat .wechat-qrcode:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    margin-left: -6px;
+    bottom: -13px;
+    width: 0;
+    height: 0;
+    border-width: 8px 6px 6px 6px;
+    border-style: solid;
+    border-color: #fff transparent transparent transparent;
+}
+.social-share .icon-wechat:hover .wechat-qrcode {
+    display: block;
+}

src/main/pc-space/public/fonts/iconfont.svg

@@ -0,0 +1,88 @@
+<?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 xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Sat Nov 28 22:48:50 2015
+ By Ads
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face 
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="2 0 6 3 0 0 0 0 0 0"
+    ascent="896"
+    descent="-128"
+    x-height="792"
+    bbox="-0.097561 -77 1024.92 839"
+    underline-thickness="50"
+    underline-position="-100"
+    unicode-range="U+0078-F20A"
+  />
+<missing-glyph horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
+ />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    <glyph glyph-name="uniF00A" unicode="&#xf00a;" 
+d="M911 512l-334 1q19 79 23 116q4 45 -3 76q-11 47 -34 90q-6 12 -17 18.5t-24 6.5h-65q-13 0 -23.5 -6.5t-17 -17t-6.5 -23.5v-35v-32v-26q0 -10 -1 -11q-12 -26 -26.5 -52t-29.5 -51.5t-32 -49.5q-6 -9 -11.5 -17t-11.5 -16t-12.5 -16t-13.5 -15q-13 -14 -13 -32v-411
+q0 -19 13 -33q28 -28 73 -28q323 1 440 1q13 0 24 6t17 17l119 203q6 11 9 22.5t3 23.5l1 244q0 13 -6.5 24t-17 17t-23.5 6zM155 445h-42q-13 0 -24 -6t-17 -17t-6 -24v-403q0 -19 13.5 -33t33.5 -14h42q13 0 23.5 6.5t17 17t6.5 23.5v403q0 20 -14 33.5t-33 13.5z" />
+    <glyph glyph-name="uniF01A" unicode="&#xf01a;" 
+d="M260 740q0 -41 -29.5 -69.5t-76.5 -28.5q-45 0 -74 28.5t-29 69.5q0 43 29 71t76 28t74.5 -28t29.5 -71zM57 -69v633h197v-633h-197zM371 361q0 89 -4 203h170l10 -88h4q61 103 194 103q103 0 165.5 -69t62.5 -204v-375h-197v351q0 137 -100 137q-72 0 -101 -74
+q-6 -12 -6 -49v-365h-198v430z" />
+    <glyph glyph-name="uniF03A" unicode="&#xf03a;" 
+d="M751 815v-142h-84q-46 0 -62 -19t-16 -58v-101h157l-21 -158h-136v-407h-164v407h-136v158h136v117q0 100 56 154.5t148 54.5q79 0 122 -6z" />
+    <glyph glyph-name="uniF04A" unicode="&#xf04a;" 
+d="M629 830h-245q-37 0 -69 -4t-71.5 -19t-71.5 -41q-37 -31 -56.5 -72.5t-19.5 -82.5q0 -46 22.5 -87t68.5 -68t106 -27h7h8q2 0 7.5 0.5t7.5 1t8 0.5q-1 -1 -2 -4t-1.5 -4t-1.5 -4l-2 -5q0 -1 -1 -3.5t-1.5 -4.5t-1 -4.5t-0.5 -5t-0.5 -5t-0.5 -5.5q0 -17 6.5 -33
+t11.5 -23t18 -23q-18 -1 -26.5 -1.5t-29 -2.5t-33.5 -4.5t-34 -6.5t-36.5 -9t-34 -12.5t-33.5 -16.5q-48 -28 -69.5 -66.5t-21.5 -75.5q0 -69 66.5 -117.5t188.5 -48.5q74 0 134.5 19t98.5 50.5t58.5 70t20.5 80.5q0 19 -3.5 36t-11.5 32t-15 26.5t-21 24.5t-23 21t-26 22
+l-43 32q-9 8 -14 12.5t-10.5 15.5t-5.5 22.5t6 23t11 17t16 16.5q24 18 37.5 30.5t30 33t24 45.5t7.5 56t-8.5 57.5t-24 46.5t-25.5 30t-26 22h74zM524 120q0 -36 -19.5 -64t-59.5 -44.5t-95 -16.5q-94 0 -151.5 39.5t-57.5 102.5q0 83 102 119q57 19 125 19h6h4
+q3 0 4.5 -0.5t3.5 -0.5h5q2 0 4 -1q75 -51 102 -81t27 -72zM429 494q-33 -33 -80 -33q-36 0 -66 21t-47 53.5t-26 67t-9 65.5q0 54 26 86q14 17 36.5 27.5t46.5 10.5q46 0 81.5 -37t51.5 -84.5t16 -92.5v-10q0 -4 -1 -10.5t-2 -12.5t-3.5 -13t-5.5 -13.5t-7.5 -13
+t-10.5 -11.5zM865 653v118h-59v-118h-119v-58h119v-118h59v118h118v58h-118z" />
+    <glyph glyph-name="uniF05A" unicode="&#xf05a;" 
+d="M540 185h370v370h-369l-1 85h285v114h-285v85h-142v-284h-256v-370h199v-258zM284 279v175h484v-175h-484zM853 100q-17 0 -33 -6.5t-27.5 -18t-18 -27.5t-6.5 -33.5t6.5 -33.5t18 -27.5t27.5 -18.5t33 -7q35 0 60 25.5t25 61t-25 60.5t-60 25zM597.5 100
+q-35.5 0 -60.5 -25t-25 -60.5t25 -61t60.5 -25.5t60 25.5t24.5 61t-24.5 60.5t-60 25zM171 100q-14 0 -27 -4t-23.5 -12t-18.5 -18.5t-12 -24t-4 -27.5q0 -35 24.5 -60.5t60 -25.5t60.5 25.5t25 60.5q0 18 -7 34t-18 27.5t-27 18t-33 6.5z" />
+    <glyph glyph-name="uniF06A" unicode="&#xf06a;" horiz-adv-x="1025" 
+d="M1024 702q-58 -26 -121 -34q33 20 57 50t36 67q-63 -37 -134 -51q-62 66 -153 66q-57 0 -105.5 -28t-76.5 -76.5t-28 -105.5q0 -8 0.5 -16t2 -16t2.5 -16q-129 7 -241.5 65t-191.5 155q-13 -24 -20.5 -51t-7.5 -55q0 -36 11.5 -69t32.5 -60t49 -46q-50 2 -95 26v-2
+q0 -76 48 -134t121 -72q-27 -8 -56 -8q-5 0 -10 1h-10q-5 1 -9.5 1.5t-9.5 1.5q20 -63 74 -103.5t122 -42.5q-36 -28 -77.5 -48t-88 -31t-95.5 -11q-25 0 -50 3q147 -94 322 -94q112 0 210 35.5t168 95t120.5 136.5t75 161.5t24.5 169.5q0 14 -1 27q8 5 15.5 11t14.5 12
+l14 14q7 6 13.5 12.5t13 14t12 14.5t11.5 15t11 16z" />
+    <glyph glyph-name="uniF07A" unicode="&#xf07a;" 
+d="M435 826q-94 -21 -163.5 -85.5t-98.5 -155.5t-8 -186q7 -34 21 -66q4 -9 12.5 -15t18 -7t18.5 3q15 6 20.5 20.5t-0.5 28.5q-11 25 -17 53q-17 74 6 146t78 123t129.5 67.5t145.5 -6.5t121.5 -78.5t67 -130t-6 -146.5t-77.5 -123t-130 -67q-44 -10 -89 -5q-15 1 -27 -9
+t-13.5 -25t8.5 -27.5t25 -13.5q56 -6 112 7q94 20 164 85t98.5 155.5t8 185t-84.5 164.5t-154.5 99t-184.5 9zM542 339q57 13 88 62t18 106q-8 37 -33 64.5t-60.5 39t-72.5 3.5q-57 -13 -88 -62t-19 -106q5 -21 16 -41q-70 -81 -105 -197t-16 -239q2 -16 14.5 -25t28.5 -7
+q1 1 2 1q14 3 22.5 15.5t6.5 26.5q-17 105 12.5 204.5t88.5 168.5q46 -25 97 -14z" />
+    <glyph glyph-name="uniF08A" unicode="&#xf08a;" 
+d="M767 277q-9 -8 -11 -13.5t0 -16.5l4 -24q-183 2 -297 18q-6 2 0 5l289 201q11 7 -1 9q-7 1 -19 3t-21 3l-9 1q-90 11 -190 11q-170 0 -303 -30h8q225 0 374 -23q7 -2 0 -6l-289 -206l-5 -4q-2 -4 5 -5q45 -6 94 -9q59 -4 116 -4q176 0 312 32l5 1q-19 -15 -63 -30
+l42 -226q2 -12 -1.5 -19t-11 -7.5t-18.5 4.5l-241 140q-24 15 -49 -1l-240 -139q-16 -9 -25 -2.5t-5 24.5l53 284q3 9 1.5 14t-8.5 12l-210 193q-9 8 -10.5 16t4.5 13t18 6l268 30q15 2 21 5.5t12 14.5l126 262q9 17 20.5 17t19.5 -17l118 -262q5 -13 11 -17t21 -6l277 -27
+q18 -2 21.5 -12t-9.5 -23z" />
+    <glyph glyph-name="uniF09A" unicode="&#xf09a;" 
+d="M704 547q-87 0 -163 -38t-120 -103q-22 -32 -33.5 -67t-11.5 -73q0 -41 14 -78h-18q-64 0 -124 18l-124 -56l30 102q-64 43 -101 105t-37 134q0 124 104.5 213t251.5 89q128 0 227 -70t122 -176h-17zM218 557q8 -7 17 -10.5t19 -3.5q22 0 36.5 14.5t14.5 35.5q0 11 -4 20
+t-11 16q-2 2 -4 3l-4 4l-4 2l-4 2l-4 2h-6l-4 2h-6q-21 0 -36 -15q-7 -7 -10.5 -16t-3.5 -20q0 -7 1.5 -13.5t5 -12t7.5 -10.5zM1008 266q0 -126 -116 -204l23 -87l-105 49q-50 -16 -106 -16q-124 0 -213 75.5t-89 182.5q0 70 40.5 129t110.5 93q23 11 47.5 18.5t50.5 11.5
+t53 4q126 0 215 -75t89 -181zM526.5 629.5q-14.5 14.5 -35 14.5t-34.5 -15q-7 -7 -11 -16t-4 -19q0 -20 14.5 -34.5t35 -14.5t35.5 14q7 8 10.5 16.5t3.5 18.5q0 21 -14.5 35.5zM603 312q9 0 16.5 3.5t13.5 9.5q13 13 13 29q0 8 -3.5 15.5t-9.5 13.5q-12 13 -30 13
+q-6 0 -11 -1.5t-10 -4.5t-9 -7q-13 -13 -13 -28q0 -12 6 -21.5t16 -15.5q5 -3 10 -4.5t11 -1.5zM775 323q12 -13 30.5 -13t31.5 13q3 3 5 6.5t4 7.5t2.5 8t0.5 8q0 6 -1.5 11t-4 10t-6.5 9q-13 13 -31.5 13t-30.5 -13q-5 -4 -7.5 -9t-4 -10t-1.5 -11q0 -9 3 -16.5t10 -13.5z
+" />
+    <glyph glyph-name="uniF10A" unicode="&#xf10a;" 
+d="M138 773h746v-84h-746v84zM820 273v328h-617v-328h617zM292 517h439v-160h-439v160zM686 83q41 63 76 143l-90 33q-35 -97 -81 -176h-156q-39 103 -88 176l-83 -33q51 -77 83 -143h-230v-83h789v83h-220z" />
+    <glyph glyph-name="uniF11A" unicode="&#xf11a;" 
+d="M911 223q-5 31 -17 61t-25.5 50.5t-26.5 37t-21 24.5l-8 9q5 44 -2.5 73t-17.5 36l-10 8q-2 62 -18.5 112.5t-39.5 81.5t-54 53.5t-57 32.5t-54 15.5t-38.5 6t-17.5 0.5q-6 0 -16.5 -0.5t-39 -6t-54 -15.5t-57 -32.5t-54.5 -53.5t-39.5 -81.5t-17.5 -112.5q-2 -1 -4.5 -3
+t-9.5 -10t-10.5 -20.5t-7 -34t0.5 -49.5l-9 -9q-5 -5 -19.5 -23.5t-26.5 -38t-24.5 -50t-17.5 -61.5q-1 -4 -1 -10t1 -22t3.5 -28t9 -21t15.5 -8t25 17t37 50q23 -62 64 -117q-3 -1 -8 -3.5t-17.5 -10t-21.5 -17t-16 -26t-5 -34.5q0 -2 0.5 -4.5t3 -10t8 -14t17.5 -14.5
+t28 -13.5t42.5 -9t58.5 -2.5q13 1 32.5 4t59.5 17t55 36h30q31 -44 141 -56l6 -1q45 -1 78 5.5t47.5 15.5t23 21.5t9 17.5t0.5 8q2 18 -4.5 34t-16.5 26t-20.5 17.5t-18.5 10.5l-8 3q9 11 17 23.5t14 23.5l12 22q6 11 9.5 19.5t6.5 15t4 9.5l1 4q21 -34 37 -50t25.5 -17
+t15.5 8t8.5 21t3.5 28t1 23v9v0z" />
+    <glyph glyph-name="uniF12A" unicode="&#xf12a;" horiz-adv-x="1026" 
+d="M0 242q0 65 40 140t113 147q96 97 195.5 134.5t140.5 -3.5q36 -36 11 -119q-2 -9 0 -12t5 -4t8 0t8 2l3 1q80 34 141.5 34t87.5 -35q25 -35 0 -101q-1 -8 -3 -11t3 -7.5t7 -5.5t9 -3q33 -10 59.5 -26.5t45 -47t19.5 -66.5q0 -39 -20.5 -79t-62.5 -79t-96 -66.5t-129 -48
+t-155 -17.5t-157.5 19.5t-137 52.5t-98.5 87t-37 114zM104 201q5 -55 51 -97t118.5 -62t156.5 -12q128 13 211 80.5t76 151.5q-5 54 -50 96t-120 62.5t-157 12.5q-127 -13 -211 -80.5t-75 -151.5zM237 151q-24 52 3 106q27 53 86.5 80t120.5 10q63 -16 90.5 -67.5
+t1.5 -109.5t-90.5 -85t-127.5 -7q-62 19 -84 73zM283 166q5 -21 24.5 -30t43 -1t35.5 28q11 18 6 38.5t-25 28.5q-20 9 -42.5 0.5t-33.5 -25.5q-13 -20 -8 -39zM403 247q-10 -19 8 -27q8 -2 16 1t12 10q6 8 2.5 16t-10.5 10q-7 3 -16 0t-12 -10zM666 746q-3 16 5 30.5
+t25 16.5q70 14 139.5 -6.5t118.5 -76.5q50 -56 65 -128.5t-8 -137.5q-5 -16 -19.5 -23t-30 -2t-22.5 19.5t-3 29.5q16 47 6 98t-46 90q-36 40 -85 54.5t-98 5.5q-17 -3 -30 6t-17 24zM699 616q-3 15 5.5 26t20.5 14q35 8 68.5 -2.5t57.5 -37t31 -62.5t-3 -68
+q-5 -12 -17.5 -19t-25.5 -2t-20 17.5t-2 25.5q11 36 -13.5 62.5t-61.5 20.5q-13 -3 -25 4t-15 21z" />
+    <glyph glyph-name="uniF20A" unicode="&#xf20a;" 
+d="M945 677q-23 37 -54.5 64t-68.5 42.5t-79 18.5q-148 7 -228 -101l-1 2q-1 1 -2 1q0 -3 -3 -3q-80 108 -228 101q-60 -3 -113 -36t-89 -89q-26 -41 -36 -89.5t-5 -99t25 -102.5t54 -98q53 -69 89 -110q122 -134 282 -240l21 -15h6l21 15q78 52 150 113t132 127
+q11 13 24 28.5t22.5 28t22 28t20.5 25.5q69 94 79.5 200.5t-41.5 188.5z" />
+  </font>
+</defs></svg>

src/main/pc-space/public/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
         <title><%= htmlWebpackPlugin.options.title %></title>
+        <link rel="stylesheet" href="./client.css" />
         <link rel="stylesheet" href="https://at.alicdn.com/t/font_2852142_86r1qgys8y5.css" />
     </head>
     <body>

src/main/pc-space/src/components/Share.vue

@@ -0,0 +1,42 @@
+<template>
+    <social-share :config="shareConfig" v-if="info.id" />
+</template>
+<script>
+import SocialShare from 'vue-social-share';
+export default {
+    name: 'share',
+    props: {
+        isBrand: {
+            type: Boolean,
+            default: false
+        },
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        local: {
+            type: String,
+            default: 'zh'
+        }
+    },
+    components: {
+        SocialShare
+    },
+    computed: {
+        shareConfig() {
+            return {
+                url: 'https://www.imttech.cn/index/productDetail?id=' + this.info.id,
+                title: this.info.nickname, // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
+                description: this.info.intro, // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
+                image: this.info.avatar, // 图片, 默认取网页中第一个img标签
+                sites: ['qq', 'weibo', 'wechat', 'twitter'], // 启用的站点
+                disabled: [], // 禁用的站点
+                wechatQrcodeTitle: '微信扫一扫',
+                wechatQrcodeHelper: '<p>微信里点“+”，扫一扫</p>'
+            };
+        }
+    }
+};
+</script>

src/main/pc-space/src/mixins/pageableTable.js

@@ -79,8 +79,10 @@ export default {
 
                     this.empty = res.empty;
                     if (this.$refs.anchor && !this.isFirst) {
+                        let top = this.$refs.anchor.offsetParent ? this.$refs.anchor.offsetParent.offsetTop : 0;
+                        top += this.$refs.anchor.offsetTop;
                         window.scrollTo({
-                            top: this.$refs.anchor.offsetTop,
+                            top: top,
                             behavior: 'smooth'
                         });
                     }

src/main/pc-space/src/styles/app.less

@@ -203,3 +203,11 @@ body {
 .el-loading-mask {
     background-color: rgba(255, 255, 255, 0.2);
 }
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+    background-color: #f2f4f5;
+}
+.el-select-dropdown {
+    border-color: #fff;
+}

src/main/pc-space/src/styles/list.less

@@ -1,23 +1,29 @@
-.container {
+.search {
     background: #1a1a1a;
-    .center-content();
-    .search {
-        background: #1a1a1a;
-        width: 280px;
-        height: 42px;
-        border-radius: 8px;
-        margin: 30px 0 50px;
+    width: 280px;
+    height: 42px;
+    border-radius: 8px;
+    margin: 30px 0 50px;
 
-        /deep/.el-input__inner {
-            border: 1px solid #898989;
-            background-color: transparent;
-            color: #fff;
-            border-radius: 8px;
-            &:focus {
-                border-color: #fff;
-            }
+    /deep/.el-input__inner {
+        border: 1px solid #898989;
+        background-color: transparent;
+        color: #fff;
+        border-radius: 8px;
+        &:focus {
+            border-color: #fff;
         }
     }
+}
+.border {
+    height: 1px;
+    background: #494a4d;
+    border-radius: 1px;
+}
+.container {
+    background: #1a1a1a;
+    .center-content();
+
     .title {
         height: 42px;
         font-size: 32px;
@@ -26,39 +32,8 @@
         padding: 60px 0;
         font-family: ZhenyanGB;
     }
-    // .tabs {
-    //     display: flex;
-    //     align-items: center;
-    //     // padding-bottom: 30px;
-    //     text-align: center;
-    //     .tab {
-    //         width: 140px;
-    //         border: 1px solid #939599;
-    //         height: 42px;
-    //         font-size: 18px;
-    //         font-weight: bold;
-    //         color: #949699;
-    //         line-height: 42px;
-    //         &.active {
-    //             color: #ffffff;
-    //             background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
-    //         }
-    //         &:first-child {
-    //             border-radius: 8px 0px 0px 8px;
-    //         }
-    //         &:last-child {
-    //             border-radius: 0px 8px 8px 0px;
-    //         }
-    //     }
-    // }
-    .border {
-        height: 1px;
-        background: #494a4d;
-        border-radius: 1px;
-    }
+
     .content {
-        width: 276px;
-        height: 416px;
         // height: 416px;
         .line(@radius:8px);
         display: inline-block;
@@ -184,6 +159,9 @@
 .list {
     margin: -16px -16px;
     min-height: 800px;
+    .content {
+        margin: 16px;
+    }
 }
 
 .radio-item {

src/main/pc-space/src/views/CastingDetail.vue

@@ -1,17 +1,158 @@
 <template>
     <div class="detail">
-        <el-image class="bg" src="" fit="cover"></el-image>
+        <el-image class="bg" :src="info.bg" fit="cover"></el-image>
         <div class="detail-content center-content">
-            
+            <el-image :src="info.avatar" fit="cover" class="avatar"></el-image>
+            <div class="info">
+                <div class="name">
+                    <span>{{ info.nickname }}</span>
+                    <img src="../assets/img/renzheng_icon@3x.png" alt="" />
+                </div>
+                <div class="code">
+                    <span>{{ info.id }}</span>
+                    <img src="../assets/copy_icon.png" alt="" />
+                </div>
+                <div class="follow">
+                    <div class="follow-info">
+                        <span>关注</span>
+                        <span>{{ info.follows }}</span>
+                    </div>
+                    <div class="follow-info">
+                        <span>粉丝</span>
+                        <span>{{ info.followers }}</span>
+                    </div>
+
+                    <el-button plain round class="prim" size="mini">关注</el-button>
+                    <el-popover placement="bottom" trigger="hover">
+                        <el-button style="margin-left: 20px" slot="reference" plain round size="mini">分享</el-button>
+                        <share :info="info"> </share>
+                    </el-popover>
+                </div>
+
+                <div class="desc" v-if="info.intro">
+                    {{ info.intro }}
+                </div>
+            </div>
+
+            <div class="anchor" style="height: 50px" ref="anchor"></div>
+
+            <el-radio-group class="menu" v-model="isOwner" size="normal">
+                <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
+                    <div class="radio-item">
+                        <span>{{ item.label }}</span>
+                    </div>
+                </el-radio-button>
+            </el-radio-group>
+
+            <div class="border" style="margin-top: 30px"></div>
+            <div class="search-list">
+                <el-input
+                    class="search"
+                    prefix-icon="el-icon-search"
+                    placeholder="请输入您想找到的作品名称…"
+                    v-model="search"
+                    clearable
+                    @change="onSearch"
+                >
+                </el-input>
+                <el-select class="select" v-model="sortStr" placeholder="请选择">
+                    <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </div>
+
+            <div class="list" v-loading="fetchingData">
+                <collection-info v-for="item in list" :key="item.id" :info="item"></collection-info>
+
+                <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
+            </div>
+
+            <div class="pagination-wrapper">
+                <el-pagination
+                    @size-change="onSizeChange"
+                    @current-change="onCurrentChange"
+                    :current-page="page"
+                    :page-sizes="[10, 20, 30, 40, 50]"
+                    :page-size="pageSize"
+                    layout="total, prev, pager, next"
+                    :total="totalElements"
+                >
+                </el-pagination>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-export default {};
+import CollectionInfo from '../components/CollectionInfo.vue';
+import Share from '../components/Share.vue';
+import pageableTable from '../mixins/pageableTable';
+export default {
+    components: { CollectionInfo, Share },
+    mixins: [pageableTable],
+    data() {
+        return {
+            info: {},
+            typeList: [
+                {
+                    label: 'TA拥有的',
+                    value: true
+                },
+                {
+                    label: 'TA卖出的',
+                    value: false
+                }
+            ],
+            sortList: [
+                {
+                    label: '综合排序',
+                    value: 'createdAt,desc'
+                },
+                {
+                    label: '热门排序',
+                    value: 'likes,desc'
+                },
+                {
+                    label: '价格从高往低',
+                    value: 'price,desc'
+                },
+                {
+                    label: '价格从低往高',
+                    value: 'price,asc'
+                }
+            ],
+            search: '',
+            url: '/collection/all',
+            list: [],
+            isOwner: true
+        };
+    },
+    mounted() {
+        this.getDetail();
+    },
+    methods: {
+        getDetail() {
+            this.$http.get('/user/get/' + this.$route.query.id).then(res => {
+                this.info = res;
+            });
+        },
+        beforeGetData() {
+            return {
+                search: this.search,
+                query: {
+                    ownerId: this.$route.query.id
+                }
+            };
+        },
+        setList(list) {
+            this.list = list;
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
+@import url('../styles/list.less');
 .bg {
     width: 100%;
     height: 240px;
@@ -21,4 +162,95 @@ export default {};
         color: transparent;
     }
 }
+.avatar {
+    position: absolute;
+    width: 92px;
+    height: 92px;
+    top: 0;
+    left: 50px;
+    transform: translateY(-50%);
+    border-radius: 100px;
+    border: 4px solid #fff;
+}
+
+.detail-content {
+    position: relative;
+    padding: 66px 50px;
+}
+
+.info {
+    .name {
+        font-size: 24px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 34px;
+        vertical-align: middle;
+        img {
+            width: 18px;
+            height: 18px;
+            display: inline-block;
+            margin-left: 6px;
+            vertical-align: middle;
+        }
+    }
+
+    .code {
+        font-size: 16px;
+        color: #949699;
+        line-height: 24px;
+        vertical-align: middle;
+        margin-top: 6px;
+        img {
+            width: 18px;
+            height: 18px;
+            display: inline-block;
+            margin-left: 6px;
+            vertical-align: middle;
+            cursor: pointer;
+        }
+    }
+
+    .follow {
+        display: flex;
+        align-items: center;
+        margin-top: 6px;
+        .follow-info {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+            margin-right: 30px;
+            span {
+                &:last-child {
+                    font-size: 16px;
+                    font-family: Arial-BoldMT, Arial;
+                    color: #ffffff;
+                    line-height: 24px;
+                    margin-left: 6px;
+                }
+            }
+        }
+        .el-button {
+            background-color: transparent;
+            min-width: 76px;
+            height: 28px;
+
+            &.prim {
+                .line(@radius:28px);
+                text-align: center;
+                /deep/span {
+                    color: @prim;
+                    position: relative;
+                    z-index: 1;
+                }
+            }
+        }
+    }
+
+    .desc {
+        font-size: 16px;
+        color: #949699;
+        line-height: 26px;
+        margin-top: 16px;
+    }
+}
 </style>

src/main/pc-space/yarn.lock

@@ -2460,6 +2460,15 @@ cli-width@^3.0.0:
   resolved "https://registry.npm.taobao.org/cli-width/download/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=
 
+clipboard@^2.0.0:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
+  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboardy@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/clipboardy/download/clipboardy-2.3.0.tgz?cache=0&sync_timestamp=1634141778549&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fclipboardy%2Fdownload%2Fclipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
@@ -3141,6 +3150,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.nlark.com/delayed-stream/download/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.nlark.com/depd/download/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -4217,6 +4231,13 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/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:
   version "4.2.8"
   resolved "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
@@ -7250,6 +7271,11 @@ select-hose@^2.0.0:
   resolved "https://registry.nlark.com/select-hose/download/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selfsigned@^1.10.8:
   version "1.10.11"
   resolved "https://registry.nlark.com/selfsigned/download/selfsigned-1.10.11.tgz#24929cd906fe0f44b6d01fb23999a739537acbe9"
@@ -7458,6 +7484,11 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+social-share.js@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/social-share.js/-/social-share.js-1.0.16.tgz#1fd4a91c46c8c6835670f11472ecb2e293215310"
+  integrity sha1-H9SpHEbIxoNWcPEUcuyy4pMhUxA=
+
 sockjs-client@^1.5.0:
   version "1.5.2"
   resolved "https://registry.nlark.com/sockjs-client/download/sockjs-client-1.5.2.tgz#4bc48c2da9ce4769f19dc723396b50f5c12330a3"
@@ -7949,6 +7980,11 @@ timsort@^0.3.0:
   resolved "https://registry.nlark.com/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -8327,6 +8363,13 @@ vue-cli-plugin-style-resources-loader@^0.1.5:
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz#3e95f4df41f5408e1255664690698c0533648109"
   integrity sha512-LluhjWTZmpGl3tiXg51EciF+T70IN/9t6UvfmgluJBqxbrb6OV9i7L5lTd+OKtcTeghDkhcBmYhtTxxU4w/8sQ==
 
+vue-clipboard2@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz#331fec85f9d4f175eb0d4feaef4d77338562af36"
+  integrity sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==
+  dependencies:
+    clipboard "^2.0.0"
+
 vue-eslint-parser@^7.0.0:
   version "7.11.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz?cache=0&sync_timestamp=1634602895439&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -8340,6 +8383,11 @@ vue-eslint-parser@^7.0.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
+vue-github-badge@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue-github-badge/-/vue-github-badge-1.0.1.tgz#dff7ce07320e64a218edf106b15a43176ec06106"
+  integrity sha1-3/fOBzIOZKIY7fEGsVpDF27AYQY=
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.nlark.com/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -8370,6 +8418,14 @@ vue-router@^3.2.0:
   resolved "https://registry.npmmirror.com/vue-router/download/vue-router-3.5.2.tgz?cache=0&sync_timestamp=1634663514839&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
   integrity sha1-X1Xj8lGXDjbD6NiKfNLWejUK3lw=
 
+vue-social-share@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/vue-social-share/-/vue-social-share-0.0.3.tgz#901dd165d4750214976dec053101abb51abb3868"
+  integrity sha1-kB3RZdR1AhSXbewFMQGrtRq7OGg=
+  dependencies:
+    social-share.js "^1.0.16"
+    vue-github-badge "^1.0.0"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"