71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<div class="qc-flags">
|
|
<div class="qc-flags-item" v-for="(item, index) in items" :key="item">
|
|
<span :class="data[index]"></span>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 配置
|
|
const items = ['Collection Time', 'Acq Time', 'Decay Time', 'SampVol', 'Be7-FWHM', 'Ba140-MDC', 'Xe133-MDC']
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
created() {
|
|
this.items = items
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.qc-flags {
|
|
display: flex;
|
|
&-item {
|
|
background-color: #46738e;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 150px;
|
|
height: 30px;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
span {
|
|
margin-left: 20px;
|
|
margin-right: 5px;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
|
|
&.GRAY {
|
|
background: radial-gradient(circle, #979797 0, #777a7c 100%);
|
|
}
|
|
|
|
&.GREEN {
|
|
background: radial-gradient(circle, #00fe7f 0, #00d56a 100%);
|
|
}
|
|
|
|
&.RED {
|
|
background: radial-gradient(circle, #fe0015 0, #d50000 100%);
|
|
}
|
|
|
|
&.BLUE {
|
|
background: radial-gradient(circle, #00E57D 0, #00E57D 100%);
|
|
}
|
|
|
|
&.YELLOW {
|
|
background: radial-gradient(circle, #feed00 0, #d5d100 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|