151 lines
3.1 KiB
Vue
151 lines
3.1 KiB
Vue
<template>
|
||
<div v-if="visible" class="privilege-dialog-overlay" @click.self="handleClose">
|
||
<div class="privilege-dialog">
|
||
<div class="privilege-dialog-header">
|
||
<h3>权限申请</h3>
|
||
</div>
|
||
<div class="privilege-dialog-content">
|
||
<div class="privilege-type privilege-type-highlight">
|
||
申请权限：<span class="privilege-name" :class="privilegeColorClass[privilegeName]">{{ privilegeName }}</span>
|
||
</div>
|
||
<p>如需访问该功能，请点击下方按钮提交申请。</p>
|
||
</div>
|
||
<div class="privilege-dialog-footer">
|
||
<button class="cancel-button" @click="handleClose">取消</button>
|
||
<button class="apply-button" @click="handleApply">提交申请</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
visible: { type: Boolean, default: false },
|
||
privilegeName: { type: String, default: '' }
|
||
})
|
||
const emit = defineEmits(['close', 'apply'])
|
||
|
||
function handleClose() {
|
||
emit('close')
|
||
}
|
||
function handleApply() {
|
||
emit('apply')
|
||
}
|
||
|
||
// 动态class
|
||
const privilegeColorClass = {
|
||
'管理员': 'privilege-admin',
|
||
'模组': 'privilege-mod',
|
||
'竞技': 'privilege-competitor',
|
||
'地图': 'privilege-map',
|
||
'用户': 'privilege-user'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.privilege-dialog-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1100;
|
||
}
|
||
.privilege-dialog {
|
||
background: white;
|
||
border-radius: 8px;
|
||
width: 90%;
|
||
max-width: 420px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||
animation: dialog-fade-in 0.3s ease;
|
||
}
|
||
.privilege-dialog-header {
|
||
padding: 16px 20px 0 20px;
|
||
text-align: center;
|
||
}
|
||
.privilege-dialog-header h3 {
|
||
margin: 0;
|
||
color: #416bdf;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
.privilege-dialog-content {
|
||
padding: 18px 20px 0 20px;
|
||
color: #606266;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
text-align: left;
|
||
}
|
||
.privilege-type {
|
||
margin-bottom: 10px;
|
||
font-size: 15px;
|
||
color: #333;
|
||
}
|
||
.privilege-name {
|
||
color: #416bdf;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
margin-left: 4px;
|
||
}
|
||
.privilege-dialog-footer {
|
||
padding: 18px 20px 20px 20px;
|
||
text-align: right;
|
||
}
|
||
.cancel-button, .apply-button {
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
border: none;
|
||
padding: 7px 20px;
|
||
border-radius: 4px;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
margin-left: 8px;
|
||
transition: background 0.2s;
|
||
}
|
||
.apply-button {
|
||
background: #416bdf;
|
||
color: #fff;
|
||
}
|
||
.cancel-button:hover {
|
||
background: #e0e0e0;
|
||
}
|
||
.apply-button:hover {
|
||
background: #274bb5;
|
||
}
|
||
@keyframes dialog-fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
.privilege-type-highlight {
|
||
background: #eaf3ff;
|
||
border-radius: 6px;
|
||
padding: 6px 12px;
|
||
margin-bottom: 14px;
|
||
display: inline-block;
|
||
}
|
||
.privilege-name.privilege-admin {
|
||
color: #ff7675;
|
||
}
|
||
.privilege-name.privilege-mod {
|
||
color: #6c5ce7;
|
||
}
|
||
.privilege-name.privilege-competitor {
|
||
color: #00b894;
|
||
}
|
||
.privilege-name.privilege-map {
|
||
color: #0984e3;
|
||
}
|
||
.privilege-name.privilege-user {
|
||
color: #636e72;
|
||
}
|
||
</style> |