U 发布提交

he wei

2025-03-15 f8fd43f1307b0ae3a55f5a5a1390fd13b506fa88

 src/components/HdwCard/index.vue

@@ -1,25 +1,29 @@
<script lang="ts">
import { defineComponent } from 'vue';
   import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HdwCard',
  props: {
    isFull: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  }
});
   export default defineComponent({
      name: 'HdwCard',
      props: {
         isFull: {
            type: Boolean,
            default: false
         },
         title: {
            type: String,
            default: ''
         }
      }
   });
</script>

<template>
  <div class="hdw-card" :class="[isFull && 'is-full', title && 'is-has-title']">
    <div v-if="title" class="hdw-card-title">
      <img src="./images/arrow_mark.png" alt="" />
      {{title}}
      <div class="tools">
        <slot name="tools"></slot>
      </div>
    </div>
    <div class="hdw-card-content">
      <slot></slot>
@@ -29,15 +33,18 @@

<style scoped lang="scss">
.hdw-card {
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  padding: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  padding: 0 8px 8px 8px;
  border-radius: 4px;

  &.is-full {
    height: 100%;

    .hdw-card-content {
      padding-top: 8px;
      height: 100%;
    }

    &.is-has-title {
      .hdw-card-content {
        height: calc(100% - 30px);
@@ -46,12 +53,24 @@
  }

  .hdw-card-title {
    color: var(--light-color);
    margin-left: -8px;
    margin-right: -8px;
    padding: 4px 16px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    padding: 8px;
    border-bottom: 1px solid #00feff30;
    font-weight: 700;
    font-size: 14px;
    position: relative;

    img {
      width: auto;
      height: 10px;
    }
    .tools {
      position: absolute;
      right: 8px;
      top: 4px;
    }
  }
}
</style>