310 lines
8.1 KiB
Vue
310 lines
8.1 KiB
Vue
<template>
|
||
<view class="talent-detail">
|
||
<!-- 个人信息卡片 -->
|
||
<view class="profile-card">
|
||
<view class="profile-header">
|
||
<view class="left-section">
|
||
<image
|
||
class="avatar"
|
||
:src="talentInfo.avatar"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="basic-info">
|
||
<view class="name-row">
|
||
<text class="name">{{ talentInfo.name }}</text>
|
||
<view class="tags">
|
||
<view
|
||
class="tag"
|
||
v-for="(tag, index) in talentInfo.tags"
|
||
:key="index"
|
||
>{{ tag }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<text class="education">毕业院校：{{ talentInfo.education }}</text>
|
||
</view>
|
||
</view>
|
||
<div class="follow-btn" @click="followTalent">
|
||
{{ isFollowed ? "已关注" : "+ 关注" }}
|
||
</div>
|
||
</view>
|
||
|
||
<!-- 数据统计 -->
|
||
<view class="stats">
|
||
<view class="stat-item works">
|
||
<text class="stat-number">{{ talentInfo.worksCount }}</text>
|
||
<text class="stat-label">作品量</text>
|
||
</view>
|
||
<!-- 加跟竖线 隔离下 -->
|
||
<view class="stat-item-line"></view>
|
||
<view class="stat-item fans">
|
||
<text class="stat-number">{{ talentInfo.fansCount }}</text>
|
||
<text class="stat-label">粉丝量</text>
|
||
</view>
|
||
</view>
|
||
<!-- 个人简介 -->
|
||
<view class="section-header">
|
||
<image class="crown-icon" src="/static/images/crown.png"></image>
|
||
<text class="section-title">个人简介</text>
|
||
</view>
|
||
<text class="intro-text">{{ talentInfo.introduction }}</text>
|
||
</view>
|
||
|
||
<!-- 选项卡导航 -->
|
||
<view class="tab-nav">
|
||
<view
|
||
v-for="(tab, index) in tabs"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ active: currentTab === index }"
|
||
@click="switchTab(index)"
|
||
>
|
||
<text>{{ tab }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 技术证书内容 -->
|
||
<view class="tab-content" v-if="currentTab === 0">
|
||
<!-- 技术证书列表 图片展示 -->
|
||
<TechnicalCertificates />
|
||
</view>
|
||
|
||
<!-- 个人履历内容 -->
|
||
<view class="tab-content" v-if="currentTab === 1">
|
||
<!-- 个人履历内容 -->
|
||
<Certificates :talentInfo="talentInfo" />
|
||
</view>
|
||
|
||
<!-- 作品展示内容 -->
|
||
<view class="tab-content" v-if="currentTab === 2">
|
||
<!-- 作品展示内容 -->
|
||
<Works :talentInfo="talentInfo" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
definePageMeta({ layout: 'm' })
|
||
import TechnicalCertificates from "~/components/m/detail-components/technicalCertificates.vue";
|
||
import Certificates from "~/components/m/detail-components/certificates.vue";
|
||
import Works from "~/components/m/detail-components/Works.vue";
|
||
import { reactive, ref } from 'vue'
|
||
|
||
const isFollowed = ref(false)
|
||
const currentTab = ref(0)
|
||
const tabs = ['技术证书', '个人履历', '作品展示']
|
||
const talentInfo = reactive({
|
||
id: 1,
|
||
name: '王刚',
|
||
avatar: '/static/images/avater2.png',
|
||
tags: ['五金工具', '电子产品'],
|
||
education: '重庆工商大学',
|
||
worksCount: 876,
|
||
fansCount: 98,
|
||
introduction:
|
||
'你好！我是专注于工业设计和机械设计领域的专业设计师，擅长进行外观设计、结构设计、板金设计等各类工程设计工作。我拥有丰富的经验，能够为客户提供高质量的设计解决方案，包括PCB外壳设计、框架设计、运动仿真、逆向工程等。此外，我熟练使用Creo、CAD等设计软件，能够进行精准的3D建模、渲染、2D工程图绘制、CAD代画以及三维转二维等工作。',
|
||
certificates: [
|
||
{ year: '2020年', description: '韩国内基211学府设计的一款月度采样机' },
|
||
{ year: '2021年', description: '韩国内基211学府设计的一款月度采样机' },
|
||
{ year: '2022年', description: '韩国内基211学府设计的一款月度采样机' },
|
||
{ year: '2023年', description: '韩国内基211学府设计的一款月度采样机' },
|
||
{ year: '2024年', description: '韩国内基211学府设计的一款月度采样机' },
|
||
{ year: '2025年', description: '韩国内基211学府设计的一款月度采样机' },
|
||
],
|
||
})
|
||
|
||
function followTalent() {
|
||
isFollowed.value = !isFollowed.value
|
||
}
|
||
function switchTab(index: number) {
|
||
currentTab.value = index
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.talent-detail {
|
||
min-height: 100vh;
|
||
background-color: #fff;
|
||
padding: 30rpx 30rpx 0;
|
||
background-image: url("@/static/images/talent-detail-bg.png");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: top;
|
||
|
||
// 个人信息卡片样式
|
||
.profile-card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 1px solid #eee;
|
||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
||
margin-top: 164rpx;
|
||
|
||
.profile-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.left-section {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.basic-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.name {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
|
||
.tag {
|
||
font-size: 24rpx;
|
||
color: #1a65ff;
|
||
background-color: #e6f0ff;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.education {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.follow-btn {
|
||
width: 89rpx;
|
||
height: 44rpx;
|
||
border-radius: 7rpx;
|
||
border: 1px solid #d7d7d7;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
font-size: 21rpx;
|
||
color: #0a6fff;
|
||
}
|
||
}
|
||
|
||
// 数据统计区域
|
||
.stats {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
margin-left: 140rpx;
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.stat-number {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
|
||
.stat-item-line {
|
||
width: 1px;
|
||
height: 90rpx;
|
||
background-color: #eee;
|
||
margin: 0 50rpx;
|
||
}
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
margin-bottom: 20rpx;
|
||
width: 100%;
|
||
justify-content: center;
|
||
height: 56rpx;
|
||
background: rgba(26, 101, 255, 0.1);
|
||
border-radius: 28rpx;
|
||
|
||
.crown-icon {
|
||
width: 40.97rpx;
|
||
height: 35.42rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 29rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.intro-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
// 选项卡导航
|
||
.tab-nav {
|
||
display: flex;
|
||
background-color: #fff;
|
||
border-radius: 12rpx 12rpx 0 0;
|
||
|
||
.tab-item {
|
||
padding: 24rpx 0;
|
||
margin-right: 60rpx;
|
||
position: relative;
|
||
font-size: 25rpx;
|
||
color: #666;
|
||
transition: all 0.3s ease;
|
||
|
||
&.active {
|
||
color: #1a65ff;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 14rpx;
|
||
width: 100%;
|
||
height: 4rpx;
|
||
background-color: #1a65ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 选项卡内容
|
||
.tab-content {
|
||
background-color: #fff;
|
||
border-radius: 0 0 12rpx 12rpx;
|
||
padding: 20rpx 0rpx;
|
||
}
|
||
}
|
||
</style>
|