yangg 1 day ago
parent
commit
035161c35a
1 changed files with 263 additions and 31 deletions
  1. 263 31
      src/views/system/borrow/component/BorrowTypeSelect/index.vue

+ 263 - 31
src/views/system/borrow/component/BorrowTypeSelect/index.vue

@@ -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>