chore: 调整火灾指标样式

app/src/views/HomeView.vue

@@ -35,8 +35,8 @@
             >
             <AlarmingSituationDynamics />
             <template #ext-header>
-              <!-- TODO  实现警情动态点击事件 -->
-              <button-block />
+              <!-- TODO  实现警情动态日期范围切换事件 -->
+              <button-block :items="['本日', '本周', '本月']"/>
             </template>
             </border-panel>
           </div>
@@ -56,7 +56,12 @@
           >
             2222
           </border-panel>
-          <border-panel height="298px" title="火灾指标"> 3333 </border-panel>
+          <border-panel height="298px" title="火灾指标"> 3333 
+            <template #ext-header>
+              <!-- TODO  实现火灾指标日期范围切换事件 -->
+              <button-block :items="['月', '年']"/>
+            </template>
+          </border-panel>
         </div>
       </div>
     </div>

components/ButtonBlock/index.vue

@@ -83,37 +83,13 @@ export default {
   border-radius: 5px;
   box-sizing: border-box;
   background: linear-gradient(
-    360deg,
-    #0094FF60 100%,
-    #0094FF00 0%
+    0deg,
+    #0094FF90 0%,
+    #0094FF10 100%
   );
   .button-block_item {
     padding: 0px 8.5px 0px 8.5px;
     cursor: pointer;
   }
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    padding: 1px;
-    box-sizing: border-box;
-    background: linear-gradient(360deg, #0c5a87 0%, rgba(0, 163, 255, 0) 100%);
-    /* 随便定义颜色 */
-    --mask-bg: linear-gradient(red, red);
-    --m-o: content-box, padding-box;
-    /* mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 */
-    /* 设置了用作元素蒙版层的图像，默认值为none，值为透明图片，或透明渐变 */
-    -webkit-mask-image: var(--mask-bg), var(--mask-bg);
-    /* 默认值为border-box，可选值与background-origin相同 */
-    -webkit-mask-origin: var(--m-o);
-    /* 默认值为border-box，可选值与background-clip相同 */
-    -webkit-mask-clip: var(--m-o);
-    /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
-    mask-composite: exclude;
-    /*只显示下方遮罩，重合的地方不显示*/
-    -webkit-mask-composite: destination-out;
-    pointer-events: none;
-  }
 }
 </style>