qdintc/fishery-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 首页样式完善。

Browse Source
This commit is contained in:
tianyongbao
2026-01-20 17:47:06 +08:00
parent 1b65f78f71
commit c43d5a6dd5
1 changed files with 96 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/pages/main/home.vue
View File

@@ -1,55 +1,55 @@
<template>
<!-- <nut-row class="home_home" :style="{ marginTop: navBarHeight + 'px' }"> -->
<nut-row class="home_home">
<CustomNavigationBar @refresh="resUsetInfo" />
<!-- 固定区域开始 -->
<view class="sticky-header">
<CustomNavigationBar @refresh="resUsetInfo" />
<!-- 头部操作按钮区 -->
<nut-col
:span="24"
class="view_f_between header-btn-container"
>
<view>
<nut-button type="primary" class="btn header-btn" size="small" @click="changeMode">
<template #icon>
<IconFont :name="change" size="18" />
</template>
<text class="font_32 c_fff">切换模式</text>
</nut-button>
</view>
<view>
<nut-button
type="primary"
class="btn header-btn font_28"
size="small"
open-type="contact"
>
<template #icon>
<IconFont :name="phone" size="18" />
</template>
<text class="font_32">联系工程师</text>
</nut-button>
</view>
<view>
<nut-button
type="primary"
class="btn header-btn header-btn-warning font_28"
size="small"
@click="openNotice"
>
<template #icon>
<Tips size="18" />
</template>
<text class="font_32">系统公告</text>
</nut-button>
</view>
</nut-col>
</view>
<!-- 固定区域结束 -->
<nut-col :span="24" class="container" :class="showChart ? 'ov' : ''">
<nut-config-provider :theme-vars="themeVars">
<nut-row class="body" :catch-move="false">
<view :style="{ height: '120rpx' }">
<!-- 头部操作按钮区 -->
<nut-col
:span="24"
class="view_f_between"
:style="{ padding: '20rpx 20rpx 0 20rpx' }"
>
<view>
<nut-button type="primary" class="btn" size="small" @click="changeMode">
<template #icon>
<IconFont :name="change" size="18" />
</template>
<text class="font_32 c_fff">切换模式</text>
</nut-button>
</view>
<view>
<nut-button
type="primary"
class="btn font_28"
size="small"
open-type="contact"
>
<template #icon>
<IconFont :name="phone" size="18" />
</template>
<text class="font_32">联系工程师</text>
</nut-button>
</view>
<view>
<nut-button
type="warning"
class="btn font_28"
size="small"
@click="openNotice"
>
<template #icon>
<Tips size="18" />
</template>
<text class="font_32">系统公告</text>
</nut-button>
</view>
</nut-col>
<!-- 消息通知 -->
<!-- 消息通知 -->
<nut-col
:span="24"
class="pond m_t_15 view_f_between"
@@ -94,7 +94,6 @@
</view>
</nut-col>
</view>
<!-- 模式一 -->
<nut-col
:span="24"
@@ -1263,6 +1262,56 @@ function toPay() {
/** -----------------method end------------------- */
</script>
<style lang="scss">
.sticky-header {
position: sticky;
top: 0;
z-index: 999;
background: #fff;
padding-bottom: 10rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.header-btn-container {
padding: 20rpx !important;
gap: 16rpx !important;
display: flex !important;
align-items: stretch !important;
background: #fff !important;
view {
flex: 1;
display: flex;
}
}
.header-btn {
border-radius: 8rpx !important;
width: 100%;
height: 72rpx !important;
min-height: 72rpx !important;
max-height: 72rpx !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
font-size: 28rpx !important;
font-weight: 500 !important;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1) !important;
}
}
.header-btn-warning {
background: #ff8800 !important;
background-color: #ff8800 !important;
}
.home_home {
width: 100%;
height: 100%;