工作台样式

src/views/workspace/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="top">
-    <el-card style="width:20%" class="center-card">数据总览</el-card>
+    <el-card style="width:10vw" class="center-card">数据总览</el-card>
     <span class="text">
       最后更新时间：{{
         workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
@@ -115,7 +115,7 @@
   </div>
 
   <div class="graph">
-    <el-card style="width:100%;">
+    <el-card style="width:84vw;">
       <div>
         <el-tabs v-model="activeTab" @tab-change="handleTabChange">
           <el-tab-pane label="金币充值" name="recharge"></el-tab-pane>
@@ -123,29 +123,29 @@
         </el-tabs>
       </div>
       <div class="condition">
-        <div style="display:flex;">合计&nbsp;&nbsp;
-          <span>永久金币：</span> {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
-          <span>免费金币：</span> {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
-          <span>任务金币：</span> {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
+        <div class="stats">合计&nbsp;&nbsp;
+          <span>永久金币:</span> {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
+          <span>免费金币:</span> {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
+          <span>任务金币:</span> {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
           <div v-if="activeTab === 'consume'">合计 {{ sumConsume / 100 }}</div>
         </div>
-        <div  style="margin-left:auto;margin-right: 0.5%;">
-          <el-button @click="getYes()" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
+        <div>
+          <el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
           </el-button>
-          <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
+          <el-button @click="getToday()" size="small" :type="activeTimeRange === 'today' ? 'primary' : ''">今天
           </el-button>
-          <el-button @click="getWeek()" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
+          <el-button @click="getWeek()" size="small" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
           </el-button>
-          <el-button @click="getMonth()" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
+          <el-button @click="getMonth()" size="small" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
           </el-button>
-          <el-button @click="getYear()" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
+          <el-button @click="getYear()" size="small" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
           </el-button>
         </div>
         <div>
-          <el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
-            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" style="width:20vw" value-format="YYYY-MM-DD HH:mm:ss"
+          <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
+            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss"
             :default-time="defaultTime" :disabled-date="disabledDate" @change="handleDatePickerChange"/>
-          <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
+          <el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">查询</el-button>
         </div>
       </div>
 
@@ -807,13 +807,13 @@ onUnmounted(() => {
 
 <style scoped>
 .top {
-  height: 5.5%;
-  width:100%;
+  height: 5.5vh;
+  width:80vw;
   display: flex;
-  margin-bottom: 0.2%;
+  margin-bottom: 0.5vh;
   .text{
-    margin-left:0.2%;
-    width:50%;
+    margin-left:2vw;
+    width:20vw;
     display: flex; 
     align-items: center; 
     font-size: 18px;
@@ -821,7 +821,8 @@ onUnmounted(() => {
 }
 
 .card {
-  height: 28%;
+  height: 28vh;
+  margin-bottom: 0.5vh;
   display: flex;
   justify-content: center;
 }
@@ -836,21 +837,29 @@ onUnmounted(() => {
     height: 1%;
     display: flex;
     align-items: center;
+    .stats{
+      display:flex;
+      align-items:center;
+      width:35vw;
+      font-size: 15px;
+    }
   }
 
   .graph-content {
     flex: 1;
     height: auto;
     display: flex;
+    background-color: antiquewhite;
 
     .left {
       width: 70%;
       height: auto;
+      background-color: aquamarine;
     }
 
     .right {
       flex: 1;
-      padding: 0.5% 2%;
+      padding: 0.5vw 2vh;
     }
   }
 }
@@ -862,21 +871,21 @@ onUnmounted(() => {
 }
 
 .margin-bottom {
-  margin-bottom: 0.5%;
+  margin-bottom: 0.5vh;
 }
 
 .card-item {
   width: 25%;
-  height: 98%;
+  height: 28vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 0.25%;
+  margin-right: 0.25vw;
 }
 
 .card-title {
   font-weight: bold;
-  margin-bottom: 10px;
+  margin-bottom: 1vh;
   display: flex;
   justify-content: center;
   align-items: center;