init: 橘视厅酒店版会员系统前端

src/views/modules/media/components/media-rank-dialog.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="排行榜"
+    width="1000px"
+    top="4vh"
+    draggable
+    align-center
+    append-to-body
+    destroy-on-close
+    :close-on-click-modal="false"
+    class="media-rank-dialog"
+    @opened="onDialogOpened"
+  >
+    <div class="media-rank-dialog__body">
+      <rank-board-panel ref="panelRef" embed :auto-load="false" />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, nextTick } from 'vue'
+import RankBoardPanel from './rank-board-panel.vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const panelRef = ref(null)
+
+function onDialogOpened () {
+  nextTick(() => {
+    panelRef.value?.loadData?.()
+  })
+}
+</script>
+
+<style scoped>
+.media-rank-dialog__body {
+  max-height: min(80vh, 860px);
+  overflow: auto;
+  margin: -4px 0 0 0;
+  padding-right: 2px;
+}
+</style>
+
+<style>
+.media-rank-dialog .el-dialog__header {
+  cursor: move;
+  user-select: none;
+}
+.media-rank-dialog .el-dialog__body {
+  padding: 8px 12px 16px 12px;
+}
+</style>