184 lines
3.0 KiB
Vue
184 lines
3.0 KiB
Vue
<template>
|
|
<view class="footer" :class="['footer_'+type]">
|
|
<view class="item" v-for="(item,index) in list" :key="index">
|
|
<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
|
|
<text>{{item}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="footer footerZhangwei" :class="['footer_'+type]">
|
|
<view class="item" v-for="(item,index) in list" :key="index">
|
|
<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
|
|
<text>{{item}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onMounted,
|
|
reactive,
|
|
ref,
|
|
toRefs
|
|
} from 'vue'
|
|
|
|
const topPopup = ref()
|
|
|
|
// 定义组件属性
|
|
const props = defineProps({
|
|
bgColor: {
|
|
type: String,
|
|
default: '#fff'
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: '#000'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'ios'
|
|
},
|
|
})
|
|
|
|
const data = reactive({
|
|
statusBarHeight: 0,
|
|
showTipLayer: true,
|
|
list: [
|
|
"个人收藏",
|
|
"最近通话",
|
|
"通讯录",
|
|
"拨号键盘",
|
|
"语音留言"
|
|
]
|
|
})
|
|
|
|
let {
|
|
list,
|
|
showTipLayer
|
|
} = toRefs(data)
|
|
|
|
onMounted(() => {
|
|
if (props.type == 'xiaomi') {
|
|
list.value = ["通话",
|
|
"联系人",
|
|
"营业厅"
|
|
]
|
|
}else if (props.type == 'oppo') {
|
|
list.value = ["通话",
|
|
"联系人",
|
|
"营业厅"
|
|
]
|
|
}else if (props.type == 'huawei') {
|
|
list.value = ["电话",
|
|
"联系人",
|
|
"收藏"
|
|
]
|
|
}else if (props.type == 'vivo') {
|
|
list.value = ["拨号",
|
|
"联系人",
|
|
"收藏"
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.footerZhangwei{
|
|
position: relative !important;
|
|
opacity: 0 !important;
|
|
}
|
|
.footer {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background: #f7f7f7;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
text {
|
|
font-size: 10px;
|
|
color: #959597;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer_ios {
|
|
padding-top: 2px;
|
|
padding-bottom: constant(safe-area-inset-bottom) !important; // 兼容 IOS<11.2
|
|
padding-bottom: env(safe-area-inset-bottom) !important; // 兼容 IOS>11.2
|
|
.item:nth-child(2) {
|
|
text {
|
|
color: #007AFC;
|
|
}
|
|
}
|
|
}
|
|
.footer_huawei {
|
|
background: #FAFAFA !important;
|
|
padding-top: 3px;
|
|
.item {
|
|
image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
.item:nth-child(1) {
|
|
text {
|
|
color: #0060EA;
|
|
}
|
|
}
|
|
}
|
|
.footer_vivo {
|
|
background: #FAFAFA !important;
|
|
padding-top: 13px;
|
|
padding-bottom: 13px;
|
|
.item {
|
|
image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
.item:nth-child(1) {
|
|
text {
|
|
color: #1BA552;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer_xiaomi ,.footer_oppo{
|
|
padding-top: 7px;
|
|
padding-bottom: 17px;
|
|
background-color: #fff !important;
|
|
.item {
|
|
image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
text {
|
|
font-size: 10px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.item:nth-child(1) {
|
|
text {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |