549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
<template>
|
|
<view :class="`${phone}-style`">
|
|
<!-- 导航样式 -->
|
|
<view class="nav-bar-box" :class="{ 'border-nav-bar-box': isScroll }">
|
|
<NavBar :isBack="false" :bgColor="isScroll ? data.navBar.bgColor : '#fff'">
|
|
<!-- 左侧文字图标 -->
|
|
<template v-slot:left>
|
|
<view v-if="phone == 'iphone'" class="flex flex-align-center">
|
|
<image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
|
|
mode=""></image>
|
|
<text class="left-text">过滤条件</text>
|
|
</view>
|
|
<view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
|
|
<text class="left-text">信息</text>
|
|
</view>
|
|
</template>
|
|
<!-- 中间标题 -->
|
|
<template v-slot:center>
|
|
<view v-if="phone == 'iphone' && isScroll" class="center-text">
|
|
信息
|
|
</view>
|
|
</template>
|
|
<!-- 右侧图标 -->
|
|
<template v-slot:right>
|
|
<!-- iphone -->
|
|
<view v-if="phone == 'iphone'">
|
|
<image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode="">
|
|
</image>
|
|
<image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode="">
|
|
</image>
|
|
</view>
|
|
<!-- mi -->
|
|
<view v-if="phone == 'mi'">
|
|
<image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
|
|
</view>
|
|
<!-- oppo -->
|
|
<view v-if="phone == 'oppo'">
|
|
<image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode="">
|
|
</image>
|
|
<image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode="">
|
|
</image>
|
|
</view>
|
|
<!-- huawei -->
|
|
<view v-if="phone == 'huawei'">
|
|
<image v-if="isScroll" class="right-icon"
|
|
src="/static/image/phone-message/huawei/nav-search.png" mode="">
|
|
</image>
|
|
<image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
|
|
<image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
|
|
</view>
|
|
<!-- vivo -->
|
|
<view v-if="phone == 'vivo'">
|
|
<image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
|
|
</image>
|
|
<image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
|
|
<image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode="">
|
|
</image>
|
|
</view>
|
|
</template>
|
|
</NavBar>
|
|
</view>
|
|
|
|
<!-- 主体内容 -->
|
|
<view class="main-container">
|
|
<!-- 顶部搜索栏样式 -->
|
|
<view class="top-box">
|
|
<view v-if="showInfo.text" class="text">{{ showInfo.text }}</view>
|
|
<view v-if="showInfo.secondText" class="second-text">{{ showInfo.secondText }}</view>
|
|
<view v-if="showInfo.placeholder" class="search-box flex flex-align-center">
|
|
<image class="icon" :src="`/static/image/phone-message/${props.phone}/search.png`">
|
|
</image>
|
|
<input class="input flex-1" :placeholder="showInfo.placeholder" type="text">
|
|
<image class="icon" :src="`/static/image/phone-message/${props.phone}/mic.png`"></image>
|
|
</view>
|
|
</view>
|
|
<slot>
|
|
</slot>
|
|
</view>
|
|
<view class="bottom-placeholder"></view>
|
|
<!-- 底部样式 -->
|
|
<template v-if="phone == 'mi' || phone == 'oppo'">
|
|
<image class="add-message" :src="`/static/image/phone-message/${props.phone}/add-message.png`"></image>
|
|
<view class="bottom-box flex">
|
|
<view class="item flex-1 h100">
|
|
<image class="icon" :src="`/static/image/phone-message/${props.phone}/bottom-left.png`"></image>
|
|
<text>{{ showInfo.bottomLtext }}</text>
|
|
</view>
|
|
<view class="item flex-1 h100">
|
|
<image class="icon" :src="`/static/image/phone-message/${props.phone}/bottom-right.png`"></image>
|
|
<text class="grey">{{ showInfo.bottomRtext }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed
|
|
} from 'vue'
|
|
import {
|
|
util
|
|
} from '@/utils/common.js';
|
|
|
|
const props = defineProps({
|
|
// 手机品牌
|
|
phone: {
|
|
type: String,
|
|
default: 'iphone'
|
|
},
|
|
// 是否向下滚动
|
|
isScroll: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
|
|
const data = reactive({
|
|
navBar: {
|
|
title: '信息',
|
|
bgColor: '#FFFFFF',
|
|
}
|
|
})
|
|
|
|
// 展示文字信息
|
|
const showInfo = computed(() => {
|
|
let text, placeholder, secondText, bottomLtext, bottomRtext
|
|
switch (props.phone) {
|
|
case "iphone":
|
|
text = "信息"
|
|
placeholder = '搜索'
|
|
data.navBar.bgColor = '#F8F8F8'
|
|
break;
|
|
case "mi":
|
|
text = "主要"
|
|
placeholder = '搜索短信'
|
|
bottomLtext = "主要"
|
|
bottomRtext = "推广"
|
|
break;
|
|
case "oppo":
|
|
text = "消息"
|
|
placeholder = ''
|
|
bottomLtext = "消息"
|
|
bottomRtext = "通知"
|
|
break;
|
|
case "huawei":
|
|
text = "信息"
|
|
placeholder = '搜索信息'
|
|
secondText = "388 条未读"
|
|
break;
|
|
case "vivo":
|
|
placeholder = '搜索信息'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return { text, placeholder, secondText, bottomLtext, bottomRtext }
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/main.css';
|
|
|
|
page {
|
|
background-color: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
::v-deep .uni-navbar__header-btns {
|
|
width: 100px !important;
|
|
flex: 1;
|
|
}
|
|
|
|
::v-deep .uni-navbar__header {
|
|
align-items: center !important;
|
|
}
|
|
|
|
.bottom-box {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120rpx;
|
|
border-top: 1rpx solid #E7E7E7;
|
|
background-color: #ffffff;
|
|
z-index: 9;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.grey {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 苹果机型样式
|
|
.iphone-style {
|
|
.mg-r-30 {
|
|
margin-right: 60rpx;
|
|
}
|
|
|
|
.mg-r-5 {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.left-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.left-text {
|
|
font-size: 32rpx;
|
|
color: #0278E2;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.center-text {
|
|
font-size: 32rpx;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.border-nav-bar-box {
|
|
::v-deep .nav-bar {
|
|
border-bottom: 1rpx solid #B5B5B5;
|
|
}
|
|
}
|
|
|
|
.main-container {
|
|
.top-box {
|
|
padding: 20rpx 32rpx 0;
|
|
|
|
.text {
|
|
color: #1A1A1A;
|
|
font-size: 64rpx;
|
|
font-weight: 700;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.search-box {
|
|
margin-top: 20rpx;
|
|
background-color: #EEEEF0;
|
|
height: 68rpx;
|
|
border-radius: 24rpx;
|
|
padding: 0 16rpx;
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.input {
|
|
margin: 0 14rpx;
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #838383;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 小米机型样式
|
|
.mi-style {
|
|
.right-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.main-container {
|
|
|
|
.top-box {
|
|
padding: 0 22rpx 0;
|
|
|
|
.text {
|
|
color: #1A1A1A;
|
|
font-size: 60rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.search-box {
|
|
margin-top: 32rpx;
|
|
background-color: #F0F0F0;
|
|
height: 84rpx;
|
|
border-radius: 42rpx;
|
|
padding: 0 34rpx;
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.input {
|
|
margin: 0 18rpx;
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #A9A9A9;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-message {
|
|
position: fixed;
|
|
bottom: 168rpx;
|
|
right: 44rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 120rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
// oppo机型
|
|
.oppo-style {
|
|
.mg-r-52 {
|
|
margin-right: 52rpx;
|
|
}
|
|
|
|
.mg-r-14 {
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.main-container {
|
|
|
|
|
|
.top-box {
|
|
padding: 16rpx 34rpx 0;
|
|
margin-bottom: 50rpx;
|
|
|
|
.text {
|
|
color: #1A1A1A;
|
|
font-size: 64rpx;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-message {
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
position: fixed;
|
|
bottom: 200rpx;
|
|
right: 46rpx;
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 148rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.bottom-box {
|
|
height: 148rpx;
|
|
background-color: #FAFAFA;
|
|
border-top: 1rpx solid #DCDCDC;
|
|
|
|
.item {
|
|
.icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
text {
|
|
color: #191919;
|
|
}
|
|
|
|
.grey {
|
|
color: #717171;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 华为机型
|
|
.huawei-style {
|
|
|
|
::v-deep .uni-navbar__header-container {
|
|
flex: 0;
|
|
}
|
|
|
|
.left-text {
|
|
color: #1a1a1a;
|
|
font-size: 50rpx;
|
|
font-weight: 700;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
margin: 0 8rpx;
|
|
}
|
|
|
|
.border-nav-bar-box {
|
|
::v-deep .nav-bar {
|
|
border-bottom: 1rpx solid #D1D1D1;
|
|
}
|
|
}
|
|
|
|
.main-container {
|
|
|
|
|
|
.top-box {
|
|
padding: 40rpx 34rpx 0;
|
|
|
|
.text {
|
|
color: #1A1A1A;
|
|
font-size: 60rpx;
|
|
font-weight: 700;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.second-text {
|
|
color: #646464;
|
|
font-size: 28rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.search-box {
|
|
margin-top: 40rpx;
|
|
background-color: #F4F4F4;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
padding: 0 24rpx;
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.input {
|
|
margin: 0 14rpx;
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #646464;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// vivo机型
|
|
.vivo-style {
|
|
::v-deep .uni-navbar__header-container {
|
|
flex: 0;
|
|
}
|
|
|
|
.m-r-34 {
|
|
margin-right: 34rpx !important;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 52rpx;
|
|
}
|
|
|
|
.left-text {
|
|
font-size: 54rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 700;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.main-container {
|
|
.top-box {
|
|
padding: 0 46rpx;
|
|
|
|
.search-box {
|
|
position: relative;
|
|
margin-top: 70rpx;
|
|
background-color: #ffffff;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
padding: 0 10rpx;
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.input {
|
|
margin: 0 20rpx;
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #646464;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-box::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 100%;
|
|
height: 12rpx;
|
|
background-color: #F0F0F0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|