From 619d21f3f16363fa6aa41394463ae5a50278ccb3 Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Tue, 7 Feb 2023 10:13:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=89=A9=E8=81=94=E5=8D=A1=E5=BC=95?=
 =?UTF-8?q?=E5=AF=BC=E9=A1=B5=E8=8F=9C=E5=8D=95=E3=80=81=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot-card/Dashboard/index.vue |   2 +
 src/views/iot-card/Home/index.vue      | 856 +++++++++++++------------
 2 files changed, 445 insertions(+), 413 deletions(-)

diff --git a/src/views/iot-card/Dashboard/index.vue b/src/views/iot-card/Dashboard/index.vue
index 53516ce1..4bc42f09 100644
--- a/src/views/iot-card/Dashboard/index.vue
+++ b/src/views/iot-card/Dashboard/index.vue
@@ -70,6 +70,7 @@
                         <Guide title="流量统计">
                             <template #extra>
                                 <TimeSelect
+                                    key="flow-static"
                                     :type="'week'"
                                     :quickBtnList="quickBtnList"
                                     @change="getEcharts"
@@ -93,6 +94,7 @@
                         <Guide title="流量使用TOP10">
                             <template #extra>
                                 <TimeSelect
+                                    key="flow-top10"
                                     :quickBtn="false"
                                     :type="'week'"
                                     @change="getTopRang"
diff --git a/src/views/iot-card/Home/index.vue b/src/views/iot-card/Home/index.vue
index ee739310..d95e98d3 100644
--- a/src/views/iot-card/Home/index.vue
+++ b/src/views/iot-card/Home/index.vue
@@ -1,85 +1,90 @@
 <!-- 物联卡-首页 -->
 <template>
-  <page-container>
-    <a-row :gutter="24">
-      <a-col :span="14">
-        <div class="home-guide">
-          <Guide title="物联卡引导"></Guide>
-          <div
-            class="home-guide-items"
-            :style="`grid-template-columns: repeat(${
-              guideList ? guideList.length : 1
-            }, 1fr);`"
-          >
-            <div
-              v-for="(item, index) in guideList"
-              :key="index"
-              class="home-guide-item step-bar arrow-2 pointer"
-              @click="jumpPage(item)"
-            >
-              <div class="item-english">{{ item.english }}</div>
-              <div class="item-title">{{ item.name }}</div>
-              <div class="item-index">
-                <img :src="Image[index + 1]" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </a-col>
-      <a-col :span="10">
-        <div class="home-statistics">
-          <Guide title="基础统计">
-            <template #extra>
-              <span class="extra-text">详情</span>
-            </template>
-          </Guide>
-          <div class="home-statistics-body">
-            <div class="home-guide-item">
-              <div class="item-english">昨日流量统计</div>
-              <div class="item-title">{{ currentSource }} M</div>
-              <div
-                class="item-index-echarts"
-                style="height: 75px; width: 110px"
-              >
-                <div class="chart" ref="todayFlowChart"></div>
-              </div>
-            </div>
-            <div class="home-guide-item">
-              <div class="item-english">物联卡</div>
-              <div class="item-content">
-                <div
-                  v-for="iten in pieChartData"
-                  :key="iten.key"
-                  class="item-node"
-                >
-                  <div class="item-node-text">
-                    {{ iten.value }}
-                  </div>
-                  <div :class="`state ${iten.className}`">
-                    {{ iten.name }}
-                  </div>
+    <page-container>
+        <a-row :gutter="24">
+            <a-col :span="14">
+                <div class="home-guide">
+                    <Guide title="物联卡引导"></Guide>
+                    <div
+                        class="home-guide-items"
+                        :style="`grid-template-columns: repeat(${
+                            guideList ? guideList.length : 1
+                        }, 1fr);`"
+                    >
+                        <div
+                            v-for="(item, index) in guideList"
+                            :key="index"
+                            class="home-guide-item step-bar arrow-2 pointer"
+                            @click="jumpPage(item)"
+                        >
+                            <div class="item-english">{{ item.english }}</div>
+                            <div class="item-title">{{ item.name }}</div>
+                            <div class="item-index">
+                                <img :src="Image[index + 1]" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <div
-                class="item-index-echarts"
-                style="height: 75px; width: 110px"
-              >
-                <div class="chart" ref="iotCardChart"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </a-col>
-      <a-col :span="24" style="min-height: 580px">
-        <div class="home-body">
-          <Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
-          <div class="home-body-img">
-            <img :src="getImage('/iot-card/iotcard-home.png')" />
-          </div>
-        </div>
-      </a-col>
-    </a-row>
-  </page-container>
+            </a-col>
+            <a-col :span="10">
+                <div class="home-statistics">
+                    <Guide title="基础统计">
+                        <template #extra>
+                            <span class="extra-text" @click="jumpDashboard"
+                                >详情</span
+                            >
+                        </template>
+                    </Guide>
+                    <div class="home-statistics-body">
+                        <div class="home-guide-item">
+                            <div class="item-english">昨日流量统计</div>
+                            <div class="item-title">{{ currentSource }} M</div>
+                            <div
+                                class="item-index-echarts"
+                                style="height: 75px; width: 110px"
+                            >
+                                <div class="chart" ref="todayFlowChart"></div>
+                            </div>
+                        </div>
+                        <div class="home-guide-item">
+                            <div class="item-english">物联卡</div>
+                            <div class="item-content">
+                                <div
+                                    v-for="iten in pieChartData"
+                                    :key="iten.key"
+                                    class="item-node"
+                                >
+                                    <div class="item-node-text">
+                                        {{ iten.value }}
+                                    </div>
+                                    <div :class="`state ${iten.className}`">
+                                        {{ iten.name }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                class="item-index-echarts"
+                                style="height: 75px; width: 110px"
+                            >
+                                <div class="chart" ref="iotCardChart"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a-col>
+            <a-col :span="24" style="min-height: 580px">
+                <div class="home-body">
+                    <Guide
+                        title="平台架构图"
+                        english="PLATFORM ARCHITECTURE DIAGRAM"
+                    />
+                    <div class="home-body-img">
+                        <img :src="getImage('/iot-card/iotcard-home.png')" />
+                    </div>
+                </div>
+            </a-col>
+        </a-row>
+    </page-container>
 </template>
 
 <script setup lang="ts">
@@ -89,220 +94,245 @@ import { message } from 'ant-design-vue';
 import moment from 'moment';
 import { queryFlow, list } from '@/api/iot-card/home';
 import * as echarts from 'echarts';
+import { useMenuStore } from '@/store/menu';
+import { usePermissionStore } from '@/store/permission';
 
 const router = useRouter();
 const { proxy } = <any>getCurrentInstance();
 
 interface GuideItemProps {
-  key: string;
-  name: string;
-  english: string;
-  url: string;
-  param?: Record<string, any>;
-  index?: number;
-  auth: boolean;
+    key: string;
+    name: string;
+    english: string;
+    url: string;
+    param?: Record<string, any>;
+    index?: number;
+    auth: boolean;
 }
 
+const menuHasPermission = useMenuStore().hasPermission;
+const btnHasPermission = usePermissionStore().hasPermission;
+
+// 菜单权限
+const dashBoardUrl = menuHasPermission('/iot-card/Dashboard');
+const platformUrl = menuHasPermission('/iot-card/Platform/Detail');
+const recordUrl = menuHasPermission('/iot-card/Record');
+const cardUrl = menuHasPermission('/iot-card/CardManagement');
+
+// 按钮权限
+const paltformPermission = btnHasPermission(`/iot-card/Platform:add`);
+const cardPermission = btnHasPermission(`/iot-card/CardManagement:add`);
+
 const Image = {
-  1: getImage('/home/1.png'),
-  2: getImage('/home/2.png'),
-  3: getImage('/home/3.png'),
+    1: getImage('/home/1.png'),
+    2: getImage('/home/2.png'),
+    3: getImage('/home/3.png'),
 };
 const guideList = [
-  {
-    key: 'EQUIPMENT',
-    name: '平台对接',
-    english: 'STEP1',
-    auth: '',
-    url: '',
-  },
-  {
-    key: 'SCREEN',
-    name: '物联卡管理',
-    english: 'STEP2',
-    auth: '',
-    url: '',
-    param: { save: true },
-  },
-  {
-    key: 'CASCADE',
-    name: '操作记录',
-    english: 'STEP3',
-    auth: '',
-    url: '',
-  },
+    {
+        key: 'EQUIPMENT',
+        name: '平台对接',
+        english: 'STEP1',
+        auth: paltformPermission,
+        url: platformUrl,
+    },
+    {
+        key: 'SCREEN',
+        name: '物联卡管理',
+        english: 'STEP2',
+        auth: !!cardPermission,
+        url: cardUrl,
+        param: { save: true },
+    },
+    {
+        key: 'CASCADE',
+        name: '操作记录',
+        english: 'STEP3',
+        auth: !!recordUrl,
+        url: recordUrl,
+    },
 ];
 
 const currentSource = ref<number>(0);
 const barChartData = ref<any[]>([]);
 const pieChartData = ref<any[]>([
-  {
-    key: 'using',
-    name: '正常',
-    value: 0,
-    className: 'normal',
-  },
-  {
-    key: 'toBeActivated',
-    name: '未激活',
-    value: 0,
-    className: 'notActive',
-  },
-  {
-    key: 'deactivate',
-    name: '停用',
-    value: 0,
-    className: 'stopped',
-  },
+    {
+        key: 'using',
+        name: '正常',
+        value: 0,
+        className: 'normal',
+    },
+    {
+        key: 'toBeActivated',
+        name: '未激活',
+        value: 0,
+        className: 'notActive',
+    },
+    {
+        key: 'deactivate',
+        name: '停用',
+        value: 0,
+        className: 'stopped',
+    },
 ]);
 
 const jumpPage = (data: GuideItemProps) => {
-  if (data.url && data.auth) {
-    router.push(`${data.url}`, data.param);
-  } else {
-    message.warning('暂无权限，请联系管理员');
-  }
+    if (data.url && data.auth) {
+        router.push({ path: `${data.url}`, ...data.param });
+    } else {
+        message.warning('暂无权限，请联系管理员');
+    }
+};
+
+const jumpDashboard = () => {
+    if (dashBoardUrl) {
+        router.push(`${dashBoardUrl}`);
+    } else {
+        message.warning('暂无权限，请联系管理员');
+    }
 };
 
 /**
  * 获取昨日流量消耗
  */
 const getTodayFlow = async () => {
-  const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
-  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
-  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
-  resp.result.map((item: any) => {
-    currentSource.value += parseFloat(item.value.toFixed(2));
-  });
+    const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
+    const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+    const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+    resp.result.map((item: any) => {
+        currentSource.value += parseFloat(item.value.toFixed(2));
+    });
 };
 
 /**
  * 获取最近15天流量消耗统计图数据
  */
 const get15DaysTrafficConsumption = async () => {
-  const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
-  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
-  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
-  barChartData.value = resp.result
-    .map((item: any) => ({
-      ...item,
-    }))
-    .reverse();
-  createBarChart();
+    const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
+    const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+    const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+    barChartData.value = resp.result
+        .map((item: any) => ({
+            ...item,
+        }))
+        .reverse();
+    createBarChart();
 };
 
 /**
  * 获取物联卡状态数据
  */
 const getStateCard = async () => {
-  Promise.all(
-    pieChartData.value.map((item) => {
-      const params = {
-        terms: [
-          {
-            terms: [
-              {
-                column: 'cardStateType',
-                termType: 'eq',
-                value: item.key,
-              },
-            ],
-          },
-        ],
-      };
-      return list(params);
-    }),
-  )
-    .then((resp) => {
-      resp.forEach((i: any, index) => {
-        if (i.success) {
-          pieChartData.value[index].value = i.result.total;
-        }
-      });
-      createPieChart();
-    })
-    .catch((err) => {
-      console.log(err);
-    });
+    Promise.all(
+        pieChartData.value.map((item) => {
+            const params = {
+                terms: [
+                    {
+                        terms: [
+                            {
+                                column: 'cardStateType',
+                                termType: 'eq',
+                                value: item.key,
+                            },
+                        ],
+                    },
+                ],
+            };
+            return list(params);
+        }),
+    )
+        .then((resp) => {
+            resp.forEach((i: any, index) => {
+                if (i.success) {
+                    pieChartData.value[index].value = i.result.total;
+                }
+            });
+            createPieChart();
+        })
+        .catch((err) => {
+            console.log(err);
+        });
 };
 
 /**
  * 最近15天流量消耗统计图
  */
 const createBarChart = () => {
-  const myChart = echarts.init(proxy.$refs.todayFlowChart);
+    const myChart = echarts.init(proxy.$refs.todayFlowChart);
 
-  const options = {
-    tooltip: {},
-    xAxis: {
-      show: false,
-      data: barChartData.value.map((m) => m.date),
-    },
-    yAxis: {
-      show: false,
-    },
-    series: [
-      {
-        name: '流量消耗',
-        type: 'bar',
-        color: '#FACD89',
-        // barWidth: '5%', // 设单柱状置宽度
-        showBackground: true, //设置柱状的背景虚拟
-        data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
-      },
-    ],
-  };
-  myChart.setOption(options);
-  window.addEventListener('resize', function () {
-    myChart.resize();
-  });
+    const options = {
+        tooltip: {},
+        xAxis: {
+            show: false,
+            data: barChartData.value.map((m) => m.date),
+        },
+        yAxis: {
+            show: false,
+        },
+        series: [
+            {
+                name: '流量消耗',
+                type: 'bar',
+                color: '#FACD89',
+                // barWidth: '5%', // 设单柱状置宽度
+                showBackground: true, //设置柱状的背景虚拟
+                data: barChartData.value.map((m) =>
+                    parseFloat(m.value.toFixed(2)),
+                ),
+            },
+        ],
+    };
+    myChart.setOption(options);
+    window.addEventListener('resize', function () {
+        myChart.resize();
+    });
 };
 /**
  * 物联卡饼图
  */
 const createPieChart = () => {
-  nextTick(() => {
-    const myChart = echarts.init(proxy.$refs.iotCardChart);
+    nextTick(() => {
+        const myChart = echarts.init(proxy.$refs.iotCardChart);
 
-    const options = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{b}: {c} ({d}%)',
-      },
-      color: ['#85a5ff', '#f29b55', '#c4c4c4'],
-      series: [
-        {
-          name: '',
-          type: 'pie',
-          avoidLabelOverlap: true, //是否启用防止标签重叠策略
-          radius: ['50%', '90%'],
-          center: ['50%', '50%'],
-          itemStyle: {
-            borderColor: 'rgba(255,255,255,1)',
-            borderWidth: 2,
-          },
-          label: {
-            normal: {
-              show: false,
+        const options = {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: {c} ({d}%)',
             },
-          },
-          data: pieChartData.value,
-        },
-      ],
-    };
-    myChart.setOption(options);
-    window.addEventListener('resize', function () {
-      myChart.resize();
+            color: ['#85a5ff', '#f29b55', '#c4c4c4'],
+            series: [
+                {
+                    name: '',
+                    type: 'pie',
+                    avoidLabelOverlap: true, //是否启用防止标签重叠策略
+                    radius: ['50%', '90%'],
+                    center: ['50%', '50%'],
+                    itemStyle: {
+                        borderColor: 'rgba(255,255,255,1)',
+                        borderWidth: 2,
+                    },
+                    label: {
+                        normal: {
+                            show: false,
+                        },
+                    },
+                    data: pieChartData.value,
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
     });
-  });
 };
 
 watch(
-  barChartData.value,
-  () => {
-    createBarChart();
-  },
-  { deep: true },
+    barChartData.value,
+    () => {
+        createBarChart();
+    },
+    { deep: true },
 );
 
 getTodayFlow();
@@ -312,230 +342,230 @@ getStateCard();
 
 <style scoped lang="less">
 .home-base {
-  position: relative;
-  padding: 24px 16px;
-  background-color: #fff;
+    position: relative;
+    padding: 24px 16px;
+    background-color: #fff;
 }
 
 .home-guide {
-  margin-bottom: 24px;
-  padding: 24px 16px;
-  background-color: #fff;
+    margin-bottom: 24px;
+    padding: 24px 16px;
+    background-color: #fff;
 
-  .home-guide-items {
-    display: grid;
-    grid-column-gap: 56px;
-  }
+    .home-guide-items {
+        display: grid;
+        grid-column-gap: 56px;
+    }
 }
 
 .home-guide-item {
-  position: relative;
-  padding: 16px;
-  background: linear-gradient(
-    135.62deg,
-    #f6f7fd 22.27%,
-    rgba(255, 255, 255, 0.86) 91.82%
-  );
-  border-radius: 2px;
-  box-shadow: 0 4px 18px #efefef;
-  .state {
     position: relative;
-    padding-left: 8px;
-    &::before {
-      position: absolute;
-      top: 7px;
-      left: 0;
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      margin-right: 2px;
-      content: '';
+    padding: 16px;
+    background: linear-gradient(
+        135.62deg,
+        #f6f7fd 22.27%,
+        rgba(255, 255, 255, 0.86) 91.82%
+    );
+    border-radius: 2px;
+    box-shadow: 0 4px 18px #efefef;
+    .state {
+        position: relative;
+        padding-left: 8px;
+        &::before {
+            position: absolute;
+            top: 7px;
+            left: 0;
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 2px;
+            content: '';
+        }
+        &.normal::before {
+            background: #85a5ff;
+        }
+        &.notActive::before {
+            background: #f29b55;
+        }
+        &.stopped::before {
+            background: #c4c4c4;
+        }
     }
-    &.normal::before {
-      background: #85a5ff;
+
+    &.pointer {
+        cursor: pointer;
     }
-    &.notActive::before {
-      background: #f29b55;
+
+    .item-english {
+        color: #4f4f4f;
     }
-    &.stopped::before {
-      background: #c4c4c4;
+
+    .item-content {
+        display: flex;
+        margin-top: 15px;
+        width: 80%;
     }
-  }
 
-  &.pointer {
-    cursor: pointer;
-  }
+    .item-node {
+        min-width: 58px;
+        margin-right: 8px;
+        z-index: 1;
 
-  .item-english {
-    color: #4f4f4f;
-  }
-
-  .item-content {
-    display: flex;
-    margin-top: 15px;
-    width: 80%;
-  }
-
-  .item-node {
-    min-width: 58px;
-    margin-right: 8px;
-    z-index: 1;
-
-    .item-node-text {
-      font-size: 14px;
-      font-weight: bold;
+        .item-node-text {
+            font-size: 14px;
+            font-weight: bold;
+        }
     }
-  }
 
-  .item-title {
-    margin: 20px 0;
-    color: @text-color;
-    font-weight: 700;
-    font-size: 20px;
-  }
-
-  .item-index {
-    position: absolute;
-    right: 10%;
-    bottom: 0;
-  }
-
-  .item-index-echarts {
-    .item-index;
-
-    right: 12px;
-    bottom: 5%;
-    z-index: 0;
-    width: 50%;
-
-    .chart {
-      width: 100%;
-      height: 100%;
+    .item-title {
+        margin: 20px 0;
+        color: @text-color;
+        font-weight: 700;
+        font-size: 20px;
+    }
+
+    .item-index {
+        position: absolute;
+        right: 10%;
+        bottom: 0;
+    }
+
+    .item-index-echarts {
+        .item-index;
+
+        right: 12px;
+        bottom: 5%;
+        z-index: 0;
+        width: 50%;
+
+        .chart {
+            width: 100%;
+            height: 100%;
+        }
     }
-  }
 }
 
 .home-body {
-  .home-base;
+    .home-base;
 
-  min-height: 444px;
-  margin-bottom: 24px;
-  // padding-bottom: 26.5%;
-  padding-bottom: 30%;
-  overflow: hidden;
-  border-bottom: 1px solid #2f54eb;
+    min-height: 444px;
+    margin-bottom: 24px;
+    // padding-bottom: 26.5%;
+    padding-bottom: 30%;
+    overflow: hidden;
+    border-bottom: 1px solid #2f54eb;
 
-  .home-body-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
+    .home-body-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
 
-    > img {
-      width: 100%;
-      height: 100%;
+        > img {
+            width: 100%;
+            height: 100%;
+        }
     }
-  }
 }
 
 .home-statistics {
-  .home-base;
+    .home-base;
 
-  .extra-text {
-    cursor: pointer;
-    color: @primary-color;
-  }
+    .extra-text {
+        cursor: pointer;
+        color: @primary-color;
+    }
 
-  .home-statistics-body {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-  }
+    .home-statistics-body {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+    }
 }
 
 .step-item-after {
-  position: absolute;
-  top: 50%;
-  right: -60px;
-  width: 60px;
-  height: 40px;
-  transform: translateY(-50%);
-  content: ' ';
+    position: absolute;
+    top: 50%;
+    right: -60px;
+    width: 60px;
+    height: 40px;
+    transform: translateY(-50%);
+    content: ' ';
 }
 
 .home-step {
-  .home-base;
+    .home-base;
 
-  .home-step-items {
-    display: grid;
-    grid-column-gap: 66px;
+    .home-step-items {
+        display: grid;
+        grid-column-gap: 66px;
 
-    .step-item {
-      display: flex;
-      flex-direction: column;
+        .step-item {
+            display: flex;
+            flex-direction: column;
 
-      .step-item-title {
-        position: relative;
-        padding: 16px 24px;
-        color: #333;
-        font-weight: bold;
-        font-size: 14px;
-        background-color: #f8f9fd;
-        cursor: pointer;
+            .step-item-title {
+                position: relative;
+                padding: 16px 24px;
+                color: #333;
+                font-weight: bold;
+                font-size: 14px;
+                background-color: #f8f9fd;
+                cursor: pointer;
 
-        .step-item-img {
-          position: absolute;
-          top: 0;
-          right: 0;
-          z-index: 1;
-          height: 100%;
+                .step-item-img {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    z-index: 1;
+                    height: 100%;
 
-          img {
-            height: 100%;
-          }
+                    img {
+                        height: 100%;
+                    }
+                }
+
+                > span {
+                    position: relative;
+                    z-index: 2;
+                }
+            }
+
+            .step-item-content {
+                flex-grow: 1;
+                height: auto;
+                padding: 24px;
+                border-right: 1px solid #e5edf4;
+                border-bottom: 1px solid #e5edf4;
+                border-left: 1px solid #e5edf4;
+            }
         }
-
-        > span {
-          position: relative;
-          z-index: 2;
-        }
-      }
-
-      .step-item-content {
-        flex-grow: 1;
-        height: auto;
-        padding: 24px;
-        border-right: 1px solid #e5edf4;
-        border-bottom: 1px solid #e5edf4;
-        border-left: 1px solid #e5edf4;
-      }
     }
-  }
 }
 
 .step-bar {
-  position: relative;
+    position: relative;
 
-  &.arrow-1 {
-    &:not(:last-child) {
-      &::after {
-        .step-item-after;
+    &.arrow-1 {
+        &:not(:last-child) {
+            &::after {
+                .step-item-after;
 
-        background: url('/images/home/arrow-1.png') no-repeat center;
-      }
+                background: url('/images/home/arrow-1.png') no-repeat center;
+            }
+        }
     }
-  }
 
-  &.arrow-2 {
-    &:not(:last-child) {
-      &::after {
-        .step-item-after;
+    &.arrow-2 {
+        &:not(:last-child) {
+            &::after {
+                .step-item-after;
 
-        background: url('/images/home/arrow-2.png') no-repeat center;
-      }
+                background: url('/images/home/arrow-2.png') no-repeat center;
+            }
+        }
     }
-  }
 }
 </style>