修改布局、增加图片显示

src/assets/mon-expend.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20.782123565673828" viewBox="0 0 20 20.782123565673828"><defs><clipPath id="master_svg0_847_032729"><rect x="0" y="0" width="20" height="20.782123565673828" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_847_032729)"><g><rect x="4" y="1" width="12" height="12" rx="0" fill="#006AFF" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,38.953125)"><path d="M10,19.4765625L18.660254,27.3337054L1.3397461,27.3337054L10,19.4765625Z" fill="#006AFF" fill-opacity="1"/></g><g><path d="M9.1913283,11.0580268L7.51306236,11.0580268C7.35655603,11.0444522,7.23625572,10.96734,7.15216154,10.826971499999999C7.06885609,10.6888022,7.016509678,10.5279632,7,10.3594456C7.017378883,10.188221500000001,7.068115413,10.0477405,7.15216154,9.938231C7.23620769,9.8286071,7.35650802,9.767065500000001,7.51306236,9.753319300000001L9.1912801,9.753319300000001L9.1912801,9.106069999999999L7.51306236,9.0958033C7.35655603,9.0821152,7.23625572,9.0170364,7.15216154,8.9005685C7.068115413,8.7841563,7.017378883,8.6368322,7,8.4587641C7.017378883,8.2875981,7.068115413,8.1471739,7.15216154,8.0375504C7.23620769,7.9279835,7.35650802,7.8663273,7.51306236,7.8526378L8.7652085,7.8526378L7.60000461,5.4280212C7.54207498,5.3458319,7.48699379,5.2414551,7.43485719,5.1146632C7.38267225,4.98798543,7.35945216,4.84927291,7.3652451,4.69863987C7.3942582,4.50682652,7.45218754,4.35100302,7.53917849,4.23116961C7.6260727,4.11127912,7.7884686,4.034222949,8.026076,4.000058092959C8.1652515,4.013803818,8.2898962,4.070212834,8.4000592,4.16957028C8.5102221,4.26892772,8.6000133,4.37666878,8.6695285,4.493137L9.991286800000001,7.3492343L11.4434352,4.47260371C11.5129981,4.35613537,11.602838,4.25341275,11.7129517,4.1643219C11.8231635,4.075345144,11.9478078,4.020533139,12.0868874,4C12.1739259,4.0068444167,12.2535801,4.020476025,12.3259921,4.041123286C12.3984518,4.061599314,12.4622226,4.095878176,12.517303,4.14384587C12.5723844,4.19181357,12.618825000000001,4.26031423,12.6564798,4.34929097C12.694085099999999,4.4384388,12.7217469,4.55479306,12.7390766,4.69863909C12.7390766,4.89723963,12.681098500000001,5.0856309,12.5650949,5.2636986L11.2173648,7.8526945L12.4956274,7.8526945C12.6462936,7.8663836,12.765193499999999,7.9280396,12.8521352,8.037606199999999C12.9390783,8.147172900000001,12.9883661,8.2875972,12.999952799999999,8.4588208C12.988414800000001,8.636887999999999,12.9376783,8.7876353,12.8477912,8.910948300000001C12.7580004,9.0341468,12.6377001,9.1027045,12.486938,9.116392600000001L10.8261473,9.126659400000001L10.8261473,9.753376L12.4956751,9.753376C12.6463413,9.7671208,12.7652407,9.8355646,12.852183799999999,9.9588199C12.9391265,10.082133800000001,12.988414800000001,10.229342899999999,13,10.400681500000001C12.9884629,10.5787482,12.9391265,10.7276716,12.852183799999999,10.8475614C12.7652407,10.967452,12.6463413,11.0341854,12.4956751,11.0479865L10.8261473,11.037606700000001L10.8261473,12.1267157C10.8029273,12.7088299,10.5333617,13.0000019,10.0174513,13.0000019C9.7623684,13.0000019,9.5638151,12.9280777,9.4217913,12.7841759C9.2797196,12.6403875,9.2029629,12.4212532,9.1913769,12.1267738L9.1913283,11.0580268L9.1913283,11.0580268Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

src/assets/mon-income.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20.782123565673828" viewBox="0 0 20 20.782123565673828"><defs><clipPath id="master_svg0_847_032797"><rect x="0" y="0" width="20" height="20.782123565673828" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_847_032797)"><g transform="matrix(1,0,0,-1,0,38.953125)"><g><g><rect x="4" y="19.4765625" width="12" height="12" rx="0" fill="#006AFF" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,75.90625)"><path d="M10,37.953125L18.660254,45.8102679L1.3397461,45.8102679L10,37.953125Z" fill="#006AFF" fill-opacity="1"/></g></g><g transform="matrix(1,0,0,-1,0,62.953125)"><path d="M9.1913283,38.5345893L7.51306236,38.5345893C7.35655603,38.5210147,7.23625572,38.4439025,7.15216154,38.303534C7.06885609,38.1653647,7.016509678,38.0045257,7,37.8360081C7.017378883,37.664784,7.068115413,37.524303,7.15216154,37.4147935C7.23620769,37.3051696,7.35650802,37.243628,7.51306236,37.2298818L9.1912801,37.2298818L9.1912801,36.5826325L7.51306236,36.5723658C7.35655603,36.5586777,7.23625572,36.4935989,7.15216154,36.377131C7.068115413,36.2607188,7.017378883,36.1133947,7,35.935326599999996C7.017378883,35.7641606,7.068115413,35.6237364,7.15216154,35.5141129C7.23620769,35.404545999999996,7.35650802,35.3428898,7.51306236,35.3292003L8.7652085,35.3292003L7.60000461,32.9045837C7.54207498,32.8223944,7.48699379,32.7180176,7.43485719,32.5912257C7.38267225,32.46454793,7.35945216,32.32583541,7.3652451,32.17520237C7.3942582,31.98338902,7.45218754,31.82756552,7.53917849,31.70773211C7.6260727,31.58784162,7.7884686,31.510785449,8.026076,31.476620592959C8.1652515,31.490366318,8.2898962,31.546775334,8.4000592,31.64613278C8.5102221,31.74549022,8.6000133,31.85323128,8.6695285,31.9696995L9.991286800000001,34.8257968L11.4434352,31.94916621C11.5129981,31.83269787,11.602838,31.72997525,11.7129517,31.6408844C11.8231635,31.551907644,11.9478078,31.497095639,12.0868874,31.4765625C12.1739259,31.4834069167,12.2535801,31.497038525,12.3259921,31.517685786C12.3984518,31.538161814,12.4622226,31.572440676,12.517303,31.62040837C12.5723844,31.66837607,12.618825000000001,31.73687673,12.6564798,31.82585347C12.694085099999999,31.9150013,12.7217469,32.03135556,12.7390766,32.17520159C12.7390766,32.37380213,12.681098500000001,32.5621934,12.5650949,32.7402611L11.2173648,35.329257L12.4956274,35.329257C12.6462936,35.3429461,12.765193499999999,35.4046021,12.8521352,35.5141687C12.9390783,35.6237354,12.9883661,35.7641597,12.999952799999999,35.9353833C12.988414800000001,36.1134505,12.9376783,36.2641978,12.8477912,36.3875108C12.7580004,36.5107093,12.6377001,36.579267,12.486938,36.5929551L10.8261473,36.6032219L10.8261473,37.2299385L12.4956751,37.2299385C12.6463413,37.2436833,12.7652407,37.3121271,12.852183799999999,37.4353824C12.9391265,37.5586963,12.988414800000001,37.7059054,13,37.877244C12.9884629,38.0553107,12.9391265,38.2042341,12.852183799999999,38.324123900000004C12.7652407,38.4440145,12.6463413,38.5107479,12.4956751,38.524549L10.8261473,38.5141692L10.8261473,39.6032782C10.8029273,40.1853924,10.5333617,40.4765644,10.0174513,40.4765644C9.7623684,40.4765644,9.5638151,40.4046402,9.4217913,40.2607384C9.2797196,40.11695,9.2029629,39.8978157,9.1913769,39.6033363L9.1913283,38.5345893L9.1913283,38.5345893Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>

src/assets/mon-loss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_847_044843"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_847_044843)"><g><path d="M17.92996,6.5624995C18.382853,6.5624995,18.75,6.9343944,18.75,7.3930273L18.75,17.606972C18.75,18.065662,18.382891,18.437498,17.92996,18.437498L15.566269,18.437498C15.113379,18.437498,14.746229,18.065701,14.746229,17.606972L14.746229,7.3930273C14.746229,6.9343944,15.113339,6.5624995,15.566269,6.5624995L17.92996,6.5624995ZM8.808671499999999,8.961503C9.2615623,8.961503,9.6287689,9.333338699999999,9.6287689,9.7920303L9.6287689,17.606951C9.6287689,18.065641,9.2616005,18.437477,8.808671499999999,18.437477L6.4450393,18.437477C5.9921484,18.437477,5.6250005,18.06568,5.6250005,17.606951L5.6250005,9.7920303C5.6250005,9.333338699999999,5.9921098,8.961503,6.4450393,8.961503L8.808671499999999,8.961503ZM13.242929,11.396327C13.684374,11.396327,14.042225,11.758554,14.042225,12.20537L14.042225,17.628475C14.042225,18.075293,13.684373,18.437517,13.242929,18.437517L10.9392376,18.437517C10.4978313,18.437517,10.1399994,18.075331,10.1399994,17.628475L10.1399994,12.20537C10.1399994,11.758554,10.4977913,11.396327,10.9392376,11.396327L13.242929,11.396327ZM4.353008,13.410115C4.7944529,13.410115,5.152246,13.772381,5.152246,14.219217L5.152246,17.628475C5.152246,18.075293,4.7944334,18.437517,4.353008,18.437517L2.0492969199999997,18.437517C1.6078907,18.437498,1.25,18.075312,1.25,17.628456L1.25,14.219217C1.25,13.7724,1.60785159,13.410115,2.0492969199999997,13.410115L4.353008,13.410115ZM2.7157422,10.2778301C2.4810492,10.5165968,2.09619707,10.5165968,1.8615039599999998,10.2778301C1.62556645,10.0390015,1.62556645,9.6518545,1.8614454299999998,9.4130645L7.2190042,3.9899402C7.4536786,3.7511284,7.8385677,3.7511284,8.0732422,3.9899402L11.160429,7.1149392L15.14125,3.0853693L14.202539,2.1351741L17.5,1.5625L16.934297,4.9004097L15.995584,3.9501362L11.587578,8.412108400000001C11.352885,8.650876,10.9680328,8.650876,10.7333393,8.412108400000001L7.646152,5.2870501999999995L2.7157422,10.2778301Z" fill="#FF4D4F" fill-opacity="1"/></g></g></svg>

src/assets/mon-order-volume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_847_032867"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_847_032867)"><g><path d="M11.792826607714844,1.33984375L8.006713407714845,1.33984375C7.542327907714844,1.33984375,7.171059607714843,1.75302371,7.171059607714843,2.26373732C7.171059607714843,2.77563025,7.543006907714844,3.19002935,8.006713407714845,3.19002935L11.816250807714844,3.19002935C12.257271407714844,3.19002935,12.629099407714843,2.77563035,12.629099407714843,2.26373732C12.629199407714843,1.75300351,12.257811407714843,1.33984375,11.792826607714844,1.33984375ZM15.903918407714844,1.95648557L14.018536407714844,1.95648557C14.037703407714844,2.05771697,14.048776407714843,2.16010761,14.048776407714843,2.26373732C14.049356407714845,3.04143015,13.485199407714843,3.80683115,12.814112407714843,3.80683115L7.021860607714844,3.80683115C6.315599007714844,3.80683115,5.750682107714844,3.04143015,5.750682107714844,2.26373732C5.751361807714844,2.16010761,5.762434507714843,2.05771697,5.781600907714844,1.95648557L3.8734350077148436,1.95648557C2.3395750177148438,1.95648557,1.9627304077148438,2.82607595,1.9627304077148438,4.08052535L1.9627304077148438,16.50649975C1.9627304077148438,17.85406675,2.502364577714844,18.60827475,3.989256607714844,18.60827475L15.787978407714844,18.60827475C17.274890407714842,18.60827475,17.997699407714844,18.01693575,17.997699407714844,16.50717975L17.997699407714844,4.08050565C17.997819407714843,2.82617595,17.321098407714842,1.95658553,15.903918407714844,1.95648557L15.903918407714844,1.95648557ZM13.966852407714844,14.22520775L5.767990807714844,14.22520775C5.465796007714843,14.22520775,5.164120407714844,13.85449875,5.164120407714844,13.55182375C5.164120407714844,13.25016775,5.419447407714843,12.99176275,5.721662307714844,12.99176275L13.897119407714843,12.99176275C14.199234407714844,12.99176275,14.454541407714844,13.22664375,14.477465407714844,13.55182375C14.477465407714844,13.85459875,14.268966407714844,14.22520775,13.966852407714844,14.22520775ZM14.000169407714843,10.93507765L5.801207807714844,10.93507765C5.498973107714844,10.93507765,5.306543107714844,10.61013795,5.306543107714844,10.30724335C5.306543107714844,10.00444885,5.561990507714844,9.70163445,5.864085407714844,9.70163445L14.039543407714843,9.70163445C14.341778407714843,9.70163445,14.597086407714844,9.98218445,14.619890407714843,10.30724335C14.619910407714844,10.61003785,14.301724407714843,10.93507765,14.000169407714843,10.93507765ZM14.000169407714843,7.55596925L5.801207807714844,7.55596925C5.498973107714844,7.55596925,5.306543107714844,7.23090985,5.306543107714844,6.92813495C5.306543107714844,6.62532045,5.561990507714844,6.32252595,5.864085407714844,6.32252595L14.039543407714843,6.32252595C14.341778407714843,6.32252595,14.597086407714844,6.60319515,14.619890407714843,6.92813495C14.619910407714844,7.23090985,14.301724407714843,7.55596925,14.000169407714843,7.55596925Z" fill="#006AFF" fill-opacity="1"/></g></g></svg>

src/assets/mon-profit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_847_044248"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_847_044248)"><g><path d="M17.92996,6.5624995C18.382853,6.5624995,18.75,6.9343944,18.75,7.3930273L18.75,17.606972C18.75,18.065662,18.382891,18.437498,17.92996,18.437498L15.566269,18.437498C15.113379,18.437498,14.746229,18.065701,14.746229,17.606972L14.746229,7.3930273C14.746229,6.9343944,15.113339,6.5624995,15.566269,6.5624995L17.92996,6.5624995ZM8.808671499999999,8.961503C9.2615623,8.961503,9.6287689,9.333338699999999,9.6287689,9.7920303L9.6287689,17.606951C9.6287689,18.065641,9.2616005,18.437477,8.808671499999999,18.437477L6.4450393,18.437477C5.9921484,18.437477,5.6250005,18.06568,5.6250005,17.606951L5.6250005,9.7920303C5.6250005,9.333338699999999,5.9921098,8.961503,6.4450393,8.961503L8.808671499999999,8.961503ZM13.242929,11.396327C13.684374,11.396327,14.042225,11.758554,14.042225,12.20537L14.042225,17.628475C14.042225,18.075293,13.684373,18.437517,13.242929,18.437517L10.9392376,18.437517C10.4978313,18.437517,10.1399994,18.075331,10.1399994,17.628475L10.1399994,12.20537C10.1399994,11.758554,10.4977913,11.396327,10.9392376,11.396327L13.242929,11.396327ZM4.353008,13.410115C4.7944529,13.410115,5.152246,13.772381,5.152246,14.219217L5.152246,17.628475C5.152246,18.075293,4.7944334,18.437517,4.353008,18.437517L2.0492969199999997,18.437517C1.6078907,18.437498,1.25,18.075312,1.25,17.628456L1.25,14.219217C1.25,13.7724,1.60785159,13.410115,2.0492969199999997,13.410115L4.353008,13.410115ZM2.7157422,10.2778301C2.4810492,10.5165968,2.09619707,10.5165968,1.8615039599999998,10.2778301C1.62556645,10.0390015,1.62556645,9.6518545,1.8614454299999998,9.4130645L7.2190042,3.9899402C7.4536786,3.7511284,7.8385677,3.7511284,8.0732422,3.9899402L11.160429,7.1149392L15.14125,3.0853693L14.202539,2.1351741L17.5,1.5625L16.934297,4.9004097L15.995584,3.9501362L11.587578,8.412108400000001C11.352885,8.650876,10.9680328,8.650876,10.7333393,8.412108400000001L7.646152,5.2870501999999995L2.7157422,10.2778301Z" fill="#00C261" fill-opacity="1"/></g></g></svg>

src/views/agent/expenseStatistics.vue

@@ -17,13 +17,15 @@
                 </div>
             </div>
             <div v-if="totalType == '1' && Object.keys(monthTotal).length>0" class="mt24 monthTotal-wrap flex">
-                <div class="total-item" :class="monthTotal.profit<0?'loss':''">
+                <div class="total-item" :class="monthTotal.profit<0?'loss':'gain'">
                     <div class="flex-between total-top">
-                        <div class="top-left">
+                        <div class="top-left flex">
-                            <img src="" alt="">
+                            <img v-if="monthTotal.profit<0" src="@/assets/mon-profit.svg" alt="">
+                            <img v-else src="@/assets/mon-loss.svg" alt="">
                             <b>月利润</b>
                         </div>
                         <span v-if="monthTotal.profit<0" class="loss-tip">亏损</span>
+                        <span v-else class="gain-tip">盈利</span>
                     </div>
                     <div class="price">
                         <b>{{monthTotal.profit}}</b>元
@@ -43,8 +45,8 @@
                 </div>
                 <div class="total-item">
                     <div class="flex-between total-top">
-                        <div class="top-left">
+                        <div class="top-left flex">
-                            <img src="" alt="">
+                            <img src="@/assets/mon-income.svg" alt="">
                             <b>月收入</b>
                         </div>
                         <span class="loss-tip-empty"></span>
@@ -67,8 +69,8 @@
                 </div>
                 <div class="total-item">
                     <div class="flex-between total-top">
-                        <div class="top-left">
+                        <div class="top-left flex">
-                            <img src="" alt="">
+                            <img src="@/assets/mon-expend.svg" alt="">
                             <b>月支出</b>
                         </div>
                         <span class="loss-tip-empty"></span>
@@ -91,8 +93,8 @@
                 </div>
                 <div class="total-item">
                     <div class="flex-between total-top">
-                        <div class="top-left">
+                        <div class="top-left flex">
-                            <img src="" alt="">
+                            <img src="@/assets/mon-order-volume.svg" alt="">
                             <b>月单量</b>
                         </div>
                         <span class="loss-tip-empty"></span>
@@ -419,12 +421,12 @@ export default {
         margin-top: 8px;
     }
     .monthTotal-wrap{
-        display: grid;
+        display: flex;
-        grid-gap: 12px;
+        gap: 12px;
-        grid-template-columns: repeat(auto-fit, 287px);
+        flex-wrap: wrap;
     }
 
-    .loss-tip{
+    .loss-tip,.gain-tip{
         width: 50px;
         height: 24px;
         display: flex;
@@ -442,6 +444,11 @@ export default {
         letter-spacing: 0.08em;
         color: #FF4D4F;
     }
+    .gain-tip{
+        color: #0DAF49;
+        background: rgba(239, 255, 224, 0.5);
+        border: 1px solid rgba(0, 194, 97, 0.6);
+    }
     .loss-tip-empty{
         width: 50px;
         height: 24px;
@@ -456,6 +463,8 @@ export default {
         border-radius: 4px;
         background: #F2F7FF;
         min-height: 153px;
+        flex-grow: 1;
+        min-width: 0;
         .price{
             text-align: left;
             font-size: 12px;
@@ -464,6 +473,9 @@ export default {
             letter-spacing: 0.08em;
             color: #1E2226;
             margin: 14px 0;
+            display: flex;
+            gap: 2px;
+            align-items: end;
             b{
                 font-size: 22px;
                 line-height: 20px;
@@ -486,5 +498,15 @@ export default {
             color: #00C261;
         }
     }
+    .top-left{
+        gap: 6px;
+        color:#006AFF;
+        font-size: 14px;
+        letter-spacing: 0.08em;
+        img{
+            width: 20px;
+            height: 20.78px;
+        }
+    }
 }
 </style>