优化样式

web/client/src/sections/quanju/containers/footer/build/Leftbottom.js

@@ -136,7 +136,7 @@ function Leftbottom(props) {
     },
 //      title: {
 //    text:total,//主标题文本
-//    left:'center',
+//    left:'20%',
 //   //  top:'35%',
 //      subtext:chartTitle,//副标题文本
 //      textStyle:{
@@ -151,6 +151,7 @@ function Leftbottom(props) {
 //          fontSize: 12,
 //          fontWeight:500,
 //          color:'#E9F7FF',
+//          align:'center'
 
 //     }
 // },
@@ -159,7 +160,7 @@ legend: {
   itemWidth: 10,
   itemHeight: 10,
   // right: '30%',
-  left: '50%',
+  right: '10%',
   top: 'center',
   align: 'left',
   data: name,

web/client/src/sections/quanju/containers/footer/build/Rightcenter.js

@@ -20,14 +20,14 @@ export default function Rightcenter({data,sundata}) {
   //  {name: '东新乡', total: 513},
   //  {name: '银三角', total: 513},
   //  {name: '八月湖街道', total: 513},]
-   const province = undefined
+  //  const province = undefined
   const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)"
 const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)"
 const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 148, 255, 0.4) 100%)"
 const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)"
 let TOTALS = data?.map(({ name, total }, index) => {
-  let max = province ? data.length * 30 + 100 : data.length * 500 + 100
-  console.log(max,'好朋友吗')
+  let max = Math.max(...data.map(item=>item.total))
+  console.log(data.map(item=>item.total),'好朋友吗')
   return {
     name,
     value: total,
@@ -36,7 +36,7 @@ let TOTALS = data?.map(({ name, total }, index) => {
 })
 let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS
 function Cell(props) {
-  const { name, rank, value, percent, style = {} } = props
+  const { name, rank, value, percent, style = {},cebg } = props
   let bg = RNAKS[rank] || OTHER
   console.log(percent,'百分比')
   return <div style={{
@@ -58,9 +58,11 @@ function Cell(props) {
       <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", height: 13 }}>
        <div style={{display:'flex', width:"85%"}}>
           <div style={{
+            position:'relative',
           width: percent, height: 5,
-          background: "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)"
-            }} />
+          background: cebg || "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)"
+            }} >{cebg?<span style={{position:'absolute',right:'0',top:'0',backgroundColor:"#FFF",height:"5px",width:"5px",borderRadius:"2.5px"}}/>:""}</div>
+            
             <div style={{width:`calc(100% - ${percent})`,background:'rgba(255,255,255,0.0800)'}}/>
           </div>
         <div style={{ marginLeft: 10, fontSize: 12,color:"#FFFFFF" }}>{value}</div>
@@ -69,11 +71,11 @@ function Cell(props) {
   </div>
 }
 const renderContent = () => {
-  return <div >
-    {new_TOTALS?.map(({ name, value, percent }, index) => {
-      return <Cell key={index} rank={index} name={name} value={value} percent={percent} />
-    })}
-  </div>
+ 
+  return new_TOTALS?.map(({ name, value, percent }, index) => {
+      return <Cell key={index} rank={index} name={name} value={value} percent={percent} cebg={index===0?'linear-gradient(63deg, rgba(16, 39, 75, 1) 0%, rgba(7, 185, 254, 1) 100%)':undefined}/>
+    })
+  
 }
 const RNAKS = [FIRST, SECOND, THIRD]
  

web/client/src/sections/quanju/containers/footer/guanli/style.less

@@ -153,7 +153,7 @@
                 font-weight: 400;
                 color: rgba(216,240,255,0.8000);
                 line-height: 20px;
-                // flex:1;
+                flex:1;
                 text-align: center;
                 // &:nth-child(1){