完成转账成功页面及购物app首页
|
|
@ -38,7 +38,9 @@
|
|||
</view>
|
||||
<view v-if="phone == 'iphone'" class="text-box flex-align-center flex-justify-center">
|
||||
<text class="title">{{ chatInfo.title }}</text>
|
||||
<uni-icons type="right" size="10" color="#D8D8D8"></uni-icons>
|
||||
<!-- <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons> -->
|
||||
<image style="width: 16rpx;height: 16rpx;"
|
||||
src="/static/image/phone-message/iphone/chat-right.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view style="width: 100%;" :style="{ height: `calc(${data.statusBarHeight}px + 88rpx)` }">
|
||||
<view class="placeholder-box" style="width: 100%;" :style="{ height: `calc(${data.statusBarHeight}px + 88rpx)` }">
|
||||
<!-- <slot name="statusBar"></slot> -->
|
||||
</view>
|
||||
<view class="nav-bar-container" :style="{ backgroundColor: bgColor, zIndex: zIndex }">
|
||||
|
|
|
|||
2
main.js
|
|
@ -27,7 +27,7 @@ export function createApp() {
|
|||
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
||||
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
||||
app.config.globalProperties.$systemInfo = systemInfo
|
||||
uni.setStorageSync('version', '1.0.3.sp8')
|
||||
uni.setStorageSync('version', '1.0.3.sp12')
|
||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||
|
||||
app.use(globalMethods);
|
||||
|
|
|
|||
57
pages.json
|
|
@ -9,20 +9,23 @@
|
|||
}
|
||||
}
|
||||
],
|
||||
|
||||
"subPackages": [{
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pages/call-log",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "call",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通话记录页面",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/message",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "list-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "短信列表首页",
|
||||
|
|
@ -38,9 +41,28 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/shopping",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物app首页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "jingdong/list-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "京东列表首页"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/balance",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "余额页面",
|
||||
|
|
@ -54,12 +76,20 @@
|
|||
"navigationBarTitleText": "快速入口页面",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "transfer/transfer",
|
||||
"style": {
|
||||
"navigationBarTitleText": "转账模拟",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/bill",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "bill-list/bill-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账单列表页面",
|
||||
|
|
@ -84,7 +114,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/ant-credit-pay",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "花呗首页",
|
||||
|
|
@ -102,7 +133,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/finance-management",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "理财首页",
|
||||
|
|
@ -127,7 +159,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/other",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "/video-group-chat/video-group-chat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "视频群聊",
|
||||
|
|
@ -208,7 +241,6 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "train-tickets/ctrip-train-tickets/ctrip-train-tickets",
|
||||
"style": {
|
||||
|
|
@ -234,7 +266,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/common",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "hot-icon/hot-icon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "热门图标",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</view>
|
||||
<view class="container" :style="{ height: data.windowHeight + 'px' }">
|
||||
<view class="bg-container"></view>
|
||||
<NavBar class="nav-bar" isRightIcon title="" tipLayerType="balance-tip" isTipLayer tipLayerText="修改余额"
|
||||
<nav-bar class="nav-bar" isRightIcon title="" tipLayerType="balance-tip" isTipLayer tipLayerText="修改余额"
|
||||
:bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup" @button-click="clickTitlePopupButton">
|
||||
<template v-slot:left>
|
||||
<view class="nav-bar-left" @click="util.goBack()">
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<image class="nav-icon" src="/static/image/nav-bar/more-white.png" mode=""></image>
|
||||
</view>
|
||||
</template>
|
||||
</NavBar>
|
||||
</nav-bar>
|
||||
<scroll-view class="scroll-view" :style="{ height: (data.windowHeight - 44 - data.statusBarHeight) + 'px' }"
|
||||
scroll-y="true">
|
||||
<view class="h100 w100 flex-between" style="flex-direction: column;">
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavBar from '@/components/nav-bar/nav-bar'
|
||||
//import NavBar from '@/components/nav-bar/nav-bar'
|
||||
import BalanceList from '@/components/balance-list/balance-list.vue'
|
||||
import { fastEntranceList } from '@/static/json/initial.json'
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,991 @@
|
|||
<template>
|
||||
<!-- 水印 -->
|
||||
<view v-if="$isVip()">
|
||||
<watermark dark="light" />
|
||||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
|
||||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||||
</liu-drag-button>
|
||||
</view>
|
||||
<view class="container">
|
||||
|
||||
<!-- 蓝色背景区域 -->
|
||||
<view class="header-section">
|
||||
<nav-bar bgColor="transparent" :isBack="false" tipLayerType="transfer-tip" isTipLayer tipLayerText="修改转账数据"
|
||||
:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
|
||||
<template v-slot:right>
|
||||
<view class="nav-link w100" style="text-align: right;white-space: nowrap;padding: 0;">
|
||||
<text @click="util.goBack()">回首页</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:center>
|
||||
<view class="status-box">
|
||||
<image class="image" src="/static/image/balance/transfer/success.png"></image>
|
||||
<text class="status-text">转账成功</text>
|
||||
</view>
|
||||
</template>
|
||||
</nav-bar>
|
||||
|
||||
<!-- 转账状态信息 -->
|
||||
<view class="success-info">
|
||||
<view class="amount-box">
|
||||
<text class="symbol">¥</text>
|
||||
<text class="amount alipay-font">{{ Number(transferData.amount).toFixed(2) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 收款方/付款方式 -->
|
||||
<view class="details-box">
|
||||
<view class="detail-item">
|
||||
<text class="label">收款方</text>
|
||||
<text class="value">{{ transferData.recipient }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">付款方式</text>
|
||||
<text class="value">{{ transferData.paymentMethod }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 立即通知收款人卡片 -->
|
||||
<view class="card notification-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">立即通知收款人</text>
|
||||
<view class="card-sub-title">
|
||||
<text>预约转账</text>
|
||||
<uni-icons type="right" size="16" color="#969696"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-item-bg">
|
||||
<view class="user-info">
|
||||
<view class="avatar-box">
|
||||
<image v-if="transferData.avatar" class="avatar" :src="transferData.avatar"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
<image v-else class="avatar" src="/static/image/balance/transfer/add-img.png"
|
||||
mode="aspectFill" @click="openEditPopup">
|
||||
</image>
|
||||
</view>
|
||||
<view class="user-details">
|
||||
<view class="name-box">
|
||||
<text class="name">{{ transferData.recipient }}</text>
|
||||
<text class="remark-link">备注</text>
|
||||
</view>
|
||||
<text class="desc">信息准确,对账无忧</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notify-btn-box">
|
||||
<view class="notify-btn">通知TA</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="promo-card">
|
||||
<view class="promo-left-box">
|
||||
<image class="img" src="/static/image/balance/transfer/card-img-2.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="promo-right">
|
||||
<view class="promo-content">
|
||||
<text class="promo-title">{{ transferData.promoTitle }}</text>
|
||||
<view class="promo-tags">
|
||||
<text class="tag">淘宝闪购</text>
|
||||
<text class="tag-desc">{{ transferData.promoTagDesc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="promo-right-box">
|
||||
|
||||
<view class="price-box">
|
||||
<text class="p-num alipay-font">{{ transferData.promoPrice }}</text>
|
||||
<text class="p-unit">元</text>
|
||||
</view>
|
||||
<view class="free-btn">免费领</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 白色卡片区域 -->
|
||||
<view class="content-section">
|
||||
<!-- 飞猪广告 -->
|
||||
<view class="card fliggy-card">
|
||||
<image class="banner-img" src="/static/image/balance/transfer/bottom-banner.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="yaoyiyao-container">
|
||||
<view class="yaoyiyao-box">
|
||||
<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix"></image>
|
||||
<text class="text">摇动或点击查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="banner-footer">
|
||||
<view class="banner-info">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="text-content">
|
||||
<text class="b-title">飞猪旅行</text>
|
||||
<text class="b-desc">飞猪出行 超多折扣</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="b-btn">领优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部操作区 -->
|
||||
<view class="footer-section">
|
||||
<view class="finish-btn" @click="goBack">完成</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<uni-popup ref="editPopup" type="center">
|
||||
<view class="edit-modal">
|
||||
<view class="modal-title">编辑转账数据</view>
|
||||
<view class="modal-content">
|
||||
<scroll-view scroll-y="true" class="modal-scroll">
|
||||
<view class="form-item">
|
||||
<text class="require-dot">*</text>
|
||||
<text class="label">选择头像</text>
|
||||
<view class="avatar-picker" @click="chooseAvatar">
|
||||
<image v-if="tempEditData.avatar" :src="tempEditData.avatar" mode="aspectFill"></image>
|
||||
<image v-else class="dialog-avatar" src="/static/image/balance/transfer/add-img.png"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="require-dot">*</text>
|
||||
<text class="label">收款方</text>
|
||||
<uni-easyinput class="input" v-model="tempEditData.recipient" :inputBorder="false"
|
||||
placeholder="请输入收款方" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="require-dot">*</text>
|
||||
<text class="label">付款方式</text>
|
||||
<uni-easyinput class="input" v-model="tempEditData.paymentMethod" :inputBorder="false"
|
||||
placeholder="请输入付款方式" />
|
||||
</view>
|
||||
<!-- 闪购神券配置 -->
|
||||
<text class="form-title-desc">闪购神券配置</text>
|
||||
<view class="form-item">
|
||||
<text class="require-dot"></text>
|
||||
<text class="label">闪购标题</text>
|
||||
<uni-easyinput class="input" v-model="tempEditData.promoTitle" :inputBorder="false"
|
||||
placeholder="请输入闪购标题" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="require-dot"></text>
|
||||
<text class="label">标签说明</text>
|
||||
<uni-easyinput class="input" v-model="tempEditData.promoTagDesc" :inputBorder="false"
|
||||
placeholder="请输入标签说明" />
|
||||
</view>
|
||||
<view class="form-item price-item">
|
||||
<text class="require-dot"></text>
|
||||
<text class="label">神券金额</text>
|
||||
<view class="input-with-unit">
|
||||
<uni-easyinput class="input" v-model="tempEditData.promoPrice" :inputBorder="false"
|
||||
placeholder="请输入神券金额" />
|
||||
<text class="unit">元</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="btn cancel" @click="closeEditPopup">取消</view>
|
||||
<view class="btn confirm" @click="confirmEdit">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
util,
|
||||
numberUtil
|
||||
} from '@/utils/common.js';
|
||||
|
||||
const statusBarHeight = ref(0);
|
||||
const editPopup = ref(null);
|
||||
|
||||
const STORAGE_KEY = 'alipay_transfer_data';
|
||||
|
||||
const transferData = reactive({
|
||||
amount: '10000',
|
||||
recipient: '小王(*王)',
|
||||
paymentMethod: '工商银行卡(9999)',
|
||||
avatar: '',
|
||||
promoTitle: '零售购物券',
|
||||
promoTagDesc: '满29元可用',
|
||||
promoPrice: '8'
|
||||
});
|
||||
|
||||
// 从缓存加载数据
|
||||
const loadStorageData = () => {
|
||||
const savedData = uni.getStorageSync(STORAGE_KEY);
|
||||
if (savedData) {
|
||||
Object.assign(transferData, savedData);
|
||||
}
|
||||
};
|
||||
|
||||
loadStorageData();
|
||||
|
||||
const tempEditData = reactive({
|
||||
recipient: '',
|
||||
paymentMethod: '',
|
||||
avatar: '',
|
||||
promoTitle: '',
|
||||
promoTagDesc: '',
|
||||
promoPrice: ''
|
||||
});
|
||||
|
||||
const buttonGroup = [{
|
||||
name: "修改转账数据",
|
||||
click: () => {
|
||||
openEditPopup();
|
||||
}
|
||||
}]
|
||||
|
||||
const openEditPopup = () => {
|
||||
tempEditData.recipient = transferData.recipient;
|
||||
tempEditData.paymentMethod = transferData.paymentMethod;
|
||||
tempEditData.avatar = transferData.avatar;
|
||||
tempEditData.promoTitle = transferData.promoTitle;
|
||||
tempEditData.promoTagDesc = transferData.promoTagDesc;
|
||||
tempEditData.promoPrice = transferData.promoPrice;
|
||||
editPopup.value.open();
|
||||
};
|
||||
|
||||
const closeEditPopup = () => {
|
||||
editPopup.value.close();
|
||||
};
|
||||
|
||||
/**
|
||||
* 将图片保存到本地持久化存储
|
||||
*/
|
||||
const saveImageToLocal = (tempFilePath) => {
|
||||
return new Promise((resolve) => {
|
||||
// #ifdef APP-PLUS
|
||||
// 如果是已经持久化的路径或是静态资源,直接返回
|
||||
if (!tempFilePath || tempFilePath.startsWith('_doc') || tempFilePath.startsWith('/static')) {
|
||||
return resolve(tempFilePath);
|
||||
}
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: (res) => {
|
||||
resolve(res.savedFilePath);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('图片持久化失败:', err);
|
||||
resolve(tempFilePath);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
resolve(tempFilePath);
|
||||
// #endif
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除本地持久化文件
|
||||
*/
|
||||
const removeLocalFile = (filePath) => {
|
||||
// #ifdef APP-PLUS
|
||||
if (filePath && filePath.startsWith('_doc')) {
|
||||
uni.removeSavedFile({
|
||||
filePath: filePath,
|
||||
success: () => {
|
||||
console.log('本地文件删除成功:', filePath);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.warn('本地文件删除失败:', filePath, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
};
|
||||
|
||||
const confirmEdit = async () => {
|
||||
if (!tempEditData.avatar) {
|
||||
uni.showToast({
|
||||
title: '请选择头像',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!tempEditData.recipient.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入收款方',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!tempEditData.paymentMethod.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入付款方式',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理头像持久化 (仅限 APP 端)
|
||||
let finalAvatarPath = tempEditData.avatar;
|
||||
// #ifdef APP-PLUS
|
||||
if (tempEditData.avatar !== transferData.avatar) {
|
||||
// 如果图片发生了变化,保存新图并尝试删除旧图
|
||||
finalAvatarPath = await saveImageToLocal(tempEditData.avatar);
|
||||
if (transferData.avatar) {
|
||||
removeLocalFile(transferData.avatar);
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
transferData.recipient = tempEditData.recipient;
|
||||
transferData.paymentMethod = tempEditData.paymentMethod;
|
||||
transferData.avatar = finalAvatarPath;
|
||||
transferData.promoTitle = tempEditData.promoTitle;
|
||||
transferData.promoTagDesc = tempEditData.promoTagDesc;
|
||||
transferData.promoPrice = tempEditData.promoPrice;
|
||||
|
||||
// 保存到本地缓存
|
||||
uni.setStorageSync(STORAGE_KEY, transferData);
|
||||
|
||||
closeEditPopup();
|
||||
};
|
||||
|
||||
const chooseAvatar = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
tempEditData.avatar = res.tempFilePaths[0];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
if (systemInfo.statusBarHeight) {
|
||||
statusBarHeight.value = systemInfo.statusBarHeight;
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
// #ifdef APP-PLUS
|
||||
util.setAndroidSystemBarColor('#F5F5F5')
|
||||
uni.setNavigationBarColor({
|
||||
animation: { // 动画效果
|
||||
duration: 100,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
plus.navigator.setStatusBarStyle("light");
|
||||
}, 500);
|
||||
// #endif
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/common/main.css";
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 编辑弹窗样式 */
|
||||
.edit-modal {
|
||||
background-color: #fff;
|
||||
width: 600rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.modal-scroll {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.form-title-desc {
|
||||
display: block;
|
||||
color: #767676;
|
||||
font-size: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
width: 100%;
|
||||
|
||||
::v-deep .uni-easyinput__content {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.require-dot {
|
||||
color: #ff4d4f;
|
||||
margin-right: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
width: 160rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-picker {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-unit {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 12rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-size: 28rpx;
|
||||
|
||||
::v-deep .uni-easyinput__content-input {
|
||||
height: 70rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .uni-easyinput__placeholder-class {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 12rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
::v-deep .uni-easyinput__content-input {
|
||||
height: 70rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .uni-easyinput__placeholder-class {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.btn {
|
||||
width: 240rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background-color: #F1F1F1;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background-color: #1777FF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-section {
|
||||
background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);
|
||||
|
||||
::v-deep .nav-bar-container {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
::v-deep .placeholder-box {
|
||||
display: none !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep .tipLayer {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
|
||||
.nav-link {
|
||||
padding: 0 30rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.success-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.status-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
height: 34rpx;
|
||||
|
||||
.image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 34rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #fff;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 72rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 68rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 92rpx;
|
||||
line-height: 92rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.details-box {
|
||||
width: 100%;
|
||||
padding: 0 46rpx;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 24rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.notification-card {
|
||||
padding: 24rpx 16rpx;
|
||||
margin: 10rpx 24rpx;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 22rpx;
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.card-sub-title {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #969696;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item-bg {
|
||||
background-color: #fff;
|
||||
background-image: url("/static/image/balance/transfer/card-bg.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 16rpx;
|
||||
padding: 18rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 22rpx;
|
||||
border: 2px solid #FFFFFF;
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
color: #35363B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.remark-link {
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
color: #1777FF;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-btn {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #1777FF;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
border-radius: 26rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.watermark-icon {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: -20rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promo-card {
|
||||
// padding: 30rpx;
|
||||
margin: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.promo-left-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 34rpx;
|
||||
background-image: url("/static/image/balance/transfer/card-bg-2-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
height: 144rpx;
|
||||
|
||||
|
||||
.img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.promo-right {
|
||||
height: 144rpx;
|
||||
background-image: url("/static/image/balance/transfer/card-bg-2-right.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
|
||||
.promo-title {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.promo-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
height: 34rpx;
|
||||
color: #EF673C;
|
||||
background-color: #FFF2F1;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.tag-desc {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.promo-right-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.price-box {
|
||||
color: #F93950;
|
||||
|
||||
.p-num {
|
||||
font-size: 34rpx;
|
||||
line-height: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.p-unit {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.free-btn {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 24rpx;
|
||||
background-color: #FA3A49;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fliggy-card {
|
||||
overflow: hidden;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.yaoyiyao-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -80rpx;
|
||||
padding-bottom: 16rpx;
|
||||
|
||||
.yaoyiyao-box {
|
||||
padding: 12rpx 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #000000;
|
||||
border-radius: 28rpx;
|
||||
opacity: 0.5;
|
||||
|
||||
.img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.banner-footer {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.banner-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-box {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.logo {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.b-title {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.b-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
.b-btn {
|
||||
padding: 0 20rpx;
|
||||
background-color: #FF3A31;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
padding: 8rpx 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 24rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||||
|
||||
.finish-btn {
|
||||
height: 84rpx;
|
||||
width: 390rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #2172CA;
|
||||
border-radius: 42rpx;
|
||||
color: #2172CA;
|
||||
font-size: 32rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -105,11 +105,11 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="activity-box">
|
||||
<!-- <view class="activity-box">
|
||||
<image class="alipay-year-bill" :style="{ width: (windowWidth - 32) + 'px' }"
|
||||
src="/static/image/index/alipay-year-bill.png" mode="widthFix"
|
||||
@click="util.goPage(`/pages/common/alipay-annual-bill/alipay-annual-bill`)"></image>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="group-box">
|
||||
<image class="title-img" src="/static/image/index/qita.png"></image>
|
||||
|
|
@ -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,74 +200,89 @@ 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 = [{
|
||||
}, {
|
||||
icon: "zhuanzhang",
|
||||
name: "转账模拟",
|
||||
isHot: false,
|
||||
path: "/pages/balance/transfer/transfer"
|
||||
}, {
|
||||
icon: "nianduzhangdan",
|
||||
name: "年度账单",
|
||||
isHot: false,
|
||||
path: "/pages/common/alipay-annual-bill/alipay-annual-bill"
|
||||
},
|
||||
]
|
||||
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/message.png",
|
||||
name: "短信",
|
||||
path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/call.png",
|
||||
name: "通话",
|
||||
path: "/pages/common/call-and-message-entry/call-and-message-entry?type=call"
|
||||
},
|
||||
]
|
||||
},
|
||||
// {
|
||||
// icon: "/static/image/index/qita/gouwu.png",
|
||||
// name: "购物",
|
||||
// path: "/pages/shopping/index"
|
||||
// },
|
||||
]
|
||||
|
||||
const data = reactive({
|
||||
const data = reactive({
|
||||
navBarBgColor: 'transparent',
|
||||
statusBarHeight: 0,
|
||||
windowWidth: 0,
|
||||
|
|
@ -278,9 +293,9 @@ const data = reactive({
|
|||
vision: "",
|
||||
platform: '', // 添加平台信息,
|
||||
qqgroup: {}
|
||||
})
|
||||
})
|
||||
|
||||
const {
|
||||
const {
|
||||
statusBarHeight,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
|
|
@ -290,12 +305,12 @@ const {
|
|||
vision,
|
||||
platform,
|
||||
qqgroup
|
||||
} = toRefs(data);
|
||||
} = toRefs(data);
|
||||
|
||||
/**
|
||||
/**
|
||||
* 处理页面滚动事件
|
||||
*/
|
||||
const handleScroll = (e) => {
|
||||
const handleScroll = (e) => {
|
||||
const scrollTop = e.detail.scrollTop
|
||||
// 滚动超过20px时显示蓝色背景,否则显示透明背景
|
||||
if (scrollTop > 20) {
|
||||
|
|
@ -303,16 +318,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()
|
||||
// 每次显示时刷新数据
|
||||
|
|
@ -328,12 +343,12 @@ onShow(() => {
|
|||
plus.navigator.setStatusBarStyle("dark");
|
||||
}, 500)
|
||||
// #endif
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取用户数据(从服务器)
|
||||
*/
|
||||
const fetchUserData = async () => {
|
||||
const fetchUserData = async () => {
|
||||
try {
|
||||
// 先设置默认值,避免页面显示异常
|
||||
setUserData()
|
||||
|
|
@ -373,12 +388,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)
|
||||
|
|
@ -386,12 +401,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)
|
||||
|
|
@ -399,13 +414,13 @@ const fetchUserConfig = async () => {
|
|||
} else {
|
||||
throw new Error(data.message || '获取用户配置失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* 设置用户数据(从本地存储读取)
|
||||
*/
|
||||
const setUserData = () => {
|
||||
const setUserData = () => {
|
||||
// 用户信息 - 提供默认值
|
||||
const userInfoData = storage.get("userInfo")
|
||||
data.userInfo = userInfoData || {
|
||||
|
|
@ -447,9 +462,9 @@ const setUserData = () => {
|
|||
}
|
||||
data.videoHelpList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clickMenu = (item) => {
|
||||
const clickMenu = (item) => {
|
||||
if (!item.path) {
|
||||
uiUtil.showError('开发中')
|
||||
} else {
|
||||
|
|
@ -460,61 +475,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') {
|
||||
|
|
@ -524,25 +539,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;
|
||||
|
|
@ -590,12 +605,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;
|
||||
|
|
@ -632,12 +647,12 @@ const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
|
|||
runMarqueeAnimation(containerWidth, textWidth, myId);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 停止走马灯
|
||||
*/
|
||||
const stopMarquee = () => {
|
||||
const stopMarquee = () => {
|
||||
// 清除定时器
|
||||
if (marqueeTimer) {
|
||||
clearTimeout(marqueeTimer);
|
||||
|
|
@ -645,42 +660,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;
|
||||
|
|
@ -690,29 +705,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;
|
||||
|
|
@ -721,9 +736,9 @@ onUnload(() => {
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -734,33 +749,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;
|
||||
|
|
@ -772,49 +787,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;
|
||||
|
|
@ -824,9 +839,9 @@ onUnload(() => {
|
|||
padding: 0 16rpx;
|
||||
height: 64rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sound-box {
|
||||
.sound-box {
|
||||
height: 64rpx;
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
|
|
@ -834,35 +849,35 @@ 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 {
|
||||
.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;
|
||||
|
|
@ -873,47 +888,47 @@ onUnload(() => {
|
|||
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;
|
||||
|
|
@ -923,47 +938,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,155 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<nav-bar title="购物平台" bgColor="#F0F4F9"></nav-bar>
|
||||
<view class="menu-container">
|
||||
<view class="card" v-for="(item, index) in menuList" :key="index"
|
||||
:style="{ background: `linear-gradient(to bottom, ${item.bgColor[0]} 0%, ${item.bgColor[1]} 80%)` }">
|
||||
<text class="card-title">{{ item.name }}</text>
|
||||
<view class="icon-wrapper">
|
||||
<view class="icon-shadow" :style="{ background: item.shadowColor }"></view>
|
||||
<image class="icon-img" :src="`/static/image/shopping/${item.icon}.png`" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="btn" :style="{ background: item.btnBg }" @click="goTo(item.url)">立即进入</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const menuList = ref([
|
||||
{
|
||||
name: "京东",
|
||||
icon: "jingdong",
|
||||
bgColor: ["#FFE0DF", "#FFFFFF"],
|
||||
btnBg: "#FF4848",
|
||||
shadowColor: "#FF4848",
|
||||
url: "/pages/shopping/jingdong/list-index"
|
||||
}, {
|
||||
name: "淘宝",
|
||||
icon: "taobao",
|
||||
bgColor: ["#FFF0DA", "#FFFFFF"],
|
||||
btnBg: "#FF953C",
|
||||
shadowColor: "#FF953C",
|
||||
url: ""
|
||||
}, {
|
||||
name: "快手",
|
||||
icon: "kuaishou",
|
||||
bgColor: ["#FFF0DA", "#FFFFFF"],
|
||||
btnBg: "#FF953C",
|
||||
shadowColor: "#FF953C",
|
||||
url: ""
|
||||
}, {
|
||||
name: "抖音",
|
||||
icon: "douyin",
|
||||
bgColor: ["#FAE5FF", "#FFFFFF"],
|
||||
btnBg: "#393939",
|
||||
shadowColor: "#D15CFF",
|
||||
url: ""
|
||||
}, {
|
||||
name: "抖音",
|
||||
icon: "dewu",
|
||||
bgColor: ["#FAE5FF", "#FFFFFF"],
|
||||
btnBg: "#393939",
|
||||
shadowColor: "#D15CFF",
|
||||
url: ""
|
||||
}, {
|
||||
name: "拼多多",
|
||||
icon: "pinduoduo",
|
||||
bgColor: ["#FFE0DF", "#FFFFFF"],
|
||||
btnBg: "#FF4848",
|
||||
shadowColor: "#FF4848",
|
||||
url: ""
|
||||
}
|
||||
]);
|
||||
|
||||
const goTo = (url) => {
|
||||
if (url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "开发中",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #F0F4F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: calc(50% - 14rpx);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 48rpx;
|
||||
padding-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 62rpx;
|
||||
position: relative;
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.icon-shadow {
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
width: 100rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
filter: blur(5px);
|
||||
z-index: 1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 20rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<view>
|
||||
<nav-bar title="京东" bgColor="#F0F4F9">
|
||||
<template v-slot:center>
|
||||
<view class="search-box">
|
||||
<input type="text" placeholder="" />
|
||||
</view>
|
||||
</template>
|
||||
</nav-bar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
::v-deep .uni-navbar__header-btns {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 646 B |
|
After Width: | Height: | Size: 427 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 293 B |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 27 KiB |