vue2-client 1.15.123 → 1.15.125

package/src/base-client/components/common/HIS/HButtons/HButtons.vue

@@ -0,0 +1,749 @@
+<script setup lang="ts">
+import XButtons from '@vue2-client/base-client/components/common/XButtons/XButtons.vue'
+
+// 只定义HButtons特有的属性
+defineProps({
+  // HButtons特有的属性
+  buttonStyle: {
+    type: String,
+    default: 'button24' // 可选值: button24, right-button, button24-top-0, button24-top10, button21, button20, button23, table-height-button23, button22, out-button, button-watermark-icon, button, default, button1, button4, button25, button14, button13, button5, button2, button16, button3, button15, button8, 0padding-button, button10, button9, button6, button31, button12, button7, center, button11, button18, button17, button19, left53px, charges-button, button30
+  }
+})
+</script>
+
+<template>
+  <div
+    class="h-buttons-wrapper"
+    :class="[
+      `h-buttons-${buttonStyle}`
+    ]"
+  >
+    <x-buttons
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </x-buttons>
+  </div>
+</template>
+
+<style scoped lang="less">
+.h-buttons-wrapper {
+  // 基础样式
+  :deep(.ant-btn-group) {
+    .ant-btn {
+      border-radius: 6px;
+      background-color: #FFFFFF;
+      border: 1px solid #9499A0;
+      color: #313131;
+      font-weight: normal;
+      letter-spacing: 0em;
+      width: 110px;
+      font-size: 16px;
+      font-family: "Source Han Sans";
+      line-height: normal;
+      margin-right: 25px;
+      height: 32px;
+    }
+  }
+
+  // button24样式
+  &.h-buttons-button24 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border: 1px solid #CDCDCD;
+        color: #5D5C5C;
+        font-weight: normal;
+        letter-spacing: 0em;
+        font-size: 16px;
+        line-height: normal;
+        margin-right: 25px;
+        border-radius: 6px;
+        background-color: #FFFFFF;
+        // 这个不合理
+        // top: -100px;
+        width: fit-content;
+        min-width: 110px;
+        font-family: "Source Han Sans";
+        height: 32px;
+      }
+    }
+  }
+
+  // right-button样式
+  &.h-buttons-right-button {
+    :deep(.ant-btn-group) {
+      margin-top: -24px;
+      right: 121px;
+      position: sticky;
+      float: right;
+      z-index: 100;
+    }
+  }
+
+  // button24-top-0样式
+  &.h-buttons-button24-top-0 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border: 1px solid #CDCDCD;
+        color: #5D5C5C;
+        font-weight: normal;
+        letter-spacing: 0em;
+        font-size: 16px;
+        line-height: normal;
+        margin-right: 25px;
+        border-radius: 6px;
+        background-color: #FFFFFF;
+        width: fit-content;
+        min-width: 110px;
+        font-family: "Source Han Sans";
+        height: 32px;
+      }
+    }
+  }
+
+  // button24-top10样式
+  &.h-buttons-button24-top10 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        top: 10px;
+      }
+    }
+  }
+
+  // button21样式
+  &.h-buttons-button21 {
+    :deep(.ant-btn-group) {
+      top: -88px;
+      display: flex;
+      .ant-btn {
+        border-radius: 6px;
+        background-color: #FFFFFF;
+        border: 1px solid #9499A0;
+        color: #313131;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        margin-right: 25px;
+        height: 32px;
+      }
+      width: 200px;
+    }
+  }
+
+  // button20样式
+  &.h-buttons-button20 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border-radius: 6px;
+        background-color: #1890FF;
+        border: none;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 150px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        margin-right: 25px;
+        height: 32px;
+      }
+      height: 52px;
+    }
+  }
+
+  // button23样式
+  &.h-buttons-button23 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border: none;
+        padding: 0 !important;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        font-size: 16px;
+        line-height: normal;
+        border-radius: 50%;
+        background-color: #1890FF;
+        margin-left: 10px;
+        top: -88px;
+        width: 30px;
+        font-family: "Source Han Sans";
+        height: 30px;
+      }
+    }
+  }
+
+  // table-height-button23样式
+  &.h-buttons-table-height-button23 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border: none;
+        padding: 0 !important;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        font-size: 16px;
+        line-height: normal;
+        border-radius: 50%;
+        background-color: #1890FF;
+        margin-left: 10px;
+        top: -64px;
+        width: 30px;
+        font-family: "Source Han Sans";
+        height: 30px;
+      }
+    }
+  }
+
+  // button22样式
+  &.h-buttons-button22 {
+    :deep(.x-buttons) {
+      margin: -20px 6px -20px 6px;
+      .ant-btn-group {
+        .ant-btn {
+          border-radius: 6px;
+          display: inline-block;
+        }
+        width: 100%;
+      }
+    }
+  }
+
+  // out-button样式
+  &.h-buttons-out-button {
+    :deep(.x-buttons) {
+      .ant-btn-group {
+        .ant-btn {
+          border: 1px solid #9499A0;
+          color: #313131;
+          font-weight: normal;
+          letter-spacing: 0em;
+          font-size: 16px;
+          line-height: normal;
+          box-sizing: border-box;
+          margin-right: 6px;
+          border-radius: 6px;
+          background-color: #FFFFFF;
+          left: 12px;
+          width: 110px;
+          font-family: "Source Han Sans";
+          height: 32px;
+        }
+      }
+      margin-top: -35px;
+    }
+  }
+
+  // button-watermark-icon样式
+  &.h-buttons-button-watermark-icon {
+    :deep(.watermark-icon) {
+      top: 37%;
+    }
+    :deep(.x-button) {
+      display: flex !important;
+    }
+    :deep(.ant-btn-group) {
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  // button样式
+  &.h-buttons-button {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border-radius: 6px;
+        background-color: #FFFFFF;
+        border: 1px solid #9499A0;
+        color: #313131;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        margin-right: 25px;
+        height: 32px;
+      }
+    }
+  }
+
+  // button1样式
+  &.h-buttons-button1 {
+    :deep(.ant-btn-primary) {
+      background-color: rgb(93, 92, 92);
+    }
+    width: 130px;
+  }
+
+  // button4样式
+  &.h-buttons-button4 {
+    :deep(.x-buttons) {
+      margin: -20px 3px -20px 3px;
+      .ant-btn-group {
+        .ant-btn {
+          border-radius: 6px;
+          border: 1px solid #9499A0;
+          font-size: 16px;
+          height: 32px;
+          background-color: #FFFFFF;
+          color: #313131;
+        }
+        width: 70%;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  // button25样式
+  &.h-buttons-button25 {
+    :deep(.x-buttons) {
+      margin: -20px 3px -20px 3px;
+      .ant-btn-group {
+        .ant-btn {
+          border-radius: 6px;
+          border: 1px solid #9499A0;
+          font-size: 16px;
+          height: 32px;
+          background-color: #FFFFFF;
+          color: #313131;
+          width: 173px;
+        }
+        width: 173px;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  // button14样式
+  &.h-buttons-button14 {
+    :deep(.x-buttons) {
+      .ant-btn-group {
+        display: flex;
+        gap: 6px;
+        .ant-btn {
+          border: 1px solid #9499A0;
+          color: #313131;
+          font-weight: normal;
+          letter-spacing: 0em;
+          font-size: 16px;
+          line-height: normal;
+          box-sizing: border-box;
+          border-radius: 6px;
+          background-color: #FFFFFF;
+          left: 12px;
+          width: 110px;
+          font-family: "Source Han Sans";
+          height: 32px;
+        }
+      }
+      margin-top: -22px;
+    }
+  }
+
+  // button13样式
+  &.h-buttons-button13 {
+    :deep(.ant-btn-group) {
+      top: -90px;
+    }
+  }
+
+  // button5样式
+  &.h-buttons-button5 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border-radius: 6px;
+        background-color: #1890FF;
+        border: none;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        margin-right: 25px;
+        height: 32px;
+      }
+      height: 52px;
+    }
+  }
+
+  // button2样式
+  &.h-buttons-button2 {
+    :deep(.x-buttons) {
+      margin: -20px 6px -20px 6px;
+      color: #FFFFFF;
+      .ant-btn-group {
+        .ant-btn {
+          border-radius: 6px;
+          border: none;
+          width: 46%;
+          font-size: 16px;
+          height: 32px;
+        }
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  // button16样式
+  &.h-buttons-button16 {
+    :deep(.ant-btn-group) {
+      display: flex;
+      gap: 6px;
+      .ant-btn {
+        border-radius: 6px;
+        border: none;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        height: 32px;
+      }
+      margin-top: -60px;
+    }
+  }
+
+  // button3样式
+  &.h-buttons-button3 {
+    :deep(.x-buttons) {
+      margin: -20px 6px -20px 6px;
+      .ant-btn-group {
+        padding: 0 170px;
+        .ant-btn {
+          border-radius: 6px;
+          display: inline-block;
+        }
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  // button15样式
+  &.h-buttons-button15 {
+    :deep(.x-buttons) {
+      .ant-btn-group {
+        flex-direction: column;
+        display: flex;
+        gap: 6px;
+        .ant-btn {
+          border: none;
+          color: #FFFFFF;
+          font-weight: normal;
+          letter-spacing: 0em;
+          font-size: 16px;
+          line-height: normal;
+          box-sizing: border-box;
+          border-radius: 6px;
+          background-color: #5D5C5C;
+          left: 12px;
+          width: 280px;
+          font-family: "Source Han Sans";
+          height: 32px;
+        }
+      }
+      margin-top: -22px;
+    }
+  }
+
+  // button8样式
+  &.h-buttons-button8 {
+    :deep(.ant-btn-group) {
+      top: -8px;
+    }
+  }
+
+  // 0padding-button样式
+  &.h-buttons-0padding-button {
+    padding: 0px 4px;
+  }
+
+  // button10样式
+  &.h-buttons-button10 {
+    :deep(.ant-btn-group) {
+      display: flex;
+      gap: 8px;
+      .ant-btn {
+        border-radius: 6px;
+        border: none;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 173px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        height: 32px;
+      }
+      justify-content: flex-end;
+    }
+  }
+
+  // button9样式
+  &.h-buttons-button9 {
+    :deep(.ant-btn-group) {
+      top: -28px;
+      display: flex;
+      .ant-btn {
+        border-radius: 6px;
+        background-color: #1890FF;
+        border: none;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        margin-right: 25px;
+        height: 32px;
+      }
+      justify-content: center;
+    }
+  }
+
+  // button6样式
+  &.h-buttons-button6 {
+    :deep(.x-buttons) {
+      margin: -20px 6px -20px 6px;
+      .ant-btn-group {
+        .ant-btn {
+          border-radius: 6px;
+          border: 1px solid #9499A0;
+          background-color: #FFFFFF;
+          color: #5D5C5C;
+          width: 46%;
+          font-size: 16px;
+          height: 32px;
+        }
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  // button31样式
+  &.h-buttons-button31 {
+    :deep(.x-buttons) {
+      width: 110%;
+      margin: -20px 0px -20px 0px;
+      .ant-btn-group {
+        .ant-btn {
+          border-radius: 6px;
+          border: 1px solid #9499A0;
+          background-color: #FFFFFF;
+          color: #5D5C5C;
+          width: 100%;
+          font-size: 16px;
+          height: 32px;
+        }
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  // button12样式
+  &.h-buttons-button12 {
+    :deep(.ant-btn-group) {
+      display: flex;
+      gap: 8px;
+      .ant-btn {
+        border-radius: 6px;
+        border: none;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 173px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        height: 32px;
+      }
+      justify-content: flex-end;
+      margin-top: -30px;
+    }
+  }
+
+  // button7样式
+  &.h-buttons-button7 {
+    :deep(.x-buttons) {
+      margin: -20px 6px -20px 6px;
+      .ant-btn-group {
+        padding: 0 30px;
+        .ant-btn {
+          border-radius: 6px;
+          border: none;
+          margin: 0 10px;
+          width: 110px;
+          font-size: 16px;
+          height: 32px;
+        }
+        width: 100%;
+      }
+    }
+  }
+
+  // center样式
+  &.h-buttons-center {
+    :deep(.ant-btn-group) {
+      display: flex;
+      .ant-btn {
+        border-radius: 6px;
+        background-color: #FFFFFF;
+        border: 1px solid #9499A0;
+        color: #5D5C5C;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        margin-right: 25px;
+        height: 32px;
+      }
+      justify-content: center;
+    }
+  }
+
+  // button11样式
+  &.h-buttons-button11 {
+    :deep(.ant-btn-group) {
+      display: flex;
+      .ant-btn {
+        border-radius: 6px;
+        border: none;
+        color: #FFFFFF;
+        font-weight: normal;
+        letter-spacing: 0em;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        height: 32px;
+      }
+      justify-content: flex-end;
+      margin-top: -54px;
+    }
+  }
+
+  // button18样式
+  &.h-buttons-button18 {
+    :deep(.x-buttons) {
+      padding-top: 18px !important;
+      margin: -20px 3px -20px 3px;
+      .ant-btn-group {
+        padding-top: 18px !important;
+        .ant-btn {
+          border-radius: 6px;
+          border: none;
+          font-size: 16px;
+          margin-top: 15px !important;
+          height: 32px;
+        }
+        width: 70%;
+        padding-bottom: 39px !important;
+        justify-content: space-between;
+      }
+      padding-bottom: 39px !important;
+    }
+  }
+
+  // button17样式
+  &.h-buttons-button17 {
+    :deep(.ant-btn-group) {
+      display: flex;
+      gap: 6px;
+      .ant-btn {
+        border-radius: 6px;
+        border: none;
+        font-weight: normal;
+        letter-spacing: 0em;
+        width: 110px;
+        font-size: 16px;
+        font-family: "Source Han Sans";
+        line-height: normal;
+        height: 32px;
+      }
+      justify-content: center;
+    }
+    :deep(.x-buttons) {
+      margin-top: -60px;
+    }
+  }
+
+  // button19样式
+  &.h-buttons-button19 {
+    :deep(.x-buttons) {
+      margin: -20px 6px -20px 6px;
+      .ant-btn-group {
+        padding-top: 30px;
+        .ant-btn {
+          border-radius: 6px;
+          border: none;
+          margin: 0 2px;
+          width: 120px;
+          font-size: 16px;
+          height: 52px;
+        }
+        width: 100%;
+        padding-bottom: 10px;
+      }
+    }
+  }
+
+  // left53px样式
+  &.h-buttons-left53px {
+    padding: 2px;
+    left: 53px;
+    position: relative;
+  }
+
+  // charges-button样式
+  &.h-buttons-charges-button {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border: 1px solid #9499A0;
+        color: #313131;
+        font-weight: normal;
+        display: flex;
+        letter-spacing: 0em;
+        font-size: 16px;
+        line-height: normal;
+        box-sizing: border-box;
+        margin-right: 6px;
+        border-radius: 6px;
+        background-color: #FFFFFF;
+        width: 110px;
+        font-family: "Source Han Sans";
+        height: 32px;
+      }
+    }
+    :deep(.ant-card-body) {
+      padding: 0;
+    }
+  }
+
+  // button30样式
+  &.h-buttons-button30 {
+    :deep(.ant-btn-group) {
+      .ant-btn {
+        border-radius: 6px;
+        display: inline-block;
+        margin-right: 10px;
+      }
+      width: 100%;
+    }
+  }
+}
+</style>