smart-bid-web/src/views/analysis/components/child/AnalysisHeader.vue

68 lines
1.4 KiB
Vue

<!-- 分析页面头部 -->
<template>
<div class="analysis-header">
<div class="header-right">
<el-button
class="back-btn"
@click="handleBack"
>
返回
</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'AnalysisHeader',
methods: {
handleBack() {
this.$emit('back')
}
}
}
</script>
<style scoped lang="scss">
.analysis-header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 12px 20px;
background: transparent;
border-bottom: none;
.header-right {
display: flex;
align-items: center;
gap: 12px;
.back-btn {
width: 98px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
border-radius: 4px;
border: none;
color: #606266;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
background: #f5f7fa;
color: #409EFF;
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
}
&:active {
transform: translateY(1px);
box-shadow: 0px 2px 4px 0px rgba(76, 76, 76, 0.2);
}
}
}
}
</style>