|
|
|
@ -1,13 +1,15 @@ |
|
|
|
<template> |
|
|
|
<div class="footer-bar"> |
|
|
|
<div v-for="item in tabs" :key="item.key" class="footer-item" |
|
|
|
:class="{ 'footer-item--active': item.key === active }" @click="onTabClick(item)"> |
|
|
|
<div v-for="item in tabs" :key="item.key" |
|
|
|
:class="['footer-item', { 'footer-item--active': item.key === active, 'footer-item--nos': item.key === 'nos' }]" |
|
|
|
@click="onTabClick(item)"> |
|
|
|
<div v-if="item.key === 'message'" class="footer-icon-wrap"> |
|
|
|
<svg viewBox="0 0 24 24" fill="currentColor" v-html="item.path"></svg> |
|
|
|
<span v-if="messageUnread" class="footer-badge">{{ messageUnread }}</span> |
|
|
|
</div> |
|
|
|
<img v-else-if="item.key === 'nos'" :src="item.imgSrc" class="footer-icon-img" /> |
|
|
|
<svg v-else viewBox="0 0 24 24" fill="currentColor" v-html="item.path"></svg> |
|
|
|
<span>{{ item.label }}</span> |
|
|
|
<span>{{ item.label!='非现场'?item.label:'' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -16,6 +18,8 @@ |
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
import { onMounted } from 'vue'; |
|
|
|
import { getMessageUnreadCount } from '@/api/enforcement/index'; |
|
|
|
import nosIcon from '@/assets/images/nos/off_site_bottom_icon.png'; |
|
|
|
import tabBarBg from '@/assets/images/nos/tab_bar_bg.png'; |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
active: { |
|
|
|
@ -39,8 +43,7 @@ const tabs = [ |
|
|
|
key: "nos", |
|
|
|
label: "非现场", |
|
|
|
route: "/enforcement/nos", |
|
|
|
viewBox: "10 6 60 60", |
|
|
|
path: '<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>' |
|
|
|
imgSrc: nosIcon |
|
|
|
}, |
|
|
|
// { key: 'query', label: '查询', route: '/enforcement/query', |
|
|
|
// path: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>' }, |
|
|
|
@ -85,12 +88,13 @@ onMounted(() => { |
|
|
|
.footer-bar { |
|
|
|
flex-shrink: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: flex-end; |
|
|
|
justify-content: space-around; |
|
|
|
background: #fff; |
|
|
|
padding: 8px 0; |
|
|
|
background: url(~@/assets/images/nos/tab_bar_bg.png) no-repeat center top; |
|
|
|
background-size: 100% auto; |
|
|
|
padding: 0; |
|
|
|
padding-bottom: calc(8px + env(safe-area-inset-bottom)); |
|
|
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); |
|
|
|
height: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-item { |
|
|
|
@ -103,12 +107,30 @@ onMounted(() => { |
|
|
|
font-size: 11px; |
|
|
|
cursor: pointer; |
|
|
|
user-select: none; |
|
|
|
position: relative; |
|
|
|
padding-bottom: 4px; |
|
|
|
|
|
|
|
svg { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
&--nos { |
|
|
|
flex-shrink: 0; |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
justify-content: center; |
|
|
|
padding-top: 0; |
|
|
|
padding-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-icon-img { |
|
|
|
width: 86px; |
|
|
|
height: 86px; |
|
|
|
position: relative; |
|
|
|
top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
&--active { |
|
|
|
color: #2b7de9; |
|
|
|
} |
|
|
|
|
