exhibition_service_admin/src/views/components/packetList.vue

<script lang="ts">
import Vue from 'vue'
import { getVerList, getPackList } from '@/api/system'
export default Vue.extend({
  name: 'PacketList',
  data() {
    return {
      cycle: 'month',
      showDetail: false,
      type: 'expoReg',
      verList: [],
      packetList: [],
      payCenterUrl: '',
      renderInfo: {
        STARTER: {
          price: 0,
          url: '',
          button: '立即订购'
        },
        PRO: {
          price: 0,
          url: '',
          button: '立即订购'
        }
      },
      packetData: {
        invitation: false,
        expo: false
      }
    }
  },
  computed: {
    user() { return this.$store.state.user.user }
  },
  mounted() {
    this.init()
  },
  methods: {
    close() {
      this.$emit('close')
    },
    init() {
      this.payCenterUrl = process.env.VUE_APP_PAY_CENTER_URL
      getVerList().then(res => {
        this.verList = res.data
        return getPackList('')
      }).then(res2 => {
        this.packetList = res2.data
        this.computeInfo()
      })
      setTimeout(() => {
        try {
          const permissions = this.user.permission
          if (permissions.includes('expo_invitation_management')) {
            this.packetData.invitation = true
          }
          if (permissions.includes('expo_management')) {
            this.packetData.expo = true
          }
        } catch (e) {
        }
      }, 0)
    },
    computeInfo() {
      let basePacket = ''
      let FullBasePacket = ''
      try {
        basePacket = this.user.app_list[0].ver_key.replace(/_STARTER|_PRO|_MONTH|_YEAR/gi, '')
        FullBasePacket = this.user.app_list[0].ver_key.replace(/_MONTH|_YEAR/gi, '')
        console.log(basePacket, FullBasePacket)
      } catch (e) {
      }
      if (this.type === 'expoReg') {
        if (basePacket === 'EXPOREG_INVITATION') {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_STARTER_MONTH_PACKAGE').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '升级权益' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_STARTER_MONTH_PACKAGE&type=2'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_PRO_MONTH_PACKAGE').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '升级权益' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_PRO_MONTH_PACKAGE&type=2'
          } else {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_STARTER_YEAR_PACKAGE').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '升级权益' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_STARTER_YEAR_PACKAGE&type=2'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_PRO_YEAR_PACKAGE').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '升级权益' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_PRO_YEAR_PACKAGE&type=2'
          }
        } else {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_STARTER_MONTH').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_STARTER_MONTH&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_PRO_MONTH').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_PRO_MONTH&packet_key=&type=1'
          } else {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_STARTER_YEAR').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_STARTER_YEAR&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_PRO_YEAR').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_PRO_YEAR&packet_key=&type=1'
          }
        }
      } else {
        if (basePacket === 'EXPOREG_INVITATION') {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_INVITATION_STARTER_MONTH_PACKAGE').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_STARTER_MONTH&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_INVITATION_PRO_MONTH_PACKAGE').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_PRO_MONTH&packet_key=&type=1'
          } else {
            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_INVITATION_STARTER_YEAR_PACKAGE').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_STARTER_YEAR&packet_key=&type=1'
            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_INVITATION_PRO_YEAR_PACKAGE').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_PRO_YEAR&packet_key=&type=1'
          }
        } else {
          if (this.cycle === 'month') {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_INVITATION_STARTER_MONTH').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '升级权益' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_STARTER_MONTH_PACKAGE&type=2'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_INVITATION_PRO_MONTH').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '升级权益' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_PRO_MONTH_PACKAGE&type=2'
          } else {
            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_INVITATION_STARTER_YEAR').price
            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '升级权益' : '续费'
            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_STARTER_YEAR_PACKAGE&type=2'
            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_INVITATION_PRO_YEAR').price
            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '升级权益' : '续费'
            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_PRO_YEAR_PACKAGE&type=2'
          }
        }
      }
    },
    getPacktByKey(key) {
      return this.verList.find(item => item.ver_key === key)
    },
    getPacketByPKey(Key) {
      return this.packetList.find(item => item.packet_key === Key)
    },
    changeCycle(cycle) {
      this.cycle = cycle
      this.computeInfo()
    },
    changeType(type) {
      this.type = type
      this.computeInfo()
    },
    changeDetail() {
      this.showDetail = !this.showDetail
    }
  }
})
</script>

<template>
  <div class="packet-list">
    <div class="close el-icon-close" @click="close" />
    <div class="tab-list">
      <div class="cycle-tab">
        <div :class="['cycle-item',cycle==='month'?'active':'']" @click="changeCycle('month')">按月支付</div>
        <div :class="['cycle-item',cycle==='year'?'active':'']" @click="changeCycle('year')">按年支付</div>
      </div>
      <template>
        <div class="hr" />
        <div class="cycle-tab">
          <div :class="['cycle-item',type==='expoReg'?'active':'']" @click="changeType('expoReg')">
            <div>展会预登记</div>
            <div class="badge" v-if="packetData.expo">已订购</div>
          </div>
          <div :class="['cycle-item',type==='invitation'?'active':'']" @click="changeType('invitation')">
            <div>签证邀请函</div>
            <div class="badge" v-if="packetData.invitation">已订购</div>
          </div>
        </div>
      </template>
    </div>
    <div class="packet-outer">
      <div :class="['packet',showDetail?'':'hide']">
        <div class="list-head list">
          <div class="detail" />
          <div class="head">
            <div class="name">标准版</div>
            <div class="info">快速轻松地创建高转化率的落地页</div>
          </div>
          <div class="head">
            <div class="name">专业版</div>
            <div class="info">最受欢迎</div>
          </div>
          <div class="head">
            <div class="name">定制版</div>
            <div class="info">根据您组织的独特结构、工作流程和客户需求定制方案</div>
          </div>
        </div>
        <div class="list-price list">
          <div class="detail" />
          <div class="price-cont">
            <div class="price">
              ¥<span>{{ renderInfo.STARTER.price }}</span>/{{ cycle==='month'?'月':'年' }}
            </div>
            <a :href="renderInfo.STARTER.url" target="_blank" class="button">{{ renderInfo.STARTER.button }}</a>
          </div>
          <div class="price-cont">
            <div class="price">
              ¥<span>{{ renderInfo.PRO.price }}</span>/{{ cycle==='month'?'月':'年' }}
            </div>
            <a :href="renderInfo.PRO.url" target="_blank" class="button">{{ renderInfo.PRO.button }}</a>
          </div>
          <div class="price-cont">
            <div class="price">联系我们获取定制价格</div>
            <el-popover
              placement="bottom"
              width="360"
              trigger="click">
              <div style="text-align: center">联系销售专员获取专属定制价格</div>
              <img style="width: 100%" src="/static/image/qrcode.png" alt="">
              <div style="text-align: center">微信扫一扫</div>
              <div slot="reference" class="button">立即联系</div>
            </el-popover>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="title">功能介绍</div>
          </div>
          <div class="func-cont">
            <div class="title">核心功能：</div>
          </div>
          <div class="func-cont">
            <div class="title">核心功能：</div>
          </div>
          <div class="func-cont">
            <div class="title">核心功能：</div>
          </div>
        </div>
        <template v-if="type==='expoReg'">
          <div class="list-func list">
            <div class="detail">
              <div class="text">快速构建高转化率、移动响应式落地页，提升潜在客户、注册量和销售额，无需开发人员。</div>
            </div>
            <div class="func-cont">
              <div class="text">5个预登记落地页</div>
            </div>
            <div class="func-cont">
              <div class="text">无限预登记落地页</div>
            </div>
            <div class="func-cont">
              <div class="text">无限预登记落地页</div>
            </div>
          </div>
          <div class="list-func list">
            <div class="detail">
              <div class="text">美页易搭提供展会预登记模板，含访客信息、参展需求等预设字段，支持自定义表单内容与样式，快速搭建高效登记页面，助力提前锁定参展人群。</div>
            </div>
            <div class="func-cont">
              <div class="text">可选3个模板</div>
            </div>
            <div class="func-cont">
              <div class="text">可选模板不限</div>
            </div>
            <div class="func-cont">
              <div class="text">可选模板不限</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="list-func list">
            <div class="detail">
              <div class="text">美页易搭邀请函功能可发起活动、会议等邀约，支持自定义内容、添加报名表单，还能分享至社交平台并追踪打开与转化数据，提升参与度。</div>
            </div>
            <div class="func-cont">
              <div class="text">1个会议邀请函</div>
            </div>
            <div class="func-cont">
              <div class="text">无限会议邀请函</div>
            </div>
            <div class="func-cont">
              <div class="text">无限会议邀请函</div>
            </div>
          </div>
          <div class="list-func list">
            <div class="detail">
              <div class="text">美页易搭提供多场景邀请函模板（活动、会议、聚会等），支持自定义文字、图片与关键信息，快速搭建美观邀请函，降低制作成本。</div>
            </div>
            <div class="func-cont">
              <div class="text">可选2个模板</div>
            </div>
            <div class="func-cont">
              <div class="text">可选模板不限</div>
            </div>
            <div class="func-cont">
              <div class="text">可选模板不限</div>
            </div>
          </div>
        </template>
        <div class="list-func list">
          <div class="detail">
            <div class="text">美页易搭不会限制您的增长——每个方案都包含无限流量和转化次数。每次访客完成您的目标（例如，在落地页、网站、弹出窗口或提醒栏上点击号召性用语或提交潜在客户表单）时，都会计为一次转化。</div>
          </div>
          <div class="func-cont">
            <div class="text">无限流量和潜在客户</div>
          </div>
          <div class="func-cont">
            <div class="text">无限流量和潜在客户</div>
          </div>
          <div class="func-cont">
            <div class="text">无限流量和潜在客户</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">允许将服务或平台与一个自主定义的域名进行关联绑定，能增强品牌的独特性与辨识度，让用户通过专属域名更便捷地访问相关内容，同时也有助于品牌形象的统一塑造与传播。</div>
          </div>
          <div class="func-cont">
            <div class="text">连接1个自定义域名</div>
          </div>
          <div class="func-cont">
            <div class="text">连接3个自定义域名</div>
          </div>
          <div class="func-cont">
            <div class="text">更多自定义域名</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">遵循通用且规范的集成标准，可实现与其他系统、平台或工具的顺畅对接与融合，保障数据、功能等在不同系统间高效流转与协同工作，提升整体业务流程的连贯性与运营效率。</div>
          </div>
          <div class="func-cont">
            <div class="text">标准集成</div>
          </div>
          <div class="func-cont">
            <div class="text">高级集成</div>
          </div>
          <div class="func-cont">
            <div class="text">高级集成</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">具备社交媒体分享功能，能便捷地将相关内容、产品信息等分享至各类社交平台，借助社交网络的传播力，扩大内容的覆盖范围，吸引更多用户关注，助力流量增长与品牌传播。</div>
          </div>
          <div class="func-cont">
            <div class="text">社媒分享</div>
          </div>
          <div class="func-cont">
            <div class="text">社媒分享</div>
          </div>
          <div class="func-cont">
            <div class="text">社媒分享</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">通过 UTM（Urchin Tracking Module）参数，可精准追踪网络营销活动的流量来源、媒介、内容等信息，为营销人员提供详细的数据分析依据，便于优化营销投放策略，提升营销效果与投资回报率。</div>
          </div>
          <div class="func-cont">
            <div class="text">UTM追踪</div>
          </div>
          <div class="func-cont">
            <div class="text">UTM追踪</div>
          </div>
          <div class="func-cont">
            <div class="text">UTM追踪</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">限定该服务或平台仅支持 1 个用户使用，适用于个人独立操作或小型单一用户场景，能保障该用户对相关资源与功能的专属使用权。</div>
          </div>
          <div class="func-cont">
            <div class="text">1个用户</div>
          </div>
          <div class="func-cont">
            <div class="text">2个用户</div>
          </div>
          <div class="func-cont">
            <div class="text">定制</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">AI 翻译功能，实现借助人工智能技术对不同语言内容进行自动翻译的操作。</div>
          </div>
          <div class="func-cont">
            <div class="text">AI翻译功能：❌</div>
          </div>
          <div class="func-cont">
            <div class="text">AI翻译功能：✔️</div>
          </div>
          <div class="func-cont">
            <div class="text">AI翻译功能：✔️</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">支持去除易搭标识，相关内容或界面会带有易搭标识呈现。</div>
          </div>
          <div class="func-cont">
            <div class="text">去除易搭标识：❌</div>
          </div>
          <div class="func-cont">
            <div class="text">去除易搭标识：✔️</div>
          </div>
          <div class="func-cont">
            <div class="text">去除易搭标识：✔️</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">识别您的匿名流量——他们是谁、他们来自哪里，以及他们如何与您的网站和落地页互动，这样您就可以了解哪些人访问了您的页面但尚未转化。使用 Audience Insights，您可以定制您的信息传递方式、检查广告定位，并更好地了解您的受众。</div>
          </div>
          <div class="func-cont">
            <div class="text">受众洞察：❌</div>
          </div>
          <div class="func-cont">
            <div class="text">受众洞察：✔️</div>
          </div>
          <div class="func-cont">
            <div class="text">受众洞察：✔️</div>
          </div>
        </div>
        <div class="list-func list">
          <div class="detail">
            <div class="text">如果您是服务于多个客户的代理机构或顾问，美页易搭可让您轻松通过单个帐户管理多个品牌。您可以对广告系列进行分组，授予客户子帐户访问权限，并在帐户之间复制落地页、网站、弹窗和警报栏。</div>
          </div>
          <div class="func-cont">
            <div class="text" />
          </div>
          <div class="func-cont">
            <div class="text" />
          </div>
          <div class="func-cont">
            <div class="text">添加客户子账户</div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-cont">
      <div class="button" @click="changeDetail">{{ showDetail?'显示更少':'显示更多' }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .packet-list{
    position: relative;
    padding: 16px;
    width: 90%;
    height: 90%;
    background-color: white;
    border-radius: 8px;
    grid-gap: 16px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    .tab-list{
      margin-top: 36px;
      gap: 8px;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      .hr{
        width: 240px;
        height: 2px;
        background-color: lightgray;
      }
    }
    .button-cont{
      display: flex;
      justify-content: center;
      .button{
        user-select: none;
        color: #2563EB;
        cursor: pointer;
        transition-duration: 300ms;
        border-radius: 24px;
        border: 1px solid #2563EB;
        outline: 2px solid #2563EB00;
        padding: 8px 16px;
        &:hover{
          outline: 2px solid #2563EBFF;
        }
      }
    }
    .packet-outer{
      position: relative;
      .packet{
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
        overflow-y: auto;
        position: absolute;
        .list-head{
          z-index: 1;
          position: sticky;
          top: 0;
          background-color: white;
          .detail{

          }
        }
        &.hide{
          .list{
            grid-template-columns: 0fr 340px 340px 340px;
            .detail{
              grid-template-rows: 0fr;
              grid-template-columns: 0fr;
            }
          }
        }
        .list{
          transition-duration: 300ms;
          margin: auto;
          display: grid;
          gap: 16px;
          justify-content: center;
          grid-template-columns: 1fr 340px 340px 340px;
          &:last-child{
            .func-cont{
              border-bottom: 2px solid #E3E4E6;
              border-radius: 0 0 16px 16px;
            }
          }
          &.list-func:hover{
            div{
              background-color: #f8f8f8;
            }
          }
          .detail{
            transition-duration: 300ms;
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            overflow: hidden;
            .title{
              width: calc(90vw - 1100px);
              min-height: 0;
              font-weight: bold;
              text-align: center;
            }
            .text{
              width: calc(90vw - 1100px);
              min-height: 0;
              padding: 16px;
              font-size: 16px;
              border-bottom: 1px solid #E3E4E6;
            }
          }
          .func-cont{
            padding: 0 16px;
            border-left: 2px solid #E3E4E6;
            border-right: 2px solid #E3E4E6;
            .text{
              position: sticky;
              top: 136px;
              font-size: 16px;
            }
            .title{
              font-weight: bold;
            }
          }
          .price-cont{
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 16px;
            padding-top: 8px;
            border-left: 2px solid #E3E4E6;
            border-right: 2px solid #E3E4E6;
            .button{
              color: black;
              text-decoration: none;
              font-weight: bold;
              border-radius: 4px;
              border: 1px solid black;
              padding: 8px;
              text-align: center;
              transition-duration: 300ms;
              &:hover{
                cursor: pointer;
                border: 1px solid #2563EB;
                background-color: #2563EB;
                color: white;
              }
            }
            .price{
              margin-bottom: 8px;
              text-align: center;
              span{
                font-size: 48px;
                font-weight: bold;
              }
            }
          }
          .head{
            border: 2px solid #E3E4E6;
            border-radius: 16px 16px 0 0;
            padding: 16px;
            text-align: center;
            background-color: #F2F5FA;
            .name{
              font-size: 24px;
              font-weight: bold;
            }
            .info{
              margin-top: 8px;
              color: #7E7E7E;
              font-size: 16px;
            }
          }
        }
      }

    }
    .cycle-tab{
      gap: 16px;
      display: flex;
      justify-content: center;
      .cycle-item{
        gap: 6px;
        color: #2563EB;
        cursor: pointer;
        transition-duration: 300ms;
        border-radius: 24px;
        border: 1px solid #2563EB;
        outline: 2px solid #2563EB00;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        .badge{
          border: 1px solid #C4A793;
          font-size: 12px;
          background-image: linear-gradient(60deg,#EAD5C3,#C7A088);
          padding: 1px 6px;
          font-weight: normal;
          color: #543317;
          border-radius: 12px;
        }
        &:hover{
          outline: 2px solid #2563EBFF;
        }
        &.active{
          font-weight: bold;
          background-color: #2563EB;
          color: white;
        }
      }
    }
    .close{
      font-size: 24px;
      right: 8px;
      top: 8px;
      position: absolute;
      padding: 8px;
      cursor: pointer;
      transition-duration: 300ms;
      &:hover{
        border-radius: 4px;
        background-color: #ededed;
      }
    }
  }
</style>