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

src/assets/icons/svg/money.svg

@@ -1 +1 @@
-<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-18Line truncated

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;
+        width: 3em !important;
-        height: 3.2em !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;