2 lines
3.5 KiB
JavaScript
2 lines
3.5 KiB
JavaScript
import{d as t,r as e,o as a,b as s,e as l,X as r,N as i,b2 as o,f as n,I as c,J as d,i as u,q as v,g,v as x,m as b}from"./index-BoIUJTA2.js";import{j as p}from"./operations-Cr4YfoRu.js";import{_ as h}from"./index.vue_vue_type_script_setup_true_lang-DUbflfBQ.js";import{_ as f}from"./_plugin-vue_export-helper-BCo6x5W8.js";import"./iconify-DFoKediz.js";const m={class:"art-card h-auto min-h-[420px] p-6 mb-5 relative overflow-hidden group"},y={class:"relative px-4"},k={class:"grid grid-cols-1 lg:grid-cols-4 gap-8 relative z-10"},w={key:0,class:"absolute -right-4 top-1/2 -translate-y-1/2 z-20 hidden lg:block"},_={class:"p-5 rounded-3xl bg-white border border-g-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500"},j={class:"flex-cb mb-6"},z={class:"text-right"},F={class:"text-xs text-g-600 font-black uppercase tracking-widest"},I={class:"text-3xl font-black text-g-900 font-mono tracking-tighter"},P={key:0,class:"absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-white text-xs font-black rounded-full shadow-lg border-2 border-white z-30"},q={class:"mt-4 pt-4 border-t border-g-100/50"},C={class:"flex-cb mb-2"},J={class:"text-xs text-g-500 font-bold"},L={class:"text-xs font-black text-danger"},N={class:"h-2 w-full bg-g-100 rounded-full overflow-hidden"},S=f(t({__name:"marketing-conversion",setup(t){const f=e([]),S=e(!1),X=t=>{const e=[{bg:"bg-blue-50/50",text:"text-blue-500",icon:"ri:user-add-line"},{bg:"bg-purple-50/50",text:"text-purple-500",icon:"ri:shopping-bag-line"},{bg:"bg-success-50/50",text:"text-success-500",icon:"ri:bank-card-2-line"},{bg:"bg-orange-50/50",text:"text-orange-500",icon:"ri:checkbox-circle-fill"}];return e[t]||e[0]};return a(()=>{return t=this,e=null,a=function*(){S.value=!0;try{f.value=yield p("7d")}finally{S.value=!1}},new Promise((s,l)=>{var r=t=>{try{o(a.next(t))}catch(e){l(e)}},i=t=>{try{o(a.throw(t))}catch(e){l(e)}},o=t=>t.done?s(t.value):Promise.resolve(t.value).then(r,i);o((a=a.apply(t,e)).next())});var t,e,a}),(t,e)=>{const a=o;return l(),s("div",m,[e[2]||(e[2]=r('<div class="art-card-header mb-8" data-v-256c7418><div class="title" data-v-256c7418><div class="flex-c mb-1" data-v-256c7418><div class="size-2 h-6 bg-primary rounded-full mr-3" data-v-256c7418></div><h4 class="text-xl font-black text-g-900 tracking-tight" data-v-256c7418>订单转化全链路监控</h4></div><p class="text-sm text-g-500" data-v-256c7418>追踪用户从访问到完成交易的真实漏斗转化</p></div></div>',1)),i((l(),s("div",y,[e[1]||(e[1]=n("div",{class:"absolute top-1/2 left-0 w-full h-px bg-g-200 -translate-y-1/2 z-0 hidden lg:block"},null,-1)),n("div",k,[(l(!0),s(c,null,d(f.value,(t,a)=>{return l(),s("div",{key:a,class:"stage-card relative"},[a<f.value.length-1?(l(),s("div",w,[...e[0]||(e[0]=[n("i",{class:"ri-arrow-right-s-line text-g-300 text-2xl"},null,-1)])])):u("",!0),n("div",_,[n("div",j,[n("div",{class:v(["size-12 rounded-2xl flex-cc",X(a).bg])},[g(h,{icon:X(a).icon,class:v([X(a).text,"text-2xl"])},null,8,["icon","class"])],2),n("div",z,[n("div",F,x(t.stage),1),n("div",I,x((r=t.count,r>=1e4?(r/1e4).toFixed(1)+"w":r.toLocaleString())),1)])]),a>0?(l(),s("div",P,x(t.rate)+"% ",1)):u("",!0),n("div",q,[n("div",C,[n("span",J,x(0===a?"全链路留存":"环节流失率"),1),n("span",L,x(0===a?"100%":(100-t.rate).toFixed(1)+"%"),1)]),n("div",N,[n("div",{class:"h-full bg-danger/60 rounded-full transition-all duration-1000",style:b({width:(0!==a&&f.value[a-1].count?t.lostCount/f.value[a-1].count*100:0)+"%"})},null,4)])])])]);var r}),128))])])),[[a,S.value]])])}}}),[["__scopeId","data-v-256c7418"]]);export{S as default};
|