style(frontend): 格式化代码缩进并增强API调用安全性

云

3 天以前 8217c63d1610a9d89419c69947beb4fb3bb7c7e4

style(frontend): 格式化代码缩进并增强API调用安全性

- 统一调整了src/views/index.vue中的代码缩进格式
- 在src/api/login.js中为getInfo请求添加了授权头验证
- 优化了src/utils/request.js中的请求拦截器逻辑
- 改进了src/store/modules/user.js中的令牌处理机制
- 增强了用户信息获取的安全性验证
- 在src/api/viewIndex.js中添加了生产相关API接口
- 统一了代码中的缩进和空格规范

 src/api/login.js

@@ -1,4 +1,5 @@
import request from '@/utils/request'

import request from '@/utils/request'
import { getToken } from '@/utils/auth'


// 登录方法

export function login(username, password, code, uuid) {

@@ -32,12 +33,14 @@
}



// 获取用户详细信息

export function getInfo() {

  return request({

    url: '/getInfo',

    method: 'get'

  })

}

export function getInfo() {
  const token = getToken()
  return request({
    url: '/getInfo',
    headers: token ? { Authorization: `Bearer ${token}` } : {},
    method: 'get'
  })
}


// 退出方法

export function logout() {


 src/api/viewIndex.js

@@ -326,3 +326,45 @@
    method: "get",
  });
};

export const productionOverview = () => {
  return request({
    url: "/home/productionOverview",
    method: "get",
    headers: {
      handleAuthError: false,
    },
  });
};

export const productionRealtimeBoard = () => {
  return request({
    url: "/home/productionRealtimeBoard",
    method: "get",
    headers: {
      handleAuthError: false,
    },
  });
};

export const productionOrderProgress = (params) => {
  return request({
    url: "/home/productionOrderProgress",
    method: "get",
    params,
    headers: {
      handleAuthError: false,
    },
  });
};

export const todayProductionPlan = (params) => {
  return request({
    url: "/home/todayProductionPlan",
    method: "get",
    params,
    headers: {
      handleAuthError: false,
    },
  });
};

 src/store/modules/user.js

@@ -18,20 +18,25 @@
    }),

    actions: {

      // 登录

      login(userInfo) {

        const username = userInfo.username.trim()

        const password = userInfo.password

        const code = userInfo.code

        const uuid = userInfo.uuid

        return new Promise((resolve, reject) => {

          login(username, password, code, uuid).then(res => {

            setToken(res.token)

            this.token = res.token

            resolve()

          }).catch(error => {

            reject(error)

          })

        })

      login(userInfo) {
        const username = userInfo.username.trim()
        const password = userInfo.password
        const code = userInfo.code
        const uuid = userInfo.uuid
        return new Promise((resolve, reject) => {
          login(username, password, code, uuid).then(res => {
            const token = res?.token || res?.data?.token
            if (!token) {
              reject(new Error('未获取到登录令牌'))
              return
            }
            setToken(token)
            this.token = token
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },

      getCurrentTime() {

        const now = new Date();

@@ -47,7 +52,7 @@
      getInfo() {

        return new Promise((resolve, reject) => {

          getInfo().then(res => {

            const user = res.user

            const user = res.user || {}
            let avatar = user.avatar || ""

            avatar = import.meta.env.VITE_APP_BASE_API + '/profile/' + avatar

            if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组

@@ -56,13 +61,13 @@
            } else {

              this.roles = ['ROLE_DEFAULT']

            }

            this.id = user.userId

            this.name = user.userName

            this.id = user.userId || ''
            this.name = user.userName || ''
            this.avatar = avatar

            this.currentFactoryName = user.currentFactoryName
            this.nickName = user.nickName
            this.roleName = user.roles[0].roleName
            this.currentDeptId = user.tenantId
            this.currentFactoryName = user.currentFactoryName || ''
            this.nickName = user.nickName || ''
            this.roleName = Array.isArray(user.roles) && user.roles.length > 0 ? (user.roles[0].roleName || '') : ''
            this.currentDeptId = user.tenantId || ''
            this.currentLoginTime = this.getCurrentTime()
            this.aiEnabled = Number(res.aiEnabled) === 1 ? 1 : 0
            resolve(res)
@@ -99,30 +104,40 @@
        })

      },

      // 部门登录

      loginCheckFactory(userInfo) {

        const username = userInfo.username.trim()

        const password = userInfo.password

        return new Promise((resolve, reject) => {

          loginCheckFactory(username, password).then(res => {

            setToken(res.token)

            this.token = res.token

            resolve()

          }).catch(error => {

            reject(error)

          })

        })

      loginCheckFactory(userInfo) {
        const username = userInfo.username.trim()
        const password = userInfo.password
        return new Promise((resolve, reject) => {
          loginCheckFactory(username, password).then(res => {
            const token = res?.token || res?.data?.token
            if (!token) {
              reject(new Error('未获取到登录令牌'))
              return
            }
            setToken(token)
            this.token = token
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },

      TideLogin(code) {

        return new Promise((resolve, reject) => {

          tideLogin(code)

              .then((res) => {

                setToken(res.token);

                this.token = res.token

                Vue.prototype.uploadHeader = {

                  Authorization: "Bearer " + res.token,

                };

                resolve();

              })

      TideLogin(code) {
        return new Promise((resolve, reject) => {
          tideLogin(code)
              .then((res) => {
                const token = res?.token || res?.data?.token
                if (!token) {
                  reject(new Error('未获取到登录令牌'))
                  return
                }
                setToken(token);
                this.token = token
                Vue.prototype.uploadHeader = {
                  Authorization: "Bearer " + token,
                };
                resolve();
              })
              .catch((error) => {

                reject(error);

              });


 src/utils/request.js

@@ -21,11 +21,12 @@
})



// request拦截器

service.interceptors.request.use(config => {

service.interceptors.request.use(config => {
  config.headers = config.headers || {}
  // 是否需要设置 token

  const isToken = (config.headers || {}).isToken === false

  const isToken = config.headers.isToken === false
  // 是否需要防止数据重复提交

  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false

  const isRepeatSubmit = config.headers.repeatSubmit === false
  if (getToken() && !isToken) {

    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

  }

@@ -66,23 +67,27 @@
    }

  }

  return config

}, error => {

    console.log(error)

    Promise.reject(error)

})

}, error => {
    console.log(error)
    return Promise.reject(error)
})


// 响应拦截器

service.interceptors.response.use(res => {

    // 未设置状态码则默认成功状态

    const code = res.data.code || 200

    const code = res.data.code || 200
    const handleAuthError = (res.config && res.config.headers && res.config.headers.handleAuthError) !== false
    // 获取错误信息

    const msg = errorCode[code] || res.data.msg || errorCode['default']

    // 二进制数据则直接返回

    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {

      return res.data

    }

    if (code === 401) {

      if (!isRelogin.show) {

    if (code === 401) {
      if (!handleAuthError) {
        return Promise.reject(new Error(msg))
      }
      if (!isRelogin.show) {
        isRelogin.show = true

        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {

          isRelogin.show = false


 src/views/index.vue

@@ -21,10 +21,10 @@
    <section v-if="dashboardCards.length > 0" class="top-row">
      <div class="stats-grid">
        <article
          v-for="card in dashboardCards"
          :key="card.key"
          class="stat-card"
          :class="card.key"
            v-for="card in dashboardCards"
            :key="card.key"
            class="stat-card"
            :class="card.key"
        >
          <div class="stat-header">
            <div class="stat-title-wrap">
@@ -66,15 +66,15 @@
          <div class="process-body">
            <div class="process-chart" :class="{ empty: !hasProcessData }">
              <Echarts
                :options="chartBaseOptions"
                :chartStyle="{ width: '100%', height: '100%' }"
                :grid="processGrid"
                :series="processSeries"
                :tooltip="processTooltip"
                :xAxis="processXAxis"
                :yAxis="processYAxis"
                :style="{ height: hasProcessData ? '340px' : '280px' }"
                @click="handleChartClick"
                  :options="chartBaseOptions"
                  :chartStyle="{ width: '100%', height: '100%' }"
                  :grid="processGrid"
                  :series="processSeries"
                  :tooltip="processTooltip"
                  :xAxis="processXAxis"
                  :yAxis="processYAxis"
                  :style="{ height: hasProcessData ? '340px' : '280px' }"
                  @click="handleChartClick"
              />
              <div v-if="!hasProcessData" class="chart-empty">
                <el-icon><DataAnalysis /></el-icon>
@@ -128,10 +128,10 @@
              <template #default="{ row }">
                <div class="table-progress">
                  <el-progress
                    :stroke-width="8"
                    :percentage="row.completionRate"
                    :show-text="false"
                    status="success"
                      :stroke-width="8"
                      :percentage="row.completionRate"
                      :show-text="false"
                      status="success"
                  />
                  <span>{{ row.completionRate }}%</span>
                </div>
@@ -149,53 +149,53 @@
        </div>

        <div v-if="visiblePanels.contract" class="cockpit-panel contract-panel">
            <div class="panel-title">客户合同金额分析</div>
            <div class="contract-summary">
              <div class="contract-card">
                <div class="contract-name">总合同金额(元)</div>
                <div class="contract-main digital-number">{{ formatNumber(sum) }}</div>
                <div class="contract-compare">
                  同比
                  <span class="rise">{{ trendText(yny) }}</span>
                  环比
                  <span class="rise">{{ trendText(chain) }}</span>
                </div>
          <div class="panel-title">客户合同金额分析</div>
          <div class="contract-summary">
            <div class="contract-card">
              <div class="contract-name">总合同金额(元)</div>
              <div class="contract-main digital-number">{{ formatNumber(sum) }}</div>
              <div class="contract-compare">
                同比
                <span class="rise">{{ trendText(yny) }}</span>
                环比
                <span class="rise">{{ trendText(chain) }}</span>
              </div>
              <div class="contract-chart-wrap">
                <Echarts
            </div>
            <div class="contract-chart-wrap">
              <Echarts
                  :options="chartBaseOptions"
                  :legend="pieLegend"
                  :chartStyle="chartStylePie"
                  :series="materialPieSeries"
                  :tooltip="pieTooltip"
                />
              </div>
              />
            </div>
            <ul class="contract-list">
              <li v-for="item in materialPieSeries[0].data" :key="item.name">
                <span class="legend-dot" :style="{ backgroundColor: item.itemStyle?.color }"></span>
                <span class="contract-item-name">{{ item.name }}</span>
                <span class="contract-item-rate">{{ item.rate }}%</span>
                <span class="contract-item-value digital-number">¥{{ formatNumber(item.value) }}</span>
              </li>
            </ul>
          </div>
          <ul class="contract-list">
            <li v-for="item in materialPieSeries[0].data" :key="item.name">
              <span class="legend-dot" :style="{ backgroundColor: item.itemStyle?.color }"></span>
              <span class="contract-item-name">{{ item.name }}</span>
              <span class="contract-item-rate">{{ item.rate }}%</span>
              <span class="contract-item-value digital-number">¥{{ formatNumber(item.value) }}</span>
            </li>
          </ul>
        </div>

        <div v-if="visiblePanels.quality" class="cockpit-panel quality-panel">
            <div class="panel-title-row">
              <div class="panel-title">质量统计</div>
              <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
                <el-radio-button :value="1">周</el-radio-button>
                <el-radio-button :value="2">月</el-radio-button>
                <el-radio-button :value="3">季度</el-radio-button>
              </el-radio-group>
            </div>
            <div class="quality-cards">
              <div class="quality-card one">原材料已检数量 <span>{{ qualityStatisticsObject.supplierNum }}件</span></div>
              <div class="quality-card two">过程检验数量 <span>{{ qualityStatisticsObject.processNum }}件</span></div>
              <div class="quality-card three">出厂已检数量 <span>{{ qualityStatisticsObject.factoryNum }}件</span></div>
            </div>
            <Echarts
          <div class="panel-title-row">
            <div class="panel-title">质量统计</div>
            <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
              <el-radio-button :value="1">周</el-radio-button>
              <el-radio-button :value="2">月</el-radio-button>
              <el-radio-button :value="3">季度</el-radio-button>
            </el-radio-group>
          </div>
          <div class="quality-cards">
            <div class="quality-card one">原材料已检数量 <span>{{ qualityStatisticsObject.supplierNum }}件</span></div>
            <div class="quality-card two">过程检验数量 <span>{{ qualityStatisticsObject.processNum }}件</span></div>
            <div class="quality-card three">出厂已检数量 <span>{{ qualityStatisticsObject.factoryNum }}件</span></div>
          </div>
          <Echarts
              :options="chartBaseOptions"
              :chartStyle="chartStyle"
              :grid="grid"
@@ -205,8 +205,8 @@
              :xAxis="xAxis1"
              :yAxis="yAxis1"
              style="height: 270px"
            />
          </div>
          />
        </div>
      </div>

      <div v-if="hasRightPanels" class="right-column">
@@ -236,11 +236,11 @@
          <div class="realtime-grid">
            <div class="realtime-item" v-for="item in realtimeBoard" :key="item.key">
              <el-progress
                type="circle"
                :percentage="item.percent"
                :stroke-width="10"
                :width="94"
                :color="item.color"
                  type="circle"
                  :percentage="item.percent"
                  :stroke-width="10"
                  :width="94"
                  :color="item.color"
              >
                <template #default>
                  <div class="realtime-value digital-number">{{ item.display }}</div>
@@ -258,11 +258,11 @@
          </div>
          <div class="quick-grid">
            <button
              v-for="item in quickEntries"
              :key="item.label"
              class="quick-item"
              type="button"
              @click="goToQuick(item.path)"
                v-for="item in quickEntries"
                :key="item.label"
                class="quick-item"
                type="button"
                @click="goToQuick(item.path)"
            >
              <span class="quick-icon">
                <el-icon>
@@ -296,15 +296,15 @@
        <div v-if="visiblePanels.receipt" class="cockpit-panel receipt-panel">
          <div class="panel-title">回款与开票分析</div>
          <Echarts
            :options="chartBaseOptions"
            :chartStyle="chartStyle"
            :grid="grid"
            :legend="lineLegend"
            :series="lineSeries"
            :tooltip="tooltipLine"
            :xAxis="xAxis2"
            :yAxis="yAxis2"
            style="height: 300px"
              :options="chartBaseOptions"
              :chartStyle="chartStyle"
              :grid="grid"
              :legend="lineLegend"
              :series="lineSeries"
              :tooltip="tooltipLine"
              :xAxis="xAxis2"
              :yAxis="yAxis2"
              style="height: 300px"
          />
        </div>

@@ -391,7 +391,7 @@
});

const welcomeAvatar = computed(() =>
  welcomeAvatarLoadFailed.value || !userStore.avatar ? defaultWelcomeAvatar : userStore.avatar
    welcomeAvatarLoadFailed.value || !userStore.avatar ? defaultWelcomeAvatar : userStore.avatar
);

const handleWelcomeAvatarError = () => {
@@ -401,10 +401,10 @@
};

watch(
  () => userStore.avatar,
  () => {
    welcomeAvatarLoadFailed.value = false;
  }
    () => userStore.avatar,
    () => {
      welcomeAvatarLoadFailed.value = false;
    }
);

const axisTextColor = "#5f6f86";
@@ -677,11 +677,11 @@
    const name = params?.[0]?.name ?? "";
    const list = Array.isArray(params) ? params : [];
    const lines = list
      .map((p) => {
        const colorBox = `<span style="display:inline-block;margin-right:6px;border-radius:2px;width:10px;height:10px;background:${p.color}"></span>`;
        return `${colorBox}${p.seriesName}<b style="float:right;">${Number(p.value || 0).toFixed(2)}</b>`;
      })
      .join("<br/>");
        .map((p) => {
          const colorBox = `<span style="display:inline-block;margin-right:6px;border-radius:2px;width:10px;height:10px;background:${p.color}"></span>`;
          return `${colorBox}${p.seriesName}<b style="float:right;">${Number(p.value || 0).toFixed(2)}</b>`;
        })
        .join("<br/>");
    return `<div style="min-width:140px;"><div style="font-weight:700;margin-bottom:6px;">${name}</div>${lines}</div>`;
  },
});
@@ -730,15 +730,15 @@
});

const processTotals = computed(() =>
  processChartData.value.reduce(
    (acc, cur) => {
      acc.input += Number(cur.input || 0);
      acc.scrap += Number(cur.scrap || 0);
      acc.output += Number(cur.output || 0);
      return acc;
    },
    { input: 0, scrap: 0, output: 0 }
  )
    processChartData.value.reduce(
        (acc, cur) => {
          acc.input += Number(cur.input || 0);
          acc.scrap += Number(cur.scrap || 0);
          acc.output += Number(cur.output || 0);
          return acc;
        },
        { input: 0, scrap: 0, output: 0 }
    )
);

const hasProcessData = computed(() => {
@@ -771,8 +771,8 @@
    subLabel: "待付款金额",
    subValue: formatNumber(businessInfo.value.monthPurchaseHaveMoney),
    trend: `占比 ${ratioText(
      businessInfo.value.monthPurchaseHaveMoney,
      businessInfo.value.monthPurchaseMoney
        businessInfo.value.monthPurchaseHaveMoney,
        businessInfo.value.monthPurchaseMoney
    )}`,
    icon: ShoppingCartFull,
    visible: visibleModules.value.procurement,
@@ -847,10 +847,10 @@
});

const todayPlanList = computed(() =>
  productionOrders.value
    .slice()
    .sort((a, b) => dayjs(a.deliveryDate).valueOf() - dayjs(b.deliveryDate).valueOf())
    .slice(0, 5)
    productionOrders.value
        .slice()
        .sort((a, b) => dayjs(a.deliveryDate).valueOf() - dayjs(b.deliveryDate).valueOf())
        .slice(0, 5)
);

const avgCompletionRate = computed(() => {
@@ -930,11 +930,11 @@

const normalizeMenuTitle = (title) => String(title || "").replace(/\s+/g, "").trim();
const normalizeRoutePath = (path) =>
  String(path || "")
    .trim()
    .replace(/\/+/g, "/")
    .replace(/\/$/, "")
    .toLowerCase();
    String(path || "")
        .trim()
        .replace(/\/+/g, "/")
        .replace(/\/$/, "")
        .toLowerCase();

const resolveRoutePath = (route, parentPath = "") => {
  const currentPath = String(route?.path || "").trim();
@@ -966,11 +966,11 @@

const accessibleMenuRoutes = computed(() => {
  const routePool =
    permissionStore.defaultRoutes?.length > 0
      ? permissionStore.defaultRoutes
      : permissionStore.sidebarRouters?.length > 0
        ? permissionStore.sidebarRouters
        : permissionStore.routes;
      permissionStore.defaultRoutes?.length > 0
          ? permissionStore.defaultRoutes
          : permissionStore.sidebarRouters?.length > 0
              ? permissionStore.sidebarRouters
              : permissionStore.routes;
  return collectAccessibleRoutes(routePool || []);
});

@@ -1014,13 +1014,13 @@
};

const hasModuleAccess = (config) =>
  accessibleMenuRoutes.value.some((route) => {
    const matchedTitle = (config.titles || []).some((title) => route.title === normalizeMenuTitle(title));
    const matchedPath = (config.pathPrefixes || []).some(
      (prefix) => route.path === prefix || route.path.startsWith(`${prefix}/`)
    );
    return matchedTitle || matchedPath;
  });
    accessibleMenuRoutes.value.some((route) => {
      const matchedTitle = (config.titles || []).some((title) => route.title === normalizeMenuTitle(title));
      const matchedPath = (config.pathPrefixes || []).some(
          (prefix) => route.path === prefix || route.path.startsWith(`${prefix}/`)
      );
      return matchedTitle || matchedPath;
    });

const visibleModules = computed(() => ({
  sales: hasModuleAccess(moduleAccessConfig.sales),
@@ -1047,29 +1047,29 @@
}));

const hasLeftPanels = computed(
  () => visiblePanels.value.process || visiblePanels.value.order || visiblePanels.value.contract || visiblePanels.value.quality
    () => visiblePanels.value.process || visiblePanels.value.order || visiblePanels.value.contract || visiblePanels.value.quality
);
const hasRightPanels = computed(
  () => visiblePanels.value.todo || visiblePanels.value.realtime || visiblePanels.value.quick || visiblePanels.value.plan || visiblePanels.value.receipt
    () => visiblePanels.value.todo || visiblePanels.value.realtime || visiblePanels.value.quick || visiblePanels.value.plan || visiblePanels.value.receipt
);
const hasVisiblePanels = computed(() => hasLeftPanels.value || hasRightPanels.value);

const quickEntries = computed(() =>
  quickEntryConfigs
    .map((item) => {
      const targetRoute = accessibleMenuRoutes.value.find((route) =>
        item.titles.some((title) => route.title === normalizeMenuTitle(title))
      );
      const resolvedPath = targetRoute?.path || "";
      return resolvedPath
        ? {
            label: item.label,
            icon: item.icon,
            path: resolvedPath,
          }
        : null;
    })
    .filter(Boolean)
    quickEntryConfigs
        .map((item) => {
          const targetRoute = accessibleMenuRoutes.value.find((route) =>
              item.titles.some((title) => route.title === normalizeMenuTitle(title))
          );
          const resolvedPath = targetRoute?.path || "";
          return resolvedPath
              ? {
                label: item.label,
                icon: item.icon,
                path: resolvedPath,
              }
              : null;
        })
        .filter(Boolean)
);

const updateNowTime = () => {
@@ -1280,7 +1280,7 @@
  flex-direction: column;
  gap: 16px;
  overflow-x: clip;
    margin-top: 10px;
  margin-top: 10px;
}

.digital-number {
@@ -1305,8 +1305,8 @@
  min-height: 92px;
  padding: 18px 22px;
  background:
    radial-gradient(circle at 8% 20%, rgba(59, 130, 246, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.88));
      radial-gradient(circle at 8% 20%, rgba(59, 130, 246, 0.12), transparent 32%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.88));
}

.welcome-user {
@@ -1522,7 +1522,7 @@
  z-index: 1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31C20 16 44 36 66 24C87 12 107 31 129 18C148 8 169 28 193 16C214 5 237 25 259 14C280 3 306 19 340 8' fill='none' stroke='%236ea4ee' stroke-width='1.5'/%3E%3C/svg%3E")
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31C20 16 44 36 66 24C87 12 107 31 129 18C148 8 169 28 193 16C214 5 237 25 259 14C280 3 306 19 340 8' fill='none' stroke='%236ea4ee' stroke-width='1.5'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
}

@@ -1658,21 +1658,21 @@
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.9)),
    repeating-linear-gradient(
      to right,
      rgba(148, 163, 184, 0.07) 0,
      rgba(148, 163, 184, 0.07) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(148, 163, 184, 0.06) 0,
      rgba(148, 163, 184, 0.06) 1px,
      transparent 1px,
      transparent 34px
    );
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.9)),
      repeating-linear-gradient(
          to right,
          rgba(148, 163, 184, 0.07) 0,
          rgba(148, 163, 184, 0.07) 1px,
          transparent 1px,
          transparent 48px
      ),
      repeating-linear-gradient(
          to bottom,
          rgba(148, 163, 184, 0.06) 0,
          rgba(148, 163, 184, 0.06) 1px,
          transparent 1px,
          transparent 34px
      );
  overflow: hidden;
  padding: 10px;
}