@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config-page/DashboardDesign.vue

@@ -0,0 +1,656 @@
+<template>
+  <div :class="['epx-dashboard', 'epx-dashboard-'+ pageId ,'dashboard-design', 'dashboard-design--'+ theme, { 'is-mobile-preview': mobilePreview }]" :style="dashboardStyle" ref="dashboard">
+    <epx-dashboard-design-grid
+      v-if="layout.length>0"
+      ref="designGrid"
+      :items="layout"
+      :grid="gridParams"
+      :body-height="bodyHeight"
+      :min-height="canvasHeight"
+      :show-grid-lines="!!globalConfigs.showGridLines"
+      @change="onLayoutChange"
+      @transfer-out="onTransferOut"
+      @transfer-in="onTransferIn"
+    >
+      <template #item="{ item }">
+        <!-- floatable：整页悬浮模式下逐项悬浮没有意义，不显示操作条上的悬浮切换 -->
+        <epx-dashboard-design-item :item="item" :active="design.isActive(item)" :floatable="gridParams.mode !== 'float'" @select="openConfigPanel">
+          <!-- 渲染组件 -->
+          <div v-if="item.contentType && !reloadComponent[item.id]" class="drag-component">
+            <epx-component
+              v-if="item.contentType==='entity-list' || item.contentType === 'num-statistic'"
+              class="epx-dashboard__component"
+              :name="`${item.contentType}--preview`"
+              :ref="`component_${item.i}`"
+              :widget="item"
+              :designer="previewDesigner"
+              :component-style="componentStyle(item)"
+              is-dashboard
+              design-mode
+              :theme="theme"
+            >
+            </epx-component>
+            <epx-component
+              v-else
+              class="epx-dashboard__component"
+              :name="item.contentType"
+              :ref="`component_${item.i}`"
+              :items="item.items"
+              :itemConfigs="itemConfigs"
+              is-dashboard
+              design-mode
+              :key="item.id"
+              :dashboard-id="upCompId"
+              :comp-id="upCompId? upCompId+ '-'+item.id: item.id"
+              :comp-item="item"
+              :comp-title="item.title"
+              :comp-style="componentStyle(item)"
+              :comp-configs="getCompConfigs(item, item.id)" :theme="theme" mode="design"
+              :comp-grid="containerGrid(item)"
+              :allComponentList="allComponentList"
+              :themeChartConfig="themeChartConfig"
+              @changeItems="v=>changeSubItems(item, v)"
+              @open-config="openConfig"
+            ></epx-component>
+          </div>
+          <span v-else>{{item.id}}</span>
+          <!-- 操作条：按钮先选中本项再执行，保证 activeComponent 指向被操作的项 -->
+          <template #operates>
+            <i class="component-operate__item el-icon-edit-outline" v-if="item.contentType==='report-chart'" @click="openConfigPanel(item); designReport()"></i>
+            <i class="component-operate__item el-icon-edit-outline" v-if="item.contentType==='report-html'" @click="openConfigPanel(item); designForm()"></i>
+            <i class="component-operate__item el-icon-setting" @click="openConfigPanel(item); editComponent()"></i>
+            <i class="component-operate__item el-icon-copy-document" v-if="item.contentType==='report-chart'" @click="openConfigPanel(item); copyReport()"></i>
+            <i class="component-operate__item el-icon-copy-document" v-else @click="copyComponent(item)"></i>
+            <el-dropdown class="componnet-dropdown" @command="command => { openConfigPanel(item); deleteReport(command) }" v-if="item.contentType==='report-chart'">
+              <i class="component-operate__item el-icon-delete"></i>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item command="only">仅从仪表盘中删除</el-dropdown-item>
+                <el-dropdown-item command="all">从仪表盘和报表库中删除</el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+            <i class="component-operate__item el-icon-delete" v-else @click="deleteComponent(item, true)"></i>
+          </template>
+        </epx-dashboard-design-item>
+      </template>
+    </epx-dashboard-design-grid>
+    <div class="null-component" v-else>
+      <div class="add-component-btn"  @click="$emit('add-report')">
+        <i class="epx-icon-color-tianjiabaobiao"></i>
+        <span>添加报表</span>
+      </div>
+      <div class="add-component-btn" @click="$emit('add-component')">
+        <i class="epx-icon-color-tianjiazujian"></i>
+        <span>添加组件</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import { buildThemeCss, buildThemeChartConfig } from '@epxing/dashboard/src/theme-style'
+import { normalizeGridItem } from '@epxing/dashboard/src/layout-util'
+import { getPageGrid, getContainerGrid, isLegacyConfig, isContainerType } from '@epxing/dashboard/src/grid/model'
+import { createDesignState } from '@epxing/dashboard/src/grid/designState'
+import DesignItem from '@epxing/dashboard/src/DesignItem.vue'
+import { chartConfigRequiresReload } from '@epxing/utils/src/chart-config-update'
+export default {
+  name: 'epx-visual-config-dashboard-design',
+  components: {
+    // 设计态画布（gridstack 封装）按需加载，运行态不拉 gridstack
+    'epx-dashboard-design-grid': defineAsyncComponent(() => import('@epxing/dashboard/src/DesignGrid.vue')),
+    'epx-dashboard-design-item': DesignItem
+  },
+  props: {
+    pageMetaId: String,
+    pageId: String,
+    upCompId: String,
+    globalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    allComponentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    itemConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    componentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    theme: {
+      type: String,
+      default: 'light'
+    },
+    themeStyles: Object,
+    // 主题面板处于"移动端"编辑态：加 .is-mobile-preview 类，桌面宽画布也预览移动端覆盖
+    mobilePreview: Boolean
+  },
+  provide () {
+    return {
+      upPage: this,
+      pageMetaId: this.pageMetaId,
+      pageId: this.pageId,
+      changeItemConfigs: this.changeItemConfigs,
+      // 主题图表配置下发，跨容器层注入到图表组件，保持响应式（设计器实时调色板）
+      getThemeChartConfig: () => this.themeChartConfig,
+      // 设计态共享选中态：容器内网格与页面级画布共用同一份，选中项只有一个
+      epxDashboardDesign: this.design,
+      // 配置是否旧版（与运行态 Dashboard.vue 同一 provide）：容器里的嵌套容器据此选历史写死值 / 继承本容器网格
+      getDashboardLegacy: () => isLegacyConfig(this.globalConfigs)
+    }
+  },
+  inject: ['changeItemConfigs'],
+  data () {
+    return {
+      reloadComponent: {},
+      oldItemConfigs: {},
+      layout: [],
+      // 设计态选中态（activeComponent 由它派生），provide 给容器内网格共用
+      design: createDesignState(),
+      // 'auto' 行高 / 间距（旧 autoHeight）的换算基准：document.body 高度
+      bodyHeight: 0,
+      // 画布可视高度：根网格按它撑满画布，指针移到空白处才不会触发库的「离开网格」
+      canvasHeight: 0
+    }
+  },
+  computed: {
+    getCompConfigs () {
+      return (component) => {
+      // 如果是页面 查找页面默认配置
+        const { configs = {}, id, title, contentType, ...otherConfigs } = component
+        // this.upCompId ? this.upCompId + '-' + id :
+        const compId = id
+        const itemConfig = this.itemConfigs[compId] || {}
+        const _configs = { ...otherConfigs, ...configs, ...itemConfig }
+        if (title) {
+          _configs.componentName = title
+        }
+        return _configs
+      }
+    },
+    componentStyle () {
+      return component => {
+        const componentStyle = component.style || {}
+        // if (this.themeStyles.component?.border) {
+        //   componentStyle = { ...this.themeStyles.component.border, ...componentStyle }
+        // }
+        return componentStyle
+      }
+    },
+    dashboardStyle () {
+      const { backgroundColor, backgroundImage } = this.globalConfigs
+      return {
+        backgroundColor,
+        backgroundImage: backgroundImage ? `url(${this.$util.getFileUrl(backgroundImage)})` : null
+      }
+    },
+    themeChartConfig () {
+      // 移动端预览态用 mobile.chart 覆盖，让图表配色在设计器也能预览移动端方案
+      return buildThemeChartConfig(this.themeStyles || {}, this.mobilePreview)
+    },
+    // 页面级网格参数：与运行态同一取法（旧配置的 autoHeight ⇒ rowHeight / gap 'auto'），几何才能一致
+    gridParams () {
+      return getPageGrid(this.globalConfigs)
+    },
+    // 容器项内部网格参数（与运行态 pageGridMixin.containerGrid 同源）：显式 grid 优先，旧配置用历史写死值，v3 无 grid 继承页面网格；非容器 undefined
+    containerGrid () {
+      return component => (isContainerType(component.contentType)
+        ? getContainerGrid(component, this.gridParams, isLegacyConfig(this.globalConfigs))
+        : undefined)
+    },
+    // 预览类组件（entity-list / num-statistic 的 --preview）要的 designer 契约：页面对象、组件配置，
+    // 以及按内容类型查组件记录（预览 mixin 挂载时读 widgetInfo.CONTAINER，缺了会抛错打断 Vue 调度，R24）。
+    // dragState 与拖放方法是给预览 mixin 的兜底：它对 items !== undefined 的项（外壳给每项补了 items: []，num-statistic 也算容器）
+    // 绑 HTML5 dragenter / dragover / drop 事件并读 dragState、调这些方法；看板设计器没有组件库 HTML5 拖拽，空实现即可
+    previewDesigner () {
+      const noop = () => {}
+      return {
+        page: { metaId: this.pageMetaId },
+        widgetConfig: this.itemConfigs,
+        getWidgetByType: code => this.allComponentList.find(item => item.CODE === code) || null,
+        dragState: {},
+        setDragOverTarget: noop,
+        setDragOverTargetElement: noop,
+        setPreviewDragTarget: noop,
+        clearDragOverTarget: noop,
+        clearDragInsertLine: noop,
+        clearPreviewDragTarget: noop,
+        handleDrop: noop
+      }
+    },
+    // 行高 / 间距按视口等比（旧 autoHeight 或 v3 显式 'auto'）时才需要随窗口维护 bodyHeight
+    autoGrid () {
+      return this.gridParams.rowHeight === 'auto' || this.gridParams.padding === 'auto'
+    },
+    activeComponent () {
+      return this.design.state.activeItem
+    }
+  },
+  watch: {
+    componentList: {
+      handler (v) {
+        this.layout = [...v]
+      },
+      immediate: true
+    },
+    itemConfigs: {
+      handler (v) {
+        for (const key in this.itemConfigs) {
+          const compConfig = this.itemConfigs[key] || {}
+          const oldCompConfig = this.oldItemConfigs[key] || {}
+          if (!this.$_.isEqual(compConfig, oldCompConfig)) {
+            const findItem = (key, arr = this.componentList) => {
+              for (const item of arr) {
+                if (item.id === key) {
+                  return item
+                } else if (item.children) {
+                  const childItem = findItem(key, item.children)
+                  if (childItem) return childItem
+                }
+              }
+            }
+            const item = findItem(key) || {}
+            if ((item.contentType !== 'report-chart' && item.contentType !== 'chart') || compConfig.id !== oldCompConfig.id) {
+              this.reloadComponent[key] = true
+              this.$nextTick(() => {
+                this.reloadComponent[key] = false
+              })
+            }
+          }
+        }
+        this.oldItemConfigs = this.$_.cloneDeep(this.itemConfigs)
+      },
+      deep: true
+    },
+    theme () {
+      // this.layout.forEach(item => {
+      //   this.$set(this.reloadComponent, item.id, true)
+      //   this.$nextTick(() => {
+      //     this.$set(this.reloadComponent, item.id, false)
+      //   })
+      // })
+    },
+    layout: {
+      // Vue3 起浅层 watcher 不响应 push/splice，而设计器新增 / 删除组件走的正是 push/splice
+      deep: 1,
+      handler (v) {
+        for (const item of v) {
+          if (!item) continue
+          // x/y/w/h 必须是数字（网格引擎按数值布局）
+          normalizeGridItem(item)
+        }
+      },
+      immediate: true
+    },
+    autoGrid: {
+      handler (v) {
+        if (v) {
+          this.calculateHeight()
+          window.addEventListener('resize', this.calculateHeight)
+        } else {
+          window.removeEventListener('resize', this.calculateHeight)
+        }
+      },
+      immediate: true
+    },
+    themeStyles: {
+      handler (v) {
+        if (v) {
+          // 设计器中 page.background 直接作用于根节点，containerSelector 置空
+          // 设计器组件被 pointer-events:none，自身 :hover 不触发，悬浮预览改用祖先 .drag-component:hover 触发
+          // mobilePreview: 额外输出 .is-mobile-preview 作用域的移动端规则，配合根节点类做桌面宽预览
+          const styles = buildThemeCss(v, `.epx-dashboard-${this.pageId}`, path => this.$util.getFileUrl(path), { containerSelector: '', hoverAncestor: '.drag-component', mobilePreview: true })
+          let styleElement = document.head.querySelector(`#dashboard-${this.pageId}`)
+          if (!styleElement) {
+            styleElement = document.createElement('style')
+            styleElement.id = `dashboard-${this.pageId}`
+            styleElement.type = 'text/css'
+            styleElement.textContent = styles
+            document.head.appendChild(styleElement)
+          } else {
+            styleElement.textContent = styles
+          }
+        }
+      },
+      deep: true
+    }
+
+  },
+  mounted () {
+    this.measureCanvas()
+    if (typeof ResizeObserver !== 'undefined') {
+      this.canvasObserver = new ResizeObserver(() => this.measureCanvas())
+      this.canvasObserver.observe(this.$refs.dashboard)
+    }
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.calculateHeight)
+    if (this.canvasObserver) this.canvasObserver.disconnect()
+  },
+  methods: {
+    // upPage 契约：设计器内组件 $refeshPage() / 外壳 $refesh() 会调到这里；画布由网格引擎维护，无需刷新
+    $refesh () {
+    },
+    // 库改了坐标（拖拽 / 缩放 / 推挤 / 首次对账）：画布已就地写回 item.x/y/w/h，只需通知外壳保存
+    onLayoutChange () {
+      this.$emit('change-items', this.layout)
+    },
+    // 跨网格搬出（项被拖进容器）：源侧必须同步移出数据，否则下一次同步会把壳重新加回来
+    onTransferOut (item) {
+      this.deleteComponent(item, false)
+    },
+    // 跨网格搬入（容器内项拖回页面）：画布已按本网格换算过 w/h
+    onTransferIn (item) {
+      this.layout.push(item)
+      this.$emit('change-items', this.layout)
+    },
+    openConfig (...props) {
+      this.$emit('open-config', ...props)
+    },
+    openConfigPanel (component) {
+      this.design.select(component, 'page')
+      // const componentInfo = this.allComponentList.find(item => item.CODE === component.contentType) || { CODE: component.contentType }
+      // const configs = this.getCompConfigs(component, component.id)
+      // this.$emit('open-config', component.id, componentInfo, configs)
+    },
+    setChartConfig (v) {
+      const that = this
+      const id = that.activeComponent.id
+      const before = that.getCompConfigs(that.activeComponent, id)
+      const reload = chartConfigRequiresReload(before, v, that.$_.isEqual)
+      that.changeItemConfigs(id, that.$_.cloneDeep(v), null, 'cover')
+      if (reload) {
+        that.reloadComponent[id] = true
+        that.$nextTick(() => { that.reloadComponent[id] = false })
+      }
+
+      that.$forceUpdate()
+    },
+    editComponent () {
+      const componentInfo = this.allComponentList.find(item => item.CODE === this.activeComponent.contentType) || { CODE: this.activeComponent.contentType }
+      const configs = this.getCompConfigs(this.activeComponent, this.activeComponent.id)
+
+      if (componentInfo.CODE === 'chart') {
+        this.$createPage({
+          metaId: 'FM_REPORT_BASE',
+          openType: '2',
+          defaultFullscreen: true,
+          withHeader: false,
+          component: 'chart-design',
+          chartConfigs: configs,
+          setChartConfig: this.setChartConfig.bind(this)
+        })
+      } else {
+        this.$emit('open-config', this.activeComponent.id, componentInfo, configs)
+      }
+    },
+    designReport () {
+      const configs = this.getCompConfigs(this.activeComponent, this.activeComponent.id)
+      this.goPage({
+        openMode: '2',
+        component: 'report-design',
+        params: {
+          defaultFullscreen: true,
+          withHeader: false,
+          id: configs.id,
+          callback: () => {
+            this.reloadComponent[this.activeComponent.id] = true
+            this.$nextTick(() => {
+              this.reloadComponent[this.activeComponent.id] = false
+            })
+          }
+        }
+
+      })
+    },
+    designForm () {
+      const configs = this.getCompConfigs(this.activeComponent, this.activeComponent.id)
+      if (configs.id) {
+        this.$http.get({
+          entityId: 'FM_FORM',
+          id: configs.id
+        })
+          .then(data => {
+            this.goPage({
+              component: data.data.TYPE === 'excelReport' ? 'excel-design' : 'form-design',
+              metaId: 'FM_FORM',
+              params: {
+                id: configs.id,
+                callback: () => {
+                  this.reloadComponent[this.activeComponent.id] = true
+                  this.$nextTick(() => {
+                    this.reloadComponent[this.activeComponent.id] = false
+                  })
+                }
+              }
+            })
+          })
+      }
+    },
+    copyReport () {
+      this.$prompt('请输入报表名称', '复制报表', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        inputPattern: /.+/,
+        inputErrorMessage: '请输入报表名称'
+      }).then(({ value }) => {
+        const configs = this.getCompConfigs(this.activeComponent, this.activeComponent.id)
+        this.$http.get({
+          entityId: 'FM_REPORT_BASE',
+          id: configs.id
+        })
+          .then(oldData => {
+            const form = {}
+            for (const key in oldData.data) {
+              if (!key.includes('#')) form['bean.' + key] = oldData.data[key]
+            }
+            this.$http.save({
+              action: 'copy',
+              entityId: 'FM_REPORT_BASE',
+              oldRecordId: configs.id,
+              ...form,
+              'bean.NAME': value,
+              'bean.ID': ''
+            })
+              .then(data => {
+                this.$emit('add-report-to-dashboard', data, { w: this.activeComponent.w, h: this.activeComponent.h })
+                this.$message.success('复制成功')
+              })
+              .catch(err => {
+                this.$message.error(err.message)
+              })
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    copyComponent (item) {
+      const configs = this.getCompConfigs(item, item.id)
+      const newItem = {
+        CODE: item.contentType,
+        TITLE: item.title,
+        ...item
+      }
+      this.$emit('add-component-to-dashboard', newItem, configs)
+    },
+    deleteComponent (component, deleteConfig) {
+      const activeComponent = component || this.activeComponent
+      const index = this.layout.findIndex(item => item.id === activeComponent.id)
+      if (activeComponent.contentType === 'report-chat') {
+        const configs = this.getCompConfigs(activeComponent, activeComponent.id)
+        this.$http.removeMulti({
+          entityId: 'FM_REPORT_BASE',
+          ids: configs.id
+        })
+      }
+      if (index !== -1) {
+        this.layout.splice(index, 1)
+        this.$emit('change-items', this.layout)
+        // 删除对应的配置信息
+        if (deleteConfig) this.$emit('delete-configs', activeComponent.id)
+        // 被删的正是选中项：清掉共享选中态（与容器侧对齐）
+        if (this.design.isActive(activeComponent)) this.design.clear()
+      }
+    },
+    deleteReport (command) {
+      // 先取住被删项：activeComponent 由共享选中态派生，末尾 clear 后就是 null，删报表库记录那一支还要用它
+      const activeComponent = this.activeComponent
+      const index = this.layout.findIndex(item => item.id === activeComponent.id)
+
+      if (index !== -1) {
+        this.layout.splice(index, 1)
+        this.$emit('change-items', this.layout)
+        this.$emit('delete-configs', activeComponent.id)
+      }
+      if (command === 'all') {
+        const configs = this.getCompConfigs(activeComponent, activeComponent.id)
+        this.$http.removeMulti({
+          entityId: 'FM_REPORT_BASE',
+          ids: configs.id
+        })
+      }
+      // 被删的正是选中项：清掉共享选中态（与容器侧对齐）
+      this.design.clear()
+    },
+    changeSubItems (item, v) {
+      const index = this.layout.findIndex(layoutItem => layoutItem.id === item.id)
+      if (index !== -1) this.layout.splice(index, 1, { ...(this.layout[index]), items: v })
+      this.$emit('change-items', this.layout)
+    },
+    calculateHeight () {
+      this.bodyHeight = document.body.offsetHeight
+    },
+    measureCanvas () {
+      if (this.$refs.dashboard) this.canvasHeight = this.$refs.dashboard.clientHeight
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-design {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  // background: #F2F3F7;
+  // 根节点同时是 .epx-dashboard（flex 列容器）：网格宿主不参与压缩，内容超过一屏时它（网格线背景）随内容延伸
+  > .epx-dashboard-design-grid {
+    flex: none;
+  }
+}
+// .dashboard-design--dark {
+//   background: #151C3D;
+//   .drag-border {
+//     background: none;
+//   }
+//   .drag-component {
+//     >div {
+//       // background: rgba(255,255,255, .1)
+//     }
+//   }
+// }
+// .dashboard-design--technology {
+//   background: url('@/assets/images/dashboard/technology_bg.jpg') no-repeat center;
+//   background-size: cover;
+//   .drag-border {
+//     background: rgba(255, 255, 255, 0.1);
+//   }
+//   // .drag-component {
+//   //   position: relative;
+//   //   &::before {
+//   //     content: '';
+//   //     position: absolute;
+//   //     top: 0;
+//   //     display: block;
+//   //     width: 100%;
+//   //     height: 1px;
+//   //     background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+//   //     opacity: 0.5;
+//   //   }
+//   //   &::after {
+//   //     content: '';
+//   //     position: absolute;
+//   //     bottom: 0;
+//   //     display: block;
+//   //     width: 100%;
+//   //     height: 1px;
+//   //     background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+//   //     opacity: 0.5;
+//   //   }
+//   //   >div {
+//   //     background: rgba(255,255,255, .1);
+//   //     backdrop-filter: blur(4px);
+//   //   }
+//   // }
+// }
+.drag-component {
+  width: 100%;
+  height: 100%;
+  // 不裁剪卡片 box-shadow，使设计器画布也能预览阴影；滚动下移到组件自身
+  overflow: visible;
+  >.epx-dashboard__component {
+    height: 100%;
+    // 自身内容溢出仍滚动；元素自身 box-shadow 不受自身 overflow 裁剪
+    overflow: auto;
+  }
+  >:not(.epx-chart)  {
+    pointer-events: none;
+  }
+}
+// 操作条按钮：横排在 epx-dashboard-design-item__operates 里
+.component-operate__item {
+  display: block;
+  font-size: var(--epx-font-size-base);
+  color: #fff;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  margin: 2px 0;
+}
+.componnet-dropdown {
+  .component-operate__item {
+    width: 20px;
+    margin-top: 0;
+  }
+}
+.null-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.add-component-btn {
+  background: var(--epx-bg-card);
+  width: 240px;
+  height: 240px;
+  margin: 0 20px;
+  border-radius: var(--epx-radius-l);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--epx-font-size-l);
+  color: #444;
+  i {
+    font-size: 56px;
+  }
+  &:hover {
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
+  }
+}
+</style>