refactor(dashboard/index.vue): 首页样式优化

src/assets/icons/svg/money.svg

-<svg t="1615364033349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25128" width="256" height="256"><path d="M128 832c0 23.04 17.92 43.52 43.52 43.52h43.52v-148.48H128v104.96zM128 532.48h84.48v148.48H128zM128 340.48h84.48v148.48H128zM128 192v107.52h84.48V148.48H171.52c-25.6 0-43.52 20.48-43.52 43.52zM852.48 148.48H256v724.48h596.48c23.04 0 43.52-17.92 43.52-43.52v-640c0-20.48-17.92-40.96-43.52-40.96z m-168.96 317.44h-107.52v84.48h84.48c12.8 0 20.48 10.24 20.48 20.48 0 12.8-10.24 20.48-20.48 20.48h-84.48v107.52c0 12.8-10.24 20.48-20.48 20.48-12.8 0-20.48-10.24-20.48-20.48v-107.52h-84.48c-12.8 0-20.48-10.24-20.48-20.48 0-12.8 10.24-20.48 20.48-20.48h84.48v-84.48h-107.52c-12.8 0-20.48-10.24-20.48-20.48 0-12.8 10.24-20.48 20.48-20.48h89.6l-71.68-69.12c-7.68-7.68-10.24-20.48 0-30.72 7.68-7.68 20.48-10.24 30.72 0l79.36 74.24 74.24-74.24c7.68-7.68 20.48-7.68 30.72 0 7.68 7.68 7.68 20.48 0 28.16L588.8 424.96h99.84c12.8 0 20.48 10.24 20.48 20.48-5.12 12.8-15.36 20.48-25.6 20.48z" p-id="25129"></path></svg>
+<svg t="1643429573667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26090" width="200" height="200"><path d="M74.540182 136.568399c-8.958022 12.029988-12.961196 32.145118-12.019755 60.363809l5.554506 166.206416c0.387833 11.507078 3.170203 19.606547 8.368598 24.313755 5.182023 4.690836 13.349029 8.088212 24.475438 10.177803 14.133905 2.088568 27.675316 9.940396 40.563858 23.533996 12.857842 13.57211 19.529799 32.400944 20.058848 56.443523 0.344854 15.679098-1.857301 28.998451-6.54916 39.97341-4.705162 10.974959-10.404977 19.86749-17.170055 26.662243-6.729262 6.791683-13.500479 11.756765-20.316721 14.880919-6.800893 3.143597-12.169157 4.707209-16.127306 4.707209-10.763135 2.088568-17.779945 6.014994-21.029966 11.761881-3.258207 5.760191-4.685719 14.367219-4.303003 25.876344l7.546883 225.771023c0.977257 29.274744 6.837732 49.137117 17.563004 59.58712 10.711969 10.447956 28.763091 15.151072 54.178947 14.120602 7.55507 0 21.457708 0.24764 41.73452 0.775666 20.262486 0.523933 40.776705 0.781806 61.517075 0.781806l43.878346 0L302.464241 118.543883 136.423601 118.543883C104.160803 118.543883 83.502297 124.558877 74.540182 136.568399L74.540182 136.568399zM74.540182 136.568399" p-id="26091"></path><path d="M928.657027 364.699166c10.394744-3.122107 18.056238-8.611122 22.969131-16.461927 4.91187-7.835456 7.255241-16.189727 7.068999-25.080212-0.212848-8.885368-2.994194-17.516956-8.378831-25.876344-5.382591-8.357342-12.665461-14.626115-21.825075-18.805298-12.246929-4.184299-20.819165-10.446933-25.727964-18.810415-4.881171-8.373715-6.687306-16.990976-5.372358-25.876344 1.343601-8.880251 4.966105-16.990976 10.902304-24.293289 5.942339-7.323802 13.644765-12.56313 23.068392-15.682167 9.449209-3.149736 16.405645-8.885368 20.841677-17.244756 4.439102-8.378831 6.563486-16.741289 6.335289-25.099654-0.23536-8.357342-2.564405-15.935947-7.013741-22.731724-4.453429-6.795776-10.833743-10.194176-19.156292-10.194176L353.833189 118.54286l0 783.962042 542.993898 0c8.001231 0 14.382569-3.397377 19.12457-10.1952 4.754281-6.795776 7.78429-14.373359 9.073656-22.730701 1.286296-8.363482 0.344854-17.001209-2.876514-25.876344-3.201925-8.868995-8.771781-15.413038-16.669658-19.596314-11.871375-6.26775-20.431332-14.115486-25.670659-23.51353-5.234211-9.41237-7.447623-18.825764-6.649444-28.223808 0.805342-9.407254 4.638647-18.298761 11.466146-26.65201 6.842849-8.363482 16.385179-14.124695 28.626991-17.243733 9.190313-3.148713 15.96767-8.632611 20.280906-16.46295 4.317329-7.856945 6.412037-16.737196 6.251378-26.668383-0.170892-9.91379-2.876514-19.327184-8.145517-28.218692-5.27105-8.880251-12.412704-15.428388-21.401426-19.596314-19.98517-10.453073-29.172413-24.557302-27.588335-42.334177 1.598404-17.765619 15.340383-32.91976 41.23617-45.462424 8.312316-4.179183 14.658861-10.464329 19.019169-18.831904 4.373611-8.358365 6.490831-17.244756 6.303566-26.650987-0.186242-9.399067-2.672876-18.279319-7.504928-26.646893-4.819772-8.373715-12.289907-14.643512-22.384823-18.816554-11.139711-4.184299-19.379373-10.980076-24.706705-20.380166-5.323239-9.406231-7.588839-18.826787-6.780427-28.239158 0.822738-9.398044 4.701069-18.532075 11.682064-27.417443C906.502447 373.85878 916.216693 367.844809 928.657027 364.699166L928.657027 364.699166zM695.755606 487.933885c5.727445 1.037632 11.192923 1.568728 16.405645 1.568728l53.106522 0c5.192256 0 9.620102 2.084475 13.261025 6.26775 3.647063 4.196579 5.468548 8.381901 5.468548 12.5662l0 37.605479c0 7.328919-5.198395 10.980076-15.604396 10.980076l-92.140537 0c-4.184299 0-8.089235 1.055029-11.720949 3.14462-3.650133 2.089591-5.471618 5.228071-5.471618 9.408277 0 4.183276 0.258896 8.610098 0.779759 13.32754 0.530073 4.708232 0.786922 8.623401 0.786922 11.750625 0 6.26775 5.193279 8.357342 15.620769 6.26775l90.564645 0c10.422374 0 15.623839 4.707209 15.623839 14.120602l0 34.497699c0 10.44284-7.286963 15.676028-21.856797 15.676028l-20.310581 0c-8.321526 0-16.913205 0.25378-25.761734 0.781806-8.845459 0.522909-16.933671 0.775666-24.221658 0.775666l-14.037714 0c-9.370415 0-14.068414 5.239328-14.068414 15.687284l0 62.712297c0 5.233188-4.157693 7.855922-12.490475 7.855922l-49.983391 0c-13.535271 0-20.295232-5.760191-20.295232-17.269315 0-4.185322 0.25992-13.049201 0.780783-26.641777 0.506537-13.59053 0.25992-23.004947-0.780783-28.217668 0-5.239328-0.527003-8.633634-1.560542-10.199293-1.055029-1.562589-4.175089-2.365884-9.371438-2.365884L474.766492 668.234297c-13.535271 0-20.305465-6.79066-20.305465-20.370956 0-3.139503-0.511653-7.065929-1.560542-11.750625-1.045819-4.703115-1.045819-9.662057 0-14.902408 1.047866-5.228071 2.615571-9.918907 4.680603-14.120602 2.094708-4.183276 6.246261-5.740748 12.499685-4.690836l104.648408 0c2.065032 0 3.120061-2.617617 3.120061-7.845689l0-29.786397c0-5.227048-6.247284-7.850805-18.749016-7.850805l-90.581018 0c-4.163833 0-7.809873-0.25378-10.933003-0.781806-3.125177-0.506537-4.685719-3.39226-4.685719-8.611122l0-18.825764c0-8.359388-0.5137-14.628162-1.547239-18.810415-2.085498-6.269797-0.529049-11.504008 4.669346-15.682167 5.213745-4.184299 11.973706-6.27082 20.305465-6.27082 8.321526 1.037632 17.442254 1.310855 27.326369 0.776689 9.898441-0.520863 17.444301-0.776689 22.653953-0.776689l18.732643 0c6.247284 0 8.341992-2.083451 6.247284-6.26775-2.068102-2.089591-8.321526-9.940396-18.727527-23.517623-10.413164-13.585413-21.341051-27.711132-32.812313-42.337247-13.535271-17.777899-29.143761-37.112246-46.854121-58.007135-7.287987-11.501962-5.721305-20.915355 4.690836-28.218692 5.206582-3.149736 10.679223-7.076162 16.404622-11.782348 5.721305-4.685719 12.223393-9.133008 19.511379-13.317307 10.422374-6.268774 20.305465-0.522909 29.683043 17.242709 3.124154 4.184299 9.106402 11.761881 17.972327 22.73684 8.843412 10.975982 17.941628 22.726607 27.313066 35.289738 9.377578 12.536524 18.2302 23.76731 26.547633 33.706683 8.336876 9.924024 13.027711 15.935947 14.058181 18.033725 2.089591 4.176113 5.994528 6.791683 11.718903 7.827269 5.725398 1.055029 9.631358-0.523933 11.715833-4.708232 1.033539-2.083451 5.450129-8.612145 13.270235-19.587104 7.81192-10.974959 16.395412-23.257703 25.77299-36.851303 9.353019-13.57211 18.21792-26.387997 26.538423-38.417985 8.322549-12.009522 13.537318-19.587104 15.626909-22.731724 5.203512-7.302313 9.624195-12.009522 13.265118-14.099113 3.651157-2.093684 9.647731-1.587148 17.96414 1.567705 5.212722 2.084475 10.939143 5.229095 17.186428 9.407254 6.247284 4.184299 10.413164 7.303336 12.479219 9.392928 11.462053 11.501962 14.592346 21.443381 9.372461 29.801746-2.068102 3.130294-7.80885 10.975982-17.180288 23.511483-9.358135 12.542664-19.515473 25.88146-30.448476 39.986713-10.939143 14.119579-20.823258 27.436886-29.6636 39.980573-8.852622 12.551874-13.812587 19.86135-14.849196 21.948895C688.722422 483.756749 690.029184 486.906485 695.755606 487.933885L695.755606 487.933885zM695.755606 487.933885" p-id="26092"></path></svg>
\ No newline at end of file

src/views/dashboard/components/Chart/PieChart.vue

@@ -70,7 +70,7 @@ function initChart() {
       {
         name: 'Nightingale Chart',
         type: 'pie',
-        radius: [50, 150],
+        radius: [50, 130],
         center: ['50%', '50%'],
         roseType: 'area',
         itemStyle: {

src/views/dashboard/components/Chart/RadarChart.vue

@@ -70,7 +70,7 @@ function initChart() {
     },
     radar: {
       // shape: 'circle',
-      radius: '70%',
+      radius: '60%',
       indicator: [
         { name: '家用电器', max: 6500 },
         { name: '服装箱包', max: 16000 },

src/views/dashboard/index.vue

@@ -4,10 +4,10 @@
 
     <!-- 数据 -->
     <el-row :gutter="40" class="card-panel-col">
-      <el-col :xs="12" :span="12" :lg="6">
+      <el-col :xs="24" :lg="6" class="card-panel-col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper" style="margin-top: -10px">
-            <el-image style="width:180px; height: 100px"
+            <el-image style="width:240px; height: 100px"
                       src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"/>
           </div>
           <div class="card-panel-description">
@@ -22,7 +22,7 @@
         </div>
       </el-col>
 
-      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
+      <el-col :xs="24"  :lg="6" class="card-panel-col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-people">
             <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
@@ -36,7 +36,7 @@
         </div>
       </el-col>
 
-      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
+      <el-col :xs="24"  :lg="6" class="card-panel-col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-money">
             <svg-icon icon-class="money" class-name="card-panel-icon"/>
@@ -49,7 +49,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
+      <el-col :xs="24"  :lg="6" class="card-panel-col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-shopping">
             <svg-icon icon-class="shopping" class-name="card-panel-icon"/>
@@ -68,12 +68,12 @@
     <el-row :gutter="40">
 
       <!-- 项目介绍 -->
-      <el-col :md="12" :lg="12">
+      <el-col :md="12" :lg="12" class="card-panel-col">
         <Project/>
       </el-col>
 
       <!-- 团队介绍 -->
-      <el-col :md="12" :lg="12">
+      <el-col :md="12" :lg="12" class="card-panel-col">
         <Team/>
       </el-col>
     </el-row>
@@ -81,17 +81,17 @@
 
     <!-- Echarts 图表 -->
     <el-row :gutter="40" style="margin-top: 20px">
-      <el-col :sm="24" :lg="8">
+      <el-col :sm="24" :lg="8" class="card-panel-col">
         <BarChart id="barChart" height="400px" width="100%" class="chart-container"/>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8">
+      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
         <PieChart id="pieChart" height="400px" width="100%" class="chart-container"/>
         <!--订单漏斗图-->
         <!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8">
+      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
         <RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/>
       </el-col>
     </el-row>
@@ -235,8 +235,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
       color: #f4516c;
 
       .svg-icon {
-        width: 3.2em !important;
-        height: 3.2em !important;
+        width: 3em !important;
+        height: 3em !important;
       }
     }
 
@@ -251,7 +251,7 @@ const nickname = computed(() => useUserStoreHook().nickname);
 
     .card-panel-icon-wrapper {
       float: left;
-      margin: 14px 0 0 14px;
+      margin: 14px 0 0 6px;
       padding: 16px;
       transition: all 0.38s ease-out;
       border-radius: 6px;