|
|
|
@ -5,16 +5,15 @@ |
|
|
|
<div class="search-item"> |
|
|
|
<span class="option-label">采购时间</span> |
|
|
|
<el-date-picker |
|
|
|
v-model="dateRange" |
|
|
|
type="daterange" |
|
|
|
v-model="procurementTime" |
|
|
|
type="date" |
|
|
|
format="YYYY-MM-DD" |
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
placeholder="选择日期" |
|
|
|
style="width: 240px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<div class="search-item" style="margin-left: 10px"> |
|
|
|
<span class="option-label">物资名称</span> |
|
|
|
<el-input |
|
|
|
v-model="materialName" |
|
|
|
@ -22,14 +21,7 @@ |
|
|
|
style="width: 200px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="option-label">负责人姓名</span> |
|
|
|
<el-input |
|
|
|
v-model="responsiblePerson" |
|
|
|
placeholder="请输入负责人姓名" |
|
|
|
style="width: 200px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="right-options"> |
|
|
|
<el-button type="primary" class="add-button" @click="handleSearch">查询</el-button> |
|
|
|
@ -42,8 +34,13 @@ |
|
|
|
<el-table-column type="index" label="序号" width="120" align="center" /> |
|
|
|
<el-table-column prop="materialName" label="物资名称" width="180" align="center" /> |
|
|
|
<el-table-column prop="materialNumber" label="物资数量" align="center" /> |
|
|
|
<el-table-column prop="materialType" label="物资类型" align="center" /> |
|
|
|
<el-table-column prop="materialNumber" label="采购时间" align="center" /> |
|
|
|
<el-table-column prop="materialType" label="物资类型" align="center" > |
|
|
|
<template #default="scope"> |
|
|
|
{{projTypeFormat(scope.row.materialType)}} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="procurementTime" label="采购时间" align="center" /> |
|
|
|
<el-table-column prop="personName" label="负责人" align="center" /> |
|
|
|
<el-table-column label="操作" align="center" width="120"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|
|
|
@ -52,40 +49,129 @@ |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
v-model="dialogVisible" |
|
|
|
title="物资详情" |
|
|
|
width="50%" |
|
|
|
:before-close="handleDialogClose" |
|
|
|
> |
|
|
|
<div class="detail-container"> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="detail-label">物资名称：</span> |
|
|
|
<span class="detail-value">{{ currentRow.materialName || '--' }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="detail-label">物资数量：</span> |
|
|
|
<span class="detail-value">{{ currentRow.materialNumber || '--' }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="detail-label">物资类型：</span> |
|
|
|
<span class="detail-value">{{ currentRow.materialType || '--' }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="detail-label">采购时间：</span> |
|
|
|
<span class="detail-value">{{ currentRow.purchaseTime || '--' }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="detail-label">负责人：</span> |
|
|
|
<span class="detail-value">{{ currentRow.responsiblePerson || '--' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button @click="dialogVisible = false">关闭</el-button> |
|
|
|
<Teleport to="body"> |
|
|
|
<Transition name="dialog-fade"> |
|
|
|
<div v-if="dialogVisible" class="modern-dialog-overlay" @click="handleOverlayClick"> |
|
|
|
<div class="modern-dialog-container" @click.stop> |
|
|
|
<div class="modern-dialog-header"> |
|
|
|
<div class="modern-dialog-title"> |
|
|
|
<div class="title-icon"> |
|
|
|
<i class="el-icon-document"></i> |
|
|
|
</div> |
|
|
|
<h3>防汛物资详情</h3> |
|
|
|
</div> |
|
|
|
<button class="modern-dialog-close" @click="dialogVisible = false"> |
|
|
|
<svg viewBox="0 0 24 24" width="24" height="24"> |
|
|
|
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> |
|
|
|
</svg> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="modern-dialog-content"> |
|
|
|
<div class="detail-card"> |
|
|
|
<div class="detail-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">物资名称</span> |
|
|
|
<span class="detail-value">{{ currentRow.materialName || '--' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="detail-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">负责人</span> |
|
|
|
<span class="detail-value">{{ currentRow.personName || '--' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="detail-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">负责人电话</span> |
|
|
|
<span class="detail-value">{{ currentRow.personPhone || '--' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="detail-item conclusion-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">负责人职务</span> |
|
|
|
<div class="detail-value">{{ currentRow.personLevel || '--' }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item conclusion-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">物资数量</span> |
|
|
|
<div class="detail-value">{{ currentRow.materialNumber || '--' }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item conclusion-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">采购时间</span> |
|
|
|
<div class="detail-value">{{ currentRow.procurementTime || '--' }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item conclusion-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">物资种类</span> |
|
|
|
<div class="detail-value">{{ projTypeFormat(currentRow.materialType) || '--' }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item conclusion-item"> |
|
|
|
|
|
|
|
<div class="detail-content"> |
|
|
|
<span class="detail-label">保质期</span> |
|
|
|
<div class="detail-value">{{ currentRow.shelfLife || '--' }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="modern-dialog-footer"> |
|
|
|
<el-button class="close-button" @click="dialogVisible = false">关闭</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</Transition> |
|
|
|
</Teleport> |
|
|
|
<!-- <el-dialog--> |
|
|
|
<!-- v-model="dialogVisible"--> |
|
|
|
<!-- title="物资详情"--> |
|
|
|
<!-- width="50%"--> |
|
|
|
<!-- :before-close="handleDialogClose"--> |
|
|
|
<!-- >--> |
|
|
|
<!-- <div class="detail-container">--> |
|
|
|
<!-- <div class="detail-item">--> |
|
|
|
<!-- <span class="detail-label">物资名称：</span>--> |
|
|
|
<!-- <span class="detail-value">{{ currentRow.materialName || '--' }}</span>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="detail-item">--> |
|
|
|
<!-- <span class="detail-label">物资数量：</span>--> |
|
|
|
<!-- <span class="detail-value">{{ currentRow.materialNumber || '--' }}</span>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="detail-item">--> |
|
|
|
<!-- <span class="detail-label">物资类型：</span>--> |
|
|
|
<!-- <span class="detail-value">{{ projTypeFormat(currentRow.materialType) || '--' }}</span>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="detail-item">--> |
|
|
|
<!-- <span class="detail-label">采购时间：</span>--> |
|
|
|
<!-- <span class="detail-value">{{ currentRow.procurementTime || '--' }}</span>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="detail-item">--> |
|
|
|
<!-- <span class="detail-label">负责人：</span>--> |
|
|
|
<!-- <span class="detail-value">{{ currentRow.personName || '--' }}</span>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <template #footer>--> |
|
|
|
<!-- <div class="dialog-footer">--> |
|
|
|
<!-- <el-button @click="dialogVisible = false">关闭</el-button>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- </el-dialog>--> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -93,7 +179,11 @@ |
|
|
|
import {ref, onMounted, watch, reactive} from 'vue'; |
|
|
|
import type { PropType } from 'vue'; |
|
|
|
import {listAqjdxx, listFzwz} from "~/api/dike"; |
|
|
|
|
|
|
|
import {getDictLabel} from "~/utils/dictUtils"; |
|
|
|
import {getDicts} from "~/api/common"; |
|
|
|
const handleOverlayClick = (e: MouseEvent) => { |
|
|
|
dialogVisible.value = false; |
|
|
|
}; |
|
|
|
const props = defineProps({ |
|
|
|
resCode: { |
|
|
|
type: String as PropType<string>, |
|
|
|
@ -103,7 +193,7 @@ const props = defineProps({ |
|
|
|
const dateRange = ref([]); |
|
|
|
const materialName = ref(''); |
|
|
|
const responsiblePerson = ref(''); |
|
|
|
|
|
|
|
const procurementTime=ref(null) |
|
|
|
// Dialog visibility |
|
|
|
const dialogVisible = ref(false); |
|
|
|
|
|
|
|
@ -111,11 +201,22 @@ const dialogVisible = ref(false); |
|
|
|
const currentRow = reactive({ |
|
|
|
materialName: '', |
|
|
|
materialNumber: '', |
|
|
|
personLevel:'', |
|
|
|
personPhone:'', |
|
|
|
shelfLife:'', |
|
|
|
materialType: '', |
|
|
|
purchaseTime: '', |
|
|
|
responsiblePerson: '' |
|
|
|
procurementTime: '', |
|
|
|
personName: '' |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const handleReset = () => { |
|
|
|
procurementTime.value = null; |
|
|
|
materialName.value = ''; |
|
|
|
responsiblePerson.value = ''; |
|
|
|
initFxwz(); |
|
|
|
}; |
|
|
|
|
|
|
|
// View function |
|
|
|
const handleView = (row: any) => { |
|
|
|
console.log('View row:', row); |
|
|
|
@ -124,17 +225,31 @@ const handleView = (row: any) => { |
|
|
|
currentRow.materialName = row.materialName || ''; |
|
|
|
currentRow.materialNumber = row.materialNumber || ''; |
|
|
|
currentRow.materialType = row.materialType || ''; |
|
|
|
currentRow.purchaseTime = row.purchaseTime || ''; |
|
|
|
currentRow.responsiblePerson = row.responsiblePerson || ''; |
|
|
|
currentRow.procurementTime = row.procurementTime || ''; |
|
|
|
currentRow.personName = row.personName || ''; |
|
|
|
currentRow.personPhone=row.personPhone||'', |
|
|
|
currentRow.personLevel=row.personLevel||'', |
|
|
|
currentRow.shelfLife=row.shelfLife||'' |
|
|
|
|
|
|
|
|
|
|
|
// Show dialog |
|
|
|
dialogVisible.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
const typesMaterials=ref([]) |
|
|
|
// Handle dialog close |
|
|
|
const handleDialogClose = () => { |
|
|
|
dialogVisible.value = false; |
|
|
|
}; |
|
|
|
function getType() { |
|
|
|
getDicts("types_materials").then((res) => { |
|
|
|
typesMaterials.value = res || []; |
|
|
|
console.log(typesMaterials.value,'11111') |
|
|
|
}); |
|
|
|
} |
|
|
|
function projTypeFormat(key: string) { |
|
|
|
if (!key) return '--'; |
|
|
|
return getDictLabel(typesMaterials.value, key) || key; |
|
|
|
} |
|
|
|
|
|
|
|
// Search function |
|
|
|
const handleSearch = () => { |
|
|
|
@ -171,24 +286,25 @@ function initFxwz() { |
|
|
|
dikeCode: props.resCode, |
|
|
|
}; |
|
|
|
|
|
|
|
if (procurementTime.value){ |
|
|
|
requestData.procurementTime=procurementTime.value; |
|
|
|
} |
|
|
|
// Add search parameters if they exist |
|
|
|
if (materialName.value) { |
|
|
|
requestData.materialName = materialName.value; |
|
|
|
} |
|
|
|
|
|
|
|
if (responsiblePerson.value) { |
|
|
|
requestData.responsiblePerson = responsiblePerson.value; |
|
|
|
requestData.personName = responsiblePerson.value; |
|
|
|
} |
|
|
|
|
|
|
|
// Add date range if selected |
|
|
|
if (dateRange.value && dateRange.value.length === 2) { |
|
|
|
requestData.startTime = dateRange.value[0]; |
|
|
|
requestData.endTime = dateRange.value[1]; |
|
|
|
} |
|
|
|
|
|
|
|
listFzwz({ |
|
|
|
page: 1, |
|
|
|
pageSize: 10, |
|
|
|
data:requestData |
|
|
|
|
|
|
|
}).then((res) => { |
|
|
|
if (res) { |
|
|
|
tableData.value=res.records || []; |
|
|
|
@ -197,6 +313,7 @@ function initFxwz() { |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getType(); |
|
|
|
initFxwz(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
@ -214,13 +331,24 @@ onMounted(() => { |
|
|
|
.left-options { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 15px; |
|
|
|
|
|
|
|
.option-label { |
|
|
|
margin-right: 8px; |
|
|
|
.search-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.option-label { |
|
|
|
padding: 15px; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right-options { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.add-button { |
|
|
|
background-color: #4cd964; |
|
|
|
border-color: #4cd964; |
|
|
|
@ -241,4 +369,230 @@ onMounted(() => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 详情对话框样式 */ |
|
|
|
.detail-container { |
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
.detail-item { |
|
|
|
margin-bottom: 15px; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.detail-label { |
|
|
|
width: 100px; |
|
|
|
font-weight: 500; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-value { |
|
|
|
flex: 1; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dialog-footer { |
|
|
|
text-align: right; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.dialog-fade-enter-active, |
|
|
|
.dialog-fade-leave-active { |
|
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.dialog-fade-enter-from, |
|
|
|
.dialog-fade-leave-to { |
|
|
|
opacity: 0; |
|
|
|
transform: scale(0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.modern-dialog-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: rgba(0, 0, 0, 0.6); |
|
|
|
backdrop-filter: blur(4px); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 2000; |
|
|
|
} |
|
|
|
|
|
|
|
.modern-dialog-container { |
|
|
|
width: 550px; |
|
|
|
max-width: 90%; |
|
|
|
background: #fff; |
|
|
|
border-radius: 12px; |
|
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes dialog-slide-in { |
|
|
|
0% { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(30px); |
|
|
|
} |
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.modern-dialog-header { |
|
|
|
padding: 20px 24px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
.modern-dialog-title { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.title-icon { |
|
|
|
margin-right: 12px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: rgba(255, 255, 255, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
margin: 0; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.modern-dialog-close { |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
cursor: pointer; |
|
|
|
color: #fff; |
|
|
|
width: 32px; |
|
|
|
height: 22px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
border-radius: 50%; |
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
background-color: rgba(255, 255, 255, 0.2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.modern-dialog-content { |
|
|
|
padding: 24px; |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
.detail-card { |
|
|
|
background: #f8f9fa; |
|
|
|
border-radius: 8px; |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
margin-bottom: 5px; |
|
|
|
padding-bottom: 5px; |
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|
|
|
transition: transform 0.2s, box-shadow 0.2s; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
padding-bottom: 0; |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateX(5px); |
|
|
|
} |
|
|
|
|
|
|
|
.detail-icon { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
border-radius: 8px; |
|
|
|
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
color: white; |
|
|
|
margin-right: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-content { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-label { |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-value { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
&.conclusion-item { |
|
|
|
.conclusion-value { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
padding: 12px; |
|
|
|
background: #fff; |
|
|
|
border-radius: 6px; |
|
|
|
border-left: 4px solid #0acccc; |
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.modern-dialog-footer { |
|
|
|
padding: 16px 24px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
background: #f8f9fa; |
|
|
|
border-top: 1px solid #e9ecef; |
|
|
|
|
|
|
|
.close-button { |
|
|
|
background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); |
|
|
|
border: none; |
|
|
|
color: white; |
|
|
|
padding: 10px 24px; |
|
|
|
border-radius: 6px; |
|
|
|
font-weight: 500; |
|
|
|
cursor: pointer; |
|
|
|
transition: transform 0.15s, box-shadow 0.15s; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-2px); |
|
|
|
box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
