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

Restructure layout components and update page metadata

Browse Source
This commit is contained in:
wangqiao
2025-08-21 22:40:17 +08:00
parent b7113c4e12
commit bf86652ff2
7 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
components/kl-footer/index.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="mt-30px bg-[#14213d] px-[40px] pb-[20px] pt-[50px] text-white lg:px-[80px] sm:px-[60px]">
<!-- 主内容区 -->
<div class="mb-[40px] flex flex-col items-start justify-between gap-[30px] lg:flex-row">
<!-- 左侧 Logo -->
<div class="mx-auto w-[200px] shrink-0 lg:mx0">
<img src="~/assets/images/logo5.png" class="h-auto w-full" />
</div>
<!-- 中间部分 -->
<div class="grid grid-cols-2 mx-[80px] flex-1 gap-[10px] lg:grid-cols-3">
<div v-for="(col, index) in bannerList?.slice(0, 3)" :key="index">
<h3 v-if="handle(col)" class="ma-0px mb-[20px] pa-0px text-[16px]">{{ handle(col) }}</h3>
<ul>
<li
v-for="(item, i) in handle2(col)"
:key="i"
class="mb-[15px] cursor-pointer text-[15px] text-white/90"
:class="{ 'cursor-pointer hover:text-blue-400!': item.url }"
@click="handleClick(item)"
>
{{ item.name }}
</li>
</ul>
</div>
</div>
<!-- 右侧二维码 -->
<div class="flex shrink-0 flex-row gap-[30px]">
<div
v-for="(qr, i) in bannerList?.[3]"
:key="i"
class="text-center"
:class="{ 'cursor-pointer hover:text-blue-400!': qr.url }"
@click="handleClick(qr)"
>
<el-image :src="qr.content" class="mx-auto mb-[10px] w-[120px] rounded-lg bg-gray-400/20" />
<p class="text-[15px] text-white/90" :class="{ 'cursor-pointer hover:text-blue-400!': qr.url }">{{ qr.name }}</p>
</div>
</div>
</div>
<!-- 底部版权 -->
<div class="border-t border-white/20 pt-[20px] text-center text-[14px] text-white/70">
Copyright 2007-2025 图夕夕网络科技(成都)有限公司
<a href="http://beian.miit.gov.cn/" target="_blank" class="text-white/90 hover:text-blue-400!"> 蜀ICP备2025141494号-1</a>
</div>
<el-image-viewer v-if="showViewer" :url-list="previewImgList" :url-index="0" @close="showViewer = false"></el-image-viewer>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getSettingPage } from '~/api/home/index'
import type { PageResultIndexSettingRespVO } from '~/api/home/type'
// 导航数据
// const columns = [
// {
// title: '联系与合作',
// items: ['关于我们', '联系我们', '免责声明', '常见问题'],
// },
// {
// title: '关注我们',
// items: ['微信订阅号：多多机械', '微信服务号：多多网', '技术交流群：点此加入', '创收平台：为设计师创造收益'],
// },
// ]
// 二维码数据（需要替换真实图片路径）
// const qrcodes = [
// {
// img: new URL('~/assets/images/logo2.png', import.meta.url).href,
// text: '抖音电商关注官方号',
// },
// {
// img: new URL('~/assets/images/logo2.png', import.meta.url).href,
// text: '微信扫码关注官方助手',
// },
// ]
const pageReq = reactive({
type: 3,
status: 0,
})
const bannerList = ref<Array<PageResultIndexSettingRespVO[]>>([])
const getBanner = async () => {
const res = await getSettingPage(pageReq)
if (res.code === 0) {
const arr = res.data || []
const bannerListOne = arr.filter((item) => item.rowType === 1)?.sort((a, b) => a.sort - b.sort)
const bannerListTwo = arr.filter((item) => item.rowType === 2)?.sort((a, b) => a.sort - b.sort)
const bannerListThree = arr.filter((item) => item.rowType === 3)?.sort((a, b) => a.sort - b.sort)
const bannerListFour = arr.filter((item) => item.rowType === 4)?.sort((a, b) => a.sort - b.sort)
bannerList.value = [bannerListOne, bannerListTwo, bannerListThree, bannerListFour]
}
}
getBanner()
const handle = (col: PageResultIndexSettingRespVO[]) => {
if (col?.length > 0) {
return col[0].name
}
return ''
}
const handle2 = (col: PageResultIndexSettingRespVO[]) => {
if (col?.length > 0) {
return col.slice(1)
}
return []
}
/**
*
* @param item.innerType 区分 底部信息展示 0 文本 1 图片地址 2 站内链接地址 3 外部链接地址 4 富文本
*/
const showViewer = ref(false)
const previewImgList = ref<string[]>([])
const handleClick = (item: PageResultIndexSettingRespVO) => {
if (item.content && (item.innerType === 3 || item.innerType === 2)) {
window.open(item.content, '_blank')
} else if (item.content && (item.innerType === 4 || item.innerType === 0)) {
navigateTo(`/editor-view?content=${encodeURIComponent(item.content)}`)
} else if (item.innerType === 1 && item.content) {
showViewer.value = true
previewImgList.value = [item.content]
}
}
</script>
<style scoped lang="scss">
ul {
li {
list-style: none;
}
}
</style>

102
components/kl-menus-v2/index.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<div class="box-border">
<div class="flex items-center">
<div class="flex items-center">
<div class="box-border h-100% h-55px w-221px flex items-center rd-2px bg-[#1A65FF] pl-24px text-white">
<img src="~/assets/images/1.png" alt="" srcset="" />
<span class="ml-12px text-16px">全部资源分类</span>
</div>
<div class="item-center ml-45px w-660px flex justify-between">
<nuxt-link
v-for="(item, index) in menuItems"
:key="index"
:to="item.path"
class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
>
{{ item.name }}
<img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right--15px top--2px" />
</nuxt-link>
</div>
</div>
<div v-if="isLogin" class="flex flex-1 items-center justify-end">
<div class="h-36px w-36px cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center line-height-44px" @click="handleUserCenter">
<img src="~/assets/images/user.png" alt="" srcset="" class="h-19px w-17px" />
</div>
<div class="ml-8px h-36px w-36px cursor-pointer border-rd-[50%] text-center line-height-44px" @click="handleMessageCenter">
<el-icon size="20px" color="#999999"><BellFilled /></el-icon>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useUserStore from '~/store/user'
const userStore = useUserStore()
import { BellFilled } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
const menuItems = ref([
{ name: '首页', path: '/index' },
{ name: '图纸', path: '/drawe' },
{ name: '文本', path: '/text' },
{ name: '模型', path: '/model' },
{ name: '国外专区', path: '/foreign' },
{ name: '工具箱', path: '/toolbox' },
{ name: '交流频道', path: '/communication/channel' },
// { name: '牛人社区', path: '/community' },
])
// 是否登录
const isLogin = computed(() => {
return !!userStore.token
})
// 用户中心
const handleUserCenter = () => {
navigateTo('/personal/center/info')
}
// 消息中心
const handleMessageCenter = () => {
navigateTo('/personal/center/message')
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
/* 覆盖默认的input number样式 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.parent-links {
text-decoration: none;
font-size: 16px;
color: #1a65ff;
&:hover {
}
}
</style>

152
components/kl-search/index.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<div>
<header class="h-106px">
<div class="mx-a ml--250px h-full flex items-center justify-center">
<!-- Logo区域 -->
<div class="h-100% flex cursor-pointer items-center" @click="navigateTo('/')">
<img src="~/assets/images/logo5.png" alt="图夕夕" class="h-51px w-182px" />
</div>
<!-- 搜索区域 -->
<div class="relative ml-49px w-647px px4 p-r-0px!">
<div class="search-input relative w-100%">
<el-input
v-model="searchQuery"
type="text"
placeholder="搜一搜"
:prefix-icon="Search"
class="no-right-border box-border h-40px w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
@focus="handleHot(), (showHotList = true)"
@input="handleInput"
/>
</div>
<!-- 搜索框 获取到焦点 显示热门列表 -->
<div
v-if="showHotList"
v-loading="loading"
class="absolute z-100 w-625px border-width-1px border-color-#1A65FF rounded-bl-4px rounded-br-4px rounded-tl-0px rounded-tr-0px border-solid bg-[#fff] pa-10px"
>
<!-- 这里放置热门列表的内容 -->
<ul class="flex flex-col gap-6px">
<li
v-for="(item, index) in hotItems"
:key="index"
class="flex flex-row cursor-pointer items-center justify-between text-13px"
@click="handleHotItem(item)"
>
<span class="color-#333333">{{ item.projectTypeName }}</span>
<span v-if="item.count" class="color-#999999">{{ item.count }}份图纸</span>
</li>
</ul>
<div v-if="!hotItems.length" class="text-12px color-#999">无数据</div>
</div>
</div>
<!-- 按钮区域 -->
<div class="flex items-center">
<button
class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
>
搜索
</button>
<button
class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
@click="handleUpload"
>
上传图纸
</button>
</div>
</div>
</header>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useUserStore from '~/store/user'
const userStore = useUserStore()
import { top } from '~/api/home/index'
import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
import { page } from '~/api/upnew/index'
const searchQuery = ref('')
const showHotList = ref(false)
const hotItems = ref<ProjectDrawStatisticAppRespVO[]>([])
const handleUpload = () => {
// 是否登录
if (!userStore.token) return ElMessage.error('请先登录')
// 新开窗口 用router跳转 新窗口打开
navigateTo('/upnew/drawe')
}
const loading = ref(false)
const handleHot = async () => {
loading.value = true
const res = await top({
limit: 10,
type: 1, // 1 图纸 2 模型 3 文本
})
hotItems.value = res.data
loading.value = false
}
handleHot()
const timer = ref(0)
const handleInput = (val: string) => {
searchQuery.value = val
loading.value = true
if (timer.value) {
window.clearTimeout(timer.value)
}
timer.value = window.setTimeout(async () => {
console.log('searchQuery', searchQuery.value)
const res = await page({
pageNo: 1,
pageSize: 10,
type: 1, // 1 图纸 2 模型 3 文本
title: searchQuery.value, // 1 图纸 2 模型 3 文本
})
if (res.code === 0) {
hotItems.value = res.data.list.map((c) => {
return { ...c, projectTypeName: c.title }
})
}
loading.value = false
}, 200)
}
const handleHotItem = (item: ProjectDrawStatisticAppRespVO) => {
const normal = { id: '0', name: '图纸库', isChildren: false }
const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
level.unshift(normal)
if (item.type === 1) {
navigateTo(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`,)
} else if (item.type === 2) {
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`,)
} else if (item.type === 3) {
navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`,)
}
}
onMounted(() => {
// 监听点击事件
document.addEventListener('click', (event) => {
const target = event.target as HTMLElement
if (!target.closest('.search-input')) {
showHotList.value = false
}
})
})
</script>
<style scoped>
.no-right-border :deep(.el-input__wrapper) {
border-right: none !important;
/* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
}
/* 如果需要调整右侧圆角，可以添加 */
.no-right-border :deep(.el-input__wrapper) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
</style>