style:顶部导航按钮样式调整

master
黄伟杰 2 months ago
parent 808f0838ab
commit 207ff2ce3b

@ -1,8 +1,18 @@
<template> <template>
<view>
<view class="header-section"> <view class="header-section">
<view class="header-content"> <view class="header-main">
<view class="back-btn" @click="handleBack">
<text class="back-icon"></text>
</view>
<view class="header-title-wrap">
<text class="header-title">{{ title }}</text> <text class="header-title">{{ title }}</text>
<text v-if="subTitle" class="header-desc">{{ subTitle }}</text> </view>
<view class="header-placeholder"></view>
</view>
</view>
<view v-if="showSubTitle && subTitle" class="header-subtitle-wrap">
<text class="header-desc">{{ subTitle }}</text>
</view> </view>
</view> </view>
</template> </template>
@ -16,31 +26,77 @@ const props = defineProps({
subTitle: { subTitle: {
type: String, type: String,
default: '' default: ''
},
showSubTitle: {
type: Boolean,
default: false
} }
}) })
const emit = defineEmits(['back'])
function handleBack() {
emit('back')
uni.navigateBack()
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-section { .header-section {
--status-top: var(--status-bar-height, 0px); --status-top: var(--status-bar-height, 0px);
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%); background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
padding: calc(40rpx + var(--status-top)) 30rpx 80rpx; padding: calc(20rpx + var(--status-top)) 24rpx 28rpx;
position: relative; position: relative;
} }
.header-content { .header-main {
display: flex;
align-items: center;
min-height: 72rpx;
}
.back-btn {
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
}
.back-icon {
font-size: 56rpx;
line-height: 1;
color: #ffffff;
font-weight: 500;
}
.header-title-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.header-title { .header-title {
display: block; font-size: 36rpx;
font-size: 44rpx; font-weight: 700;
font-weight: bold;
color: #ffffff; color: #ffffff;
margin-bottom: 16rpx; }
.header-placeholder {
width: 72rpx;
height: 72rpx;
}
.header-subtitle-wrap {
margin-top: 14rpx;
padding-left: 16rpx;
} }
.header-desc { .header-desc {
display: block; display: block;
font-size: 28rpx; font-size: 34rpx;
color: rgba(255, 255, 255, 0.7); font-weight: 700;
} color: #1a3a5c;
} }
</style> </style>

@ -197,7 +197,6 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
@ -205,7 +204,6 @@
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
import { import {
getEquipmentDetail, getEquipmentDetail,
getEquipmentInspectionByDeviceId, getEquipmentInspectionByDeviceId,
@ -337,10 +335,6 @@ function handleTabChange(e) {
currentTab.value = Number(idx === 0 ? 0 : idx || 0) currentTab.value = Number(idx === 0 ? 0 : idx || 0)
} }
function goBack() {
uni.navigateBack()
}
onLoad((query) => { onLoad((query) => {
const rawId = query && (query.id !== undefined ? query.id : query.code) const rawId = query && (query.id !== undefined ? query.id : query.code)
const decoded = rawId ? decodeURIComponent(String(rawId)) : '' const decoded = rawId ? decodeURIComponent(String(rawId)) : ''
@ -510,7 +504,7 @@ function previewImages(list, current) {
} }
.content-section { .content-section {
padding: 0 30rpx 200rpx; padding: 0 30rpx 30rpx;
} }
.info-card { .info-card {

@ -1,6 +1,6 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<AppTitleHeader title="设备查询" subTitle="请选择查询方式" /> <AppTitleHeader title="设备查询" subTitle="请选择查询方式" :showSubTitle="true" />
<view class="content-section"> <view class="content-section">
<view class="scan-section"> <view class="scan-section">
@ -48,22 +48,16 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const equipmentCode = ref(''); const equipmentCode = ref('');
const isScanning = ref(false); const isScanning = ref(false);
function goBack() {
uni.navigateBack();
}
function startScan() { function startScan() {
if (isScanning.value) return; if (isScanning.value) return;
@ -126,7 +120,7 @@ function navigateToDetail(code) {
} }
.content-section { .content-section {
padding: 40rpx 30rpx 200rpx; padding: 40rpx 30rpx;
} }
.scan-section { .scan-section {

@ -29,7 +29,6 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
@ -38,16 +37,11 @@ import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import request from '@/utils/request' import request from '@/utils/request'
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const keypartId = ref(undefined) const keypartId = ref(undefined)
const loading = ref(false) const loading = ref(false)
const detailData = ref(null) const detailData = ref(null)
function goBack() {
uni.navigateBack();
}
onLoad((query) => { onLoad((query) => {
const rawId = query && (query.id !== undefined ? query.id : query.code) const rawId = query && (query.id !== undefined ? query.id : query.code)
const decoded = rawId ? decodeURIComponent(String(rawId)) : '' const decoded = rawId ? decodeURIComponent(String(rawId)) : ''
@ -92,7 +86,7 @@ function detailValue(v) {
} }
.content-section { .content-section {
padding: 0 30rpx 200rpx; padding: 0 30rpx 30rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }

@ -1,6 +1,6 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<AppTitleHeader title="关键件查询" subTitle="请选择查询方式" /> <AppTitleHeader title="关键件查询" subTitle="请选择查询方式" :showSubTitle="true" />
<view class="content-section"> <view class="content-section">
<view class="scan-section"> <view class="scan-section">
@ -48,22 +48,16 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const keypartCode = ref(''); const keypartCode = ref('');
const isScanning = ref(false); const isScanning = ref(false);
function goBack() {
uni.navigateBack();
}
function startScan() { function startScan() {
if (isScanning.value) return; if (isScanning.value) return;
@ -126,7 +120,7 @@ function navigateToDetail(id) {
} }
.content-section { .content-section {
padding: 40rpx 30rpx 200rpx; padding: 40rpx 30rpx;
} }
.scan-section { .scan-section {

@ -190,7 +190,6 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
@ -198,7 +197,6 @@
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
import { import {
getMoldDetail, getMoldDetail,
getMoldInspectionByMoldId, getMoldInspectionByMoldId,
@ -313,10 +311,6 @@ function handleTabChange(e) {
currentTab.value = Number(idx === 0 ? 0 : idx || 0) currentTab.value = Number(idx === 0 ? 0 : idx || 0)
} }
function goBack() {
uni.navigateBack();
}
onLoad((query) => { onLoad((query) => {
const rawId = query && (query.id !== undefined ? query.id : query.code) const rawId = query && (query.id !== undefined ? query.id : query.code)
const decoded = rawId ? decodeURIComponent(String(rawId)) : '' const decoded = rawId ? decodeURIComponent(String(rawId)) : ''
@ -491,7 +485,7 @@ function previewImages(list, current) {
} }
.content-section { .content-section {
padding: 0 30rpx 200rpx; padding: 0 30rpx 30rpx;
} }
.info-card { .info-card {

@ -1,6 +1,6 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<AppTitleHeader title="模具查询" subTitle="请选择查询方式" /> <AppTitleHeader title="模具查询" subTitle="请选择查询方式" :showSubTitle="true" />
<view class="content-section"> <view class="content-section">
<view class="scan-section"> <view class="scan-section">
@ -48,23 +48,15 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar :buttons="bottomButtons" @action="handleBottomAction" />
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const moldCode = ref(''); const moldCode = ref('');
const isScanning = ref(false); const isScanning = ref(false);
const bottomButtons = ref([{ text: '返回', type: 'default', key: 'back' }])
function goBack() {
uni.navigateBack();
}
function startScan() { function startScan() {
if (isScanning.value) return; if (isScanning.value) return;
@ -123,15 +115,6 @@ function navigateToDetail(id) {
}); });
} }
function handleBottomAction(e) {
if (e && e.key === 'back') {
goBack()
return
}
if (e && e.index === 0) {
goBack()
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -141,7 +124,7 @@ function handleBottomAction(e) {
} }
.content-section { .content-section {
padding: 40rpx 30rpx 200rpx; padding: 40rpx 30rpx;
} }
.scan-section { .scan-section {

@ -45,7 +45,6 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
@ -54,17 +53,12 @@ import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import request from '@/utils/request' import request from '@/utils/request'
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const productId = ref(undefined) const productId = ref(undefined)
const loading = ref(false) const loading = ref(false)
const detailData = ref(null) const detailData = ref(null)
const unitList = ref([]) const unitList = ref([])
function goBack() {
uni.navigateBack()
}
function detailValue(v) { function detailValue(v) {
if (v === 0) return '0' if (v === 0) return '0'
if (v === false) return '否' if (v === false) return '否'
@ -170,7 +164,7 @@ onLoad((query) => {
} }
.content-section { .content-section {
padding: 0 30rpx 200rpx; padding: 0 30rpx 30rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }

@ -1,6 +1,6 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<AppTitleHeader title="产品物料查询" subTitle="请选择查询方式" /> <AppTitleHeader title="产品物料查询" subTitle="请选择查询方式" :showSubTitle="true" />
<view class="content-section"> <view class="content-section">
<view class="scan-section"> <view class="scan-section">
@ -48,22 +48,16 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const productId = ref('') const productId = ref('')
const isScanning = ref(false) const isScanning = ref(false)
function goBack() {
uni.navigateBack()
}
function startScan() { function startScan() {
if (isScanning.value) return if (isScanning.value) return
isScanning.value = true isScanning.value = true
@ -125,7 +119,7 @@ function navigateToDetail(id) {
} }
.content-section { .content-section {
padding: 40rpx 30rpx 200rpx; padding: 40rpx 30rpx;
} }
.scan-section { .scan-section {

@ -37,7 +37,6 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
@ -46,17 +45,12 @@ import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import request from '@/utils/request' import request from '@/utils/request'
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const spareId = ref(undefined) const spareId = ref(undefined)
const loading = ref(false) const loading = ref(false)
const detailData = ref(null) const detailData = ref(null)
const unitList = ref([]) const unitList = ref([])
function goBack() {
uni.navigateBack();
}
function detailValue(v) { function detailValue(v) {
if (v === 0) return '0' if (v === 0) return '0'
if (v === false) return '否' if (v === false) return '否'
@ -171,7 +165,7 @@ onLoad((query) => {
} }
.content-section { .content-section {
padding: 0 30rpx 200rpx; padding: 0 30rpx 30rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }

@ -1,6 +1,6 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<AppTitleHeader title="备件查询" subTitle="请选择查询方式" /> <AppTitleHeader title="备件查询" subTitle="请选择查询方式" :showSubTitle="true" />
<view class="content-section"> <view class="content-section">
<view class="scan-section"> <view class="scan-section">
@ -48,22 +48,16 @@
</view> </view>
</view> </view>
</view> </view>
<BottomActionBar @action="goBack" />
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import AppTitleHeader from '@/components/common/AppTitleHeader.vue' import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
import BottomActionBar from '@/components/common/BottomActionBar.vue'
const spareCode = ref(''); const spareCode = ref('');
const isScanning = ref(false); const isScanning = ref(false);
function goBack() {
uni.navigateBack();
}
function startScan() { function startScan() {
if (isScanning.value) return; if (isScanning.value) return;
@ -132,7 +126,7 @@ function navigateToDetail(id) {
} }
.content-section { .content-section {
padding: 40rpx 30rpx 200rpx; padding: 40rpx 30rpx;
} }
.scan-section { .scan-section {

Loading…
Cancel
Save