<template>
|
<el-dialog
|
:visible.sync="visible"
|
width="600px"
|
title="菌种报告评定"
|
class="choice-method-dialog"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="choice-method-content">
|
<div class="choice-method-title">请选择评定标准：</div>
|
<div class="choice-method-btns">
|
<div
|
class="choice-btn"
|
:class="{ active: selected === 'innovate' }"
|
@click="selected = 'innovate'"
|
>
|
创新型课题评定标准
|
</div>
|
<div
|
class="choice-btn"
|
:class="{ active: selected === 'regular' }"
|
@click="selected = 'regular'"
|
>
|
规程型课题评定标准
|
</div>
|
</div>
|
<div class="choice-method-footer">
|
<el-button type="primary" :disabled="!selected" @click="handleNext">下一步</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "ChoiceMethodDialog",
|
props: {
|
visible: Boolean
|
},
|
data() {
|
return {
|
selected: null
|
};
|
},
|
methods: {
|
handleClose() {
|
this.$emit("close");
|
},
|
handleNext() {
|
this.$emit("next", this.selected);
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.choice-method-dialog {
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e4e7ed;
|
}
|
}
|
.choice-method-content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
min-height: 300px;
|
justify-content: center;
|
}
|
.choice-method-title {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 32px;
|
color: #222;
|
}
|
.choice-method-btns {
|
display: flex;
|
gap: 40px;
|
margin-bottom: 40px;
|
.choice-btn {
|
width: 260px;
|
height: 120px;
|
background: #04796b;
|
color: #fff;
|
font-size: 22px;
|
font-weight: bold;
|
border-radius: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
opacity: 0.85;
|
transition: all 0.2s;
|
&.active, &:hover {
|
|
background: linear-gradient(to bottom, #0ACBCA 0%, #049C9A 100%);
|
|
opacity: 1;
|
box-shadow: 0 0 12px 0 rgba(0,150,136,0.18);
|
}
|
}
|
}
|
.choice-method-footer {
|
display: flex;
|
justify-content: center;
|
width: 100%;
|
.el-button {
|
width: 220px;
|
height: 48px;
|
font-size: 20px;
|
border-radius: 8px;
|
}
|
}
|
</style>
|
