首先放下作者大大的github地址：https://github.com/bailichen/vue-weixin
接着我们看一下效果
接下来我们一起看代码呀
首先是index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="screen-orientation" content="portrait" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>微信</title>
<!-- <script src="http://cangdu.org:8003/socket.io/socket.io.js"></script>多人聊天 -->
</head>
<body>
<div id="weixin">
<router-view></router-view>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;0;height:0;visibility:hidden">
<defs>
<symbol viewBox="0 0 1024 1024" id="doubleperson">
<path d="M896.631124 705.610556l-162.718989-63.414285c0 0-31.03176-12.046361-43.087331-23.895223-7.749498-7.616468-7.188726-25.583678-0.331551-48.535413 6.856152-22.951735 90.273003-116.226095 90.273003-200.955848 0-130.854257-86.027305-236.94962-192.138018-236.94962-27.54638 0-53.725622 7.179516-77.410044 20.058848 2.912329 0.522909 5.805216 1.12359 8.674567 1.804089 88.643899 21.041222 155.617244 117.202329 155.617244 232.655827 0 84.729753-83.416851 178.004113-90.273003 200.955848-6.857175 22.951735-7.417947 40.918945 0.331551 48.535413 12.05557 11.848862 43.087331 23.895223 43.087331 23.895223l162.718989 63.414285c34.276664 12.30628 61.129242 45.61592 61.129242 82.089623l0 17.296945c0 19.655665-7.893784 35.534308-20.660552 46.581921l53.861722 0c39.73191 0 72.055083-24.352641 72.055083-64.151066l0-17.296945C957.760366 751.226476 930.908812 717.916836 896.631124 705.610556z" fill="#ffffff" p-id="1855"></path>
<path d="M738.037083 725.154681l-162.718989-63.414285c0 0-31.03176-12.046361-43.087331-23.895223-7.749498-7.616468-7.188726-25.583678-0.331551-48.535413 6.856152-22.951735 90.273003-116.226095 90.273003-200.955848 0-115.452475-66.973344-211.614605-155.617244-232.655827-2.869351-0.680499-5.761214-1.281179-8.674567-1.804089-9.092076-1.633197-18.386766-2.489704-27.846208-2.489704-106.10355 0-192.121646 106.096387-192.121646 236.956783 0 81.153298 74.332962 177.899736 83.504856 195.48423 9.18008 17.584494 6.945179 44.384883-0.301875 52.502771-10.881838 12.19474-50.64547 24.419156-50.64547 24.419156l-146.68992 65.375963c-34.269501 12.311397-61.121056 44.63457-61.121056 81.101109l0 17.296945c0 39.798425 32.32215 64.151066 72.04792 64.151066l246.033509 0 84.331687 0 262.039042 0c20.10899 0 38.311561-6.247284 51.394531-17.569144 12.766768-11.047614 20.660552-26.927279 20.660552-46.581921l0-17.296945C799.166325 770.770602 772.313747 737.460961 738.037083 725.154681z" fill="#ffffff" p-id="1856"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="loading">
<path d="M586.24 868.11648c-16.00512-15.99488-35.328-23.93088-57.97888-23.93088-22.66112 0-41.984 8.05888-57.98912 23.93088-16.00512 16.00512-24.064 35.328-24.064 57.856 0 22.65088 7.936 41.85088 24.064 57.84576 16.00512 15.99488 35.328 23.93088 57.97888 23.93088 22.66112 0 41.86112-7.936 57.98912-23.93088 16.00512-15.99488 23.93088-35.328 24.064-57.856 0-22.39488-8.06912-41.71776-24.064-57.84576m-272.76288-120.4224c-17.54112-17.67424-38.78912-26.37824-63.744-26.37824s-46.08 8.83712-63.744 26.368c-17.54112 17.53088-26.368 38.77888-26.368 63.73376 0 24.832 8.82688 46.08 26.368 63.61088 17.664 17.664 38.912 26.368 63.744 26.368s46.08-8.83712 63.744-26.368c17.664-17.53088 26.49088-38.77888 26.49088-63.61088 0-24.82176-8.83712-46.08-26.50112-63.73376m-247.808-284.25216a97.62816 97.62816 0 0 0-21.11488 31.232 95.5392 95.5392 0 0 0-7.68 38.26688c0 13.312 2.56 26.112 7.68 38.26688a97.62816 97.62816 0 0 0 21.11488 31.232 97.28 97.28 0 0 0 31.232 20.992c12.16512 5.12 24.96512 7.80288 38.27712 7.80288s26.112-2.56 38.26688-7.81312a97.28 97.28 0 0 0 31.232-20.992 97.62816 97.62816 0 0 0 21.12512-31.232c5.12-12.15488 7.68-24.94464 7.68-38.25664 0-13.312-2.56-26.112-7.68-38.26688a97.62816 97.62816 0 0 0-21.12512-31.232 95.25248 95.25248 0 0 0-31.232-20.992c-12.15488-5.12-24.95488-7.68-38.26688-7.68s-26.112 2.56-38.26688 7.68a95.25248 95.25248 0 0 0-31.232 20.992M249.856 147.94752c-14.46912 0-28.29312 2.816-41.472 8.32512a104.2944 104.2944 0 0 0-33.792 22.77376c-9.86112 9.86112-17.408 21.12512-22.784 33.792a104.46848 104.46848 0 0 0-8.448 41.472c0 14.45888 2.816 28.28288 8.448 41.46176a105.66656 105.66656 0 0 0 22.784 33.792 105.6768 105.6768 0 0 0 33.792 22.77376c13.17888 5.632 27.00288 8.32512 41.472 8.32512a105.6768 105.6768 0 0 0 75.264-31.09888c9.86112-9.86112 17.408-21.12512 22.784-33.792 5.632-13.17888 8.32512-27.00288 8.32512-41.472s-2.816-28.28288-8.32512-41.46176a105.66656 105.66656 0 0 0-22.784-33.792 105.6768 105.6768 0 0 0-75.264-31.09888m384.256 36.47488c6.02112-14.20288 8.96-29.05088 8.96-44.544 0-15.60576-2.93888-30.45376-8.96-44.65664-5.76512-13.69088-13.95712-25.856-24.576-36.47488S586.752 39.936 572.928 34.048a113.22368 113.22368 0 0 0-44.66688-8.96c-15.616 0-30.464 2.93888-44.67712 8.96a111.33952 111.33952 0 0 0-36.352 24.576 113.21344 113.21344 0 0 0-24.576 36.46464 113.18272 113.18272 0 0 0-8.96 44.66688c0 15.49312 3.072 30.34112 8.96 44.544a111.31904 111.31904 0 0 0 24.576 36.352 112.6912 112.6912 0 0 0 36.352 24.576c14.21312 6.01088 29.06112 9.08288 44.67712 9.08288 15.48288 0 30.464-3.072 44.66688-9.09312a113.23392 113.23392 0 0 0 36.48512-24.576 111.79008 111.79008 0 0 0 24.69888-36.21888M859.136 863.50848c14.336-14.336 21.504-31.744 21.504-52.09088 0-20.34688-7.168-37.75488-21.504-52.08064-14.46912-14.336-31.86688-21.504-52.224-21.504-20.34688 0-37.75488 7.168-52.224 21.504-14.336 14.336-21.62688 31.744-21.62688 52.08064 0 20.35712 7.168 37.75488 21.62688 52.09088 14.336 14.336 31.744 21.504 52.224 21.504 20.34688 0.13312 37.76512-7.03488 52.224-21.504M921.6 467.39456c-18.04288 0-33.536 6.4-46.336 19.2-12.8 12.8-19.2 28.28288-19.2 46.336 0 18.04288 6.4 33.52576 19.2 46.20288 12.8 12.8 28.29312 19.18976 46.336 19.18976s33.536-6.4 46.336-19.18976c12.8-12.8 19.2-28.16 19.2-46.20288 0-18.05312-6.4-33.536-19.2-46.336-12.8-12.8-28.29312-19.2-46.336-19.2m-57.344-212.96128c0-15.73888-5.632-29.30688-16.896-40.448-11.13088-11.264-24.70912-16.76288-40.448-16.76288-15.872 0-29.30688 5.632-40.57088 16.77312-11.264 11.13088-16.896 24.69888-16.896 40.43776 0 15.872 5.632 29.30688 16.896 40.57088 11.264 11.13088 24.69888 16.76288 40.57088 16.76288 15.872 0 29.30688-5.632 40.448-16.76288 11.264-11.264 16.896-24.69888 16.896-40.57088z" fill="#46C01B" p-id="10802"></path>
</symbol>
<symbol viewBox="0 0 174.96 100.79" id="Cards">
<path fill="#4ca8d7" d="M174.947,7.717h0.014V0.001H-0.001v7.716c2.239,0,4.095,1.789,4.095,4.028v0.079
c0,2.239-1.855,4.082-4.095,4.082v7.244c2.239,0,4.095,1.789,4.095,4.028v0.079c0,2.24-1.855,4.082-4.095,4.082v7.244
c2.239,0,4.095,1.789,4.095,4.028v0.078c0,2.24-1.855,4.083-4.095,4.083v7.245c2.239,0,4.095,1.789,4.095,4.027v0.08
c0,2.238-1.855,4.082-4.095,4.082v7.244c2.239,0,4.095,1.789,4.095,4.027v0.08c0,2.238-1.855,4.08-4.095,4.08v7.246
c2.239,0,4.095,1.787,4.095,4.027v0.078c0,2.24-1.855,4.082-4.095,4.082v7.717h174.962v-7.717h-0.014c-2.24,0-4.08-1.822-4.08-4.061
v-0.08c0-2.238,1.84-4.047,4.08-4.047h0.014v-7.246h-0.014c-2.24,0-4.08-1.82-4.08-4.061v-0.08c0-2.238,1.84-4.047,4.08-4.047h0.014
v-7.244h-0.014c-2.24,0-4.08-1.822-4.08-4.063v-0.078c0-2.24,1.84-4.049,4.08-4.049h0.014v-7.245h-0.014
c-2.24,0-4.08-1.822-4.08-4.062v-0.079c0-2.24,1.84-4.048,4.08-4.048h0.014v-7.245h-0.014c-2.24,0-4.08-1.822-4.08-4.062v-0.079
c0-2.239,1.84-4.048,4.08-4.048h0.014v-7.244h-0.014c-2.24,0-4.08-1.822-4.08-4.062v-0.079
C170.867,9.527,172.707,7.717,174.947,7.717L174.947,7.717z"/>
<path fill="#fff" d="M112.854,75.716H47.745c-1.856,0-3.337,1.502-3.337,3.367c0,1.838,1.481,3.366,3.337,3.366h65.108
c1.867,0,3.387-1.528,3.387-3.366C116.249,77.218,114.721,75.716,112.854,75.716z M126.811,30.509
c-2.326-2.319-5.53-3.752-9.059-3.752h-7.918v-5.079c0-1.837-1.501-3.338-3.366-3.338H54.142c-1.837,0-3.348,1.501-3.348,3.338
v22.979c0,7.252,2.954,13.813,7.705,18.564c4.8,4.819,11.36,7.752,18.632,7.752h6.396c7.205,0,13.813-2.933,18.565-7.752h0.019
l0.077-0.048c2.289-2.309,4.193-5.099,5.511-8.139c0.174,0.029,0.356,0.048,0.549,0.048h9.494c3.529,0,6.732-1.403,9.069-3.74
c2.338-2.338,3.742-5.561,3.742-9.071v-2.693C130.563,36.04,129.158,32.817,126.811,30.509z M103.121,44.658
c0,5.349-2.194,10.282-5.771,13.813v0.048c-3.501,3.512-8.446,5.724-13.813,5.724h-6.396c-5.416,0-10.312-2.223-13.89-5.771v0.02
c-3.56-3.559-5.723-8.445-5.723-13.842V25.045h45.593V44.658z M123.858,42.272c0,1.673-0.692,3.145-1.789,4.271
c-1.126,1.097-2.646,1.789-4.317,1.789h-7.657c-0.165-0.066-0.309-0.163-0.452-0.231c0.144-1.125,0.191-2.27,0.191-3.434V33.442
h7.918c1.672,0,3.191,0.712,4.317,1.817c1.097,1.146,1.789,2.646,1.789,4.319V42.272z"/>
</symbol>
<symbol viewBox="0 0 174.96 100.79" id="firendCard">
<path fill="#feba00" d="M174.947,7.717h0.014V0.001H-0.001v7.716c2.239,0,4.095,1.789,4.095,4.028v0.079
c0,2.239-1.855,4.082-4.095,4.082v7.244c2.239,0,4.095,1.789,4.095,4.028v0.079c0,2.24-1.855,4.082-4.095,4.082v7.244
c2.239,0,4.095,1.789,4.095,4.028v0.078c0,2.24-1.855,4.083-4.095,4.083v7.245c2.239,0,4.095,1.789,4.095,4.027v0.08
c0,2.238-1.855,4.082-4.095,4.082v7.244c2.239,0,4.095,1.789,4.095,4.027v0.08c0,2.238-1.855,4.08-4.095,4.08v7.246
c2.239,0,4.095,1.787,4.095,4.027v0.078c0,2.24-1.855,4.082-4.095,4.082v7.717h174.962v-7.717h-0.014c-2.24,0-4.08-1.822-4.08-4.061
v-0.08c0-2.238,1.84-4.047,4.08-4.047h0.014v-7.246h-0.014c-2.24,0-4.08-1.82-4.08-4.061v-0.08c0-2.238,1.84-4.047,4.08-4.047h0.014
v-7.244h-0.014c-2.24,0-4.08-1.822-4.08-4.063v-0.078c0-2.24,1.84-4.049,4.08-4.049h0.014v-7.245h-0.014
c-2.24,0-4.08-1.822-4.08-4.062v-0.079c0-2.24,1.84-4.048,4.08-4.048h0.014v-7.245h-0.014c-2.24,0-4.08-1.822-4.08-4.062v-0.079
c0-2.239,1.84-4.048,4.08-4.048h0.014v-7.244h-0.014c-2.24,0-4.08-1.822-4.08-4.062v-0.079
C170.867,9.527,172.707,7.717,174.947,7.717L174.947,7.717z"/>
<path fill="#fff" d="M119.545,85.037h-63.31L52.9,82.904l-0.203-0.616c-0.101-0.303-0.949-3.035-0.065-5.873l0.088-0.287
l0.18-0.249c2.061-2.823,7.216-5.653,12.671-8.65c4.998-2.745,12.547-6.891,12.595-9.1l0.005-2.086
c-4.77-4.606-7.385-10.883-7.385-17.767c0-10.648,2.032-21.536,17.107-21.538c15.075,0.001,17.105,10.89,17.105,21.538
c0,6.886-2.619,13.162-7.386,17.764l0.009,2.127c0.046,2.166,7.597,6.316,12.592,9.061c5.455,3,10.609,5.828,12.669,8.651
l0.18,0.249l0.091,0.285c0.881,2.838,0.032,5.571-0.066,5.874l-0.202,0.615L119.545,85.037L119.545,85.037z"/>
</symbol>
<symbol viewBox="0 0 224 200" id="debitcard">
<path d="M195.229,36.116H30.952c-5.041,0-9.127,4.086-9.127,9.127v109.518c0,5.04,4.086,9.126,9.127,9.126h164.277
c5.04,0,9.127-4.086,9.127-9.126V45.243C204.356,40.202,200.27,36.116,195.229,36.116z M169.493,69.798
c0,2.52-2.044,4.563-4.563,4.563H55.015c-2.519,0-4.563-2.043-4.563-4.563v-6.845c0-2.521,2.043-4.563,4.563-4.563H164.93
c2.52,0,4.563,2.043,4.563,4.563V69.798z"/>
</symbol>
<symbol viewBox="0 0 224 200" id="notecase">
<path d="M66.734,122.367h68.7V97.834c2.6-11.9,8.5-8.967,10.301,0v24.533h13.6V75.434h-92.6V122.367z M99.334,83.701
H109.4v2.033h-2.467l4.5,8.467h0.767l4.932-8.467H114.5v-2.033h10.066v2.033H120.9V85.8l-4.9,8.434h0.066v0.566h5.6v2.033h-5.6
v3.033h5.6v2.033h-5.6v11.834h4.168v2.033h-16.601v-2.033h4.4V101.9h-5.833v-2.033h5.833v-3.033h-5.833v-2.033h5.833v-0.066H107.9
l-4.667-8.9v-0.067h-3.9V83.701z"/>
<path d="M112,1.334C57.5,1.334,13.334,45.5,13.334,100c0,54.5,44.167,98.666,98.667,98.666
c54.5,0,98.666-44.166,98.666-98.666C210.666,45.5,166.5,1.334,112,1.334z M112,187.801c-48.467,0-87.8-39.334-87.8-87.801
c0-48.466,39.333-87.799,87.8-87.799c48.466,0,87.8,39.3,87.8,87.799C199.801,148.5,160.467,187.801,112,187.801z"/>
<path d="M112,23.167c-42.433,0-76.833,34.4-76.833,76.833c0,42.434,34.4,76.834,76.833,76.834
s76.833-34.4,76.833-76.834C188.834,57.567,154.434,23.167,112,23.167z M162.734,125.234h-16.533
c-0.535,18.033-14.734,32.566-32.035,32.566c-17.299,0-31.499-14.533-32.032-32.566h-18.3v-52.9h17.733v-14.5
c2.6-5.833,8.5-4.4,10.3,0v14.5h3.7V53.567c2.5-5.6,8.066-4.6,10.3,0v18.767h3.7V49.767c2.366-5.4,7.767-5.5,10.3,0v22.567h3.699
V53.8c1.566-5.2,9-5.767,10.301,0v18.534h28.867V125.234z"/>
</symbol>
<symbol viewBox="0 0 224 200" id="gathering">
<path d="M191.261,177.838h-42.69v-17.076h41.552v-41.551h17.076V161.9
C207.198,170.725,200.083,177.838,191.261,177.838L191.261,177.838z"/>
<path d="M207.198,79.367h-17.076V39.239h-41.267V22.163h42.405c8.822,0,15.938,7.115,15.938,15.938V79.367
L207.198,79.367z"/>
<path d="M33.877,77.944H16.802V38.1c0-8.822,7.115-15.938,15.938-15.938h42.405v17.076H33.877V77.944L33.877,77.944z
"/>
<path d="M75.429,177.838H32.74c-8.823,0-15.938-7.115-15.938-15.938v-41.268h17.076v40.129h41.267v17.076H75.429z"/>
<path d="M146.863,65.422l-42.975,42.975L81.406,86.198l-9.676,9.676l32.16,32.16l52.651-52.65L146.863,65.422z"/>
</symbol>
<symbol viewBox="0 0 45.1 28.45" id="mymovie">
<path d="M44.785,18.866l0.313-1.406c-0.73-0.156-4.115-0.677-6.77-0.572c0.104-0.521,0.104-1.094,0.104-1.615
c0-2.239-0.678-4.373-1.875-6.196c0-0.104-0.156-4.947-1.51-8.8c-0.053-0.209-0.313-0.313-0.521-0.261
c-3.07,0.833-5.988,2.969-6.092,3.021c-1.822-0.625-3.801-0.938-5.885-0.938c-2.083,0-4.061,0.313-5.884,0.938
c-0.104-0.104-3.02-2.187-6.092-3.021c-0.208-0.052-0.468,0.052-0.521,0.261c-1.406,3.853-1.51,8.696-1.51,8.8
c-1.198,1.875-1.874,3.958-1.874,6.196c0,0.573,0.052,1.095,0.104,1.615c-2.656-0.104-6.041,0.469-6.77,0.572l0.312,1.406
c2.396-0.364,5.728-0.625,6.821-0.573c0.104,0.417,0.261,0.886,0.469,1.302c-2.708,0.365-5.936,1.198-6.665,1.459
c0.156,0.469,0.364,0.938,0.573,1.406c2.708-0.834,5.884-1.354,6.77-1.406c0.208,0.364,0.469,0.729,0.677,1.041
c-2.396,0.625-5.728,1.822-6.353,2.188c0.261,0.469,0.521,0.885,0.834,1.354c2.967-1.354,5.936-2.031,6.717-2.135
c2.917,3.02,7.394,4.947,12.393,4.947c5,0,9.479-1.928,12.395-4.947c0.781,0.104,3.697,0.781,6.717,2.135
c0.313-0.417,0.572-0.885,0.834-1.354c-0.625-0.365-4.01-1.563-6.406-2.188c0.262-0.365,0.469-0.677,0.678-1.041
c0.885,0.052,4.01,0.572,6.717,1.406c0.209-0.469,0.416-0.938,0.572-1.406c-0.729-0.209-3.904-1.094-6.561-1.459
c0.156-0.416,0.313-0.833,0.469-1.302C39.057,18.241,42.391,18.502,44.785,18.866L44.785,18.866z M29.162,19.647
c0,1.928-1.613,3.541-3.541,3.541c-1.301,0-2.499-0.729-3.072-1.822c-0.625,1.094-1.77,1.822-3.072,1.822
c-1.927,0-3.541-1.563-3.541-3.541c-2.917,0-5.312-2.344-5.312-5.26s2.343-5.259,5.312-5.259c2.968,0,5.311,2.343,5.311,5.259
c0,2.24-1.406,4.218-3.436,4.947c-0.833,0.365-0.781,1.562-0.208,2.187c0.498,0.496,1.171,0.776,1.875,0.782
c1.197,0,2.187-0.781,2.499-1.823c-0.572-0.156-0.989-0.573-0.989-1.042c0-0.624,0.677-1.093,1.562-1.093
c0.833,0,1.563,0.469,1.563,1.093c0,0.469-0.417,0.886-0.99,1.042c0.365,1.042,1.355,1.823,2.5,1.823
c0.73,0,1.406-0.313,1.875-0.781c0.572-0.625,0.678-1.822-0.207-2.188c-1.98-0.729-3.438-2.708-3.438-4.947
c0-2.916,2.344-5.259,5.311-5.259c2.969,0,5.313,2.292,5.313,5.208C34.475,17.251,32.078,19.647,29.162,19.647z M15.936,11.264
c-0.469,0-0.885,0.416-0.885,0.885v4.426c0,0.469,0.416,0.885,0.885,0.885c0.469,0,0.885-0.416,0.885-0.885v-4.427
C16.821,11.68,16.405,11.264,15.936,11.264L15.936,11.264z M29.162,11.264c-0.469,0-0.885,0.416-0.885,0.885v4.426
c0,0.469,0.416,0.885,0.885,0.885s0.885-0.416,0.885-0.885v-4.427C30.047,11.68,29.631,11.264,29.162,11.264z"/>
</symbol>
<symbol viewBox="0 0 46.77 32.72" id="mb">
<path d="M37.994,15.161c-0.385,0-0.764,0.027-1.137,0.076L33.51,2.101h2.268c0.58,0,1.049-0.469,1.049-1.049
c0.001-0.579-0.469-1.049-1.048-1.049c-0.001,0-0.001,0-0.001,0h-7.659c-0.579,0-1.05,0.469-1.05,1.049
c0,0.579,0.47,1.049,1.049,1.049c0,0,0,0,0.001,0h3.227l1.611,6.322c-0.075-0.018-0.151-0.026-0.229-0.027H14.449
c-0.022,0-0.043,0.004-0.065,0.005l-1.485-2.044h1.764c0.58,0,1.049-0.469,1.049-1.048c0-0.58-0.469-1.049-1.048-1.049
c0,0,0,0-0.001,0H7.003c-0.579,0-1.049,0.469-1.049,1.048c0,0.58,0.469,1.049,1.049,1.049h0h3.302l2.747,3.78l-2.077,5.305
c-0.718-0.186-1.458-0.28-2.2-0.279c-4.841,0-8.778,3.937-8.778,8.778c0,4.84,3.938,8.777,8.778,8.777
c4.485,0,8.193-3.381,8.713-7.729h6.889c0.005,0,0.009-0.002,0.013-0.002c0.045,0,0.091-0.004,0.136-0.01
c0.019-0.002,0.036-0.008,0.055-0.012c0.031-0.006,0.062-0.012,0.093-0.021c0.02-0.006,0.039-0.012,0.059-0.02
c0.082-0.029,0.16-0.07,0.232-0.119c0.01-0.006,0.02-0.01,0.029-0.018c0.004-0.002,0.008-0.006,0.012-0.01
c0.01-0.006,0.02-0.016,0.029-0.023c0.061-0.049,0.115-0.104,0.164-0.164c0.004-0.006,0.008-0.01,0.012-0.016
c0.027-0.033,0.051-0.07,0.072-0.107l0.003-0.004l8.151-14.151l1.388,5.443c-3.278,1.274-5.61,4.46-5.61,8.185
c0,4.84,3.938,8.777,8.779,8.777c4.84,0,8.777-3.938,8.777-8.777S42.834,15.161,37.994,15.161z M14.516,12.151l7.803,10.74h-4.83
c-0.346-2.893-2.102-5.357-4.561-6.683L14.516,12.151z M12.156,18.18c1.685,0.994,2.899,2.705,3.217,4.711h-5.06L12.156,18.18z
M8.775,30.619c-3.684,0-6.681-2.996-6.681-6.68s2.997-6.682,6.681-6.682c0.49,0,0.967,0.055,1.427,0.156l-2.404,6.143
c-0.211,0.539,0.056,1.148,0.595,1.359c0.122,0.047,0.251,0.072,0.381,0.072h6.598C14.868,28.176,12.102,30.619,8.775,30.619z
M24.275,22.014l-8.371-11.521h15.007L24.275,22.014z M37.994,30.619c-3.684,0-6.681-2.996-6.681-6.68
c0-2.744,1.663-5.105,4.034-6.133l1.629,6.391c0.145,0.563,0.715,0.9,1.275,0.758c0.563-0.143,0.901-0.713,0.758-1.275l0,0
l-1.629-6.393c0.203-0.018,0.408-0.027,0.613-0.027c3.684,0,6.68,2.996,6.68,6.68S41.678,30.619,37.994,30.619z"/>
</symbol>
<symbol viewBox="0 0 37.08 18.54" id="trigon">
<path d="M0.001,18.538L18.542,0.002L37.08,18.538H0.001L0.001,18.538z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="discuss">
<path d="M0 704.034V768c0 35.362 28.672 64.034 64.034 64.034h128V1024l287.949-191.966h480.051c35.294 0 63.966-28.672 63.966-64.034V63.966A64.034 64.034 0 0 0 960.034 0h-896A64.034 64.034 0 0 0 0 63.966v640.068zM128 128h768v575.966H479.983l-159.949 96.051v-96.051H128V128z" p-id="18879"></path>
</symbol>
<symbol viewBox="0 0 51.69 47.04" id="like">
<path d="M51.689,13.292C51.582,6.278,46.457,0.871,39.715,0.09c-5.357-0.62-10.686,2.08-13.706,6.486
c-2.584-4.246-7.684-6.447-12.599-6.548C5.893-0.129,0.518,5.817,0.029,13.153c-0.536,8.054,6.14,16.168,11.04,21.765
c2.745,3.135,5.75,6.066,8.982,8.682c1.455,1.176,3.274,2.824,5.211,3.252c0.187,0.075,0.648,0.188,0.648,0.188
s0.477-0.109,0.663-0.184c1.867-0.398,3.619-1.902,5.054-3.008c3.131-2.416,5.998-5.168,8.672-8.088
C45.713,29.851,51.818,21.789,51.689,13.292 M47.219,15.954c-0.58,6.573-6.242,12.729-10.48,17.351
c-2.049,2.233-4.266,4.317-6.611,6.229c-0.996,0.813-4.471,2.747-4.471,2.747s-0.567-0.449-0.897-0.653
c-0.88-0.544-1.707-1.185-2.512-1.835c-2.421-1.955-4.654-4.154-6.777-6.434C11.083,28.65,5.958,22.886,4.7,16.374
C3.733,11.371,6.529,6.126,11.393,5.063c4.781-1.044,9.651,2.688,13.15,6.787c0.591,0.692,1.441,0.979,2.213,0.425
c0.679-0.487,1.294-1.181,1.964-1.839c0.576-0.566,0.963-0.928,1.518-1.518c2.742-2.915,5.615-4.748,9.137-4.165
C44.391,5.583,47.643,11.163,47.219,15.954"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="comment">
<path d="M172.218182 139.636364c0-79.127273 60.509091-139.636364 139.636363-139.636364h851.781819c79.127273 0 139.636364 60.509091 139.636363 139.636364v744.727272c0 79.127273-60.509091 139.636364-139.636363 139.636364h-851.781819c-79.127273 0-139.636364-60.509091-139.636363-139.636364v-744.727272z m0 190.836363v395.636364l-172.218182-200.145455 172.218182-195.490909z" fill="#8394b0" p-id="11093"></path>
<path d="M372.363636 512a139.636364 139.636364 0 1 0 279.272728 0 139.636364 139.636364 0 1 0-279.272728 0Z" fill="#FFFFFF" p-id="11094"></path><path d="M977.454545 512m-139.636363 0a139.636364 139.636364 0 1 0 279.272727 0 139.636364 139.636364 0 1 0-279.272727 0Z" fill="#FFFFFF" p-id="11095"></path>
</symbol>
<symbol viewBox="0 0 38.061 47.121" id="boy">
<path fill="#040000" d="M-8.943-4.684L-8.943-4.684L-8.943-4.684z"/>
<path fill="#4D9FF1" d="M37.563,36.855c0.146,0.477,0.266,1.084,0.356,1.818c0.093,0.736,0.14,1.473,0.14,2.207
c0,0.736-0.056,1.436-0.166,2.098c-0.074,0.33-0.156,0.625-0.248,0.883s-0.193,0.479-0.306,0.662
c-0.073,0.109-0.221,0.221-0.44,0.332c-0.221,0.109-0.504,0.221-0.854,0.332c-0.35,0.109-0.746,0.221-1.188,0.332
c-0.441,0.109-0.92,0.211-1.435,0.303c-0.516,0.092-1.067,0.184-1.655,0.275c-0.591,0.092-1.216,0.176-1.877,0.248
c-1.287,0.184-2.574,0.332-3.863,0.441c-1.322,0.11-2.592,0.194-3.805,0.25c-1.214,0.055-2.281,0.082-3.202,0.082h-1.158
c-0.109,0-0.229-0.009-0.357-0.027c-0.129-0.021-0.266-0.029-0.413-0.029h-0.387c-0.146,0-0.294-0.008-0.44-0.027
c-0.147-0.019-0.294-0.027-0.441-0.027c-0.405,0-0.818-0.02-1.241-0.055c-0.422-0.037-0.836-0.074-1.241-0.111
c-0.404-0.038-0.827-0.057-1.269-0.055c-0.258-0.037-0.516-0.063-0.773-0.084c-0.257-0.02-0.506-0.037-0.744-0.055
c-0.239-0.018-0.487-0.045-0.745-0.082c-0.26-0.039-0.518-0.066-0.774-0.084C8.777,46.464,8.52,46.438,8.262,46.4
c-0.259-0.039-0.507-0.066-0.745-0.084c-0.239-0.018-0.479-0.045-0.718-0.082c-0.238-0.039-0.469-0.076-0.689-0.111
c-0.221-0.037-0.442-0.063-0.662-0.084c-0.22-0.018-0.422-0.045-0.607-0.082c-1.065-0.184-1.958-0.35-2.676-0.496
c-0.718-0.146-1.168-0.313-1.352-0.496c-0.294-0.221-0.533-0.975-0.717-2.262c-0.185-1.285-0.11-2.94,0.221-4.965
c0.146-1.178,0.605-2.07,1.378-2.678c0.771-0.605,1.664-1.094,2.676-1.461s2.069-0.689,3.172-0.965
c1.104-0.277,2.06-0.672,2.869-1.188c0.221-0.146,0.423-0.284,0.607-0.411c0.184-0.13,0.349-0.259,0.496-0.388
c0.146-0.129,0.275-0.269,0.387-0.414c0.184-0.185,0.34-0.366,0.469-0.551c0.13-0.187,0.231-0.369,0.304-0.554
c0.147-0.405,0.222-0.791,0.222-1.157v-1.38c-0.074-0.771-0.322-1.36-0.745-1.766c-0.423-0.404-0.893-0.828-1.407-1.27
c-0.294-0.221-0.533-0.524-0.717-0.91c-0.185-0.386-0.368-0.782-0.552-1.187c-0.074-0.221-0.148-0.451-0.222-0.69
c-0.072-0.239-0.146-0.505-0.221-0.799l-0.332-0.33l-0.332-0.717c-0.146-0.294-0.303-0.708-0.469-1.241
c-0.166-0.533-0.268-1.021-0.304-1.462c-0.037-0.11-0.056-0.202-0.056-0.275v-0.332c0-0.074,0.009-0.157,0.028-0.249
c0.019-0.092,0.028-0.175,0.028-0.249c0.036-0.369,0.128-0.681,0.274-0.938c0-0.625,0.02-1.231,0.055-1.82l0.111-1.766
c0.074-0.515,0.166-1.04,0.275-1.573C8.422,8.485,8.551,7.924,8.7,7.336c0.331-1.141,0.827-2.17,1.49-3.089
c0.625-0.846,1.296-1.554,2.014-2.124s1.463-1.011,2.235-1.324c0.771-0.313,1.545-0.524,2.316-0.634
C17.529,0.056,18.282,0,19.017-0.001c0.368,0.036,0.719,0.073,1.048,0.111c0.332,0.038,0.608,0.093,0.83,0.166
c0.516,0.111,0.93,0.258,1.239,0.441c0.313,0.184,0.58,0.386,0.802,0.607c0.073,0.074,0.146,0.157,0.221,0.249
c0.072,0.092,0.146,0.175,0.221,0.249L23.6,2.045h0.993c0.146,0,0.294,0.009,0.441,0.028c0.146,0.019,0.293,0.046,0.441,0.083
c0.146,0.037,0.293,0.101,0.44,0.192c0.146,0.091,0.293,0.193,0.439,0.304c0.258,0.257,0.569,0.607,0.938,1.048
c0.369,0.516,0.701,1.048,0.994,1.599c0.295,0.551,0.533,1.121,0.717,1.711c0.369,1.213,0.646,2.372,0.828,3.476
c0.074,0.625,0.14,1.25,0.193,1.876c0.053,0.626,0.1,1.233,0.137,1.82c0.037,0.184,0.074,0.404,0.111,0.662
c0.037,0.111,0.063,0.24,0.082,0.387c0.02,0.147,0.028,0.294,0.028,0.441c0,0.368-0.036,0.81-0.11,1.324
c-0.037,0.331-0.074,0.625-0.111,0.883c-0.037,0.258-0.094,0.497-0.166,0.717c-0.146,0.368-0.295,0.663-0.44,0.882
c-0.185,0.222-0.386,0.387-0.607,0.496c-0.109,0.552-0.258,1.049-0.441,1.49c-0.034,0.11-0.082,0.211-0.137,0.303
c-0.057,0.092-0.102,0.193-0.139,0.304c-0.035,0.111-0.072,0.212-0.111,0.304c-0.037,0.092-0.092,0.193-0.166,0.304
c-0.184,0.368-0.404,0.662-0.66,0.883c-0.59,0.478-1.067,0.883-1.436,1.215c-0.369,0.332-0.627,0.883-0.773,1.654
c-0.11,0.479-0.147,0.957-0.11,1.436c0.037,0.479,0.166,0.967,0.387,1.463c0.221,0.494,0.58,0.963,1.074,1.406
c0.496,0.443,1.186,0.828,2.069,1.158c0.771,0.295,1.636,0.57,2.593,0.828c0.295,0.109,0.598,0.211,0.911,0.303
s0.615,0.184,0.91,0.275c0.295,0.091,0.588,0.193,0.884,0.305c0.846,0.33,1.618,0.754,2.317,1.27
c0.699,0.515,1.178,1.176,1.437,1.984L37.563,36.855z M21.18,35.146c0.073-0.184,0.073-0.387,0-0.607
c-0.074-0.223-0.203-0.442-0.388-0.662c-0.074-0.11-0.166-0.221-0.274-0.332l-0.334-0.332h-2.372
c-0.11,0.111-0.211,0.222-0.304,0.332c-0.092,0.111-0.176,0.222-0.25,0.332c-0.146,0.185-0.258,0.377-0.332,0.578
c-0.073,0.203-0.055,0.377,0.056,0.525c0.222,0.516,0.424,0.938,0.606,1.27c0.147,0.367,0.332,0.644,0.554,0.826
c-0.036,0.111-0.064,0.23-0.082,0.359c-0.021,0.129-0.047,0.275-0.084,0.441c-0.036,0.166-0.093,0.34-0.166,0.522
c-0.11,0.554-0.229,1.131-0.357,1.738c-0.129,0.604-0.229,1.176-0.305,1.709c-0.074,0.534-0.111,0.93-0.111,1.188l0.221,0.606
c0.148,0.258,0.322,0.506,0.525,0.744c0.201,0.237,0.413,0.45,0.633,0.635c0.222,0.185,0.414,0.274,0.58,0.274
s0.377-0.092,0.633-0.274c0.111-0.074,0.223-0.166,0.332-0.274l0.333-0.332c0.222-0.224,0.414-0.461,0.578-0.718
c0.166-0.258,0.248-0.459,0.25-0.606c0-0.221-0.055-0.57-0.166-1.049c-0.037-0.185-0.074-0.359-0.11-0.523
c-0.037-0.166-0.074-0.352-0.111-0.553c-0.037-0.203-0.074-0.396-0.111-0.58c-0.074-0.33-0.139-0.643-0.19-0.938
c-0.056-0.293-0.119-0.588-0.195-0.883c-0.035-0.185-0.082-0.356-0.137-0.522c-0.056-0.166-0.102-0.322-0.139-0.47
c-0.035-0.147-0.071-0.276-0.108-0.387c0.071-0.037,0.146-0.093,0.22-0.166c0.072-0.074,0.137-0.158,0.193-0.25
c0.055-0.093,0.118-0.192,0.19-0.304c0.185-0.332,0.424-0.772,0.717-1.323L21.18,35.146z"/>
</symbol>
<symbol viewBox="0 0 29.51 41.83" id="girl">
<path fill="#E37051" d="M9.024,28.252c0,0-8.101,3.859-9.023,13.578h13.293L9.024,28.252z"/>
<path fill="#E37051" d="M27.773,32.215V13.549C27.48-0.084,14.072,0,14.072,0C0.017,1.544,1.332,14.545,1.332,14.545l0.011,18.219
c4.22-7.736,12.719-7.535,12.719-7.535C23.566,25.084,27.773,32.215,27.773,32.215z M3.754,13.53l0.109-0.032L3.754,13.53z
M3.63,13.566C3.626,13.567,3.626,13.567,3.63,13.566z M3.631,13.566l0.049-0.014L3.631,13.566z M3.683,13.551l0.033-0.009
L3.683,13.551z M14.466,23.646l0.06,0.008L14.466,23.646z M14.69,23.676l0.091,0.012L14.69,23.676z M14.804,23.689l0.419,0.053
L14.804,23.689z M15.506,23.777l0.053,0.006L15.506,23.777z M15.643,23.793l0.074,0.01L15.643,23.793z M15.918,23.828l0.289,0.035
L15.918,23.828z M16.254,23.869l0.238,0.031L16.254,23.869z M16.613,23.914l0.248,0.031L16.613,23.914z M16.988,23.961L17.303,24
L16.988,23.961z M17.406,24.014l0.033,0.004L17.406,24.014z M17.621,24.039l0.111,0.016L17.621,24.039z M18.08,24.098l0.113,0.014
L18.08,24.098z M18.563,24.156l0.025,0.004L18.563,24.156z M18.746,24.18h0.002H18.746z M18.779,24.184l0.023,0.004L18.779,24.184z
M18.824,24.189l0.018,0.002C18.838,24.191,18.832,24.191,18.824,24.189z M14.214,23.615l0.007,0.002L14.214,23.615
C3.803,22.324,4.372,13.352,4.372,13.352c1.686-0.482,5.079-3.896,5.079-3.896L9.447,9.452l0.004,0.003
c6.052,4.673,15.348,3.846,15.348,3.846v0.116l0.002-0.024l-0.002,0.024C23.713,24.314,14.214,23.615,14.214,23.615z M14.379,23.637
l-0.061-0.008L14.379,23.637z M14.279,23.625l-0.031-0.004L14.279,23.625z M14.234,23.619l-0.01-0.002L14.234,23.619z M3.889,13.491
l0.112-0.032L3.889,13.491z M4.066,13.44l0.115-0.033L4.066,13.44z M4.188,13.405l0.023-0.007L4.188,13.405z M4.261,13.384
l0.014-0.004L4.261,13.384z M4.301,13.372l0.036-0.01L4.301,13.372z M4.352,13.357l0.018-0.005L4.352,13.357z M6.766,7.388
l0.009,0.007L6.766,7.388z M6.78,7.398l0.046,0.036L6.78,7.398z M6.848,7.451C6.849,7.452,6.85,7.453,6.851,7.454L6.848,7.451z
M6.881,7.477L6.89,7.483C6.887,7.481,6.884,7.479,6.881,7.477z M6.912,7.5l0.014,0.01C6.921,7.507,6.916,7.504,6.912,7.5z
M7.324,7.818l0.123,0.094L7.324,7.818z M7.602,8.031l0.097,0.075L7.602,8.031z M7.775,8.165L7.87,8.238L7.775,8.165z M7.954,8.303
L8.015,8.35L7.954,8.303z M8.216,8.505l0.031,0.023L8.216,8.505z M8.413,8.656l0.014,0.011L8.413,8.656z M8.543,8.757l0.029,0.022
L8.543,8.757z M8.706,8.882l0.201,0.154L8.706,8.882z M8.942,9.063l0.179,0.138L8.942,9.063z M9.276,9.321l0.009,0.007L9.276,9.321z
M9.375,9.397L9.392,9.41L9.375,9.397z M9.417,9.429l0.012,0.009L9.417,9.429z M24.813,13.272l0.008-0.063
C24.818,13.23,24.814,13.251,24.813,13.272z M24.826,13.142l0.041-0.42L24.826,13.142z M24.941,11.994l0.02-0.208L24.941,11.994z
M24.971,11.697l0.012-0.127L24.971,11.697z M24.998,11.409l0.018-0.161L24.998,11.409z M25.027,11.124l0.014-0.146L25.027,11.124z
M25.043,10.959l0.033-0.332L25.043,10.959z M25.092,10.481l0.025-0.258L25.092,10.481z M25.148,9.904l0.002-0.017L25.148,9.904z
M25.164,9.753l0.002-0.03L25.164,9.753z M25.178,9.605l0.006-0.059L25.178,9.605z M25.219,9.207l0.008-0.079L25.219,9.207z
M25.229,9.105l0.002-0.017L25.229,9.105z M25.236,9.019l0.01-0.087L25.236,9.019z M25.25,8.887l0.006-0.057L25.25,8.887z
M25.262,8.772v-0.01V8.772z M25.273,8.656l0.002-0.034L25.273,8.656z M25.279,8.596V8.588V8.596z M25.279,8.584l0.002-0.01
C25.281,8.578,25.279,8.581,25.279,8.584z"/>
<path fill="#E37051" d="M20.48,28.252l-4.91,13.578H29.51C29.51,41.83,28.432,31.852,20.48,28.252z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="close">
<path d="M959.292416 127.2576 897.709056 65.163264 509.898752 450.018304 125.151232 65.29024 63.310848 127.1296 448.509952 512.347136 63.310848 897.565696 125.151232 959.404032 509.898752 574.675968 897.709056 959.531008 959.292416 897.437696 571.247616 512.347136Z" p-id="2397"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="wxicon">
<path d="M199.111111 621.985185l-9.481481-7.585185c-72.059259-47.407407-113.777778-117.57037-113.777778-191.525926C75.851852 284.444444 218.074074 170.666667 394.42963 170.666667s318.577778 113.777778 318.577777 252.207407S568.888889 673.185185 394.42963 673.185185c-36.02963 0-72.059259-5.688889-106.192593-15.17037l-5.688889-1.896296-92.918518 41.718518 9.481481-75.851852z" fill="#73cf2c" p-id="7585"></path>
<path d="M394.42963 189.62963c164.977778 0 299.614815 104.296296 299.614814 233.244444s-134.637037 233.244444-299.614814 233.244445c-34.133333 0-68.266667-3.792593-100.503704-13.274075l-13.274074-3.792592-13.274074 5.688889-54.992593 24.651852 3.792593-32.237037 3.792592-22.755556-18.962963-13.274074C132.740741 553.718519 94.814815 489.244444 94.814815 422.874074 94.814815 293.925926 229.451852 189.62963 394.42963 189.62963m0-37.925926C208.592593 151.703704 56.888889 273.066667 56.888889 422.874074c0 83.437037 47.407407 159.288889 121.362963 208.592593l-13.274074 98.607407 115.674074-51.2c34.133333 9.481481 72.059259 15.17037 111.881481 15.17037 185.837037 0 337.540741-121.362963 337.540741-271.17037S580.266667 151.703704 394.42963 151.703704z" fill="#b4b4b4" p-id="7586"></path>
<path d="M246.518519 341.333333a37.925926 37.925926 0 1 0 75.851851 0 37.925926 37.925926 0 1 0-75.851851 0Z" fill="#1c6514" p-id="7587"></path>
<path d="M455.111111 341.333333a37.925926 37.925926 0 1 0 75.851852 0 37.925926 37.925926 0 1 0-75.851852 0Z" fill="#1c6514" p-id="7588"></path>
<path d="M781.274074 821.096296l-3.792593 1.896297c-28.444444 9.481481-60.681481 13.274074-91.022222 13.274074-146.014815 0-263.585185-96.711111-263.585185-216.177778 0-119.466667 117.57037-216.177778 263.585185-216.177778S948.148148 502.518519 948.148148 620.088889c0 54.992593-26.548148 108.088889-73.955555 149.807407l-9.481482 7.585185 18.962963 68.266667-102.4-24.651852z" fill="#fff" p-id="7589"></path>
<path d="M684.562963 424.77037C819.2 424.77037 929.185185 512 929.185185 620.088889c0 49.303704-24.651852 98.607407-66.37037 134.637037l-18.962963 15.17037 7.585185 22.755556 7.585185 24.651852-66.37037-15.170371-9.481482-1.896296-9.481481 3.792593c-28.444444 7.585185-56.888889 13.274074-85.333333 13.274074-134.637037 0-244.622222-89.125926-244.622223-197.214815-3.792593-108.088889 106.192593-195.318519 240.82963-195.318519m0-37.925926c-155.496296 0-282.548148 104.296296-282.548148 235.140741 0 128.948148 127.051852 235.140741 282.548148 235.140741 34.133333 0 66.37037-5.688889 96.711111-15.17037l130.844445 32.237037-24.651852-87.22963c49.303704-41.718519 79.644444-100.503704 79.644444-163.081482 0-132.740741-127.051852-237.037037-282.548148-237.037037z" fill="#b4b4b4" p-id="7590"></path>
<path d="M568.888889 549.925926a37.925926 37.925926 0 1 0 75.851852 0 37.925926 37.925926 0 1 0-75.851852 0Z" fill="#636766" p-id="7591"></path>
<path d="M786.962963 549.925926m-37.925926 0a37.925926 37.925926 0 1 0 75.851852 0 37.925926 37.925926 0 1 0-75.851852 0Z" fill="#636766" p-id="7592"></path>
</symbol>
<symbol viewBox="0 0 28.8 32" id="wxcollect">
<path d="M14.72,16.773L28.8,8.96v15.226L14.72,32V16.773z M14.399,0l14.4,7.68L14.399,16L0,7.68L14.399,0z M14.08,32
L0,24.533V8.96l14.08,8V32z"/>
</symbol>
<symbol viewBox="0 0 33.81 33.82" id="voiceinput">
<path d="M12.983,6.658c1.06-1.06,2.126-2.114,3.178-3.183c0.87-0.884,1.784-1.706,2.889-2.292
c1.592-0.845,3.285-1.236,5.084-1.177c2.059,0.067,3.932,0.696,5.582,1.925c2.164,1.61,3.508,3.75,3.949,6.421
c0.394,2.388-0.017,4.642-1.238,6.738c-0.48,0.826-1.084,1.554-1.773,2.218c-0.75,0.724-1.472,1.478-2.209,2.214
c-1.49,1.493-2.988,2.979-4.473,4.479c-0.871,0.884-1.782,1.707-2.889,2.293c-1.889,0.996-3.893,1.359-6.008,1.104
c-1.906-0.231-3.608-0.958-5.082-2.178c-1.929-1.599-3.13-3.636-3.531-6.119c-0.384-2.392,0.028-4.642,1.254-6.735
c0.499-0.852,1.136-1.59,1.846-2.277c1.16-1.123,2.289-2.278,3.431-3.42C12.991,6.665,12.987,6.661,12.983,6.658z"/>
<path d="M2.291,29.287c0.431-0.432,0.86-0.866,1.296-1.293c0.105-0.103,0.111-0.17,0.019-0.287
c-2.713-3.426-3.899-7.323-3.546-11.671c0.242-2.991,1.256-5.718,3.039-8.137c0.539-0.73,1.153-1.41,1.779-2.069
c0.418-0.44,1.219-0.486,1.756-0.194c0.626,0.34,0.936,1.031,0.78,1.728c-0.03,0.135-0.026,0.277-0.056,0.413
C7.347,7.83,7.292,7.877,7.249,7.918c-3.922,3.668-5.174,9.463-3.151,14.486c0.796,1.976,1.982,3.688,3.629,5.043
c4.073,3.354,8.611,4.078,13.543,2.25c1.773-0.658,3.305-1.73,4.587-3.131c0.144-0.154,0.287-0.076,0.425-0.121
c0.658-0.217,1.233-0.068,1.697,0.457c0.316,0.359,0.418,0.786,0.344,1.252c-0.058,0.35-0.189,0.655-0.459,0.916
c-1.841,1.788-3.955,3.129-6.4,3.918c-3.772,1.217-7.514,1.098-11.207-0.352c-1.512-0.594-2.896-1.413-4.155-2.438
c-0.132-0.107-0.203-0.074-0.305,0.028c-0.833,0.841-1.664,1.683-2.509,2.509c-0.807,0.789-2.05,0.575-2.549-0.426
c-0.285-0.568-0.167-1.286,0.308-1.777C1.455,30.113,1.875,29.703,2.291,29.287L2.291,29.287z"/>
</symbol>
<symbol viewBox="0 0 20.83 16.3" id="banktransfer">
<path d="M6.295-0.001L0.001,6.195h20.828V3.558H6.308L6.295-0.001z"/>
<path d="M0.001,12.742h14.522l0.009,3.559l6.297-6.195H0.001V12.742z"/>
</symbol>
<symbol viewBox="0 0 21.13 23.98" id="redbag">
<path d="M20.537,14.687c0.326,0,0.59-0.3,0.59-0.669V2.541c0-0.241-0.039-0.469-0.094-0.689
c0,0-0.016-0.062-0.021-0.083C21,1.719,20.957,1.572,20.957,1.572c-0.336-0.921-1.133-1.57-2.066-1.57H2.239
c-0.425,0-0.819,0.142-1.159,0.376L1.051,0.359L1.003,0.426c-0.603,0.455-1,1.231-1,2.114v18.899c0,1.402,1.002,2.539,2.237,2.539
h16.651c1.234,0,2.236-1.137,2.236-2.539v-2.113c-0.002-0.368-0.264-0.666-0.59-0.666c-0.322,0-0.586,0.298-0.588,0.666v0.002v0.002
v0.001v1.976c0,0.737-0.527,1.336-1.176,1.336H7.227H7.226H2.357c-0.65,0-1.178-0.599-1.178-1.336V2.674
c0-0.206,0.044-0.396,0.116-0.57L8.38,6.497c0,0.001,0,0.003,0,0.005c0,1.206,0.978,2.184,2.185,2.184
c1.174,0,2.13-0.925,2.181-2.085l7.186-4.118c0.01,0.063,0.018,0.125,0.018,0.192v11.343C19.949,14.387,20.213,14.687,20.537,14.687
L20.537,14.687z M12.373,5.276c-0.392-0.579-1.056-0.959-1.808-0.959c-0.743,0-1.399,0.371-1.794,0.938L2.593,1.338h16.178
c0.127,0,0.244,0.027,0.357,0.069L12.373,5.276L12.373,5.276z"/>
<path d="M5.7,15.859c0.093-0.074,0.175-0.159,0.247-0.257c0.18-0.245,0.271-0.524,0.271-0.827
c0-0.52-0.157-0.923-0.466-1.201c-0.303-0.271-0.757-0.409-1.348-0.409H3.222c-0.295,0-0.478,0.187-0.478,0.485v4.93
c0,0.301,0.183,0.486,0.478,0.486h1.646c0.547,0,0.988-0.162,1.311-0.482c0.323-0.319,0.487-0.76,0.487-1.307
c0-0.428-0.136-0.783-0.404-1.055C6.109,16.07,5.921,15.947,5.7,15.859L5.7,15.859z M5.189,15.349
c-0.18,0.146-0.444,0.22-0.786,0.22H3.52v-1.659h0.883c0.355,0,0.621,0.076,0.792,0.227c0.166,0.146,0.246,0.347,0.246,0.615
C5.441,15.016,5.358,15.211,5.189,15.349L5.189,15.349z M3.52,16.313h0.883c0.499,0,0.881,0.09,1.136,0.266
c0.235,0.163,0.349,0.41,0.349,0.756c0,0.348-0.092,0.59-0.28,0.744c-0.199,0.162-0.533,0.244-0.993,0.244H3.52V16.313L3.52,16.313z
"/>
<path d="M10.584,17.904c-0.076-0.034-0.162-0.037-0.252-0.008c-0.075,0.025-0.146,0.077-0.22,0.158l-0.003,0.004
c-0.15,0.172-0.314,0.291-0.489,0.353C9.434,18.477,9.208,18.51,8.95,18.51c-0.183,0-0.344-0.043-0.493-0.131
c-0.156-0.092-0.292-0.213-0.403-0.359c-0.113-0.15-0.201-0.321-0.262-0.511c-0.039-0.122-0.065-0.245-0.077-0.365h2.521
c0.203,0,0.349-0.06,0.435-0.175c0.074-0.101,0.109-0.254,0.109-0.482c0-0.267-0.036-0.529-0.105-0.779
c-0.072-0.256-0.183-0.486-0.331-0.682c-0.151-0.201-0.347-0.363-0.583-0.482c-0.236-0.119-0.515-0.18-0.828-0.18
c-0.332,0-0.63,0.072-0.885,0.217c-0.25,0.143-0.462,0.333-0.627,0.568c-0.162,0.229-0.286,0.494-0.368,0.787
c-0.081,0.287-0.121,0.586-0.121,0.885c0,0.294,0.039,0.586,0.117,0.868c0.08,0.288,0.203,0.549,0.365,0.773
c0.166,0.229,0.377,0.416,0.627,0.556c0.255,0.141,0.555,0.212,0.892,0.212c0.284,0,0.542-0.034,0.767-0.103
c0.221-0.066,0.412-0.147,0.566-0.24c0.163-0.096,0.286-0.197,0.375-0.305c0.107-0.132,0.155-0.235,0.155-0.336
c0-0.066-0.017-0.13-0.049-0.189C10.71,17.988,10.654,17.937,10.584,17.904L10.584,17.904z M8.909,15.082
c0.231,0,0.417,0.045,0.555,0.135c0.146,0.095,0.256,0.211,0.338,0.355c0.085,0.148,0.145,0.32,0.176,0.508
c0.021,0.128,0.036,0.254,0.044,0.377H7.719c0.011-0.1,0.028-0.206,0.054-0.318c0.041-0.183,0.112-0.356,0.211-0.516
c0.096-0.154,0.223-0.287,0.378-0.393C8.508,15.131,8.688,15.082,8.909,15.082L8.909,15.082z"/>
<path d="M13.961,18.189c-0.066-0.033-0.141-0.039-0.221-0.02c-0.049,0.012-0.102,0.033-0.164,0.066
c-0.043,0.022-0.086,0.043-0.129,0.063c-0.08,0.035-0.16,0.064-0.24,0.09c-0.066,0.021-0.162,0.031-0.281,0.031
c-0.152,0-0.262-0.026-0.316-0.077c-0.068-0.062-0.113-0.137-0.139-0.23c-0.029-0.11-0.041-0.232-0.037-0.364
c0.006-0.155,0.008-0.301,0.008-0.43v-1.983h1.127c0.129,0,0.23-0.019,0.311-0.055c0.127-0.058,0.201-0.179,0.201-0.334
c0-0.206-0.125-0.349-0.326-0.37c-0.105-0.012-0.24-0.018-0.404-0.018h-0.908v-0.557c0-0.137-0.018-0.232-0.059-0.305
c-0.041-0.071-0.131-0.158-0.32-0.158c-0.197,0-0.289,0.101-0.326,0.16c-0.048,0.076-0.071,0.178-0.071,0.311v0.549h-0.255
c-0.335,0-0.454,0.2-0.454,0.388c0,0.188,0.119,0.389,0.454,0.389h0.255v2.545c0,0.442,0.11,0.769,0.329,0.97
c0.214,0.198,0.498,0.299,0.841,0.299c0.133,0,0.271-0.016,0.412-0.045c0.143-0.031,0.271-0.072,0.387-0.123
c0.123-0.055,0.227-0.121,0.307-0.195c0.107-0.099,0.162-0.209,0.162-0.326C14.104,18.287,14.016,18.217,13.961,18.189
L13.961,18.189z"/>
<path d="M18.059,14.428c-0.188,0-0.389,0.121-0.389,0.462v0.042c-0.057-0.061-0.119-0.119-0.186-0.174
c-0.135-0.109-0.291-0.2-0.465-0.268c-0.178-0.068-0.369-0.104-0.572-0.104c-0.275-0.005-0.537,0.041-0.783,0.137
c-0.252,0.098-0.475,0.252-0.662,0.459c-0.186,0.203-0.336,0.462-0.445,0.769c-0.107,0.303-0.162,0.659-0.162,1.062
c0,0.335,0.047,0.648,0.141,0.934c0.094,0.289,0.23,0.543,0.406,0.755c0.178,0.214,0.393,0.384,0.637,0.504
c0.248,0.122,0.521,0.185,0.818,0.185c0.414,0,0.758-0.107,1.025-0.316c0.082-0.065,0.16-0.137,0.232-0.214v0.019
c0,0.341,0.205,0.462,0.396,0.462s0.396-0.121,0.396-0.462V14.89C18.447,14.549,18.246,14.428,18.059,14.428L18.059,14.428z
M16.486,18.445c-0.207,0-0.393-0.039-0.549-0.115s-0.285-0.182-0.393-0.32c-0.109-0.143-0.195-0.316-0.256-0.515
c-0.063-0.202-0.094-0.433-0.094-0.683s0.025-0.484,0.076-0.699c0.049-0.205,0.125-0.383,0.229-0.529
c0.102-0.143,0.229-0.251,0.389-0.332c0.158-0.08,0.354-0.121,0.58-0.121c0.188,0,0.35,0.041,0.492,0.127
c0.148,0.088,0.275,0.209,0.377,0.359c0.107,0.158,0.189,0.342,0.246,0.547c0.057,0.211,0.086,0.432,0.086,0.656
c0,0.227-0.027,0.445-0.078,0.65c-0.051,0.199-0.129,0.373-0.229,0.52c-0.098,0.141-0.217,0.25-0.365,0.334
C16.855,18.404,16.684,18.445,16.486,18.445L16.486,18.445z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="positions">
<path d="M512 1024c0 0-358.4-494.1312-358.4-682.6496C153.6 152.7808 314.0608 0 512 0c197.9392 0 358.4 152.7808 358.4 341.3504C870.4 529.8688 512 1024 512 1024zM512 204.8C427.1616 204.8 358.4 273.5616 358.4 358.4s68.7616 153.6 153.6 153.6c84.7872 0 153.6-68.7616 153.6-153.6S596.7872 204.8 512 204.8z" p-id="59319"></path>
</symbol>
<symbol viewBox="0 0 28.07 16.84" id="camera">
<path d="M27.078,0.246c0,0-7.715,6.128-8.365,6.938V1.202C18.713,0.538,18.189,0,17.545,0H1.17
C0.524,0,0.001,0.538,0.001,1.202v14.437c0,0.664,0.523,1.201,1.168,1.201h16.375c0.645,0,1.168-0.537,1.168-1.201V9.732
c0.65,0.701,8.365,6.984,8.365,6.984c1.186,0,0.977-0.23,0.977-1.449V1.833C28.055,0.613,28.264,0.246,27.078,0.246L27.078,0.246z"
/>
</symbol>
<symbol viewBox="0 0 31.94 24.71" id="shot">
<path d="M16.001,7.751c-3.2,0-5.824,2.624-5.824,5.824c0,3.2,2.624,5.824,5.824,5.824s5.824-2.624,5.824-5.824
C21.825,10.375,19.201,7.751,16.001,7.751z M29.953,3.399h-6.336c-0.513-0.32-1.024-0.96-1.601-2.048
c-0.64-1.344-2.943-1.344-2.943-1.344h-7.36c0,0-0.768-0.192-1.664,1.344C9.473,2.375,8.897,3.015,8.385,3.399H2.049
c-1.152,0-2.048,0.96-2.048,2.176v16.96c0,1.217,0.896,2.176,2.048,2.176H29.89c1.151,0,2.047-0.959,2.047-2.176V5.575
C32.001,4.359,31.104,3.399,29.953,3.399z M16.001,20.871c-4.032,0-7.296-3.264-7.296-7.296c0-4.032,3.264-7.296,7.296-7.296
s7.296,3.264,7.296,7.296C23.233,17.607,20.033,20.871,16.001,20.871z M26.433,7.751c-0.64,0-1.216-0.512-1.216-1.216
c0-0.64,0.513-1.216,1.216-1.216c0.641,0,1.217,0.512,1.217,1.216C27.649,7.239,27.073,7.751,26.433,7.751z"/>
</symbol>
<symbol viewBox="0 0 28.12 23.44" id="personimg">
<path d="M-0.001,0.002v23.435h28.123V0.002H-0.001z M25.777,21.094H2.342V2.346h23.436V21.094z"/>
<path d="M17.574,8.205c0,1.294,1.05,2.344,2.344,2.344c1.295,0,2.344-1.049,2.344-2.344s-1.049-2.343-2.344-2.343
C18.624,5.861,17.574,6.91,17.574,8.205z"/>
<path d="M23.434,15.059l-4.777-2.899l-3.99,1.79L9.22,9.109L4.686,12.33v6.42h18.748V15.059z"/>
</symbol>
<symbol viewBox="0 0 42.17 42.17" id="addthing">
<path fill="#6b7278" d="M21.085,42.171c-2.846,0-5.608-0.559-8.208-1.658c-2.511-1.062-4.766-2.582-6.702-4.518
c-1.937-1.937-3.457-4.191-4.519-6.703C0.557,26.692,0,23.931,0,21.085c0-2.846,0.558-5.607,1.657-8.208
c1.062-2.511,2.582-4.766,4.519-6.702c1.936-1.936,4.191-3.457,6.702-4.519C15.477,0.557,18.239,0,21.085,0
c2.847,0,5.607,0.558,8.208,1.657c2.51,1.062,4.766,2.583,6.701,4.519c1.937,1.937,3.457,4.191,4.52,6.702
c1.1,2.6,1.656,5.361,1.656,8.208c0,2.846-0.557,5.607-1.656,8.207c-1.063,2.512-2.583,4.767-4.52,6.703
c-1.936,1.936-4.191,3.456-6.701,4.518C26.692,41.612,23.932,42.171,21.085,42.171z M21.085,1.185c-2.687,0-5.293,0.526-7.746,1.563
c-2.37,1.002-4.498,2.438-6.326,4.265c-1.828,1.828-3.263,3.956-4.265,6.326c-1.038,2.453-1.564,5.06-1.564,7.746
c0,2.688,0.526,5.293,1.564,7.746c1.002,2.369,2.437,4.498,4.265,6.326c1.828,1.828,3.956,3.263,6.326,4.265
c2.453,1.038,5.059,1.563,7.746,1.563c2.687,0,5.293-0.525,7.746-1.563c2.37-1.002,4.498-2.437,6.325-4.265
c1.828-1.828,3.264-3.957,4.266-6.326c1.037-2.453,1.564-5.059,1.564-7.746c0-2.687-0.527-5.293-1.564-7.746
c-1.002-2.37-2.438-4.498-4.266-6.326c-1.827-1.828-3.955-3.263-6.325-4.265C26.378,1.71,23.771,1.185,21.085,1.185z"/>
<path fill="#6b7278" d="M22.954,19.2c3.634,0,7.188,0,10.776,0c0,1.247,0,2.468,0,3.748c-3.561,0-7.133,0-10.756,0
c0,3.62,0,7.183,0,10.761c-1.275,0-2.5,0-3.774,0c0-3.575,0-7.137,0-10.742c-3.613,0-7.177,0-10.762,0c0-1.268,0-2.489,0-3.751
c3.574,0,7.138,0,10.747,0c0-3.603,0-7.166,0-10.752c1.27,0,2.494,0,3.769,0C22.954,12.025,22.954,15.587,22.954,19.2z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="face">
<path fill="#6b7278" d="M512 0C229.22752 0 0 229.22752 0 512s229.22752 512 512 512 512-229.22752 512-512S794.77248 0 512 0z m0 986.07616c-261.82144 0-474.07616-212.25472-474.07616-474.07616S250.17856 37.92384 512 37.92384 986.07616 250.17856 986.07616 512 773.82144 986.07616 512 986.07616zM246.51776 407.7056c0 36.65408 29.71648 66.37056 66.37056 66.37056 36.65408 0 66.37056-29.71648 66.37056-66.37056 0-36.6592-29.71648-66.37056-66.37056-66.37056-36.65408 0-66.37056 29.71136-66.37056 66.37056z m398.22336 0c0 36.65408 29.71648 66.37056 66.37056 66.37056 36.6592 0 66.37056-29.71648 66.37056-66.37056 0-36.6592-29.71136-66.37056-66.37056-66.37056-36.6592 0-66.37056 29.71136-66.37056 66.37056z m-372.64896 218.07616c25.68192 108.71808 123.3408 189.62944 239.90784 189.62944 116.57216 0 214.23104-80.91136 239.90784-189.62944H272.09216z" fill="" p-id="52491"></path>
</symbol>
<symbol viewBox="0 0 22.12 22.12" id="voice">
<path fill="#6b7278" d="M6.36,11.064l1.329,1.329c0.734-0.733,0.734-1.924,0-2.659L6.36,11.064z"/>
<path fill="#6b7278" d="M10.348,7.075L9.284,8.138c1.616,1.615,1.616,4.233,0,5.848l1.064,1.064
C12.551,12.848,12.551,9.277,10.348,7.075z"/>
<path fill="#6b7278" d="M11.943,5.48c3.084,3.083,3.084,8.083,0,11.167l1.064,1.063c3.67-3.67,3.67-9.622,0-13.292L11.943,5.48z"/>
<path fill="#6b7278" d="M18.883,3.241c-2.09-2.089-4.867-3.24-7.823-3.24c-2.955,0-5.732,1.15-7.822,3.24s-3.24,4.867-3.24,7.822
c0,2.953,1.15,5.732,3.24,7.82c2.089,2.09,4.867,3.24,7.822,3.24c2.956,0,5.733-1.15,7.823-3.24c2.088-2.088,3.238-4.867,3.238-7.82
C22.121,8.108,20.971,5.331,18.883,3.241z M11.06,21.748c-5.892,0-10.686-4.795-10.686-10.685c0-5.892,4.793-10.686,10.686-10.686
c5.893,0,10.686,4.793,10.686,10.686C21.746,16.953,16.953,21.748,11.06,21.748z"/>
</symbol>
<symbol viewBox="0 0 120 180" id="trigon-left">
<path fill="#fff" d="M104.555,178.368l-1.313-1.013l-97.863-76.5C2.064,98.269,0,94.387,0,90.056c0-4.332,2.126-8.212,5.378-10.8
l97.676-76.443l1.626-1.294C106.243,0.563,108.119,0,110.12,0c5.44,0,9.88,4.162,9.88,9.338l0,0v161.324l0,0
c0,5.175-4.439,9.338-9.88,9.338C108.057,180,106.118,179.381,104.555,178.368L104.555,178.368z"/>
</symbol>
<symbol viewBox="0 0 120 180" id="trigon-right">
<path fill="#9fe658" d="M15.446,1.631l1.313,1.013l97.863,76.5c3.313,2.587,5.378,6.469,5.378,10.8c0,4.332-2.126,8.212-5.378,10.8
l-97.676,76.443l-1.626,1.294C13.757,179.438,11.881,180,9.88,180C4.44,180,0,175.838,0,170.662l0,0V9.337l0,0
C0,4.163,4.44,0,9.88,0C11.944,0,13.882,0.619,15.446,1.631L15.446,1.631z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="back">
<path d="M276.999778 473.347678l595.889619 0 0 77.289294L276.999778 550.636972 571.131749 810.473859l-56.592926 54.657854L149.378146 511.995907l28.297486-27.328415 336.861144-325.798181 56.592926 54.642504L276.999778 473.347678z" p-id="74556"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="search">
<path d="M1010.255261 935.96091l-0.028444-0.028443v0.028443h0.028444c9.130355 10.666302 13.709754 22.470343 13.709754 35.412124 0 14.477728-5.148269 26.850638-15.444806 37.147175A50.686268 50.686268 0 0 1 971.34459 1023.965015c-6.115347 0-12.003145-0.967078-17.720283-2.872791a47.216165 47.216165 0 0 1-15.444806-8.533042l-5.717138-4.579399-282.529014-284.5485c-67.837682 48.012582-143.724867 71.990429-227.604667 71.990429-8.390824 0-16.95231-0.369765-25.7129-1.109295a277.608293 277.608293 0 0 1-25.741342-3.441661 368.058536 368.058536 0 0 1-162.440673-59.446857c-53.359955-34.274385-96.053607-79.584836-128.080957-135.988243a370.902883 370.902883 0 0 1-36.03788-83.424705 408.39138 408.39138 0 0 1-16.013675-90.279582 387.172549 387.172549 0 0 1 5.148269-91.417321 377.331108 377.331108 0 0 1 50.344946-137.723295 380.374559 380.374559 0 0 1 98.357529-109.137604c33.563298-26.679977 71.108682-47.244608 112.664595-61.722336A384.925515 384.925515 0 0 1 422.328682 0c18.317596 0 35.838776 1.137739 52.648867 3.44166 44.96913 6.086903 88.032548 19.796657 129.218697 41.129262a381.483855 381.483855 0 0 1 107.54477 82.286966c35.810332 37.34628 63.059179 81.518993 81.74654 132.575026 18.687362 51.056033 26.907525 102.851597 24.603604 155.415134-3.043452 87.634339-33.165089 166.479645-90.364913 236.564362l283.638309 284.5485h-1.109295z m-251.639403-522.250601a320.557936 320.557936 0 0 0-22.868552-137.125981 323.572945 323.572945 0 0 0-40.048409-75.43209c-16.781649-23.608082-36.407645-44.741582-58.877988-63.428944a338.477324 338.477324 0 0 0-72.616186-46.305973 332.276647 332.276647 0 0 0-178.425904-28.557246 52.620424 52.620424 0 0 0-10.296537 1.137738l-6.88332 1.137739a324.568466 324.568466 0 0 0-135.533147 54.270146 323.260066 323.260066 0 0 0-98.926398 106.862127c-28.187481 46.448191-43.632287 98.272198-46.334417 155.415134-2.673686 57.142937 7.793511 110.104683 31.458481 158.856795a319.989067 319.989067 0 0 0 86.325939 114.285873 330.570039 330.570039 0 0 0 126.374349 67.439473c48.808999 13.709754 97.987763 16.38344 147.536293 7.992616a332.617969 332.617969 0 0 0 75.517419-22.840108 345.81574 345.81574 0 0 0 68.036787-39.422653 346.356166 346.356166 0 0 0 57.199823-53.72972c17.151414-20.194866 31.458481-42.096339 42.892757-65.704422v0.028444a328.152344 328.152344 0 0 0 35.46901-134.878948z" p-id="4136"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="add">
<path d="M0 484.9h1024v54.2H0v-54.2z" fill="#fff" p-id="40000"></path>
<path d="M484.9 0h54.2v1024h-54.2V0z" fill="#fff" p-id="40001"></path>
</symbol>
<symbol viewBox="0 0 41.95 33.63" id="computer">
<path fill="#373838" d="M1.76,26.26h38.428V1.603H1.76V26.26z M2.081,1.922h37.787v24.017H2.081V1.922z"/>
<path fill="#373838" d="M40.349,0.003H1.6c-0.883,0-1.6,0.715-1.6,1.6V26.1c0,0.887,0.717,1.602,1.6,1.602h16.973v3.396
l-5.765,0.625v1.904H29.14v-1.904l-5.764-0.625v-3.396h16.973c0.885,0,1.602-0.715,1.602-1.602V1.603
C41.95,0.718,41.233,0.003,40.349,0.003z M28.821,32.01v1.297H13.129v-1.299l5.765-0.621v-3.686h4.162v3.686L28.821,32.01z
M41.629,26.1c0,0.709-0.573,1.281-1.28,1.281H1.6c-0.704,0-1.281-0.572-1.281-1.281V1.603c0-0.706,0.577-1.281,1.281-1.281h38.749
c0.707,0,1.28,0.575,1.28,1.281V26.1z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="wxspeak">
<path d="M512 190.464c-205.824 0-372.736 143.36-372.736 321.536 0 66.56 23.552 128 63.488 179.2l-63.488 141.312 162.816-56.32c59.392 34.816 132.096 56.32 209.92 56.32 205.824 0 372.736-143.36 372.736-321.536 0-176.128-166.912-320.512-372.736-320.512z" fill="#fff" p-id="14668"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="onesweep">
<path d="M65.18307 216.824257c0 0-22.681582-149.579737 192.772468-153.814178C473.415728 58.775638 496.092193 245.039879 496.092193 245.039879l181.439352 0c0 0 42.517349 8.468882 41.104163 59.269895-1.417279 50.801013-35.438117 49.384757-35.438117 49.384757l-423.823751 0.010233c0 0-51.02614-1.417279-52.443419 57.847499-1.418302 59.269895 9.93528 148.144038-60.951187 148.168598-48.198745 0.020466-49.610908-57.863872-49.610908-57.863872L65.18307 216.824257 65.18307 216.824257zM65.18307 216.824257" p-id="83225"></path>
<path d="M958.954053 802.390763c0 0 22.679535 149.584853-192.774515 153.814178-215.46019 4.235464-238.136655-182.028776-238.136655-182.028776L346.603531 774.176165c0 0-42.522466-8.468882-41.10314-59.269895 1.416256-50.797943 35.437094-49.39499 35.437094-49.39499l423.819658 0c0 0 51.024094 1.415232 52.448536-57.854663 1.418302-59.264778-9.936303-148.135852 60.951187-148.162458 48.189535-0.013303 49.611931 57.854663 49.611931 57.854663L958.954053 802.390763 958.954053 802.390763zM958.954053 802.390763" p-id="83226"></path>
</symbol>
<symbol viewBox="0 0 36.42 36.42" id="onesweeptwo">
<path fill="#10aeff" d="M3.546,8.604c0,0-0.744-4.908,6.326-5.047c7.069-0.139,7.813,5.973,7.813,5.973h5.954
c0,0,1.395,0.278,1.349,1.945c-0.047,1.667-1.162,1.621-1.162,1.621l-13.907,0c0,0-1.674-0.047-1.721,1.898
c-0.046,1.945,0.326,4.86-2,4.86c-1.582,0.002-1.628-1.897-1.628-1.897L3.546,8.604L3.546,8.604z"/>
<path fill="#10aeff" d="M32.873,27.816c0,0,0.744,4.91-6.326,5.048c-7.069,0.14-7.813-5.974-7.813-5.974h-5.953
c0,0-1.396-0.277-1.349-1.943c0.047-1.667,1.163-1.622,1.163-1.622h13.906c0,0,1.675,0.047,1.721-1.897
c0.047-1.943-0.325-4.86,2-4.861c1.581,0,1.629,1.898,1.629,1.898L32.873,27.816L32.873,27.816z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="addfriend">
<path d="M815.663044 781.930779c-44.225247-92.710518-362.246301-85.757153-241.070474-226.907916 39.671535-46.6249 81.499176-109.61042 81.499176-177.099511 0-121.955586-81.158415-221.082234-180.976818-221.082234-99.722212 0-181.076078 99.126648-181.076078 221.082234 0 67.490114 25.568329 112.74276 76.650751 175.924755C454.934307 678.199253 179.477674 687.307701 137.846508 776.006859c-12.341073 26.348088-14.499226 46.774303-14.304797 70.328765 0 3.038196-0.289596 6.170536 1.226944 8.667404 1.517563 2.451842 3.869121 3.968381 6.418176 3.968381l686.876889 0c2.449795 0 4.848425-1.517563 6.317892-3.968381 1.517563-2.496867 1.224898-5.582135 1.224898-8.667404C826.098721 819.986513 822.569338 796.378839 815.663044 781.930779z" p-id="70862"></path>
<path d="M937.190889 491.418242l-91.044576 0 0-91.033319c0-12.592806-10.223852-22.772656-22.760376-22.772656-12.570293 0-22.760376 10.17985-22.760376 22.772656l0 91.033319-91.045599 0c-12.580526 0-22.772656 10.17985-22.772656 22.782889 0 12.536524 10.19213 22.762423 22.772656 22.762423l91.045599 0 0 91.044576c0 12.558014 10.190083 22.738887 22.760376 22.738887 12.536524 0 22.760376-10.17985 22.760376-22.738887l0-91.044576 91.044576 0c12.580526 0 22.760376-10.224876 22.760376-22.762423C959.952288 501.599116 949.771415 491.418242 937.190889 491.418242z" p-id="70863"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="receipt">
<path d="M512.325632 64.024576c-247.600128 0-448.321536 200.722432-448.321536 448.32256 0 247.600128 200.722432 448.321536 448.321536 448.321536s448.321536-200.722432 448.321536-448.321536C960.647168 264.747008 759.92576 64.024576 512.325632 64.024576zM704.043008 472.11008l0 64.004096L576.03584 536.114176l0 64.003072 128.008192 0 0 64.004096L576.03584 664.121344l0 103.9872L448.026624 768.108544l0-103.9872L320.018432 664.121344l0-64.004096 128.008192 0 0-64.003072L320.019456 536.114176l0-64.004096 117.02784 0L320.02048 355.08224l58.514432-58.514432 133.496832 133.49888 133.497856-133.497856 58.514432 58.514432L587.017216 472.11008 704.043008 472.11008z" p-id="73488"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="help">
<path d="M911.655306 176.355567 112.344694 176.355567c-26.438139 0-47.870264 21.430078-47.870264 47.869241l0 575.548338c0 26.437116 21.432125 47.871287 47.870264 47.871287l799.310611 0c26.438139 0 47.870264-21.434172 47.870264-47.871287l0-575.548338C959.52557 197.785645 938.093445 176.355567 911.655306 176.355567zM828.134077 347.707167 512.001023 573.518099l-316.136124-225.812979c-10.774391-7.695263-13.270235-22.669302-5.573949-33.444716l0.001023 0c7.696286-10.773368 22.669302-13.271258 33.443693-5.573949l288.265356 205.906603 288.263309-205.90251c10.774391-7.697309 25.747407-5.199419 33.443693 5.573949C841.404312 325.037864 838.909491 340.009857 828.134077 347.707167z" p-id="75418" ></path>
</symbol>
<symbol viewBox="0 0 28.51 47.54" id="phonemute">
<path fill="#383838" d="M21.791,48H2.979c-0.31,0-0.56-0.25-0.56-0.561c0-0.309,0.25-0.561,0.56-0.561h18.812
c0.309,0,0.561,0.252,0.561,0.561C22.352,47.75,22.1,48,21.791,48z"/>
<path fill="#383838" d="M21.791,48c-0.311,0-0.561-0.25-0.561-0.561c0-0.309,0.25-0.561,0.561-0.561
c1.025,0,1.859-0.834,1.859-1.859c0-0.311,0.252-0.561,0.561-0.561c0.311,0,0.561,0.25,0.561,0.561
C24.771,46.662,23.436,48,21.791,48z"/>
<path fill="#383838" d="M24.211,45.578c-0.309,0-0.559-0.25-0.559-0.559V2.983c0-0.31,0.25-0.56,0.559-0.56
c0.311,0,0.561,0.25,0.561,0.56v42.034C24.771,45.328,24.521,45.578,24.211,45.578z"/>
<path fill="#383838" d="M24.211,3.542c-0.309,0-0.559-0.251-0.559-0.561c0-1.026-0.836-1.86-1.861-1.86
c-0.311,0-0.561-0.251-0.561-0.561S21.48,0,21.791,0c1.643,0,2.98,1.337,2.98,2.981C24.771,3.292,24.521,3.542,24.211,3.542z"/>
<path fill="#383838" d="M21.791,1.122H2.979c-0.31,0-0.56-0.251-0.56-0.561S2.669,0,2.979,0h18.812c0.309,0,0.561,0.251,0.561,0.561
S22.1,1.122,21.791,1.122z"/>
<path fill="#383838" d="M0.558,3.542c-0.31,0-0.561-0.251-0.561-0.561C-0.002,1.338,1.335,0,2.979,0C3.289,0,3.54,0.251,3.54,0.561
s-0.251,0.56-0.561,0.56c-1.026,0-1.86,0.834-1.86,1.861C1.119,3.292,0.868,3.542,0.558,3.542z"/>
<path fill="#383838" d="M0.558,45.578c-0.31,0-0.561-0.25-0.561-0.559V2.983c0-0.31,0.251-0.56,0.561-0.56s0.56,0.25,0.56,0.56
v42.034C1.119,45.328,0.868,45.578,0.558,45.578z"/>
<path fill="#383838" d="M2.979,48c-1.644,0-2.981-1.338-2.981-2.982c0-0.309,0.251-0.559,0.561-0.559s0.56,0.25,0.56,0.559
c0,1.027,0.835,1.861,1.861,1.861c0.31,0,0.56,0.25,0.56,0.561C3.539,47.748,3.289,48,2.979,48z"/>
<path fill="#383838" d="M12.385,46.152c-1.209,0-2.193-0.982-2.193-2.193c0-1.209,0.984-2.191,2.193-2.191s2.193,0.982,2.193,2.191
C14.578,45.17,13.594,46.152,12.385,46.152z M12.385,42.889c-0.591,0-1.072,0.48-1.072,1.07c0,0.592,0.481,1.072,1.072,1.072
c0.591,0,1.072-0.48,1.072-1.072C13.457,43.369,12.976,42.889,12.385,42.889z"/>
<path fill="#383838" d="M14.689,3.542H9.769c-0.31,0-0.561-0.251-0.561-0.561s0.251-0.56,0.561-0.56h4.921
c0.309,0,0.559,0.25,0.559,0.56S14.998,3.542,14.689,3.542z"/>
<path fill="#383838" d="M21.793,41.164H2.976c-0.564,0-1.023-0.459-1.023-1.023V5.943c0-0.564,0.459-1.023,1.023-1.023h18.817
c0.564,0,1.023,0.459,1.023,1.023v34.197C22.816,40.705,22.357,41.164,21.793,41.164z M2.976,5.668C2.824,5.668,2.7,5.792,2.7,5.943
v34.197c0,0.152,0.124,0.275,0.276,0.275h18.817c0.152,0,0.277-0.123,0.277-0.275V5.943c0-0.152-0.125-0.275-0.277-0.275H2.976z"/>
<path fill="#383838" d="M9.419,16.4c0.834-0.96,1.919-1.213,2.545-1.264v-0.505c0-0.304,0.167-0.506,0.417-0.506
s0.417,0.202,0.417,0.506v0.505c3.088,0.152,3.629,3.034,3.629,5.056c0,2.124,0.418,4.399,1.377,5.814
c0.959,1.416,0,1.72-0.542,1.72h-1.335l-0.584-0.961h1.001c1.001,0,0.876,0.049,0.251-1.112c-0.627-1.163-1.086-3.489-1.086-5.309
s-0.333-4.298-3.128-4.197c-0.042,0-1.544-0.152-2.462,1.163L9.419,16.4z M8.501,18.322c-0.125,0.506-0.167,1.112-0.167,1.77
c0,2.326-0.5,4.5-1.293,5.764c-0.793,1.213-0.542,1.819,0.25,1.819h6.634l-0.584-1.011H8.126c-0.835,0-0.25-0.404,0.083-1.213
c0.375-0.809,1.001-3.186,1.001-5.208c0-0.253,0-0.505,0.042-0.758L8.501,18.322z M12.381,29.749c1.251,0,1.251-1.518,1.251-1.518
h-2.503C11.129,28.231,11.129,29.749,12.381,29.749z M7.75,16.147c-0.125-0.202-0.084-0.556,0.083-0.708
c0.208-0.151,0.458-0.101,0.584,0.101l7.593,13.147c0.126,0.201,0.083,0.555-0.083,0.707c-0.209,0.152-0.459,0.101-0.584-0.102
L7.75,16.147z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="mute">
<path d="M298.164706 198.776471c60.235294-57.223529 138.541176-72.282353 183.717647-75.294118v-30.117647c0-18.070588 12.047059-30.117647 30.117647-30.117647s30.117647 12.047059 30.117647 30.117647v30.117647c222.870588 9.035294 262.023529 180.705882 262.023529 301.176471 0 126.494118 30.117647 262.023529 99.388236 346.352941 69.270588 84.329412 0 102.4-39.152941 102.4h-96.376471l-42.164706-57.22353h72.282353c72.282353 0 63.247059 3.011765 18.070588-66.258823s-78.305882-207.811765-78.305882-316.235294c0-108.423529-24.094118-256-225.882353-249.976471-3.011765 0-111.435294-9.035294-177.694118 69.270588l-36.141176-54.211764z m-66.258824 114.447058c-9.035294 30.117647-12.047059 66.258824-12.047058 105.411765 0 138.541176-36.141176 268.047059-93.364706 343.341177-57.223529 72.282353-39.152941 108.423529 18.070588 108.423529h478.870588l-42.164706-60.235294h-376.470588c-60.235294 0-18.070588-24.094118 6.023529-72.282353 27.105882-48.188235 72.282353-189.741176 72.282353-310.211765 0-15.058824 0-30.117647 3.011765-45.17647l-54.211765-69.270589z m280.094118 680.658824c90.352941 0 90.352941-90.352941 90.352941-90.352941h-180.705882s0 90.352941 90.352941 90.352941z m-334.305882-810.164706c-9.035294-12.047059-6.023529-33.129412 6.023529-42.164706 15.058824-9.035294 33.129412-6.023529 42.164706 6.02353l548.141176 783.058823c9.035294 12.047059 6.023529 33.129412-6.023529 42.164706-15.058824 9.035294-33.129412 6.023529-42.164706-6.023529l-548.141176-783.058824z" fill="#bfbfbf" p-id="40671"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="lightmute">
<path d="M298.164706 198.776471c60.235294-57.223529 138.541176-72.282353 183.717647-75.294118v-30.117647c0-18.070588 12.047059-30.117647 30.117647-30.117647s30.117647 12.047059 30.117647 30.117647v30.117647c222.870588 9.035294 262.023529 180.705882 262.023529 301.176471 0 126.494118 30.117647 262.023529 99.388236 346.352941 69.270588 84.329412 0 102.4-39.152941 102.4h-96.376471l-42.164706-57.22353h72.282353c72.282353 0 63.247059 3.011765 18.070588-66.258823s-78.305882-207.811765-78.305882-316.235294c0-108.423529-24.094118-256-225.882353-249.976471-3.011765 0-111.435294-9.035294-177.694118 69.270588l-36.141176-54.211764z m-66.258824 114.447058c-9.035294 30.117647-12.047059 66.258824-12.047058 105.411765 0 138.541176-36.141176 268.047059-93.364706 343.341177-57.223529 72.282353-39.152941 108.423529 18.070588 108.423529h478.870588l-42.164706-60.235294h-376.470588c-60.235294 0-18.070588-24.094118 6.023529-72.282353 27.105882-48.188235 72.282353-189.741176 72.282353-310.211765 0-15.058824 0-30.117647 3.011765-45.17647l-54.211765-69.270589z m280.094118 680.658824c90.352941 0 90.352941-90.352941 90.352941-90.352941h-180.705882s0 90.352941 90.352941 90.352941z m-334.305882-810.164706c-9.035294-12.047059-6.023529-33.129412 6.023529-42.164706 15.058824-9.035294 33.129412-6.023529 42.164706 6.02353l548.141176 783.058823c9.035294 12.047059 6.023529 33.129412-6.023529 42.164706-15.058824 9.035294-33.129412 6.023529-42.164706-6.023529l-548.141176-783.058824z" fill="#7dd57e" p-id="40671"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="file">
<path d="M113.891556 93.639111C82.602667 93.639111 56.888889 119.239111 56.888889 150.641778v732.16a56.775111 56.775111 0 0 0 56.604444 57.059555h797.013334A56.832 56.832 0 0 0 967.111111 882.801778V278.641778a56.832 56.832 0 0 0-56.888889-57.002667H500.792889L380.472889 93.639111H113.891556zM0 150.641778C0 87.722667 51.313778 36.750222 113.891556 36.750222H405.048889l120.376889 128H910.222222c62.862222 0 113.777778 50.801778 113.777778 113.948445v604.16a113.720889 113.720889 0 0 1-113.493333 113.891555H113.493333A113.664 113.664 0 0 1 0 882.858667V150.698667z" p-id="50483" fill="#bfbfbf"></path>
<path d="M192 420.750222l640 0 0 64-640 0 0-64Z" p-id="50484" fill="#bfbfbf"></path>
</symbol>
<symbol viewBox="0 0 74 74" id="newfriend">
<rect id="_x3C_切片_x3E_" fill="#F39800" width="74" height="74"/>
<path display="none" fill="#FFFFFF" d="M46.52,52.104c0-2.297,1.049-4.348,2.689-5.69l-2.012-0.789c0,0-1.872-0.733-2.602-1.455
c-0.468-0.465-0.434-1.558-0.02-2.953c0.414-1.397,5.449-7.073,5.449-12.229c0-7.963-5.193-14.419-11.6-14.419
c-6.406,0-11.599,6.457-11.599,14.419c0,4.938,4.487,10.826,5.041,11.895c0.555,1.07,0.419,2.703-0.018,3.195
c-0.657,0.741-3.058,1.485-3.058,1.485l-8.855,3.979c-2.069,0.748-3.69,2.717-3.69,4.937v1.053c0,2.422,1.951,3.904,4.349,3.904
H35.45h5.091h13.126c-0.31,0-0.614-0.025-0.911-0.074C49.23,58.854,46.52,55.799,46.52,52.104z"/>
<path display="none" fill="#FFFFFF" d="M55.493,45.541c-3.595,0-6.511,2.938-6.511,6.563s2.916,6.563,6.511,6.563
c3.596,0,6.511-2.938,6.511-6.563S59.089,45.541,55.493,45.541L55.493,45.541z M59.21,53.041h-2.787v2.809h-1.856v-2.809h-2.789
v-1.873h2.789v-2.811h1.856v2.811h2.788L59.21,53.041L59.21,53.041z"/>
<path fill="#FFFFFF" d="M44.856,52.734c0-2.393,1.115-4.528,2.859-5.929l-2.137-0.822c0,0-1.991-0.765-2.764-1.515
c-0.499-0.484-0.463-1.623-0.023-3.079c0.44-1.454,5.793-7.368,5.793-12.739c0-8.295-5.521-15.021-12.328-15.021
c-6.808,0-12.327,6.726-12.327,15.022c0,5.145,4.769,11.277,5.358,12.394c0.589,1.113,0.445,2.814-0.02,3.327
c-0.698,0.773-3.25,1.549-3.25,1.549l-9.412,4.145c-2.199,0.78-3.922,2.83-3.922,5.141v1.098c0,2.523,2.074,4.067,4.623,4.067
h15.787h5.412h13.95c-0.329,0-0.653-0.026-0.969-0.078C47.738,59.767,44.856,56.584,44.856,52.734z"/>
<path fill="#FFFFFF" d="M54.395,45.898c-3.821,0-6.919,3.061-6.919,6.836c0,3.776,3.098,6.837,6.919,6.837
c3.822,0,6.92-3.061,6.92-6.837C61.314,48.959,58.217,45.898,54.395,45.898L54.395,45.898z M58.346,53.712h-2.962v2.926h-1.976
v-2.926h-2.962V51.76h2.962v-2.927h1.976v2.927h2.962V53.712L58.346,53.712z"/>
</symbol>
<symbol viewBox="0 0 74 74" id="groupchat">
<rect id="_x3C_切片_x3E_" fill="#46BF18" width="74" height="74"/>
<path display="none" fill="#FFFFFF" d="M46.52,52.104c0-2.297,1.049-4.348,2.689-5.69l-2.012-0.789c0,0-1.872-0.733-2.602-1.455
c-0.468-0.465-0.434-1.558-0.02-2.953c0.414-1.397,5.449-7.073,5.449-12.229c0-7.963-5.193-14.419-11.6-14.419
c-6.406,0-11.599,6.457-11.599,14.419c0,4.938,4.487,10.826,5.041,11.895c0.555,1.07,0.419,2.703-0.018,3.195
c-0.657,0.741-3.058,1.485-3.058,1.485l-8.855,3.979c-2.069,0.748-3.69,2.717-3.69,4.937v1.053c0,2.422,1.951,3.904,4.349,3.904
H35.45h5.091h13.126c-0.31,0-0.614-0.025-0.911-0.074C49.23,58.854,46.52,55.799,46.52,52.104z"/>
<path display="none" fill="#FFFFFF" d="M55.493,45.541c-3.595,0-6.511,2.938-6.511,6.563s2.916,6.563,6.511,6.563
c3.596,0,6.511-2.938,6.511-6.563S59.089,45.541,55.493,45.541L55.493,45.541z M59.21,53.041h-2.787v2.809h-1.856v-2.809h-2.789
v-1.873h2.789v-2.811h1.856v2.811h2.788L59.21,53.041L59.21,53.041z"/>
<path display="none" fill="#FFFFFF" d="M44.856,52.734c0-2.393,1.115-4.528,2.859-5.929l-2.137-0.822c0,0-1.991-0.765-2.764-1.515
c-0.499-0.484-0.463-1.623-0.023-3.079c0.44-1.454,5.793-7.368,5.793-12.739c0-8.295-5.521-15.021-12.328-15.021
c-6.808,0-12.327,6.726-12.327,15.022c0,5.145,4.769,11.277,5.358,12.394c0.589,1.113,0.445,2.814-0.02,3.327
c-0.698,0.773-3.25,1.549-3.25,1.549l-9.412,4.145c-2.199,0.78-3.922,2.83-3.922,5.141v1.098c0,2.523,2.074,4.067,4.623,4.067
h15.787h5.412h13.95c-0.329,0-0.653-0.026-0.969-0.078C47.738,59.767,44.856,56.584,44.856,52.734z"/>
<path display="none" fill="#FFFFFF" d="M54.395,45.898c-3.821,0-6.919,3.061-6.919,6.836c0,3.776,3.098,6.837,6.919,6.837
c3.822,0,6.92-3.061,6.92-6.837C61.314,48.959,58.217,45.898,54.395,45.898L54.395,45.898z M58.346,53.712h-2.962v2.926h-1.976
v-2.926h-2.962V51.76h2.962v-2.927h1.976v2.927h2.962V53.712L58.346,53.712z"/>
<path fill="#FFFFFF" d="M58.09,48.857l-8.881-3.848c0,0-1.693-0.732-2.35-1.453c-0.424-0.461-0.395-1.553-0.02-2.945
c0.375-1.394,4.928-7.056,4.928-12.198c0-7.945-4.695-14.385-10.486-14.385c-1.504,0-2.932,0.435-4.226,1.217
c0.158,0.033,0.316,0.069,0.474,0.111c4.836,1.276,8.492,7.114,8.492,14.123c0,5.144-4.553,10.805-4.926,12.2
c-0.375,1.393-0.404,2.486,0.018,2.945c0.656,0.719,2.354,1.453,2.354,1.453l8.879,3.848c1.871,0.75,3.338,2.77,3.338,4.986v1.049
c0,1.191-0.432,2.156-1.129,2.828h2.939c2.168,0,3.932-1.48,3.932-3.896v-1.049C61.426,51.629,59.961,49.605,58.09,48.857z"/>
<path fill="#FFFFFF" d="M49.436,50.045l-8.881-3.852c0,0-1.693-0.729-2.352-1.449c-0.424-0.463-0.393-1.555-0.018-2.947
c0.373-1.393,4.926-7.055,4.926-12.199c0-7.008-3.654-12.846-8.494-14.124c-0.156-0.041-0.313-0.078-0.472-0.108
c-0.497-0.1-1.004-0.151-1.521-0.151c-5.791,0-10.485,6.44-10.485,14.385c0,4.925,4.057,10.799,4.557,11.866
c0.5,1.068,0.379,2.695-0.017,3.188c-0.593,0.742-2.764,1.484-2.764,1.484l-8.006,3.969c-1.87,0.748-3.336,2.709-3.336,4.922v1.053
c0,2.414,1.765,3.893,3.932,3.893h13.428h4.604h14.3c1.098,0,2.092-0.379,2.807-1.068c0.695-0.668,1.127-1.633,1.127-2.824v-1.053
C52.771,52.814,51.305,50.791,49.436,50.045z"/>
</symbol>
<symbol viewBox="0 0 74 74" id="label">
<rect id="_x3C_切片_x3E_" fill="#2C79BF" width="74" height="74"/>
<path fill="#FFFFFF" d="M59.05,34.497l1.195-15.978c0.135-1.8-1.311-3.301-3.045-3.161l-15.381,1.239l-0.02-0.02L13.746,45.712
L31.017,63.65l28.052-29.134L59.05,34.497z M46.913,29.202c-1.459-1.513-1.459-3.968,0-5.483c1.459-1.514,3.82-1.514,5.281,0
c1.457,1.515,1.457,3.971,0,5.483C50.733,30.717,48.372,30.717,46.913,29.202z"/>
</symbol>
<symbol viewBox="0 0 74 74" id="accounts">
<rect id="_x3C_切片_x3E_" fill="#2C79BF" width="74" height="74"/>
<path display="none" fill="#FFFFFF" d="M59.05,34.497l1.195-15.978c0.135-1.8-1.311-3.301-3.045-3.161l-15.381,1.239l-0.02-0.02
L13.746,45.712L31.017,63.65l28.052-29.134L59.05,34.497z M46.913,29.202c-1.459-1.513-1.459-3.968,0-5.483
c1.459-1.514,3.82-1.514,5.281,0c1.457,1.515,1.457,3.971,0,5.483C50.733,30.717,48.372,30.717,46.913,29.202z"/>
<path fill="#FFFFFF" d="M44.596,44.691c0-4.939,7.495-8.069,7.495-19.528c0-9.675-6.143-15.235-13.807-15.235
c-7.662,0-13.804,5.56-13.804,15.235c0,11.459,7.491,14.589,7.491,19.528c0,7.998-16.945,5.789-16.945,13.563
c0,6.529,6.472,5.793,6.472,5.793h33.575c2.605,0,6.471-1.172,6.471-5.793C61.544,50.48,44.596,52.689,44.596,44.691z M38.271,61.24
l-4.106-5.701l2.736-9.977h2.736l2.736,9.977L38.271,61.24z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="friendcircle">
<path d="M512.611937 100.812033c-15.71082 0-31.142278 0.948605-46.324048 2.735298-37.20639 4.208858-72.869634 13.503549-106.395192 27.001981 0 0 276.437983 273.566586 283.798624 283.736202V122.55422c-8.239662-2.803859-16.654308-5.328355-25.140586-7.679913-33.766035-9.084912-69.292156-14.062274-105.938798-14.062274z" fill="#F95452" p-id="18474"></path>
<path d="M801.360294 219.657792c-11.081383-11.081383-22.690792-21.324678-34.681894-30.824029-29.315676-23.287379-61.08831-42.010813-94.299713-56.109926 0 0 2.034333 388.794957 0 401.210731l206.343555-206.303646a419.273109 419.273109 0 0 0-12.416797-23.146163c-17.499559-30.29805-39.027875-58.9496-64.945151-84.826967z" fill="#6467F0" p-id="18475"></path>
<path d="M891.937219 360.000144s-273.488815 276.404214-283.730063 283.765879H899.971196c2.803859-8.238638 5.332449-16.656355 7.643074-25.142634 9.115612-33.840736 14.100136-69.258387 14.100136-105.938797 0-15.678074-0.983397-31.142278-2.775207-46.325072-4.206812-37.207413-13.461593-72.869634-27.00198-106.359376z" fill="#5283F0" p-id="18476"></path>
<path d="M486.204497 674.485675l206.337416 206.304669a407.935899 407.935899 0 0 0 23.180955-12.412704c30.300097-17.432021 58.915831-38.995129 84.866876-64.945151 11.042497-11.047614 21.251-22.691815 30.788214-34.681894 23.24747-29.321816 42.013883-61.055564 56.107879-94.301759 0.001023 0.001023-388.828726 2.038426-401.28134 0.036839z" fill="#00B1FE" p-id="18477"></path>
<path d="M380.336308 609.680716V901.443733a418.766572 418.766572 0 0 0 25.143657 7.648191c33.806967 9.117658 69.261457 14.09502 105.944937 14.095019 15.636119 0 31.101345-0.982374 46.251393-2.735297a406.863475 406.863475 0 0 0 106.395193-27.03882c0.033769 0.001023-276.372491-273.489838-283.73518-283.73211z" fill="#65D020" p-id="18478"></path>
<path d="M351.298971 487.99426L145.030118 694.296883c3.860934 7.892761 8.035 15.608489 12.416797 23.180955 17.430998 30.368658 38.994106 58.983369 64.946174 84.900645 11.04659 11.082406 22.689768 21.286816 34.681894 30.790261 29.349445 23.322172 61.018725 42.011836 94.334505 56.105832-0.001023 0-2.106987-388.829749-0.110517-401.280316z" fill="#9AD122" p-id="18479"></path>
<path d="M116.345822 405.550573c-9.082866 33.806967-14.060227 69.261457-14.060228 105.943914 0 15.637142 0.982374 31.136138 2.769067 46.288232 4.209882 37.241182 13.430894 72.90545 27.037796 106.359377 0 0 273.461185-276.404214 283.700387-283.734157H123.991965c-2.804882 8.203846-5.330402 16.655332-7.646143 25.142634z" fill="#FFC817" p-id="18480"></path>
<path d="M306.309314 157.200298c-30.367635 17.463744-58.984393 39.032992-84.865853 64.910359-11.150968 11.118222-21.319561 22.760376-30.823006 34.681894-23.287379 29.320793-42.011836 61.089333-56.141648 94.368274 0 0 388.898311-2.069125 401.316132-0.068562L329.4872 144.788617c-7.851828 3.925403-15.604396 8.029884-23.177886 12.411681z" fill="#FF7612" p-id="18481"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="games">
<path d="M901.878638 549.462217 702.065823 549.462217c-10.923794 0-20.484543 7.099698-23.911596 17.47193-17.327644 52.438303-58.780755 93.892437-111.219057 111.220081-10.372232 3.427052-17.47193 12.988826-17.47193 23.911596l0 199.813838c0 22.545482 27.258831 33.836643 43.200918 17.894555l327.110059-327.110059C935.715281 576.721047 924.425144 549.462217 901.878638 549.462217z" p-id="101948" fill="#0aba08"></path>
<path d="M566.934147 345.845773c52.438303 17.327644 93.892437 58.780755 111.219057 111.220081 3.427052 10.372232 12.988826 17.47193 23.911596 17.47193l199.813838 0c22.545482 0 33.836643-27.258831 17.894555-43.200918l-327.110059-327.110059c-15.942087-15.942087-43.200918-4.650927-43.200918 17.894555l0 199.813838C549.462217 332.85797 556.561915 342.41872 566.934147 345.845773z" p-id="101949" fill="#00b1fe"></path>
<path d="M457.065853 678.153204c-52.438303-17.327644-93.892437-58.780755-111.220081-111.220081-3.427052-10.372232-12.988826-17.47193-23.911596-17.47193L122.120338 549.461193c-22.545482 0-33.836643 27.258831-17.894555 43.200918l327.110059 327.110059c15.942087 15.942087 43.200918 4.650927 43.200918-17.894555L474.53676 702.065823C474.537783 691.14203 467.438085 681.580257 457.065853 678.153204z" p-id="101950" fill="#f86161"></path>
<path d="M431.336866 104.225783l-327.110059 327.110059c-15.942087 15.942087-4.650927 43.200918 17.894555 43.200918l199.813838 0c10.923794 0 20.484543-7.099698 23.911596-17.47193 17.327644-52.438303 58.780755-93.892437 111.219057-111.220081 10.372232-3.427052 17.47193-12.988826 17.47193-23.911596L474.537783 122.120338C474.537783 99.574856 447.278953 88.283696 431.336866 104.225783z" p-id="101951" fill="#fcc015"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="shark">
<path d="M425.699509 257.07319 538.134486 226.403218C543.558005 224.92302 546.750291 219.347399 545.262802 213.949444 543.776333 208.551488 538.173254 205.373831 532.747694 206.853016L420.313738 237.522987C414.889198 239.002171 411.695894 244.579822 413.183381 249.977778 414.670872 255.375733 420.27497 258.552374 425.699509 257.07319L425.699509 257.07319 425.699509 257.07319ZM824.275102 707.751226 818.144566 685.494429C833.895827 668.661986 840.787451 644.352403 834.230462 620.541296 828.714104 600.515966 814.822712 585.025651 797.356451 576.740392 814.76456 559.475462 822.617235 533.656238 815.656237 508.387267 809.364506 485.548749 792.429781 468.466558 771.647787 460.944749 785.671808 443.928549 791.483013 420.642315 785.192301 397.803794 778.900571 374.964258 761.968907 357.883083 741.183853 350.362291 755.208893 333.345075 761.020098 310.059854 754.727347 287.221336 746.844066 258.60212 722.26071 239.014352 694.312653 235.97375L673.593912 160.766836C664.650614 128.306006 630.960728 109.205546 598.339016 118.105016L316.407848 195.010403C283.787158 203.907842 264.592635 237.43669 273.534912 269.895491L281.884437 300.206074C254.111858 316.764406 232.395336 339.782622 217.241927 361.01607 199.462457 385.929712 186.90144 440.627034 183.022542 469.921376 179.145685 499.216734 204.957391 554.967859 208.487372 562.363779 212.018373 569.758683 226.703499 593.247965 199.580804 622.195098 172.459128 651.143246 105.051806 691.082232 90.544199 706.183714 76.036592 721.286214 46.794888 772.36121 96.181965 816.106275 145.570064 859.852357 241.67939 937.665357 241.67939 937.665357 241.67939 937.665357 310.088574 988.109896 355.987501 924.319198L401.886427 860.526467 425.442414 820.772254C435.914011 850.843245 468.177622 868.078733 499.467939 859.541699L781.399104 782.637326C814.025915 773.738874 833.2184 740.210026 824.275102 707.751226L824.275102 707.751226 824.275102 707.751226ZM779.26071 680.549266 687.352674 705.622298C664.114995 711.958322 640.11419 698.35328 633.744922 675.230498 627.374634 652.106699 641.046675 628.224528 664.285374 621.885456L756.193411 596.813438C779.42905 590.475384 803.430874 604.081442 809.801162 627.204224 816.169411 650.330053 802.497366 674.21121 779.26071 680.549266L779.26071 680.549266 779.26071 680.549266ZM790.651528 515.208571C797.17179 538.875515 783.176336 563.319107 759.393859 569.806402L648.286197 600.114954C648.277013 600.114954 648.270893 600.116982 648.264771 600.119013 624.482294 606.607322 599.917304 592.683499 593.398062 569.014525 586.879842 545.348595 600.874275 520.905002 624.657773 514.416694L735.78584 484.104082C759.568318 477.615774 784.132286 491.542642 790.651528 515.208571L790.651528 515.208571 790.651528 515.208571ZM760.189635 404.624082C766.709896 428.290011 752.713422 452.734619 728.930944 459.221912L617.822261 489.531478C617.81512 489.533512 584.471088 498.627904 584.463947 498.630949 560.68045 505.118242 536.115459 491.192389 529.597238 467.525443 523.076978 443.858499 537.07345 419.414907 560.85593 412.927614L705.322926 373.519592C729.104382 367.032301 753.668354 380.958154 760.189635 404.624082L760.189635 404.624082 760.189635 404.624082ZM729.726722 294.040608C736.246982 317.706539 722.251528 342.151146 698.46803 348.638438L587.359346 378.945976C587.353226 378.948008 587.347104 378.950035 587.337923 378.952067 563.555445 385.440376 538.991475 371.513507 532.472234 347.847578 525.951973 324.180634 539.947427 299.737043 563.729904 293.249749L674.861032 262.935107C698.642488 256.448827 723.206461 270.37468 729.726722 294.040608L729.726722 294.040608 729.726722 294.040608ZM313.109459 283.428454C306.402496 259.083338 320.798899 233.937208 345.263907 227.26413L591.091331 160.205418C615.556341 153.532338 640.827326 167.85819 647.53225 192.203306L660.712544 240.044806 632.209483 247.820421C625.130138 237.034662 611.631533 231.512851 598.476746 235.100658L382.50112 294.015229C376.181843 295.739082 370.87667 299.316738 366.999813 303.990838 357.059757 297.55329 335.985978 286.055858 314.285779 287.697478L313.109459 283.428454 313.109459 283.428454 313.109459 283.428454ZM321.698739 444.726517 412.727341 775.170342 327.215098 895.756837C327.215098 895.756837 303.575451 931.929333 273.040101 910.535478 242.50475 889.141624 242.504749 889.141624 242.504749 889.141624L119.00747 782.387582C119.00747 782.387582 94.655706 756.334856 117.240439 735.312576 139.825172 714.290294 139.825171 714.290294 139.825171 714.290294 139.825171 714.290294 198.696266 667.766557 215.477957 652.783853 232.259646 637.803182 269.268328 609.501731 245.995962 552.13132 222.723598 494.760909 221.448316 484.706112 221.236109 467.672653 221.024923 450.64021 236.305861 400.398714 247.01823 379.643437 247.01823 379.643437 264.70792 350.821176 291.371515 333.600915 300.827986 327.558293 310.386477 324.003986 317.639262 322.443582 331.69797 319.928869 344.45283 323.803986 355.31109 329.527829 356.865915 330.130872 359.235898 331.303459 362.226178 332.913606 362.632229 333.131882 363.049499 333.359291 363.477995 333.593808 363.795285 333.767411 364.111555 333.941016 364.440067 334.122741 364.754298 334.29736 365.077709 334.477056 365.401118 334.657765 365.715349 334.834414 366.035699 335.013094 366.359112 335.195834 366.696806 335.38568 367.031442 335.573499 367.378317 335.770451 367.758861 335.98568 368.152667 336.211059 368.544437 336.43644 369.123923 336.767405 369.715656 337.107504 370.321667 337.457757 370.655282 337.65065 370.988894 337.842528 371.331691 338.041512 371.745902 338.283136 372.166234 338.527805 372.59065 338.776536 372.912021 338.964352 373.238493 339.155216 373.565984 339.348107 374.012845 339.610035 374.456642 339.869933 374.912683 340.138968 375.12897 340.265872 375.353421 340.400898 375.572768 340.528816 376.507294 341.081099 377.462226 341.649626 378.438584 342.23135 378.755872 342.420181 379.072142 342.607998 379.392493 342.800891 379.900565 343.104443 380.412718 343.412058 380.929971 343.721702 381.266646 343.923731 381.607402 344.128808 381.948157 344.333883 383.724371 345.402915 385.552614 346.509512 387.42677 347.650626 387.781808 347.866869 388.136845 348.083112 388.494946 348.301386 389.037706 348.632349 389.581485 348.964326 390.131386 349.299352 390.533357 349.546051 390.939406 349.794781 391.344435 350.042498 430.373162 373.953098 485.311288 409.758082 485.311288 409.758082 477.72489 452.697058 455.957358 471.267568 408.459739 472.33457 405.532712 472.399544 402.661797 472.367058 399.849035 472.24929 389.233589 472.220866 363.308638 465.65337 363.308638 465.65337 340.690237 458.366077 325.77964 447.41179 321.698739 444.726517L321.698739 444.726517 321.698739 444.726517ZM508.621402 820.263629C484.156392 826.937723 458.885406 812.613902 452.179464 788.268787L374.122008 504.912152C388.367416 507.408592 409.561581 507.514176 409.561581 507.514176L459.964803 690.478174C464.435432 706.707574 481.281395 716.26085 497.592762 711.812128L602.639264 683.154334C602.685174 683.330984 602.722923 683.505603 602.771894 683.680222 604.170622 688.761427 606.128435 693.542125 608.528006 697.998968 592.861422 703.53601 583.909963 720.248658 588.375491 736.462829 593.055267 753.447557 610.685784 763.444486 627.756197 758.787645 640.732446 755.247552 649.640035 744.259763 651.115282 731.732891 662.64485 734.87603 675.141594 735.090243 687.506728 731.715632L785.958491 704.860878C786.640002 704.676107 787.305187 704.459866 787.977517 704.255805 790.363824 726.171485 776.501002 747.193765 754.451886 753.206949L508.621402 820.263629 508.621402 820.263629 508.621402 820.263629ZM149.616275 237.944306C152.586152 238.79608 155.599898 238.766638 158.377973 238.008266 163.642336 236.57172 168.052772 232.523 169.676971 226.922 186.872872 167.622658 231.793403 119.66542 289.840154 98.634002 298.248854 95.588325 302.583792 86.333526 299.522096 77.966035 296.460398 69.598543 287.175325 65.293985 278.752342 68.331541 211.012428 92.874626 158.596301 148.818644 138.540707 217.98192 136.058498 226.537228 141.017815 235.475277 149.616275 237.944306L149.616275 237.944306 149.616275 237.944306ZM302.503195 133.514116C255.79931 150.491738 219.583344 189.082502 205.624618 236.746339 203.120984 245.295555 208.055815 254.245787 216.648154 256.738166 219.629253 257.602125 222.659323 257.574712 225.45066 256.813293 230.700741 255.381826 235.101995 251.350362 236.737414 245.767637 247.821146 207.915958 276.563958 177.276441 313.620592 163.80541 322.02623 160.74958 326.350966 151.491736 323.281107 143.127291 320.212269 134.762843 310.907813 130.459302 302.503195 133.514116L302.503195 133.514116 302.503195 133.514116ZM942.195832 717.433435C939.119851 717.139021 936.162218 717.720744 933.570843 718.974547 928.663558 721.34916 925.076446 726.138997 924.514302 731.941014 918.577611 793.373342 883.29209 848.735638 830.122014 880.038096 822.420333 884.571078 819.869768 894.459378 824.426094 902.125349 828.984462 909.788272 838.904115 912.320246 846.624162 907.791323 908.669178 871.265531 949.848541 806.679909 956.773832 735.027299 957.631843 726.162347 951.10444 718.282163 942.195832 717.433435L942.195832 717.433435 942.195832 717.433435ZM887.363808 728.863862C888.244264 720.001957 881.737266 712.10756 872.833757 711.230405 869.741453 710.927867 866.767496 711.507562 864.165922 712.769486 859.269859 715.135979 855.689886 719.905509 855.113459 725.692298 851.217219 764.926714 828.629424 800.305304 794.695702 820.332664 786.998102 824.874784 784.45876 834.767146 789.02427 842.427026 793.588758 850.085888 803.529837 852.6138 811.227438 848.068635 853.995293 822.831133 882.456523 778.268813 887.363808 728.863862L887.363808 728.863862 887.363808 728.863862Z" fill="#1296db" p-id="87168"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="nearby">
<path d="M620.470457 842.147232M353.384469 255.43974m-103.923908 0a101.557 101.557 0 1 0 207.847815 0 101.557 101.557 0 1 0-207.847815 0ZM670.614507 255.43974m-103.923908 0a101.557 101.557 0 1 0 207.847815 0 101.557 101.557 0 1 0-207.847815 0ZM810.444183 715.908086l-0.12996 0.074701-97.816816-169.423691 1.074472 0 0-44.926212 148.579967 0 0-81.777515L544.747845 419.85537l-61.533448 0L165.810397 419.85537l0 81.777515 148.579967 0 0 39.777959-100.768031 174.535105-0.066515-0.038886-87.895863 152.240333L196.479907 909.036665l21.309328-36.908608 0.067538 0.038886 135.39876-234.517221 111.488187 193.102996-0.303922 0.525979 0.910743 0.525979 23.303752 40.36329 23.332405 40.62014 23.275099-40.62014 23.303752-40.36329 0.910743-0.525979-0.303922-0.525979 111.488187-193.102996L806.058292 872.166943l0.130983-0.075725L827.520093 909.036665l70.819952-40.888246L810.444183 715.908086zM631.794363 541.410843 511.958044 748.97418 395.093407 546.559097l1.074472 0 0-44.926212 87.046518 0 61.533448 0 87.046518 0L631.794363 541.410843z" fill="#1296db" p-id="87833"></path>
</symbol>
<symbol viewBox="0 0 66 66" id="shopping">
<path fill="#f86161" d="M6.34,3.272v59.457h53.32V3.272H6.34z M46.539,19.077v10.275v1.398h-0.08
c-0.744,6.392-6.492,11.392-13.456,11.392c-6.967,0-12.717-4.996-13.46-11.392h-0.085v-1.398V19.077v-3.924h5.413v15.255
c0.549,3.777,3.979,6.701,8.128,6.701c4.145,0,7.579-2.918,8.127-6.691V15.15h5.412V19.077z"/>
</symbol>
<symbol viewBox="0 0 36.42 36.42" id="small">
<path d="M13.234,19.995c-0.778,0.388-5.564,2.386-2.253,5.593c1.798,1.796,4.81,0.66,5.537-1.069
c0.097-1.213,0.096-10.023,0.096-11.236c0-1.212,3.606-7.693,10.186-4.013c0,0,7.403,4.318-1.176,11.284
c0,0-2.932,0.237-2.252-2.237c-0.097-0.729,3.574-2.415,3.089-4.744c-0.778-2.765-5.297-3.572-6.468-0.097V24.47
c0.047,1.544-3.01,6.61-9.339,4.476c0,0-4.225-1.802-3.991-6.341c0.188-2.06,2.134-4.579,4.319-5.406
C13.411,16.519,14.303,18.927,13.234,19.995z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="QRcode">
<path d="M190.06787 190.06787l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM386.026914 64.094784l-321.93213 0 0 321.93213 125.973086 0 0 55.988152 69.984934 0 0-55.988152 125.973086 0L386.02589 316.040956l55.988152 0 0-55.988152-55.988152 0L386.02589 64.094784zM316.040956 316.040956 134.079718 316.040956 134.079718 134.079718l181.961238 0L316.040956 316.040956zM190.06787 763.946172l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM763.946172 190.06787l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM512 506.356466 512 581.984934 581.984934 581.984934 581.984934 512 637.973086 512 637.973086 442.015066 581.984934 442.015066 581.984934 386.026914 512 386.026914 512 442.370153ZM512 762.301719 512 833.93213 581.984934 833.93213 581.984934 762.301719 581.984934 707.95802 637.973086 707.95802 637.973086 637.973086 579.825758 637.973086 512 637.973086 512 698.315406ZM581.984934 833.93213l55.988152 0 0 55.988152-55.988152 0 0-55.988152ZM442.015066 889.920282 442.015066 959.905216 515.838422 959.905216 581.984934 959.905216 581.984934 889.920282 515.838422 889.920282ZM707.95802 707.95802 637.973086 707.95802 637.973086 762.301719 637.973086 833.93213 707.797361 833.93213 763.946172 833.93213 763.946172 763.946172 707.95802 763.946172ZM763.946172 959.905216 835.771011 959.905216 899.757325 959.905216 959.905216 959.905216 959.905216 889.920282 899.757325 889.920282 833.93213 889.920282 833.93213 833.93213 763.946172 833.93213 763.946172 890.275369ZM959.905216 512 959.905216 442.015066 899.757325 442.015066 833.93213 442.015066 833.93213 512 899.757325 512ZM889.920282 763.946172l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM442.015066 316.040956l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM763.946172 442.015066l0-55.988152 195.959044 0 0-321.93213-321.93213 0 0 69.984934-58.147328 0-67.825758 0 0 55.988152 67.825758 0 58.147328 0 0 69.984934-55.988152 0 0 55.988152 55.988152 0 0 69.984934 69.984934 0 0 55.988152L763.946172 442.014042zM707.95802 134.079718l181.961238 0L889.919259 316.040956 707.95802 316.040956 707.95802 134.079718zM707.95802 581.984934l55.988152 0 0 55.988152-55.988152 0 0-55.988152ZM833.93213 707.95802 763.946172 707.95802 763.946172 763.946172 835.771011 763.946172 889.920282 763.946172 889.920282 698.315406 889.920282 637.973086 959.905216 637.973086 959.905216 581.984934 899.757325 581.984934 833.93213 581.984934 833.93213 634.329093ZM442.015066 190.06787l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM260.052804 512l55.988152 0 0 69.984934-55.988152 0 0-69.984934ZM442.015066 442.015066 387.865795 442.015066 316.040956 442.015066 316.040956 512 386.026914 512 386.026914 581.984934 442.015066 581.984934 442.015066 506.356466ZM386.026914 833.93213 386.026914 707.95802l55.988152 0L442.015066 637.973086l-54.149271 0L190.06787 637.973086l0-67.630307 0-58.34278-58.148351 0L64.094784 512l0 69.984934 69.984934 0 0 55.988152L64.094784 637.973086l0 321.93213 321.93213 0 0-69.984934 55.988152 0 0-55.988152L386.026914 833.93213zM316.040956 889.920282 134.079718 889.920282 134.079718 707.95802l181.961238 0L316.040956 889.920282zM442.015066 581.984934l69.984934 0 0 55.988152-69.984934 0 0-55.988152ZM637.973086 512l69.984934 0 0 69.984934-69.984934 0 0-69.984934ZM763.946172 512l69.984934 0 0 69.984934-69.984934 0 0-69.984934Z" p-id="69275"></path>
</symbol>
<symbol viewBox="0 0 36.42 36.42" id="photo">
<path fill="#10aeff" d="M4.149,6.492v23.436h28.123V6.492H4.149z M29.928,27.584H6.492V8.835h23.436V27.584z"/>
<path fill="#10aeff" d="M21.725,14.694c0,1.294,1.05,2.344,2.344,2.344c1.295,0,2.344-1.049,2.344-2.344s-1.049-2.343-2.344-2.343
C22.774,12.351,21.725,13.4,21.725,14.694z"/>
<path fill="#10aeff" d="M27.584,21.549l-4.777-2.9l-3.99,1.791l-5.446-4.84L8.836,18.82v6.42h18.748V21.549z"/>
</symbol>
<symbol viewBox="0 0 36.42 36.42" id="collect">
<path fill="#10aeff" d="M18.195,3.439l14.728,7.367l-14.728,7.368L3.467,10.806L18.195,3.439z"/>
<path fill="#EAE238" d="M3.401,11.932l14.131,7.212v13.837L3.401,25.623V11.932z"/>
<path fill="#E6433D" d="M32.842,11.932l-14.13,7.212v13.837l14.13-7.358V11.932z"/>
</symbol>
<symbol viewBox="0 0 36.42 36.42" id="burse">
<path fill="#10AEFF" d="M33.043,29.617c0,0.417-0.07,0.806-0.212,1.167c-0.272,0.712-0.819,1.287-1.52,1.591
c-0.348,0.153-0.729,0.23-1.144,0.23H6.447c-0.415,0-0.806-0.077-1.176-0.23c-0.365-0.149-0.697-0.365-0.981-0.64
c-0.282-0.271-0.51-0.594-0.671-0.951c-0.163-0.367-0.247-0.765-0.244-1.167V13.229c0-0.833,0.288-1.539,0.865-2.119
s1.28-0.87,2.107-0.87H30.07c0.828,0,1.531,0.29,2.106,0.87c0.578,0.58,0.866,1.286,0.866,2.119v4.467h-7.416
c-0.829,0-1.532,0.285-2.107,0.854c-0.578,0.569-0.866,1.272-0.866,2.102c0.021,0.569,0.141,1.074,0.36,1.512
c0.174,0.371,0.462,0.712,0.864,1.018c0.402,0.307,0.986,0.461,1.749,0.461h7.418v5.975H33.043z M28.6,8.73H13.765
c1.116-0.581,2.227-1.173,3.333-1.774c0.907-0.477,1.811-0.958,2.713-1.445c0.695-0.376,1.393-0.749,2.09-1.118
c0.763-0.416,1.444-0.608,2.044-0.576c0.599,0.034,1.104,0.138,1.519,0.313c0.471,0.235,0.893,0.559,1.242,0.952L28.6,8.73z
M24.156,20.652c0-0.418,0.142-0.767,0.425-1.05c0.274-0.281,0.652-0.437,1.046-0.429c0.413,0,0.762,0.144,1.044,0.429
c0.283,0.283,0.426,0.632,0.426,1.05c0,0.417-0.143,0.771-0.426,1.067c-0.27,0.29-0.649,0.451-1.044,0.444
c-0.415,0-0.763-0.149-1.046-0.444C24.303,21.435,24.149,21.05,24.156,20.652L24.156,20.652z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="cardbag">
<path d="M811.011094 278.108019 704.687534 278.108019l-0.023536-6.65149 0-56.485479 0.023536 0 0-68.102051c0-41.370223-26.729781-68.102051-68.097958-68.102051-9.739828 0-13.382798 0-21.942755 4.282536l-0.618077 0.309038-0.668219 0.174985-398.682142 104.653525c-52.193733 14.234189-94.705965 67.24452-94.705965 118.154004l0 463.46561c0 51.28913 41.726334 93.016487 93.016487 93.016487l598.022189 0c51.290153 0 93.016487-41.727357 93.016487-93.016487L904.027581 371.124506C904.027581 319.835376 862.301248 278.108019 811.011094 278.108019zM212.988906 278.108019c-13.860682 0-27.876907 4.669346-42.715871 9.613962l-13.602809 4.532223 5.293563-13.302981c11.389398-28.476565 33.619702-48.590672 59.491952-53.845349L620.777449 120.28248l15.026228 0c2.856048-0.657986 5.593392-0.99056 8.147564-0.99056 16.720823 0 24.205285 13.850449 24.205285 27.577079l0.00307 131.23902L212.988906 278.108019zM793.881972 603.171466c-8.481162 8.482185-20.707624 13.546527-32.704866 13.546527-12.178367 0-24.100908-4.938476-32.708959-13.547551-8.483208-8.482185-13.547551-20.708648-13.547551-32.704866s5.064342-24.222681 13.548574-32.705889c8.608052-8.609075 20.529569-13.546527 32.707936-13.546527 11.997242 0 24.223704 5.064342 32.705889 13.547551 8.482185 8.482185 13.546527 20.707624 13.546527 32.704866C807.429523 582.462818 802.36518 594.689281 793.881972 603.171466z" p-id="72406"></path>
</symbol>
<symbol viewBox="0 0 36.42 36.42" id="smile">
<path fill="#ffca00" d="M18.21,33.027c-8.184,0-14.817-6.634-14.817-14.817S10.027,3.393,18.21,3.393
c8.183,0,14.817,6.634,14.817,14.817S26.394,33.027,18.21,33.027z M9.801,19.612L9.801,19.612c0,0.007,0,0.012,0,0.018V19.612z
M15.474,11.807c-0.427-0.427-1.027-0.676-1.63-0.676c-0.604,0-1.204,0.249-1.631,0.676c-0.427,0.427-0.675,1.027-0.675,1.631
s0.248,1.204,0.675,1.631c0.427,0.427,1.027,0.676,1.631,0.676c0.604,0,1.203-0.249,1.63-0.676c0.427-0.427,0.676-1.027,0.676-1.631
S15.901,12.234,15.474,11.807z M24.518,11.807c-0.428-0.427-1.027-0.676-1.632-0.676s-1.204,0.249-1.631,0.676
c-0.428,0.427-0.676,1.027-0.676,1.631s0.248,1.204,0.676,1.631c0.427,0.427,1.026,0.676,1.631,0.676s1.204-0.249,1.632-0.676
c0.426-0.427,0.675-1.027,0.675-1.631S24.943,12.234,24.518,11.807z M25.82,19.611c-0.004,0-0.009,0.001-0.012,0.001H18.21h-7.598
c-0.003,0-0.007-0.001-0.01-0.001c-0.443,0-0.801,0.359-0.801,0.801c0,0.121,0.029,0.236,0.078,0.34
c0.581,4.34,4.468,6.525,8.332,6.464v0.006c3.863,0.063,7.751-2.126,8.333-6.471c0.049-0.103,0.077-0.218,0.077-0.339
C26.62,19.971,26.261,19.611,25.82,19.611z M26.62,19.612v0.018C26.62,19.624,26.62,19.619,26.62,19.612L26.62,19.612z"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="set">
<path d="M918.872 456.702v135.46h-94.727q-12.315 52.1-40.733 97.569l67.256 67.256-95.674 95.674-67.256-68.203q-45.469 29.365-97.569 40.733v95.674h-134.512v-95.674q-52.1-11.367-97.569-40.733l-67.256 68.203-95.674-95.674 67.256-67.256q-28.418-45.469-40.733-97.569h-94.727v-135.46h94.727q11.367-52.1 39.785-97.569l-66.309-67.256 95.674-95.674 66.309 67.256q45.469-29.365 98.516-40.733v-94.727h134.512v94.727q53.047 11.367 98.516 40.733l66.309-67.256 95.674 95.674-66.309 67.256q28.418 45.469 39.785 97.569h94.727zM521.018 313.664q-86.202 0-147.301 61.099t-61.099 147.774 61.099 147.774 147.774 61.099 147.774-61.099 61.099-147.774-61.099-147.774-148.248-61.099z" p-id="8928" fill="#10aeff"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="person">
<path d="M853.517187 762.672156c0 0-186.91097-18.107403-238.321874-105.935728-5.354961-27.669176-6.127558-48.231491-4.02978-67.306942 0 0 35.626405-74.254168 39.45357-117.713982 0 0 12.800537-13.599739 25.972535-29.305443 17.845437-21.278629 29.30749-89.318258 15.010879-98.849332 0 0-7.232728-10.326183-16.400528-0.843204 0 0 14.33345-93.878111 4.802376-151.064554 0 0-21.162995-75.43404-61.353346-94.233198 0 0-64.264653-27.848255-106.977453-23.613814-24.548092 2.433422-70.857814 13.831007-96.297206 21.529339 0 0-73.887824 30.417777-86.160335 100.480482 0 0-7.471159 119.510908 6.825452 164.782997 0 0-9.720386-16.978696-28.782533-2.682086 0 0-7.074116 31.674397 17.624403 71.504544 0 0 18.255783 36.663014 46.104037 45.232181 0 0 8.032954 46.77021 47.127344 109.964484 0 0-0.070608 67.50751-13.066597 82.774215 0 0-50.127677 73.603345-216.893842 101.927437-35.495422 6.028297-80.653925 17.73185-122.287137 73.924663l0 106.696044 891.608737 0L957.475887 841.914942C957.478957 841.914942 948.036911 788.692786 853.517187 762.672156z" p-id="18917"></path>
</symbol>
</defs>
</svg>
</html>
接下来看main.js中的
main.js中有对移动端点击延迟的处理，用的是fastclick，还有一个是对进入页面，回到上面的处理
//main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './vuex/'
import './style/public.scss'
import './config/rem'
import FastClick from 'fastclick'
import App from './app.vue';
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history', //路由模式
strict: process.env.NODE_ENV !== 'production',
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: to.meta.savedPosition || 0
}
}
}
})
router.beforeEach((to, from, next) => {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop;
}
next()
})
new Vue({
el: '#weixin',
router,
render: h => h(App),
store,
})
app.vue中给入口加了动画处理
//app.vue
<template>
<div>
<transition name="router-fade" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
</template>
<style lang="scss">
.router-fade-enter-active, .router-fade-leave-active {
transition: opacity .2s;
}
.router-fade-enter, .router-fade-leave-active {
opacity: 0;
}
</style>
接下来的就是路由部分了，比较常规的处理方法
import App from '../app'
const dialogue = r => require.ensure([], () => r(require('../frames/dialogue/dialogue')), 'dialogue')
const singlechat = r => require.ensure([], () => r(require('../frames/conversation/singlechat')), 'singlechat')
const groupchat = r => require.ensure([], () => r(require('../frames/conversation/groupchat')), 'groupchat')
const chatmessage = r => require.ensure([], () => r(require('../frames/conversation/chatmessage/chatmessage')), 'chatmessage')
const groupchatmessage = r => require.ensure([], () => r(require('../frames/conversation/chatmessage/groupchatmessage')), 'groupchatmessage')
const addressbook = r => require.ensure([], () => r(require('../frames/addressbook/addressbook')), 'addressbook')
const details = r => require.ensure([], () => r(require('../frames/addressbook/details/details')), 'details')
const more = r => require.ensure([], () => r(require('../frames/addressbook/details/more/more')), 'more')
const find = r => require.ensure([], () => r(require('../frames/find/find')), 'find')
const friendcircle = r => require.ensure([], () => r(require('../frames/find/friendcircle/friendcircle')), 'friendcircle')
const miniapps = r => require.ensure([], () => r(require('../frames/find/miniapps/miniapps')), 'miniapps')
const me = r => require.ensure([], () => r(require('../frames/me/me')), 'me')
const personaldetails = r => require.ensure([], () => r(require('../frames/me/personaldetails/personaldetails')), 'personaldetails')
const photoalbum = r => require.ensure([], () => r(require('../frames/me/photoalbum/photoalbum')), 'photoalbum')
const collect = r => require.ensure([], () => r(require('../frames/me/collect/collect')), 'collect')
const wallet = r => require.ensure([], () => r(require('../frames/me/wallet/wallet')), 'wallet')
const cardbag = r => require.ensure([], () => r(require('../frames/me/cardbag/cardbag')), 'cardbag')
const computer = r => require.ensure([], () => r(require('../frames/computer/computer')), 'computer')
const transfer = r => require.ensure([], () => r(require('../frames/transfer/transfer')), 'transfer')
const settings = r => require.ensure([], () => r(require('../frames/me/settings/settings')), 'settings')
const search = r => require.ensure([], () => r(require('../frames/search/search')), 'search')
const newmessage = r => require.ensure([], () => r(require('../frames/me/settings/detailset/newmessage')), 'newmessage')
const disturbance = r => require.ensure([], () => r(require('../frames/me/settings/detailset/disturbance')), 'disturbance')
const chat = r => require.ensure([], () => r(require('../frames/me/settings/detailset/chat')), 'chat')
const privacy = r => require.ensure([], () => r(require('../frames/me/settings/detailset/privacy')), 'privacy')
const currency = r => require.ensure([], () => r(require('../frames/me/settings/detailset/currency')), 'currency')
const aboutwc = r => require.ensure([], () => r(require('../frames/me/settings/detailset/aboutwc')), 'aboutwc')
const help = r => require.ensure([], () => r(require('../frames/me/settings/detailset/help')), 'help')
const login = r => require.ensure([], () => r(require('../frames/me/settings/detailset/login')), 'login')
export default[{
path:'/',
component:App,
children: [
{path: '', redirect: '/dialogue'}, //地址为空时跳转dialogue页面
{path: '/dialogue', component: dialogue, },//对话列表页
{
path: '/singlechat',
component: singlechat,
children:[
{
path: '/singlechat/chatmessage',
component: chatmessage,
}
]
}, //单人对话详情页
{
path: '/groupchat',
component: groupchat,
children: [
{
path: '/groupchat/groupchatmessage',
component: groupchatmessage,
}
]
}, //群聊
{path: '/addressbook', component: addressbook, meta:{ keepAlive: true},
children: [
{
path: '/addressbook/details',
component: details, //详细资料
children: [
{
path: '/addressbook/details/more',
component:more, //更多
}
]
}
]
}, //通讯录
{path: '/find', component: find,
children:[
{
path:'/find/friendcircle',
component:friendcircle, //朋友圈
},
{
path:'/find/miniapps',
component:miniapps, //小程序
},
]
}, //发现
{path: '/search', component: search}, //发现
{path: '/me', component: me,
children: [
{path:'/me/settings',component: settings,//设置
children: [
{
path:'/me/settings/newmessage',
component:newmessage,
}, //新消息提醒
{
path:'/me/settings/disturbance',
component:disturbance,
}, //勿扰模式
{
path:'/me/settings/chat',
component:chat,
}, //聊天
{
path:'/me/settings/privacy',
component:privacy,
}, //隐私
{
path:'/me/settings/currency',
component:currency,
}, //通用
{
path:'/me/settings/aboutwc',
component:aboutwc,
}, //关于微信
{
path:'/me/settings/help',
component:help,
}, //帮助与反馈
{
path:'/me/settings/login',
component:login,
}, //退出
]
},
{
path:'/me/personaldetails',component : personaldetails, //个人信息
},
{
path:'/me/cardbag',component : cardbag, //卡包
},
{
path:'/me/photoalbum',component : photoalbum, //相册
},
{
path:'/me/collect',component : collect, //我的收藏
},
{
path:'/me/wallet',component : wallet, //钱包
},
]
}, //我
{path: '/computer', component: computer}, //电脑登录
{path: '/transfer', component: transfer}, //文件传送助手
]
}]
然后我们就根据路由找到对应的组件来看看对应的组件
代码
这个代码里面的处理也是很特别的，有封装head组件和footer组件
光是header里面内容也是很复杂的,也有很多很有意思的处理技巧
1.下拉框的点击关闭的处理，很有意思
2.还有一个就是父组件给子组件传参
//head.vue
<template>
<header>
<section class="logoPart" v-if="logoPart">
微信
</section>
<section class="logoPart" v-if="crossover">
<section class="goback" @click="goBackThing">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back"></use>
</svg>
</section>
<section class="wall">|</section>
<slot name='searchpart'></slot>
<!-- <slot name='clickrefresh' ></slot> -->
<section class="covers_name" v-if="$route.path.indexOf('search') == -1" @click="refreshPage">
<span class="ellipsis">
{{crossover}}
</span>
</section>
</section>
<section class="searchPart" v-if="searchPart">
<router-link to='/search' class="searchlink">
<svg class="icon-search" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
</svg>
</router-link>
</section>
<section class="addPart" v-if="add" @click="controlShow">
<svg class="icon-search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#add"></use>
</svg>
</section>
<!-- 下拉框 -->
<section class="selectpart" v-show="addthing">
<div class="cover" @click="controlhide"></div>
<div class="selectlist">
<ul>
<router-link to='' tag="li" class="selectpart_li">
<section class="selectsvg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wxspeak"></use>
</svg>
</section>
<section class="selectext">
发起群聊
</section>
</router-link>
<router-link to='' tag="li" class="selectpart_li">
<section class="selectsvg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#addfriend"></use>
</svg>
</section>
<section class="selectext">
添加朋友
</section>
</router-link>
<router-link to='' tag="li" class="selectpart_li">
<section class="selectsvg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#onesweep"></use>
</svg>
</section>
<section class="selectext">
扫一扫
</section>
</router-link>
<router-link to='' tag="li" class="selectpart_li">
<section class="selectsvg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#receipt"></use>
</svg>
</section>
<section class="selectext">
收付款
</section>
</router-link>
<router-link to='' tag="li" class="selectpart_li">
<section class="selectsvg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help"></use>
</svg>
</section>
<section class="selectext">
帮助与反馈
</section>
</router-link>
</ul>
</div>
</section>
<slot name='person'></slot>
</header>
</template>
<script>
export default{
data(){
return{
addthing:false,
}
},
props: ['logoPart', 'crossover', 'searchPart', 'add', 'person', "search", "clickrefresh"],
created(){
},
mounted(){
},
components:{
},
computed:{
},
methods:{
controlShow(){
this.addthing=true;
},
controlhide(){
this.addthing=false;
},
goBackThing(){
this.$route.path == '/singlechat' ? this.$router.push('/dialogue') : window.history.go(-1);
},
refreshPage(){//点击头部刷新页面
this.$emit('refreshPage');
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
header{
@include widthHeight(100%,2.06933rem);
background:$black;
z-index:200;
color:#fff;
position: fixed;
.logoPart{
@include topcenter;
@include sizeColor(0.704rem,#fff);
left:0.5973333333rem;
@include justify(flex-start);
align-items:center;
.goback{
@include widthHeight(1rem,1rem);
svg{
@include widthHeight(100%,100%);
}
}
.wall{
margin:0 0.5333333333rem;
@include sizeColor(1.0666666667rem,#2e3235);
}
.covers_name{
span{
@include sizeColor(0.704rem,#fff);
display:block;
9.5rem;
}
}
}
.searchPart{
@include topcenter;
right:3.52rem;
@include widthHeight(0.8106666667rem,0.8106666667rem);
.searchlink{
dispaly:block;
@include widthHeight(0.8106666667rem,0.8106666667rem);
svg{
@include widthHeight(100%,100%);
}
}
}
.addPart{
@include topcenter;
right:1.0453333333rem;
@include widthHeight(0.8106666667rem,0.8106666667rem);
svg{
@include widthHeight(100%,100%);
}
}
.selectpart{
position: fixed;
z-index:2;
100%;
height:100%;
top:0;
right:0;
.cover{
position: fixed;
100%;
height:100%;
background:#000;
opacity: 0;
}
.selectlist{
position: absolute;
z-index:100;
top:2.06933rem;
right:0.4693333333rem;
8.5333333333rem;
background:#373b3e;
ul{
8.5333333333rem;
.selectpart_li{
@include widthHeight(100%,1.9626666667rem);
border-bottom:1px solid #2f3336;
@include justify(flex-start);
align-items:center;
.selectsvg{
@include widthHeight(0.96rem,0.9386666667rem);
margin:0 0.7466666667rem;
svg{
@include widthHeight(100%,100%);
}
}
.selectext{
@include sizeColor(0.64rem,#fff);
}
}
}
}
}
}
</style>
footer里面的也挺有意思的，就是state的用法，那个红点点在有footer的任何页面都要有，于是作者大大就用了有趣的办法，直接写在了store里面
//footer
<template>
<div class="footer">
<!-- 微信底部导航SVG存放 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;0;height:0;visibility:hidden">
<defs>
<symbol viewBox="0 0 1024 1024" id="wx">
<path d="M512 231.424c183.296 0 331.776 125.952 331.776 280.576S695.296 792.576 512 792.576c-67.584 0-133.12-17.408-189.44-50.176l-16.384-9.216-17.408 6.144-72.704 25.6 24.576-55.296 10.24-22.528-15.36-20.48c-35.84-46.08-55.296-99.328-55.296-154.624 0-154.624 148.48-280.576 331.776-280.576m0-40.96c-205.824 0-372.736 143.36-372.736 321.536 0 66.56 23.552 128 63.488 179.2l-63.488 141.312 162.816-56.32c59.392 34.816 132.096 56.32 209.92 56.32 205.824 0 372.736-143.36 372.736-321.536 0-176.128-166.912-320.512-372.736-320.512z" fill="#979797" p-id="15230"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="wxlight">
<path d="M512 190.464c-205.824 0-372.736 143.36-372.736 321.536 0 66.56 23.552 128 63.488 179.2l-63.488 141.312 162.816-56.32c59.392 34.816 132.096 56.32 209.92 56.32 205.824 0 372.736-143.36 372.736-321.536 0-176.128-166.912-320.512-372.736-320.512z" fill="#46bf18" p-id="14668"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="address">
<path d="M716.8 369.664h163.84v40.96H716.8zM676.864 492.544H880.64v40.96H676.864zM716.8 615.424h163.84v40.96H716.8z" fill="#979797" p-id="10284"></path><path d="M553.984 602.112c-8.192-4.096-13.312-12.288-13.312-22.528v-10.24c0-7.168 3.072-14.336 9.216-19.456 45.056-34.816 73.728-94.208 73.728-161.792 0-106.496-72.704-192.512-162.816-192.512S297.984 282.624 297.984 389.12c0 66.56 28.672 124.928 71.68 159.744 6.144 4.096 9.216 11.264 9.216 19.456v13.312c0 9.216-5.12 18.432-13.312 22.528C268.288 652.288 143.36 721.92 143.36 775.168v52.224h634.88v-52.224c0-53.248-125.952-123.904-224.256-173.056z m-93.184 184.32H184.32v-11.264c2.048-7.168 19.456-45.056 199.68-135.168 22.528-11.264 35.84-33.792 35.84-58.368v-13.312c0-20.48-9.216-38.912-24.576-51.2-35.84-28.672-56.32-75.776-56.32-128 0-83.968 54.272-151.552 121.856-151.552S582.656 305.152 582.656 389.12c0 53.248-21.504 101.376-58.368 129.024-15.36 12.288-25.6 31.744-25.6 52.224v10.24c0 24.576 14.336 47.104 35.84 58.368C717.824 730.112 736.256 768 737.28 776.192v11.264H460.8z" fill="#979797" p-id="10285"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="addresslight">
<path d="M716.8 369.664h163.84v40.96H716.8zM676.864 492.544H880.64v40.96H676.864zM716.8 615.424h163.84v40.96H716.8z" fill="#46C01B" p-id="6629"></path><path d="M553.984 602.112c-8.192-4.096-13.312-12.288-13.312-22.528v-10.24c0-7.168 3.072-14.336 9.216-19.456 45.056-34.816 73.728-94.208 73.728-161.792 0-106.496-72.704-192.512-162.816-192.512S297.984 282.624 297.984 389.12c0 66.56 28.672 124.928 71.68 159.744 6.144 4.096 9.216 11.264 9.216 19.456v13.312c0 9.216-5.12 18.432-13.312 22.528C268.288 652.288 143.36 721.92 143.36 775.168v52.224h634.88v-52.224c0-53.248-125.952-123.904-224.256-173.056z" fill="#46C01B" p-id="6630"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="find">
<path d="M874.048 149.952c-199.936-199.936-524.16-199.936-724.096 0s-199.936 524.16 0 724.096 524.16 199.936 724.096 0S1073.984 349.888 874.048 149.952zM184.64 839.36C3.84 658.56 3.84 365.44 184.64 184.64s473.92-180.8 654.72 0 180.8 473.92 0 654.784S365.44 1020.16 184.64 839.36z" p-id="11496" fill="#979797"></path><path d="M437.376 432.704l-187.008 345.664 339.072-193.6 193.6-339.072L437.376 432.704zM516.672 545.536C498.112 545.536 483.136 530.56 483.136 512c0-18.496 15.04-33.536 33.536-33.536 18.496 0 33.536 15.04 33.536 33.536C550.208 530.56 535.168 545.536 516.672 545.536z" p-id="11497" fill="#979797"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="findlight">
<path d="M511.880785 22.632463c-270.647093 0-490.050082 219.402989-490.050082 490.050082 0 270.647093 219.402989 490.051105 490.050082 490.051105s490.050082-219.402989 490.050082-490.051105C1001.930867 242.035452 782.528901 22.632463 511.880785 22.632463zM559.583227 550.373982l-323.364759 214.894302 216.940914-315.178309 319.271534-204.66124L559.583227 550.373982z" p-id="11699" fill="#46bf18"></path><path d="M506.371304 503.301897m-36.839023 0a36 36 0 1 0 73.678046 0 36 36 0 1 0-73.678046 0Z" p-id="11700" fill="#46bf18"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="me">
<path d="M957.824835 821.484633c-0.305969-1.723248-3.442402-17.366529-19.25146-35.833113-20.001543-23.362081-50.655703-40.8555-91.112114-51.993165-0.587378-0.161682-1.188058-0.288572-1.790786-0.379647-1.650593-0.248663-163.254178-25.28385-220.326011-92.034113-2.527566-19.522636-0.701988-35.291784 1.068332-50.574862 0.072655-0.626263 0.145309-1.251503 0.216941-1.87265 9.697873-13.420661 40.801265-60.795645 33.688263-107.362216 6.393617-6.949272 17.23657-18.886139 25.795503-29.091572 16.386202-19.539009 24.845874-68.289316 20.924565-95.625918-1.553379-10.830673-5.03569-18.475793-10.616802-23.260773-1.484817-1.576915-3.347235-3.047406-5.54939-4.182252 3.569292-30.333866 8.676613-88.126106 1.88186-128.891556-0.249687-1.499144-0.720408-2.952238-1.396813-4.312212-1.930979-3.8814-48.14758-95.228875-123.903961-110.519116-0.595564-0.119727-1.197268-0.204661-1.803066-0.25378l-57.809637-4.66423c-1.305739-0.106424-2.622734-0.042979-3.914146 0.186242-1.172709 0.207731-29.002544 5.179976-53.891398 12.71151-0.575098 0.173962-1.13894 0.381693-1.689479 0.621147-3.680832 1.604544-90.439802 40.014342-116.210745 101.18554-0.611937 1.453095-0.9967 2.992147-1.139963 4.561899-0.38374 4.196579-7.867178 87.719854-1.856277 141.643997-5.666046 1.119497-11.311627 3.77293-16.85283 7.9296-2.926656 2.194992-4.973268 5.363148-5.770424 8.933463-0.331551 1.483794-7.80271 36.791951 18.690688 79.614246 0.938372 1.574868 7.179516 11.856026 16.288988 22.172999 10.175757 11.523451 20.377096 19.125593 30.465872 22.728654 1.236154 19.537985 7.807826 56.57553 36.570917 99.440803 1.208525 27.927049-1.034563 57.239656-4.982478 64.559365-9.533121 7.714705-73.933873 56.733119-198.838627 81.570807-0.225127 0.045025-0.448208 0.094144-0.671289 0.149403-3.615341 0.88823-89.076758 22.51683-135.879714 87.850837-1.867534 2.606361-2.871397 5.732561-2.871397 8.93858l0 101.936647c0 8.477069 6.872524 15.349593 15.349593 15.349593l862.07305 0c8.477069 0 15.349593-6.872524 15.349593-15.349593L958.060195 824.165696C958.060195 823.267233 957.981401 822.369793 957.824835 821.484633zM927.361009 912.021649 95.987145 912.021649 95.987145 830.508147c39.567157-51.413973 110.22952-70.702272 115.117854-71.983451 143.731542-28.66383 211.175607-87.11815 213.979466-89.594551 0.545422-0.481977 1.055029-1.001817 1.52575-1.555425 5.227048-6.14086 11.391445-17.937534 12.669554-54.962799 0.645706-18.694781-0.270153-35.297924-0.310062-35.995819-0.159636-2.835581-1.103124-5.569856-2.724041-7.90197-36.796044-52.897767-33.863249-95.277994-33.726126-96.972589 0.550539-4.579295-1.000793-9.060353-4.204765-12.382005-3.217275-3.334955-7.780197-4.928243-12.397355-4.52813-0.152473 0.013303-0.304945 0.019443-0.465604 0.019443-9.656941 0-25.885554-18.795065-33.877575-32.343639-0.064468-0.109494-0.12996-0.218988-0.197498-0.327458-13.406335-21.61939-15.530718-39.839357-15.465227-49.545416 3.562129 6.953366 11.589966 9.607822 18.949584 6.736425 7.529487-2.938935 11.20111-11.770068 8.766664-19.47761-10.17985-32.237215-5.281283-120.123868-2.284019-154.531516 21.065781-46.078455 90.473571-78.858022 98.514711-82.528622 19.339464-5.77861 41.082674-10.028401 47.53155-11.236925l54.842049 4.423753c55.184857 11.755742 93.943602 79.576383 100.614535 91.978854 7.821129 51.801806-4.865821 136.258337-4.996804 137.117914-1.006933 6.605442 2.37407 13.103436 8.361435 16.068977 3.361561 1.663896 7.110955 2.000564 10.573823 1.127683 0.738827 6.235005 0.88516 16.449647-1.111311 30.193673-2.998287 20.642133-8.731872 35.118845-13.083993 40.308031-12.163017 14.502295-29.906124 33.475416-30.083156 33.665751-3.592828 3.838422-4.971222 9.248641-3.65218 14.338566 10.748808 41.497113-28.667923 92.313475-29.05371 92.804662-1.785669 2.25946-2.90005 4.975315-3.215228 7.838525-0.212848 1.935072-0.440022 3.891633-0.669242 5.875824-2.02717 17.512862-4.326539 37.361933-0.321318 62.911842 0.409322 2.611477 1.485841 5.072529 3.1262 7.145747 60.479443 76.464509 225.829352 103.861486 241.439888 106.295931 40.882106 11.402701 62.537312 28.209482 73.52148 40.3418 9.484002 10.474562 12.777001 19.306718 13.677511 22.242584L927.359986 912.021649z" p-id="18757" fill="#979797"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="melight">
<path d="M853.517187 762.672156c0 0-186.91097-18.107403-238.321874-105.935728-5.354961-27.669176-6.127558-48.231491-4.02978-67.306942 0 0 35.626405-74.254168 39.45357-117.713982 0 0 12.800537-13.599739 25.972535-29.305443 17.845437-21.278629 29.30749-89.318258 15.010879-98.849332 0 0-7.232728-10.326183-16.400528-0.843204 0 0 14.33345-93.878111 4.802376-151.064554 0 0-21.162995-75.43404-61.353346-94.233198 0 0-64.264653-27.848255-106.977453-23.613814-24.548092 2.433422-70.857814 13.831007-96.297206 21.529339 0 0-73.887824 30.417777-86.160335 100.480482 0 0-7.471159 119.510908 6.825452 164.782997 0 0-9.720386-16.978696-28.782533-2.682086 0 0-7.074116 31.674397 17.624403 71.504544 0 0 18.255783 36.663014 46.104037 45.232181 0 0 8.032954 46.77021 47.127344 109.964484 0 0-0.070608 67.50751-13.066597 82.774215 0 0-50.127677 73.603345-216.893842 101.927437-35.495422 6.028297-80.653925 17.73185-122.287137 73.924663l0 106.696044 891.608737 0L957.475887 841.914942C957.478957 841.914942 948.036911 788.692786 853.517187 762.672156z" p-id="18917" fill="#46bf18"></path>
</symbol>
</defs>
</svg>
<ul class="clear">
<router-link to="/dialogue" tag="li" class="footer_li">
<section class="li_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('dialogue') !== -1 ? '#wxlight' : '#wx'"></use>
</svg>
</section>
<section class="li_text" :class="$route.path.indexOf('dialogue') !== -1 ? 'colortext' : 'color' " >微信</section>
</router-link>
<router-link to="/addressbook" tag="li" class="footer_li">
<section class="li_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('addressbook') !== -1 ? '#addresslight' : '#address'"></use>
</svg>
</section>
<section class="li_text" :class="$route.path.indexOf('addressbook') !== -1 ? 'colortext' : 'color' " >通讯录</section>
</router-link>
<router-link to="/find" tag="li" class="footer_li">
<section class="li_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('find') !== -1 ? '#findlight' : '#find'"></use>
</svg>
<i class="findwarn" v-if="firendwarn"></i>
</section>
<section class="li_text" :class="$route.path.indexOf('find') !== -1 ? 'colortext' : 'color' " >发现</section>
</router-link>
<router-link to="/me" tag="li" class="footer_li">
<section class="li_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('me') !== -1 ? '#melight' : '#me'"></use>
</svg>
</section>
<section class="li_text" :class="$route.path.indexOf('me') !== -1 ? 'colortext' : 'color' " >我</section>
</router-link>
</ul>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default{
data(){
return{
}
},
created(){
},
mounted(){
},
components:{
},
computed:{
...mapState([
'firendwarn',
]),
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
.footer{
position: fixed;
bottom:0;
@include widthHeight(100%, auto);
background:#fcfcfc;
border-top:1px solid #d4d4d4;
ul{
@include widthHeight(100%, 2.2826666667rem);
@include justify(space-around);
box-sizing:border-box;
.footer_li{
float: left;
@include widthHeight(25%, 2.2826666667rem);
text-align:center;
position: relative;
.li_svg{
@include leftcenter;
top:0.3rem;
@include widthHeight(1.224rem,1.224rem);
svg{
@include widthHeight(100%,100%);
}
.findwarn{
display:block;
position: absolute;
right:-0.11rem;
top:-0.11rem;
@include widthHeight(0.4266666667rem,0.4266666667rem);
@include bg('../../images/warn.png');
border-radius:50%;
}
}
.li_text{
text-align:center;
@include sizeColor(0.4693333333rem, #979797);
margin-top:1.4933333333rem;
}
.color{
color:#979797;
}
.colortext{
color:#46bf18;
}
}
.footer_li:nth-of-type(2){
.li_svg{
top:0.2413333333rem;
@include widthHeight(1.324rem,1.324rem);
}
}
.footer_li:nth-of-type(3){
.li_svg{
top:0.3813333333rem;
@include widthHeight(.89rem,.89rem);
}
}
.footer_li:nth-of-type(4){
.li_svg{
top:0.2813333333rem;
@include widthHeight(1.08rem,1.08rem);
}
}
}
}
</style>
//vuex/index.js
//firendwarn
//状态
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutation'
import actions from './action'
Vue.use(Vuex)
const state = {
mute: false, //是否静音
computershow: true, //是否电脑登录
infor: {}, //联系人信息
contactList: [], //对话列表
userInfo: {}, //用户信息
newImg: '', //主题图片地址
imagestatus: false,
firendwarn: true, //朋友圈提示红色按钮
consumerthing: false, //登录弹窗显隐
allgroup:[], //所有群聊的人
}
export default new Vuex.Store({
state,
actions,
mutations,
})
接下来看页面的内容，也挺有意思的，这个控制是不是已登录的也是用state控制的
作者大大对vuex的用法好灵活
作者大大也是将数据写在data文件中进行请求的
//dialogue.vue
<template>
<section class="dialogue">
<!-- 头部 -->
<head-top logo-part="true" search-part="true" add="true"></head-top>
<div class="dialogue_con">
<!-- 电脑登录 -->
<section class="computer" v-if="computershow">
<router-link to="/computer" class="computer_link">
<section class="computer_icon">
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#computer"
></use>
</svg>
</section>
<section class="computer_text">
Windows 微信已登录<span v-if="mute">， 手机通知已关闭</span>
</section>
</router-link>
</section>
<!-- 对话列表 -->
<section class="conversation">
<ul>
<router-link
to="/singlechat"
tag="li"
v-for="(item, index) in dialogueList"
:key="index"
@click.native="refreshInfor(item)"
>
<div class="imgwipe">
<i class="redicon_num" v-if="newinfor">
1
</i>
<i class="redicon" v-if="newtext"></i>
<div class="imgstyle">
<img :src="item.headurl" alt="" />
</div>
</div>
<div class="infordetail">
<div class="infordetail_top clear">
<span class="left ellipsis">{{
item.remarks ? item.remarks : item.petname
}}</span>
<span class="right">12:07</span>
</div>
<div class="infordetail_bot ellipsis">
{{ item.newmeassage }}
</div>
</div>
</router-link>
</ul>
</section>
<!-- 群聊 -->
<section class="conversation">
<ul>
<router-link to="/groupchat" tag="li">
<div class="imgwipe">
<i class="redicon_num" v-if="newinfor">1</i>
<i class="redicon" v-if="newtext"></i>
<div class="imgstyle imgstyletwo">
<img
:src="item.avatar"
alt=""
v-for="(item, index) in groupHead"
:key="index"
/>
</div>
</div>
<div class="infordetail">
<div class="infordetail_top clear">
<span class="left ellipsis">群聊</span>
<span class="right">12:07</span>
</div>
<div class="infordetail_bot ellipsis">
请同学们文明交流~~~
</div>
</div>
</router-link>
</ul>
</section>
</div>
<!-- 输入用户名弹窗 -->
<section
class="consumer"
:class="{ consumeradd: consumer }"
v-if="consumerthing"
>
<div class="consumerbg"></div>
<div class="consumercon">
<section class="login">
<div class="useid" :class="{ useid_border: borderColor }">
<div class="mark">帐号</div>
<div class="input_mark">
<input
type="text"
placeholder="微信号(随便输入)"
v-model="inputaccounts"
@input="inpuMark"
@click="accountsMark"
/>
</div>
<div class="svg_close" v-if="accounts" @click="clearMark">
<svg fill="#c3c3c3">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#close"
></use>
</svg>
</div>
</div>
<div class="login_botton" @click="loginSuccess">
登 录
</div>
</section>
</div>
</section>
<!-- 底部导航 -->
<foot-guide></foot-guide>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/foot";
import { imgurl } from "src/config/env";
import { mapState, mapActions, mapMutations } from "vuex";
import { groupChat, userInfo, login, dialog } from "src/service/getData";
import fetch from "src/config/fetch";
export default {
data() {
return {
newinfor: false, //未静音时新消息提醒
newtext: false, //静音时消息提醒
dialogList: [],
consumer: false,
inputaccounts: "", //帐号
inputcode: "", //密码
accounts: false, //清除帐号
code: false, //清除密码
borderColor: true, //下边框颜色
borderColortwo: false,
timer: null,
groupHead: [],
dialogueList: [],
consumerthing: false
};
},
created() {
this.initData();
},
beforeDestroy() {},
beforeMount() {
//console.log(this.contactList)
},
mounted() {
groupChat().then(res => {
this.groupHead = [...res.grouphead];
});
dialog().then(res => {
this.dialogueList = [...res];
this.dialogueList = [...this.contactList, ...this.dialogueList];
});
},
components: {
headTop,
footGuide
},
computed: {
...mapState(["mute", "computershow", "infor", "contactList"])
},
methods: {
...mapMutations(["SAVE_MESSAGE", "LOGIN_COVER", "GET_USERINFO"]),
async initData() {
try {
const user_id = localStorage.getItem("user_id");
const res = await userInfo(user_id);
if (res.status !== 200) {
this.LOGIN_COVER(true);
} else {
this.GET_USERINFO(res.user_info);
}
} catch (err) {
console.log("获取用户信息失败", err);
this.LOGIN_COVER(true);
}
},
refreshInfor(item) {
this.SAVE_MESSAGE(item);
},
inpuMark() {
this.inputaccounts ? (this.accounts = true) : (this.accounts = false);
},
inpuCode() {
this.inputcode ? (this.code = true) : (this.code = false);
},
accountsMark() {
this.borderColor = true;
this.borderColortwo = false;
},
accountsCode() {
this.borderColor = false;
this.borderColortwo = true;
},
clearMark() {
this.inputaccounts = "";
this.accounts = false;
},
clearCode() {
this.inputcode = "";
this.code = false;
},
async loginSuccess() {
if (this.inputaccounts) {
this.consumer = true;
try {
const res = await login({ username: this.inputaccounts });
if (res.status == 200) {
localStorage.setItem("user_id", res.user_info.id.toString());
this.GET_USERINFO(res.user_info);
this.LOGIN_COVER(false);
}
} catch (err) {
console.log("注册失败", err);
this.LOGIN_COVER(true);
}
}
}
}
};
</script>
<style lang="scss" scoped>
@import "~src/style/public";
.router-show-enter-active,
.router-show-leave-active {
transition: all 0.4s;
}
.router-show-enter,
.router-show-leave-active {
transform: translateX(100%);
}
@keyframes fadeOut {
from {
opacity: 1;
}
100% {
opacity: 0;
}
}
.consumer {
position: fixed;
100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
.consumerbg {
position: fixed;
100%;
height: 100%;
top: 0;
background: #000;
opacity: 0.5;
}
.consumercon {
@include center;
.login {
background: #fff;
border-radius: 5px;
padding: 1rem;
12.3786666667rem;
margin: 0 auto;
.useid {
100%;
border-bottom: 1px solid #d4d4d4;
@include justify(flex-start);
align-items: center;
.mark {
@include sizeColor(0.64rem, #333);
letter-spacing: 0.5546666667rem;
line-height: 2.0266666667rem;
padding-left: 0.4266666667rem;
}
.input_mark {
margin-right: 0.34rem;
margin-left: 0.5rem;
@include widthHeight(5.1rem, 2.0266666667rem);
input {
display: inline-block;
5.1rem;
line-height: 2rem;
@include sizeColor(0.64rem, #333);
}
}
.svg_close {
@include widthHeight(0.64rem, 0.64rem);
svg {
display: block;
@include widthHeight(100%, 100%);
}
}
}
.useid_border {
border-color: #45c01a;
}
.login_botton {
margin-top: 1.536rem;
text-align: center;
background: #1aad19;
border: 1px solid #179e16;
border-radius: 5px;
line-height: 1.6rem;
@include sizeColor(0.7rem, #fff);
}
}
}
}
.consumeradd {
animation: fadeOut 0.4s 1 linear both;
}
.dialogue {
100%;
background: #fff;
.dialogue_con {
padding-top: 2.06933rem;
-webkit-overflow-scrolling: touch;
.computer {
@include widthHeight(100%, 1.9626666667rem);
background: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
.computer_link {
@include justify(flex-start);
.computer_icon {
@include widthHeight(1.2933333333rem, 1.9626666667rem);
margin-left: 1.0666666667rem;
margin-right: 0.96rem;
@include align;
svg {
@include widthHeight(100%, 1rem);
}
}
.computer_text {
line-height: 1.9626666667rem;
@include sizeColor(0.5546666667rem, #474747);
span {
display: inline-block;
@include sizeColor(0.5546666667rem, #474747);
}
}
}
}
.conversation {
100%;
ul {
100%;
li {
padding: 0.3413333333rem 0.5973333333rem;
box-sizing: border-box;
border-bottom: 1px solid #e0e0e0;
@include justify(flex-start);
.imgwipe {
@include widthHeight(2.0906666667rem, 2.0906666667rem);
position: relative;
margin-right: 0.512rem;
.redicon_num {
position: absolute;
right: -0.4rem;
top: -0.3rem;
@include widthHeight(0.8106666667rem, 0.8106666667rem);
@include sizeColor(0.512rem, #fff);
line-height: 0.8806666667rem;
padding: 0 4px;
text-align: center;
@include bg("../../images/warn.png");
}
.redicon {
position: absolute;
right: -0.21rem;
top: -0.21rem;
@include widthHeight(0.4266666667rem, 0.4266666667rem);
@include bg("../../images/warn.png");
border-radius: 50%;
}
.imgstyle {
@include widthHeight(2.0906666667rem, 100%);
display: flex;
justify-content: center;
flex-flow: row wrap;
align-items: flex-start;
align-content: flex-start;
overflow: hidden;
background: #dddbdb;
img {
10%;
height: auto;
border: 0;
flex-grow: 2;
}
}
.imgstyletwo {
img {
50%;
height: 50%;
flex-grow: 0;
}
}
}
.infordetail {
11.5626666667rem;
padding-top: 0.2133333333rem;
.infordetail_top {
100%;
padding-bottom: 0.2133333333rem;
span:nth-of-type(1) {
8.7466666667rem;
@include sizeColor(0.5973333333rem, #38373c);
}
span:nth-of-type(2) {
@include sizeColor(0.4266666667rem, #b2b6b9);
}
}
.infordetail_bot {
9.5573333333rem;
@include sizeColor(0.512rem, #9e9e9e);
}
}
}
}
}
}
}
</style>
接下来看computer页面
作者大大的css功力很强，模态框这些也是纯css的
<template>
<section>
<h1 class="goback">
<span @click="$router.go(-1)">关闭</span>
</h1>
<section class="computer">
<section class="computer_svg">
<div class="svgone">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#computer"></use>
</svg>
</div>
<div class="svgtwo" v-show="mute">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#phonemute"></use>
</svg>
</div>
</section>
<p class="computer_text">Windows 微信已登录</p>
<p class="computer_text">如果不是本人操作，可以立即退出</p>
<section class="soundoff">
<div class="silence">
<svg @click="ifMute">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="mute ? '#lightmute' : '#mute'"></use>
</svg>
</div>
<div class="silence">
<router-link to="/transfer">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#file"></use>
</svg>
</router-link>
</div>
</section>
<section class="exitw">
<div @click="exitWindows">退出 Windows 微信</div>
</section>
</section>
<section class="warn" v-show="coverShow">
<div class="warn_bg"></div>
<div class="warn_text">
<h1>
提示
</h1>
<p>是否退出 Windows 微信 ？</p>
<div class="warn_obt">
<span @click="cancel">取消</span>
<span @click="ensure">确定</span>
</div>
</div>
</section>
</section>
</template>
<script>
import headTop from '../../components/header/head'
import footGuide from '../../components/footer/foot'
import {mapState, mapMutations} from 'vuex'
export default{
data(){
return{
coverShow:false, //弹出层
}
},
created(){
},
mounted(){
},
components:{
headTop,
footGuide
},
computed:{
...mapState([
'mute'
])
},
methods:{
...mapMutations([
'RECORD_MUTE',
'COMPUTER_SHOW'
]),
ifMute(){
//记录是否静音
if(!this.mute){
this.RECORD_MUTE(true)
}else{
this.RECORD_MUTE(false)
}
},
exitWindows(){
this.coverShow=true;
},
cancel(){
this.coverShow=false;
},
ensure(){
this.COMPUTER_SHOW(false);
this.coverShow=false;
this.$router.push('/dialogue'); //跳转页面
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
.goback{
100%;
padding-top:1.28rem;
span{
display:block;
@include sizeColor(0.9386666667rem,#1aad19);
margin-left:1.0666666667rem;
}
}
.computer{
padding-top:3rem;
.computer_svg{
7.9786666667rem;
margin:0 auto;
position:relative;
.svgone{
@include widthHeight(7.9786666667rem,6.144rem);
svg{
@include widthHeight(100%, 100%);
}
}
.svgtwo{
position: absolute;
@include widthHeight(1.8rem,2.8rem);
background:#efeef2;
top:2.8266666667rem;
right:-.6rem;
svg{
@include widthHeight(100%, 100%);
}
}
}
.computer_text{
100%;
text-align:center;
@include sizeColor(0.7386666667rem,#353535);
margin-top:1rem;
}
.computer_text:nth-of-type(2){
margin-top:0.5rem;
@include sizeColor(0.6533333333rem,#999999)
}
.soundoff{
10.752rem;
margin:0 auto;
@include justify;
padding-top:2.1333333333rem;
.silence{
@include widthHeight(3.4133333333rem,3.4133333333rem);
background:#fff;
border-radius:50%;
position: relative;
svg{
@include widthHeight(1.3226666667rem,1.28rem);
@include center;
}
}
}
.exitw{
9.304rem;
margin:0 auto;
padding-top:2.1333333333rem;
padding-bottom:1.0666666667rem;
div{
@include widthHeight(9.304rem, 1.52rem);
line-height:1.52rem;
border:3px solid #28b126;
@include sizeColor(0.732rem,#28b126)
border-radius:5px;
text-align:center;
}
}
}
.warn{
position: absolute;
@include widthHeight(100%, 100%);
top:0;
left:0;
.warn_bg{
position: fixed;
@include widthHeight(100%, 100%);
background:#000;
opacity: .3;
top:0;
left:0;
}
.warn_text{
@include widthHeight(12.0466666667rem,6.6426666667rem);
padding:0.9386666667rem 1.152rem 0.7893333333rem 0.78933rem;
border-radius:5px;
position: fixed;
background:#fff;
left:0;
right:0;
margin:auto;
top:0;
bottom:0;
h1{
@include sizeColor(.9rem,#202020);
padding-bottom:0.4533333333rem;
}
p{
@include sizeColor(0.7rem,#202020);
padding-bottom:1rem;
}
.warn_obt{
@include justify(flex-end)
span{
display:block;
@include sizeColor(0.7rem,#808080)
}
span:nth-of-type(2){
@include sizeColor(0.7rem,#1aad19);
margin-left:1.0666666667rem;
}
}
}
}
</style>
<template>
<section>
<head-top logo-part="true" search-part="true" add="true"></head-top>
传送文件
<foot-guide></foot-guide>
</section>
</template>
<script>
import headTop from '../../components/header/head'
import footGuide from '../../components/footer/foot'
export default{
data(){
return{
}
},
created(){
},
mounted(){
},
components:{
headTop,
footGuide
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
</style>
接下来是search页面
页面数据部分也是直接写在data中的
//search.vue
<template>
<section>
<head-top crossover="true" search="true">
<section slot="searchpart">
<section class="searchpart" >
<div class="searchpart_svg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
</svg>
</div>
<div class="searchpart_input">
<input type="text" :placeholder="reminder"/>
</div>
</section>
</section>
</head-top>
<section class="search">
<h1>搜索指定内容</h1>
<ul class="clear">
<li v-for="item in searchlist" @click="changeValue(item.title)">{{item.title}}</li>
</ul>
</section>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
import {searchList} from 'src/service/getData.js'
export default{
data(){
return{
reminder:"搜索", //
searchlist:[], //搜索字段数据
}
},
created(){
},
mounted(){
searchList().then(res => {
this.searchlist=res;
})
},
components:{
headTop,
},
computed:{
},
methods:{
changeValue(title){
this.reminder = "搜索"+title
}
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.searchpart{
@include widthHeight(12rem,1.2rem);
border-bottom:1px solid #45c01a;
@include justify(flex-start);
align-items:center;
.searchpart_svg{
@include widthHeight(.8rem,.8rem);
margin-right:0.4693333333rem;
svg{
@include widthHeight(100%,100%);
}
}
.searchpart_input{
input{
display:block;
10rem;
line-height:1rem;
background:none;
@include sizeColor(0.615rem,#fff);
}
}
}
.search{
padding-top:4.5rem;
h1{
100%;
text-align:center;
@include sizeColor(0.6rem,#b1b1b1);
padding-bottom:2.1333333333rem;
}
ul{
12.8rem;
margin:0 auto;
box-sizing:border-box;
li{
float:left;
33.33%;
border-right:1px solid #dadada;
text-align:center;
@include sizeColor(0.6rem,#45c01a);
margin-bottom:2.24rem;
}
li:nth-of-type(3n+3){
border-right:0;
}
}
}
</style>
接下来看通讯录页面
这里作者大大应该是想做一个功能，点击右边的字母，然后左边对应的那一栏那里就滚动到对应的地方
<template>
<section>
<head-top logo-part="true" search-part="true" add="true"></head-top>
<!-- 联系人列表 -->
<section class="contacts" ref="contactList">
<div class="contacts_top">
<ul>
<router-link to="" tag="li" class="contacts_li">
<div class="contacts_img">
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#newfriend"
></use>
</svg>
</div>
<div class="contacts_text">
新的朋友
</div>
</router-link>
<router-link to="" tag="li" class="contacts_li">
<div class="contacts_img">
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#groupchat"
></use>
</svg>
</div>
<div class="contacts_text">
群聊
</div>
</router-link>
<router-link to="" tag="li" class="contacts_li">
<div class="contacts_img">
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#label"
></use>
</svg>
</div>
<div class="contacts_text">
标签
</div>
</router-link>
<router-link to="" tag="li" class="contacts_li">
<div class="contacts_img">
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#accounts"
></use>
</svg>
</div>
<div class="contacts_text">
公众号
</div>
</router-link>
</ul>
</div>
<div class="contacts_bottom" ref="addlistfather">
<ul class="contacts_bottom_ul" ref="addlist">
<li
v-for="(value, key, index) in manageaddress"
:key="index"
class="addlistLi"
>
<h1>{{ key }}</h1>
<ul>
<router-link
to="/addressbook/details"
tag="li"
v-for="(item, indexLink) in value"
:key="indexLink"
@click.native="detailMessage(item)"
>
<div class="personlist_img">
<img :src="item.headurl" alt="" />
</div>
<div class="personlist_name ellipsis">
{{ item.remarks ? item.remarks : item.petname }}
</div>
</router-link>
</ul>
</li>
</ul>
<section class="guide_wipe">
<section class="list_guide">
<dl>
<dd
v-for="(value, index) in sortlist"
:key="index"
@touchstart="startThing(value)"
@touchend="endThing"
>
{{ value }}
</dd>
</dl>
<p>#</p>
</section>
</section>
<section class="big-letter" v-if="letter">
<div class="letter-bg"></div>
<div class="letter">
{{ atpresent }}
</div>
</section>
<section class="peoplenum">{{ peoplenum }}位联系人</section>
</div>
</section>
<foot-guide></foot-guide>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/foot";
import { contactList } from "src/service/getData";
import { animate } from "src/config/mUtils.js";
import { mapMutations } from "vuex";
export default {
data() {
return {
contactList: {}, //所有通讯录列表
peoplenum: null, //通讯录人数
letter: false //字母放大
};
},
created() {},
beforeMount() {},
mounted() {
contactList().then(res => {
this.contactList = res;
});
},
components: {
headTop,
footGuide
},
computed: {
manageaddress() {
let addresslist = {};
for (let i = 65; i <= 90; i++) {
if (this.contactList[String.fromCharCode(i)]) {
if (this.contactList[String.fromCharCode(i)].length > 0) {
addresslist[String.fromCharCode(i)] = this.contactList[
String.fromCharCode(i)
];
this.peoplenum += Number(
this.contactList[String.fromCharCode(i)].length
);
}
}
}
return addresslist;
},
sortlist() {
let sortnumlist = [];
for (let i = 65; i <= 90; i++) {
sortnumlist.push(String.fromCharCode(i));
}
return sortnumlist;
}
},
methods: {
...mapMutations(["SAVE_MESSAGE"]),
detailMessage(item) {
this.SAVE_MESSAGE(item);
},
startThing(value) {
this.letter = true;
this.atpresent = value;
this.$nextTick(() => {
//滚动到通讯录分组的地方
const listArray = this.$refs.addlist.getElementsByClassName(
"addlistLi"
);
const getBody = document.getElementsByTagName("body")[0];
for (let i = 0; i < listArray.length; i++) {
if (listArray[i].getElementsByTagName("h1")[0].innerText == value) {
if (
this.$refs.addlistfather.offsetTop +
this.$refs.addlistfather.offsetHeight +
100 >=
listArray[i].offsetTop + document.body.clientHeight
) {
console.log(this.$refs.addlistfather.offsetTop);
console.log(this.$refs.addlistfather.offsetHeight);
console.log(listArray[i].offsetTop);
console.log(document.body.clientHeight);
animate(getBody, { scrollTop: listArray[i].offsetTop - 50 });
} else {
console.log(1);
var scrollval =
this.$refs.addlistfather.offsetTop +
this.$refs.addlistfather.offsetHeight;
animate(getBody, { scrollTop: scrollval });
}
}
}
});
},
endThing() {
this.letter = false;
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/public";
.router-show-enter-active,
.router-show-leave-active {
transition: all 0.4s;
}
.router-show-enter,
.router-show-leave {
transform: translateX(100%);
}
.contacts {
100%;
background: #fff;
padding-top: 2.06933rem;
.contacts_top {
ul {
14rem;
margin: 0 auto;
-webkit-overflow-scrolling: touch;
.contacts_li {
100%;
margin: 0.3413333333rem 0;
border-bottom: 1px solid #e0e0e0;
@include justify(flex-start);
align-items: center;
.contacts_img {
@include widthHeight(1.5786666667rem, 1.5786666667rem);
svg {
@include widthHeight(100%, 100%);
}
}
.contacts_text {
@include sizeColor(0.64rem, #2a2a2a);
margin-left: 0.5333333333rem;
}
}
.contacts_li:last-child {
border: 0;
}
}
}
.contacts_bottom {
.contacts_bottom_ul {
li {
100%;
h1 {
display: block;
background: #ebebeb;
line-height: 0.9813333333rem;
padding-left: 0.5973333333rem;
@include sizeColor(0.384rem, #8a8a8a);
}
ul {
14rem;
margin: 0 auto;
li {
padding: 0.3413333333rem 0;
@include justify(flex-start);
border-bottom: 1px solid #e0e0e0;
align-items: center;
.personlist_img {
@include widthHeight(1.5786666667rem, 1.5786666667rem);
img {
@include widthHeight(100%, 100%);
}
}
.personlist_name {
@include sizeColor(0.64rem, #2a2a2a);
margin-left: 0.5333333333rem;
12.6rem;
}
}
li:last-child {
border: 0;
}
}
}
}
.guide_wipe {
position: fixed;
30px;
height: 100%;
top: 0;
right: 0;
.list_guide {
position: fixed;
z-index: 10;
top: 50%;
transform: translateY(-50%);
right: 0.2986666667rem;
dl {
dd {
@include sizeColor(0.58rem, #585858);
text-align: center;
}
}
p {
@include sizeColor(0.54rem, #585858);
}
}
}
.big-letter {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
3.3706666667rem;
height: 3.3706666667rem;
.letter-bg {
position: absolute;
top: 0;
left: 0;
3.3706666667rem;
height: 3.3706666667rem;
background: #000;
opacity: 0.6;
border-radius: 5px;
}
.letter {
position: relative;
z-index: 10;
3.3706666667rem;
line-height: 3.3706666667rem;
text-align: center;
font-size: 2rem;
color: #fff;
font-family: SimSun !important;
}
}
}
}
.peoplenum {
padding-bottom: 3rem;
text-align: center;
margin-top: 0.5rem;
@include sizeColor(0.6rem, #666);
}
</style>
接下来是detail页面
其实很有意思的，页面上面的值都是写在state里面的
<template>
<section class="child_page">
<head-top crossover="详细资料"></head-top>
<div class="details">
<div class="details_li">
<div class="details_left">
<img :src="infor.headurl" alt="">
</div>
<div class="details_right">
<div class="details_right_top">
<span>{{infor.remarks ? infor.remarks : infor.petname}}</span>
<div class="sexsvg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" infor.sex == 0 ? '#boy' : '#girl' "></use>
</svg>
</div>
</div>
<div class="details_right_obt">
微信号：{{infor.wxid}}
</div>
</div>
</div>
<div class="details_li">
<router-link to='' class="setnote">
设置备注和标签
</router-link>
</div>
<div class="details_person">
<div class="details_person_top">
<div class="area_details_left">
地区
</div>
<div class="area_details_right">
{{infor.district}}
</div>
</div>
<div class="person_photo">
<router-link to='' class="details_person_a">
<div class="person_photo_left">
个人相册
</div>
<div class="person_photo_right clear">
<img :src="value" alt="" v-for="value in gallery">
</div>
</router-link>
</div>
<div class="details_person_more">
<router-link to='/addressbook/details/more' class="clickmore">
更多
</router-link>
</div>
</div>
<div class="sendmessage"><!-- -->
<router-link to='/singlechat' class="send" @click.native="enterdDialogue">
发消息
</router-link>
</div>
</div>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
import {mapState, mapMutations} from 'vuex'
export default{
data(){
return{
gallery:[] //个人相册
}
},
created(){
},
mounted(){
this.gallery=this.infor.gallery;
},
components:{
headTop,
},
computed:{
...mapState([
"infor", "contactList", "conversine"
]),
},
methods:{
...mapMutations([
"SAVE_DIALOGUE",
]),
enterdDialogue(){
this.SAVE_DIALOGUE(this.infor);
}
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave-active{
transform:translateX(100%)
}
.child_page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.details{
100%;
padding-top:2.9226633rem;
.details_li{
padding:0.512rem 0.5973333333rem;
background:#fff;
margin-bottom:0.8533333333rem;
@include justify(flex-start);
.details_left{
margin-right:1.024rem;
img{
display: block;
@include widthHeight(2.7306666667rem,2.7306666667rem);
}
}
.details_right{
.details_right_top{
@include justify(flex-start);
align-items: center;
margin-top:0.256rem;
margin-bottom:0.4266666667rem;
span{
display:block;
@include sizeColor(0.64rem,#000);
margin-right:0.4266666667rem;
}
.sexsvg{
@include widthHeight(.64rem,.90rem);
@include align(top);
svg{
@include widthHeight(100%,.64rem);
}
}
}
.details_right_obt{
@include sizeColor(0.512rem,#666);
}
}
.setnote{
display:block;
100%;
@include sizeColor(0.64rem,#000);
}
}
.details_person{
padding:0.512rem 0.5973333333rem;
background:#fff;
.details_person_top{
@include justify(flex-start);
border-bottom:1px solid #e2e2e2;
padding-bottom:0.6826666667rem;
.area_details_left{
@include sizeColor(0.64rem,#000);
}
.area_details_right{
@include sizeColor(0.512rem,#666);
margin-left:2.432rem;
@include align(center);
}
}
.details_person_more{
.clickmore{
display:block;
100%;
padding-top:0.7253333333rem;
@include sizeColor(0.64rem,#000);
}
}
.person_photo{
border-bottom:1px solid #e2e2e2;
.details_person_a{
display:block;
@include justify(flex-start);
.person_photo_left{
@include sizeColor(0.64rem,#000);
@include align(center);
}
.person_photo_right{
margin-left:1.0666666667rem;
padding:0.3413333333rem 0;
img{
float:left;
@include widthHeight(2.56rem,2.56rem);
margin-right:16px;
}
}
}
}
}
.sendmessage{
14.1653333333rem;
margin:0 auto;
margin-top:0.8533333333rem;
.send{
display:block;
border-radius:5px;
text-align:center;
14.1226666667rem;
border:1px solid #3e8d3e;
background:#1aad16;
@include sizeColor(0.7253333333rem,#fff);
letter-spacing:4px;
line-height:2.0053333333rem;
}
}
}
</style>
接下来看这个页面
作者大大写代码很灵活，点击选项的那个是用的swiper装的，项目很有经验
<template>
<section>
<head-top :crossover="chatname">
<section class="coversPart" slot="person">
<router-link to='/singlechat/chatmessage' class="person_link">
<svg fill="#fff" class="icon-search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#person"></use>
</svg>
</router-link>
</section>
</head-top>
<section class="coversation" ref="singleHeight">
<section class="coversationlist" @click="bottomHide">
<div class="underscore">———— 我是机器人小辰，现在我们可以聊天了 ————</div>
<ul>
<!-- 对方 -->
<li v-for="item in conversine">
<div class="other" :class="{mysay : item.sendobject !== 1 }">
<img :src="item.headurl" alt="" @click="enlargeImg(item.headurl)">
<div class="whatsay">
<div class="whatsay_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="item.sendobject !== 1 ? '#trigon-right' : '#trigon-left'"></use>
</svg>
</div>
<div class="whatsay_text">
{{item.Messageblob}}
</div>
</div>
</div>
</li>
</ul>
</section>
</section>
<footer :class=" {footshow : clickmore}">
<section class="foot_top">
<div>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#voice"></use>
</svg>
</div>
<div>
<input type="text" v-model="inputmessage" maxlength="100" @input="whatInput" @click="inputBottomHide" :class="{lightborder : light}" @keyup.enter="enterThing">
</div>
<div>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#face"></use>
</svg>
</div>
<div>
<div class="send" v-if="light" @click="clickSend">
<span>发送</span>
</div>
<svg v-else @click="bottomShow">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#addthing"></use>
</svg>
</div>
</section>
<section class="foot_bottom">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(value,item) in chatData">
<ul class="clear">
<li v-for="value in value">
<div class="swiper_svg">
<svg fill="#7a8187">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="value.chatSvgid"></use>
</svg>
</div>
<div class="swiper_text">
{{value.chatSvgname}}
</div>
</li>
</ul>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
</footer>
<section class="enlarge" v-if="enlarge" @click="enlargeHide" :class="{'movein-animate' : enlargeShow, 'moveout-animate-leave' : enlargehides}" >
<img :src="enlargeurl" alt="">
</section>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from 'src/components/header/head';
import {mapState, mapActions,} from 'vuex';
import {userWord, chatData} from 'src/service/getData'
import {imgurl} from 'src/config/env';
import 'src/config/swiper.min.js'
import 'src/style/swiper.min.css'
import fetch from 'src/config/fetch'
export default{
data(){
return{
inputmessage:'',//输入的文本内容
light:false, //输入框不为空时，input下边框变色
clickmore:false, //点击加号底部显示、隐藏
chatname:'', //聊天名字
ifme:false, //发消息的对象是否是自己
enlargeurl:'', //头像地址
enlargehides:false,
enlargeShow:false,
enlarge:false,
timer:null,
conversine:[], //对话列表
robotCont:'',
newInfo:{},
chatData:{},
userInfoData:{}
}
},
created(){
},
mounted(){
chatData().then((res) => {
this.chatData=res;
}).then(()=>{
//初始化swiper
new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
loop: false,
});
})
this.chatname=this.infor.remarks ? this.infor.remarks : this.infor.petname;
this.getUserInfo();
this.userInfoData=this.userInfo
userWord().then((res) => {
//this.conversine=[...res]
});
},
components:{
headTop,
},
computed:{
...mapState([
"infor", "userInfo",
]),
},
beforeDestroy(){
clearTimeout(this.timer);
},
methods:{
...mapActions([
'getUserInfo',
]),
whatInput(){
if(this.inputmessage.replace(/s+/g, "") == ''){
this.light=false;
}else{
this.light=true;
}
},
enterThing(){
if(this.light){
this.clickSend()
}
},
bottomShow(){
this.clickmore=true;
},
bottomHide(){
this.clickmore=false;
},
inputBottomHide(){
this.clickmore=false;
},
async clickSend(){
this.conversine.push({
"wxid":"xulianjie442154157",
"headurl":imgurl+this.userInfoData.avatar,
"sendobject":0,
"Messageblob":this.inputmessage,
});
const inputmessage = this.inputmessage;
this.inputmessage='';
this.$nextTick(()=>{
window.scrollTo(0,this.$refs.singleHeight.offsetHeight-window.innerHeight)
})
try{
const res = await fetch('/robot/question', {question: inputmessage})
this.light=false;
if (res.status == 200) {
this.infor.Messageblob=res.content
this.conversine.push({
"wxid":this.infor.wxid,
"headurl":this.infor.headurl,
"sendobject":this.infor.sendobject,
"Messageblob":res.content,
});
this.$nextTick(()=>{
window.scrollTo(0,this.$refs.singleHeight.offsetHeight-window.innerHeight)
})
}else{
throw new Error(res)
}
}catch(err){
alert('获取机器人聊天信息失败', err);
}
},
enlargeImg(enlargeImg){
this.enlargeurl=enlargeImg;
this.enlarge=true;
this.enlargeShow=true;
this.enlargehides=false;
},
enlargeHide(){
clearTimeout(this.timer)
this.enlargehides=true;
this.enlargeShow=false;
this.timer = setTimeout(() =>{
this.enlarge=false;
},400)
}
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave-active{
transform:translateX(100%)
}
.coversPart{
@include topcenter;
right:0.5973333333rem;
@include widthHeight(0.8533333333rem,0.8533333333rem);
.person_link{
display:block;
@include widthHeight(0.8533333333rem,0.8533333333rem);
svg{
@include widthHeight(100%,100%);
}
}
}
.coversation{
background-color: #ebebeb;
-webkit-overflow-scrolling: touch;
padding-top: 2.06933rem;
.coversationlist{
position: relative;
padding:0 .32rem;
overflow:auto;
margin:0 auto;
.underscore{
padding-top:0.2rem;
text-align:center;
@include sizeColor(0.5546666667rem,#999);
}
ul{
padding-top:.4rem;
padding-bottom:2.2rem;
15.4rem;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
top:0;
li{
.other{
100%;
@include justify(flex-start);
margin-bottom:0.512rem;
align-items:top;
img{
display:block;
@include widthHeight(1.7493333333rem,1.7493333333rem);
}
.whatsay{
position: relative;
.whatsay_svg{
@include widthHeight(0.4266666667rem,0.64rem);
position: absolute;
top:.5546667rem;
left:.36rem;
z-index:2;
svg{
display:block;
@include widthHeight(0.4266666667rem,0.64rem);
}
}
.whatsay_text{
margin-left:0.6399997rem;
max-10.3253333333rem;
background:#fff;
padding:0.42rem 0.384rem;
border:1px solid #d9d9d9;
border-radius:8px;
@include sizeColor(0.64rem, #333);
line-height:0.8533333333rem;
word-break: break-all;
}
}
}
.mysay{
display:flex;
flex-direction:row-reverse;
.whatsay{
.whatsay_svg{
right:.36rem;
left:auto;
}
.whatsay_text{
margin-right:0.6399997rem;
margin-left:0;
background:#9fe658;
}
}
}
}
}
}
}
footer{
position: fixed;
z-index:10;
border-top:1px solid #e0e0e0;
background:#f5f5f5;
bottom:-11.712rem;
100%;
.foot_top{
padding:0 0.512rem;
height:2.0053333333rem;
background:#f3f3f3;
@include justify(flex-start);
align-items:center;
div:nth-of-type(1),div:nth-of-type(3),div:nth-of-type(4){
@include widthHeight(1.3653333333rem,1.3653333333rem);
margin-right:0.3413333333rem;
svg{
@include widthHeight(100%, 100%);
}
}
div:nth-of-type(2){
margin-right:0.3413333333rem;
9.8rem;
height:1.152rem;
border-bottom:1px solid #e0e0e0;
input{
display:block;
9.8rem;
padding:0 0.4133333333rem;
line-height:1.152rem;
height:1.152rem;
border:0;
background:none;
@include sizeColor(0.64rem,#000);
border-bottom:1px solid #e0e0e0;
}
.lightborder{
border-color:#19ad17;
}
}
div:nth-of-type(4){
margin-right:0;
.send{
1.8133333333rem;
background:#16af17;
height:1.3653333333rem;
padding:.682666rem 0;
border-radius:5px;
@include justify(center);
align-items:center;
span{
display:block;
@include sizeColor(0.5973333333rem,#fff);
}
}
.send:active{
background:#33c034;
}
}
}
.foot_bottom{
height:11.712rem;
border-top:1px solid #e0e0e0;
.swiper-container{
100%;
height:11.712rem;
overflow:hidden;
.swiper-slide{
100%;
ul{
padding:1.408rem 1.1946666667rem 0;
box-sizing:border-box;
li{
float:left;
2.5466666667rem;
margin-right:1rem;
margin-bottom:1.1946666667rem;
.swiper_svg{
@include widthHeight(2.5466666667rem,2.5466666667rem);
background:#fcfcfc;
border:1px solid #d3d3d3;
border-radius:10px;
@include justify(center);
align-items:center;
svg{
@include widthHeight(1.28rem,0.9386666667rem);
display:block;
}
}
.swiper_text{
100%;
margin-top:0.256rem;
text-align:center;
@include sizeColor(0.4693333333rem,#7a8187);
}
}
li:nth-of-type(4n+4){
margin-right:0;
}
}
}
}
}
}
.footshow{
bottom:0;
transition: all .2s;
}
.enlarge{
position:fixed;
@include widthHeight(100%,100%);
background:#000000;
top:0;
z-index:100;
img{
display:block;
100%;
height:15.0186666667rem;
position: absolute;
top:50%;
left:0;
margin-top:-7.5093333333rem;
}
}
.enlarge_part{
display:none;
}
body .movein-animate{
transition:all 1s;
animation:fadeIn .6s;
}
body .moveout-animate-leave{
transition:all 1s;
animation:zoomOut .6s;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
100% {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
100% {
opacity: 0;
}
}
</style>
看看发现页面的代码
<template>
<section>
<head-top logo-part="true" search-part="true" add="true"></head-top>
<find-me></find-me>
<foot-guide></foot-guide>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from '../../components/header/head'
import findMe from '../../components/findandMe/findandMe'
import footGuide from '../../components/footer/foot'
export default{
data(){
return{
newtext:true,
}
},
created(){
},
mounted(){
},
components:{
headTop,
findMe,
footGuide
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave-active{
transform:translateX(100%)
}
</style>
把中间的部分抽成了组件
作者大大很有经验，弹出层的动画也写的很棒
<template>
<section>
<section class="find">
<router-link :to="$route.path.indexOf('find') !== -1 ? '/find/friendcircle' : '/me/personaldetails' " class="findlist" @click.native="firendThing">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg " :class="{'findlist_svg_me' : $route.path.indexOf('me') !== -1}">
<img :src="userHeader" alt="" v-if="pathUrl">
<svg v-else>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#friendcircle"></use>
</svg>
</section>
<section class="me_name" v-if="pathUrl">
<div>{{userInfo.name}}</div>
<div>微信号：{{userInfo.name}}</div>
</section>
<section class="findlist_text" v-else>
朋友圈
</section>
</div>
<div class="findlist_right">
<svg fill="#949494" v-if="pathUrl">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#QRcode"></use>
</svg>
<div v-else>
<img :src="newGetImage" alt="">
<i class="redicon" v-if="firendwarn"></i>
</div>
</div>
</div>
</router-link>
<section to="" class="findlist">
<div class="find_wipe" @click="photoAlbum">
<div class="findlist_left">
<section class="findlist_svg">
<svg fill="#10aeff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" pathUrl ? '#photo' : '#onesweeptwo'"></use>
</svg>
</section>
<section class="findlist_text" >
<span v-if="pathUrl">相册</span>
<span v-else>扫一扫</span>
</section>
</div>
</div>
<div class="find_wipe" @click="collect">
<div class="findlist_left">
<section class="findlist_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" pathUrl ? '#collect' : '#shark' "></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">收藏</span>
<span v-else>摇一摇</span>
</section>
</div>
</div>
</section>
<section to="" class="findlist">
<div class="find_wipe" @click="wallet">
<div class="findlist_left">
<section class="findlist_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" pathUrl ? '#burse' : '#nearby'"></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">钱包</span>
<span v-else>附近的人</span>
</section>
</div>
</div>
</section>
<section to="" class="findlist">
<div class="find_wipe" @click="shoppSth">
<div class="findlist_left">
<section class="findlist_svg">
<svg data-v-38f704c5="" fill="#10aeff">
<use data-v-38f704c5="" xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="pathUrl ? '#cardbag' : '#shopping'"></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">卡包</span>
<span v-else>购物</span>
</section>
</div>
</div>
<div class="find_wipe" @click="gamesFace">
<div class="findlist_left">
<section class="findlist_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="pathUrl ? '#smile' : '#games' "></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">表情</span>
<span v-else>游戏</span>
</section>
</div>
</div>
</section>
<router-link :to="pathUrl ? '/me/settings' : '/find/miniapps'" class="findlist">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg fill="#7586db">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="pathUrl ? '#set' : '#small' "></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">设置</span>
<span v-else>小程序</span>
</section>
</div>
</div>
</router-link>
</section>
<section class="reminder" v-if="alertreminder">
<div class="reminder_cover"></div>
<div class="reminder_content" :class="{alertshow : remindershow, alerthide : reminderhide}">
<img :src="gifSrc" alt="" class="alertimg">
<p class="alert_text">正在开发中...</p>
<div class="alert_affirm" @click="affirmAlert">确认</div>
</div>
</section>
</section>
</template>
<script>
import {userInfo} from 'src/service/getData'
import {imgurl} from 'src/config/env';
import {mapState,mapActions,mapMutations} from 'vuex';
import {circle} from 'src/service/getData'
export default{
data(){
return{
pathUrl : this.$route.path.indexOf("me") !== -1,
alertreminder:false, //弹出层是否显示
remindershow:false, //显示时的动画
reminderhide:false, //隐藏时的动画
gifSrc:'',
timer:null,
newGetImage:'', //朋友圈动态第一个头像
userHeader:'' //用户头像
}
},
props: ['mepart',],
created(){
this.gifSrc=imgurl+'reminder.gif';
},
beforeDestroy(){
clearTimeout(this.timer)
},
beforeMount(){
this.getUserInfo();
},
mounted(){
this.userHeader=imgurl + this.userInfo.avatar
circle().then( (res) =>{
for(let i=0; i < res.length; i++){
this.newGetImage=res[0].headurl;
return
}
})
},
components:{
},
computed:{
...mapState([
'firendwarn', 'userInfo'
]),
},
methods:{
...mapActions([
'getUserInfo',
]),
...mapMutations([
"CHANGE_RED",
]),
firendThing(){
if(this.$route.path.indexOf("find") !== -1){
this.CHANGE_RED(false);
}
},
showPart(){
this.alertreminder=true;
this.remindershow=true;
this.reminderhide=false;
},
photoAlbum(){//相册或扫一扫
if(this.$route.path.indexOf("find") !== -1){
this.showPart()
}else{
this.$router.push('/me/photoalbum')
}
},
collect(){//摇一摇或收藏
if(this.$route.path.indexOf("find") !== -1){
this.showPart()
}else{
this.$router.push('/me/collect')
}
},
wallet(){//附近的人或钱包
if(this.$route.path.indexOf("find") !== -1){
this.showPart()
}else{
this.$router.push('/me/wallet')
}
},
shoppSth(){
if( this.pathUrl ){//购物或卡包
this.$router.push('/me/cardbag')
}else{
window.location.href="https://wqs.jd.com/portal/wx/portal_indexV4.shtml?PTAG=17007.13.1&ptype=1"
}
},
gamesFace(){
this.showPart()
},
affirmAlert(){//提醒确认
this.reminderhide=true;
this.remindershow=false;
this.timer=setTimeout(()=>{
clearTimeout(this.timer);
this.alertreminder=false;
},1000);
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
.find{
padding-top:3.06933rem;
padding-bottom:2.28267rem;
.findlist{
padding:0 0.8533333333rem;
background:#fff;
display:block;
margin-bottom:1rem;
.find_wipe{
@include justify;
align-items:center;
padding-bottom:0.2533333333rem;
padding-top:0.2533333333rem;
border-bottom:1px solid #e0e0e0;
.findlist_left{
@include justify(flex-start);
align-items:center;
.findlist_svg{
@include widthHeight(1.408rem,1.408rem);
svg{
@include widthHeight(100%,100%);
}
}
.findlist_svg_me{
@include widthHeight(2.7306666667rem,2.7306666667rem);
img{
@include widthHeight(100%,100%);
}
}
.findlist_text{
@include sizeColor(0.64rem,#2a2a2a);
margin-left:.6rem;
span{
display:block;
@include sizeColor(0.64rem,#2a2a2a);
}
}
.me_name{
@include sizeColor(0.64rem,#969696);
margin-left:.6rem;
div:nth-of-type(1){
color:#333;
margin-bottom:0.2133333333rem;
}
}
}
.findlist_right{
position: relative;
@include widthHeight(1.6rem,1.6rem);
@include align;
div{
@include widthHeight(1.6rem,1.6rem);
overflow: hidden;
img{
display:block;
@include widthHeight(100%,100%);
}
}
.redicon{
position: absolute;
right:-0.21rem;
top:-0.21rem;
@include widthHeight(0.4266666667rem,0.4266666667rem);
@include bg('../../images/warn.png');
border-radius:50%;
}
svg{
@include widthHeight(1rem,1rem);
}
}
}
.find_wipe:last-child{
border:0;
}
}
}
.reminder{
position: fixed;
@include widthHeight(100%,100%);
top:0;
z-index:10;
.reminder_cover{
position: absolute;
top:0;
@include widthHeight(100%,100%);
background:#000;
opacity:.4;
}
.reminder_content{
position: absolute;
background:#fff;
border-radius:8px;
13rem;
height:14rem;
top:50%;
margin-top:-7rem;
left:50%;
margin-left:-6.5rem;
.alertimg{
display:block;
@include widthHeight(6.4rem,5.9733333333rem);
margin:0.4266666667rem auto 1.28rem;
}
.alert_text{
100%;
text-align:center;
font-weight:700;
@include sizeColor(.8rem,#B6FF00);
-webkit-animation: neon4 0.5s ease-in-out infinite alternate;
-moz-animation: neon4 0.5s ease-in-out infinite alternate;
animation: neon4 0.5s ease-in-out infinite alternate;
}
.alert_affirm{
8rem;
margin:2.1333333333rem auto 0;
line-height:1.8rem;
border-radius:5px;
text-align:center;
background:#1aad19;
letter-spacing:0.1066666667rem;
@include sizeColor(0.7253333333rem,#fff);
}
}
.alertshow{
animation: tada 1s 1 ease-in-out both;
}
.alerthide{
animation: zoomOutDown 1s 1 ease-in-out both;
}
}
@keyframes neon4 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #B6FF00,
0 0 70px #B6FF00,
0 0 80px #B6FF00,
0 0 100px #B6FF00,
0 0 150px #B6FF00;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #B6FF00,
0 0 35px #B6FF00,
0 0 40px #B6FF00,
0 0 50px #B6FF00,
0 0 75px #B6FF00;
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
</style>
接下来是这个页面
<template>
<section class="child_page">
<head-top
crossover="朋友圈"
clickrefresh="friendcicle"
@refreshPage="freshPage"
></head-top>
<section class="friend_wipe" ref="friend">
<section class="friend">
<div class="theme">
<div class="themeinit" @click="exportInput"></div>
<div :class="{ shoowimg: !imagestatus }" @click="exportInput">
<img :src="newImg" id="imgSrc" ref="imgSrc" class="imgSrc" />
</div>
<div class="themetext" :class="{ shoowimg: imagestatus }">
轻触更换主题照片
</div>
<div class="personImg">
<div class="personame">{{ userInfo.name }}</div>
<div class="headimg" @click="personInfor">
<img :src="userHeader" alt="" />
</div>
</div>
</div>
<div class="coverinput" :class="{ shoowinput: afterclcik }">
<div class="coverinputbg" @click="hideIput"></div>
<div class="coverfiletext">
<div class="wipeinput">
更换相册封面
<input type="file" class="coverfile" id="input_file" />
</div>
</div>
</div>
<div class="condition">
<ul>
<li
class="condition_li"
v-for="(item, index) in circleData"
:key="index"
>
<div class="condition_left">
<img :src="item.headurl" alt="" />
</div>
<div class="condition_right">
<h1>{{ item.remarks ? item.remarks : item.petname }}</h1>
<div class="publishtext">
{{ item.statements }}
</div>
<div
class="publishimg clear"
v-show="item.postimage.length > 0"
>
<img
alt=""
v-for="(value, imgIndex) in item.postimage"
:key="imgIndex"
:src="value"
:class="{
releaseimg: item.postimage.length >= 2 ? true : false
}"
/>
</div>
<div class="commentbutton">
<div class="button_left clear">
<span>1小时前</span>
<span v-if="userInfo.wxid == item.wxid ? true : false"
>删除</span
>
</div>
<div class="button_right">
<svg class="button_svg" @click="showDiscuss(item)">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#comment"
></use>
</svg>
<div
class="discuss"
v-if="item.criticism"
:class="{
discusshow: item.reviewshow,
discusshide: item.reviewhide
}"
>
<div @click="supportThing(item)">
<svg fill="#fff" :class="{ surportdiv: likediv }">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#like"
></use>
</svg>
<span ref="suporttext">{{ item.suporthtml }}</span>
</div>
<div @click="criticismThing(item)">
<svg fill="#fff">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#discuss"
></use>
</svg>
<span>评论</span>
</div>
</div>
</div>
</div>
<div
class="retext"
v-show="item.like.length > 0 || item.comment.length > 0"
>
<svg class="retext_trigon" fill="#efefef">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#trigon"
></use>
</svg>
<div
class="retext_like clear"
:class="{ likeborder: item.comment.length > 0 }"
v-show="item.like.length > 0"
>
<svg class="retext_like_svg" fill="#8792b0">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#like"
></use>
</svg>
<span
v-for="(value, likeIndex) in item.like"
:key="likeIndex"
>{{ value }}<i>,</i></span
>
</div>
<div class="retext_revert" v-show="item.comment.length > 0">
<ul>
<li
v-for="(value, commentIndex) in item.comment"
:key="commentIndex"
>
<span>{{
value.remarks ? value.remarks : value.petname
}}</span
>：{{ value.commentext }}
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 评论 -->
<section class="criticism" v-if="criticismstate">
<div class="criticism_con">
<textarea
name=""
id=""
cols="30"
rows="10"
ref="textinput"
v-model="textareaVlue"
@input="inputCriticism"
@keyup.enter="enterThing"
></textarea>
<span :class="{ notempty: changeinput }" @click="commentSend"
>发送</span
>
</div>
</section>
</section>
</section>
</section>
</template>
<script>
import headTop from "src/components/header/head";
import uploadPreview from "src/config/uploadPreview.js";
import { animate } from "src/config/mUtils";
import { imgurl } from "src/config/env";
import { circle } from "src/service/getData";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
data() {
return {
filevalue: "",
imageSrc: false, //显示的是图片还是文字
afterclcik: true, //点击显示上传图片的input
releaseimgnum: true, //上传的图片数是否大于1
timer: null, //定时器
timers: null, //点赞定时器
bordercss: true, //点赞的下边框
likenum: true, //点赞的人数
circleData: [],
likediv: false, //点击时svg图放大
textareaVlue: "", //评论输入的内容
changeinput: false, //控制发送按钮状态的改变
criticismstate: false, //评论显隐
itemlist: {}, //点击当前的li
userInfoData: {}, //用户信息
userHeader: "" //用户头像
};
},
created() {},
beforeDestroy() {
clearTimeout(this.timer);
clearTimeout(this.timers);
},
mounted() {
this.userInfoData = this.userInfo;
this.userHeader = imgurl + this.userInfoData.avatar;
//上传图片并展示图片（无剪裁功能）
new uploadPreview({
UpBtn: "input_file",
ImgShow: "imgSrc",
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: () => {
this.afterclcik = true;
this.newImg = this.$refs.imgSrc.src;
this.SAVE_THEMIMG({ newImg: this.$refs.imgSrc.src, imagestatus: true });
}
});
this.getUserInfo();
//获取朋友圈数据
circle().then(res => {
this.circleData = res;
});
},
components: {
headTop
},
computed: {
...mapState(["newImg", "userInfo", "imagestatus"])
},
methods: {
...mapMutations(["SAVE_THEMIMG", "SAVE_MESSAGE"]),
...mapActions(["getUserInfo"]),
enterThing() {
this.commentSend();
},
exportInput() {
this.afterclcik = false;
},
hideIput() {
this.afterclcik = true;
this.SAVE_THEMIMG(this.$refs.imgSrc.src);
},
commentShow(item) {
item.criticism = true;
item.reviewshow = true;
item.reviewhide = false;
item.flag = false;
},
commentHide(item) {
item.reviewshow = false;
item.reviewhide = true;
this.timer = setTimeout(() => {
clearTimeout(this.timer);
item.criticism = false;
}, 1000);
item.flag = true;
},
showDiscuss(item) {
//点击评论按钮点赞与评论出现
if (item.flag) {
this.commentShow(item);
} else {
this.commentHide(item);
}
},
freshPage() {
//点击头部页面滚动到顶部
const getBody = document.getElementsByTagName("body")[0];
animate(getBody, { scrollTop: 0 });
},
personInfor() {
//点击头像进入个人资料页
this.SAVE_MESSAGE(this.userInfoData);
this.$router.push("/addressbook/details");
},
supportThing(item) {
//点赞
this.likediv = true;
clearTimeout(this.timers);
this.timers = setTimeout(() => {
this.likediv = false;
}, 200);
this.commentHide(item);
if (item.suporthtml == "赞") {
item.suporthtml = "取消";
item.like.push(this.userInfoData.name);
} else {
item.suporthtml = "赞";
item.like.pop();
}
},
criticismThing(item) {
//评论
this.itemlist = {};
this.itemlist = item;
this.criticismstate = true;
this.$nextTick(() => {
this.$refs.textinput.focus();
});
this.commentHide(item);
},
inputCriticism() {
//文本框是否为空
this.textareaVlue
? (this.changeinput = true)
: (this.changeinput = false);
},
commentSend() {
//评论点击发送
if (this.changeinput) {
if (this.textareaVlue) {
this.itemlist.comment.push({
wxid: this.userInfoData.id,
petname: this.userInfoData.name,
commentext: this.textareaVlue
});
}
this.criticismstate = false;
this.textareaVlue = "";
this.changeinput = false;
}
}
}
};
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page {
position: absolute;
100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #f8f8f8;
}
.refresh {
position: absolute;
@include widthHeight(12rem, 2rem);
background: #fff;
left: 2rem;
}
.friend_wipe {
100%;
padding-bottom: 1rem;
background-color: #f8f8f8;
overflow: scroll;
-webkit-overflow-scrolling: touch;
.friend {
padding-top: 2.06933rem;
background-color: #f8f8f8;
.theme {
100%;
margin-top: -1px;
height: 11.3706666667rem;
position: relative;
.themeinit {
100%;
height: 11.3706666667rem;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.6;
}
.imgSrc {
display: block;
position: absolute;
top: 0;
z-index: 4;
100%;
height: 11.3706666667rem;
}
.shoowimg {
display: none;
}
.themetext {
@include center;
@include sizeColor(0.6rem, #000);
z-index: 2;
}
.personImg {
position: absolute;
right: 0.512rem;
z-index: 6;
bottom: -1.3866666667rem;
@include justify(flex-end);
.personame {
display: block;
margin-right: 0.512rem;
@include sizeColor(0.64rem, #fff);
margin-top: 0.96rem;
}
.headimg {
background: #fff;
border: 1px solid #e2e2e2;
img {
margin: 0.064rem;
display: block;
@include widthHeight(3.4133333333rem, 3.4133333333rem);
}
}
}
}
.coverinput {
position: absolute;
z-index: 11;
top: 0;
100%;
height: 100%;
.coverinputbg {
position: fixed;
100%;
height: 100%;
top: 0;
background: #000;
opacity: 0.3;
}
.coverfiletext {
@include center;
z-index: 5;
11rem;
height: 2.048rem;
line-height: 2.048rem;
background: #fff;
border-radius: 3px;
@include sizeColor(0.64rem, #333);
.wipeinput {
position: relative;
padding-left: 1rem;
.coverfile {
position: absolute;
display: block;
top: 0;
left: 0;
11rem;
height: 2.048rem;
opacity: 0;
}
}
}
}
.shoowinput {
display: none;
}
.condition {
100%;
padding-top: 1.5786666667rem;
ul {
100%;
.condition_li {
padding: 0.512rem;
border-bottom: 1px solid #e2e2e2;
@include justify(flex-start);
.condition_left {
1.792rem;
margin-right: 0.2986666667rem;
img {
display: block;
@include widthHeight(1.792rem, 1.792rem);
}
}
.condition_right {
12.9026666667rem;
h1 {
display: block;
padding-top: 0.1706666667rem;
@include sizeColor(0.5546666667rem, #8792b0);
}
.publishtext {
margin-top: 0.064rem;
100%;
@include sizeColor(0.5546666667rem, #333);
line-height: 0.7466666667rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
word-break: break-all;
}
.publishimg {
100%;
margin-top: 0.3413333333rem;
img {
40%;
float: left;
height: auto;
}
.releaseimg {
3.6266666667rem;
margin-right: 0.1066666667rem;
margin-bottom: 0.1066666667rem;
height: 3.6266666667rem;
}
}
.commentbutton {
@include justify;
.button_left {
margin-top: 0.576rem;
span {
float: left;
@include sizeColor(0.4693333333rem, #666);
margin-right: 0.4266666667rem;
}
span + span {
color: #8792b0;
}
}
.button_right {
margin-top: 0.6826666667rem;
position: relative;
@include widthHeight(0.9386666667rem, 0.64rem);
.button_svg {
display: block;
@include widthHeight(100%, 100%);
}
.discuss {
position: absolute;
@include widthHeight(8.2346666667rem, 1.7066666667rem);
background: #373b3e;
border-radius: 3px;
right: 1.408rem;
top: -0.5973333333rem;
box-sizing: border-box;
@include align;
div {
50%;
float: left;
@include justify(center);
svg {
display: block;
@include widthHeight(0.768rem, 0.768rem);
margin-right: 0.2133333333rem;
}
span {
display: block;
@include sizeColor(0.5546666667rem, #fff);
}
}
div:first-child {
border-right: 2px solid #2f3336;
}
.surportdiv {
animation: pulse 0.5s;
}
}
.discusshow {
animation: flipInX 1s 1 ease-in-out both;
}
.discusshide {
animation: flipOutX 1s 1 ease-in-out both;
}
}
}
.retext {
margin-top: 0.128rem;
.retext_trigon {
display: block;
@include widthHeight(0.8rem, 0.4rem);
margin-left: 0.4266666667rem;
}
.retext_like {
background: #efefef;
padding: 0.3413333333rem;
.retext_like_svg {
float: left;
@include widthHeight(0.512rem, 0.512rem);
margin-right: 0.2133333333rem;
margin-top: 0.064rem;
}
span {
float: left;
margin-right: 0.2133333333rem;
@include sizeColor(0.512rem, #8792b0);
i {
@include sizeColor(0.512rem, #8792b0);
}
}
span:last-child {
@include sizeColor(0.512rem, #8792b0);
i {
display: none;
}
}
}
.likeborder {
border-bottom: 1px solid #e2e2e2;
}
.retext_revert {
background: #efefef;
ul {
padding: 0.3413333333rem;
li {
border: 0;
padding-bottom: 0.1rem;
@include sizeColor(0.5546666667rem, #333);
span {
display: inline-block;
color: #8792b0;
}
}
}
}
}
}
}
.condition_li:last-child {
border: 0;
}
}
}
.criticism {
position: fixed;
left: 0;
z-index: 10;
bottom: 0;
100%;
background: #ebebeb;
.criticism_con {
padding: 0.4266666667rem 0.64rem;
@include justify(space-between);
textarea {
display: block;
12rem;
height: 1.5rem;
max-height: 3.2rem;
border: 0;
border-bottom: 2px solid #18ae17;
resize: none;
@include sizeColor(0.64rem, #333);
line-height: 0.768rem;
background: none;
padding-top: 0.32rem;
}
span {
display: block;
1.8rem;
@include sizeColor(0.5546666667rem, #d2d2d2);
border: 1px solid #d7d7d7;
text-align: center;
border-radius: 5px;
line-height: 1.3653333333rem;
}
.notempty {
background: #18ae17;
color: #fff;
border-color: #3e8d3e;
}
}
}
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
</style>
直接嵌套路由到对应的页面
<template>
<section class="child_page">
<head-top crossover="设置"></head-top>
<section class="settings">
<ul>
<router-link to='/me/settings/newmessage' tag="li">
新消息提醒
</router-link>
<router-link to='/me/settings/disturbance' tag="li">
勿扰模式
</router-link>
<router-link to='/me/settings/chat' tag="li">
聊天
</router-link>
<router-link to='/me/settings/privacy' tag="li">
隐私
</router-link>
<router-link to='/me/settings/currency' tag="li">
通用
</router-link>
</ul>
<ul>
<router-link to='/me/settings/aboutwc' tag="li">
关于微信
</router-link>
<!-- <router-link to='/me/settings/help' tag="li">
帮助与反馈
</router-link> -->
<router-link to='/me/settings/login' tag="li">
退出
</router-link>
</ul>
</section>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
export default{
data(){
return{
}
},
created(){
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page{
position: fixed;
100%;
height:100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave-active{
transform:translateX(100%)
}
.settings{
padding-top: 3.06933rem;
ul{
background:#fff;
padding:0 0.64rem;
margin-bottom:1rem;
li{
border-bottom:1px solid #f1f1f1;
padding:0.4266666667rem 0;
@include sizeColor(0.64rem,#333);
}
li:last-child{
border:0;
}
}
}
</style>
<template>
<section class="child_page">
<head-top crossover="新消息提醒"></head-top>
<section class="newmessage">
<ul>
<li>
<div>接收新消息通知</div>
<div class="push-button">
<input class='tgl tgl-light' id='new' type='checkbox' v-model="checked">
<label class='tgl-btn' for='new'></label>
</div>
</li>
<li>
<div>接收语音和视频聊天邀请通知</div>
<div class="push-button">
<input class='tgl tgl-light' id='video' type='checkbox' checked>
<label class='tgl-btn' for='video'></label>
</div>
</li>
</ul>
<ul class="newshow" v-if="checked">
<li>
<div class="newshow_choose">
<div>通知显示消息详情</div>
<div class="push-button">
<input class='tgl tgl-light' id='detail' type='checkbox'>
<label class='tgl-btn' for='detail'></label>
</div>
</div>
<div class="newshow_text">
若关闭，当收到微信消息时，通知提示将不显示发信人和内容摘要。
</div>
</li>
</ul>
<ul v-if="checked">
<li>
<div>声音</div>
<div class="push-button">
<input class='tgl tgl-light' id='voice' type='checkbox' v-model="checkedname">
<label class='tgl-btn' for='voice'></label>
</div>
</li>
<li class="new_music" v-if="checkedname">
<div>新消息提示音</div>
<div class="voice-music">
notification_001
</div>
</li>
<li>
<div>振动</div>
<div class="push-button">
<input class='tgl tgl-light' id='vibrate' type='checkbox' checked>
<label class='tgl-btn' for='vibrate'></label>
</div>
</li>
</ul>
</section>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
export default{
data(){
return{
checked:true,
checkedname:true,
}
},
created(){
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave{
transform:translateX(100%)
}
.newmessage{
padding-top: 3.06933rem;
ul{
background:#fff;
padding:0 0.64rem;
margin-bottom:1rem;
li{
border-bottom:1px solid #f1f1f1;
padding:0.4266666667rem 0;
@include sizeColor(0.64rem,#333);
@include justify;
align-items:center;
.push-button{
}
.voice-music{
@include sizeColor(0.512rem,#9c9c9c);
}
}
li:last-child{
border:0;
}
}
.newshow{
li{
display: inherit;
.newshow_choose{
@include justify;
align-items:center;
}
.newshow_text{
@include sizeColor(0.5546666667rem,#909090);
margin-top:0.2133333333rem;
}
}
}
}
</style>
设置部分风格类似，代码都是类似的
不过登录不一样，我们看看登录的处理
看了代码不得不赞叹作者大大是一个css高手，代码写的很精妙很喜欢
<template>
<section class="child_page">
<head-top logoPart="login"></head-top>
<section class="login">
<div class="useid" :class="{'useid_border' : borderColor}">
<div class="mark">帐号</div>
<div class="input_mark"><input type="text" placeholder="微信号(随便输入)" v-model="inputaccounts" @input="inpuMark" @click="accountsMark" /></div>
<div class="svg_close" v-if="accounts" @click="clearMark">
<svg fill="#c3c3c3">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use>
</svg>
</div>
</div>
<div class="useid" :class="{'useid_border' : borderColortwo}">
<div class="mark">密码</div>
<div class="input_mark"><input type="password" placeholder="密码(随便输入)" maxlength="16" @input="inpuCode" v-model="inputcode" @click="accountsCode" /></div>
<div class="svg_close" v-if="code" @click="clearCode">
<svg fill="#c3c3c3">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use>
</svg>
</div>
</div>
<div class="login_botton" @click="loginSuccess">
登 录
</div>
</section>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
export default{
data(){
return{
inputaccounts: "", //帐号
inputcode: "", //密码
accounts: false, //清除帐号
code: false, //清除密码
borderColor:true, //下边框颜色
borderColortwo: false
}
},
created(){
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
inpuMark(){
this.inputaccounts ? this.accounts=true : this.accounts=false;
},
inpuCode(){
this.inputcode ? this.code=true : this.code=false;
},
accountsMark(){
this.borderColor=true;
this.borderColortwo=false;
},
accountsCode(){
this.borderColor=false;
this.borderColortwo=true;
},
clearMark(){
this.inputaccounts="";
this.accounts=false;
},
clearCode(){
this.inputcode="";
this.code=false;
},
loginSuccess(){
if(this.inputaccounts){
this.$router.push('/dialogue')
}
}
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #fff;
}
.login{
padding-top: 2.6rem;
14.3786666667rem;
margin:0 auto;
.useid{
100%;
border-bottom:1px solid #d4d4d4;
@include justify(flex-start);
align-items:center;
.mark{
@include sizeColor(0.64rem, #333);
letter-spacing:0.5546666667rem;
line-height:2.0266666667rem;
padding-left:0.4266666667rem;
}
.input_mark{
margin-right:0.34rem;
margin-left:1rem;
@include widthHeight(9.1rem,2.0266666667rem);
input{
display:inline-block;
9.1rem;
line-height:2rem;
@include sizeColor(0.64rem, #333);
}
}
.svg_close{
@include widthHeight(0.64rem, 0.64rem);
svg{
display:block;
@include widthHeight(100%, 100%);
}
}
}
.useid_border{
border-color:#45c01a;
}
.login_botton{
margin-top:1.536rem;
text-align:center;
background:#1aad19;
border:1px solid #179e16;
border-radius:5px;
line-height:1.6rem;
@include sizeColor(.7rem,#fff);
}
}
</style>
<template>
<section class="child_page">
<head-top crossover="个人信息"></head-top>
<section class="privacy">
<section class="privacy_top">
<div class="privacy_child">
<span>头像</span>
<img :src="userHeader" alt="">
</div>
<div class="privacy_child">
<span>昵称</span>
<span>{{userInfo.name}}</span>
</div>
<div class="privacy_child">
<span>微信号</span>
<span>{{userInfo.name}}</span>
</div>
<div class="privacy_child">
<span>二维码名片</span>
<svg fill="#949494">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#QRcode"></use>
</svg>
</div>
<div class="privacy_child">
<span>我的地址</span>
<span>{{userInfo.district}}</span>
</div>
</section>
<section class="privacy_top">
<div class="privacy_child">
<span>性别</span>
<span>{{userInfo.sex == 1 ? '女' : '男' }}</span>
</div>
<div class="privacy_child">
<span>地区</span>
<span>{{userInfo.district}}</span>
</div>
<div class="privacy_child">
<span>个性签名</span>
<span>{{userInfo.sdasd}}</span>
</div>
</section>
</section>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
import {imgurl} from 'src/config/env';
import {mapState, mapActions} from 'vuex'
export default{
data(){
return{
userInfo:{}, //用户信息
userHeader:'' //用户头像
}
},
created(){
this.getUserInfo();
},
mounted(){
this.userInfo=this.userInfo;
this.userHeader=imgurl + this.userInfo.avatar
},
components:{
headTop,
},
computed:{
...mapState([
"userInfo",
]),
},
methods:{
...mapActions([
'getUserInfo',
])
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.privacy{
padding-top: 3.06933rem;
.privacy_top{
background:#fff;
margin-bottom:0.8533333333rem;
padding:0 0.5973333333rem;
.privacy_child{
@include justify(space-between);
border-bottom:1px solid #e2e2e2;
align-items:center;
position: relative;
span{
display:block;
@include sizeColor(0.64rem,#333);
@include align;
line-height:2.0266666667rem;
}
span+span{
@include sizeColor(0.5546666667rem,#999);
}
img{
display:block;
@include widthHeight(2.7306666667rem,2.7306666667rem);
margin:0.3413333333rem 0;
}
svg{
display:block;
@include widthHeight(0.768rem,0.768rem);
}
}
.privacy_child:last-child{
border:0;
}
}
}
</style>
<template>
<section class="child_page">
<head-top crossover="我的相册"></head-top>
<section class="photoalbum scroll">
<div class="container">
<ul>
<li v-for="item in photoData">
<div class="photo_left">
<span>{{item.albumday}}</span>
<span>{{item.albummonth}}</span>
</div>
<div class="photo_right">
<div class="albumdetail">
<div class="teletext clear" v-if="item.diagram" v-for="value in item.diagram">
<div class="teletext_left left" :class="{ manyimg : value.diagramimg.length>2}">
<img :src="values" alt="" v-for="values in value.diagramimg">
</div>
<div class="teletext_right left">
<span>{{value.diagramtext}}</span>
<span v-if=" value.diagramimg.length > 1 ">共{{value.diagramimg.length}}张</span>
</div>
</div>
<div class="teletexttwo" v-if="item.puretext" v-for="value in item.puretext">
<p>{{value}}</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
import {album} from 'src/service/getData.js'
export default{
data(){
return{
photoData:[],
}
},
created(){
},
beforeMount(){
album().then((res) => {
this.photoData = res;
})
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page{
position: absolute;
100%;
height:100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #fff;
}
.photoalbum{
padding-top:2.06933rem;
background-color: #fff;
.container{
100%;
padding-top:0.4266666667rem;
ul{
li{
@include justify(flex-start);
padding:0 0.512rem;
margin-bottom:1.1946666667rem;
.photo_left{
@include justify(flex-start);
align-items:baseline;
3.2rem;
span{
display:block;
@include sizeColor(0.9386666667rem,#030303);
font-weight:700;
}
span:nth-of-type(2){
font-size:0.5546666667rem
}
}
.photo_right{
.albumdetail{
.teletext{
margin-bottom:0.2133333333rem;
.teletext_left{
@include widthHeight(3.1573333333rem,3.1573333333rem);
overflow:hidden;
display: flex;
justify-content: center;
flex-flow:row wrap;
align-items: flex-start;
align-content: flex-start;
img{
@include widthHeight(3.1573333333rem,3.1573333333rem);
10%;
border: 0;
flex-grow:2;
}
}
.manyimg{
img{
50%;
height:50%;
flex-grow:0;
}
}
.teletext_right{
7.68rem;
height: 3.15733rem;
margin-left:0.256rem;
position:relative;
span{
display:block;
@include sizeColor(0.5973333333rem,#030303);
line-height:0.8533333333rem;
}
span:nth-of-type(1){
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
span:nth-of-type(2){
@include sizeColor(0.512rem,#999);
position: absolute;
bottom:-6px;
left:0;
}
}
}
.teletexttwo{
padding:0.2986666667rem;
background:#ebebeb;
margin-bottom:0.2133333333rem;
p{
@include sizeColor(0.5973333333rem,#030303);
10.4533333333rem;
line-height:0.8533333333rem;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#ebebeb;
}
}
}
}
}
}
}
}
</style>
值也是写在data里面的
同样值是写在data里面的
<template>
<section class="child_page">
<head-top crossover="我的钱包"></head-top>
<section class="wallet">
<div class="wallet_top">
<div>
<section class="svgimg">
<svg class="button_svg" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gathering"></use>
</svg>
</section>
<section class="svg_name">
收付款
</section>
</div>
<div>
<section class="svgimg">
<svg class="button_svg" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#notecase"></use>
</svg>
</section>
<section class="svg_name">
零钱
</section>
</div>
<div>
<section class="svgimg">
<svg class="button_svg" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#debitcard"></use>
</svg>
</section>
<section class="svg_name">
银行卡
</section>
</div>
</div>
<div class="wallet_bot">
<ul class="wallet_ul">
<li class="wallet_li" v-for="(value,key) in serviceData" :key="key">
<h1>{{key}}</h1>
<ul class="clear">
<li v-for="(item,index) in value" :key="index">
<img :src="item.servicelogo" alt="">
<span>{{item.servicename}}</span>
</li>
</ul>
</li>
</ul>
</div>
</section>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
import {burse} from 'src/service/getData.js'
export default{
data(){
return{
serviceData:{},
}
},
created(){
},
beforeMount(){
burse().then((res) => {
this.serviceData=res
})
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "~@/style/public";
.child_page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.wallet{
padding-top:2.06933rem;
padding-bottom:4rem;
height:30rem;
overflow-y: auto;
-webkit-overflow-scrolling:touch;
.wallet_top{
100%;
background:#666f76;
padding-bottom:0.8533333333rem;
padding-top:1.1946666667rem;
@include justify(space-around);
div{
.svgimg{
@include widthHeight(1.536rem,1.536rem);
margin: 0 auto;
svg{
display:block;
@include widthHeight(100%,100%);
}
}
.svg_name{
@include sizeColor(0.64rem,#fff);
margin-top:0.2133333333rem;
}
}
}
.wallet_bot{
100%;
.wallet_ul{
.wallet_li{
h1{
display:block;
font-weight:500;
padding:0.704rem 0 0.384rem 0.64rem;
background:#ecf0f3;
@include sizeColor(0.5546666667rem,#333);
}
ul{
100%;
background:#fff;
box-sizing:border-box;
li{
33.333%;
float:left;
border-right:1px solid #d6d6d6;
border-bottom:1px solid #d6d6d6;
height:5.12rem;
img{
display:block;
1.0666666667rem;
height:auto;
margin:auto;
margin-bottom:0.8106666667rem;
margin-top:1.28rem;
}
span{
display:block;
@include sizeColor(0.5546666667rem,#333);
text-align:center;
}
}
li:nth-of-type(3n+3){
border-right:0;
}
}
}
}
}
}
</style>
<template>
<section class="child_page">
<head-top crossover="卡包"></head-top>
<section class="carbag">
<h1>优惠券</h1>
<ul>
<li>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#firendCard"></use>
</svg>
<span>朋友的优惠券</span>
</li>
<li>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Cards"></use>
</svg>
<span>我的票券（0）</span>
</li>
</ul>
</section>
</section>
</template>
<script>
import headTop from 'src/components/header/head'
export default{
data(){
return{
}
},
created(){
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.child_page{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.carbag{
padding-top:2.06933rem;
h1{
display:block;
padding:0.512rem 0;
padding-left:0.4266666667rem;
@include sizeColor(0.512rem,#666);
}
ul{
padding:0 0.4266666667rem;
li{
background:#fff;
border-radius:5px;
@include justify(flex-start);
align-items:center;
padding:1.0666666667rem 0;
margin-bottom:0.2986666667rem;
svg{
display:block;
margin-left:0.576rem;
margin-right:0.5973333333rem;
@include widthHeight(2.0053333333rem,1.408rem);
}
span{
display:block;
@include sizeColor(0.6826666667rem,#000);
}
}
}
}
</style>
作者大大的项目写的很有意思，里面关于vuex还有css和逻辑结合在一起的代码觉得非常的精妙，向作者大大学习