duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ai-tab-switch): inline styles and cleanup scss

Browse Source 
migrate all component styles from external SCSS file to inline Tailwind utility classes, remove the scss import and delete the unused styles file
This commit is contained in:
DEV_DSW
2026-05-29 16:02:49 +08:00
parent 4cfd714ff7
commit 87c42145ad
2 changed files with 19 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/home/components/AiTabSwitch/index.vue
View File

@@ -1,31 +1,35 @@
<template>
<div class="w-full">
<div class="relative w-full h-[50px] flex overflow-hidden">
<div class="tab-item is-left" :class="{ active: modelValue === 0 }" @click="handleSwitch(0)">
<div class="tab-content">
<div
class="relative flex-1 flex items-center justify-center h-[50px] transition-all duration-300 ease-[ease] mr-[-24px]"
:class="{ 'z-10': modelValue === 0 }" @click="handleSwitch(0)">
<div
class="absolute inset-0 flex items-center justify-center leading-0 transition-[background] duration-300 overflow-hidden">
<img v-if="leftSelected || leftUnselected" :src="modelValue === 0
? leftSelected || leftUnselected
: leftUnselected || leftSelected
" class="tab-image" mode="scaleToFill" />
<div class="tab-label">
<span class="tab-text">探索发现</span>
" class="absolute inset-x-0 bottom-0 top-auto block w-full h-12 align-bottom z-5" />
<div class="relative flex items-center justify-center z-20 -translate-x-5">
<span
:class="['text-[18px]', modelValue === 0 ? 'text-[#2e312f] font-bold' : 'text-white/65 font-medium']">探索发现</span>
</div>
</div>
</div>
<div class="tab-item is-right" :class="{ active: modelValue === 1 }" @click="handleSwitch(1)">
<div class="tab-content">
<div
class="relative flex-1 flex items-center justify-center h-[50px] transition-all duration-300 ease-[ease] ml-[-24px]"
:class="{ 'z-10': modelValue === 1 }" @click="handleSwitch(1)">
<div
class="absolute inset-0 flex items-center justify-center leading-0 transition-[background] duration-300 overflow-hidden">
<img v-if="rightSelected || rightUnselected" :src="modelValue === 1
? rightSelected || rightUnselected
: rightUnselected || rightSelected
" class="tab-image" mode="scaleToFill" />
<div class="tab-label">
<span class="tab-text">AI伴游</span>
<div v-if="showDot" :class="[
'status-dot',
modelValue === 1
? 'status-dot--active'
: 'status-dot--inactive',
" class="absolute inset-x-0 bottom-0 top-auto block w-full h-12 align-bottom z-5" />
<div class="translate-x-5">
<span
:class="['text-[18px]', modelValue === 1 ? 'text-[#2e312f] font-bold' : 'text-white/65 font-medium']">AI伴游</span>
<div v-if="showDot" :class="['inline-block ml-1.5 w-1.5 h-1.5 rounded-full z-22 -translate-y-px', modelValue === 1 ? 'bg-[#26d46c]' : 'bg-white/65 border border-black/8',
]"></div>
</div>
</div>
@@ -51,7 +55,3 @@ const handleSwitch = (i) => {
emit("change", i);
};
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

91
src/pages/home/components/AiTabSwitch/styles/index.scss
View File

@@ -1,91 +0,0 @@
.tab-item {
position: relative;
flex: 1;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.tab-item.active {
z-index: 10;
}
.tab-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: background 0.3s;
overflow: hidden;
}
.tab-text {
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
}
.tab-image {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 0;
width: 100%;
height: 48px;
display: block;
vertical-align: bottom;
z-index: 5;
}
.tab-label {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 20;
}
.tab-item.active .tab-text {
color: #2e312f;
font-weight: bold;
}
.is-left {
margin-right: -24px;
}
.is-left .tab-label {
transform: translateX(-20px);
}
.is-right {
margin-left: -24px;
}
.is-right .tab-label {
transform: translateX(20px);
}
.status-dot {
display: inline-block;
margin-left: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
z-index: 22;
transform: translateY(-1px);
}
.status-dot--active {
background-color: #26d46c;
}
.status-dot--inactive {
background-color: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(0, 0, 0, 0.08);
}