402 lines
8.4 KiB
Vue
402 lines
8.4 KiB
Vue
<template>
|
|
<view class="home-page">
|
|
<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
|
|
<view class="safe-top"></view>
|
|
<view class="page-body">
|
|
<view class="banner-wrap">
|
|
<view class="banner-top">
|
|
<view>
|
|
<text class="banner-tag">军旅规划助手</text>
|
|
<text class="banner-title">高中生规划</text>
|
|
</view>
|
|
<view class="banner-search" @click="onTap('搜索')">
|
|
<uni-icons type="search" color="#ffffff" :size="18" />
|
|
</view>
|
|
</view>
|
|
<view class="banner-visual">
|
|
<view class="plane-icon">
|
|
<uni-icons type="paperplane-filled" color="#ffffff" :size="28" />
|
|
</view>
|
|
<view class="book-icon">
|
|
<uni-icons type="compose" color="#ffffff" :size="28" />
|
|
</view>
|
|
</view>
|
|
<view class="entry-grid">
|
|
<view v-for="item in heroEntries" :key="item" class="entry-item" @click="onTap(item)">
|
|
<text>{{ item }}</text>
|
|
<uni-icons type="forward" color="#ffffff" :size="14" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="pair-grid">
|
|
<view v-for="card in firstCards" :key="card.title" class="topic-card" :class="card.theme" @click="openTopic(card.topicKey)">
|
|
<view class="topic-head">
|
|
<text class="topic-title">{{ card.title }}</text>
|
|
<view class="head-arrow" @click.stop="openTopic(card.topicKey)">
|
|
<uni-icons type="arrow-right" color="#ffffff" :size="12" />
|
|
</view>
|
|
</view>
|
|
<view v-for="item in card.items" :key="item" class="topic-item" @click.stop="openTopic(card.topicKey)">
|
|
<text class="topic-text">{{ item }}</text>
|
|
<uni-icons type="forward" color="#ffffff" :size="12" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="core-strip" @click="onTap('义务兵报名及发展规划')">
|
|
<text>义务兵报名及发展规划</text>
|
|
</view>
|
|
|
|
<view class="pair-grid second-grid">
|
|
<view v-for="card in secondCards" :key="card.title" class="topic-card" :class="card.theme" @click="openTopic(card.topicKey)">
|
|
<view class="topic-head">
|
|
<text class="topic-title">{{ card.title }}</text>
|
|
<view class="head-arrow" @click.stop="openTopic(card.topicKey)">
|
|
<uni-icons type="arrow-right" color="#ffffff" :size="12" />
|
|
</view>
|
|
</view>
|
|
<view v-for="item in card.items" :key="item" class="topic-item" @click.stop="openTopic(card.topicKey)">
|
|
<text class="topic-text">{{ item }}</text>
|
|
<uni-icons type="forward" color="#ffffff" :size="12" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="qa-section">
|
|
<view class="qa-head">
|
|
<text class="qa-title">军旅问答</text>
|
|
<view class="qa-more" @click="onTap('军旅问答')">
|
|
<uni-icons type="arrow-right" color="#7a869a" :size="16" />
|
|
</view>
|
|
</view>
|
|
<view class="qa-grid">
|
|
<view v-for="item in qaCards" :key="item.title" class="qa-card" @click="onTap(item.title)">
|
|
<text class="qa-card-title">{{ item.title }}</text>
|
|
<text class="qa-card-text">{{ item.desc }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-space"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
enterActive: false,
|
|
heroEntries: ['军校报考', '定向军士', '体检政审', '最新政策'],
|
|
firstCards: [
|
|
{
|
|
title: '部队长期发展',
|
|
theme: 'theme-blue',
|
|
topicKey: 'long',
|
|
items: ['军校报考', '如何升职', '如何掌握更多技术', '如何让领导帮你']
|
|
},
|
|
{
|
|
title: '大学生规划',
|
|
theme: 'theme-sky',
|
|
topicKey: 'college',
|
|
items: ['义务兵', '直招士官', '直招军官', '入伍时机选择']
|
|
}
|
|
],
|
|
secondCards: [
|
|
{
|
|
title: '入伍准备',
|
|
theme: 'theme-green',
|
|
topicKey: 'prepare',
|
|
items: ['入伍时机', '身体检查', '军兵种介绍', '当兵注意事项']
|
|
},
|
|
{
|
|
title: '退伍规划',
|
|
theme: 'theme-sea',
|
|
topicKey: 'retire',
|
|
items: ['退役士兵考军队文职', '退役士兵考公务员', '免试专升本/专项考研']
|
|
}
|
|
],
|
|
qaCards: [
|
|
{
|
|
title: '高中生考学的条件',
|
|
desc: '学历要求、年龄条件、政治审查流程一文看懂。'
|
|
},
|
|
{
|
|
title: '报考军校',
|
|
desc: '年龄要求与报考节点如何安排，避免错过机会。'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onShow() {
|
|
this.playEnter();
|
|
},
|
|
methods: {
|
|
playEnter() {
|
|
this.enterActive = false;
|
|
setTimeout(() => {
|
|
this.enterActive = true;
|
|
}, 20);
|
|
},
|
|
openTopic(topic) {
|
|
uni.navigateTo({
|
|
url: `/pages/military/topic-map/topic-map?topic=${topic}`
|
|
});
|
|
},
|
|
onTap(label) {
|
|
uni.showToast({
|
|
title: `${label} 可点击`,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-page {
|
|
min-height: 100vh;
|
|
background: #f2f5fb;
|
|
}
|
|
|
|
.page-content {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-fade {
|
|
opacity: 0;
|
|
transform: translateY(8rpx);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.page-fade.enter-active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.safe-top {
|
|
height: calc(var(--status-bar-height) + 12rpx);
|
|
}
|
|
|
|
.page-body {
|
|
padding: 20rpx 24rpx 0;
|
|
}
|
|
|
|
.banner-wrap {
|
|
background: linear-gradient(135deg, #ffb15c 0%, #ff8730 100%);
|
|
border-radius: 28rpx;
|
|
padding: 24rpx;
|
|
box-shadow: 0 12rpx 30rpx rgba(255, 138, 51, 0.28);
|
|
}
|
|
|
|
.banner-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.banner-tag {
|
|
display: block;
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
.banner-title {
|
|
display: block;
|
|
margin-top: 10rpx;
|
|
font-size: 44rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.banner-search {
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.banner-visual {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.plane-icon,
|
|
.book-icon {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.entry-grid {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.entry-item {
|
|
width: 47%;
|
|
margin-bottom: 14rpx;
|
|
padding: 16rpx 14rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.pair-grid {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.topic-card {
|
|
width: 48.5%;
|
|
padding: 18rpx 16rpx;
|
|
border-radius: 24rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.theme-blue {
|
|
background: linear-gradient(145deg, #4d79ff 0%, #2f5be9 100%);
|
|
}
|
|
|
|
.theme-sky {
|
|
background: linear-gradient(145deg, #7cb7ff 0%, #5f90ff 100%);
|
|
}
|
|
|
|
.theme-green {
|
|
background: linear-gradient(145deg, #4ebd68 0%, #2d9750 100%);
|
|
}
|
|
|
|
.theme-sea {
|
|
background: linear-gradient(145deg, #3f8fe8 0%, #2f6dcb 100%);
|
|
}
|
|
|
|
.topic-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.topic-title {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.head-arrow {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.24);
|
|
}
|
|
|
|
.topic-item {
|
|
margin-top: 12rpx;
|
|
padding: 10rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.topic-text {
|
|
font-size: 22rpx;
|
|
max-width: 86%;
|
|
}
|
|
|
|
.core-strip {
|
|
margin-top: 18rpx;
|
|
padding: 20rpx;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #58b857 0%, #2f9447 100%);
|
|
}
|
|
|
|
.second-grid {
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.qa-section {
|
|
margin-top: 22rpx;
|
|
padding: 24rpx;
|
|
border-radius: 24rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0 8rpx 20rpx rgba(30, 45, 73, 0.08);
|
|
}
|
|
|
|
.qa-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.qa-title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #2d3a4f;
|
|
}
|
|
|
|
.qa-more {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f1f4fb;
|
|
}
|
|
|
|
.qa-grid {
|
|
margin-top: 18rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.qa-card {
|
|
width: 48%;
|
|
padding: 16rpx;
|
|
border-radius: 18rpx;
|
|
background: #f6f8fc;
|
|
}
|
|
|
|
.qa-card-title {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #26364d;
|
|
}
|
|
|
|
.qa-card-text {
|
|
display: block;
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
line-height: 1.5;
|
|
color: #66768d;
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 180rpx;
|
|
}
|
|
</style>
|