wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加移动端页面组件和图片资源

Browse Source
This commit is contained in:
wangqiao
2025-09-03 17:06:39 +08:00
parent 7f2edb91e4
commit b1d2378cec
37 changed files with 2426 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
pages/mobile/talent-detail/index.vue Normal file
View File

@ -0,0 +1,309 @@
<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>