ks-app-employment-service/pages/service/components/SkillWeightPopup.vue

<template>
    <uni-popup
        ref="popupRef"
        type="bottom"
        :borderRadius="'20rpx 30rpx 0 0'"
        background-color="#FFFFFF"
        maskBackgroundColor="rgba(255, 255, 255, 0.6)"
        :isMaskClick="true"
        @maskClick="handleClose"
    >
        <view class="skill-weight-popup-content">
            <!-- 头部：标题和关闭按钮 -->
            <view class="popup-header">
                <text class="popup-title">{{ skillName }}</text>
                <view class="close-btn" @click="handleClose">
                    <uni-icons type="closeempty" size="20" color="#000000"></uni-icons>
                </view>
            </view>

            <!-- 内容区域 -->
            <scroll-view scroll-y class="popup-body" :show-scrollbar="false">
                <!-- 技能权重 -->
                <view class="info-section">
                    <view class="section-header">
                        <view class="section-icon"></view>
                        <text class="section-title">技能权重</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">{{ skillName }}</text>
                        <text class="info-value">{{ weight }}</text>
                    </view>
                </view>

                <!-- 当前水平 -->
                <view class="info-section">
                    <view class="section-header">
                        <view class="section-icon"></view>
                        <text class="section-title">当前水平</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">能力等级</text>
                        <view class="level-dots">
                            <view 
                                class="dot" 
                                :class="{ 'active': i - 1 < currentLevel }"
                                v-for="i in 5" 
                                :key="i"
                            ></view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, defineExpose } from 'vue';

const props = defineProps({
    skillName: {
        type: String,
        default: ''
    },
    weight: {
        type: String,
        default: '0'
    },
    currentLevel: {
        type: Number,
        default: 0
    }
});

const emit = defineEmits(['close']);

const popupRef = ref(null);

function open() {
    popupRef.value?.open('bottom');
}

function close() {
    popupRef.value?.close('bottom');
}

function handleClose() {
    close();
    emit('close');
}

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.skill-weight-popup-content {
    height: calc(100vh - 495rpx);
    background-color: #FFFFFF;
    border-radius: 30rpx 30rpx 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 48rpx 42rpx;
    border-bottom: 2rpx solid #F0F0F0;
    flex-shrink: 0;
    position: relative;
}

.popup-title {
    font-size: 54rpx;
    font-weight: 600;
    color: #000000;
    flex: 1;
}

.close-btn {
    width: 66rpx;
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #F5F5F5;
    position: absolute;
    right: 42rpx;
    top: 50%;
    transform: translateY(-50%);
}

.popup-body {
    flex: 1;
    padding: 0 42rpx 42rpx;
    overflow-y: auto;
    box-sizing: border-box;
}

.info-section {
    margin-bottom: 60rpx;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 36rpx;
    gap: 18rpx;
}

.section-icon {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #9974FD 0%, #286BFA 100%);
    flex-shrink: 0;
}

.section-title {
    font-size: 48rpx;
    font-weight: 600;
    color: #286BFA;
}

.info-item {
    background-color: #F5F5F5;
    border-radius: 18rpx;
    padding: 30rpx 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-size: 42rpx;
    color: #000000;
    flex: 1;
}

.info-value {
    font-size: 42rpx;
    color: #286BFA;
    font-weight: 500;
}

.level-dots {
    display: flex;
    gap: 12rpx;
    align-items: center;
    flex-shrink: 0;
}

.dot {
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background-color: #E0E0E0;
    
    &.active {
        background-color: #286BFA;
    }
}
</style>