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

refactor: migrate styles to inline utility classes

Browse Source 
delete unused SCSS style files for OrderCard and Tabs components
remove scoped style imports from both Vue component files
migrate all styling to inline Tailwind utility classes
update icon components to use project's current ZnIcon and VanIcon
This commit is contained in:
DEV_DSW
2026-05-28 16:15:28 +08:00
parent 0b64f666c7
commit b273fdd23b
4 changed files with 38 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/quick/components/Tabs/index.vue
View File

@@ -1,26 +1,31 @@
<template>
<div class="tab-container relative">
<div class="tab-wrapper flex flex-items-center">
<div class="relative">
<div
class="bg-[#e8fff1] h-[48px] overflow-x-auto whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch]">
<div v-for="(item, index) in tabList" :key="item.id" :class="[
'tab-item flex flex-items-center flex-justify-center relative',
activeIndex === index && 'tab-item-active',
'h-full flex-none flex items-center justify-center relative px-[12px] min-w-[68px]',
activeIndex === index &&
`before:content-[''] before:absolute before:left-[4px] before:top-0 before:right-[4px] before:bottom-0 before:bg-white before:rounded-t-[20px] before:[transform:perspective(40px)_rotateX(6deg)_translate(0,-1px)] before:origin-bottom before:shadow-[0_-0.5px_0_#0ccd58]`,
]" @click="handleTabClick(index)">
<div class="tab-item-inner flex flex-items-center">
<uni-icons :class="['icon mr-4', activeIndex === index && 'icon-active']" fontFamily="znicons" size="20"
color="opacity">
{{ iconsMap[item.iconCode] }}
</uni-icons>
<div class="inline-flex items-center relative z-[3]">
<zn-icon :class="[
'h-[20px] w-[20px] mr-[4px]',
activeIndex === index ? 'text-[#0ccd58]' : 'text-ink-600',
]" :name="item.iconCode" size="20" color="opacity">
</zn-icon>
<span :class="[
'font-size-16 font-500 color-525866 ',
activeIndex === index && 'tab-span-active',
'text-[16px] font-medium',
activeIndex === index ? 'text-[#0ccd58]' : 'text-ink-600',
]">
{{ item.iconTitle }}
</span>
</div>
<!-- 每项内的下划线指示器，通过类控制显示/隐藏 -->
<div class="tab-item-indicator" :class="{ visible: activeIndex === index }"></div>
<div
class="absolute bottom-0 left-1/2 -translate-x-1/2 h-[3px] w-[24px] bg-[#0ccd58] rounded-t-[3px] z-[3] transition-[opacity,transform] duration-200 ease-in-out"
:class="activeIndex === index ? 'opacity-100 scale-x-100' : 'opacity-0 scale-x-[0.9]'"></div>
</div>
</div>
</div>
@@ -28,7 +33,7 @@
<script setup>
import { onMounted, ref, watch } from "vue";
import { iconsMap } from "@/static/fonts/znicons";
import ZnIcon from "@/components/ZnIcon/index.vue";
import { commodityTypePageList } from "@/api/goods";
// Props
@@ -127,6 +132,3 @@ const getCommodityTypePageList = async () => {
}
};
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

92
src/pages/quick/components/Tabs/styles/index.scss
View File

@@ -1,92 +0,0 @@
.tab-wrapper {
background-color: #e8fff1;
height: 48px;
overflow-x: auto;
/* 支持横向滚动 */
-webkit-overflow-scrolling: touch;
/* 平滑滚动（移动端） */
white-space: nowrap;
/* 防止换行 */
justify-content: flex-start;
/* 覆盖工具类，靠左排列以便滚动 */
}
.tab-item {
height: 100%;
flex: 0 0 auto;
/* 不让子项拉伸，按内容宽度排列 */
padding: 0 12px;
/* 增加横向间距，便于触控 */
min-width: 68px;
/* 保证可点击区域 */
}
.icon {
height: 20px;
width: 20px;
color: #525866;
}
.icon-active {
color: #0ccd58;
}
/* 组件模板中使用了绝对定位的内部元素，为保证父元素宽度基于内容，重置该子元素为静态布局 */
.tab-item > .absolute {
position: static !important;
display: flex;
align-items: center;
}
.tab-item-active {
&::before {
content: "";
position: absolute;
left: 4px;
top: 0;
right: 4px;
bottom: 0;
background-color: #fff;
border-radius: 20px 20px 0 0;
transform: perspective(40px) rotateX(6deg) translate(0, -1px);
transform-origin: bottom bottom;
box-shadow: 0 -0.5px 0 #0ccd58;
}
}
.tab-text-active {
color: #0ccd58;
z-index: 3;
}
/* 已改为每项内部指示器，移除了全局指示器样式 */
/* 每项内的指示器（替代全局指示器） */
.tab-item-inner {
display: inline-flex;
align-items: center;
position: relative;
z-index: 3;
/* 确保内容（icon/text）位于 .tab-item-active::before 之上 */
}
.tab-item-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0.9);
height: 3px;
width: 24px;
background-color: #0ccd58;
border-radius: 3px 3px 0 0;
opacity: 0;
transition:
opacity 0.2s ease,
transform 0.2s ease;
z-index: 3;
}
.tab-item-indicator.visible {
opacity: 1;
transform: translateX(-50%) scaleX(1);
}

43
src/pages/service/order/components/OrderCard/index.vue
View File

@@ -1,38 +1,39 @@
<template>
<div class="order-card bg-white border-box p-12 rounded-12 m-12">
<div class="bg-white p-[12px] rounded-[12px] m-[12px]">
<!-- 卡片头部 -->
<div class="border-box flex flex-items-center pb-12">
<img class="icon mr-4" src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
<span class="font-size-14 color-525866 line-height-20">工单</span>
<span class="font-size-12 color-525866 line-height-20 ml-auto">{{
isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus)
}}</span>
<div class="flex items-center pb-[12px]">
<img class="w-[20px] h-[20px] mr-[4px]"
src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
<span class="text-[14px] text-ink-600 leading-[20px]">工单</span>
<span class="text-[12px] text-ink-600 ml-auto">
{{ isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus) }}
</span>
</div>
<!-- 卡片内容 -->
<div class="border-box card-content flex flex-items-center pb-12">
<div class="border-box left flex-full pr-20">
<div class="font-size-12 color-525866 line-height-20 mb-4">
<div class="flex items-center pb-[12px]">
<div class="flex-1 pr-[20px]">
<div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
所在位置：{{ orderData.roomNo }}
</div>
<div class="font-size-12 color-525866 line-height-20 mb-4">
<div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
联系方式: {{ orderData.userPhone }}
</div>
<div class="font-size-12 color-525866 line-height-20 ellipsis-2">
<div class="text-[12px] text-ink-600 line-clamp-2">
需求描述: {{ orderData.content }}
</div>
</div>
<img v-if="orderData.contentImgUrl" class="right rounded-6" :src="orderData.contentImgUrl" mode="aspectFill" />
<img v-if="orderData.contentImgUrl" class="w-[88px] h-[88px] rounded-[6px]" :src="orderData.contentImgUrl" />
</div>
<!-- 服务人员 -->
<div v-if="orderData.processMemberName && orderData.processMemberPhone"
class="service-user border-box p-8 flex flex-items-center flex-justify-between mb-12">
<div class="font-size-12 line-height-16">
class="bg-[rgba(67, 103, 153, 0.1)] rounded-[5px] text-[#436799] p-[8px] flex items-center justify-between mb-[12px]">
<div class="text-[12px] leading-[16px]">
服务人员：{{ orderData.processMemberName }}
</div>
<uni-icons class="ml-auto mr-4" type="phone-filled" size="14" color="#436799" />
<span class="font-size-12 line-height-16" @click="callService">拨打电话</span>
<van-icon class="ml-auto mr-[4px]" name="phone-o" size="14" color="#436799" />
<span class="text-[12px] leading-[16px]" @click="callService">拨打电话</span>
</div>
<!-- 取消操作 -->
@@ -40,8 +41,8 @@
!isCancelWork &&
orderData.workOrderStatus !== '2' &&
orderData.workOrderStatus !== '3'
" class="flex flex-items-center flex-justify-between">
<span class="cancel border-box border rounded-6 font-size-12 line-height-16 color-525866 ml-auto"
" class="flex items-center justify-between">
<span class="p-[4px_10px] border border-ink-200 rounded-control text-[12px] leading-[16px] text-ink-600 ml-auto"
@click="cancelCall">取消呼叫</span>
</div>
</div>
@@ -99,7 +100,3 @@ const cancelCall = async () => {
});
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

28
src/pages/service/order/components/OrderCard/styles/index.scss
View File

@@ -1,28 +0,0 @@
.order-card {
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
}
.icon {
height: 20px;
width: 20px;
}
.right {
height: 88px;
width: 88px;
}
.service-user {
background-color: rgba(67, 103, 153, 0.1);
border-radius: 5px;
color: #436799;
}
.cancel {
padding: 4px 10px;
}