公共card组件支持图例类型，头部第一层样式修改，添加自适应隐藏功能。

src/App.vue

@@ -1,11 +1,30 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    window.onresize = () => {
+      return (() => {
+        // 为了对应不同的应用场景，添加了两种触发方式（全局变量缓存、全局事件总线）
+        this.$store.commit("changeWindowsSize", document.body.clientWidth, document.body.clientHeight);
+        this.$bus.$emit("windowOnresize", {
+          windowsWidth: document.body.clientWidth,
+          widthsHeight: document.body.clientHeight
+        });
+      })();
+    };
+  }
+};
+</script>
 <style scoped>
-#app{
+#app {
   border: 0px;
   margin: 0px;
   width: 100%;

src/components/layout/Header.vue

@@ -1,15 +1,19 @@
 <template>
   <div id="layoutHeader">
     <el-row>
-      <el-col :span="9">
+      <el-col :span="9" v-show="$store.state.windowsSize.width >= 1300" class="logoBox">
+        <div class="logo"></div>
+        <div class="title">浦东新区资源环境智慧审计平台</div>
+      </el-col>
+      <el-col :span="9" v-show="$store.state.windowsSize.width < 1300" class="logoBox">
         <div class="logo"></div>
-        <div class="title">浦 东 新 区 资 源 环 境 智 慧 审 计 平 台</div>
       </el-col>
       <el-col :span="12">
         <el-menu
           :default-active="getActiveIndex()"
           class="el-menu-demo"
           mode="horizontal"
+          active-text-color="#74FFFF"
           @select="select"
         >
           <el-menu-item index="1">首页</el-menu-item>
@@ -63,8 +67,8 @@ export default {
         4: "全流程管理",
         "5-1": "法律法规",
         "5-2": "频发问题",
-        "5-3": "指标体系",
-      },
+        "5-3": "指标体系"
+      }
     };
   },
   mounted() {},
@@ -73,11 +77,7 @@ export default {
     getActiveIndex() {
       if (this.$store.state.navSelect) {
         if (this.$store.state.navSelect.subIndex) {
-          return (
-            this.$store.state.navSelect.index +
-            "-" +
-            this.$store.state.navSelect.subIndex
-          );
+          return this.$store.state.navSelect.index + "-" + this.$store.state.navSelect.subIndex;
         } else {
           return this.$store.state.navSelect.index;
         }
@@ -92,10 +92,10 @@ export default {
       that.$emit("navSelect", {
         index: index[0],
         subIndex: index[1],
-        name: name,
+        name: name
       });
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -106,30 +106,69 @@ export default {
   height: 60px;
   left: 0px;
   top: 0px;
-  background: url("../../assets/home/header_background.png") no-repeat center;
+  // background: url("../../assets/home/header_background.png") no-repeat center;
+  background: linear-gradient(180deg, #4279d2 0%, #0942c0 100%);
   background-size: 100% 100%;
   color: #ffffff;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  .logoBox {
+    display: flex;
+    transform: skew(-45deg);
+    position: relative;
+    left: -40px;
+    height: 60px;
+    background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
+    overflow: hidden;
+    flex-wrap: nowrap;
+    align-content: center;
+  }
   .logo {
     position: relative;
-    left: 50px;
+    transform: skew(45deg);
+    left: calc(1rem + 40px);
     top: 15px;
     width: 30px;
     height: 30px;
     background: url("../../assets/home/header_title_icon.png") no-repeat center;
   }
   .title {
-    position: absolute;
-    left: 50px;
-    top: 0;
+    padding-left: 1rem;
+    transform: skew(45deg);
     line-height: 60px;
     font-size: 28px;
     text-indent: 50px;
     font-weight: bold;
+    font-family: pingfangSC;
   }
 }
 
-.el-menu-demo /deep/ .el-menu-item {
-  font-size: 20px;
+.el-menu-demo /deep/ .el-menu-item,.el-submenu {
+  padding: 0 30px;
+  font-size: 24px;
+  font-family: pingfangSC;
+  font-weight: 400;
+  color: #74ffff;
+  line-height: 60px;
+  border: none !important;
+}
+.el-menu-demo > .is-active {
+  position: relative;
+  &::before {
+    position: absolute;
+    content: "";
+    box-sizing: border-box;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
+    border-bottom: 4px solid rgb(116, 255, 255);
+    transform: skew(-45deg);
+    z-index: -1;
+  }
 }
 .el-menu-demo /deep/ .el-menu-item:hover,
 .el-menu-demo /deep/ .el-menu-item:focus {
@@ -137,13 +176,9 @@ export default {
 }
 #layoutHeader /deep/ .el-submenu__title {
   color: #ffffff !important;
-  font-size: 20px !important;
+  font-size: 24px !important;
 }
-#layoutHeader
-  /deep/
-  .el-menu--horizontal
-  > .el-submenu
-  .el-submenu__title:hover {
+#layoutHeader /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
   background: none;
 }
 #layoutHeader /deep/ .el-submenu__title i {
@@ -179,7 +214,7 @@ export default {
     left: 80px;
     top: 14px;
     background: url("../../assets/home/header_alert.png") no-repeat center;
-    .alert-info{
+    .alert-info {
       width: 25px;
       height: 20px;
       position: absolute;

src/components/layout/MenuCard.vue

@@ -6,13 +6,13 @@
     :style="{
       width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
       height: menuData.boxHeight ? menuData.boxHeight + 'px' : 'auto',
-      border: menuData.type !== 'chart' ? '' : '1px solid #2FB8FF',
+      border: menuData.type !== 'chart' && menuData.type !== 'legend' ? '' : '1px solid #2FB8FF',
       background: menuData.boxBackground ? menuData.boxBackground : ''
     }"
     @click="changeLeftMenuIndex()"
   >
     <!-- 头部 -->
-    <div class="menuMainBox_top" v-if="menuData.type !== 'chart'">
+    <div class="menuMainBox_top" v-if="menuData.type !== 'chart' && menuData.type !== 'legend'">
       <!-- 头部左侧 -->
       <div class="menuMainBox_top_left" :style="{ width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%' }">
         <!-- 左侧箭头图标 -->
@@ -44,13 +44,17 @@
     <!-- 头部下的折线 -->
     <div
       class="menuMainBox_topBottom"
-      v-if="menuData.type !== 'chart'"
-      :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }"
+      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'">
+    <div class="menuMainBox_topChart" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
       <div class="menuMainBox_topChart_title">
         {{ menuData.title }}
       </div>
@@ -66,7 +70,7 @@
         <slot name="bottom"></slot>
       </div>
     </div>
-    <div class="menuMainBox_main" v-if="menuData.type === 'chart'">
+    <div class="menuMainBox_main" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
       <div class="menuMainBox_main_all">
         <slot></slot>
       </div>
@@ -75,7 +79,7 @@
       <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
     </div>
     <!-- 图例属性显示区域 -->
-    <div v-if="menuData.legendShowState" class="legend"></div>
+    <div v-if="menuData.type === 'legend'" class="legend"></div>
   </div>
 </template>
 
@@ -107,22 +111,32 @@ export default {
           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时为必填）
-   * menuIndex: 显示头部菜单对应index（显示隐藏优化）
-   * subMenuIndex: 显示头部菜单对应subIndex（显示隐藏优化）
-   * position: 动画位置【left\right\top\bottom】（显示隐藏优化）
    * imageUrl: 菜单图片地址（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
-   * title: 标题（必填）
+   *
+   * menuIndex: 显示头部菜单对应index（显示隐藏优化，组合属性）
+   * subMenuIndex: 显示头部菜单对应subIndex（显示隐藏优化，组合属性）
+   * minDomWidth: 最小屏幕宽度自动隐藏【单位：Number】（显示隐藏优化，组合属性）
+   * position: 动画位置【left\right\top\bottom】（显示隐藏优化，组合属性）
+   *
    * boxWidth: 宽，默认为410px【单位：Number】（非必填）
    * boxHeight: 高，默认为auto【单位：Number】（非必填）
    * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
    * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
-   * legendShowState: 是否显示左上角锯齿图片【Boolean】
    */
   props: ["menuData"],
   methods: {
@@ -141,6 +155,7 @@ export default {
       returnStyle += "background-image: url('" + imageUrl + "');";
       return returnStyle;
     },
+    // 组件显示隐藏时，动画样式返回。
     showChange() {
       if (this.menuData.menuIndex) {
         if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
@@ -160,6 +175,7 @@ export default {
         }
       }
     },
+    // 根据组件定位，返回不同的显示隐藏动画位置
     positionTotransform() {
       switch (this.menuData.position) {
         case "left":
@@ -173,6 +189,42 @@ export default {
         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: {

src/components/map/Legend.vue

@@ -2,11 +2,10 @@
   <div class="legend">
     <MenuCard
       :menuData="{
-        type: 'chart',
+        type: 'legend',
         title: '图例',
         boxWidth: legendData.boxWidth,
         boxHeight: legendData.boxHeight,
-        legendShowState: true,
         menuIndex: legendData.menuIndex,
         subMenuIndex: legendData.subMenuIndex ? legendData.subMenuIndex : '',
       }"

src/store/index.js

@@ -11,7 +11,9 @@ export default new Vuex.Store({
     // 左侧菜单选中菜单index（主要用于元素判断是否显示）
     leftMenuIndex: -1,
     // 底部菜单选中菜单index，subIndex（主要用于元素判断是否高亮）
-    bottomMenuIndexs: { index: -1, subIndex: -1 }
+    bottomMenuIndexs: { index: -1, subIndex: -1 },
+    // 当前浏览器窗口的宽高（优化自适应布局）
+    windowsSize: { width: document.body.clientWidth, height: document.body.clientHeight }
   },
   getters: {},
   mutations: {
@@ -35,6 +37,9 @@ export default new Vuex.Store({
       } else {
         state.bottomMenuIndexs = bottomMenuIndex
       }
+    },
+    changeWindowsSize(state, windowWidth, windowHeight) {
+      state.windowsSize = { width: windowWidth, height: windowHeight }
     }
   },
   actions: {

src/views/HomeView.vue

@@ -30,8 +30,8 @@
             :menuData="{
               type: 'card',
               title: '资源问题',
-              titleWidth: 35,
-              boxWidth: '780',
+              titleWidth: 40,
+              boxWidth: '780'
             }"
           >
             <template slot="top">
@@ -47,7 +47,7 @@
               type: 'card',
               title: '资金投入TOP10',
               titleWidth: 85,
-              boxWidth: '400',
+              boxWidth: '400'
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -56,7 +56,7 @@
               type: 'card',
               title: '历年频发问题TOP10',
               titleWidth: 85,
-              boxWidth: '400',
+              boxWidth: '400'
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -65,10 +65,7 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis
-      id="ComprehensiveContainer"
-      v-if="$ifMenu('3', '')"
-    />
+    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
 
     <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
@@ -175,8 +172,7 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[1]">
         <template slot="top">
@@ -186,8 +182,7 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]">
         <template slot="top">
@@ -203,8 +198,7 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]">
         <template slot="top">
@@ -220,13 +214,7 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import {
-  street,
-  streetLocation,
-  soilData,
-  waterData,
-  forestryData,
-} from "@/config/common";
+import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -261,27 +249,28 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷",
+        unit: "公顷"
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷",
+        unit: "公顷"
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷",
+        unit: "公顷"
       },
       testTitle: "土地资源",
       activeIndex: 1,
+      // 菜单配置，后期最好根据用户权限通过后台动态返回。
       menus: {
         left: [
-          { type: "card", title: "土地资源", menuIndex: "1", position: "left" },
-          { type: "card", title: "水资源", menuIndex: "1", position: "left" },
-          { type: "card", title: "林地资源", menuIndex: "1", position: "left" },
+          { type: "card", title: "土地资源", menuIndex: "1", position: "left", minDomWidth: 420 },
+          { type: "card", title: "水资源", menuIndex: "1", position: "left", minDomWidth: 420 },
+          { type: "card", title: "林地资源", menuIndex: "1", position: "left", minDomWidth: 420 },
           {
             type: "imageMenu",
             index: 0,
@@ -291,7 +280,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -302,7 +291,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -313,7 +302,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -324,7 +313,7 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -335,7 +324,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -346,7 +335,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -357,7 +346,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
+            position: "left"
           },
           {
             type: "imageMenu",
@@ -368,8 +357,8 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left",
-          },
+            position: "left"
+          }
         ],
         main: [
           {
@@ -380,7 +369,8 @@ export default {
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
             position: "top",
-          },
+            minDomWidth: 1500
+          }
         ],
         right: [
           {
@@ -389,6 +379,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
+            minDomWidth: 1000
           },
           {
             type: "card",
@@ -396,6 +387,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
+            minDomWidth: 1000
           },
           {
             type: "card",
@@ -403,6 +395,7 @@ export default {
             titleWidth: 81,
             menuIndex: "1",
             position: "right",
+            minDomWidth: 1000
           },
           {
             type: "card",
@@ -411,6 +404,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
+            minDomWidth: 1200
           },
           {
             type: "card",
@@ -419,8 +413,9 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-          },
-        ],
+            minDomWidth: 1200
+          }
+        ]
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
@@ -445,19 +440,19 @@ export default {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -466,12 +461,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 },
+        { name: "生态资源问题", num: 55 }
       ],
       // 综合分析
       analysis: {
-        searchInput: "",
-      },
+        searchInput: ""
+      }
     };
   },
   methods: {
@@ -510,7 +505,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    },
+    }
   },
   created() {
     // 目录
@@ -525,19 +520,10 @@ export default {
     let CDataArr = [];
     // 街道排序
     for (let i in category) {
-      let ADataSum =
-        soilData[category[i]].A +
-        waterData[category[i]].A +
-        forestryData[category[i]].A;
-      let BDataSum =
-        soilData[category[i]].B +
-        waterData[category[i]].B +
-        forestryData[category[i]].B;
+      let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
+      let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
 
-      let CDataSum =
-        soilData[category[i]].C +
-        waterData[category[i]].C +
-        forestryData[category[i]].C;
+      let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
       ADataArr.push({ name: category[i], sum: ADataSum });
       BDataArr.push({ name: category[i], sum: BDataSum });
       CDataArr.push({ name: category[i], sum: CDataSum });
@@ -548,21 +534,21 @@ export default {
     CDataArr.sort(publicFun.compare("sum"));
 
     // 按A,B,C分出各自资源的排序数组
-    ADataArr.forEach((item) => {
+    ADataArr.forEach(item => {
       this.AData.soil.push(soilData[item.name].A);
       this.AData.water.push(waterData[item.name].A);
       this.AData.forestry.push(forestryData[item.name].A);
       this.AData.categoryData.push(item.name);
     });
 
-    BDataArr.forEach((item) => {
+    BDataArr.forEach(item => {
       this.BData.soil.push(soilData[item.name].B);
       this.BData.water.push(waterData[item.name].B);
       this.BData.forestry.push(forestryData[item.name].B);
       this.BData.categoryData.push(item.name);
     });
 
-    CDataArr.forEach((item) => {
+    CDataArr.forEach(item => {
       this.CData.soil.push(soilData[item.name].C);
       this.CData.water.push(waterData[item.name].C);
       this.CData.forestry.push(forestryData[item.name].C);
@@ -578,10 +564,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key],
+        label: street[key]
       });
     }
-  },
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -822,22 +808,14 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
-        left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
-        top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
-        no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
-        top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
-        bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
-        bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
-        bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
-        bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }