54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<template>
|
||
<view class="w-168rpx h-40rpx relative mr-44rpx">
|
||
<view class="absolute left-0 top-0 h-36rpx flex items-start">
|
||
<!-- 金牌茶艺师 -->
|
||
<wd-img :src="levelMap[level].icon" width="36rpx" height="36rpx"></wd-img>
|
||
</view>
|
||
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">{{ levelMap[level].text }}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="TeaSpecialistLevel">
|
||
/**
|
||
* TeaSpecialistLevel 茶艺师等级
|
||
* @description 用于展示茶艺师等级
|
||
*/
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
|
||
defineProps({
|
||
level: {
|
||
type: Number,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
// 茶艺师等级对应的icon和文字（这个数组5-1就是对应的等级）
|
||
const levelMap = {
|
||
5: {
|
||
icon: `${OSS}icon/icon_gold_medal.png`,
|
||
text: '金牌茶艺师'
|
||
},
|
||
4: {
|
||
icon: `${OSS}icon/icon_senior_medal.png`,
|
||
text: '高级茶艺师'
|
||
},
|
||
3: {
|
||
icon: `${OSS}icon/icon_intermediate_medal.png`,
|
||
text: '中级茶艺师'
|
||
},
|
||
2: {
|
||
icon: `${OSS}icon/icon_junior_medal.png`,
|
||
text: '初级茶艺师'
|
||
},
|
||
1: {
|
||
icon: `${OSS}icon/icon_enthusiast_medal.png`,
|
||
text: '茶艺爱好者'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script> |