feat backNav搭建
This commit is contained in:
Ironsp
2
src/components.d.ts
vendored
2
src/components.d.ts
vendored
@@ -9,6 +9,7 @@ declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AppFooter: typeof import('./components/AppFooter.vue')['default']
|
||||
AppLogos: typeof import('./components/AppLogos.vue')['default']
|
||||
BackNav: typeof import('./components/backNav.vue')['default']
|
||||
HiCounter: typeof import('./components/HiCounter.vue')['default']
|
||||
HomeConstruction: typeof import('./components/home/construction.vue')['default']
|
||||
HomeHomeNav: typeof import('./components/home/homeNav.vue')['default']
|
||||
@@ -21,5 +22,6 @@ declare module 'vue' {
|
||||
HomeWarning: typeof import('./components/home/warning.vue')['default']
|
||||
HomeWarning_list: typeof import('./components/home/warning_list.vue')['default']
|
||||
InputEntry: typeof import('./components/InputEntry.vue')['default']
|
||||
MessageNav: typeof import('./components/message/nav.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
function handleClickGithub() {
|
||||
if (window?.open) {
|
||||
window.open('https://github.com/uni-helper/vitesse-uni-app')
|
||||
}
|
||||
else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请使用浏览器打开',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view text="xl gray4" m-5 flex items-center justify-center gap-3>
|
||||
<navigator url="/pages/index" open-type="redirect">
|
||||
<view i-carbon-campsite />
|
||||
</navigator>
|
||||
|
||||
<view cursor-pointer @click="handleClickGithub">
|
||||
<view i-carbon:logo-github />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<view inline-flex cursor-default text-2xl font-300>
|
||||
<view
|
||||
flex
|
||||
flex-col
|
||||
items-center
|
||||
hover-class="drop-shadow-md drop-shadow-color-green5"
|
||||
>
|
||||
<image inline-block h-18 w-18 src="/static/logo.svg" />
|
||||
<text mt--2 text-green5 class="uni-helper-logo__label">
|
||||
uni-helper
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
text="3xl gray4"
|
||||
m="x-4 y-auto"
|
||||
i-carbon-add
|
||||
transform
|
||||
transition-all-500
|
||||
hover:rotate-135
|
||||
/>
|
||||
<view flex flex-col hover-class="drop-shadow-md drop-shadow-color-purple5">
|
||||
<image inline-block h-18 w-18 src="/static/vite.png" />
|
||||
<text mt--2 text-purple5>
|
||||
Vite
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { count, inc, dec } = useCount()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view inline-flex m="y-3">
|
||||
<view class="btn" @click="dec()">
|
||||
<text i-carbon-subtract />
|
||||
</view>
|
||||
<view font="mono" w="15" m-auto inline-block>
|
||||
{{ count }}
|
||||
</view>
|
||||
<view class="btn" @click="inc()">
|
||||
<text i-carbon-add />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
--at-apply: w-8 h-8 flex items-center justify-center rounded-full bg-teal-600 text-white cursor-pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const name = ref('')
|
||||
function go() {
|
||||
if (name.value) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/hi?name=${name.value}`,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
p="x-4 y-2"
|
||||
w="250px"
|
||||
m="t-5 auto"
|
||||
text="center"
|
||||
bg="transparent"
|
||||
border="~ rounded gray-200 dark:gray-700 solid"
|
||||
outline="none active:none"
|
||||
box-border
|
||||
w-full
|
||||
>
|
||||
<input
|
||||
v-model="name"
|
||||
placeholder="What's your name?"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
mr-0
|
||||
w-full
|
||||
>
|
||||
</view>
|
||||
<view>
|
||||
<button
|
||||
:disabled="!name"
|
||||
m="t-3 auto"
|
||||
m-auto
|
||||
w-120rpx
|
||||
rounded
|
||||
bg-teal-600
|
||||
px-4
|
||||
py-1
|
||||
text-sm
|
||||
text-white
|
||||
hover-class="bg-teal-700"
|
||||
@click="go"
|
||||
>
|
||||
GO
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
67
src/components/backNav.vue
Normal file
67
src/components/backNav.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
function handleBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="custom-nav">
|
||||
<view class="nav-left">
|
||||
<view class="back-btn" @tap="handleBack">
|
||||
<wd-icon name="left" size="48rpx" />
|
||||
</view>
|
||||
<text class="nav-title">
|
||||
{{ title || '返回' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="nav-right">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 120rpx;
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
function onIconClick(name: string) {
|
||||
if (name === '通知') {
|
||||
uni.navigateTo({
|
||||
url: '/pages/message/index',
|
||||
})
|
||||
}
|
||||
else if (name === '设置') {
|
||||
// 处理设置
|
||||
console.log(`点击了${name}图标`)
|
||||
}
|
||||
else if (name === '蓝牙') {
|
||||
// 处理蓝牙
|
||||
console.log(`点击了${name}图标`)
|
||||
}
|
||||
else {
|
||||
console.log(`点击了${name}图标`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="custom-nav">
|
||||
<view class="nav-left">
|
||||
<image class="nav-logo" src="/static/logo.png" mode="aspectFit" @click="onIconClick('logo')" />
|
||||
<image class="nav-logo" src="/static/logo.png" mode="aspectFit" @tap="onIconClick('logo')" />
|
||||
<view class="nav-info">
|
||||
<text class="nav-title">
|
||||
G6高速改扩建测试测试项目
|
||||
@@ -18,9 +33,9 @@ function onIconClick(name: string) {
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-right">
|
||||
<image class="nav-icon" src="/static/seting.png" mode="aspectFit" @click="onIconClick('设置')" />
|
||||
<image class="nav-icon" src="/static/Bluetooth.png" mode="aspectFit" @click="onIconClick('蓝牙')" />
|
||||
<image class="nav-icon" src="/static/message.png" mode="aspectFit" @click="onIconClick('通知')" />
|
||||
<image class="nav-icon" src="/static/seting.png" mode="aspectFit" @tap="onIconClick('设置')" />
|
||||
<image class="nav-icon" src="/static/Bluetooth.png" mode="aspectFit" @tap="onIconClick('蓝牙')" />
|
||||
<image class="nav-icon" src="/static/message.png" mode="aspectFit" @tap="onIconClick('通知')" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
48
src/pages/message/index.vue
Normal file
48
src/pages/message/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
definePage({
|
||||
layout: false,
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
function handleMarkAllRead() {
|
||||
console.log('全部标记已读')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
<back-nav title="消息中心">
|
||||
<wd-button size="small" round @tap="handleMarkAllRead">
|
||||
全部标记已读
|
||||
</wd-button>
|
||||
</back-nav>
|
||||
|
||||
<view class="content">
|
||||
<text class="empty">
|
||||
暂无消息
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #EAEFF9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 100px;
|
||||
}
|
||||
</style>
|
||||
1
src/uni-pages.d.ts
vendored
1
src/uni-pages.d.ts
vendored
@@ -5,6 +5,7 @@
|
||||
|
||||
type _LocationUrl =
|
||||
"/pages/home/index" |
|
||||
"/pages/message/index" |
|
||||
"/pages/report/index" |
|
||||
"/pages/work/index";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user