99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<template>
|
||
<div class="recommend-section">
|
||
<div class="tab-navigation">
|
||
<div
|
||
v-for="(tab, index) in tabs"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ active: currentTab === index }"
|
||
@click="switchTab(index)"
|
||
>
|
||
<span>{{ tab.title }}</span>
|
||
</div>
|
||
<button class="view-all" @click="viewAll">
|
||
<span>查看全部</span>
|
||
<span class="icon-right">›</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<recommend-list />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const currentTab = ref(0)
|
||
const tabs = ref([
|
||
{ title: '推荐图纸', type: 'drawings' },
|
||
{ title: '推荐模型', type: 'models' },
|
||
{ title: '推荐文本', type: 'documents' },
|
||
])
|
||
|
||
function switchTab(index: number) {
|
||
currentTab.value = index
|
||
}
|
||
|
||
function viewAll() {
|
||
const type = tabs.value[currentTab.value].type
|
||
router.push(`/mobile/${type}/list`)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.recommend-section {
|
||
// padding: 0 20rpx;
|
||
// margin: 30rpx 0 50rpx;
|
||
}
|
||
|
||
.tab-navigation {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 8rpx 0;
|
||
margin-right: 40rpx;
|
||
font-size: 29rpx;
|
||
color: #333;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
|
||
&.active {
|
||
color: #2970ff;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: "";
|
||
background-image: url("@/static/images/bg-yy.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.view-all {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.view-all .icon-right {
|
||
margin-left: 4rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
</style>
|