完成短信入口及导航栏
This commit is contained in:
tangxinyue
parent
b1e6fa9368
commit
465f53d15b
|
|
@ -6,8 +6,8 @@
|
|||
"type" : "uni-app:app-ios"
|
||||
},
|
||||
{
|
||||
"customPlaygroundType" : "device",
|
||||
"playground" : "standard",
|
||||
"customPlaygroundType" : "local",
|
||||
"playground" : "custom",
|
||||
"type" : "uni-app:app-android"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,510 @@
|
|||
<template>
|
||||
<view :class="`${phone}-style`">
|
||||
<!-- 导航样式 -->
|
||||
<NavBar :isBack="false">
|
||||
<!-- 左侧文字图标 -->
|
||||
<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/ios/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/ios/more.png" mode=""></image>
|
||||
<image class="right-icon mg-r-5" src="/static/image/phone-message/ios/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 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>
|
||||
<!-- 底部样式 -->
|
||||
<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 showInfo = computed(() => {
|
||||
let text, placeholder, secondText, bottomLtext, bottomRtext
|
||||
switch (props.phone) {
|
||||
case "iphone":
|
||||
text = "信息"
|
||||
placeholder = '搜索'
|
||||
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 }
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
navBar: {
|
||||
title: '信息',
|
||||
bgColor: '#FFFFFF',
|
||||
}
|
||||
})
|
||||
</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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 20rpx 32rpx;
|
||||
|
||||
.top-box {
|
||||
.text {
|
||||
color: #1A1A1A;
|
||||
font-size: 64rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 0 22rpx;
|
||||
|
||||
.top-box {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// oppo机型
|
||||
.oppo-style {
|
||||
.mg-r-52 {
|
||||
margin-right: 52rpx;
|
||||
}
|
||||
|
||||
.mg-r-14 {
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 16rpx 34rpx;
|
||||
|
||||
.top-box {
|
||||
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-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;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 40rpx 34rpx;
|
||||
|
||||
.top-box {
|
||||
.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>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<template v-slot:left>
|
||||
<view class="nav-bar-left">
|
||||
<slot name="left">
|
||||
<view class="left-icon" @click.stop="onBack">
|
||||
<view v-if="isBack" class="left-icon" @click.stop="onBack">
|
||||
<image class="nav-icon-back"
|
||||
:src="`/static/image/nav-bar/back-${textColor == '#fff' || textColor == '#fffffff' ? 'white' : 'black'}.png`"
|
||||
mode="">
|
||||
|
|
@ -130,6 +130,10 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
tipLayerText: {
|
||||
type: String,
|
||||
default: ''
|
||||
|
|
|
|||
25
pages.json
25
pages.json
|
|
@ -10,8 +10,7 @@
|
|||
}
|
||||
],
|
||||
|
||||
"subPackages": [
|
||||
{
|
||||
"subPackages": [{
|
||||
"root": "pages/call-log",
|
||||
"pages": [{
|
||||
"path": "call",
|
||||
|
|
@ -19,8 +18,17 @@
|
|||
"navigationBarTitleText": "通话记录页面",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/message",
|
||||
"pages": [{
|
||||
"path": "list-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "短信列表首页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/balance",
|
||||
|
|
@ -237,6 +245,13 @@
|
|||
"navigationBarTitleText": "充值页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "call-and-message-entry/call-and-message-entry",
|
||||
"style": {
|
||||
"navigationBarTitleText": "呼叫和短信入口",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -250,7 +265,9 @@
|
|||
"pages/common",
|
||||
"pages/finance-management",
|
||||
"pages/ant-credit-pay",
|
||||
"pages/other"
|
||||
"pages/other",
|
||||
"pages/message",
|
||||
"pages/call-log"
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<view>
|
||||
<NavBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" />
|
||||
<view class="list-container">
|
||||
<view class="item" v-for="item in source" :key="item.id"
|
||||
:style="{ background: `linear-gradient( -270deg, ${item.color.bgColor} 0%, #FFFFFF 70%), #FFFFFF` }">
|
||||
<view class="content flex flex-align-center">
|
||||
<image class="logo" :src="`/static/image/common/phone/${item.icon}.png`" mode=""></image>
|
||||
<view class="name flex-1">{{ item.name }}机型</view>
|
||||
<view class="right-button" :style="{ background: item.color.buttonColor }"
|
||||
@click="goPage(data.type == 'message' ? item.messageUrl : item.callUrl)">立即进入</view>
|
||||
</view>
|
||||
<view class="line" :style="{ background: item.color.lineColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
||||
import {
|
||||
ref,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad
|
||||
} from "@dcloudio/uni-app";
|
||||
import {
|
||||
util
|
||||
} from '@/utils/common.js';
|
||||
|
||||
// 列表
|
||||
const source = ref([{
|
||||
name: '苹果',
|
||||
color: {
|
||||
bgColor: '#F3EAFF',
|
||||
lineColor: '#B78EF5',
|
||||
buttonColor: '#BA8DFF',
|
||||
},
|
||||
icon: 'iphone',
|
||||
messageUrl: "/pages/message/list-index?phone=iphone",
|
||||
callUrl: ""
|
||||
},
|
||||
{
|
||||
name: '华为',
|
||||
color: {
|
||||
bgColor: '#FFE9E9',
|
||||
lineColor: '#FF6969',
|
||||
buttonColor: '#FB6767',
|
||||
},
|
||||
icon: 'huawei',
|
||||
messageUrl: "/pages/message/list-index?phone=huawei",
|
||||
callUrl: ""
|
||||
},
|
||||
{
|
||||
name: '小米',
|
||||
color: {
|
||||
bgColor: '#FFF0DD',
|
||||
lineColor: '#FFA143',
|
||||
buttonColor: '#FFA64D',
|
||||
},
|
||||
icon: 'mi',
|
||||
messageUrl: "/pages/message/list-index?phone=mi",
|
||||
callUrl: ""
|
||||
},
|
||||
{
|
||||
name: 'oppo',
|
||||
color: {
|
||||
bgColor: '#E0FFD9',
|
||||
lineColor: '#56B745',
|
||||
buttonColor: '#5DCD49',
|
||||
},
|
||||
icon: 'oppo',
|
||||
messageUrl: "/pages/message/list-index?phone=oppo",
|
||||
callUrl: ""
|
||||
}, {
|
||||
name: 'vivo',
|
||||
color: {
|
||||
bgColor: '#D4F4FF',
|
||||
lineColor: '#52C2FF',
|
||||
buttonColor: '#50C1FE',
|
||||
},
|
||||
icon: 'vivo',
|
||||
messageUrl: "/pages/message/list-index?phone=vivo",
|
||||
callUrl: ""
|
||||
},
|
||||
])
|
||||
|
||||
const data = reactive({
|
||||
navBar: {
|
||||
title: '选择机型',
|
||||
bgColor: '#F0F4F9',
|
||||
},
|
||||
type: "message"
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.type) {
|
||||
data.type = options.type
|
||||
}
|
||||
})
|
||||
|
||||
function goPage(url) {
|
||||
if (url) {
|
||||
util.goPage(url)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '@/common/main.css';
|
||||
</style>
|
||||
<style lang="less">
|
||||
.list-container {
|
||||
background-color: #F0F4F9;
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 188rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 40rpx 36rpx 24rpx 28rpx;
|
||||
|
||||
.content {
|
||||
.logo {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 32rpx;
|
||||
color: #1A1A1A;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.right-button {
|
||||
width: 140rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100rpx;
|
||||
height: 8rpx;
|
||||
filter: blur(5px);
|
||||
opacity: 0.5;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<view class="group-box">
|
||||
<image class="title-img" src="/static/image/index/shipingjiaocheng.png"></image>
|
||||
<view class="video-help-box">
|
||||
<view class="video-help-item" :style="{ width: (windowWidth - 50) / 4 + 'px' }"
|
||||
<view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }"
|
||||
v-for="item in videoHelpList" :key="item.id" @click="clickVideoHelp(item)">
|
||||
<image class="video-help-img" :src="item.icon"></image>
|
||||
<text class="video-help-title">{{ item.text }}</text>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
<view class="group-box">
|
||||
<image class="title-img" src="/static/image/index/qita.png"></image>
|
||||
<view class="video-help-box">
|
||||
<view class="video-help-item" :style="{ width: (windowWidth - 50) / 4 + 'px' }"
|
||||
<view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }"
|
||||
v-for="item in otherList" :key="item.id" @click="clickMenu(item)">
|
||||
<image class="video-help-img" :src="item.icon"></image>
|
||||
<text class="video-help-title">{{ item.name }}</text>
|
||||
|
|
@ -136,42 +136,42 @@
|
|||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
util,
|
||||
uiUtil
|
||||
} from '@/utils/common.js'
|
||||
import {
|
||||
} from '@/utils/common.js'
|
||||
import {
|
||||
storage
|
||||
} from '@/utils/storage.js'
|
||||
import {
|
||||
} from '@/utils/storage.js'
|
||||
import {
|
||||
get,
|
||||
postJson
|
||||
} from '@/utils/requests.js'
|
||||
import {
|
||||
} from '@/utils/requests.js'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
toRefs
|
||||
} from 'vue';
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
import {
|
||||
onLoad,
|
||||
onShow,
|
||||
onHide,
|
||||
onUnload,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
} from '@dcloudio/uni-app';
|
||||
|
||||
onReady(() => {
|
||||
onReady(() => {
|
||||
// NVUE 挂载极快，但给它 100~200ms 的喘息让原生视图确认渲染
|
||||
setTimeout(() => {
|
||||
// #ifdef APP-PLUS
|
||||
plus.navigator.closeSplashscreen();
|
||||
// #endif
|
||||
}, 150);
|
||||
});
|
||||
});
|
||||
|
||||
// 内部埋点方法
|
||||
const apiUserEvent = async (type, adminData) => {
|
||||
// 内部埋点方法
|
||||
const apiUserEvent = async (type, adminData) => {
|
||||
let uni_version = uni.getStorageSync("version")
|
||||
if (type != 'uni') {
|
||||
await postJson('a', 'api/user/event', {
|
||||
|
|
@ -184,10 +184,10 @@ const apiUserEvent = async (type, adminData) => {
|
|||
}),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内部跳转充值页方法
|
||||
const goRechargePage = () => {
|
||||
// 内部跳转充值页方法
|
||||
const goRechargePage = () => {
|
||||
// 进入页面
|
||||
apiUserEvent('all', {
|
||||
type: "event",
|
||||
|
|
@ -200,64 +200,69 @@ const goRechargePage = () => {
|
|||
uni.navigateTo({
|
||||
url: '/pages/common/recharge/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单列表
|
||||
const menuList = [{
|
||||
// 菜单列表
|
||||
const menuList = [{
|
||||
icon: "yuemoni",
|
||||
name: "余额模拟",
|
||||
isHot: false,
|
||||
path: "/pages/balance/index"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "zhangdanshencheng",
|
||||
name: "账单生成",
|
||||
isHot: false,
|
||||
path: "/pages/bill/bill-list/bill-list"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "licaiheika",
|
||||
name: "理财黑卡",
|
||||
isHot: true,
|
||||
path: "/pages/finance-management/index"
|
||||
// path: ""
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "huabei",
|
||||
name: "花呗",
|
||||
isHot: false,
|
||||
path: "/pages/ant-credit-pay/index"
|
||||
},
|
||||
]
|
||||
const otherList = [{
|
||||
},
|
||||
]
|
||||
const otherList = [{
|
||||
icon: "/static/image/index/qita/jipiao.png",
|
||||
name: "机票",
|
||||
path: "/pages/other/tickets-app/index?type=airTicket"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/huochepiao.png",
|
||||
name: "火车票",
|
||||
// path: "/pages/other/train-tickets/12306-tickets/12306-tickets"
|
||||
path: "/pages/other/tickets-app/index?type=trainTicket"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/gongzidan.png",
|
||||
name: "工资单",
|
||||
path: "/pages/other/splash/splash"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/shipinqunliao.png",
|
||||
name: "视频群聊",
|
||||
path: "/pages/other/video-group-chat/video-group-chat"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/card.png",
|
||||
name: "身份证",
|
||||
path: "/pages/other/card/card"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/card.png",
|
||||
name: "短信",
|
||||
path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
|
||||
},
|
||||
]
|
||||
|
||||
const data = reactive({
|
||||
const data = reactive({
|
||||
navBarBgColor: 'transparent',
|
||||
statusBarHeight: 0,
|
||||
windowWidth: 0,
|
||||
|
|
@ -268,9 +273,9 @@ const data = reactive({
|
|||
vision: "",
|
||||
platform: '', // 添加平台信息,
|
||||
qqgroup: {}
|
||||
})
|
||||
})
|
||||
|
||||
const {
|
||||
const {
|
||||
statusBarHeight,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
|
|
@ -280,12 +285,12 @@ const {
|
|||
vision,
|
||||
platform,
|
||||
qqgroup
|
||||
} = toRefs(data);
|
||||
} = toRefs(data);
|
||||
|
||||
/**
|
||||
/**
|
||||
* 处理页面滚动事件
|
||||
*/
|
||||
const handleScroll = (e) => {
|
||||
const handleScroll = (e) => {
|
||||
const scrollTop = e.detail.scrollTop
|
||||
// 滚动超过20px时显示蓝色背景，否则显示透明背景
|
||||
if (scrollTop > 20) {
|
||||
|
|
@ -293,16 +298,16 @@ const handleScroll = (e) => {
|
|||
} else {
|
||||
data.navBarBgColor = 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
onLoad(async () => {
|
||||
// 获取平台信息
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
data.platform = systemInfo.platform
|
||||
data.vision = uni.getStorageSync('version')
|
||||
})
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
onShow(() => {
|
||||
// 启动时获取数据
|
||||
fetchUserData()
|
||||
// 每次显示时刷新数据
|
||||
|
|
@ -318,12 +323,12 @@ onShow(() => {
|
|||
plus.navigator.setStatusBarStyle("dark");
|
||||
}, 500)
|
||||
// #endif
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取用户数据(从服务器)
|
||||
*/
|
||||
const fetchUserData = async () => {
|
||||
const fetchUserData = async () => {
|
||||
try {
|
||||
// 先设置默认值,避免页面显示异常
|
||||
setUserData()
|
||||
|
|
@ -363,12 +368,12 @@ const fetchUserData = async () => {
|
|||
} catch (error) {
|
||||
console.error('获取用户数据异常:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
const fetchUserInfo = async () => {
|
||||
const fetchUserInfo = async () => {
|
||||
const data = await get('', 'api/user', {})
|
||||
if (data.code === 0) {
|
||||
uni.setStorageSync('userInfo', data.data)
|
||||
|
|
@ -376,12 +381,12 @@ const fetchUserInfo = async () => {
|
|||
} else {
|
||||
throw new Error(data.message || '获取用户信息失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取用户配置
|
||||
*/
|
||||
const fetchUserConfig = async () => {
|
||||
const fetchUserConfig = async () => {
|
||||
const data = await get('', 'api/user/config', {})
|
||||
if (data.code === 0) {
|
||||
uni.setStorageSync('config', data.data)
|
||||
|
|
@ -389,13 +394,13 @@ const fetchUserConfig = async () => {
|
|||
} else {
|
||||
throw new Error(data.message || '获取用户配置失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* 设置用户数据(从本地存储读取)
|
||||
*/
|
||||
const setUserData = () => {
|
||||
const setUserData = () => {
|
||||
// 用户信息 - 提供默认值
|
||||
const userInfoData = storage.get("userInfo")
|
||||
data.userInfo = userInfoData || {
|
||||
|
|
@ -437,9 +442,9 @@ const setUserData = () => {
|
|||
}
|
||||
data.videoHelpList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clickMenu = (item) => {
|
||||
const clickMenu = (item) => {
|
||||
if (!item.path) {
|
||||
uiUtil.showError('开发中')
|
||||
} else {
|
||||
|
|
@ -450,61 +455,61 @@ const clickMenu = (item) => {
|
|||
}
|
||||
util.goPage(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 开通vip
|
||||
const openVip = () => {
|
||||
// 开通vip
|
||||
const openVip = () => {
|
||||
goRechargePage()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 点击视频教程
|
||||
* @param item
|
||||
*/
|
||||
const clickVideoHelp = (item) => {
|
||||
const clickVideoHelp = (item) => {
|
||||
const url = item.url
|
||||
util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 点击公告
|
||||
*/
|
||||
const clickNotice = () => {
|
||||
const clickNotice = () => {
|
||||
console.log("点击公告", noticeInfo.value)
|
||||
if (!noticeInfo.value.url) return
|
||||
const url = noticeInfo.value.url + `&uni_id=${userInfo.value.user_id}`
|
||||
util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${noticeInfo.value.title}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 终极兼容版复制函数
|
||||
*/
|
||||
const copyNumber = (number) => {
|
||||
const copyNumber = (number) => {
|
||||
if (!number) return;
|
||||
const text = String(number);
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
success: function () {
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
fail: function () {
|
||||
fail: function() {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* 退出模拟器
|
||||
*/
|
||||
const exit = () => {
|
||||
const exit = () => {
|
||||
console.log("退出模拟器")
|
||||
// 判断是否为 iOS 环境
|
||||
if (uni.getSystemInfoSync().platform === 'ios') {
|
||||
|
|
@ -514,25 +519,25 @@ const exit = () => {
|
|||
} else {
|
||||
plus.runtime.quit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const noticeContainer = ref(null);
|
||||
const noticeInner = ref(null);
|
||||
const noticeBox = ref(null);
|
||||
const noticeContainer = ref(null);
|
||||
const noticeInner = ref(null);
|
||||
const noticeBox = ref(null);
|
||||
|
||||
// #ifndef H5
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
|
||||
let marqueeTimer = null;
|
||||
const currentMarqueeId = ref(0);
|
||||
const lastMarqueeText = ref('');
|
||||
let marqueeTimer = null;
|
||||
const currentMarqueeId = ref(0);
|
||||
const lastMarqueeText = ref('');
|
||||
|
||||
/**
|
||||
/**
|
||||
* 开始走马灯
|
||||
*/
|
||||
const startMarquee = () => {
|
||||
const startMarquee = () => {
|
||||
// 避免不必要的重置：如果文本没有变化且正在运行，则忽略
|
||||
if (lastMarqueeText.value === noticeInfo.value.text && currentMarqueeId.value > 0) {
|
||||
return;
|
||||
|
|
@ -580,12 +585,12 @@ const startMarquee = () => {
|
|||
});
|
||||
});
|
||||
}, 1000); // 增加延时确保渲染
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 执行滚动动画循环
|
||||
*/
|
||||
const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
|
||||
const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
|
||||
// ID 校验：如果当前ID不匹配，说明已被新动画取代，停止递归
|
||||
if (myId !== currentMarqueeId.value) return;
|
||||
if (!noticeInner.value) return;
|
||||
|
|
@ -622,12 +627,12 @@ const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
|
|||
runMarqueeAnimation(containerWidth, textWidth, myId);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 停止走马灯
|
||||
*/
|
||||
const stopMarquee = () => {
|
||||
const stopMarquee = () => {
|
||||
// 清除定时器
|
||||
if (marqueeTimer) {
|
||||
clearTimeout(marqueeTimer);
|
||||
|
|
@ -635,42 +640,42 @@ const stopMarquee = () => {
|
|||
}
|
||||
// 增加ID使其失效
|
||||
currentMarqueeId.value++;
|
||||
}
|
||||
}
|
||||
|
||||
onHide(() => {
|
||||
onHide(() => {
|
||||
stopMarquee();
|
||||
})
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
onUnload(() => {
|
||||
stopMarquee();
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.container {
|
||||
.container {
|
||||
background-color: #F0F4F9;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-l-6 {
|
||||
.margin-l-6 {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-bg-img {
|
||||
.index-bg-img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-box {
|
||||
.nav-bar-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
.content-box {
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
left: 0;
|
||||
|
|
@ -680,29 +685,29 @@ onUnload(() => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::v-deep .uni-scroll-view-content {
|
||||
::v-deep .uni-scroll-view-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.status-box {
|
||||
.status-box {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
.nav-box {
|
||||
height: 44px;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.left-box {
|
||||
.left-box {
|
||||
width: 60px;
|
||||
height: 44px;
|
||||
background-color: transparent;
|
||||
|
|
@ -711,9 +716,9 @@ onUnload(() => {
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -724,33 +729,33 @@ onUnload(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
.right-box {
|
||||
width: 60px;
|
||||
height: 44px;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
.user-box {
|
||||
position: relative;
|
||||
margin: 24rpx 32rpx 0;
|
||||
height: 120rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.user-bg {
|
||||
.user-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
.user-info-box {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -762,49 +767,49 @@ onUnload(() => {
|
|||
width: 100%;
|
||||
height: 120rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
.user-avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name-box {
|
||||
.name-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-text {
|
||||
.phone-text {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.vip-logo {
|
||||
.vip-logo {
|
||||
width: 60rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.vip-end-time {
|
||||
.vip-end-time {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.open-vip-btn {
|
||||
.open-vip-btn {
|
||||
height: 40rpx;
|
||||
width: 116rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-box {
|
||||
.notice-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -814,9 +819,9 @@ onUnload(() => {
|
|||
padding: 0 16rpx;
|
||||
height: 64rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sound-box {
|
||||
.sound-box {
|
||||
height: 64rpx;
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
|
|
@ -824,86 +829,86 @@ onUnload(() => {
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-content-wrapper {
|
||||
.notice-content-wrapper {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-inner {
|
||||
.notice-inner {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
.notice-content {
|
||||
font-size: 24rpx;
|
||||
color: #767676;
|
||||
}
|
||||
}
|
||||
|
||||
.group-box {
|
||||
margin: 32rpx;
|
||||
.group-box {
|
||||
margin: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title-img {
|
||||
.title-img {
|
||||
width: 140rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.video-help-box {
|
||||
.video-help-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
background-color: #FFFFFF;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.video-help-item {
|
||||
.video-help-item {
|
||||
margin-top: 16rpx;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.video-help-img {
|
||||
.video-help-img {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.video-help-title {
|
||||
.video-help-title {
|
||||
font-size: 24rpx;
|
||||
color: #1A1A1A;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
.menu-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-box {
|
||||
.item-box {
|
||||
position: relative;
|
||||
height: 156rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
.menu-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
|
|
@ -913,47 +918,47 @@ onUnload(() => {
|
|||
border-radius: 16rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-item-name {
|
||||
.menu-item-name {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.name-img {
|
||||
.name-img {
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-icon {
|
||||
.hot-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 68rpx;
|
||||
height: 30rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-box {
|
||||
.activity-box {
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
.footer-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.vision-text {
|
||||
.vision-text {
|
||||
font-size: 24rpx;
|
||||
color: #767676;
|
||||
}
|
||||
}
|
||||
|
||||
.ios-padding-bottom {
|
||||
.ios-padding-bottom {
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<view>
|
||||
<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
|
||||
<view v-for="index in 100">{{ index }}</view>
|
||||
</MessageNavBar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MessageNavBar from '@/components/message/message-nav-bar.vue'
|
||||
import {
|
||||
ref,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll
|
||||
} from "@dcloudio/uni-app";
|
||||
import {
|
||||
util
|
||||
} from '@/utils/common.js';
|
||||
|
||||
const data = reactive({
|
||||
navBar: {
|
||||
title: '信息',
|
||||
bgColor: '#FFFFFF',
|
||||
},
|
||||
phone: 'iphone',
|
||||
isScroll: false
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.phone) {
|
||||
data.phone = options.phone
|
||||
}
|
||||
})
|
||||
|
||||
onPageScroll((e) => {
|
||||
console.log(e.scrollTop)
|
||||
if (e.scrollTop > 60) {
|
||||
data.isScroll = true
|
||||
} else {
|
||||
data.isScroll = false
|
||||
}
|
||||
})
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.mi-style {
|
||||
.right-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 951 B |
Binary file not shown.
|
After Width: | Height: | Size: 971 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
Binary file not shown.
|
After Width: | Height: | Size: 783 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1017 B |
Binary file not shown.
|
After Width: | Height: | Size: 390 B |
Binary file not shown.
|
After Width: | Height: | Size: 221 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 B |
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 824 B |
Loading…
Reference in New Issue