|
@@ -1,21 +1,41 @@
|
|
|
<template>
|
|
|
- <el-dialog v-model="visible" title="选择借用性质" width="40%" :close-on-click-modal="false" @close="onCancel">
|
|
|
- <div style="margin-bottom: 16px">
|
|
|
- <ol style="padding: 10px 30px; margin-bottom: 20px; border: 1px solid #409eff; border-radius: 5px; background: #e6f7ff">
|
|
|
- <!-- <li>1、常规借用:课后自主练习、日常技能巩固等非教学时段的使用需求;</li> -->
|
|
|
- <li>1、课堂借用:课堂教学活动、实验操作、课程项目等教学时段的正式使用</li>
|
|
|
- <li>2、特殊借用:突发紧急情况、非常规教学需求或特殊事件下的临时性借用。</li>
|
|
|
- </ol>
|
|
|
- <div style="display: flex; justify-content: space-around; margin: 20px 0">
|
|
|
- <div v-for="item in types" :key="item.value" @click="select(item.value)" style="cursor: pointer; text-align: center">
|
|
|
- <img :src="getImage(item.value)" style="width: 90px; height: 90px;" />
|
|
|
- <el-button type="primary" style="margin-top: 8px; font-weight: bold" v-if="item.label !== '特殊借用'">{{ item.label }}</el-button>
|
|
|
- <el-button type="danger" plain style="margin-top: 8px; font-weight: bold" v-else>{{ item.label }}</el-button>
|
|
|
+ <el-dialog
|
|
|
+ v-model="visible"
|
|
|
+ title="选择借用性质"
|
|
|
+ width="500px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="onCancel"
|
|
|
+ class="borrow-type-dialog"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="option-group">
|
|
|
+ <div
|
|
|
+ v-for="item in types"
|
|
|
+ :key="item.value"
|
|
|
+ @click="select(item.value)"
|
|
|
+ class="option-item"
|
|
|
+ :class="{ 'selected': selectedType === item.value }"
|
|
|
+ >
|
|
|
+ <div class="selection-indicator">
|
|
|
+ <i class="fas fa-check"></i>
|
|
|
+ </div>
|
|
|
+ <div class="option-header">
|
|
|
+ <div class="option-icon" :class="item.value === 1 ? 'classroom-icon' : 'special-icon'">
|
|
|
+ <i :class="item.value === 1 ? 'fas fa-chalkboard-teacher' : 'fas fa-exclamation-triangle'"></i>
|
|
|
+ </div>
|
|
|
+ <div class="option-title">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="option-description">
|
|
|
+ {{ item.value === 1 ? '课堂教学活动、实验操作、课程项目等教学时段的正式使用' : '突发紧急情况、非常规教学需求或特殊事件下的临时性借用' }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
- <el-button @click="onCancel">关闭</el-button>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <el-button @click="onCancel" class="btn-close">关闭</el-button>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
@@ -25,25 +45,18 @@ import { ref, watch, defineProps, defineEmits } from 'vue';
|
|
|
const props = defineProps<{ visible: boolean }>();
|
|
|
const emit = defineEmits(['update:visible', 'select']);
|
|
|
const visible = ref(props.visible);
|
|
|
-import classroomImg from '/@/assets/classroom.png';
|
|
|
-import specialImg from '/@/assets/tes.png';
|
|
|
+const selectedType = ref<number | null>(null);
|
|
|
|
|
|
watch(
|
|
|
() => props.visible,
|
|
|
- (v) => (visible.value = v)
|
|
|
-);
|
|
|
-
|
|
|
-function getImage(value: number): string {
|
|
|
- switch (value) {
|
|
|
- case 1:
|
|
|
- return classroomImg;
|
|
|
- case 2:
|
|
|
- return specialImg;
|
|
|
- default:
|
|
|
- return specialImg;
|
|
|
+ (v) => {
|
|
|
+ visible.value = v;
|
|
|
+ // 重置选中状态
|
|
|
+ if (v) {
|
|
|
+ selectedType.value = null;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
+);
|
|
|
|
|
|
const types = [
|
|
|
// { value: 0, label: '常规借用' },
|
|
@@ -52,11 +65,230 @@ const types = [
|
|
|
];
|
|
|
|
|
|
function select(type: number) {
|
|
|
- // console.log(type);
|
|
|
- emit('select', type);
|
|
|
- emit('update:visible', false);
|
|
|
+ selectedType.value = type;
|
|
|
+ // 延迟执行选择,让用户看到选中效果
|
|
|
+ setTimeout(() => {
|
|
|
+ emit('select', type);
|
|
|
+ emit('update:visible', false);
|
|
|
+ }, 200);
|
|
|
}
|
|
|
+
|
|
|
function onCancel() {
|
|
|
emit('update:visible', false);
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 引入Font Awesome图标库 */
|
|
|
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
|
|
|
+
|
|
|
+/* 对话框样式 */
|
|
|
+:deep(.el-dialog) {
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-dialog__header) {
|
|
|
+ background: linear-gradient(to right, #3498db, #2c3e50);
|
|
|
+ color: white;
|
|
|
+ padding: 25px 30px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-dialog__title) {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-dialog__header::after) {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 4px;
|
|
|
+ background: linear-gradient(to right, #3498db, #2c3e50);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-dialog__body) {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-dialog__footer) {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 主体内容 */
|
|
|
+.modal-body {
|
|
|
+ padding: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.option-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 25px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.option-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 25px;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border: 2px solid #e9ecef;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.option-item:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
|
+ border-color: #3498db;
|
|
|
+}
|
|
|
+
|
|
|
+.option-item.selected {
|
|
|
+ border-color: #3498db;
|
|
|
+ background: rgba(52, 152, 219, 0.05);
|
|
|
+ box-shadow: 0 8px 20px rgba(52, 152, 219, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.option-item.selected::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 5px;
|
|
|
+ height: 100%;
|
|
|
+ background: #3498db;
|
|
|
+}
|
|
|
+
|
|
|
+.option-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.option-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 15px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.classroom-icon {
|
|
|
+ background: linear-gradient(135deg, #3498db, #2c3e50);
|
|
|
+}
|
|
|
+
|
|
|
+.special-icon {
|
|
|
+ background: linear-gradient(135deg, #e74c3c, #e67e22);
|
|
|
+}
|
|
|
+
|
|
|
+.option-title {
|
|
|
+ font-size: 1.35rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.option-description {
|
|
|
+ color: #6c757d;
|
|
|
+ font-size: 0.95rem;
|
|
|
+ line-height: 1.7;
|
|
|
+ padding-left: 65px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.option-description::before {
|
|
|
+ content: '•';
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ color: #3498db;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 0 30px 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-close {
|
|
|
+ padding: 14px 40px;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: #e74c3c;
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-close:hover {
|
|
|
+ background: #c0392b;
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 8px 20px rgba(192, 57, 43, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-close:active {
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+
|
|
|
+.selection-indicator {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #3498db;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 14px;
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.option-item.selected .selection-indicator {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .modal-body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-item {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-description {
|
|
|
+ padding-left: 0;
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-left: 65px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-description::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|