diff --git a/src/components/Swiper/mobile/index.vue b/src/components/Swiper/mobile/index.vue index f0d4638..1ebfc10 100644 --- a/src/components/Swiper/mobile/index.vue +++ b/src/components/Swiper/mobile/index.vue @@ -134,14 +134,14 @@ const { top: 50%; left: 0; right: 0; - padding: 0 8px; /* no */ + padding: 0 8px; z-index: 10; pointer-events: none; .nav-btn { pointer-events: auto; - width: 32px; /* no */ - height: 32px; /* no */ + width: 32px; + height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); diff --git a/src/components/downloadImg/index.vue b/src/components/downloadImg/index.vue index f5143e2..663f10f 100644 --- a/src/components/downloadImg/index.vue +++ b/src/components/downloadImg/index.vue @@ -15,38 +15,106 @@ const options = { diff --git a/src/views/layout/mobile/index.vue b/src/views/layout/mobile/index.vue index 3adea47..448f451 100644 --- a/src/views/layout/mobile/index.vue +++ b/src/views/layout/mobile/index.vue @@ -3,53 +3,58 @@ import {ref, onMounted, watch} from 'vue' import {useRouter} from 'vue-router' import {useNavStore} from '@/store/nav' import {storeToRefs} from 'pinia' -import {Menu, ArrowDown, ArrowRight} from '@element-plus/icons-vue' +import {Menu, ArrowDown} from '@element-plus/icons-vue' const navStore = useNavStore() const {navIndex} = storeToRefs(navStore) const router = useRouter() -const sidebarVisible = ref(false) const navList = ref([]) const activeIndex = ref('/') -const expandedSubMenus = ref([]) - -const toggleSidebar = () => { - sidebarVisible.value = !sidebarVisible.value -} - -const closeSidebar = () => { - sidebarVisible.value = false -} - -const toggleSubMenu = (navId) => { - const idx = expandedSubMenus.value.indexOf(navId) - if (idx > -1) { - expandedSubMenus.value.splice(idx, 1) - } else { - expandedSubMenus.value.push(navId) - } -} +const expandedMenuId = ref(null) const getTargetUrl = (nav) => { return nav.mobileUrl || nav.url } +const isNavActive = (nav) => { + if (activeIndex.value === getTargetUrl(nav)) return true + if (nav.children?.length > 0) { + return nav.children.some((child) => activeIndex.value === getTargetUrl(child)) + } + return false +} + const handleNavClick = (nav) => { if (nav.hasChildren || nav.children?.length > 0) { - toggleSubMenu(nav.id) + expandedMenuId.value = expandedMenuId.value === nav.id ? null : nav.id return } + expandedMenuId.value = null if (nav.open) { window.open(nav.url) - sidebarVisible.value = false return } const targetUrl = getTargetUrl(nav) navStore.changeNavIndex(targetUrl) activeIndex.value = targetUrl router.push(targetUrl) - sidebarVisible.value = false +} + +const handleChildClick = (child) => { + expandedMenuId.value = null + if (child.open) { + window.open(child.url) + return + } + const targetUrl = getTargetUrl(child) + navStore.changeNavIndex(targetUrl) + activeIndex.value = targetUrl + router.push(targetUrl) +} + +const closeDropdown = () => { + expandedMenuId.value = null } watch( @@ -73,52 +78,53 @@ const toMIIF = () => {
- - -
- - -
-
- + +
+
+
+ {{ nav.label }} + + + +
+
+
+ + + +
+ + + + +
+
+
+ {{ child.label }} +
@@ -134,6 +140,20 @@ const toMIIF = () => {
+
+
+ +
企业微信
+
+
+ +
市场联系人
+
+
+ +
陕西联系人
+
+
Copyright © 2023.Rangu Technology Co.,Ltd. 燃谷科技（南京）有限公司 @@ -160,14 +180,14 @@ const toMIIF = () => { position: fixed; top: 0; left: 0; - width: 100%; /* no */ + width: 100%; max-width: 100vw; - height: 44px; /* no */ + height: 44px; background-color: $bg_color; z-index: 110; display: flex; align-items: center; - padding: 0 10px; /* no */ + padding: 0 10px; box-sizing: border-box; .header-menu-icon { @@ -177,78 +197,137 @@ const toMIIF = () => { } .header-logo { + width: 128px; + height: 44px; background-image: url('/static/images/header/logo.png'); - background-size: contain; + background-size: 100% 100%; background-repeat: no-repeat; background-position: center; - width: 100px; - height: 32px; /* no */ - cursor: pointer; - flex-shrink: 0; } } -// ==================== 侧边栏遮罩层 ==================== -.sidebar-mask { +// ==================== 横向滚动菜单栏 ==================== +.menu-bar { position: fixed; - top: 0; + top: 44px; left: 0; width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 100; + max-width: 100vw; + height: 40px; + background-color: $bg_color; + z-index: 109; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } -.mask-fade-enter-active, -.mask-fade-leave-active { - transition: opacity 0.3s ease; +.menu-scroll { + display: flex; + align-items: center; + height: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + padding: 0 10px; + white-space: nowrap; + + &::-webkit-scrollbar { + display: none; + } } -.mask-fade-enter-from, -.mask-fade-leave-to { + +.menu-item { + display: inline-flex; + align-items: center; + flex-shrink: 0; + padding: 0 12px; + height: 100%; + color: #999999; + font-size: 14px; + cursor: pointer; + user-select: none; + transition: color 0.2s ease; + + &:active { + color: $white; + } + + &--active { + color: $white; + } + + &--expanded { + color: $white; + } + + .menu-label { + line-height: 1; + } + + .menu-arrow { + margin-left: 4px; + color: #999999; + transition: transform 0.3s ease; + + &--up { + transform: rotate(180deg); + color: $white; + } + } +} + +// ==================== 子菜单下拉遮罩 ==================== +.dropdown-mask { + position: fixed; + top: 84px; + left: 0; + width: 100%; + max-width: 100vw; + height: calc(100vh - 84px); + background-color: rgba(0, 0, 0, 0.4); + z-index: 107; +} + +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.25s ease; +} +.fade-enter-from, +.fade-leave-to { opacity: 0; } -// ==================== 侧边栏（浮动层） ==================== -.sidebar { +// ==================== 子菜单下拉面板 ==================== +.menu-dropdown { position: fixed; - top: 0; + top: 84px; left: 0; - width: 160px; /* no */ - height: 100%; + width: 100%; + max-width: 100vw; + max-height: 240px; background-color: $bg_color; - z-index: 105; + z-index: 108; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + overflow: hidden; +} + +.dropdown-scroll { + max-height: 240px; overflow-y: auto; - padding-top: 56px; /* no */ - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); /* no */ + -webkit-overflow-scrolling: touch; + padding: 4px 0; } -.sidebar-slide-enter-active, -.sidebar-slide-leave-active { - transition: transform 0.3s ease; -} -.sidebar-slide-enter-from, -.sidebar-slide-leave-to { - transform: translateX(-100%); -} - -.sidebar-nav { - padding: 0; -} - -.nav-group { - border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* no */ -} - -.nav-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 16px; /* no */ - cursor: pointer; +.dropdown-item { + padding: 12px 20px; color: #999999; font-size: 14px; - transition: all 0.2s ease; + cursor: pointer; user-select: none; + transition: all 0.2s ease; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + + &:last-child { + border-bottom: none; + } &:active { background-color: rgba(255, 255, 255, 0.05); @@ -257,37 +336,23 @@ const toMIIF = () => { &--active { color: $white; } - - &--parent { - font-weight: 500; - } - - &--expanded { - color: $white; - } - - &--child { - padding-left: 32px; /* no */ - font-size: 13px; - } - - .nav-label { - flex: 1; - } - - .nav-arrow { - color: #999999; - flex-shrink: 0; - } } -.nav-sub { - overflow: hidden; +.dropdown-enter-active, +.dropdown-leave-active { + transition: + transform 0.25s ease, + opacity 0.25s ease; +} +.dropdown-enter-from, +.dropdown-leave-to { + transform: translateY(-10px); + opacity: 0; } // ==================== Content 内容区域 ==================== .mobile-content { - margin-top: 44px; /* no */ + margin-top: 84px; flex: 1; width: 100%; max-width: 100vw; @@ -298,11 +363,30 @@ const toMIIF = () => { .mobile-footer { width: 100%; max-width: 100vw; - padding: 20px 16px; /* no */ + padding: 20px 16px; box-sizing: border-box; text-align: center; background-color: $bg_color; + .footer-qr { + display: flex; + justify-content: center; + gap: 16px; + margin-bottom: 20px; + + .qr-item { + img { + width: 80px; + height: 80px; + } + .qr-label { + margin-top: 6px; + font-size: 12px; + color: $white; + } + } + } + .footer-info { display: flex; flex-direction: column; diff --git a/src/views/mobile/about/index.vue b/src/views/mobile/about/index.vue index f46d076..4302c3a 100644 --- a/src/views/mobile/about/index.vue +++ b/src/views/mobile/about/index.vue @@ -1,21 +1,14 @@ @@ -36,12 +29,9 @@ const imgList = [

资质证书

-
-
- +
+
+
@@ -74,12 +64,17 @@ const imgList = [ .cert-grid { .cert-row { - display: flex; - justify-content: center; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + margin-bottom: 8px; } - .cert-row--few { - justify-content: center; + .cert-item { + img { + width: 100%; + height: auto; + border-radius: 4px; + } } } diff --git a/src/views/mobile/download/index.vue b/src/views/mobile/download/index.vue index 62b1f43..db8386c 100644 --- a/src/views/mobile/download/index.vue +++ b/src/views/mobile/download/index.vue @@ -27,14 +27,29 @@ const transform = (items) => { items.forEach((item) => { const parts = item.Key.split('/') if (parts.length === 1) { - root.children.push({name: parts[0], type: 'file', etag: item.ETag, size: item.Size, lastModified: item.LastModifiedDateTime, fullPath: item.Key}) + root.children.push({ + name: parts[0], + type: 'file', + etag: item.ETag, + size: item.Size, + lastModified: item.LastModifiedDateTime, + fullPath: item.Key, + }) } else { - let currentParent = root, currentPath = '' + let currentParent = root, + currentPath = '' for (let i = 0; i < parts.length - 1; i++) { currentPath += (currentPath ? '/' : '') + parts[i] currentParent = getOrCreateFolder(currentParent, parts[i], currentPath + '/') } - currentParent.children.push({name: parts[parts.length - 1], type: 'file', etag: item.ETag, size: item.Size, lastModified: item.LastModifiedDateTime, fullPath: item.Key}) + currentParent.children.push({ + name: parts[parts.length - 1], + type: 'file', + etag: item.ETag, + size: item.Size, + lastModified: item.LastModifiedDateTime, + fullPath: item.Key, + }) } }) return root.children @@ -45,25 +60,36 @@ const treeProps = {children: 'children', label: 'name'} const formatSize = (bytes) => { if (!bytes) return '' const units = ['B', 'KB', 'MB', 'GB'] - let i = 0, size = bytes - while (size >= 1024 && i < units.length - 1) { size /= 1024; i++ } + let i = 0, + size = bytes + while (size >= 1024 && i < units.length - 1) { + size /= 1024 + i++ + } return size.toFixed(2) + ' ' + units[i] } const getList = () => { downloadList({recursive: true, version: true, prefix: '', bucket: ''}) - .then((res) => { if (res.code == 0 && res?.data?.length > 0) list.value = transform(res.data) }) + .then((res) => { + if (res.code == 0 && res?.data?.length > 0) list.value = transform(res.data) + }) .catch(() => {}) } const downloadFileFN = (data) => { downloadFile({bucket: '', objname: data.fullPath, expiresMinutes: 60, isDownload: true}) - .then((res) => { if (res.code === 0 && res.data) window.open(res.data) }) + .then((res) => { + if (res.code === 0 && res.data) window.open(res.data) + }) .catch(() => {}) } const showMsg = () => ElMessage.warning('敬请期待！') -const openImg = (type) => { imgType.value = type; showImgType.value = true } +const openImg = (type) => { + imgType.value = type + showImgType.value = true +} diff --git a/src/views/mobile/link/index.vue b/src/views/mobile/link/index.vue index 3a4f0b8..3824eb8 100644 --- a/src/views/mobile/link/index.vue +++ b/src/views/mobile/link/index.vue @@ -2,8 +2,12 @@ import {ref, onMounted} from 'vue' import Banner from '@/components/Banner/index.vue' -const toCompany = () => { - window.open('https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8') +const toCompany = (type) => { + if (type === 'nj') { + window.open('https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8') + } else { + window.open('https://ditu.amap.com/search?query=%E9%99%95%E8%A5%BF%E7%9C%81%E8%A5%BF%E5%AE%89%E5%B8%82%E9%9B%81%E5%A1%94%E5%8C%BA%E8%A5%BF%E6%B2%A3%E8%B7%AF56%E5%8F%B7%E4%B8%87%E7%A7%91%E6%B1%87%E6%99%BA%E4%B8%AD%E5%BF%83') + } } @@ -20,7 +24,15 @@ const toCompany = () => {
邮箱：company@rangutech.com
地址：江苏省南京市鼓楼区万谷硅巷5F
- + +
+
+
+
燃谷科技（陕西）有限公司
+
电话：15009261000
+
地址：陕西省西安市雁塔区西沣路56号万科汇智中心2506
+
+
@@ -44,6 +56,7 @@ const toCompany = () => { display: flex; flex-direction: column; gap: 16px; + margin-bottom: 24px; .info-list { .info-item { diff --git a/src/views/mobile/product/detail.vue b/src/views/mobile/product/detail.vue index 0da3547..9170e3e 100644 --- a/src/views/mobile/product/detail.vue +++ b/src/views/mobile/product/detail.vue @@ -84,7 +84,8 @@ function toBack() { // ============== 硬件区域 ============== .hardware-section { .hardware-img { - width: 100%; + margin-left: 10%; + width: 80%; height: auto; border-radius: 8px; }