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

pages/service/components/SkillDetailPopup.vue

@@ -0,0 +1,223 @@
+<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-popup-content">
+            <!-- 头部：标题和关闭按钮 -->
+            <view class="popup-header">
+                <text class="popup-title">{{ jobTitle }}</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="skill-section" 
+                    v-for="(section, sIndex) in skillSections" 
+                    :key="sIndex"
+                >
+                    <view class="section-header">
+                        <view class="section-icon"></view>
+                        <text class="section-title">{{ section.title }}</text>
+                    </view>
+                    <view class="skill-list">
+                        <view 
+                            class="skill-item" 
+                            v-for="(skill, index) in section.skills" 
+                            :key="index"
+                        >
+                            <text class="skill-name">{{ skill.name }}</text>
+                            <view class="skill-dots">
+                                <view 
+                                    class="dot" 
+                                    :class="{ 'active': i - 1 < skill.level }"
+                                    v-for="i in 6" 
+                                    :key="i"
+                                ></view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </uni-popup>
+</template>
+
+<script setup>
+import { ref, computed, defineExpose } from 'vue';
+
+const props = defineProps({
+    jobTitle: {
+        type: String,
+        default: ''
+    },
+    possessedSkills: {
+        type: Array,
+        default: () => []
+    },
+    improvementSkills: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['close']);
+
+const popupRef = ref(null);
+
+// 技能区块数据
+const skillSections = computed(() => [
+    { title: '已具备技能', skills: props.possessedSkills },
+    { title: '需要提升的技能', skills: props.improvementSkills }
+]);
+
+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-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;
+}
+
+.skill-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;
+}
+
+.skill-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+}
+
+.skill-item {
+    background-color: #F5F5F5;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 64rpx;
+    box-sizing: border-box;
+}
+
+.skill-name {
+    font-size: 28rpx;
+    color: #000000;
+    flex: 1;
+    margin-right: 20rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.skill-dots {
+    display: flex;
+    gap: 8rpx;
+    align-items: center;
+    flex-shrink: 0;
+    width: 112rpx;
+}
+
+.dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background-color: #E0E0E0;
+    
+    &.active {
+        background-color: #286BFA;
+    }
+}
+</style>
+