Skip to content

C
corporateCulture-qd
Commit ebf8fa50 by lijiabin
Options

【需求 17679】 feat: 优化、调整UI等

parent 6a3cf54d
Showing with 219 additions and 102 deletions
src/api/login/types.ts
...@@ -16,6 +16,7 @@ export interface LoginResponseDto { ...@@ -16,6 +16,7 @@ export interface LoginResponseDto {
permissions: any[] | null permissions: any[] | null
userRelated: any[] | null userRelated: any[] | null
isOfficialAccount: boolean | null isOfficialAccount: boolean | null
isAdmin: boolean
firstDeptId: number | null firstDeptId: number | null
password: string | null password: string | null
enabled: boolean enabled: boolean
......
src/components/common/ArticleContent/index.vue
...@@ -11,20 +11,20 @@ ...@@ -11,20 +11,20 @@
alt="" alt=""
class="w-12 h-12 rounded-full object-cover" class="w-12 h-12 rounded-full object-cover"
/> />
<div <!-- <div
class="absolute -bottom-1 -right-1 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full flex items-center justify-center text-xs font-bold text-white" class="absolute -bottom-1 -right-1 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full flex items-center justify-center text-xs font-bold text-white"
> >
8 8
</div> </div> -->
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<h3 class="font-semibold text-gray-800">{{ articleDetail?.createUserName }}</h3> <h3 class="font-semibold text-gray-800">{{ articleDetail?.createUserName }}</h3>
<span <!-- <span
class="px-2 py-0.5 text-xs bg-gradient-to-r from-purple-100 to-blue-100 text-purple-600 rounded-full" class="px-2 py-0.5 text-xs bg-gradient-to-r from-purple-100 to-blue-100 text-purple-600 rounded-full"
> >
资深前端工程师 资深前端工程师
</span> </span> -->
</div> </div>
<p class="text-sm text-gray-500 mt-1"> <p class="text-sm text-gray-500 mt-1">
{{ dayjs((articleDetail?.createTime || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }} {{ dayjs((articleDetail?.createTime || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}
......
src/components/common/Comment/index.vue
...@@ -100,12 +100,12 @@ ...@@ -100,12 +100,12 @@
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span class="font-semibold text-gray-800">{{ item.replyUser }}</span> <span class="font-semibold text-gray-800">{{ item.replyUser }}</span>
<span <!-- <span
class="px-2 py-0.5 text-xs bg-gradient-to-r from-purple-100 to-blue-100 text-purple-600 rounded-full" class="px-2 py-0.5 text-xs bg-gradient-to-r from-purple-100 to-blue-100 text-purple-600 rounded-full"
> >
技术专家 技术专家
</span> </span> -->
<span class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">置顶</span> <!-- <span class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">置顶</span> -->
</div> </div>
<!-- 换行 --> <!-- 换行 -->
<p class="text-gray-700 mb-3 break-all"> <p class="text-gray-700 mb-3 break-all">
...@@ -311,7 +311,8 @@ const handleReply = (item: CommentItemDto) => { ...@@ -311,7 +311,8 @@ const handleReply = (item: CommentItemDto) => {
} }
const showCommentBox = (item: CommentItemDto) => { const showCommentBox = (item: CommentItemDto) => {
return ( return (
currentCommentId.value === item.id || item.children?.some((i) => i.id === currentCommentId.value) currentCommentId.value === item.id ||
item.children?.some((i) => i.id === currentCommentId.value)
) )
} }
......
src/layoutCulture/index.vue
<template> <template>
<div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]"> <div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]">
<div <div
class="header flex px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-100 w-100vw"> class="header flex px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-100 w-100vw"
>
<!-- Logo区域 --> <!-- Logo区域 -->
<div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer"> <div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer">
<img class="h-10 mr-3 object-contain flex-shrink-0 sm:h-10 sm:mr-4" <img
src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2022/10/13/1665643779583.png" alt="" /> class="h-10 mr-3 object-contain flex-shrink-0 sm:h-10 sm:mr-4"
src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2022/10/13/1665643779583.png"
alt=""
/>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<!-- 搜索框 --> <!-- 搜索框 -->
<div v-show="showSearchInupt" class="flex-1 max-w-sm mx-4 hidden md:block lg:max-w-md lg:mx-6"> <div
v-show="showSearchInupt"
class="flex-1 max-w-sm mx-4 hidden md:block lg:max-w-md lg:mx-6"
>
<el-input v-model="search" class="h-8" placeholder="搜索"> <el-input v-model="search" class="h-8" placeholder="搜索">
<template #suffix> <template #suffix>
<el-icon class="text-gray-400" @click="router.push('/searchPage?title=' + search)"> <el-icon class="text-gray-400" @click="router.push('/searchPage?title=' + search)">
...@@ -23,20 +30,44 @@ ...@@ -23,20 +30,44 @@
<div class="flex items-center gap-1 flex-shrink-0 sm:gap-2 lg:gap-4"> <div class="flex items-center gap-1 flex-shrink-0 sm:gap-2 lg:gap-4">
<div <div
class="flex items-center cursor-pointer px-2 py-1 rounded transition-colors sm:px-3 sm:py-2 hover:shadow-lg duration-200" class="flex items-center cursor-pointer px-2 py-1 rounded transition-colors sm:px-3 sm:py-2 hover:shadow-lg duration-200"
@click="router.push('/userPage')"> @click="router.push('/userPage')"
<img class="w-8 h-8 object-contain flex-shrink-0 rounded-full" :src="userInfo?.avatar" alt="个人中心" /> >
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline">个人中心</span> <img
class="w-8 h-8 object-contain flex-shrink-0 rounded-full"
:src="userInfo?.avatar"
alt="个人中心"
/>
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline"
>个人中心</span
>
</div> </div>
<div class="flex items-center cursor-pointer px-2 py-1 rounded sm:px-3 sm:py-2 hover:shadow-lg duration-200"> <div
<img class="w-7 h-7 object-contain flex-shrink-0" src="@/assets/img/culture/feedback.png" alt="" /> class="flex items-center cursor-pointer px-2 py-1 rounded sm:px-3 sm:py-2 hover:shadow-lg duration-200"
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline">意见反馈</span> >
<img
class="w-7 h-7 object-contain flex-shrink-0"
src="@/assets/img/culture/feedback.png"
alt=""
/>
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline"
>意见反馈</span
>
</div> </div>
<el-dropdown placement="top-start" @command="handlePost" @visible-change="(val) => (isDropdownHover = val)"> <el-dropdown
placement="top-start"
@command="handlePost"
@visible-change="(val) => (isDropdownHover = val)"
>
<button <button
class="cursor-pointer w-24 h-9 text-black hover:text-black bg-[linear-gradient(to_right,#B3B8FD_0%,#7083FF_100%)] border-none duration-200 flex-1 text-xs sm:text-sm rounded-xl group" class="cursor-pointer w-24 h-9 text-black hover:text-black bg-[linear-gradient(to_right,#B3B8FD_0%,#7083FF_100%)] border-none duration-200 flex-1 text-xs sm:text-sm rounded-xl group"
:class="{ 'shadow-[0_1px_8px_0_rgba(95,0,237,0.25)]': isDropdownHover }"> :class="{ 'shadow-[0_1px_8px_0_rgba(95,0,237,0.25)]': isDropdownHover }"
<img class="h-7 w-7 transition-transform duration-300 ease-in-out" >
:class="{ 'rotate-90': isDropdownHover }" src="@/assets/img/culture/post.png" alt="" /> <img
class="h-7 w-7 transition-transform duration-300 ease-in-out"
:class="{ 'rotate-90': isDropdownHover }"
src="@/assets/img/culture/post.png"
alt=""
/>
去发帖 去发帖
</button> </button>
<template #dropdown> <template #dropdown>
...@@ -52,7 +83,9 @@ ...@@ -52,7 +83,9 @@
</div> </div>
</div> </div>
<div class="flex-1 w-full flex items-center justify-center"> <div class="flex-1 w-full flex items-center justify-center">
<div class="container max-h-none px-20 lg:px-20 2xl:px-30 transition-all duration-300 min-h-[calc(100vh-96px)]"> <div
class="container max-h-none px-0 lg:px-10 2xl:px-30 transition-all duration-300 min-h-[calc(100vh-96px)]"
>
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<!-- 注释不能放到keep-alive下面 route是最终的路由信息 Component是当前n级路由的组件 二级路由 homePage videoDetail --> <!-- 注释不能放到keep-alive下面 route是最终的路由信息 Component是当前n级路由的组件 二级路由 homePage videoDetail -->
......
src/utils/request/axios.ts
...@@ -46,12 +46,12 @@ export default class DhRequest { ...@@ -46,12 +46,12 @@ export default class DhRequest {
return handleBackendError(backendResult) return handleBackendError(backendResult)
} }
// 设置token // 设置token
if (response.headers.authorization) { // if (response.headers.authorization) {
const userStore = useUserStore() // const userStore = useUserStore()
userStore.setToken(response.headers.authorization) // userStore.setToken(response.headers.authorization)
// 存在本地 // // 存在本地
localStorage.setItem('token', response.headers.authorization) // localStorage.setItem('token', response.headers.authorization)
} // }
return response.data return response.data
} else { } else {
// 处理请求成功后错误 // 处理请求成功后错误
......
src/views/articleDetail/components/actionButtons.vue
<template> <template>
<div <div
class="fixed 2xl:right-50 lg:right-20 right-10 top-70% -translate-y-50% flex flex-col items-center content-center gap-5" class="fixed lg:right-5 right-5 top-70% -translate-y-50% flex flex-col items-center content-center gap-5 z-100"
> >
<div class="flex flex-col bg-white rounded-8px shadow-md overflow-hidden"> <div class="flex flex-col bg-white rounded-8px shadow-md overflow-hidden">
<div <div
......
src/views/articleDetail/index.vue
<template> <template>
<div class="min-h-screen px-20"> <div class="min-h-screen">
<!-- 主内容区 --> <!-- 主内容区 -->
<ActionButtons <ActionButtons
v-model="articleDetail" v-model="articleDetail"
......
src/views/backend/carousel/index.vue
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<el-form-item label="显示资源" prop="image"> <el-form-item label="显示资源" prop="image">
<div class="upload-section"> <div class="upload-section">
<UploadFile v-model="form.assetUrl" /> <UploadFile v-model="form.assetUrl" :limit="1" />
<div class="upload-hint">上传图片，推荐比例为 W/H: 1280 / 480</div> <div class="upload-hint">上传图片，推荐比例为 W/H: 1280 / 480</div>
</div> </div>
</el-form-item> </el-form-item>
......
src/views/backend/index.vue
...@@ -53,7 +53,7 @@ interface MenuItem { ...@@ -53,7 +53,7 @@ interface MenuItem {
} }
const menuList: MenuItem[] = [ const menuList: MenuItem[] = [
{ path: '/backend/manager', title: '企业文化管理员' }, // { path: '/backend/manager', title: '企业文化管理员' },
{ path: '/backend/tags', title: '官方标签' }, { path: '/backend/tags', title: '官方标签' },
{ path: '/backend/carousel', title: '轮播图设置' }, { path: '/backend/carousel', title: '轮播图设置' },
// { path: '/backend/topic-admin', title: '专栏——管理员' }, // { path: '/backend/topic-admin', title: '专栏——管理员' },
......
src/views/homePage/askTab/index.vue
...@@ -38,12 +38,12 @@ ...@@ -38,12 +38,12 @@
/> />
<!-- 问题内容 --> <!-- 问题内容 -->
<div> <div>
<p class="text-gray-600 text-base leading-relaxed line-clamp-2"> <p class="text-gray-600 text-base leading-relaxed">
{{ item.content }} {{ item.content }}
</p> </p>
<!-- line-clamp-2 -->
<!-- 展开/收起按钮 --> <!-- 展开/收起按钮 -->
<el-button <!-- <el-button
v-if="item.content.length > 100 && !item.isExpand" v-if="item.content.length > 100 && !item.isExpand"
@click="handleReadMore(item)" @click="handleReadMore(item)"
type="primary" type="primary"
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
> >
阅读全文 阅读全文
<el-icon class="ml-1"><ArrowDown /></el-icon> <el-icon class="ml-1"><ArrowDown /></el-icon>
</el-button> </el-button> -->
</div> </div>
</div> </div>
<!-- 底部信息栏 --> <!-- 底部信息栏 -->
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<!-- 左侧：发布人信息 --> <!-- 左侧：发布人信息 -->
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-orange-500 text-sm font-medium">发布人</span> <!-- <span class="text-orange-500 text-sm font-medium">发布人</span> -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<el-avatar :size="20" :src="item.showAvatar"> </el-avatar> <el-avatar :size="20" :src="item.showAvatar"> </el-avatar>
<span class="text-sm text-gray-700 font-medium">{{ item.showName }}</span> <span class="text-sm text-gray-700 font-medium">{{ item.showName }}</span>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
}}</span> }}</span>
<!-- 操作按钮组 --> <!-- 操作按钮组 -->
<div class="flex items-center"> <!-- <div class="flex items-center">
<el-button size="small" plain> <el-button size="small" plain>
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
添加 添加
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
<el-icon><Warning /></el-icon> <el-icon><Warning /></el-icon>
举报 举报
</el-button> </el-button>
</div> </div> -->
</div> </div>
<!-- 右侧：统计信息 --> <!-- 右侧：统计信息 -->
......
src/views/homePage/index.vue
...@@ -11,13 +11,19 @@ ...@@ -11,13 +11,19 @@
<div class="flex gap-3"> <div class="flex gap-3">
<div class="left flex-1 basis-full xl:basis-3/4 transition-all duration-500"> <div class="left flex-1 basis-full xl:basis-3/4 transition-all duration-500">
<div ref="tabsRef" class="tabs-container h-75px flex relative rounded-lg mb-3 shadow-md"> <div ref="tabsRef" class="tabs-container h-75px flex relative rounded-lg mb-3 shadow-md">
<div v-for="tab in tabs" :key="tab.path" <div
v-for="tab in tabs"
:key="tab.path"
class="flex-1 flex items-center justify-center cursor-pointer relative transition-all duration-300 group" class="flex-1 flex items-center justify-center cursor-pointer relative transition-all duration-300 group"
@click="toggleTab(tab)"> @click="toggleTab(tab)"
<div class="flex items-center gap-2 px-12 py-2.5 rounded-lg transition-all duration-300" :class="{ >
'bg-#fffdfd shadow-[inset_0_2px_4px_0_rgb(0,0,0,0.1)]': activeTab === tab.name, <div
'hover:bg-white/60': activeTab !== tab.name, class="flex items-center gap-2 px-12 py-2.5 rounded-lg transition-all duration-300"
}"> :class="{
'bg-#fffdfd shadow-[inset_0_2px_4px_0_rgb(0,0,0,0.1)]': activeTab === tab.name,
'hover:bg-white/60': activeTab !== tab.name,
}"
>
<svg-icon :name="tab.svg" class="h-60px w-auto md:h-50px sm:h-40px" size="40" /> <svg-icon :name="tab.svg" class="h-60px w-auto md:h-50px sm:h-40px" size="40" />
<div class="text-18px font-500 text-gray-800 md:text-16px sm:text-14px"> <div class="text-18px font-500 text-gray-800 md:text-16px sm:text-14px">
{{ tab.name }} {{ tab.name }}
...@@ -27,7 +33,8 @@ ...@@ -27,7 +33,8 @@
</div> </div>
<div <div
class="content-container w-100% rounded-lg bg-#F5F8FD border-1px border-solid border-#EAEAEF shadow-[0_1px_4px_0_rgba(33,33,52,0.1)]"> class="content-container w-100% rounded-lg bg-#F5F8FD border-1px border-solid border-#EAEAEF shadow-[0_1px_4px_0_rgba(33,33,52,0.1)]"
>
<div class="content-wrapper p-6"> <div class="content-wrapper p-6">
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
...@@ -42,8 +49,10 @@ ...@@ -42,8 +49,10 @@
<!-- 屏幕变小直接隐藏 --> <!-- 屏幕变小直接隐藏 -->
<div class="right flex-col gap-3 xl:flex xl:basis-1/4 hidden"> <div class="right flex-col gap-3 xl:flex xl:basis-1/4 hidden">
<!-- 等级等相关信息 --> <!-- 等级等相关信息 -->
<div ref="levelContainerRef" <div
class="level-container common-box flex flex-col justify-center items-center gap-4 rounded-lg bg-#E4F5FE"> ref="levelContainerRef"
class="level-container common-box flex flex-col justify-center items-center gap-4 rounded-lg bg-#E4F5FE"
>
<div class="top flex items-center justify-center gap-3"> <div class="top flex items-center justify-center gap-3">
<img class="h-20" :src="currentLevelData?.iconUrl" alt="" /> <img class="h-20" :src="currentLevelData?.iconUrl" alt="" />
<div class="text-base flex-3/4 flex flex-col gap-1"> <div class="text-base flex-3/4 flex flex-col gap-1">
...@@ -51,16 +60,20 @@ ...@@ -51,16 +60,20 @@
<div class="font-semibold">等级：{{ currentLevelData?.label }}</div> <div class="font-semibold">等级：{{ currentLevelData?.label }}</div>
<el-tooltip <el-tooltip
:content="`当前经验：${userAccountData.expTotal}/${currentLevelData.expScope[1]} (${currentLevelData.percentage}%)`" :content="`当前经验：${userAccountData.expTotal}/${currentLevelData.expScope[1]} (${currentLevelData.percentage}%)`"
placement="top"> placement="top"
>
<div class="relative w-20 cursor-pointer"> <div class="relative w-20 cursor-pointer">
<div class="relative w-full h-4 bg-#A5E4FF rounded-full border-1 border-#30C4FF border-solid"> <div
class="relative w-full h-4 bg-#A5E4FF rounded-full border-1 border-#30C4FF border-solid"
>
<div class="absolute left-0 top-0 h-full bg-#30C4FF rounded-full"></div> <div class="absolute left-0 top-0 h-full bg-#30C4FF rounded-full"></div>
<div <div
class="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 via-blue-400 to-cyan-400 rounded-full transition-all duration-500 ease-out" class="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 via-blue-400 to-cyan-400 rounded-full transition-all duration-500 ease-out"
:style="{ width: `${currentLevelData.percentage}%` }"> :style="{ width: `${currentLevelData.percentage}%` }"
>
<div <div
class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/40 to-transparent rounded-t-full"> class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/40 to-transparent rounded-t-full"
</div> ></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -75,17 +88,22 @@ ...@@ -75,17 +88,22 @@
<div ref="dailySignBtnRef"> <div ref="dailySignBtnRef">
<el-button <el-button
class="bg-[linear-gradient(to_right,#FFD06A_0%,#FFB143_100%)] shadow-[0px_1px_8px_0_rgba(255,173,91,0.25)] border-none hover:-translate-y-1 hover:shadow-[0px_4px_10px_0_rgba(255,173,91,0.4)] hover:scale-105 active:scale-95 active:translate-y-0 transition-all duration-200 flex-1 text-xs sm:text-sm" class="bg-[linear-gradient(to_right,#FFD06A_0%,#FFB143_100%)] shadow-[0px_1px_8px_0_rgba(255,173,91,0.25)] border-none hover:-translate-y-1 hover:shadow-[0px_4px_10px_0_rgba(255,173,91,0.4)] hover:scale-105 active:scale-95 active:translate-y-0 transition-all duration-200 flex-1 text-xs sm:text-sm"
type="primary" @click="onDailySign" v-if="!userRecordData.isSign"> type="primary"
@click="onDailySign"
v-if="!userRecordData.isSign"
>
<!-- v-if="!userRecordData.isSign" --> <!-- v-if="!userRecordData.isSign" -->
<svg-icon name="sign_in" size="35" /> <svg-icon name="sign_in" size="24" class="mr-2 mb-1" />
<span class="text-black text-xs sm:text-sm">立即签到</span> <span class="text-black text-xs sm:text-sm">立即签到</span>
</el-button> </el-button>
</div> </div>
<el-button <el-button
class="bg-[linear-gradient(to_right,#ABB0FF_0%,#7495FF_100%)] shadow-[0_1px_8px_0_rgba(0,36,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 flex-1 text-xs sm:text-sm w-116px" class="bg-[linear-gradient(to_right,#ABB0FF_0%,#7495FF_100%)] shadow-[0_1px_8px_0_rgba(0,36,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 flex-1 text-xs sm:text-sm w-116px"
type="primary" @click="router.push('/pointsStore')"> type="primary"
<svg-icon name="points_store" size="30" /> @click="router.push('/pointsStore')"
>
<svg-icon name="points_store" size="24" class="mr-2 mb-1" />
<span class="text-black text-xs sm:text-sm">积分商城</span> <span class="text-black text-xs sm:text-sm">积分商城</span>
</el-button> </el-button>
</div> </div>
...@@ -103,7 +121,9 @@ ...@@ -103,7 +121,9 @@
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<el-button <el-button
class="bg-[linear-gradient(to_right,#A3EADC_0%,#7BE0BD_100%)] shadow-[0_1px_4px_0_rgba(168,225,210,1)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px" class="bg-[linear-gradient(to_right,#A3EADC_0%,#7BE0BD_100%)] shadow-[0_1px_4px_0_rgba(168,225,210,1)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px"
type="primary" @click="router.push('/publishCase')"> type="primary"
@click="router.push('/publishCase')"
>
<svg-icon name="submit" size="20" class="mr-2" /> <svg-icon name="submit" size="20" class="mr-2" />
<span class="text-black text-xs sm:text-sm">去投稿</span> <span class="text-black text-xs sm:text-sm">去投稿</span>
</el-button> </el-button>
...@@ -114,26 +134,32 @@ ...@@ -114,26 +134,32 @@
<div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4"> <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4">
<div <div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10" class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
@click="router.push('/homePage/askTab')"> @click="router.push('/homePage/askTab')"
>
<svg-icon name="topic_release" size="80" /> <svg-icon name="topic_release" size="80" />
<div class="text-xs sm:text-sm">话题发布</div> <div class="text-xs sm:text-sm">话题发布</div>
</div> </div>
<div <div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10" class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
@click="router.push('/homePage/askTab')"> @click="router.push('/homePage/askTab')"
>
<svg-icon name="answer" size="80" /> <svg-icon name="answer" size="80" />
<div class="text-xs sm:text-sm">回答问题</div> <div class="text-xs sm:text-sm">回答问题</div>
</div> </div>
<div @click="router.push('/publishVideo')" <div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"> @click="router.push('/publishVideo')"
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
>
<svg-icon name="video_release" size="80" /> <svg-icon name="video_release" size="80" />
<div class="text-xs sm:text-sm">视频发布</div> <div class="text-xs sm:text-sm">视频发布</div>
</div> </div>
</div> </div>
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<el-button @click="router.push('/homePage/askTab')" <el-button
@click="router.push('/homePage/askTab')"
class="bg-[linear-gradient(to_right,#D6C9FF_0%,#C5B1FF_100%)] shadow-[0_1px_4px_0_rgba(95,0,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px" class="bg-[linear-gradient(to_right,#D6C9FF_0%,#C5B1FF_100%)] shadow-[0_1px_4px_0_rgba(95,0,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px"
type="primary"> type="primary"
>
<svg-icon name="my_answer" size="20" class="mr-2" /> <svg-icon name="my_answer" size="20" class="mr-2" />
<span class="text-black text-xs sm:text-sm">我的回答</span> <span class="text-black text-xs sm:text-sm">我的回答</span>
</el-button> </el-button>
...@@ -148,12 +174,17 @@ ...@@ -148,12 +174,17 @@
<div class="w-1 h-4 bg-gradient-to-b from-pink-500 to-rose-500 rounded-full"></div> <div class="w-1 h-4 bg-gradient-to-b from-pink-500 to-rose-500 rounded-full"></div>
<h1 class="text-sm sm:text-base font-bold">任务中心</h1> <h1 class="text-sm sm:text-base font-bold">任务中心</h1>
</div> </div>
<h2 class="w-full text-xs sm:text-sm mt-1 text-gray-600 flex items-center justify-between"> <h2
class="w-full text-xs sm:text-sm mt-1 text-gray-600 flex items-center justify-between"
>
<div> <div>
<span v-for="item in taskTypeList" :key="item.value" <span
v-for="item in taskTypeList"
:key="item.value"
class="text-#333 cursor-pointer after:content-['|'] after:mx-2 after:text-#999 last:after:content-none" class="text-#333 cursor-pointer after:content-['|'] after:mx-2 after:text-#999 last:after:content-none"
:class="{ 'text-#999': currentTask !== item.value }" @click="currentTask = item.value">{{ item.label :class="{ 'text-#999': currentTask !== item.value }"
}} @click="currentTask = item.value"
>{{ item.label }}
</span> </span>
</div> </div>
<span class="text-#999 cursor-pointer" @click="router.push(`/userPage?key=task`)"> <span class="text-#999 cursor-pointer" @click="router.push(`/userPage?key=task`)">
...@@ -167,12 +198,15 @@ ...@@ -167,12 +198,15 @@
<div v-show="currentTaskList.length"> <div v-show="currentTaskList.length">
<div v-for="item in currentTaskList" :key="item.id"> <div v-for="item in currentTaskList" :key="item.id">
<div <div
class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group"> class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group"
>
<div class="flex items-center min-w-0 flex-1"> <div class="flex items-center min-w-0 flex-1">
<div class="h-70px flex items-center justify-center"> <div class="h-70px flex items-center justify-center">
<svg-icon :name="item.svgName" size="50" /> <svg-icon :name="item.svgName" size="50" />
</div> </div>
<div class="flex flex-col items-start justify-center ml-2 sm:ml-3 min-w-0 flex-1"> <div
class="flex flex-col items-start justify-center ml-2 sm:ml-3 min-w-0 flex-1"
>
<el-tooltip :content="item.description" placement="top"> <el-tooltip :content="item.description" placement="top">
<div class="text-14px truncate w-full font-medium mb-1 cursor-pointer"> <div class="text-14px truncate w-full font-medium mb-1 cursor-pointer">
{{ item.title }}({{ item.currentCount }}/{{ item.limitCount }}) {{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
...@@ -196,10 +230,16 @@ ...@@ -196,10 +230,16 @@
item.currentCount === item.limitCount item.currentCount === item.limitCount
? 'bg-#FFC5A1' ? 'bg-#FFC5A1'
: 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer', : 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer',
]" @click="handleTask(item)"> ]"
<span class="text-black text-sm" :style="{ @click="handleTask(item)"
color: item.currentCount === item.limitCount ? '#999' : '#000', >
}">{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span> <span
class="text-black text-sm"
:style="{
color: item.currentCount === item.limitCount ? '#999' : '#000',
}"
>{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span
>
</button> </button>
</div> </div>
<!-- 分割线 --> <!-- 分割线 -->
......
src/views/pointsStore/index.vue
<template> <template>
<div class="min-h-screen bg-white p-6"> <div class="min-h-screen bg-white">
<div class="max-w-[1440px] mx-auto"> <div class="max-w-[1440px] mx-auto">
<!-- 顶部积分卡片 --> <!-- 顶部积分卡片 -->
<div <div
......
src/views/searchPage/index.vue
<template> <template>
<div ref="searchPageRef" class="bg-white/90"> <div ref="searchPageRef" class="bg-white/90">
<div class="max-w-1400px mx-auto p-6"> <div>
<!-- 搜索栏 --> <!-- 搜索栏 -->
<div class="mb-1 p-4"> <div class="mb-1 p-4">
<div class="relative flex items-center gap-3"> <div class="relative flex items-center gap-3">
<el-input v-model="searchParams.title" placeholder="输入关键词搜索" class="w-300px! flex-1" <el-input
@keyup.enter="handleSearch" clearable /> v-model="searchParams.title"
placeholder="输入关键词搜索"
class="w-300px! flex-1"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch"> 搜索 </el-button> <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
</div> </div>
</div> </div>
...@@ -15,18 +20,33 @@ ...@@ -15,18 +20,33 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-gray-600 text-14px">分类：</span> <span class="text-gray-600 text-14px">分类：</span>
<div class="flex gap-2"> <div class="flex gap-2">
<button v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]" :key="sort.value" <button
class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer" :class="{ v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]"
:key="sort.value"
class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer"
:class="{
'text-blue-600 bg-blue-50': searchParams.type === sort.value, 'text-blue-600 bg-blue-50': searchParams.type === sort.value,
'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value, 'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value,
}" @click="changeType(sort.value)"> }"
@click="changeType(sort.value)"
>
{{ sort.label }} {{ sort.label }}
</button> </button>
</div> </div>
</div> </div>
<div class="text-gray-500 text-14px"> <div class="text-gray-500 text-14px">
<el-select v-model="searchParams.sortLogic" placeholder="请选择排序方式" class="w-100px!" @change="changeSort"> <el-select
<el-option v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" /> v-model="searchParams.sortLogic"
placeholder="请选择排序方式"
class="w-100px!"
@change="changeSort"
>
<el-option
v-for="sort in sortOptions"
:key="sort.value"
:label="sort.label"
:value="sort.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -57,15 +77,22 @@ ...@@ -57,15 +77,22 @@
<div v-show="list.length"> <div v-show="list.length">
<div class="space-y-4"> <div class="space-y-4">
<div v-for="item in list" :key="item.id" <div
v-for="item in list"
:key="item.id"
class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@click="handleClick(item)"> @click="handleClick(item)"
>
<!-- 封面图 --> <!-- 封面图 -->
<div v-if="item.faceUrl" <div
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"> v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img :src="item.faceUrl" class="w-full h-full object-cover" /> <img :src="item.faceUrl" class="w-full h-full object-cover" />
<div v-if="item.type === ArticleTypeEnum.VIDEO" <div
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"> v-if="item.type === ArticleTypeEnum.VIDEO"
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{ item.videoDuration }} {{ item.videoDuration }}
</div> </div>
</div> </div>
...@@ -112,7 +139,7 @@ ...@@ -112,7 +139,7 @@
<div class="flex-shrink-0 self-end"> <div class="flex-shrink-0 self-end">
<span class="text-blue-600 text-13px">{{ <span class="text-blue-600 text-13px">{{
articleTypeListOptions.find((i) => i.value === item.type)?.label articleTypeListOptions.find((i) => i.value === item.type)?.label
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -127,14 +154,23 @@ ...@@ -127,14 +154,23 @@
<!-- 右侧：分页器 --> <!-- 右侧：分页器 -->
<div class="right"> <div class="right">
<div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"> <div
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size" class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
:page-sizes="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total" >
class="custom-pagination" @current-change=" <el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]"
layout="prev, pager, next, jumper, total"
:total="total"
class="custom-pagination"
@current-change="
(e) => { (e) => {
; (handleBackTop(), goToPage(e)) ;(handleBackTop(), goToPage(e))
} }
" @size-change="changePageSize" /> "
@size-change="changePageSize"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -163,10 +199,9 @@ const route = useRoute() ...@@ -163,10 +199,9 @@ const route = useRoute()
const searchPageRef = ref<HTMLElement | null>(null) const searchPageRef = ref<HTMLElement | null>(null)
const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef) const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
const queryType = route.query.type || '' as ArticleTypeEnum | undefined const queryType = route.query.type || ('' as ArticleTypeEnum | undefined)
const querySearchTitle = route.query.title const querySearchTitle = route.query.title
const sortOptions = [ const sortOptions = [
{ label: '最热', value: 0 }, { label: '最热', value: 0 },
{ label: '最新', value: 1 }, { label: '最新', value: 1 },
......
src/views/userPage/components/editUserInfo.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<!-- 头像 --> <!-- 头像 -->
<el-form-item label="头像" prop="hiddenAvatar"> <el-form-item label="头像" prop="hiddenAvatar">
<div class="w-full"> <div class="w-full">
<UploadFile v-model="form.hiddenAvatar" /> <UploadFile v-model="form.hiddenAvatar" :limit="1" />
<div class="text-xs text-gray-400 mt-2">修改资料后，请点击清除缓存</div> <div class="text-xs text-gray-400 mt-2">修改资料后，请点击清除缓存</div>
</div> </div>
</el-form-item> </el-form-item>
......
src/views/userPage/index.vue
...@@ -5,7 +5,14 @@ ...@@ -5,7 +5,14 @@
<!-- 顶部操作按钮 --> <!-- 顶部操作按钮 -->
<div class="absolute top-4 right-4 flex gap-2"> <div class="absolute top-4 right-4 flex gap-2">
<el-button type="info" plain size="small" @click="handleClearCache">清除缓存</el-button> <el-button type="info" plain size="small" @click="handleClearCache">清除缓存</el-button>
<el-button type="info" plain size="small" @click="handleSwitchAccount">切换账号</el-button> <el-button
v-if="userInfo.isAdmin"
type="info"
plain
size="small"
@click="handleSwitchAccount"
>切换账号</el-button
>
<el-button type="info" plain size="small" @click="handleAdmin">后台管理</el-button> <el-button type="info" plain size="small" @click="handleAdmin">后台管理</el-button>
</div> </div>
</div> </div>
......
src/views/videoDetail/index.vue
<template> <template>
<!-- 整体页面容器：浅灰背景 --> <!-- 整体页面容器：浅灰背景 -->
<div class="max-w-[1200px] mx-auto px-4"> <div>
<!-- 卡片1: 视频播放器区域 --> <!-- 卡片1: 视频播放器区域 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="bg-white rounded-lg shadow-sm overflow-hidden">
<!-- 标题区 --> <!-- 标题区 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment