zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 我的订单样式调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-16 20:29:34 +08:00
parent afb124ee19
commit 11aa958077
11 changed files with 143 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/TopNavBar/index.vue
View File

@@ -7,18 +7,33 @@
></view>
<!-- 导航栏内容 -->
<view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
<view
class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
:style="{ height: navBarHeight + 'px' }"
>
<!-- 左侧返回按钮 -->
<view class="nav-bar-left" @click="handleBack" v-if="showBack">
<view
class="nav-bar-left flex flex-items-center flex-justify-center"
v-if="showBack"
@click="handleBack"
>
<uni-icons type="left" size="20" :color="backIconColor" />
</view>
<!-- 中间标题区域 -->
<view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
<view
:class="[
'nav-bar-center flex flex-items-center flex-justify-center',
`nav-bar-center--${titleAlign}`,
]"
>
<slot name="title">
<text class="nav-bar-title" :style="{ color: titleColor }">{{
title
}}</text>
<text
class="font-size-17 font-500 color-000"
:style="{ color: titleColor }"
>
{{ title }}
</text>
</slot>
</view>
@@ -45,11 +60,6 @@ const props = defineProps({
type: Boolean,
default: false,
},
// 是否添加阴影
shadow: {
type: Boolean,
default: true,
},
// 是否显示返回按钮
showBack: {
type: Boolean,
@@ -58,17 +68,17 @@ const props = defineProps({
// 背景颜色
backgroundColor: {
type: String,
default: "#ffffff",
default: "#d9eeff",
},
// 标题颜色
titleColor: {
type: String,
default: "#333333",
default: "#000",
},
// 返回按钮图标颜色
backIconColor: {
type: String,
default: "#333333",
default: "#000",
},
// 是否隐藏状态栏占位
hideStatusBar: {
@@ -114,7 +124,6 @@ const navBarClass = computed(() => {
"top-nav-bar",
{
"top-nav-bar--fixed": props.fixed,
"has-shadow": props.shadow,
},
];
});

109
src/components/TopNavBar/styles/index.scss
View File

@@ -1,11 +1,7 @@
// TopNavBar 组件样式
.top-nav-bar {
width: 100%;
background-color: $uni-bg-color;
&.has-shadow {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
background-color: #d9eeff;
&--fixed {
position: fixed;
@@ -14,86 +10,35 @@
right: 0;
z-index: 999;
}
}
.nav-bar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
position: relative;
.nav-bar-left,
.nav-bar-right {
width: 30px;
height: 30px;
}
.nav-bar-left {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
transition: opacity 0.2s ease;
.nav-bar-center {
flex: 1;
height: 30px;
padding: 0 20px; // 为左右按钮留出空间
&:hover {
opacity: 0.7;
}
// 居中对齐（默认）
&--center {
justify-content: center;
&:active {
opacity: 0.5;
}
.nav-bar-title {
text-align: center;
}
}
.nav-bar-center {
flex: 1;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px; // 为左右按钮留出空间
// 左对齐
&--left {
justify-content: flex-start;
padding-left: 20px; // 为返回按钮留出更多空间
// 居中对齐（默认）
&--center {
justify-content: center;
.nav-bar-title {
text-align: center;
}
}
// 左对齐
&--left {
justify-content: flex-start;
padding-left: 20px; // 为返回按钮留出更多空间
.nav-bar-title {
text-align: left;
}
}
.nav-bar-title {
font-size: 18px;
font-weight: 500;
color: $uni-text-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
}
.nav-bar-right {
display: flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
.nav-bar-title {
text-align: left;
}
}
}
@@ -102,11 +47,3 @@
.page-with-fixed-navbar {
padding-top: calc(var(--status-bar-height, 44px) + 44px);
}
// 安全区域适配
.top-nav-bar {
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}