From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/NavigationBar/index.vue | 93 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 93 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
new file mode 100644
index 0000000..104c600
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -0,0 +1,93 @@
+<template>
+ <div class="navigation-bar" :style="bgStyle">
+ <div class="h-full w-full flex items-center">
+ <div v-for="(cell, cellIndex) in cellList" :key="cellIndex" :style="getCellStyle(cell)">
+ <span v-if="cell.type === 'text'">{{ cell.text }}</span>
+ <img v-else-if="cell.type === 'image'" :src="cell.imgUrl" alt="" class="h-full w-full" />
+ <SearchBar v-else :property="getSearchProp(cell)" />
+ </div>
+ </div>
+ <img
+ v-if="property._local?.previewMp"
+ src="@/assets/imgs/diy/app-nav-bar-mp.png"
+ alt=""
+ class="h-30px w-86px"
+ />
+ </div>
+</template>
+<script setup lang="ts">
+import { NavigationBarCellProperty, NavigationBarProperty } from './config'
+import SearchBar from '@/components/DiyEditor/components/mobile/SearchBar/index.vue'
+import { StyleValue } from 'vue'
+import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
+
+/** 椤甸潰椤堕儴瀵艰埅鏍� */
+defineOptions({ name: 'NavigationBar' })
+
+const props = defineProps<{ property: NavigationBarProperty }>()
+
+// 鑳屾櫙
+const bgStyle = computed(() => {
+ const background =
+ props.property.bgType === 'img' && props.property.bgImg
+ ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
+ : props.property.bgColor
+ return { background }
+})
+// 鍗曞厓鏍煎垪琛�
+const cellList = computed(() =>
+ props.property._local?.previewMp ? props.property.mpCells : props.property.otherCells
+)
+// 鍗曞厓鏍煎搴�
+const cellWidth = computed(() => {
+ return props.property._local?.previewMp ? (375 - 80 - 86) / 6 : (375 - 90) / 8
+})
+// 鑾峰緱鍗曞厓鏍兼牱寮�
+const getCellStyle = (cell: NavigationBarCellProperty) => {
+ return {
+ width: cell.width * cellWidth.value + (cell.width - 1) * 10 + 'px',
+ left: cell.left * cellWidth.value + (cell.left + 1) * 10 + 'px',
+ position: 'absolute'
+ } as StyleValue
+}
+// 鑾峰緱鎼滅储妗嗗睘鎬�
+const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
+ return {
+ height: 30,
+ backgroundColor: cell.backgroundColor,
+ showScan: cell.showScan,
+ placeholder: cell.placeholder,
+ borderRadius: cell.borderRadius,
+ textColor: cell.textColor,
+ placeholderPosition: cell.placeholderPosition
+ } as SearchProperty
+})
+</script>
+<style lang="scss" scoped>
+.navigation-bar {
+ display: flex;
+ height: 50px;
+ background: #fff;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 6px;
+
+ /* 宸﹁竟 */
+ .left {
+ margin-left: 8px;
+ }
+
+ .center {
+ font-size: 14px;
+ line-height: 35px;
+ color: #333;
+ text-align: center;
+ flex: 1;
+ }
+
+ /* 鍙宠竟 */
+ .right {
+ margin-right: 8px;
+ }
+}
+</style>
--
Gitblit v1.8.0