sxc-frontend/web/src/components/SsPanel.vue

<script setup lang="ts">
import { Loading, Refresh } from '@element-plus/icons-vue'
import {onMounted} from "vue";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showRefresh: {
    type: Boolean,
    default: false
  },
  isRefresh: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['refresh', 'loaded']);

const refresh = () => {
  emit('refresh');
}

onMounted(() => {
  emit('loaded', 'panel');
})
</script>

<template>
  <div class="panel">
    <div class="panel-header is-pc">
      <div class="title">{{title}}</div>
      <el-button v-if="showRefresh" class="refresh hover-scale" :icon="Refresh" :loading="isRefresh" @click="refresh">
        换一换
      </el-button>
    </div>
    <div class="panel-body">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .panel {
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;

      .title {
        color: #101333;
        font-size: var(--body-font-size);
        font-weight: 600;
      }

      .refresh {
        padding: 0;
        font-size: var(--subtitle-font-size);
        color: #2943D6;
        background-color: transparent;
        border: 0;
        display: flex;
        align-items: center;
        height: unset;
        min-height: var(--min-touch-target);

        .el-icon {
          font-size: 1rem;
          margin-right: 0.1rem;
        }
      }
    }
  }

  /* 1080x1920 中等尺寸设备 */
  @media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
    .panel {
      .panel-header {
        margin-bottom: 1rem;

        .title {
          font-size: 1.5rem; /* 1.25rem → 1.5rem */
        }

        .refresh {
          font-size: 1.125rem; /* 1rem → 1.125rem */

          .el-icon {
            font-size: 1.375rem; /* 1.25rem → 1.375rem */
          }
        }
      }
    }
  }
</style>