Commit e03e192f authored by 郭铭瑶's avatar 郭铭瑶 🤘

添加来福士页面

parent 12cc19aa
File added
This diff is collapsed.
This diff is collapsed.
.my-title[data-v-338bb78b]{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;justify-content:flex-start;position:relative;font-weight:700;background:url(./title-bg.15abdf5b.png) center/cover no-repeat;z-index:1}.my-title .date[data-v-338bb78b]{z-index:2;position:absolute;right:1%}.my-title .date span[data-v-338bb78b]{display:block;text-align:right}.my-title h1[data-v-338bb78b]{font-family:Pangmenzhengdao,Avenir,Helvetica,Arial,sans-serif;width:18%;text-align:center;z-index:2;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(to bottom,#fff,#00c7ff);font-size:.22rem;letter-spacing:.05rem;margin-top:.5%}.left-section[data-v-2c227862]{backdrop-filter:blur(.05rem);-webkit-backdrop-filter:blur(.05rem);padding:.05rem;box-sizing:border-box;border-top:.01rem solid rgba(91,213,255,.5);border-bottom:.01rem solid rgba(91,213,255,.5);background:linear-gradient(to bottom,rgba(30,193,255,.3),transparent 5%,transparent 95%,rgba(30,193,255,.3) 100%);display:flex;flex-direction:column}.left-section>.my-card[data-v-2c227862]:nth-of-type(1){flex:2}.left-section>.my-card[data-v-2c227862]:nth-of-type(2),.left-section>.my-card[data-v-2c227862]:nth-of-type(3),.left-section>.my-card[data-v-2c227862]:nth-of-type(4),.left-section>.my-card[data-v-2c227862]:nth-of-type(5){flex:1}.form .row[data-v-2c227862]{display:flex;align-items:center;background:rgba(113,235,255,.05)}.form .row[data-v-2c227862]:nth-of-type(2n){background:rgba(0,0,0,.1)}.form .col[data-v-2c227862]{flex:1;display:flex;align-items:center;padding:.04rem .08rem;box-sizing:border-box}.form .col .label[data-v-2c227862]{color:#5bd5ff;width:.6rem}.form .col .value[data-v-2c227862]{flex:1}.photos[data-v-2c227862]{display:flex;justify-content:space-between}.photos>img[data-v-2c227862]{width:15%}.right-section[data-v-4dd6bc71]{backdrop-filter:blur(.05rem);-webkit-backdrop-filter:blur(.05rem);padding:.05rem;box-sizing:border-box;border-top:.01rem solid rgba(91,213,255,.5);border-bottom:.01rem solid rgba(91,213,255,.5);background:linear-gradient(to bottom,rgba(30,193,255,.3),transparent 5%,transparent 95%,rgba(30,193,255,.3) 100%);display:flex;flex-direction:column}.right-section>.my-card[data-v-4dd6bc71]:nth-of-type(1){flex:3}.right-section>.my-card[data-v-4dd6bc71]:nth-of-type(2){flex:1}.sum[data-v-4dd6bc71]{display:flex}.sum>div[data-v-4dd6bc71]{padding:.05rem 0;box-sizing:border-box;display:flex;justify-content:space-around;flex:2}.sum>div p[data-v-4dd6bc71]{display:flex;align-items:center}.sum>div p .count[data-v-4dd6bc71]{font-size:.14rem;color:#fff}.sum>div p i[data-v-4dd6bc71]{display:inline-block;width:.04rem;height:.04rem;margin:0 .04rem}.sum>div p span[data-v-4dd6bc71]{font-size:.08rem;color:#ccc;margin-left:.03rem}.sum>div[data-v-4dd6bc71]:last-child{flex:3;background:url(./msg-wrapper3.0442f355.png) center/cover no-repeat}.sum>div:last-child p[data-v-4dd6bc71]{color:#70a7e0}.chart[data-v-4dd6bc71]{width:100%;height:1.5rem}.box[data-v-4dd6bc71]{display:flex}.box>div[data-v-4dd6bc71]{padding:0 .05rem;flex:1}.box>div .sub-title[data-v-4dd6bc71]{font-size:.12rem;font-family:ZCool,Avenir,Helvetica,Arial,sans-serif;color:#32c5ff}.box>div .sub-title[data-v-4dd6bc71]:before{content:'';display:inline-block;width:.02rem;height:.02rem;background:#32c5ff;margin-right:.04rem;margin-bottom:.04rem}.business-wrapper[data-v-4dd6bc71]{display:flex;width:100%}.business-wrapper .pie[data-v-4dd6bc71]{width:50%;height:1rem}.business-wrapper .legend[data-v-4dd6bc71]{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:0 .05rem;box-sizing:border-box}.business-wrapper .legend>div[data-v-4dd6bc71]{display:flex;align-items:center;justify-content:space-between}.business-wrapper .legend>div p[data-v-4dd6bc71]{display:flex;align-items:center}.business-wrapper .legend>div p i[data-v-4dd6bc71]{display:inline-block;width:.06rem;height:.06rem;border-radius:50%;margin-right:.04rem}.stores[data-v-4dd6bc71]{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);padding:.06rem;box-sizing:border-box;grid-gap:.06rem}.stores>img[data-v-4dd6bc71]{width:.4rem;height:.4rem}.table[data-v-4dd6bc71]{display:flex}.table>div[data-v-4dd6bc71]{border:.01rem solid rgba(0,118,255,.5)}.table>div+div[data-v-4dd6bc71]{border-left:none}.table>div[data-v-4dd6bc71]:nth-of-type(2),.table>div[data-v-4dd6bc71]:nth-of-type(3){flex:1}.table>div p[data-v-4dd6bc71]{padding:.04rem .06rem;box-sizing:border-box;background:rgba(0,118,255,.15)}.table>div p[data-v-4dd6bc71]:first-child{background:rgba(0,118,255,.3);border-bottom:.01rem solid rgba(0,118,255,.5)}
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
import{d as A,p as a,a as G,r as V,o as U,b as k,F as e,f as s,g as H,e as l,t as J,w as t,k as f}from"./index.1cbf3b1f.js";var r=A({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"},align:{type:String,default:"horizontal"}}});const i=t("data-v-42bff056");a("data-v-42bff056");const o={key:1},F={class:"count-group"},N=f(" / ");G();const y=i(((A,a,G,t,f,r)=>{const i=V("m-count");return U(),k("div",{class:["brief-container",{vertical:"vertical"===A.align}]},[(U(!0),k(e,null,s(A.list,(a=>(U(),k("div",{key:a.name},[a.icon?(U(),k("img",{key:0,src:a.icon,style:`width:${A.size};height:${A.size}`},null,12,["src"])):H("",!0),Array.isArray(a.value)?(U(),k("div",o,[l("div",F,[l(i,{class:"count orange-count",value:a.value[0],style:{color:A.color}},null,8,["value","style"]),N,l(i,{class:"count",value:a.value[1]},null,8,["value"])]),l("p",null,J(a.name),1)])):(U(),k("div",{key:2,class:{center:!a.icon}},[l(i,{class:"count",style:{color:A.color},value:a.value},null,8,["style","value"]),l("p",null,J(a.name),1)],2))])))),128))],2)}));r.render=y,r.__scopeId="data-v-42bff056";var W="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAzFBMVEUAAABGU2FHU2FGVGFHU2JHVWJSW2RGVGFHU2FGVGFHVGJGU2JHU2JHVGJGVGNGU2JHU2FIVWJHVWNIVGRHVWNHV2JIVWJNVWRIWGhOWGJOWWRgYIBGVGFGU2H///9HVGLIzNDFyc65vcPM0NTAxMlLWGW0ub9JVmTKzdHq7O3Y296RmaFZZXH5+fpteIOkqrGdo6t/iJH09PXU19qssriorrXg4uWvtbuVnKSNlZ52f4r8/P2fpq2ZoKiHj5hPXGnw8fJmcXzl5+nO0dUpLOmeAAAAHXRSTlMA7/e+n14O4d/SycGvqaOZkHJsUksvJyEgGhcIzxuWPt0AAAL7SURBVFjDzdlrU+IwFAbgpBfuFxFQUE8qKLqusFAQFFBQ9///p51CaYCTpk3aYX2/QDPOM4NpT5MTEplWo1Y18zlqGDSXN6u1RoskS9u2soCStey2rpixTQiNaWc0yAvLAGkM60KRbJYdiIxTbiqQVxWImcpVXPOcQuzQ81jkZQGUUriMNusUFEPrUeYZaORMSl6XQCula8ntXgTNFDOh5g1o5yZEvS5CghTF/4ESJEpJbd7174E6JE4dPUc0OUqPn60CpJDCUQ2BVHJ+UOtoOijdr4Sy+umoqBVuNiE0j93BqwrbDNByuNlhjHUV1HLwjnNkpprqXPioJTNVVcsvTobU/FRTjW25sqXm/fpOTbU3KFqHTMbj+8B0oKemmp7ZRsMDxmbcdFXVtv/rMRqYD2yoqNr+3CP0m5sMq9HznxWhzDdfGVNWs4S0QIRyU0NtkYYI5aafdxW1QWr4/hxwU0utkSoyd3P0wvYziq9WiSkxNVWT5CNMno+4ap7k5KZcXbkiNEeo0JwyUd6O1MfPJxFKyUHdw6ZYfYBNXMYWgGMcoH1uytVBD7zc+zxCD37+aGMOGYtQ5+BlPWBs/IhRejRR8yE3xXmG3tT1/9i7dkUTlYfDIBOru/z1LjsYzaObf8SistrNwNK7GqwRaqLH9FcEyefmY3s5FzymNRnaeR95GU5E6Gx7OREUlIYEXQWjLxj9Yn76uPS1wtEZOG9dLy6slwidBpUGF2mSDUU7sNh+Wfbh6Rh1gpEZfp0QS4I++9/+YHTBB77wi8/WQ7t84AW/ottaaG/MB54ctJggpg66YntZoGUPsXXQ6UH1xgu0jKGBOn0vYzb3PgRLSWKpokHGuEhZaHmujeLlOSkroZ+/gyzZ9+ZzEthltOWRotJM8JaHVNJCK+Jt5PA2yDu4d9t8QfdWls4CbSPT3/CmvzVPv4mQfrvjNI2Z5C2kkzW7krfl0m8gnrTVqd+UPW37WL/RfdqWvP7hQfrHHP//QCbO0dHPOeTSP477B1UmiA9hyxqPAAAAAElFTkSuQmCC",g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAA/1BMVEUAAABQWmlGVGJXY3dHVGJKV2ZMWGRGVGFHU2JGVGFGVGJGVGJHU2JHVGJGU2JGU2FGU2FGVGFGVGJGVGFHVGJHVGJHVWNHVWNHVGFGU2JGU2JGU2FGVGFIVWNJWGVJWmZeXolHU2FGVGJHU2JHVGJHVGJHU2JPXGlGVGJHVGFIVGNJVGRHU2JIVGFHVWNGU2H////v8PF/iJGlrLKDjJVXY2/P09ZweoXa3N/U19uEjZbX2t1IVmP39/ifpa3s7u/e4eOts7mKk5tkbnpNWWf5+frz9PWyt72JkZpdaXVUYG3Dx8y+wsd4goxWYm/k5ujHy8/Gys6RmaGNlZ1teIPO8mTWAAAAL3RSTlMADe0HjR4V+KqZ5raT/Z7w4tTGr11XUEr8+4jYvT8kGQTgy756aWYSzL9DLKRxNjJ7DTMAAALqSURBVFjDtdlrV6JAGMDxBxQQRcVbXjItray23QdyN2u9ZdrNrb1//8+yHdxzOMAMDMPwe8s5/xPDNMIMRFIPTrOFasUsl839QcE4uehDMqM9o4IB+3pDBU6ZvVobKVqFRoYjqWRlDFXWexBPT9cwUuvyA7CTjBayKTEPbj2PzORTYKEWMJaqApEu8hiTvAcRjosYXxbCHOrIJZcJme415DSUqM1z5HZGqR7WMIFz8gjomEiO+NyRhn8OHLQwqcB8VfOYmKyAVwEFqIJHA4U48ax19JtfLW2K5VNw4VbBlUWav1aICfpduk2ljTRXYdHPGOD+FhhIMHt52URG6f8CfQ2DxnPLuoofLfZgp4NB95bFFcXS/4WE9Oi/8UY1yYk2keCaN4p1J5qLjj4svnos5vRo15n4WnT0Z2B06NFi37n76Ojj/cTj+dGNEu8/i8LG1H3+Z6KjJoBUFB1FBT6h8GgT6uKjH6HDFLVvPOzQqA45lujdzLeCTcOi5zDkieJtWLQCA6bbX956LENv/wj2xT8oGfLioxqYKUTTuf2B+OgRDMVHK7TJ/2f8bo24Hjumu8pq7LFGoiF0kMVvpzlHJjptQfn+xbVF3DpL/dPugouyoBCXvtlq7hm7V8Q327J+bXD7w3NhvpqRlj7iIr2wfN4QN5MXRHzyX1lgkEL8ObmzfG426Fg/+K/cEWYU+aXHtvyuneGbBC/Y5B++JkvUenhdjJ25Gx2tk18mbIuZTX6ZgJzYaNd9QRMXrbuvksKiZQkcHZHREuyomrCo+3oOhrhojvrJM2WPTv2fPNSPs2f26L1/RF2S6atObSZTX7OspvHBm/6nOagmJiYrqW13iN+YEb+FRFTDBLoZIMp0kdtAEr+B2JVS2uqkO+aZWR2IcBB/+7iZ8kY3XUPglrxLMtrIpFgaATuF5ZijXepBPP3IAxlD4Ts60qh/pHN0xEciH3IZjREkM3o/jqtVK0eybFaqhezJhQpR/gELzf2xdHMvgwAAAABJRU5ErkJggg==",R="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAxlBMVEUAAABGU2FGVGFHU2JSW2RGVGFHVGFHU2JGVGFHU2FHVGJGU2JHU2JHVGJGVGNGU2JHU2FIVWJHVWNIVWJHVWNIVGRHVWNHV2JIVWJNVWRIWGhOWGJOWWRgYIBGU2H///+vtLrn6evs7e6rsbessrhIVWOxt735+vp/iJFQXGr9/f3Lz9PHy8+pr7WGjpddaHXw8fKYn6d6g41kb3tMWGbh4+Xb3eDZ3N+5vcOhp6+coqqJkppweoXP09bAxMmUm6P09PWutLoRdq4UAAAAHnRSTlMA776fDtH59eHfycGvqaOZkHJsYF1SSy8nISAaFwgj1Df0AAACoklEQVRYw82Z63aiMBCAExDFe71hizqs6wJy81LrpWrb3fd/qT3NObRKCEQSz+73p4c/X4VMZiYTlItpdNqKVsXlMq5qSrtjmEiMUV/VgUJX+6OixlJPASZKr1RA+ahWIJOK+nijcti0IRe7OUT8jFvASWvM6+xi4AZ3uZRPNbiJ2lO+c4DhRvAgz/kABXjIVE4aUIjGJCPc61CQeonp1KAwGsM6qYMA9fQv0AAhGnzrLh4DAxBmQO0jDMLg5N6qAZuX5+jwfnrh2LGJHAIslh+ha32y5bB2r3IdZvxEZ2p9MYNc8GUmbAHNZh241iV7nvx6kefppL6eWkl+AgfftaAJSd4tq5i0+VXjqHq0sIpK7bgaqpAkLCwFFRFKdC3eFpdWSkTaA4ppcSn0iFSRK1VIvwT8Us+DfD77rD6/9Oz7b+sl5NAna88tjcjf3esmd/11ttSdEtxYOov92+gMTHSETGBK3zwgeEFCSp6cZ2BgIoMtXcePH5SUsGd8XgN12NLdxiZs9rSUsINUOqjNkNLQUiv9C7SRIiJ9ZYS/JiL9BWloqCpfWkVYvhSjsnxp+S7Su7z+XRYqK6RWxznhuLqSBov5fBFkhhQ7+L9D+3gpdT2SZFy2VMnapk78+OdS6pM0svTZ0nZWQvEDhxD4V6+/OjjOYZXx+h1kyF8oA5nypSZCumypTgqfZKlKSrSwlC7RI9nSEWl75EoVukETl/biVlJUSreSSJUpVdPac3sRRdHvNKkbUv9rGobhiW7PCU263efH9aiDBGEoTzpMPZzZpx83MTtThzPqGCkGHlMHXnG61NFcnNr9hwjyxx3yBzPyR0jyh13yx3LyB4h3HXXKH8rKHx/LH3TLH8nLvzyQf83x7y9keK6O/p9LruLXcX8ByZ+VmXMXUbsAAAAASUVORK5CYII=",S="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAP1BMVEUykf8ykf8ykf80kv8yk/8zkf8zkf8xkP8xkf8zkf8zkv8ykv8ykf8zkv8ykf80k/8zkv8zk/8zkf8zkf8zkf/igqmIAAAAFHRSTlMzmWbjSvOlc1/t2cG3jVY7zItaQXkfsHMAAAC2SURBVEjH7dfJCsMgFIVhbZwyT+f9n7VdFRe5HkywpMF//6EoiirT4GSNUbLlWgHqZEDFFZ/AzuIw6zj2EPMUrzJeKTZWstZQrMyoDxtN2dWew0sszGk8tUjUTkk8INlQCvNpl1swnoy9JnkZO9CciC3HVsQArxzWSkw/HYfxe4WEXOwR5TNxH+M+E7sYu0y899HA+/9s1e/xosUWfLrhee647US8ddRud30NVfxIfOVTduk7+AYjTFmjwJvA3AAAAABJRU5ErkJggg==",z="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAXVBMVEUykf8ykf80kf8wkf8zkf80kf8zkv80kv8zkf8zkv8ykf8ykf8ykf8zkv8ykv8zkf80kv8zkf8ykP8zkf8wkf8ykf8xkP8zkf80k/8zkf8zkf81kv8zk/8ykv8zkf/dH+VkAAAAHnRSTlMz3/s69U9I5O7n2/LHbWjO6NSK0V5WU0FApJCDeE2m+wgLAAAA20lEQVRIx+3XyQ6CMBSF4VJawEqZwfm8/2NKjcQFNB2IiMq/uSHhW92SUBLF8CyOSG+9NQGIZ8CGN+yGZYHJgsYCF9BUW2Do2lliOsoe09E70Rfh8NUNQDE8WODrHprixoh7qys14RD6AivMJrLFjIzj/4AvLJFqVjTJnDEDhHqmQOmKD/1MhtPtio9zMEmA/HlcU2ecibxVU4q8W3jPwwcceuCKMqnmme6lKw7pGvYcL7znOu0es0z5+/fMOW8V5uMyAzb0SSy0+BSYEtUK/4Y2/Lt4zqVs1nXwDgeteZHQ3Mt5AAAAAElFTkSuQmCC",n="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP8zkv80kv80k/8zkf825nviAAAABXRSTlMz65/jSamIpAgAAABkSURBVDjLY3AOxQNMGEzxSQczhDLgAaGj0rSXZhJUwCetGhqET1o0NBCfNDCOR6VJkFZEyR5CaNJMaNlHAVWaEU1agIA0AcPxO20whdpQlwZmInKyICIDD9ayZeRI46/mCFSSAPzEgRk4Bsk7AAAAAElFTkSuQmCC",v="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP80kv8zkv80k/8zkf8mH/+kAAAABXRSTlMz6+OfSXfpA8YAAABHSURBVDjLY3AKxQNUGFTxSQcxhDLgAaGj0qPSI0raECV7CKNJM6NlHwNUaUY0aQEC0gQMx++0wRRqo9Kj0gMrTaCaI1BJAgAZlmm5TBaU5QAAAABJRU5ErkJggg==";export{r as _,g as a,R as b,n as c,v as d,z as e,S as f,W as p};
.brief-container[data-v-42bff056]{display:flex;align-items:center;white-space:nowrap}.brief-container .count[data-v-42bff056]{font-family:Barlow,Avenir,Helvetica,Arial,sans-serif;font-size:.14rem}.brief-container.vertical[data-v-42bff056]{display:inline-block}.brief-container>div[data-v-42bff056]{display:flex;align-items:center;flex:1;margin-left:.05rem}.brief-container>div>img[data-v-42bff056]{margin-right:.05rem}.brief-container>div>div[data-v-42bff056]{font-weight:700}.brief-container>div>div p[data-v-42bff056]{color:#ccc}.brief-container>div>div.center[data-v-42bff056]{text-align:center}
\ No newline at end of file
import{d as A,p as a,a as G,r as V,o as U,b as k,F as e,f as s,g as H,e as l,t as J,w as t,k as r}from"./index.76315788.js";var i=A({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"},align:{type:String,default:"horizontal"}}});const f=t("data-v-25eb023c");a("data-v-25eb023c");const o={key:1},F={class:"count-group"},N=r(" / ");G();const y=f(((A,a,G,t,r,i)=>{const f=V("m-count");return U(),k("div",{class:["brief-container",{vertical:"vertical"===A.align}]},[(U(!0),k(e,null,s(A.list,(a=>(U(),k("div",{key:a.name},[a.icon?(U(),k("img",{key:0,src:a.icon,style:`width:${A.size};height:${A.size}`},null,12,["src"])):H("v-if",!0),Array.isArray(a.value)?(U(),k("div",o,[l("div",F,[l(f,{class:"count orange-count",value:a.value[0],style:{color:A.color}},null,8,["value","style"]),N,l(f,{class:"count",value:a.value[1]},null,8,["value"])]),l("p",null,J(a.name),1)])):(U(),k("div",{key:2,class:{center:!a.icon}},[l(f,{class:"count",style:{color:A.color},value:a.value},null,8,["style","value"]),l("p",null,J(a.name),1)],2))])))),128))],2)}));i.render=y,i.__scopeId="data-v-25eb023c";var W="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAzFBMVEUAAABGU2FHU2FGVGFHU2JHVWJSW2RGVGFHU2FGVGFHVGJGU2JHU2JHVGJGVGNGU2JHU2FIVWJHVWNIVGRHVWNHV2JIVWJNVWRIWGhOWGJOWWRgYIBGVGFGU2H///9HVGLIzNDFyc65vcPM0NTAxMlLWGW0ub9JVmTKzdHq7O3Y296RmaFZZXH5+fpteIOkqrGdo6t/iJH09PXU19qssriorrXg4uWvtbuVnKSNlZ52f4r8/P2fpq2ZoKiHj5hPXGnw8fJmcXzl5+nO0dUpLOmeAAAAHXRSTlMA7/e+n14O4d/SycGvqaOZkHJsUksvJyEgGhcIzxuWPt0AAAL7SURBVFjDzdlrU+IwFAbgpBfuFxFQUE8qKLqusFAQFFBQ9///p51CaYCTpk3aYX2/QDPOM4NpT5MTEplWo1Y18zlqGDSXN6u1RoskS9u2soCStey2rpixTQiNaWc0yAvLAGkM60KRbJYdiIxTbiqQVxWImcpVXPOcQuzQ81jkZQGUUriMNusUFEPrUeYZaORMSl6XQCula8ntXgTNFDOh5g1o5yZEvS5CghTF/4ESJEpJbd7174E6JE4dPUc0OUqPn60CpJDCUQ2BVHJ+UOtoOijdr4Sy+umoqBVuNiE0j93BqwrbDNByuNlhjHUV1HLwjnNkpprqXPioJTNVVcsvTobU/FRTjW25sqXm/fpOTbU3KFqHTMbj+8B0oKemmp7ZRsMDxmbcdFXVtv/rMRqYD2yoqNr+3CP0m5sMq9HznxWhzDdfGVNWs4S0QIRyU0NtkYYI5aafdxW1QWr4/hxwU0utkSoyd3P0wvYziq9WiSkxNVWT5CNMno+4ap7k5KZcXbkiNEeo0JwyUd6O1MfPJxFKyUHdw6ZYfYBNXMYWgGMcoH1uytVBD7zc+zxCD37+aGMOGYtQ5+BlPWBs/IhRejRR8yE3xXmG3tT1/9i7dkUTlYfDIBOru/z1LjsYzaObf8SistrNwNK7GqwRaqLH9FcEyefmY3s5FzymNRnaeR95GU5E6Gx7OREUlIYEXQWjLxj9Yn76uPS1wtEZOG9dLy6slwidBpUGF2mSDUU7sNh+Wfbh6Rh1gpEZfp0QS4I++9/+YHTBB77wi8/WQ7t84AW/ottaaG/MB54ctJggpg66YntZoGUPsXXQ6UH1xgu0jKGBOn0vYzb3PgRLSWKpokHGuEhZaHmujeLlOSkroZ+/gyzZ9+ZzEthltOWRotJM8JaHVNJCK+Jt5PA2yDu4d9t8QfdWls4CbSPT3/CmvzVPv4mQfrvjNI2Z5C2kkzW7krfl0m8gnrTVqd+UPW37WL/RfdqWvP7hQfrHHP//QCbO0dHPOeTSP477B1UmiA9hyxqPAAAAAElFTkSuQmCC",g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAA/1BMVEUAAABQWmlGVGJXY3dHVGJKV2ZMWGRGVGFHU2JGVGFGVGJGVGJHU2JHVGJGU2JGU2FGU2FGVGFGVGJGVGFHVGJHVGJHVWNHVWNHVGFGU2JGU2JGU2FGVGFIVWNJWGVJWmZeXolHU2FGVGJHU2JHVGJHVGJHU2JPXGlGVGJHVGFIVGNJVGRHU2JIVGFHVWNGU2H////v8PF/iJGlrLKDjJVXY2/P09ZweoXa3N/U19uEjZbX2t1IVmP39/ifpa3s7u/e4eOts7mKk5tkbnpNWWf5+frz9PWyt72JkZpdaXVUYG3Dx8y+wsd4goxWYm/k5ujHy8/Gys6RmaGNlZ1teIPO8mTWAAAAL3RSTlMADe0HjR4V+KqZ5raT/Z7w4tTGr11XUEr8+4jYvT8kGQTgy756aWYSzL9DLKRxNjJ7DTMAAALqSURBVFjDtdlrV6JAGMDxBxQQRcVbXjItray23QdyN2u9ZdrNrb1//8+yHdxzOMAMDMPwe8s5/xPDNMIMRFIPTrOFasUsl839QcE4uehDMqM9o4IB+3pDBU6ZvVobKVqFRoYjqWRlDFXWexBPT9cwUuvyA7CTjBayKTEPbj2PzORTYKEWMJaqApEu8hiTvAcRjosYXxbCHOrIJZcJme415DSUqM1z5HZGqR7WMIFz8gjomEiO+NyRhn8OHLQwqcB8VfOYmKyAVwEFqIJHA4U48ax19JtfLW2K5VNw4VbBlUWav1aICfpduk2ljTRXYdHPGOD+FhhIMHt52URG6f8CfQ2DxnPLuoofLfZgp4NB95bFFcXS/4WE9Oi/8UY1yYk2keCaN4p1J5qLjj4svnos5vRo15n4WnT0Z2B06NFi37n76Ojj/cTj+dGNEu8/i8LG1H3+Z6KjJoBUFB1FBT6h8GgT6uKjH6HDFLVvPOzQqA45lujdzLeCTcOi5zDkieJtWLQCA6bbX956LENv/wj2xT8oGfLioxqYKUTTuf2B+OgRDMVHK7TJ/2f8bo24Hjumu8pq7LFGoiF0kMVvpzlHJjptQfn+xbVF3DpL/dPugouyoBCXvtlq7hm7V8Q327J+bXD7w3NhvpqRlj7iIr2wfN4QN5MXRHzyX1lgkEL8ObmzfG426Fg/+K/cEWYU+aXHtvyuneGbBC/Y5B++JkvUenhdjJ25Gx2tk18mbIuZTX6ZgJzYaNd9QRMXrbuvksKiZQkcHZHREuyomrCo+3oOhrhojvrJM2WPTv2fPNSPs2f26L1/RF2S6atObSZTX7OspvHBm/6nOagmJiYrqW13iN+YEb+FRFTDBLoZIMp0kdtAEr+B2JVS2uqkO+aZWR2IcBB/+7iZ8kY3XUPglrxLMtrIpFgaATuF5ZijXepBPP3IAxlD4Ts60qh/pHN0xEciH3IZjREkM3o/jqtVK0eybFaqhezJhQpR/gELzf2xdHMvgwAAAABJRU5ErkJggg==",R="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAxlBMVEUAAABGU2FGVGFHU2JSW2RGVGFHVGFHU2JGVGFHU2FHVGJGU2JHU2JHVGJGVGNGU2JHU2FIVWJHVWNIVWJHVWNIVGRHVWNHV2JIVWJNVWRIWGhOWGJOWWRgYIBGU2H///+vtLrn6evs7e6rsbessrhIVWOxt735+vp/iJFQXGr9/f3Lz9PHy8+pr7WGjpddaHXw8fKYn6d6g41kb3tMWGbh4+Xb3eDZ3N+5vcOhp6+coqqJkppweoXP09bAxMmUm6P09PWutLoRdq4UAAAAHnRSTlMA776fDtH59eHfycGvqaOZkHJsYF1SSy8nISAaFwgj1Df0AAACoklEQVRYw82Z63aiMBCAExDFe71hizqs6wJy81LrpWrb3fd/qT3NObRKCEQSz+73p4c/X4VMZiYTlItpdNqKVsXlMq5qSrtjmEiMUV/VgUJX+6OixlJPASZKr1RA+ahWIJOK+nijcti0IRe7OUT8jFvASWvM6+xi4AZ3uZRPNbiJ2lO+c4DhRvAgz/kABXjIVE4aUIjGJCPc61CQeonp1KAwGsM6qYMA9fQv0AAhGnzrLh4DAxBmQO0jDMLg5N6qAZuX5+jwfnrh2LGJHAIslh+ha32y5bB2r3IdZvxEZ2p9MYNc8GUmbAHNZh241iV7nvx6kefppL6eWkl+AgfftaAJSd4tq5i0+VXjqHq0sIpK7bgaqpAkLCwFFRFKdC3eFpdWSkTaA4ppcSn0iFSRK1VIvwT8Us+DfD77rD6/9Oz7b+sl5NAna88tjcjf3esmd/11ttSdEtxYOov92+gMTHSETGBK3zwgeEFCSp6cZ2BgIoMtXcePH5SUsGd8XgN12NLdxiZs9rSUsINUOqjNkNLQUiv9C7SRIiJ9ZYS/JiL9BWloqCpfWkVYvhSjsnxp+S7Su7z+XRYqK6RWxznhuLqSBov5fBFkhhQ7+L9D+3gpdT2SZFy2VMnapk78+OdS6pM0svTZ0nZWQvEDhxD4V6+/OjjOYZXx+h1kyF8oA5nypSZCumypTgqfZKlKSrSwlC7RI9nSEWl75EoVukETl/biVlJUSreSSJUpVdPac3sRRdHvNKkbUv9rGobhiW7PCU263efH9aiDBGEoTzpMPZzZpx83MTtThzPqGCkGHlMHXnG61NFcnNr9hwjyxx3yBzPyR0jyh13yx3LyB4h3HXXKH8rKHx/LH3TLH8nLvzyQf83x7y9keK6O/p9LruLXcX8ByZ+VmXMXUbsAAAAASUVORK5CYII=",S="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAP1BMVEUykf8ykf8ykf80kv8yk/8zkf8zkf8xkP8xkf8zkf8zkv8ykv8ykf8zkv8ykf80k/8zkv8zk/8zkf8zkf8zkf/igqmIAAAAFHRSTlMzmWbjSvOlc1/t2cG3jVY7zItaQXkfsHMAAAC2SURBVEjH7dfJCsMgFIVhbZwyT+f9n7VdFRe5HkywpMF//6EoiirT4GSNUbLlWgHqZEDFFZ/AzuIw6zj2EPMUrzJeKTZWstZQrMyoDxtN2dWew0sszGk8tUjUTkk8INlQCvNpl1swnoy9JnkZO9CciC3HVsQArxzWSkw/HYfxe4WEXOwR5TNxH+M+E7sYu0y899HA+/9s1e/xosUWfLrhee647US8ddRud30NVfxIfOVTduk7+AYjTFmjwJvA3AAAAABJRU5ErkJggg==",z="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAXVBMVEUykf8ykf80kf8wkf8zkf80kf8zkv80kv8zkf8zkv8ykf8ykf8ykf8zkv8ykv8zkf80kv8zkf8ykP8zkf8wkf8ykf8xkP8zkf80k/8zkf8zkf81kv8zk/8ykv8zkf/dH+VkAAAAHnRSTlMz3/s69U9I5O7n2/LHbWjO6NSK0V5WU0FApJCDeE2m+wgLAAAA20lEQVRIx+3XyQ6CMBSF4VJawEqZwfm8/2NKjcQFNB2IiMq/uSHhW92SUBLF8CyOSG+9NQGIZ8CGN+yGZYHJgsYCF9BUW2Do2lliOsoe09E70Rfh8NUNQDE8WODrHprixoh7qys14RD6AivMJrLFjIzj/4AvLJFqVjTJnDEDhHqmQOmKD/1MhtPtio9zMEmA/HlcU2ecibxVU4q8W3jPwwcceuCKMqnmme6lKw7pGvYcL7znOu0es0z5+/fMOW8V5uMyAzb0SSy0+BSYEtUK/4Y2/Lt4zqVs1nXwDgeteZHQ3Mt5AAAAAElFTkSuQmCC",v="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP8zkv80kv80k/8zkf825nviAAAABXRSTlMz65/jSamIpAgAAABkSURBVDjLY3AOxQNMGEzxSQczhDLgAaGj0rSXZhJUwCetGhqET1o0NBCfNDCOR6VJkFZEyR5CaNJMaNlHAVWaEU1agIA0AcPxO20whdpQlwZmInKyICIDD9ayZeRI46/mCFSSAPzEgRk4Bsk7AAAAAElFTkSuQmCC",n="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP80kv8zkv80k/8zkf8mH/+kAAAABXRSTlMz6+OfSXfpA8YAAABHSURBVDjLY3AKxQNUGFTxSQcxhDLgAaGj0qPSI0raECV7CKNJM6NlHwNUaUY0aQEC0gQMx++0wRRqo9Kj0gMrTaCaI1BJAgAZlmm5TBaU5QAAAABJRU5ErkJggg==";export{i as _,g as a,R as b,v as c,n as d,z as e,S as f,W as p};
.brief-container[data-v-25eb023c]{display:flex;align-items:center;white-space:nowrap}.brief-container .count[data-v-25eb023c]{font-family:Barlow,Avenir,Helvetica,Arial,sans-serif;font-size:.14rem}.brief-container.vertical[data-v-25eb023c]{display:inline-block}.brief-container>div[data-v-25eb023c]{display:flex;align-items:center;flex:1;margin-left:.05rem}.brief-container>div>img[data-v-25eb023c]{margin-right:.05rem}.brief-container>div>div[data-v-25eb023c]{font-weight:700}.brief-container>div>div p[data-v-25eb023c]{color:#ccc}.brief-container>div>div.center[data-v-25eb023c]{text-align:center}
\ No newline at end of file
...@@ -6,17 +6,17 @@ ...@@ -6,17 +6,17 @@
<link rel="icon" href="./favicon.ico" /> <link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京东路街道</title> <title>南京东路街道</title>
<script type="module" crossorigin src="./assets/index.76315788.js"></script> <script type="module" crossorigin src="./assets/index.1cbf3b1f.js"></script>
<link rel="modulepreload" href="./assets/vendor.c8b46542.js"> <link rel="modulepreload" href="./assets/vendor.0a2bc783.js">
<link rel="stylesheet" href="./assets/index.a271709b.css"> <link rel="stylesheet" href="./assets/index.85e3df17.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- <script src="http://172.82.20.1/hp_map/js/index_v1.0.js"></script> --> <script src="http://172.82.20.1/hp_map/js/index_v1.0.js"></script>
<!-- <script src="/SMap.min.js"></script> --> <!-- <script src="/SMap.min.js"></script> -->
<script src="./dev/SMap.min.js"></script> <!-- <script src="/dev/SMap.min.js"></script> -->
<script src="./Plugins.min.js"></script> <!-- <script src="/Plugins.min.js"></script> -->
<script src="./hls.js"></script> <script src="./hls.js"></script>
</body> </body>
......
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- <script src="http://172.82.20.1/hp_map/js/index_v1.0.js"></script> --> <script src="http://172.82.20.1/hp_map/js/index_v1.0.js"></script>
<!-- <script src="/SMap.min.js"></script> --> <!-- <script src="/SMap.min.js"></script> -->
<script src="/dev/SMap.min.js"></script> <!-- <script src="/dev/SMap.min.js"></script> -->
<script src="/Plugins.min.js"></script> <!-- <script src="/Plugins.min.js"></script> -->
<script src="/hls.js"></script> <script src="/hls.js"></script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
......
...@@ -2,9 +2,13 @@ let BASE_URL = '' ...@@ -2,9 +2,13 @@ let BASE_URL = ''
let SOURCE_URL = '' let SOURCE_URL = ''
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case 'production': case 'production':
// 政务网生产环境,设置了代理api // 政务网生产环境
BASE_URL = '/nd-api' BASE_URL = 'http://172.82.32.1/nd-api'
SOURCE_URL = 'http://10.81.71.243:23456/nd-file/' SOURCE_URL = 'http://172.82.32.1/nd-file/'
// // 政务网生产环境,设置了代理api
// BASE_URL = '/nd-api'
// SOURCE_URL = 'http://10.81.71.243:23456/nd-file/'
break break
case 'test': case 'test':
// 普通打包(测试用) // 普通打包(测试用)
...@@ -44,7 +48,7 @@ export default { ...@@ -44,7 +48,7 @@ export default {
'/service-special-nandong/public/ironGate/statistical', // 公共安全-右侧-门岗分布 '/service-special-nandong/public/ironGate/statistical', // 公共安全-右侧-门岗分布
GET_PUBLICSAFE_RIGHT_SAFEMAP: '/service-special-nandong/public/peaceMaps', // 公共安全-右侧-平安地图 GET_PUBLICSAFE_RIGHT_SAFEMAP: '/service-special-nandong/public/peaceMaps', // 公共安全-右侧-平安地图
GET_PUBLICSAFE_TRUE_PEOPLE: GET_PUBLICSAFE_TRUE_PEOPLE:
'/service-special-nandong/public/personnel/statistical', // 公共安全-右侧-实有人口 '/service-special-nand2ong/public/personnel/statistical', // 公共安全-右侧-实有人口
GET_PUBLICSAFE_HOUSE: '/service-basicdatasync-ddd/public/resource/count', // 公共安全-右侧-居住房屋 GET_PUBLICSAFE_HOUSE: '/service-basicdatasync-ddd/public/resource/count', // 公共安全-右侧-居住房屋
GET_PUBLICSAFE_NONRESIDENT: GET_PUBLICSAFE_NONRESIDENT:
'/service-basicdatasync-ddd/public/nonResident/statistical', // 公共安全-右侧-非居房屋 '/service-basicdatasync-ddd/public/nonResident/statistical', // 公共安全-右侧-非居房屋
......
...@@ -18,8 +18,10 @@ export default defineComponent({ ...@@ -18,8 +18,10 @@ export default defineComponent({
$blur() $blur()
padding .05rem padding .05rem
box-sizing border-box box-sizing border-box
border .01rem solid $primary-border border-top .01rem solid $primary-border
border-bottom .01rem solid $primary-border
background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%, transparent 95%, rgba(30, 193, 255, .3) 100%) background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%, transparent 95%, rgba(30, 193, 255, .3) 100%)
display flex display flex
flex-direction column flex-direction column
// justify-content space-between
</style> </style>
This diff is collapsed.
const Main = () => import('@/view/main.vue') const Main = () => import('@/view/main.vue')
// const CommunityView = () => import('@/view/community.vue') // const CommunityView = () => import('@/view/community.vue')
const CommunityView = () => import('@/view/new-community.vue') const CommunityView = () => import('@/view/new-community.vue')
const Raffles = () => import('@/view/raffles/index.vue')
export default [ export default [
{ name: 'main', path: '/', component: Main }, { name: 'main', path: '/', component: Main },
{ name: 'community', path: '/community', component: CommunityView }, { name: 'community', path: '/community', component: CommunityView },
{ name: 'raffles', path: '/raffles', component: Raffles },
] ]
<template>
<m-grid
:template="['title title title', 'left . right']"
columns="32vw auto 32vw"
rows="0.4rem auto"
gap="0.05rem"
>
<!-- TODO 添加地图 -->
<Title area="title"> 南东城运 </Title>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftSection area="left" />
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<RightSection area="right" />
</m-animate>
</m-grid>
</template>
<script lang="ts" setup>
import Title from './title.vue'
import LeftSection from './left.vue'
import RightSection from './right.vue'
</script>
<style lang="stylus" scoped></style>
<template>
<div class="left-section">
<m-card title="基本信息" mode="2">
<div class="form">
<div v-for="(_, i) in new Array(6).fill(1)" :key="i" class="row">
<div
v-for="col in basicInfo.slice(i * 2, i * 2 + 2)"
:key="col.label"
class="col"
>
<p class="label">{{ col.label }}:</p>
<p class="value">{{ col.value }}</p>
</div>
</div>
</div>
</m-card>
<m-card title="设计稿图片" mode="2">
<div class="photos">
<img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock1" />
</div>
</m-card>
<m-card title="原始图片" mode="2">
<div class="photos">
<img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock2" />
</div>
</m-card>
<m-card title="现状图片" mode="2">
<div class="photos">
<img v-for="(_, i) in new Array(6).fill(1)" :key="i" :src="mock3" />
</div>
</m-card>
<m-card title="修缮历史" mode="2">
修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史修缮历史
</m-card>
</div>
</template>
<script lang="ts" setup>
import mock1 from '@/assets/images/mock1.png'
import mock2 from '@/assets/images/mock2.png'
import mock3 from '@/assets/images/mock3.png'
const basicInfo = [
{ label: '现名称', value: '来福士商业大楼' },
{ label: '原名称', value: '来福士' },
{ label: '保护编号', value: '56465' },
{ label: '建造者', value: '待考' },
{ label: '批次', value: '第三批' },
{ label: '设计者', value: '待考' },
{ label: '保护类别', value: '三类' },
{ label: '施工者', value: '待考' },
{ label: '现使用性质', value: '商业' },
{ label: '原使用性质', value: '商业' },
{
label: '描述',
value: '描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容',
},
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.left-section
$blur()
padding .05rem
box-sizing border-box
border-top .01rem solid $primary-border
border-bottom .01rem solid $primary-border
background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%, transparent 95%, rgba(30, 193, 255, .3) 100%)
display flex
flex-direction column
>.my-card
&:nth-of-type(1)
flex 2
&:nth-of-type(2)
&:nth-of-type(3)
&:nth-of-type(4)
&:nth-of-type(5)
flex 1
.form
.row
display flex
align-items center
background rgba(113,235,255,.05)
&:nth-of-type(2n)
background rgba(0,0,0,0.1)
.col
flex 1
display flex
align-items center
padding .04rem .08rem
box-sizing border-box
.label
color $secondary-color
width .6rem
.value
flex 1
.photos
display flex
justify-content space-between
>img
width 15%
</style>
<template>
<div class="right-section">
<m-card title="商场" mode="2">
<div class="sum">
<div>
<div v-for="item in sumList.slice(0, 2)" :key="item.name">
<p>
<m-count
class="count"
:style="`color:${item.color}`"
:value="item.value"
/>
<span>{{ item.unit }}</span>
</p>
<p>{{ item.name }}</p>
</div>
</div>
<div>
<div v-for="item in sumList.slice(2)" :key="item.name">
<p>
<m-count
class="count"
:style="`color:${item.color}`"
:value="item.value"
/>
<span>{{ item.unit }}</span>
</p>
<p><i :style="`background:${item.dot}`" />{{ item.name }}</p>
</div>
</div>
</div>
<div class="chart">
<m-line :dataset="chartData" :option="option" />
</div>
<div class="box">
<div>
<p class="sub-title">商业分类</p>
<div class="business-wrapper">
<div class="pie">
<m-pie :dataset="pieData" :option="pieOption" />
</div>
<div class="legend">
<div v-for="(item, i) in pieData.source" :key="item.name">
<p>
<i :style="`background:${pieOption.color[i]}`" />
{{ item.name }}
</p>
<p>{{ item.value }}</p>
</div>
</div>
</div>
</div>
<div>
<p class="sub-title">网红门店</p>
<div class="stores">
<img v-for="(item, i) in stores" :key="i" :src="item" />
</div>
</div>
</div>
</m-card>
<m-card title="楼宇结构" mode="2">
<div class="box">
<div>
<p class="sub-title">办公楼</p>
<div class="table">
<div v-for="item in table1" :key="item.name">
<p>{{ item.name }}</p>
<p>{{ item.value }}</p>
</div>
</div>
</div>
<div>
<p class="sub-title">商业楼</p>
<div class="table">
<div v-for="item in table2" :key="item.name">
<p>{{ item.name }}</p>
<p>{{ item.value }}</p>
</div>
</div>
</div>
</div>
</m-card>
</div>
</template>
<script lang="ts" setup>
import store1 from '@/assets/images/store1.png'
import store2 from '@/assets/images/store2.png'
import store3 from '@/assets/images/store3.png'
import store4 from '@/assets/images/store4.png'
import store5 from '@/assets/images/store5.png'
import store6 from '@/assets/images/store6.png'
import store7 from '@/assets/images/store7.png'
import store8 from '@/assets/images/store8.png'
import store9 from '@/assets/images/store9.png'
import store10 from '@/assets/images/store10.png'
const sumList = [
{ name: '商业租金', value: 3341, unit: '元/㎡/月', color: 'gold' },
{ name: '餐饮租金', value: 2715, unit: '元/㎡/月', color: 'gold' },
{
name: '区平均租金',
value: 1568,
unit: '元/㎡/月',
color: 'gold',
dot: 'gold',
},
{ name: '街道平均租金', value: 953, unit: '元/㎡/月', dot: '#6DD400' },
{ name: '来福士平均租金', value: 986, unit: '元/㎡/月', dot: '#32C5FF' },
]
const chartData = {
dimensions: [
{ name: 'month', displayName: '月份' },
{ name: 'rent1', displayName: '区平均租金' },
{ name: 'rent2', displayName: '街道平均租金' },
{ name: 'rent3', displayName: '来福士平均租金' },
],
source: [
{ month: '1月', rent1: 1000, rent2: 1200, rent3: 700 },
{ month: '2月', rent1: 1000, rent2: 1200, rent3: 900 },
{ month: '3月', rent1: 1000, rent2: 1200, rent3: 700 },
{ month: '4月', rent1: 1000, rent2: 1200, rent3: 1000 },
{ month: '5月', rent1: 1000, rent2: 1200, rent3: 800 },
{ month: '6月', rent1: 1000, rent2: 1200, rent3: 800 },
{ month: '7月', rent1: 1000, rent2: 1200, rent3: 1100 },
{ month: '8月', rent1: 1000, rent2: 1200, rent3: 1000 },
{ month: '9月', rent1: 1000, rent2: 1200, rent3: 900 },
{ month: '10月', rent1: 1000, rent2: 1200, rent3: 1000 },
{ month: '11月', rent1: 1000, rent2: 1200, rent3: 1200 },
{ month: '12月', rent1: 1000, rent2: 1200, rent3: 900 },
],
}
const pieData = {
dimensions: [
{ name: 'name', displayName: '分类' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '休闲娱乐', value: 22 },
{ name: '亲子', value: 20 },
{ name: '美食', value: 24 },
{ name: '丽人', value: 10 },
{ name: '购物', value: 24 },
],
}
const option = {
color: ['gold', '#6DD400', '#32C5FF'],
yAxis: {
min: 400,
max: 1600,
},
legend: {
right: '1%',
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
type: 'dotted',
},
},
{
type: 'line',
smooth: true,
lineStyle: {
type: 'dotted',
},
},
{
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#32C5FF', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(50,197,255,.03)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
}
const pieOption = {
color: ['#00BFFF', '#589C20', '#FFCE34', '#F47C1F', '#826AFA'],
legend: { show: false },
series: [
{
type: 'pie',
radius: ['0', '70%'],
center: ['40%', '50%'],
label: {
show: false,
},
},
],
}
const stores = [
store1,
store2,
store3,
store4,
store5,
store6,
store7,
store8,
store9,
store10,
]
const table1 = [
{ name: '面积', value: '950㎡' },
{ name: '办公平均租金', value: '1200元/㎡/月' },
]
const table2 = [
{ name: '面积', value: '950㎡' },
{ name: '商业平均租金', value: '1200元/㎡/月' },
{ name: '餐饮平均租金', value: '1200元/㎡/月' },
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.right-section
$blur()
padding .05rem
box-sizing border-box
border-top .01rem solid $primary-border
border-bottom .01rem solid $primary-border
background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%, transparent 95%, rgba(30, 193, 255, .3) 100%)
display flex
flex-direction column
>.my-card
&:nth-of-type(1)
flex 3
&:nth-of-type(2)
flex 1
.sum
display flex
>div
padding .05rem 0
box-sizing border-box
display flex
justify-content space-around
flex 2
p
display flex
align-items center
.count
font-size .14rem
color #fff
i
display inline-block
width .04rem
height @width
margin 0 .04rem
span
font-size .08rem
color #ccc
margin-left .03rem
&:last-child
flex 3
background url('@/assets/images/msg-wrapper3.png') center / cover no-repeat
p
color $font-color
.chart
width 100%
height 1.5rem
.box
display flex
>div
padding 0 .05rem
flex 1
.sub-title
font-size .12rem
font-family $font-zcool
color #32C5FF
&:before
content ''
display inline-block
width .02rem
height @width
background #32C5FF
margin-right .04rem
margin-bottom .04rem
.business-wrapper
display flex
width 100%
.pie
width 50%
height 1rem
.legend
flex 1
display flex
flex-direction column
justify-content space-between
padding 0 .05rem
box-sizing border-box
>div
display flex
align-items center
justify-content space-between
p
display flex
align-items center
i
display inline-block
width .06rem
height @width
border-radius 50%
margin-right .04rem
.stores
display grid
grid-template-columns repeat(5, 1fr)
grid-template-rows repeat(2, 1fr)
padding .06rem
box-sizing border-box
grid-gap @padding
>img
width .4rem
height @width
.table
display flex
>div
border .01rem solid rgba(0, 118,255, .5)
&+div
border-left none
&:nth-of-type(2)
&:nth-of-type(3)
flex 1
p
padding .04rem .06rem
box-sizing border-box
background rgba(0, 118,255,.15)
&:first-child
background rgba(0, 118,255,.3)
border-bottom .01rem solid rgba(0, 118,255, .5)
</style>
<template>
<div class="my-title">
<div class="date">
<span>{{ date }}</span>
<span>{{ time }}</span>
</div>
<h1><slot /></h1>
</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, ref } from 'vue'
import { getDate, getTime } from '@/components/MyComponent/util'
import store from '@/store'
export default defineComponent({
name: 'MyTitle',
setup() {
const date = ref(getDate())
const time = ref('')
const timer = ref<number | null>(null)
timer.value = setInterval(() => {
time.value = getTime()
})
onBeforeUnmount(() => {
clearInterval(Number(timer))
timer.value = null
})
return {
date,
time,
timer,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.my-title
$full()
$center()
justify-content flex-start
position relative
font-weight bold
background url('@/assets/images/title-bg.png') center / cover no-repeat
z-index 1
.date
z-index 2
position absolute
right 1%
span
display block
text-align right
h1
font-family $font-pang
width 18%
text-align center
z-index 2
background-clip text
-webkit-background-clip text
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #fff, #00C7FF)
font-size .22rem
letter-spacing .05rem
margin-top 0.5%
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment