Commit e1c09c88 by lijiabin

【需求 20331】 styles: 对首页layout样式进行优化

parent fec5c75e
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
storage-type="session" storage-type="session"
class="fixed" class="fixed"
> >
<div class="cursor-pointer online-time flex flex-col items-center z-1050"> <div class="cursor-pointer online-time flex flex-col items-center z-10050">
<!-- 图片容器 --> <!-- 图片容器 -->
<div <div
class="mb-4 w-24 h-24 bg-white rounded-full shadow-xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer" class="mb-4 w-24 h-24 bg-white rounded-full shadow-xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer"
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
class="absolute top-1 left-0 right-0 h-1 bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 opacity-60" class="absolute top-1 left-0 right-0 h-1 bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 opacity-60"
></div> ></div>
<div class="text-center px-3 relative z-10"> <div class="text-center px-3 relative">
<div class="text-xs md:text-sm text-gray-700 font-medium mb-1 tracking-wide"> <div class="text-xs md:text-sm text-gray-700 font-medium mb-1 tracking-wide">
今日在线时长 今日在线时长
</div> </div>
......
<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-20 lg: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-20 lg:px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-2001 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">
...@@ -37,30 +37,38 @@ ...@@ -37,30 +37,38 @@
<!-- 右侧菜单 --> <!-- 右侧菜单 -->
<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="group h-80% flex items-center cursor-pointer px-2 py-1 sm:px-3 sm:py-2 rounded-lg transition-all duration-200 hover:shadow-lg hover:bg-white/60"
@click="router.push('/userPage')" @click="router.push('/userPage')"
> >
<!-- 默认展示匿名头像 --> <el-avatar
<img :size="30"
class="w-8 h-8 object-contain flex-shrink-0 rounded-full" :src="userInfo.hiddenAvatar"
:src="userInfo?.hiddenAvatar" class="border-3 border-blue-200 shadow-lg flex-shrink-0 transition-transform duration-200 group-hover:scale-105"
alt="个人中心"
/> />
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline"
>个人中心</span <span
class="ml-2 text-sm whitespace-nowrap hidden lg:inline transition-all duration-300 ease-out group-hover:translate-y--0.5 text-gray-700"
> >
个人中心
</span>
</div> </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" class="group flex items-center cursor-pointer px-2 py-1 sm:px-3 sm:py-2 rounded-lg transition-all duration-200 hover:shadow-lg hover:bg-white/60"
@click="router.push('/auction')"
> >
<!-- 图标 -->
<img <img
class="w-7 h-7 object-contain flex-shrink-0" class="w-7 h-7 object-contain flex-shrink-0 transition-transform duration-200 group-hover:scale-105"
src="@/assets/img/culture/feedback.png" src="@/assets/img/culture/auction.png"
alt="" alt="限时竞拍"
/> />
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline"
>意见反馈</span <!-- 文字(始终显示,只做 hover 增强) -->
<span
class="ml-2 text-sm whitespace-nowrap hidden lg:inline transition-all duration-200 ease-out group-hover:translate-y--0.5 text-gray-700"
> >
限时竞拍
</span>
</div> </div>
<el-dropdown <el-dropdown
placement="top-start" placement="top-start"
...@@ -68,7 +76,7 @@ ...@@ -68,7 +76,7 @@
@visible-change="(val) => (isDropdownHover = val)" @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-gray-700 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 <img
......
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