Commit dd599e8f by lijiabin

【需求 17679】 perf: 优化关爱基金相关内容

parent 6f5731f4
......@@ -2,15 +2,12 @@
<div>
<div class="header h-40px items-center justify-between">
<div class="left flex gap-3 flex items-center">
<Tabs v-model="activeTab" :tabs="tabs" />
<Tabs :modelValue="activeTab" @update:modelValue="(e) => updateActiveTab(e as string)" :tabs="tabs" />
<!-- 直接在@change里面拿最新的动态组件实例 拿不到 可以在@enter 动画钩子里面拿 -->
<!-- 刷新图标 -->
<el-icon
size="15"
class="cursor-pointer hover:rotate-180 transition-all duration-300"
@click="handleRefresh"
><Refresh
/></el-icon>
<el-icon size="15" class="cursor-pointer hover:rotate-180 transition-all duration-300" @click="handleRefresh">
<Refresh />
</el-icon>
</div>
</div>
<el-divider style="margin: 10px 0 20px 0" />
......@@ -33,6 +30,7 @@ const tabs = [
{ label: '推荐', value: '推荐', component: RecommendList },
{ label: '最新', value: '最新', component: RecommendList },
{ label: '视频', value: '视频', component: VideoList },
{ label: '关爱基金', value: '关爱基金', component: null },
]
const activeTab = ref('推荐')
......@@ -58,6 +56,14 @@ const handleEnter = () => {
handleRefresh()
}
const updateActiveTab = (val: string) => {
if (val === '关爱基金') {
window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww42a2d34b42b8d721&redirect_uri=oa.yswg.com.cn:3456/careFund/publicNotice/index&response_type=code&scope=snsapi_base&state=#wechat_redirect', '_blank')
return
}
activeTab.value = val
}
onMounted(() => {
handleRefresh()
})
......@@ -67,14 +73,17 @@ onMounted(() => {
.tab-item.active:hover {
background-color: #f8b62b !important;
color: #000 !important;
box-shadow: none !important; /* 如果你还要禁掉 hover 阴影 */
box-shadow: none !important;
/* 如果你还要禁掉 hover 阴影 */
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateX(30px);
filter: blur(4px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
......
......@@ -3,21 +3,11 @@
<!-- 头部Tabs -->
<div class="header h-40px items-center justify-between">
<div class="left flex gap-3 flex items-center">
<Tabs v-model="activeTab" :tabs="tabs" />
<Tabs :modelValue="activeTab" @update:modelValue="(e) => updateActiveTab(e as string)" :tabs="tabs" />
<!-- 刷新图标 -->
<el-icon
size="15"
class="cursor-pointer hover:rotate-180 transition-all duration-300"
@click="handleRefresh"
><Refresh
/></el-icon>
<!-- 关爱基金跳转 -->
<el-link
:underline="false"
href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww42a2d34b42b8d721&redirect_uri=oa.yswg.com.cn:3456/careFund/publicNotice/index&response_type=code&scope=snsapi_base&state=#wechat_redirect"
target="_blank"
>关爱基金</el-link
>
<el-icon size="15" class="cursor-pointer hover:rotate-180 transition-all duration-300" @click="handleRefresh">
<Refresh />
</el-icon>
</div>
</div>
<el-divider style="margin: 10px 0 20px 0" />
......@@ -31,7 +21,7 @@
<script setup lang="ts">
import Tabs from '@/components/common/Tabs'
import { HelpFilled, Refresh } from '@element-plus/icons-vue'
import { Refresh } from '@element-plus/icons-vue'
import ColumnList from './components/columnList.vue'
import InterviewList from './components/interviewList.vue'
import PracticeList from './components/practiceList.vue'
......@@ -42,6 +32,7 @@ const tabs = [
{ label: '实践', value: '实践', component: PracticeList },
{ label: '专访', value: '专访', component: InterviewList },
{ label: '视频', value: '视频', component: VideoList },
{ label: '关爱基金', value: '关爱基金', component: null },
]
const activeTab = ref('专栏')
......@@ -58,6 +49,15 @@ const handleEnter = () => {
const handleRefresh = () => {
activeTabComponentRef.value?.refresh?.()
}
const updateActiveTab = (val: string) => {
if (val === '关爱基金') {
window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww42a2d34b42b8d721&redirect_uri=oa.yswg.com.cn:3456/careFund/publicNotice/index&response_type=code&scope=snsapi_base&state=#wechat_redirect', '_blank')
return
}
activeTab.value = val
}
onMounted(() => {
handleRefresh()
})
......@@ -69,6 +69,7 @@ onMounted(() => {
transform: translateX(30px);
filter: blur(4px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
......
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