linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
黄伟杰 1 month ago
parent 808f0838ab
commit 207ff2ce3b
11 changed files with 89 additions and 104 deletions
Show Stats Download Patch File Download Diff File

92
src/components/common/AppTitleHeader.vue
Unescape Escape View File

@ -1,8 +1,18 @@
<template>
<view class="header-section">
<view class="header-content">
<text class="header-title">{{ title }}</text>
<text v-if="subTitle" class="header-desc">{{ subTitle }}</text>
<view>
<view class="header-section">
<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>
</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>
</template>
@ -16,31 +26,77 @@ const props = defineProps({
subTitle: {
type: String,
default: ''
},
showSubTitle: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['back'])
function handleBack() {
emit('back')
uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.header-section {
--status-top: var(--status-bar-height, 0px);
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;
}
.header-content {
.header-title {
display: block;
font-size: 44rpx;
font-weight: bold;
color: #ffffff;
margin-bottom: 16rpx;
}
.header-main {
display: flex;
align-items: center;
min-height: 72rpx;
}
.header-desc {
display: block;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.7);
}
.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 {
font-size: 36rpx;
font-weight: 700;
color: #ffffff;
}
.header-placeholder {
width: 72rpx;
height: 72rpx;
}
.header-subtitle-wrap {
margin-top: 14rpx;
padding-left: 16rpx;
}
.header-desc {
display: block;
font-size: 34rpx;
font-weight: 700;
color: #1a3a5c;
}
</style>

8
src/pages_function/pages/equipment/detail.vue
Unescape Escape View File

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

10
src/pages_function/pages/equipment/index.vue
Unescape Escape View File

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

8
src/pages_function/pages/keypart/detail.vue
Unescape Escape View File

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

10
src/pages_function/pages/keypart/index.vue
Unescape Escape View File

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

8
src/pages_function/pages/mold/detail.vue
Unescape Escape View File

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

21
src/pages_function/pages/mold/index.vue
Unescape Escape View File

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

8
src/pages_function/pages/product/detail.vue
Unescape Escape View File

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

10
src/pages_function/pages/product/index.vue
Unescape Escape View File

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

8
src/pages_function/pages/spare/detail.vue
Unescape Escape View File

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

10
src/pages_function/pages/spare/index.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save