fix: refine forest grass wet chart panels

docs/assets/SmartChartRenderer-431d3b86-1783073104768.js

@@ -1,2 +1,2 @@
-var B=Object.defineProperty,O=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var v=(a,r,o)=>r in a?B(a,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[r]=o,m=(a,r)=>{for(var o in r||(r={}))W.call(r,o)&&v(a,o,r[o]);if(S)for(var o of S(r))$.call(r,o)&&v(a,o,r[o]);return a},d=(a,r)=>O(a,D(r));import{e as b,l as H,x as F,M as h,o as g,c as p,a as f,t as u,g as z,b as R,u as V,n as P}from"./index-1783008015343.js";import{H as j}from"./index-65701168-1783008015343.js";const q={class:"smart-chart-header"},G={key:0},M={key:0,class:"smart-chart-source"},J={__name:"SmartChartRenderer",props:{chart:{type:Object,required:!0}},emits:["ready"],setup(a,{emit:r}){const o=r,i=a,l=["#30dcff","#27f0c0","#ffd76c","#7aa7ff","#ff8f6b","#a6f06d"],L=b(()=>{const t=(i.chart.rows||[]).filter(e=>Number.isFinite(Number(e.value)));return i.chart.type==="pie"?N(t):i.chart.type==="line"?w(t):_(t)}),k=b(()=>{const t=i.chart.rows||[];return i.chart.type==="bar"&&x(t)}),y=b(()=>{const t=i.chart.source||{},e=[t.mode,t.table,t.period,t.generatedAt].filter(Boolean);return e.length?e.join(" / "):""});H(()=>{F(()=>{window.requestAnimationFrame(()=>o("ready"))})});function _(t){return x(t)?C(t):{animationDuration:700,grid:{left:52,right:26,top:28,bottom:54},tooltip:s(),xAxis:{type:"category",data:t.map(e=>e.name),axisTick:{show:!1},axisLine:{lineStyle:{color:"rgba(48, 220, 255, 0.28)"}},axisLabel:{color:"rgba(223, 250, 255, 0.76)",fontSize:11,interval:0,rotate:t.length>6?28:0}},yAxis:{type:"value",axisLine:{show:!1},axisTick:{show:!1},splitLine:{lineStyle:{color:"rgba(48, 220, 255, 0.1)",type:"dashed"}},axisLabel:{color:"rgba(223, 250, 255, 0.58)",fontSize:11}},series:[{name:i.chart.title,type:"bar",barWidth:t.length>7?16:22,data:t.map((e,n)=>({value:e.value,name:e.name,itemStyle:{borderRadius:[8,8,0,0],color:new h(0,0,0,1,[{offset:0,color:l[n%l.length]},{offset:1,color:"rgba(48, 220, 255, 0.08)"}])}})),label:{show:!0,position:"top",color:"#ffffff",fontSize:11,formatter:({value:e})=>c(e)}}]}}function C(t){return{animationDuration:700,grid:{left:78,right:72,top:22,bottom:20},tooltip:d(m({},s()),{trigger:"axis",axisPointer:{type:"shadow"}}),xAxis:{type:"value",axisLine:{show:!1},axisTick:{show:!1},splitLine:{lineStyle:{color:"rgba(48, 220, 255, 0.1)",type:"dashed"}},axisLabel:{color:"rgba(223, 250, 255, 0.58)",fontSize:11}},yAxis:{type:"category",inverse:!0,data:t.map(e=>e.name),axisTick:{show:!1},axisLine:{lineStyle:{color:"rgba(48, 220, 255, 0.22)"}},axisLabel:{color:"rgba(223, 250, 255, 0.82)",fontSize:12}},series:[{name:i.chart.title,type:"bar",barWidth:13,data:t.map((e,n)=>({value:e.value,name:e.name,itemStyle:{borderRadius:[0,8,8,0],color:new h(0,0,1,0,[{offset:0,color:"rgba(48, 220, 255, 0.16)"},{offset:1,color:l[n%l.length]}])}})),label:{show:!0,position:"right",color:"#ffffff",fontSize:11,formatter:({value:e})=>c(e)}}]}}function N(t){return{animationDuration:700,tooltip:s(),legend:{orient:"vertical",right:10,top:"middle",itemWidth:10,itemHeight:10,textStyle:{color:"rgba(223, 250, 255, 0.78)",fontSize:11}},series:[{name:i.chart.title,type:"pie",radius:["48%","68%"],center:["35%","52%"],avoidLabelOverlap:!0,label:{color:"#fff",fontSize:11,formatter:`{b}
+var B=Object.defineProperty,O=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var v=(a,r,o)=>r in a?B(a,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[r]=o,m=(a,r)=>{for(var o in r||(r={}))W.call(r,o)&&v(a,o,r[o]);if(S)for(var o of S(r))$.call(r,o)&&v(a,o,r[o]);return a},d=(a,r)=>O(a,D(r));import{e as b,l as H,x as F,M as h,o as g,c as p,a as f,t as u,g as z,b as R,u as V,n as P}from"./index-1783073104768.js";import{H as j}from"./index-8dceb547-1783073104768.js";const q={class:"smart-chart-header"},G={key:0},M={key:0,class:"smart-chart-source"},J={__name:"SmartChartRenderer",props:{chart:{type:Object,required:!0}},emits:["ready"],setup(a,{emit:r}){const o=r,i=a,l=["#30dcff","#27f0c0","#ffd76c","#7aa7ff","#ff8f6b","#a6f06d"],L=b(()=>{const t=(i.chart.rows||[]).filter(e=>Number.isFinite(Number(e.value)));return i.chart.type==="pie"?N(t):i.chart.type==="line"?w(t):_(t)}),k=b(()=>{const t=i.chart.rows||[];return i.chart.type==="bar"&&x(t)}),y=b(()=>{const t=i.chart.source||{},e=[t.mode,t.table,t.period,t.generatedAt].filter(Boolean);return e.length?e.join(" / "):""});H(()=>{F(()=>{window.requestAnimationFrame(()=>o("ready"))})});function _(t){return x(t)?C(t):{animationDuration:700,grid:{left:52,right:26,top:28,bottom:54},tooltip:s(),xAxis:{type:"category",data:t.map(e=>e.name),axisTick:{show:!1},axisLine:{lineStyle:{color:"rgba(48, 220, 255, 0.28)"}},axisLabel:{color:"rgba(223, 250, 255, 0.76)",fontSize:11,interval:0,rotate:t.length>6?28:0}},yAxis:{type:"value",axisLine:{show:!1},axisTick:{show:!1},splitLine:{lineStyle:{color:"rgba(48, 220, 255, 0.1)",type:"dashed"}},axisLabel:{color:"rgba(223, 250, 255, 0.58)",fontSize:11}},series:[{name:i.chart.title,type:"bar",barWidth:t.length>7?16:22,data:t.map((e,n)=>({value:e.value,name:e.name,itemStyle:{borderRadius:[8,8,0,0],color:new h(0,0,0,1,[{offset:0,color:l[n%l.length]},{offset:1,color:"rgba(48, 220, 255, 0.08)"}])}})),label:{show:!0,position:"top",color:"#ffffff",fontSize:11,formatter:({value:e})=>c(e)}}]}}function C(t){return{animationDuration:700,grid:{left:78,right:72,top:22,bottom:20},tooltip:d(m({},s()),{trigger:"axis",axisPointer:{type:"shadow"}}),xAxis:{type:"value",axisLine:{show:!1},axisTick:{show:!1},splitLine:{lineStyle:{color:"rgba(48, 220, 255, 0.1)",type:"dashed"}},axisLabel:{color:"rgba(223, 250, 255, 0.58)",fontSize:11}},yAxis:{type:"category",inverse:!0,data:t.map(e=>e.name),axisTick:{show:!1},axisLine:{lineStyle:{color:"rgba(48, 220, 255, 0.22)"}},axisLabel:{color:"rgba(223, 250, 255, 0.82)",fontSize:12}},series:[{name:i.chart.title,type:"bar",barWidth:13,data:t.map((e,n)=>({value:e.value,name:e.name,itemStyle:{borderRadius:[0,8,8,0],color:new h(0,0,1,0,[{offset:0,color:"rgba(48, 220, 255, 0.16)"},{offset:1,color:l[n%l.length]}])}})),label:{show:!0,position:"right",color:"#ffffff",fontSize:11,formatter:({value:e})=>c(e)}}]}}function N(t){return{animationDuration:700,tooltip:s(),legend:{orient:"vertical",right:10,top:"middle",itemWidth:10,itemHeight:10,textStyle:{color:"rgba(223, 250, 255, 0.78)",fontSize:11}},series:[{name:i.chart.title,type:"pie",radius:["48%","68%"],center:["35%","52%"],avoidLabelOverlap:!0,label:{color:"#fff",fontSize:11,formatter:`{b}
 {d}%`},labelLine:{lineStyle:{color:"rgba(223, 250, 255, 0.42)"}},itemStyle:{borderColor:"rgba(3, 18, 31, 0.92)",borderWidth:3},data:t.map((e,n)=>({name:e.name,value:e.value,itemStyle:{color:l[n%l.length]}}))}]}}function w(t){return{animationDuration:760,grid:{left:52,right:28,top:30,bottom:48},tooltip:d(m({},s()),{trigger:"axis",axisPointer:{type:"line",lineStyle:{color:"rgba(255, 215, 108, 0.52)"}}}),xAxis:{type:"category",boundaryGap:!1,data:t.map(e=>e.name),axisTick:{show:!1},axisLine:{lineStyle:{color:"rgba(48, 220, 255, 0.28)"}},axisLabel:{color:"rgba(223, 250, 255, 0.76)",fontSize:11,interval:0}},yAxis:{type:"value",axisLine:{show:!1},axisTick:{show:!1},splitLine:{lineStyle:{color:"rgba(48, 220, 255, 0.1)",type:"dashed"}},axisLabel:{color:"rgba(223, 250, 255, 0.58)",fontSize:11}},series:[{name:i.chart.title,type:"line",smooth:!0,symbol:"circle",symbolSize:8,lineStyle:{width:3,color:"#30dcff"},itemStyle:{color:"#ffd76c",borderColor:"#041522",borderWidth:2},areaStyle:{color:new h(0,0,0,1,[{offset:0,color:"rgba(48, 220, 255, 0.24)"},{offset:1,color:"rgba(48, 220, 255, 0.02)"}])},label:{show:!0,position:"top",color:"#ffffff",fontSize:11,formatter:({value:e})=>c(e)},data:t.map(e=>({value:e.value,name:e.name}))}]}}function s(){return{trigger:"item",backgroundColor:"rgba(2, 13, 22, 0.94)",borderColor:"rgba(48, 220, 255, 0.34)",borderWidth:1,textStyle:{color:"#fff",fontSize:12},formatter:t=>{const e=(i.chart.rows||[]).find(A=>A.name===t.name),n=(e==null?void 0:e.unit)||i.chart.unit||"",T=e!=null&&e.extra?`<br/><span style="color:rgba(223,250,255,.62)">${e.extra}</span>`:"";return`${t.marker}${t.name}: ${c(t.value)}${n}${T}`}}}function x(t=[]){return t.length>6||t.some(e=>String(e.name||"").length>4)}function c(t){const e=Number(t);return Number.isFinite(e)?Number.isInteger(e)?e.toLocaleString("zh-CN"):e.toLocaleString("zh-CN",{maximumFractionDigits:2}):"--"}return(t,e)=>(g(),p("div",{class:P(["smart-chart-card",{"is-horizontal":k.value}])},[f("div",q,[f("div",null,[f("strong",null,u(a.chart.title),1),f("span",null,u(a.chart.subtitle),1)]),a.chart.unit?(g(),p("em",G,u(a.chart.unit),1)):z("",!0)]),R(V(j),{class:"smart-chart",option:L.value,autoresize:""},null,8,["option"]),y.value?(g(),p("div",M,u(y.value),1)):z("",!0)],2))}};export{J as default};

docs/assets/index-387cb5ab-balabala-1783073104768.css

@@ -1 +1 @@
-.login-screen[data-v-02c20620]{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,rgba(4,16,38,.1),rgba(2,8,22,.62)),url(./bg-3acb94e3-balabala-1783008015343.png) center/cover no-repeat,#05142f;color:#fff}.login-screen[data-v-02c20620]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.46),transparent 42%,rgba(0,0,0,.35)),radial-gradient(circle at 52% 46%,rgba(48,220,255,.16),transparent 32%)}.login-shell[data-v-02c20620]{position:relative;z-index:1;width:min(980px,100vw - 48px);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:center}.login-brand[data-v-02c20620]{display:flex;flex-direction:column;gap:14px;min-width:0;text-shadow:0 0 20px rgba(48,220,255,.36)}.login-brand span[data-v-02c20620]{font-size:42px;line-height:1.2;font-weight:700}.login-brand small[data-v-02c20620]{color:#c4f3feb8;font-size:13px;letter-spacing:0}.login-panel[data-v-02c20620]{width:360px;padding:30px 28px 28px;border:1px solid rgba(48,220,255,.34);background:rgba(3,14,32,.82);box-shadow:0 24px 70px #00000057,inset 0 0 28px #30dcff14;box-sizing:border-box}.login-panel-title[data-v-02c20620]{margin-bottom:26px;color:#c4f3fe;font-size:22px;font-weight:700;text-align:center}.login-field[data-v-02c20620]{display:block;margin-bottom:18px}.login-field span[data-v-02c20620]{display:block;margin-bottom:8px;color:#c4f3fec7;font-size:13px}.login-field input[data-v-02c20620]{width:100%;height:42px;padding:0 12px;border:1px solid rgba(48,220,255,.26);outline:none;background:rgba(0,10,24,.62);color:#fff;font-size:15px;box-sizing:border-box}.login-field input[data-v-02c20620]:focus{border-color:#30dcffb8;box-shadow:0 0 0 2px #30dcff1f}.login-error[data-v-02c20620]{min-height:20px;margin:-4px 0 12px;color:#ffcf8a;font-size:13px;line-height:20px}.login-submit[data-v-02c20620]{width:100%;height:44px;border:1px solid rgba(48,220,255,.52);background:linear-gradient(90deg,rgba(24,140,196,.92),rgba(37,204,218,.92));color:#fff;cursor:pointer;font-size:16px;font-weight:700}.login-submit[data-v-02c20620]:disabled{cursor:not-allowed;opacity:.68}@media (max-width: 820px){.login-shell[data-v-02c20620]{grid-template-columns:1fr;gap:28px}.login-brand span[data-v-02c20620]{font-size:30px}.login-panel[data-v-02c20620]{width:100%}}
+.login-screen[data-v-02c20620]{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,rgba(4,16,38,.1),rgba(2,8,22,.62)),url(./bg-3acb94e3-balabala-1783073104768.png) center/cover no-repeat,#05142f;color:#fff}.login-screen[data-v-02c20620]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.46),transparent 42%,rgba(0,0,0,.35)),radial-gradient(circle at 52% 46%,rgba(48,220,255,.16),transparent 32%)}.login-shell[data-v-02c20620]{position:relative;z-index:1;width:min(980px,100vw - 48px);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:center}.login-brand[data-v-02c20620]{display:flex;flex-direction:column;gap:14px;min-width:0;text-shadow:0 0 20px rgba(48,220,255,.36)}.login-brand span[data-v-02c20620]{font-size:42px;line-height:1.2;font-weight:700}.login-brand small[data-v-02c20620]{color:#c4f3feb8;font-size:13px;letter-spacing:0}.login-panel[data-v-02c20620]{width:360px;padding:30px 28px 28px;border:1px solid rgba(48,220,255,.34);background:rgba(3,14,32,.82);box-shadow:0 24px 70px #00000057,inset 0 0 28px #30dcff14;box-sizing:border-box}.login-panel-title[data-v-02c20620]{margin-bottom:26px;color:#c4f3fe;font-size:22px;font-weight:700;text-align:center}.login-field[data-v-02c20620]{display:block;margin-bottom:18px}.login-field span[data-v-02c20620]{display:block;margin-bottom:8px;color:#c4f3fec7;font-size:13px}.login-field input[data-v-02c20620]{width:100%;height:42px;padding:0 12px;border:1px solid rgba(48,220,255,.26);outline:none;background:rgba(0,10,24,.62);color:#fff;font-size:15px;box-sizing:border-box}.login-field input[data-v-02c20620]:focus{border-color:#30dcffb8;box-shadow:0 0 0 2px #30dcff1f}.login-error[data-v-02c20620]{min-height:20px;margin:-4px 0 12px;color:#ffcf8a;font-size:13px;line-height:20px}.login-submit[data-v-02c20620]{width:100%;height:44px;border:1px solid rgba(48,220,255,.52);background:linear-gradient(90deg,rgba(24,140,196,.92),rgba(37,204,218,.92));color:#fff;cursor:pointer;font-size:16px;font-weight:700}.login-submit[data-v-02c20620]:disabled{cursor:not-allowed;opacity:.68}@media (max-width: 820px){.login-shell[data-v-02c20620]{grid-template-columns:1fr;gap:28px}.login-brand span[data-v-02c20620]{font-size:30px}.login-panel[data-v-02c20620]{width:100%}}

docs/assets/index-adeafd2d-1783073104768.js

@@ -1 +1 @@
-var m=(v,d,n)=>new Promise((i,a)=>{var u=l=>{try{r(n.next(l))}catch(t){a(t)}},o=l=>{try{r(n.throw(l))}catch(t){a(t)}},r=l=>l.done?i(l.value):Promise.resolve(l.value).then(u,o);r((n=n.apply(v,d)).next())});import{_ as x,S as w,T as S,e as h,o as _,c as f,a as e,L as U,I as g,J as y,t as b,g as V,d as p,U as k}from"./index-1783008015343.js";const B={class:"login-screen"},D={class:"login-shell"},I={class:"login-field"},M={class:"login-field"},R={key:0,class:"login-error"},q=["disabled"],C={__name:"index",setup(v){const d=w(),n=S(),i=p(""),a=p(""),u=p(!1),o=p(""),r=h(()=>{const t=typeof d.query.redirect=="string"?decodeURIComponent(d.query.redirect):"/platform";return t.startsWith("/login")?"/platform":t||"/platform"});function l(){return m(this,null,function*(){if(o.value="",!i.value||!a.value){o.value="请输入账号和密码。";return}u.value=!0;try{yield k(i.value,a.value),n.replace(r.value)}catch(t){o.value=(t==null?void 0:t.message)||"登录失败，请稍后再试。"}finally{u.value=!1}})}return(t,s)=>(_(),f("div",B,[e("div",D,[s[5]||(s[5]=e("div",{class:"login-brand"},[e("span",null,"红原县数字畜牧业监管平台"),e("small",null,"Hongyuan Digital Animal Husbandry Supervision Platform")],-1)),e("form",{class:"login-panel",onSubmit:U(l,["prevent"])},[s[4]||(s[4]=e("div",{class:"login-panel-title"},"用户登录",-1)),e("label",I,[s[2]||(s[2]=e("span",null,"账号",-1)),g(e("input",{"onUpdate:modelValue":s[0]||(s[0]=c=>i.value=c),autocomplete:"username",autofocus:"",placeholder:"请输入账号"},null,512),[[y,i.value,void 0,{trim:!0}]])]),e("label",M,[s[3]||(s[3]=e("span",null,"密码",-1)),g(e("input",{"onUpdate:modelValue":s[1]||(s[1]=c=>a.value=c),autocomplete:"current-password",placeholder:"请输入密码",type:"password"},null,512),[[y,a.value]])]),o.value?(_(),f("div",R,b(o.value),1)):V("",!0),e("button",{class:"login-submit",disabled:u.value,type:"submit"},b(u.value?"登录中":"登录"),9,q)],32)])]))}},P=x(C,[["__scopeId","data-v-02c20620"]]);export{P as default};
+var m=(v,d,n)=>new Promise((i,a)=>{var u=l=>{try{r(n.next(l))}catch(t){a(t)}},o=l=>{try{r(n.throw(l))}catch(t){a(t)}},r=l=>l.done?i(l.value):Promise.resolve(l.value).then(u,o);r((n=n.apply(v,d)).next())});import{_ as x,S as w,T as S,e as h,o as _,c as f,a as e,L as U,I as g,J as y,t as b,g as V,d as p,U as k}from"./index-1783073104768.js";const B={class:"login-screen"},D={class:"login-shell"},I={class:"login-field"},M={class:"login-field"},R={key:0,class:"login-error"},q=["disabled"],C={__name:"index",setup(v){const d=w(),n=S(),i=p(""),a=p(""),u=p(!1),o=p(""),r=h(()=>{const t=typeof d.query.redirect=="string"?decodeURIComponent(d.query.redirect):"/platform";return t.startsWith("/login")?"/platform":t||"/platform"});function l(){return m(this,null,function*(){if(o.value="",!i.value||!a.value){o.value="请输入账号和密码。";return}u.value=!0;try{yield k(i.value,a.value),n.replace(r.value)}catch(t){o.value=(t==null?void 0:t.message)||"登录失败，请稍后再试。"}finally{u.value=!1}})}return(t,s)=>(_(),f("div",B,[e("div",D,[s[5]||(s[5]=e("div",{class:"login-brand"},[e("span",null,"红原县数字畜牧业监管平台"),e("small",null,"Hongyuan Digital Animal Husbandry Supervision Platform")],-1)),e("form",{class:"login-panel",onSubmit:U(l,["prevent"])},[s[4]||(s[4]=e("div",{class:"login-panel-title"},"用户登录",-1)),e("label",I,[s[2]||(s[2]=e("span",null,"账号",-1)),g(e("input",{"onUpdate:modelValue":s[0]||(s[0]=c=>i.value=c),autocomplete:"username",autofocus:"",placeholder:"请输入账号"},null,512),[[y,i.value,void 0,{trim:!0}]])]),e("label",M,[s[3]||(s[3]=e("span",null,"密码",-1)),g(e("input",{"onUpdate:modelValue":s[1]||(s[1]=c=>a.value=c),autocomplete:"current-password",placeholder:"请输入密码",type:"password"},null,512),[[y,a.value]])]),o.value?(_(),f("div",R,b(o.value),1)):V("",!0),e("button",{class:"login-submit",disabled:u.value,type:"submit"},b(u.value?"登录中":"登录"),9,q)],32)])]))}},P=x(C,[["__scopeId","data-v-02c20620"]]);export{P as default};

docs/index.html

@@ -6,8 +6,8 @@
   <link rel="icon" type="image/svg+xml" href="./vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>红原县数字畜牧业监管平台</title>
-  <script type="module" crossorigin src="./assets/index-1783008015343.js"></script>
-  <link rel="stylesheet" href="./assets/index-47d6f37a-balabala-1783008015343.css">
+  <script type="module" crossorigin src="./assets/index-1783073104768.js"></script>
+  <link rel="stylesheet" href="./assets/index-47d6f37a-balabala-1783073104768.css">
 </head>
 
 <body>

src/services/openApi.js

@@ -7,6 +7,8 @@ const OPEN_API_BASE = import.meta.env.VITE_OPEN_API_BASE || "/openApi"
 const CXPT_GRASSLAND_AREA_WAN_MU = 756.37
 const CXPT_WETLAND_AREA_WAN_MU = 291.82
 const HONGYUAN_TOWN_DISPLAY_ORDER = hongyuanTownshipDisplayOrder.map(normalizeTownName)
+const WETLAND_CHART_PALETTE = ["#32DCFF", "#24F6C4", "#6EA8FF", "#FFE06B", "#7EE269", "#9EA7FF"]
+const WOODLAND_CHART_PALETTE = ["#2BD17E", "#8AE611", "#24F6C4", "#FFE06B", "#32DCFF", "#9EA7FF"]
 
 function joinBase(path) {
   if (/^https?:\/\//.test(path)) return path
@@ -699,6 +701,14 @@ function withPercentExtra(rows = [], total = sumRowValues(rows), label = "") {
   })
 }
 
+function colorRowsByPalette(rows = [], palette = []) {
+  if (!palette.length) return rows
+  return rows.map((row, index) => ({
+    ...row,
+    color: row?.color || row?.fillColor || palette[index % palette.length],
+  }))
+}
+
 function hasPanelRows(panel) {
   return Array.isArray(panel?.rows) && panel.rows.length > 0
 }
@@ -743,8 +753,9 @@ function diversifyPanelColumn(panels = []) {
     if (!panel?.type || ["projectTable", "iconMetric", "metric", "spotlight", "rank", "table", "stackColumn"].includes(panel.type)) {
       return panel
     }
-    if (!used.has(panel.type)) {
-      used.add(panel.type)
+    const visualType = panel.type === "donut" && panel.variant === "ring" ? "donut-ring" : panel.type
+    if (!used.has(visualType)) {
+      used.add(visualType)
       return panel
     }
     const nextType = (nextTypeMap[panel.type] || preferredTypes).find((type) => !used.has(type)) || panel.type
@@ -948,10 +959,10 @@ function buildWetlandDefaultPanels({
   levelTownRows,
   minTownRows,
 }) {
-  const townAreaPanel = buildPanel("wetland-town-area", "湿地面积分布", sortRowsByTownDisplayOrder(townAreaRows), "line", { span: 1, variant: "distribution" })
-  const typePanel = buildPanel("wetland-type", "湿地类型结构", typeRows, "donut", { span: 1 })
-  const levelStructurePanel = buildPanel("wetland-level-proportion", "湿地级占比", withPercentExtra(levelRows), "donut", { span: 1 })
-  const minTypePanel = buildPanel("wetland-min-type", "湿地优势小类", topRows(minTypeRows, 6), "bar", { span: 1 })
+  const townAreaPanel = buildPanel("wetland-town-area", "湿地面积分布", colorRowsByPalette(sortRowsByTownDisplayOrder(townAreaRows), WETLAND_CHART_PALETTE), "column", { span: 1, variant: "plain" })
+  const typePanel = buildPanel("wetland-type", "湿地类型结构", colorRowsByPalette(typeRows, WETLAND_CHART_PALETTE), "donut", { span: 1 })
+  const levelStructurePanel = buildPanel("wetland-level-proportion", "湿地级占比", colorRowsByPalette(withPercentExtra(levelRows), WETLAND_CHART_PALETTE), "donut", { span: 1, variant: "ring" })
+  const minTypePanel = buildPanel("wetland-min-type", "湿地优势小类", colorRowsByPalette(topRows(minTypeRows, 6), WETLAND_CHART_PALETTE), "bar", { span: 1, variant: "raceBar" })
   const yieldCapacityPanel = buildPanel("wetland-yield-capacity", "湿地产能结构", buildWetlandYieldCapacityRows(yieldSummary, yieldRows), "bar", { span: 1, variant: "capacity" })
   const yieldPanel = buildPanel("wetland-yield", "湿地生产力分布", sortRowsByTownDisplayOrder(yieldRows), "line", { span: 1 })
   const edibleYieldPanel = buildPanel("wetland-edible-yield", "可食鲜草产量", topRows(edibleYieldRows, 6), "column", { span: 1, variant: "slim" })
@@ -1070,10 +1081,10 @@ function buildWoodlandDefaultPanels({
   townConcentrationRows = buildHeadTailRows(townRows, { headCount: 4, headName: "前四乡镇", tailName: "其他乡镇" }),
   typeConcentrationRows = buildHeadTailRows(typeRows, { headCount: 2, headName: "主要类型", tailName: "其他类型" }),
 }) {
-  const townPanel = buildPanel("woodland-town", "林地面积分布", sortRowsByTownDisplayOrder(townRows), "line", { span: 1, variant: "distribution" })
-  const typePanel = buildPanel("woodland-type", "林地类型结构", typeRows, "donut", { span: 1 })
-  const protectionPanel = buildPanel("woodland-protection", "公益林保护等级", withPercentExtra(protectionRows), "structure", { span: 1 })
-  const ownershipPanel = buildPanel("woodland-ownership", "林地权属结构", withPercentExtra(ownershipRows), "structure", { span: 1 })
+  const townPanel = buildPanel("woodland-town", "林地面积分布", colorRowsByPalette(sortRowsByTownDisplayOrder(townRows), WOODLAND_CHART_PALETTE), "column", { span: 1, variant: "plain" })
+  const typePanel = buildPanel("woodland-type", "林地类型结构", colorRowsByPalette(typeRows, WOODLAND_CHART_PALETTE), "donut", { span: 1, variant: "ring" })
+  const protectionPanel = buildPanel("woodland-protection", "公益林保护等级", colorRowsByPalette(withPercentExtra(protectionRows), WOODLAND_CHART_PALETTE), "bar", { span: 1, variant: "raceBar" })
+  const ownershipPanel = buildPanel("woodland-ownership", "林地权属结构", colorRowsByPalette(withPercentExtra(ownershipRows), WOODLAND_CHART_PALETTE), "structure", { span: 1 })
   const qualityPanel = buildPanel("woodland-quality", "优势树种面积", topRows(qualityRows, 6), "bar", { span: 1 })
   const originPanel = buildPanel("woodland-origin", "林地起源结构", withPercentExtra(originRows), "structure", { span: 1 })
   const agePanel = buildPanel("woodland-age", "林龄组结构", topRows(ageRows, 6), "column", { span: 1 })
@@ -1085,8 +1096,8 @@ function buildWoodlandDefaultPanels({
   const ownerPanel = buildPanel("woodland-owner-rank", "权属单位排行", topRows(ownerRows, 6), "bar", { span: 1 })
   const typeTownPanel = buildPanel("woodland-type-town", "乡镇类型构成", topRows(typeTownRows, 6), "bar", { span: 1, variant: "distribution" })
   const qualityLevelPanel = buildPanel("woodland-quality-level", "林地质量等级", withPercentExtra(qualityLevelRows), "donut", { span: 1 })
-  const townConcentrationPanel = buildPanel("woodland-town-concentration", "林地集中度", withPercentExtra(townConcentrationRows), "structure", { span: 1 })
-  const typeConcentrationPanel = buildPanel("woodland-type-concentration", "类型集中度", withPercentExtra(typeConcentrationRows), "structure", { span: 1 })
+  const townConcentrationPanel = buildPanel("woodland-town-concentration", "林地集中度", colorRowsByPalette(withPercentExtra(townConcentrationRows), WOODLAND_CHART_PALETTE), "structure", { span: 1 })
+  const typeConcentrationPanel = buildPanel("woodland-type-concentration", "类型集中度", colorRowsByPalette(withPercentExtra(typeConcentrationRows), WOODLAND_CHART_PALETTE), "rose", { span: 1 })
   const leftPanels = diversifyPanelColumn(fillPanelSlots(
     [townPanel, typePanel, protectionPanel, ownershipPanel],
     [scalePanel, ownerPanel, forestTypePanel, qualityPanel]
@@ -1312,8 +1323,17 @@ function buildGrasslandDegradationDistributionRows(rows = []) {
     .filter((row) => row.name && row.name !== "未退化" && Number(row.value) > 0)
     .map((row) => ({
       ...row,
+      color: getGrasslandDegradationColor(row.name),
       extra: formatNumber(percentOf(row.value, total)) ? `${formatNumber(percentOf(row.value, total))}%` : "",
     }))
+    .sort((a, b) => Number(b.value) - Number(a.value))
+}
+
+function getGrasslandDegradationColor(name = "") {
+  const text = String(name)
+  if (text.includes("重度")) return "#FFE06B"
+  if (text.includes("中度")) return "#32DCFF"
+  return "#24F6C4"
 }
 
 function buildGrasslandForageStructureRows(yieldSummary = {}, yieldRows = []) {
@@ -1763,13 +1783,13 @@ function buildGrasslandDefaultPanels({
   forageRows,
   degradationRows,
 }) {
-  const areaPanel = buildPanel("grassland-town", "草地面积分布", sortRowsByTownDisplayOrder(townRows), "line", { span: 1 })
+  const areaPanel = buildPanel("grassland-town", "草地面积分布", sortRowsByTownDisplayOrder(townRows), "column", { span: 1, variant: "plain" })
   const productivityPanel = buildPanel("grassland-productivity-town", "草地生产力分布", sortRowsByTownDisplayOrder(productivityRows), "line", { span: 1 })
   const typePanel = buildPanel("grassland-type-proportion", "草原类占比", grassTypeRows, "donut", { span: 1 })
   const edibleYieldPanel = buildPanel("grassland-edible-yield", "可食鲜草产量分布", topRows(edibleYieldRows, 10), "column", { span: 1, variant: "slim" })
-  const degradationPanel = buildPanel("grassland-degradation", "草地退化统计", buildGrasslandDegradationDistributionRows(degradationRows), "structure", { span: 1 })
+  const degradationPanel = buildPanel("grassland-degradation", "草地退化统计", buildGrasslandDegradationDistributionRows(degradationRows), "bar", { span: 1, variant: "raceBar" })
   const healthPanel = buildPanel("grassland-health-proportion", "草地健康占比", healthRows, "rose", { span: 1 })
-  const levelPanel = buildPanel("grassland-level-proportion", "草原级占比", grassLevelRows, "donut", { span: 1 })
+  const levelPanel = buildPanel("grassland-level-proportion", "草原级占比", grassLevelRows, "donut", { span: 1, variant: "ring" })
   const foragePanel = buildPanel("grassland-forage-capacity", "饲草供给", forageRows, "bar", { span: 1, variant: "capacity" })
   const leftPanels = diversifyPanelColumn([
     areaPanel,

src/views/forestGrassWet/components/BusinessPanelRenderer.vue

@@ -56,14 +56,28 @@
     >
       <template v-if="pieRows.length">
         <div v-if="donutVariant === 'ring'" class="business-ring-visual">
-          <div class="business-ring-core" :style="ringStyle">
-            <div class="business-ring-orbit"></div>
+          <svg class="business-ring-chart" viewBox="0 0 160 160" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+            <circle class="business-ring-halo" cx="80" cy="80" r="39" />
+            <circle class="business-ring-track" cx="80" cy="80" r="52" />
+            <circle
+              v-for="segment in ringSegments"
+              :key="segment.key"
+              class="business-ring-segment"
+              :class="{ 'is-active': segment.index === normalizedActiveIndex }"
+              cx="80"
+              cy="80"
+              r="52"
+              :stroke="segment.color"
+              :stroke-dasharray="segment.dasharray"
+              :stroke-dashoffset="segment.dashoffset"
+              :style="{ color: segment.color }"
+            />
+          </svg>
           <div class="business-ring-inner">
             <strong>{{ getPiePercent(activePieRow) }}</strong>
             <span>{{ activePieRow?.name || "结构占比" }}</span>
           </div>
         </div>
-        </div>
         <div v-else class="business-donut-visual">
           <MPie
             :key="pieKey"
@@ -232,6 +246,7 @@
         'is-distribution': panel?.variant === 'distribution',
         'is-capacity': panel?.variant === 'capacity',
         'is-rank-bar': panel?.variant === 'rankBar',
+        'is-race-bar': panel?.variant === 'raceBar',
       }"
     >
       <div
@@ -239,11 +254,12 @@
         :key="item.key || item.name"
         class="business-bar-row"
         :class="{ 'is-active': index === normalizedActiveIndex }"
+        :style="{ '--bar-color': item.color || item.fillColor || chartColor(index) }"
       >
         <span v-if="panel?.variant === 'rankBar'" class="business-bar-rank">{{ index + 1 }}</span>
         <span class="business-bar-name">{{ item.name }}</span>
         <div class="business-bar-track">
-          <i :style="{ width: `${barWidth(item)}%`, background: barGradient(index) }"></i>
+          <i :style="{ width: `${barWidth(item)}%`, background: barGradient(index, item) }"></i>
         </div>
         <strong>
           {{ displayValue(item) }}
@@ -273,7 +289,7 @@
           <i
             :style="{
               height: `${barWidth(item)}%`,
-              background: columnGradient(index),
+              background: columnGradient(index, item),
               '--column-load-delay': `${index * 0.075}s`,
             }"
           ></i>
@@ -635,22 +651,31 @@ const donutVariant = computed(() => {
   if (panelType.value !== "donut") return "standard"
   return props.panel?.variant === "ring" ? "ring" : "three"
 })
-const ringStyle = computed(() => {
-  if (!pieRows.value.length) return {}
-  const total = sumValue.value || 1
-  let cursor = -90
-  const stops = pieRows.value.map((item, index) => {
-    const percent = (numericValue(item) / total) * 360
-    const start = cursor
-    const end = cursor + percent
-    cursor = end
-    return `${chartColor(index)} ${start}deg ${end}deg`
-  })
+const ringSegments = computed(() => {
+  const data = pieRows.value
+  const count = data.length
+  if (!count) return []
+  const radius = 52
+  const circumference = 2 * Math.PI * radius
+  const total = data.reduce((sum, item) => sum + numericValue(item), 0) || 1
+  const gap = count > 1 ? Math.min(12, Math.max(7, circumference * 0.028)) : 0
+  let cursor = 0
+  return data.map((item, index) => {
+    const value = numericValue(item)
+    const segmentLength = (value / total) * circumference
+    const visibleLength = count > 1 ? Math.max(5, segmentLength - gap) : circumference
+    const startOffset = cursor + (count > 1 ? gap / 2 : 0)
+    cursor += segmentLength
     return {
-    "--ring-gradient": `conic-gradient(${stops.join(", ")})`,
-    "--ring-active-color": chartColor(normalizedActiveIndex.value),
+      key: item.key || item.name || index,
+      index,
+      item,
+      color: chartColor(index),
+      dasharray: `${visibleLength.toFixed(2)} ${circumference.toFixed(2)}`,
+      dashoffset: `${(-startOffset).toFixed(2)}`,
     }
   })
+})
 const roseSegments = computed(() => {
   const data = pieRows.value
   const count = data.length
@@ -883,12 +908,16 @@ function handleProjectRowClick(item) {
 
 function barWidth(item) {
   const scaleValue = Number(item?.scaleValue)
-  if (!Number.isNaN(scaleValue) && scaleValue > 0) {
+  const useScaleValue = !(panelType.value === "column" && props.panel?.variant === "plain")
+  if (useScaleValue && !Number.isNaN(scaleValue) && scaleValue > 0) {
     return Math.max(8, Math.min(100, Math.round(scaleValue)))
   }
   const value = numericValue(item)
   if (!value) return 8
-  return Math.max(8, Math.round((value / maxValue.value) * 100))
+  const relativeMaxValue = panelType.value === "column" && props.panel?.variant === "plain"
+    ? Math.max(...values.value, value)
+    : maxValue.value
+  return Math.max(8, Math.round((value / relativeMaxValue) * 100))
 }
 
 function heatCellStyle(item, index) {
@@ -1062,11 +1091,23 @@ function isPanelActuallyVisible() {
   return Boolean(element.offsetParent || element.getClientRects().length)
 }
 
-function barGradient(index) {
-  return `linear-gradient(90deg, rgba(36, 246, 196, 0.18), ${chartColor(index)})`
+function barGradient(index, item = {}) {
+  const color = item.color || item.fillColor || chartColor(index)
+  return `linear-gradient(90deg, ${hexToRgba(color, 0.2)}, ${color})`
 }
 
-function columnGradient(index) {
+function columnGradient(index, item = {}) {
+  if (props.panel?.variant === "plain") {
+    const color = item.color || item.fillColor
+    if (color) return `linear-gradient(180deg, ${hexToRgba(color, 0.95)} 0%, ${hexToRgba(color, 0.58)} 100%)`
+    const palette = [
+      ["#9BEA55", "#29DFA7"],
+      ["#7FEA6A", "#24D5C0"],
+      ["#B6E84C", "#47D982"],
+    ]
+    const [top, bottom] = palette[index % palette.length]
+    return `linear-gradient(180deg, ${top} 0%, ${bottom} 100%)`
+  }
   return `linear-gradient(180deg, ${chartColor(index)}, rgba(50, 220, 255, 0.12))`
 }
 </script>
@@ -1738,8 +1779,10 @@ function columnGradient(index) {
     }
 
     .business-donut-row {
-      grid-template-columns: 14px minmax(0, 1fr) 48px 22px;
+      grid-template-columns: 12px minmax(0, 1fr) max-content max-content;
+      gap: 5px;
       min-height: 22px;
+      padding: 0 1px;
 
       i {
         width: 8px;
@@ -1749,7 +1792,69 @@ function columnGradient(index) {
       }
 
       strong {
-        font-size: 17px;
+        font-size: 16px;
+        line-height: 18px;
+      }
+    }
+
+    &.is-dense {
+      grid-template-columns: 108px minmax(0, 1fr);
+      gap: 7px;
+      padding: 5px 10px 5px 12px;
+
+      .business-ring-visual {
+        width: 108px;
+        height: 108px;
+      }
+
+      .business-ring-chart {
+        width: 104px;
+        height: 104px;
+      }
+
+      .business-ring-inner {
+        inset: 27px 23px 25px;
+
+        strong {
+          font-size: 18px;
+          line-height: 20px;
+        }
+
+        span {
+          max-width: 58px;
+          font-size: 10px;
+          line-height: 12px;
+        }
+      }
+
+      .business-donut-legend {
+        gap: 2px;
+      }
+
+      .business-donut-row {
+        grid-template-columns: 9px minmax(0, 1fr) max-content max-content;
+        gap: 4px;
+        min-height: 16px;
+
+        i {
+          width: 7px;
+          height: 7px;
+          border-width: 1px;
+        }
+
+        span {
+          font-size: 10px;
+          line-height: 12px;
+        }
+
+        strong {
+          font-size: 13px;
+          line-height: 15px;
+        }
+
+        em {
+          font-size: 9px;
+        }
       }
     }
   }
@@ -1902,98 +2007,93 @@ function columnGradient(index) {
   width: 132px;
   height: 132px;
   min-width: 0;
+  isolation: isolate;
 
   &:before {
     content: "";
     position: absolute;
-    left: 12px;
-    right: 12px;
-    bottom: 17px;
-    height: 18px;
+    left: 11px;
+    right: 11px;
+    bottom: 12px;
+    height: 24px;
     border-radius: 50%;
-    background: radial-gradient(ellipse at center, rgba(36, 246, 196, 0.28), rgba(36, 246, 196, 0) 70%);
-    filter: blur(1px);
+    background: radial-gradient(ellipse at center, rgba(48, 220, 255, 0.24), rgba(48, 220, 255, 0) 72%);
+    filter: blur(2px);
+    pointer-events: none;
   }
 }
 
-.business-ring-core {
+.business-ring-chart {
   position: relative;
-  width: 104px;
-  height: 104px;
-  border-radius: 50%;
-  background:
-    radial-gradient(circle at 50% 50%, rgba(3, 23, 36, 0.98) 0 42%, transparent 43%),
-    var(--ring-gradient, conic-gradient(#24f6c4, #32dcff));
-  box-shadow:
-    inset 0 0 0 8px rgba(4, 28, 42, 0.74),
-    inset 0 0 24px rgba(48, 220, 255, 0.18),
-    0 0 22px rgba(48, 220, 255, 0.18);
-  transform: rotateX(56deg) rotateZ(-18deg);
-
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    border-radius: 50%;
-    pointer-events: none;
+  z-index: 1;
+  width: 128px;
+  height: 128px;
+  overflow: visible;
 }
 
-  &:before {
-    inset: -8px;
-    border: 1px solid rgba(48, 220, 255, 0.18);
-    border-left-color: var(--ring-active-color, #24f6c4);
-    border-bottom-color: rgba(36, 246, 196, 0.58);
-    box-shadow: 0 0 16px rgba(48, 220, 255, 0.12);
+.business-ring-halo {
+  fill: rgba(4, 22, 34, 0.88);
+  stroke: rgba(48, 220, 255, 0.16);
+  stroke-width: 1;
+  filter: drop-shadow(0 0 12px rgba(48, 220, 255, 0.18));
 }
 
-  &:after {
-    inset: 22px;
-    background:
-      radial-gradient(circle, rgba(36, 246, 196, 0.16), rgba(4, 20, 32, 0.88) 68%),
-      linear-gradient(180deg, rgba(48, 220, 255, 0.16), rgba(48, 220, 255, 0.02));
-    border: 1px solid rgba(48, 220, 255, 0.2);
+.business-ring-track,
+.business-ring-segment {
+  fill: none;
+  transform: rotate(-90deg);
+  transform-origin: 80px 80px;
 }
+
+.business-ring-track {
+  stroke: rgba(48, 220, 255, 0.12);
+  stroke-width: 22;
 }
 
-.business-ring-orbit {
-  position: absolute;
-  inset: -16px;
-  border-radius: 50%;
-  border: 1px solid rgba(48, 220, 255, 0.16);
-  border-right-color: rgba(48, 220, 255, 0.02);
-  border-top-color: rgba(36, 246, 196, 0.48);
-  box-shadow: 0 0 16px rgba(36, 246, 196, 0.14);
+.business-ring-segment {
+  stroke-width: 22;
+  stroke-linecap: round;
+  opacity: 0.9;
+  transition: stroke-width 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
+  filter: drop-shadow(0 0 4px rgba(48, 220, 255, 0.3));
+
+  &.is-active {
+    stroke-width: 24;
+    opacity: 1;
+    filter:
+      drop-shadow(0 0 4px currentColor)
+      drop-shadow(0 0 10px rgba(48, 220, 255, 0.5));
+  }
 }
 
 .business-ring-inner {
   position: absolute;
-  left: 14px;
-  right: 14px;
-  top: 18px;
+  inset: 33px 30px 31px;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   color: #ffffff;
   text-align: center;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.98);
-  transform: rotateZ(18deg) rotateX(-56deg);
-  transform-origin: 50% 50%;
+  pointer-events: none;
 
   strong {
     color: #ffffff;
     font-family: D-DIN, Arial, sans-serif;
-    font-size: 24px;
-    line-height: 26px;
+    font-size: 22px;
+    line-height: 24px;
     font-weight: 800;
+    letter-spacing: 0;
   }
 
   span {
-    max-width: 76px;
-    margin-top: 1px;
+    max-width: 70px;
+    margin-top: 2px;
     color: rgba(255, 255, 255, 0.94);
-    font-size: 12px;
-    line-height: 14px;
+    font-size: 11px;
+    line-height: 13px;
     font-weight: 700;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2734,6 +2834,109 @@ function columnGradient(index) {
       }
     }
   }
+
+  &.is-race-bar {
+    justify-content: center;
+    gap: 13px;
+    padding: 18px 18px 18px 16px;
+    overflow: hidden;
+
+    .business-bar-row {
+      grid-template-columns: 68px minmax(0, 1fr) 86px;
+      grid-template-areas: "name track value";
+      align-items: center;
+      min-height: 38px;
+      gap: 9px;
+      padding: 0;
+      border-bottom: 0;
+    }
+
+    .business-bar-name {
+      position: relative;
+      padding-left: 13px;
+      color: rgba(240, 253, 255, 0.92);
+      font-size: 13px;
+      line-height: 15px;
+      font-weight: 700;
+
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 4px;
+        width: 7px;
+        height: 7px;
+        background: var(--bar-color, currentColor);
+        box-shadow: 0 0 8px var(--bar-color, currentColor);
+      }
+    }
+
+    .business-bar-track {
+      position: relative;
+      height: 26px;
+      margin-top: 0;
+      padding: 0;
+      overflow: visible;
+      border: 0;
+      background:
+        repeating-linear-gradient(90deg, rgba(214, 250, 255, 0.12) 0 1px, transparent 1px 52px),
+        linear-gradient(90deg, rgba(48, 220, 255, 0.08), rgba(48, 220, 255, 0.025));
+
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -8px;
+        bottom: -8px;
+        width: 1px;
+        background: rgba(213, 247, 255, 0.32);
+      }
+    }
+
+    .business-bar-track i {
+      position: relative;
+      height: 100%;
+      min-width: 18px;
+      box-shadow:
+        0 0 13px rgba(36, 246, 196, 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.26);
+    }
+
+    .business-bar-row:nth-child(1) .business-bar-name {
+      color: #24f6c4;
+    }
+
+    .business-bar-row:nth-child(2) .business-bar-name {
+      color: #32dcff;
+    }
+
+    .business-bar-row:nth-child(3) .business-bar-name {
+      color: #ffe06b;
+    }
+
+    .business-bar-row strong {
+      grid-area: value;
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 18px;
+      text-align: left;
+      text-shadow: none;
+    }
+
+    .business-bar-row strong em {
+      margin-left: 3px;
+      color: rgba(238, 253, 255, 0.72);
+      font-size: 11px;
+    }
+
+    .business-bar-row strong small {
+      display: block;
+      margin: 1px 0 0;
+      color: rgba(238, 253, 255, 0.72);
+      font-size: 10px;
+      line-height: 11px;
+    }
+  }
 }
 
 .business-bar-row {
@@ -3018,6 +3221,62 @@ function columnGradient(index) {
       }
     }
   }
+
+  &.is-variant-plain {
+    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
+    gap: 7px;
+    padding: 18px 14px 7px;
+
+    &:before {
+      top: 37px;
+      bottom: 36px;
+      opacity: 0.62;
+    }
+
+    .business-column-item {
+      position: relative;
+      z-index: 1;
+      grid-template-rows: 16px minmax(52px, 1fr) 28px;
+
+      strong {
+        color: rgba(244, 252, 255, 0.88);
+        font-size: 11px;
+        line-height: 15px;
+      }
+
+      span {
+        max-width: 44px;
+        color: rgba(255, 255, 255, 0.82);
+        font-size: 10px;
+        line-height: 12px;
+        -webkit-line-clamp: 2;
+      }
+    }
+
+    .business-column-track {
+      width: 16px;
+      height: 100%;
+      min-height: 54px;
+      border: 0;
+      background: rgba(67, 130, 96, 0.1);
+      box-shadow: none;
+
+      i {
+        left: 0;
+        right: 0;
+        min-height: 7px;
+        border-radius: 2px 2px 0 0;
+        box-shadow:
+          0 0 10px rgba(36, 246, 196, 0.28),
+          inset 0 1px 0 rgba(255, 255, 255, 0.24);
+
+        &:before,
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 .business-column-item {