web_sh_audit/src/components/layout/MenuCard.vue

<template>
  <!-- 外边框 -->
  <div
    ref="menuCard"
    v-loading="!menuData"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :class="$ifLeftMenu(menuData.title != undefined ? menuData.title : '') ? 'menuMainBoxA' : 'menuMainBox'"
    :style="{
      width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
      height: menuData.boxHeight ? menuData.boxHeight + 'px' : 'auto',
      border: menuData.type !== 'chart' && menuData.type !== 'legend' ? '' : '1px solid #2FB8FF',
      background: menuData.boxBackground ? menuData.boxBackground : ''
    }"
    @click="changeMenu()"
  >
    <!-- 头部 -->
    <div class="menuMainBox_top" v-if="menuData.type !== 'chart' && menuData.type !== 'legend'">
      <!-- 头部左侧 -->
      <div class="menuMainBox_top_left" :style="{ width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%' }">
        <!-- 左侧箭头图标 -->
        <div class="menuMainBox_top_left_iconS" v-if="menuData.type !== 'imageMenu'"></div>
        <div class="menuMainBox_top_left_iconR" v-if="menuData.type === 'imageMenu'">
          <div
            class="menuMainBox_top_left_iconR_active"
            v-if="$ifLeftMenu(menuData.index != undefined ? menuData.title : '')"
          ></div>
        </div>
        <!-- 标题 -->
        <div class="menuMainBox_top_left_title">{{ menuData.title }}</div>
        <!-- 右侧倾斜图标1 -->
        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
        <!-- 右侧倾斜图标2 -->
        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
      </div>
      <!-- 右侧两个倾斜方框 -->
      <div class="menuMainBox_top_right" :style="{ width: menuData.titleWidth ? 110 - menuData.titleWidth + '%' : '60%' }">
        <!-- 方块1 -->
        <div class="menuMainBox_top_right_d1"></div>
        <!-- 方块2 -->
        <div class="menuMainBox_top_right_d2"></div>
      </div>
      <!-- 右上角三个点（蓝橙蓝） -->
      <div class="menuMainBox_top_topRight">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- 头部下的折线 -->
    <div
      class="menuMainBox_topBottom"
      v-if="menuData.type !== 'chart' && menuData.type !== 'legend'"
      :style="{
        left: menuData.titleWidth
          ? (menuData.titleWidth <= 40 ? menuData.titleWidth - 39 : menuData.titleWidth - 40) + '%'
          : '10%'
      }"
    >
      <!-- 折线右上角圆球 -->
      <div></div>
    </div>
    <div class="menuMainBox_topChart" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
      <div class="menuMainBox_topChart_title">
        {{ menuData.title }}
      </div>
    </div>
    <!-- -------------------------------------------------主题------------------------------------------ -->
    <div class="menuMainBox_main" v-if="menuData.type === 'card'">
      <!-- 上部 -->
      <div class="menuMainBox_main_top" v-if="!menuData.topSolt">
        <slot name="top"></slot>
      </div>
      <div class="menuMainBox_main_top" v-if="menuData.topSolt">
        <TagTableCard
          v-if="menuData.topSolt.commonName == 'TagTableCard'"
          :echartData="menuData.topSolt.commonData"
          @changeMousemoveIndex="changeMousemoveIndex"
        />
        <div class="menuCardFlex" v-if="menuData.topSolt.commonName == 'TagCard'" :style="{justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center'}">
          <TagCard
            v-for="(item, index) in menuData.topSolt.commonData"
            :data="item"
            :index="index"
            :chartCardDataIndex="chartCardDataIndex"
            :key="item.title"
            @changeMousemoveIndex="changeMousemoveIndex"
          />
        </div>
      </div>
      <!-- 下部 -->
      <div class="menuMainBox_main_bottom" v-if="!menuData.bottomSolt">
        <slot name="bottom"></slot>
      </div>
      <div class="menuMainBox_main_bottom" v-if="menuData.bottomSolt">
        <ChartCard
          v-if="menuData.bottomSolt.commonName == 'ChartCard'"
          :title="menuData.topSolt.commonData[chartCardDataIndex].title"
          :categoryData="menuData.topSolt.commonData[chartCardDataIndex].categoryData"
          :valueData="menuData.topSolt.commonData[chartCardDataIndex].valueData"
        />
      </div>
    </div>
    <div class="menuMainBox_main" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
      <div class="menuMainBox_main_all" v-if="!menuData.topSolt && !menuData.bottomSolt">
        <slot></slot>
      </div>
    </div>
    <div class="menuMainBox_main_image" v-if="menuData.type === 'imageMenu'">
      <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
    </div>
    <!-- 图例属性显示区域 -->
    <div v-if="menuData.type === 'legend'" class="legend"></div>
  </div>
</template>

<script>
/**
 * 模块通用组件（首页和其他页面都有用到，由于综合功能和适配场景较多，配置组合可以联系开发人员:LiuMengxiang）
 * @author: LiuMengxiang
 * @Date: 2022年11月14-18日
 */
import TagTableCard from "@/components/common/TagTableCard.vue";
import ChartCard from "@/components/common/ChartCard.vue";
import TagCard from "@/components/common/TagCard.vue";
export default {
  name: "menuCard",
  components: { TagTableCard, ChartCard, TagCard },
  data() {
    return {
      chartCardDataIndex: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 只有第一次创建该页面，或刷新页面时。
      if (this.menuData.menuIndex) {
        if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
          // 立即修改display为block
          this.$refs.menuCard.style.display = "block";
          setTimeout(() => {
            this.$refs.menuCard.style.transform = "translate(0,0)";
            this.$refs.menuCard.style.opacity = "0.9";
          });
        } else {
          // 如果不符合，页面创建时就直接隐藏
          this.$refs.menuCard.style.display = "none";
        }
      }
      // 当容器创建完成时，监听窗口改变大小时间
      this.$bus.$on("windowOnresize", this.windowOnresize);
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("windowOnresize");
  },
  /**
   * 公共card组件，接收参数如下：
   * menuData =>
   * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
   * title: 标题（必填）
   *
   * index: 子菜单index（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
   * imageUrl: 菜单图片地址（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
   *
   * menuIndex: 显示头部菜单对应index（显示隐藏优化，组合属性）
   * subMenuIndex: 显示头部菜单对应subIndex（显示隐藏优化，组合属性）
   * minDomWidth: 最小屏幕宽度自动隐藏【单位：Number】（显示隐藏优化，组合属性）
   * position: 动画位置【left\right\top\bottom】（显示隐藏优化，组合属性）
   *
   * boxWidth: 宽，默认为410px【单位：Number】（非必填）
   * boxHeight: 高，默认为auto【单位：Number】（非必填）
   * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
   * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
   * gotoPageInfo: 动态跳转页面信息（非必填）=>{index:要跳转的菜单index，subIndex：要跳转的子菜单index，name：菜单名称}
   *
   * topSolt: 头部替换插槽组件信息（非必填）=>{commonName：组件名称，commonData：组件支撑数据}
   * bottomSolt: 底部替换插槽组件信息（非必填）=>{commonName:组件名称，commonData：组件支撑数据}
   *
   */
  props: ["menuData"],
  methods: {
    // 当用户使用光标切换交互组件时触发
    changeMousemoveIndex(index) {
      if (this.chartCardDataIndex != index) {
        this.chartCardDataIndex = index;
      }
    },
    // 用户点击菜单标题时，调用全局函数，根据全局暂存对象
    changeMenu() {
      if (this.menuData != undefined && this.menuData.index != undefined && this.menuData.title != undefined) {
        this.$store.commit("changeLeftMenuTitle", this.menuData.title);
        if(this.menuData.menuIndex != undefined && this.menuData.subMenuIndex != undefined) {
          this.$store.commit("changeBackMenu", {index: this.menuData.menuIndex,subIndex: this.menuData.subMenuIndex});
        }
      }
      if (this.menuData != undefined && this.menuData.gotoPageInfo != undefined) {
        this.$store.commit("changeNavSelect", this.menuData.gotoPageInfo);
      }
    },
    // 根据菜单imageURL和boxHeight对象自动生成元素的样式（背景以及高度）
    returnImageUrl(imageUrl, boxHeight) {
      let returnStyle = "";
      if (boxHeight) {
        returnStyle += "heihgt:" + (boxHeight - 36) + "px;";
      }
      returnStyle += "background-image: url('" + imageUrl + "');";
      return returnStyle;
    },
    // 组件显示隐藏时，动画样式返回。
    showChange() {
      if (this.menuData != undefined && this.menuData.menuIndex != undefined) {
        if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
          // 立即修改display为block
          this.$refs.menuCard.style.display = "block";
          setTimeout(() => {
            this.$refs.menuCard.style.transform = "translate(0,0)";
            this.$refs.menuCard.style.opacity = "0.9";
          });
        } else {
          // 延迟0.3s后修改display为none
          this.$refs.menuCard.style.transform = this.positionTotransform();
          this.$refs.menuCard.style.opacity = "0";
          setTimeout(() => {
            this.$refs.menuCard.style.display = "none";
          }, 300);
        }
      }
    },
    // 根据组件定位，返回不同的显示隐藏动画位置
    positionTotransform() {
      switch (this.menuData.position) {
        case "left":
          return "translate(-50%,0)";
        case "right":
          return "translate(50%,0)";
        case "top":
          return "translate(0,-50%)";
        case "bottom":
          return "translate(0,50%)";
        default:
          return "translate(0,0)";
      }
    },
    windowOnresize(windowClient) {
      // console.log("windowOnresize", windowClient);
      try {
        if (
          windowClient.windowsWidth != undefined &&
          this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex) &&
          this.menuData.minDomWidth != null
        ) {
          if (
            this.menuData.minDomWidth < windowClient.windowsWidth &&
            this.$refs.menuCard != undefined &&
            this.$refs.menuCard.style.display == "none"
          ) {
            // 立即修改display为block
            this.$refs.menuCard.style.display = "block";
            setTimeout(() => {
              this.$refs.menuCard.style.transform = "translate(0,0)";
              this.$refs.menuCard.style.opacity = "0.9";
            }, 300);
          } else if (
            this.menuData.minDomWidth > windowClient.windowsWidth &&
            this.$refs.menuCard != undefined &&
            this.$refs.menuCard.style.display == "block"
          ) {
            // 延迟0.3s后修改display为none
            this.$refs.menuCard.style.transform = this.positionTotransform();
            this.$refs.menuCard.style.opacity = "0";
            setTimeout(() => {
              this.$refs.menuCard.style.display = "none";
            }, 300);
          }
        }
      } catch (error) {
        console.error("MenuCard组件出现异常：", error);
      }
    }
  },
  watch: {
    "$store.state.navSelect": {
      handler() {
        this.$nextTick(() => {
          this.showChange();
        });
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
@borderColor: #00aaff;
@borderColor32: #00aaff32;
@borderColor64: #00aaff64;
@topTitleBgLeft: #002645;
@topTitleMinLeft: #002f56;
@lightColor: #74ffff;
.menuMainBox,
.menuMainBoxA {
  transition: all 0.3s;
}
.menuMainBox {
  position: relative;
  z-index: 999;
  margin: 10px 5px;
  min-height: 60px;
  border: 2px solid transparent;
  border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
  border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
  border-image: linear-gradient(to top, @borderColor, transparent) 1;
  &:hover {
    border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
    border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
    border-image: linear-gradient(to top, @lightColor, transparent) 1;
    .menuMainBox_top {
      background-color: @lightColor;
      &_left {
        background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
        background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
        background-image: linear-gradient(to left, @lightColor, #007dff);
      }
    }
  }
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  //   type !== chart
  &_top {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    background-color: @topTitleMinLeft;
    &_left {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      height: 100%;
      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      border-bottom: 2px solid @borderColor;
      &_iconS {
        margin: 10px;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0071b2, #1deef5);
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
      }
      &_iconR {
        position: relative;
        margin: 15px;
        width: 10px;
        height: 10px;
        background-image: transparent;
        border: 1px solid #1deef5;
        border-radius: 20px;
        &_active {
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          background-color: #1deef5;
          border-radius: 20px;
        }
      }
      &_title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      &_iconE {
        position: absolute;
        margin-left: 10px;
        width: 15px;
        height: 30px;
        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
        transform: skew(-45deg);
      }
      &_iconE1 {
        right: 27px;
      }
      &_iconE2 {
        right: 7px;
      }
    }
    &_right {
      position: absolute;
      right: -10%;
      height: 100%;
      border-top: 2px solid @borderColor;
      border-left: 2px solid @borderColor;
      transform: skew(-45deg);
      background-color: @topTitleBgLeft;
      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      &_d1 {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 20px;
        background-color: @borderColor64;
      }
      &_d2 {
        position: absolute;
        left: 70px;
        width: 80px;
        height: 10px;
        background-color: @borderColor32;
      }
    }
    &_topRight {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      div:nth-child(1) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
      div:nth-child(2) {
        margin: 0 1px;
        width: 5px;
        height: 2px;
        background-color: #f19b56;
      }
      div:nth-child(3) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
    }
  }
  &:hover {
    .menuMainBox_main_image_box {
      background-size: 110% 220px;
    }
  }
}
// 选中后的样式
.menuMainBoxA {
  position: relative;
  z-index: 999;
  margin: 10px 5px;
  min-height: 60px;
  border: 2px solid transparent;
  border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
  border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
  border-image: linear-gradient(to top, @lightColor, transparent) 1;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  //   type !== chart
  .menuMainBox_top {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    background-color: @lightColor;
    &_left {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      height: 100%;
      border-bottom: 2px solid @borderColor;
      background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
      background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
      background-image: linear-gradient(to left, @lightColor, #007dff);
      &_iconS {
        margin: 10px;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0071b2, #1deef5);
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
      }
      &_iconR {
        position: relative;
        margin: 15px;
        width: 10px;
        height: 10px;
        background-image: transparent;
        border: 1px solid #1deef5;
        border-radius: 20px;
        &_active {
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          background-color: #1deef5;
          border-radius: 20px;
        }
      }
      &_title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      &_iconE {
        position: absolute;
        margin-left: 10px;
        width: 15px;
        height: 30px;
        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
        transform: skew(-45deg);
      }
      &_iconE1 {
        right: 27px;
      }
      &_iconE2 {
        right: 7px;
      }
    }
    &_right {
      position: absolute;
      right: -10%;
      height: 100%;
      border-top: 2px solid @borderColor;
      border-left: 2px solid @borderColor;
      transform: skew(-45deg);
      background-color: @topTitleBgLeft;
      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      &_d1 {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 20px;
        background-color: @borderColor64;
      }
      &_d2 {
        position: absolute;
        left: 70px;
        width: 80px;
        height: 10px;
        background-color: @borderColor32;
      }
    }
    &_topRight {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      div:nth-child(1) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
      div:nth-child(2) {
        margin: 0 1px;
        width: 5px;
        height: 2px;
        background-color: #f19b56;
      }
      div:nth-child(3) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
    }
  }
  &:hover {
    .menuMainBox_main_image_box {
      background-size: 110% 220px;
    }
  }
}
// 公共样式
.menuMainBox_topBottom {
  position: absolute;
  top: 20px;
  width: 38%;
  height: 20px;
  border-bottom: 2px solid @borderColor;
  border-right: 2px solid @borderColor;
  transform: skew(-45deg);
  border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
  border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
  border-image: linear-gradient(to left, @borderColor, transparent) 1;
  z-index: 9999;
  div {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: @borderColor;
    transform: skew(45deg);
  }
}
//   type === chart
.menuMainBox_topChart {
  width: 100%;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  &_title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 300;
    color: #e6e6e6;
    line-height: 60px;
  }
}
// 卡片主题
.menuMainBox_main {
  position: relative;
  padding-top: 10px;
  width: 100%;
  height: calc(100% - 30px);
  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  &_top {
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  &_bottom {
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  &_all {
    margin: 0 10px;
    width: calc(100% - 20px);
    height: calc(100% - 10px);
  }
  &_image {
    margin: 0px 10px;
    width: calc(100% - 20px);
    height: 210px;
    background-size: 100% 200px;
    background-repeat: no-repeat;
  }
}

// 卡片主题
.menuMainBox_main_image {
  position: relative;
  margin: 0;
  width: 100%;
  height: calc(100% - 30px);
  &_box {
    width: 100%;
    height: 200px;
    background-size: 100% 200px;
    background-repeat: no-repeat;
    transition: all 0.3s;
  }
}

// 图例上部图片
.legend {
  position: absolute;
  left: -2px;
  top: -13px;
  width: 104px;
  height: 20px;
  background: url("../../assets/home/legend_line.png") no-repeat center;
}
// tagcard
.menuCardFlex {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
  .borders {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 110px;
    height: 100px;
    background: linear-gradient(to left, @borderColor, @borderColor) left top no-repeat,
      linear-gradient(to bottom, @borderColor, @borderColor) left top no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) right top no-repeat,
      linear-gradient(to bottom, @borderColor, @borderColor) right top no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) left bottom no-repeat,
      linear-gradient(to bottom, @borderColor, @borderColor) left bottom no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) right bottom no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) right bottom no-repeat;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
  }
}
</style>