flat:职业图谱小程序端页面完成

pages/service/components/SkillWeightPopup.vue

@@ -0,0 +1,212 @@
+<template>
+    <uni-popup
+        ref="popupRef"
+        type="bottom"
+        :borderRadius="'20rpx 20rpx 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 - 330rpx);
+    background-color: #FFFFFF;
+    border-radius: 20rpx 20rpx 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: 32rpx 28rpx;
+    border-bottom: 1rpx solid #F0F0F0;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.popup-title {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #000000;
+    flex: 1;
+}
+
+.close-btn {
+    width: 44rpx;
+    height: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #F5F5F5;
+    position: absolute;
+    right: 28rpx;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.popup-body {
+    flex: 1;
+    padding: 0 28rpx 28rpx;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.info-section {
+    margin-bottom: 40rpx;
+    
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24rpx;
+    gap: 12rpx;
+}
+
+.section-icon {
+    width: 24rpx;
+    height: 24rpx;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #9974FD 0%, #286BFA 100%);
+    flex-shrink: 0;
+}
+
+.section-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #286BFA;
+}
+
+.info-item {
+    background-color: #F5F5F5;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.info-label {
+    font-size: 28rpx;
+    color: #000000;
+    flex: 1;
+}
+
+.info-value {
+    font-size: 28rpx;
+    color: #286BFA;
+    font-weight: 500;
+}
+
+.level-dots {
+    display: flex;
+    gap: 8rpx;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background-color: #E0E0E0;
+    
+    &.active {
+        background-color: #286BFA;
+    }
+}
+</style>
+