txai-dev/zhiyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify contact button styles, dynamic version from git tag, enrich AI positions & homepage UX

Browse Source
This commit is contained in:
yuzhiran
2026-06-21 09:16:31 +08:00
parent 1d1c4ab590
commit b8667395ac
4 changed files with 98 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zhiyin-app/src/pages/index/index.vue
+66 -23
View File
@@ -122,15 +122,22 @@
<text class="section-desc">AI 时代最热方向，点击直接面试</text>
</view>
<view class="ai-banner card" @click="goInterview">
<text class="ai-banner-title">🚀 AI 正在重塑整个行业</text>
<text class="ai-banner-desc">大模型应用 / Agent 开发 / Prompt 工程 — 顶尖人才缺口巨大，现在上车正当时</text>
<view class="ai-banner-icon-wrap">
<text class="ai-banner-icon">🤖</text>
</view>
<view class="ai-banner-body">
<text class="ai-banner-title">AI 正在重塑整个行业</text>
<text class="ai-banner-desc">大模型应用 / Agent 开发 / Prompt 工程 — 顶尖人才缺口巨大，现在上车正当时</text>
</view>
<text class="ai-banner-arrow">→</text>
</view>
<view class="position-list card" v-if="!positionsLoading && aiPositions.length > 0">
<view class="pos-item" v-for="(pos, idx) in aiPositions" :key="'ai-' + idx" @click="startInterview(pos)">
<view class="position-list card" v-if="!positionsLoading && displayAiPositions.length > 0">
<view class="pos-item" v-for="(pos, idx) in displayAiPositions" :key="'ai-' + idx" @click="startInterview(pos)">
<view class="pos-left">
<text class="pos-icon pos-icon-ai">{{ pos.icon || posIcons[idx % posIcons.length] || '🤖' }}</text>
<text class="pos-icon pos-icon-ai">{{ pos.icon || aiPosIcons[idx % aiPosIcons.length] || '🤖' }}</text>
<view class="pos-body">
<text class="pos-name">{{ pos.name }}</text>
<text class="pos-name-tag">AI 方向</text>
<view class="pos-meta-row" v-if="pos.company || pos.salary">
<text class="pos-company">{{ pos.company }}</text>
<text class="pos-salary">{{ pos.salary }}</text>
@@ -138,7 +145,7 @@
</view>
</view>
<view class="pos-action">
<text class="pos-action-text pos-action-ai">立即模拟</text>
<text class="pos-action-btn pos-action-ai">开始面试</text>
</view>
</view>
</view>
@@ -154,9 +161,10 @@
<view class="position-list card" v-if="showMore && !positionsLoading && traditionalPositions.length > 0">
<view class="pos-item" v-for="(pos, idx) in traditionalPositions" :key="'tr-' + idx" @click="startInterview(pos)">
<view class="pos-left">
<text class="pos-icon">{{ pos.icon || posIcons[(aiPositions.length + idx) % posIcons.length] || '💼' }}</text>
<text class="pos-icon">{{ pos.icon || posIcons[(displayAiPositions.length + idx) % posIcons.length] || '💼' }}</text>
<view class="pos-body">
<text class="pos-name">{{ pos.name }}</text>
<text class="pos-name-tag pos-name-tag-tr">{{ pos.category === 'intern' ? '实习' : '校招' }}</text>
<view class="pos-meta-row" v-if="pos.company || pos.salary">
<text class="pos-company">{{ pos.company }}</text>
<text class="pos-salary">{{ pos.salary }}</text>
@@ -164,7 +172,7 @@
</view>
</view>
<view class="pos-action">
<text class="pos-action-text">立即模拟</text>
<text class="pos-action-btn">立即模拟</text>
</view>
</view>
</view>
@@ -184,12 +192,27 @@ const userInfo = ref(null)
const greeting = ref('')
const hotPositions = ref([])
const posIcons = ['💻', '⚙️', '🤖', '📊', '🎨', '🧪', '📱', '🔧']
const aiPosIcons = ['🤖', '🧠', '⚡', '🚀', '💡', '🔬']
const positionsLoading = ref(true)
const dailyQuestion = ref(null)
const showAnswer = ref(false)
const showMore = ref(false)
const showMore = ref(true)
// 前端兜底 AI 岗位（当 API 返回不足时展示）
const FALLBACK_AI_POSITIONS = [
{ name: 'AI Agent 开发工程师', category: 'ai', company: '热门方向', salary: '30K-60K', icon: '🧠' },
{ name: '大模型应用开发', category: 'ai', company: '热门方向', salary: '25K-50K', icon: '⚡' },
]
const aiPositions = computed(() => hotPositions.value.filter(p => p.category === 'ai'))
const displayAiPositions = computed(() => {
const fromApi = aiPositions.value
if (fromApi.length >= 4) return fromApi
// 补充到至少 4 个，去重
const existingNames = new Set(fromApi.map(p => p.name))
const needed = FALLBACK_AI_POSITIONS.filter(p => !existingNames.has(p.name))
return [...fromApi, ...needed]
})
const traditionalPositions = computed(() => hotPositions.value.filter(p => p.category !== 'ai'))
const loadUserInfo = () => {
@@ -355,40 +378,60 @@ const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/intervie
/* AI 岗位专区 */
.ai-banner {
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
padding: 20rpx 24rpx; border-radius: var(--radius-lg); margin-bottom: 16rpx;
cursor: pointer;
display: flex; align-items: center; gap: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(251,191,36,0.2);
cursor: pointer; transition: transform 0.15s;
}
.ai-banner:active { transform: scale(0.98); }
.ai-banner-title { font-size: 26rpx; font-weight: 700; color: #92400E; display: block; margin-bottom: 6rpx; }
.ai-banner:active { transform: scale(0.97); }
.ai-banner-icon-wrap {
width: 64rpx; height: 64rpx; border-radius: 18rpx;
background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-banner-icon { font-size: 36rpx; }
.ai-banner-body { flex: 1; min-width: 0; }
.ai-banner-title { font-size: 26rpx; font-weight: 700; color: #92400E; display: block; margin-bottom: 4rpx; }
.ai-banner-desc { font-size: 20rpx; color: #A16207; line-height: 1.5; display: block; }
.ai-banner-arrow { font-size: 28rpx; color: #B45309; font-weight: 600; flex-shrink: 0; }
.position-list { border-radius: var(--radius-lg); overflow: hidden; }
.pos-item { padding: 24rpx 28rpx; border-bottom: 1rpx solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.pos-item { padding: 26rpx 28rpx; border-bottom: 1rpx solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.pos-item:last-child { border-bottom: none; }
.pos-item:active { background: var(--color-bg); }
.pos-item:active { background: #F9FAFB; }
.pos-left { display: flex; align-items: center; gap: 16rpx; flex: 1; min-width: 0; }
.pos-icon { font-size: 36rpx; width: 56rpx; height: 56rpx; display: flex; align-items: center; justify-content: center; background: #F3F4F6; border-radius: 14rpx; flex-shrink: 0; }
.pos-icon-ai { background: #FEF3C7; }
.pos-icon { font-size: 32rpx; width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; background: #F3F4F6; border-radius: 16rpx; flex-shrink: 0; }
.pos-icon-ai { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.pos-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pos-name { font-size: 28rpx; font-weight: 600; color: var(--color-text); }
.pos-name-tag {
font-size: 18rpx; color: #D97706; background: #FFFBEB; padding: 1rpx 10rpx;
border-radius: 6rpx; align-self: flex-start; margin-top: 6rpx;
}
.pos-name-tag-tr { color: var(--color-primary); background: #EEF2FF; }
.pos-meta-row { display: flex; align-items: center; gap: 10rpx; margin-top: 4rpx; }
.pos-company { font-size: 20rpx; color: var(--color-text-tertiary); }
.pos-salary { font-size: 20rpx; color: var(--color-primary); background: #EEF2FF; padding: 2rpx 10rpx; border-radius: 6rpx; }
.pos-action { flex-shrink: 0; margin-left: 16rpx; }
.pos-action-text { font-size: 22rpx; color: var(--color-primary); font-weight: 600; }
.pos-action-ai { color: #D97706; }
.pos-action-btn {
font-size: 22rpx; font-weight: 600; color: var(--color-primary);
padding: 10rpx 24rpx; border-radius: var(--radius-round);
background: #EEF2FF; display: inline-block;
}
.pos-action-btn:active { background: #DBEAFE; }
.pos-action-ai { color: #D97706; background: #FFFBEB; }
/* 更多岗位折叠 */
/* 更多岗位 */
.more-header {
display: flex; justify-content: space-between; align-items: center;
padding: 20rpx 4rpx; margin-top: 8rpx; cursor: pointer;
padding: 24rpx 20rpx 16rpx; margin-top: 8rpx; cursor: pointer;
background: #FFFFFF; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.more-header:active { opacity: 0.7; }
.more-header-left { display: flex; align-items: center; gap: 10rpx; }
.more-icon { font-size: 28rpx; }
.more-title { font-size: 26rpx; font-weight: 600; color: var(--color-text-secondary); }
.more-arrow { font-size: 22rpx; color: var(--color-primary); font-weight: 500; }
.more-title { font-size: 26rpx; font-weight: 600; color: var(--color-text); }
.more-arrow { font-size: 22rpx; color: var(--color-primary); font-weight: 500; background: #EEF2FF; padding: 4rpx 16rpx; border-radius: var(--radius-round); }
.loading-tip { text-align: center; padding: 40rpx; font-size: 24rpx; color: var(--color-text-tertiary); background: #FFF; border-radius: var(--radius-lg); }
.bottom-spacer { height: 40rpx; }