首页数据导出Excel

jsowell-ui/package.json

@@ -57,7 +57,8 @@
     "vue-qr": "^4.0.9",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

jsowell-ui/src/views/homeIndex/echarts.js

@@ -1,35 +1,70 @@
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
+
 export function barDataView(titleName, fileName) {
   var dataView = {
     show: true,
     readOnly: false,
-    lang: ['数据视图', '关闭', '刷新'],
+    lang: ['数据视图', '关闭', '导出Excel'],
-    optionToContent: function(opt) {
+    optionToContent: function (opt) {
-      var axisData = opt.xAxis[0].data // 坐标数据
+      var axisData = opt.xAxis[0].data; // 坐标数据
-      var series = opt.series // 折线图数据
+      var series = opt.series; // 折线图数据
-      var tdHeads = ''
+      var tdHeads = '';
       for (let index = 0; index < titleName.length; index++) {
-        // 样式
+        tdHeads += '<td style="height:30px;text-align: center;">' + titleName[index] + '</td>';
-        tdHeads += '<td  style="height:30px;text-align: center;">' + titleName[index] + '</td>'
       }
-      var tdBodys = '' // 表数据
+      var tdBodys = ''; // 表数据
-      var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
+      var tableId = 'tableExcel_' + new Date().getTime(); // 动态表格ID
-      // 组装表数据
+      var table = `<table id="${tableId}" border="1" class="table-bordered table-striped" style="width:100%;text-align:center;border:1px solid #ccc;border-collapse:collapse;"><tbody><tr>${tdHeads}</tr>`;
+
       for (var i = 0, l = axisData.length; i < l; i++) {
+        tdBodys = '<td style="height:30px;text-align: center;">' + axisData[i] + '</td>'; // 添加坐标轴数据
         for (var j = 0; j < series.length; j++) {
-          var temp = series[j].data[i]
+          var temp = series[j].data[i];
           if (temp != null && temp !== undefined) {
-            tdBodys += '<td>' + temp + '</td>'
+            tdBodys += '<td>' + temp + '</td>';
           } else {
-            tdBodys += '<td></td>'
+            tdBodys += '<td></td>';
           }
         }
-        // 样式
+        table += '<tr>' + tdBodys + '</tr>';
-        table += '<tr style="height:30px;text-align: center;"><td >' + axisData[i] + '</td>' + tdBodys + '</tr>'
-        tdBodys = ''
       }
-      table += '</tbody></table>'
+      table += '</tbody></table>';
-      return table
+      return table;
-    }
+    },
-  }
+    contentToOption: function (html, opt) {
-  return dataView
+      console.log('HTMLDomElement:', html); // 调试信息
+      if (!html || !html.tagName) {
+        console.error('Invalid HTML element passed to contentToOption');
+        return opt;
+      }
+
+      // 获取表格元素
+      let tableElement = html.querySelector('table');
+
+      if (!tableElement) {
+        console.error('Table element not found within the provided HTML element');
+        return opt;
+      }
+
+      let et = XLSX.utils.table_to_book(tableElement);
+      let etout = XLSX.write(et, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+
+      try {
+        saveAs(
+          new Blob([etout], { type: "application/octet-stream" }),
+          `${fileName}-${new Date().toLocaleString().replace(/[:\/]/g, '-')}.xlsx`
+        );
+      } catch (e) {
+        console.error("Export failed:", e);
+      }
+
+      return opt; // 返回原始选项，因为这里没有修改图表的配置
+    },
+  };
+  return dataView;
 }

jsowell-ui/src/views/homeIndex/homeIndex.vue

@@ -1,61 +1,65 @@
 <template>
-    <div class="app-container">
+  <div class="app-container">
-        <h1>概况 (自2023-01-01起)</h1>
+    <h1>概况 (自2023-01-01起)</h1>
-        <hr />
+    <hr />
-        <div style="display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: wrap;">
+    <div
-            <div class="box" style="background-color: #ffba00;">
+      style="
-                <el-image class="box-image" :src="require('@/assets/images/lightning.png')" />
+        display: flex;
-                <div class="flex1">
+        justify-content: space-between;
-                    <div class="box-h1">{{ generalSituation.totalChargingDegree }}</div>
+        margin-top: 10px;
-                    <div>总充电电量(度)</div>
+        flex-wrap: wrap;
-                </div>
+      "
-
+    >
-            </div>
+      <div class="box" style="background-color: #ffba00">
-            <div class="box" style="background-color: #c74542;">
+        <el-image class="box-image" :src="require('@/assets/images/lightning.png')" />
-                <el-image class="box-image" :src="require('@/assets/images/zongfeiyong.png')" />
+        <div class="flex1">
-                <div class="flex1">
+          <div class="box-h1">{{ generalSituation.totalChargingDegree }}</div>
-                    <div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
+          <div>总充电电量(度)</div>
-                    <div>总充电费用(元)</div>
-                </div>
-            </div>
-            <div class="box" style="background-color: #12ce65;">
-                <el-image class="box-image" :src="require('@/assets/images/dingdan.png')" />
-                <div class="flex1">
-                    <div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
-                    <div>总充电订单数(笔)</div>
-                </div>
-            </div>
-            <div class="box" style="background-color: #909399;">
-                <el-image class="box-image" :src="require('@/assets/images/shebei.png')" />
-                <div class="flex1">
-                    <div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
-                    <div>总充电设备数量(座)</div>
-                </div>
-            </div>
-            <!--                      <div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">-->
-            <!--                        <el-image-->
-            <!--                            class="box-image"-->
-            <!--                            :src="require('@/assets/images/yue.png')"-->
-            <!--                        ></el-image>-->
-            <!--                        <div class="flex1">-->
-            <!--                            <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
-            <!--                            <div>总客户余额(元)</div>-->
-            <!--                        </div>-->
-            <!--                    </div>-->
-
         </div>
-        <h1>订单</h1>
+      </div>
-        <hr />
+      <div class="box" style="background-color: #c74542">
-        <el-button style="background-color: #1ab394; color: #ffffff">最近30天
+        <el-image class="box-image" :src="require('@/assets/images/zongfeiyong.png')" />
-        </el-button>
+        <div class="flex1">
-        <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
+          <div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
-        <hr />
+          <div>总充电费用(元)</div>
-        <!-- <h1>启动充电渠道</h1> -->
+        </div>
-        <!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
+      </div>
-        <!-- <hr /> -->
+      <div class="box" style="background-color: #12ce65">
-        <!-- <hr /> -->
+        <el-image class="box-image" :src="require('@/assets/images/dingdan.png')" />
-        <!-- <h1>设备</h1> -->
+        <div class="flex1">
+          <div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
+          <div>总充电订单数(笔)</div>
+        </div>
+      </div>
+      <div class="box" style="background-color: #909399">
+        <el-image class="box-image" :src="require('@/assets/images/shebei.png')" />
+        <div class="flex1">
+          <div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
+          <div>总充电设备数量(座)</div>
+        </div>
+      </div>
+      <!--                      <div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">-->
+      <!--                        <el-image-->
+      <!--                            class="box-image"-->
+      <!--                            :src="require('@/assets/images/yue.png')"-->
+      <!--                        ></el-image>-->
+      <!--                        <div class="flex1">-->
+      <!--                            <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
+      <!--                            <div>总客户余额(元)</div>-->
+      <!--                        </div>-->
+      <!--                    </div>-->
     </div>
+    <h1>订单</h1>
+    <hr />
+    <el-button style="background-color: #1ab394; color: #ffffff">最近30天 </el-button>
+    <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
+    <hr />
+    <!-- <h1>启动充电渠道</h1> -->
+    <!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
+    <!-- <hr /> -->
+    <!-- <hr /> -->
+    <!-- <h1>设备</h1> -->
+  </div>
 </template>
 <script>
 import Echarts from "echarts";
@@ -63,275 +67,287 @@ import { barDataView } from "./echarts";
 import { getGeneralSituation, getOrderInfo } from "@/api/index";
 
 export default {
-    data() {
+  data() {
-        return {
+    return {
-            chart: null,
+      chart: null,
-            generalSituation: {},
+      generalSituation: {},
-            orderInfo: [],
+      orderInfo: [],
-            tableData: [{
+      tableData: [
-                pileSn: '9527',
+        {
-                stationName: '万车充充电桩',
+          pileSn: "9527",
-                stationAddress: '昆山市黄埔江南路',
+          stationName: "万车充充电桩",
-                type: '直流',
+          stationAddress: "昆山市黄埔江南路",
-                power: '2131',
+          type: "直流",
-                degree: '215',
+          power: "2131",
-                electricityPrice: '565',
+          degree: "215",
-                servicePrice: '9274',
+          electricityPrice: "565",
-                chargingNumber: '624',
+          servicePrice: "9274",
-
+          chargingNumber: "624",
-            }]
+        },
+      ],
+    };
+  }, //图表实例
+  created() {
+    this.getGeneral();
+  },
+  mounted() {
+    this.init();
+    // this.rose();
+  },
+  methods: {
+    async getGeneral() {
+      const { obj } = await getGeneralSituation({});
+      console.log("首页信息", obj);
+      this.generalSituation = obj;
+    },
+    async getOrder() {
+      const { obj, resCode } = await getOrderInfo({});
+      console.log("订单信息", obj, resCode);
+      if (resCode === "00100000") {
+        this.orderInfo = obj;
+      }
+    },
+    async init() {
+      await this.getOrder();
+      this.$nextTick(() => {
+        this.chart = Echarts.init(this.$refs.chart);
+        console.log("柱状图", this.orderInfo);
+        let str = this.orderInfo.map((item) => {
+          return item.date;
+        });
+        console.log(str);
+        let option = {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+          toolbox: {
+            feature: {
+              dataView: { show: true, readOnly: false },
+              magicType: { show: true, type: ["line", "bar"] },
+              restore: { show: true },
+              saveAsImage: { show: true },
+            },
+          },
+          legend: {
+            data: [
+              "总订单金额",
+              "尖时段总用电量",
+              "峰时段总用电量",
+              "平时段总用电量",
+              "谷时段总用电量",
+            ],
+          },
+          dataZoom: {
+            show: false,
+            start: 0,
+            end: 100,
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: "category",
+              boundaryGap: true,
+              data: str,
+              axisLine: { onZero: false },
+            },
+          ],
+          animation: true,
+          animationDuration: 2000,
+          yAxis: [
+            {
+              type: "value",
+              name: "电费",
+              position: "left",
+              alignTicks: true,
+              axisLabel: {
+                formatter: "{value} ￥",
+              },
+            },
+            {
+              type: "value",
+              name: "电量",
+              position: "right",
+              alignTicks: true,
+              axisLabel: {
+                formatter: "{value} kwh",
+              },
+            },
+          ],
+          series: [
+            {
+              name: "总用电量",
+              type: "line",
+              data: this.orderInfo.map((item) => {
+                return item.totalElectricity;
+              }),
+              symbolSize: 1,
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  color: "rgba(252,120,48,0)",
+                  barBorderRadius: 0,
+                },
+              },
+            },
+            {
+              name: "总订单金额",
+              type: "line",
+              yAxisIndex: 0,
+              data: this.orderInfo.map((item) => {
+                return item.totalOrderAmount;
+              }),
+            },
+            {
+              name: "尖时段总用电量",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              data: this.orderInfo.map((item) => {
+                return item.totalSharpUsedElectricity;
+              }),
+              barWidth: "35%", //柱子宽度
+              // barGap: 1, //柱子之间间距
+              itemStyle: {
+                normal: {
+                  color: "#ff4949",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+            {
+              name: "峰时段总用电量",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              data: this.orderInfo.map((item) => {
+                return item.totalPeakUsedElectricity;
+              }),
+              barWidth: "35%",
+              itemStyle: {
+                normal: {
+                  color: "#ffba00",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+            {
+              name: "平时段总用电量",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              data: this.orderInfo.map((item) => {
+                return item.totalFlatUsedElectricity;
+              }),
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              itemStyle: {
+                normal: {
+                  color: "#12ce65",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+            {
+              name: "谷时段总用电量",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              data: this.orderInfo.map((item) => {
+                return item.totalValleyUsedElectricity;
+              }),
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              itemStyle: {
+                normal: {
+                  color: "#909399",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+          ],
         };
-    }, //图表实例
+        option.toolbox.feature.dataView = barDataView(
-    created() {
+          [
-        this.getGeneral();
+            "时间/日期",
+            "总用电量",
+            "总订单金额",
+            "尖时段总用电量",
+            "峰时段总用电量",
+            "平时段总用电量",
+            "谷时段总用电量",
+          ],
+          "电量电费"
+        );
+        this.chart.setOption(option);
+      });
     },
-    mounted() {
+    rose() {
-        this.init();
+      this.$nextTick(() => {
-        // this.rose();
+        this.chartDom = Echarts.init(this.$refs.chartDom);
-    },
+        let option = {
-    methods: {
+          legend: {
-        async getGeneral() {
+            top: "bottom",
-            const { obj } = await getGeneralSituation({});
+          },
-            console.log("首页信息", obj);
+          toolbox: {
-            this.generalSituation = obj;
+            show: true,
-        },
+            feature: {
-        async getOrder() {
+              mark: { show: true },
-            const { obj, resCode } = await getOrderInfo({});
+              dataView: { show: true, readOnly: false },
-            console.log("订单信息", obj, resCode);
+              restore: { show: true },
-            if (resCode === '00100000') {
+              saveAsImage: { show: true },
-                this.orderInfo = obj;
+            },
-            } 
+          },
-        },
+          series: [
-        async init() {
+            {
-            await this.getOrder();
+              name: "Nightingale Chart",
-            this.$nextTick(() => {
+              type: "pie",
-                this.chart = Echarts.init(this.$refs.chart);
+              radius: [50, 250],
-                console.log("柱状图", this.orderInfo);
+              center: ["50%", "50%"],
-                let str = this.orderInfo.map((item) => {
+              roseType: "area",
-                    return item.date;
+              itemStyle: {
-                });
+                borderRadius: 8,
-                console.log(str);
+              },
-                let option = {
+              data: [
-                    tooltip: {
+                { value: 40, name: "rose 1" },
-                        trigger: "axis",
+                { value: 38, name: "rose 2" },
-                        axisPointer: {
+                { value: 32, name: "rose 3" },
-                            type: "shadow",
+                { value: 30, name: "rose 4" },
-                        },
+                { value: 28, name: "rose 5" },
-                    },
+                { value: 26, name: "rose 6" },
-                    toolbox: {
+                { value: 22, name: "rose 7" },
-                        feature: {
+                { value: 18, name: "rose 8" },
-                            dataView: { show: true, readOnly: false },
+              ],
-                            magicType: { show: true, type: ["line", "bar"] },
+            },
-                            restore: { show: true },
+          ],
-                            saveAsImage: { show: true },
+        };
-                        },
+        this.chartDom.setOption(option);
-                    },
+      });
-                    legend: {
-                        data: [
-                            "总订单金额",
-                            "尖时段总用电量",
-                            "峰时段总用电量",
-                            "平时段总用电量",
-                            "谷时段总用电量",
-                        ],
-                    },
-                    dataZoom: {
-                        show: false,
-                        start: 0,
-                        end: 100,
-                    },
-                    grid: {
-                        left: "3%",
-                        right: "4%",
-                        bottom: "3%",
-                        containLabel: true,
-                    },
-                    xAxis: [
-                        {
-                            type: "category",
-                            boundaryGap: true,
-                            data: str,
-                            axisLine: { onZero: false },
-                        },
-                    ],
-                    animation: true,
-                    animationDuration: 2000,
-                    yAxis: [
-                        {
-                            type: "value",
-                            name: "电费",
-                            position: "left",
-                            alignTicks: true,
-                            axisLabel: {
-                                formatter: "{value} ￥",
-                            },
-                        },
-                        {
-                            type: "value",
-                            name: "电量",
-                            position: "right",
-                            alignTicks: true,
-                            axisLabel: {
-                                formatter: "{value} kwh",
-                            },
-                        },
-                    ],
-                    series: [
-                        {
-                            name: "总用电量",
-                            type: "line",
-                            data: this.orderInfo.map((item) => {
-                                return item.totalElectricity;
-                            }),
-                            symbolSize: 1,
-                            symbol: "circle",
-                            itemStyle: {
-                                normal: {
-                                    color: "rgba(252,120,48,0)",
-                                    barBorderRadius: 0,
-                                },
-                            },
-                        },
-                        {
-                            name: "总订单金额",
-                            type: "line",
-                            yAxisIndex: 0,
-                            data: this.orderInfo.map((item) => {
-                                return item.totalOrderAmount;
-                            }),
-                        },
-                        {
-                            name: "尖时段总用电量",
-                            type: "bar",
-                            yAxisIndex: 1,
-                            stack: "one",
-                            emphasis: {
-                                focus: "series",
-                                blurScope: "coordinateSystem",
-                            },
-                            data: this.orderInfo.map((item) => {
-                                return item.totalSharpUsedElectricity;
-                            }),
-                            barWidth: "35%", //柱子宽度
-                            // barGap: 1, //柱子之间间距
-                            itemStyle: {
-                                normal: {
-                                    color: "#ff4949",
-                                    opacity: 1,
-                                    barBorderRadius: 1, //柱子菱角
-                                },
-                            },
-                        },
-                        {
-                            name: "峰时段总用电量",
-                            type: "bar",
-                            yAxisIndex: 1,
-                            stack: "one",
-                            emphasis: {
-                                focus: "series",
-                                blurScope: "coordinateSystem",
-                            },
-                            data: this.orderInfo.map((item) => {
-                                return item.totalPeakUsedElectricity;
-                            }),
-                            barWidth: "35%",
-                            itemStyle: {
-                                normal: {
-                                    color: "#ffba00",
-                                    opacity: 1,
-                                    barBorderRadius: 1, //柱子菱角
-                                },
-                            },
-                        },
-                        {
-                            name: "平时段总用电量",
-                            type: "bar",
-                            yAxisIndex: 1,
-                            stack: "one",
-                            data: this.orderInfo.map((item) => {
-                                return item.totalFlatUsedElectricity;
-                            }),
-                            emphasis: {
-                                focus: "series",
-                                blurScope: "coordinateSystem",
-                            },
-                            itemStyle: {
-                                normal: {
-                                    color: "#12ce65",
-                                    opacity: 1,
-                                    barBorderRadius: 1, //柱子菱角
-                                },
-                            },
-                        },
-                        {
-                            name: "谷时段总用电量",
-                            type: "bar",
-                            yAxisIndex: 1,
-                            stack: "one",
-                            data: this.orderInfo.map((item) => {
-                                return item.totalValleyUsedElectricity;
-                            }),
-                            emphasis: {
-                                focus: "series",
-                                blurScope: "coordinateSystem",
-                            },
-                            itemStyle: {
-                                normal: {
-                                    color: "#909399",
-                                    opacity: 1,
-                                    barBorderRadius: 1, //柱子菱角
-                                },
-                            },
-                        },
-                    ],
-                };
-                option.toolbox.feature.dataView = barDataView(['时间/日期', '总用电量', '总订单金额', '尖时段总用电量', '峰时段总用电量', '平时段总用电量', '谷时段总用电量'], '电量电费')
-                this.chart.setOption(option);
-            });
-        },
-        rose() {
-            this.$nextTick(() => {
-                this.chartDom = Echarts.init(this.$refs.chartDom);
-                let option = {
-                    legend: {
-                        top: "bottom",
-                    },
-                    toolbox: {
-                        show: true,
-                        feature: {
-                            mark: { show: true },
-                            dataView: { show: true, readOnly: false },
-                            restore: { show: true },
-                            saveAsImage: { show: true },
-                        },
-                    },
-                    series: [
-                        {
-                            name: "Nightingale Chart",
-                            type: "pie",
-                            radius: [50, 250],
-                            center: ["50%", "50%"],
-                            roseType: "area",
-                            itemStyle: {
-                                borderRadius: 8,
-                            },
-                            data: [
-                                { value: 40, name: "rose 1" },
-                                { value: 38, name: "rose 2" },
-                                { value: 32, name: "rose 3" },
-                                { value: 30, name: "rose 4" },
-                                { value: 28, name: "rose 5" },
-                                { value: 26, name: "rose 6" },
-                                { value: 22, name: "rose 7" },
-                                { value: 18, name: "rose 8" },
-                            ],
-                        },
-                    ],
-                };
-                this.chartDom.setOption(option);
-            });
-        },
     },
+  },
 };
 </script>
 
@@ -340,43 +356,43 @@ export default {
 //     overflow: scroll;
 // }
 .box {
-    position: relative;
+  position: relative;
-    width: 15rem;
+  width: 15rem;
-    display: flex;
+  display: flex;
-    height: 6.25rem;
+  height: 6.25rem;
-    padding: 0.8rem;
+  padding: 0.8rem;
-    /* font-size: 18px; */
+  /* font-size: 18px; */
-    color: #ffffff;
+  color: #ffffff;
-    border-radius: 8px;
+  border-radius: 8px;
-    box-shadow: 0 15px 0.8rem -11px black;
+  box-shadow: 0 15px 0.8rem -11px black;
-    margin-right: 24px;
+  margin-right: 24px;
-    margin-bottom: 20px;
+  margin-bottom: 20px;
-    position: relative;
+  position: relative;
 
-    .box-image {
+  .box-image {
-        position: absolute;
+    position: absolute;
-        left: 0;
+    left: 0;
-        width: 3.75rem;
+    width: 3.75rem;
-        height: 3.75rem;
+    height: 3.75rem;
-        // background-size: 100% 100%;
+    // background-size: 100% 100%;
-        // position: absolute;
+    // position: absolute;
-        // right: 0;
+    // right: 0;
-        // bottom: 0;
+    // bottom: 0;
-        // filter: drop-shadow(40px 0px gray);
+    // filter: drop-shadow(40px 0px gray);
-    }
+  }
 
-    .flex1 {
+  .flex1 {
-        flex: 1;
+    flex: 1;
-        margin-left: 48px;
+    margin-left: 48px;
-    }
+  }
 }
 
 .box-h1 {
-    /* margin-top: -14px; */
+  /* margin-top: -14px; */
-    font-size: 2rem;
+  font-size: 2rem;
 }
 
 .box-text {
-    margin-top: 0px;
+  margin-top: 0px;
 }
 </style>