1705 lines
41 KiB
Vue
1705 lines
41 KiB
Vue
<template>
|
||
<view class="div">
|
||
<view v-if="$isVip()">
|
||
<watermark dark="light" source="uni_alipay_other_bank" />
|
||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_bank')">
|
||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||
</liu-drag-button>
|
||
</view>
|
||
<view class="group_45764" >
|
||
<view class="flexcontainer_1" :style="{'padding-top':$systemInfo.statusBarHeight+'px','backgroundColor':data.navbar.bgColor}">
|
||
<view class="group_8">
|
||
<view class="rectangle_18503">
|
||
<image class="frame" src="/static/image/other/bank/jsyh/back.png" />
|
||
</view>
|
||
</view>
|
||
<text class="text_1"> 银行卡详情 </text>
|
||
<view class="group_9">
|
||
<view class="rectangle_18503_1">
|
||
<image class="group_13980" src="/static/image/other/bank/jsyh/kefu.png" />
|
||
<image class="group_13979" src="/static/image/other/bank/jsyh/more.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" :style="{height:$systemInfo.statusBarHeight*2+96+'rpx'}">
|
||
|
||
</view>
|
||
<view class="group_48200" @click="openEditDialog">
|
||
<view class="group_48198">
|
||
<view class="flexcontainer_2">
|
||
<view class="group_48194">
|
||
<view class="div_1227">
|
||
<image class="path" src="/static/image/other/bank/jsyh/avatar.png" />
|
||
</view>
|
||
</view>
|
||
<view class="flexcontainer_3">
|
||
<text class="text_2"> {{data.form.bankName}}（{{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}） </text>
|
||
<view class="flexcontainer_4">
|
||
<image class="group_13982" src="/static/image/other/bank/jsyh/editor.png" />
|
||
<image class="group_48197" src="/static/image/other/bank/jsyh/zc.png" /><text class="text_3"> 修改别名 </text>
|
||
</view>
|
||
</view>
|
||
<text class="text_4" @click.stop="data.isShow=true"> 查看卡号 </text>
|
||
</view>
|
||
<text class="text_5"> 卡片类型：{{data.form.cardType}} </text><text class="text_6"> 账户类别：{{data.form.accountType}} </text>
|
||
<view class="flexcontainer_5">
|
||
<view class="flexcontainer_6"><text class="text_7"> 到期日期：{{data.form.expiryDate}} </text><text class="text_8"> 开户网点：{{data.form.branchName}} </text></view>
|
||
<image class="group_48196" src="/static/image/other/bank/jsyh/code.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<NavBar v-if="selectedImage" title="拼图" bgColor="#EFEFEF" noBack @back="closeImageEdit" isRightButton @right-click="confirmImage">
|
||
</NavBar>
|
||
<view class="group_48190" >
|
||
<view class="rectangle_23318">
|
||
<image class="group_13999" src="/static/image/other/bank/jsyh/rightIcon.png" />
|
||
<image class="frame_1" src="/static/image/other/bank/jsyh/wx.png" />
|
||
<image class="frame_2" src="/static/image/other/bank/jsyh/zfb.png" />
|
||
<text class="text_9"> 快捷支付 </text>
|
||
</view>
|
||
</view>
|
||
<view class="group_48191" @click="openEditDialog" >
|
||
<view class="rectangle_23317">
|
||
<view class="rectangle_23316">
|
||
<text class="text_10"> {{data.form.accountCategory}} </text>
|
||
</view>
|
||
<view class="div_418"></view>
|
||
<view class="flexcontainer_7">
|
||
<text class="text_11"> {{data.form.currency}} </text>
|
||
<view class="">
|
||
<text class="text_12"> 可用余额 </text>
|
||
<text class="text_13"> {{data.form.balance}} </text>
|
||
<image class="group_14000" src="/static/image/other/bank/jsyh/rightIcon.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="group_48192" @click="openEditDialog" >
|
||
<view class="rectangle_23319">
|
||
<text class="text_14"> 出入金剩余额度 </text>
|
||
<view class="flexcontainer_8">
|
||
<image
|
||
class="group_48193"
|
||
src="/static/image/other/bank/jsyh/gth.png" /><text class="text_15"> (含非绑定账户转账、现金存取、消费缴费) </text>
|
||
</view>
|
||
<view class="flexcontainer_9">
|
||
<text class="text_16"> 日出金: </text><text class="text_17"> 日入金: </text><text class="text_18"> ¥ {{data.form.dayOut}} </text><text class="text_19"> ¥ {{data.form.dayIn}} </text>
|
||
</view>
|
||
<view class="flexcontainer_10">
|
||
<text class="text_20"> 年出金: </text><text class="text_21"> 年入金: </text><text class="text_22"> ¥ {{data.form.yearOut}} </text><text class="text_23"> ¥ {{data.form.yearIn}} </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="!selectedImage" class="image-box" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
|
||
<image
|
||
class="div_8a4931ca0f8a124896aa57f966f7f1cf"
|
||
:src="data.footerImage || '/static/image/other/bank/jsyh/footerImg.png'" mode="aspectFill" />
|
||
</view>
|
||
<view v-else class="scroll-image-box flex-1">
|
||
<scroll-view class="image-box h100" style="width: 100%;height: 460rpx;" scroll-y :show-scrollbar="false"
|
||
@scroll="onImageScroll">
|
||
<image class="crop-image-target" style="width:100%;" :src="selectedImage" mode="widthFix"></image>
|
||
</scroll-view>
|
||
|
||
<view class="dashed-line-box">
|
||
<view class="dashed-line-text">我是分割线</view>
|
||
</view>
|
||
</view>
|
||
<canvas canvas-id="crop-canvas"
|
||
style="position: fixed; left: -9999px; width: 750rpx; height: 100vh; pointer-events: none;"></canvas>
|
||
<!-- 蒙层 -->
|
||
<view v-if="showMask" class="mask" @click="closeMask">
|
||
<image class="mask-icon" src="/static/image/common/mask-icon.png" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
<Home class="home" />
|
||
|
||
<!-- 卡号信息弹窗 -->
|
||
<view class="dask" v-if="data.isShow">
|
||
<view class="info">
|
||
<view class="title">
|
||
{{data.form.cardNumber}}
|
||
|
||
</view>
|
||
<view class="dec">
|
||
|
||
{{data.form.branchName}}
|
||
</view>
|
||
<view class="btnbox">
|
||
<view class="btn" @click="data.isShow=false">复制全部</view>
|
||
<view class="btn btns" @click="data.isShow=false">仅复制卡号</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 编辑弹窗 -->
|
||
<view v-if="editDialog.show" class="editDialog">
|
||
<view class="editDialog_bg">
|
||
<view class="editDialog_header">
|
||
<text class="title">编辑账户信息</text>
|
||
</view>
|
||
<view class="editDialog_body">
|
||
<view class="formItem">
|
||
<text>银行名称</text>
|
||
<input v-model="editDialog.data.bankName" placeholder="如: 建设银行" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>完整卡号</text>
|
||
<input v-model="editDialog.data.cardNumber" placeholder="如: 62170000123456789012" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>卡片类型</text>
|
||
<input v-model="editDialog.data.cardType" placeholder="如: 龙卡通" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>账户类别</text>
|
||
<input v-model="editDialog.data.accountType" placeholder="如: II类户" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>到期日期</text>
|
||
<input v-model="editDialog.data.expiryDate" placeholder="如: 2027/01/31" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>开户网点</text>
|
||
<input v-model="editDialog.data.branchName" placeholder="如: 北京中关村软件园支行" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>账户分类</text>
|
||
<input v-model="editDialog.data.accountCategory" placeholder="如: 活期储蓄" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>币种</text>
|
||
<input v-model="editDialog.data.currency" placeholder="如: 人民币" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>可用余额</text>
|
||
<input :value="editDialog.data.balance" @input="(e) => onNumberInput('balance', e.detail.value)" placeholder="如: 2.71" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>日出金额度</text>
|
||
<input :value="editDialog.data.dayOut" @input="(e) => onNumberInput('dayOut', e.detail.value)" placeholder="如: 50,000.00" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>日入金额度</text>
|
||
<input :value="editDialog.data.dayIn" @input="(e) => onNumberInput('dayIn', e.detail.value)" placeholder="如: 50,000.00" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>年出金额度</text>
|
||
<input :value="editDialog.data.yearOut" @input="(e) => onNumberInput('yearOut', e.detail.value)" placeholder="如: 200,000.00" />
|
||
</view>
|
||
<view class="formItem">
|
||
<text>年入金额度</text>
|
||
<input :value="editDialog.data.yearIn" @input="(e) => onNumberInput('yearIn', e.detail.value)" placeholder="如: 200,000.00" />
|
||
</view>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="btn-cancel" @click="editDialog.show=false">取消</view>
|
||
<view class="btn-save" @click="saveEdit">保存</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { reactive, onMounted, ref, getCurrentInstance } from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow,
|
||
onReady,
|
||
|
||
onPageScroll
|
||
} from "@dcloudio/uni-app";
|
||
const CACHE_KEY = 'jsyh_account_info';
|
||
const FOOTER_IMAGE_KEY = 'jsyh_footer_image';
|
||
|
||
const instance = getCurrentInstance();
|
||
|
||
const data = reactive({
|
||
navbar:{
|
||
bgColor : 'rgba(0,0,0,0)'
|
||
},
|
||
form: {
|
||
bankName: '建设银行',
|
||
cardNumber: '62170000123456789012',
|
||
cardType: '龙卡通',
|
||
accountType: 'II类户',
|
||
expiryDate: '2027/01/31',
|
||
branchName: '北京中关村软件园支行',
|
||
accountCategory: '活期储蓄',
|
||
currency: '人民币',
|
||
balance: '2.71',
|
||
dayOut: '50,000.00',
|
||
dayIn: '50,000.00',
|
||
yearOut: '200,000.00',
|
||
yearIn: '200,000.00',
|
||
},
|
||
footerImage: '',
|
||
showMask: false,
|
||
isShow: false,
|
||
});
|
||
|
||
const selectedImage = ref('');
|
||
const scrollTop = ref(0);
|
||
let longPressTimer = null;
|
||
|
||
const editDialog = reactive({
|
||
show: false,
|
||
data: {}
|
||
});
|
||
onPageScroll((e) => {
|
||
if (e.scrollTop > 45) {
|
||
data.navbar.bgColor = '#2d60d5'
|
||
} else {
|
||
data.navbar.bgColor = 'rgba(0,0,0,0)'
|
||
}
|
||
|
||
})
|
||
onMounted(() => {
|
||
loadCache();
|
||
// 加载保存的footer图片
|
||
const savedFooter = uni.getStorageSync(FOOTER_IMAGE_KEY);
|
||
if (savedFooter) {
|
||
data.footerImage = savedFooter;
|
||
}
|
||
});
|
||
|
||
function loadCache() {
|
||
const cache = uni.getStorageSync(CACHE_KEY);
|
||
if (cache) {
|
||
data.form = { ...data.form, ...cache };
|
||
}
|
||
}
|
||
|
||
function saveCache() {
|
||
uni.setStorageSync(CACHE_KEY, data.form);
|
||
}
|
||
|
||
function openEditDialog() {
|
||
editDialog.data = JSON.parse(JSON.stringify(data.form));
|
||
editDialog.show = true;
|
||
}
|
||
|
||
function saveEdit() {
|
||
data.form = { ...data.form, ...editDialog.data };
|
||
saveCache();
|
||
editDialog.show = false;
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
|
||
// 长按事件处理
|
||
const handleTouchStart = (e) => {
|
||
// 兼容iOS上滑HOME条
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.platform === 'ios' && systemInfo.safeAreaInsets?.bottom) {
|
||
const clientY = e.touches[0].clientY;
|
||
const windowHeight = systemInfo.windowHeight;
|
||
if (clientY > windowHeight - systemInfo.safeAreaInsets.bottom) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
longPressTimer = setTimeout(() => {
|
||
uni.vibrateShort();
|
||
chooseImage();
|
||
}, 1200);
|
||
};
|
||
|
||
const handleTouchEnd = () => {
|
||
if (longPressTimer) {
|
||
clearTimeout(longPressTimer);
|
||
longPressTimer = null;
|
||
}
|
||
};
|
||
|
||
// 选择图片
|
||
const chooseImage = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ['album'],
|
||
success: (res) => {
|
||
selectedImage.value = res.tempFilePaths[0];
|
||
data.showMask = true;
|
||
}
|
||
});
|
||
};
|
||
|
||
// 关闭蒙层
|
||
const closeMask = () => {
|
||
data.showMask = false;
|
||
};
|
||
|
||
// 图片滚动监听
|
||
const onImageScroll = (e) => {
|
||
scrollTop.value = e.detail.scrollTop;
|
||
};
|
||
|
||
// 确认裁剪
|
||
const confirmImage = () => {
|
||
uni.showLoading({
|
||
title: '处理中...'
|
||
});
|
||
const query = uni.createSelectorQuery().in(instance);
|
||
|
||
// 获取容器和图片信息
|
||
query.select('.image-box').boundingClientRect();
|
||
query.select('.crop-image-target').boundingClientRect();
|
||
query.exec(res => {
|
||
if (!res[0] || !res[1]) {
|
||
uni.hideLoading();
|
||
return;
|
||
}
|
||
|
||
console.log('rects', res);
|
||
const container = res[0]; // 容器
|
||
const image = res[1]; // 图片实际渲染尺寸
|
||
|
||
// 获取图片原始尺寸
|
||
uni.getImageInfo({
|
||
src: selectedImage.value,
|
||
success: (imgInfo) => {
|
||
const scale = imgInfo.width / image.width; // 图片 原始宽 / 渲染宽
|
||
const sTop = scrollTop.value * scale; // 原始图上的裁切起始Y
|
||
const sHeight = container.height * scale; // 原始图上的裁切高度
|
||
|
||
// 因为是 widthFix，宽度就是原始图宽度（或裁切全宽）
|
||
const sWidth = imgInfo.width;
|
||
|
||
// 设置画布尺寸 (使用像素值)
|
||
const canvasW = container.width;
|
||
const canvasH = container.height;
|
||
|
||
const ctx = uni.createCanvasContext('crop-canvas', instance);
|
||
|
||
// 清除画布
|
||
ctx.clearRect(0, 0, canvasW, canvasH);
|
||
|
||
// 绘制
|
||
ctx.drawImage(
|
||
imgInfo.path,
|
||
0, sTop, sWidth, sHeight, // 源图裁剪区域
|
||
0, 0, canvasW, canvasH // 画布绘制区域
|
||
);
|
||
ctx.draw(false, () => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'crop-canvas',
|
||
width: canvasW,
|
||
height: canvasH,
|
||
destWidth: sWidth, // 使用原图实际宽度,保持原图清晰度
|
||
destHeight: sHeight, // 使用原图实际高度,保持原图清晰度
|
||
success: (res) => {
|
||
console.log('crop success (temp)', res.tempFilePath);
|
||
|
||
// 将临时路径保存为永久路径
|
||
uni.saveFile({
|
||
tempFilePath: res.tempFilePath,
|
||
success: (saveRes) => {
|
||
console.log('save success (saved)', saveRes.savedFilePath);
|
||
data.footerImage = saveRes.savedFilePath;
|
||
selectedImage.value = ''; // 隐藏编辑模式
|
||
// 保存到缓存
|
||
uni.setStorageSync(FOOTER_IMAGE_KEY, data.footerImage);
|
||
uni.hideLoading();
|
||
},
|
||
fail: (err) => {
|
||
console.error('saveFile fail', err);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error(err);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '裁剪失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}, instance);
|
||
});
|
||
},
|
||
fail: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '图片加载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
// 关闭图片编辑
|
||
const closeImageEdit = () => {
|
||
selectedImage.value = '';
|
||
};
|
||
|
||
// 格式化数字，保留两位小数并添加千分位逗号
|
||
function formatNumber(num) {
|
||
if (!num && num !== 0) return '';
|
||
let cleanNum = String(num).replace(/[^\d.]/g, '');
|
||
const parts = cleanNum.split('.');
|
||
if (parts.length > 2) {
|
||
cleanNum = parts[0] + '.' + parts.slice(1).join('');
|
||
}
|
||
let number = parseFloat(cleanNum);
|
||
if (isNaN(number)) return '';
|
||
number = Math.round(number * 100) / 100;
|
||
return number.toLocaleString('en-US', {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2
|
||
});
|
||
}
|
||
|
||
// 处理输入事件
|
||
function onNumberInput(field, value) {
|
||
editDialog.data[field] = formatNumber(value);
|
||
}
|
||
|
||
// 每四位添加空格
|
||
function addSpaceEveryFourChars(str) {
|
||
return str.replace(/(.{4})/g, '$1 ').trim();
|
||
}
|
||
|
||
// 复制卡号
|
||
function copyCardNumber() {
|
||
uni.setClipboardData({
|
||
data: data.form.cardNumber,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
data.isShow = false;
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.flex-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.justify-start {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.justify-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.justify-end {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.justify-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.items-start {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.items-end {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.items-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.no-shrink {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 建设银行 */
|
||
.div {
|
||
position: relative;
|
||
width: 750rpx;
|
||
min-height: 1862rpx;
|
||
overflow: hidden;
|
||
background-color: #f8f8f8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
|
||
.home {
|
||
position: absolute;
|
||
top: auto;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.div_8a4931ca0f8a124896aa57f966f7f1cf {
|
||
width: 750rpx;
|
||
height: 460rpx;
|
||
position: relative;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 5;
|
||
margin-top: 46rpx;
|
||
}
|
||
}
|
||
|
||
/* 图片编辑样式 */
|
||
.image-box {
|
||
width: 750rpx;
|
||
height: 460rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-image-box {
|
||
width: 100%;
|
||
min-height: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.crop-image-target {
|
||
width: 100%;
|
||
}
|
||
|
||
.dashed-line-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
border: 4rpx dashed red;
|
||
pointer-events: none;
|
||
|
||
.dashed-line-text {
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
width: 180rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 8rpx;
|
||
color: #1777FF;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
z-index: 999;
|
||
|
||
.mask-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 52rpx;
|
||
transform: translateY(-25%);
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
}
|
||
}
|
||
|
||
/* 组 45764 */
|
||
.group_45764 {
|
||
width: 750rpx;
|
||
// height: 658rpx;
|
||
padding-bottom: 70rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 0;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
background-image: url(/static/image/other/bank/jsyh/headerBg.png);
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
.rectangle_23313 {
|
||
position: relative;
|
||
width: 750rpx;
|
||
height: 658rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
|
||
|
||
.flexcontainer {
|
||
position: relative;
|
||
display: flex;
|
||
width: 773rpx;
|
||
height: 394rpx;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
z-index: 1;
|
||
margin-top: -120rpx;
|
||
margin-left: -16rpx;
|
||
|
||
.path_17460 {
|
||
width: 304rpx;
|
||
height: 318rpx;
|
||
z-index: 1;
|
||
position: relative;
|
||
margin-top: 0;
|
||
margin-left: 469rpx;
|
||
}
|
||
|
||
.path_17458 {
|
||
width: 610rpx;
|
||
height: 302rpx;
|
||
z-index: 0;
|
||
position: relative;
|
||
margin-top: -226rpx;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.path_17459 {
|
||
width: 594rpx;
|
||
height: 284rpx;
|
||
z-index: 2;
|
||
position: relative;
|
||
margin-top: -292rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.rectangle_23284 {
|
||
width: 750rpx;
|
||
height: 658rpx;
|
||
background-color: #2d60d5;
|
||
z-index: 0;
|
||
position: relative;
|
||
margin-top: -274rpx;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.flexcontainer_1 {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
width: 750rpx;
|
||
height: 96rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
margin-left: 0;
|
||
z-index: 999 !important;
|
||
justify-content: space-between;
|
||
.group_8 {
|
||
position: relative;
|
||
width: 240rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 0;
|
||
margin-left: 0;
|
||
margin-top: 0;
|
||
|
||
.rectangle_18503 {
|
||
position: relative;
|
||
width: 240rpx;
|
||
height: 96rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
|
||
|
||
.frame {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: relative;
|
||
margin-top: 32rpx;
|
||
margin-left: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text_1 {
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 40rpx;
|
||
color: #ffffff;
|
||
white-space: pre;
|
||
z-index: 2;
|
||
position: relative;
|
||
margin-top: 34rpx;
|
||
}
|
||
|
||
.group_9 {
|
||
position: relative;
|
||
width: 240rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 1;
|
||
// margin-left: 44rpx;
|
||
margin-top: 0;
|
||
|
||
.rectangle_18503_1 {
|
||
position: relative;
|
||
width: 240rpx;
|
||
height: 96rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
|
||
justify-content: flex-end;
|
||
.group_13980 {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: relative;
|
||
margin-right: 28rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.group_13979 {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: relative;
|
||
margin-right: 28rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_48200 {
|
||
position: relative;
|
||
width: 640rpx;
|
||
height: 354rpx;
|
||
|
||
background: url('/static/image/other/bank/jsyh/cardBg.png') center / cover no-repeat;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-top: 38rpx;
|
||
margin-left: 56rpx;
|
||
|
||
.group_48198 {
|
||
position: relative;
|
||
width: 582rpx;
|
||
height: 296rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
margin-top: 24rpx;
|
||
margin-left: 18rpx;
|
||
|
||
.flexcontainer_2 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 502rpx;
|
||
height: 90rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
z-index: 0;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
|
||
.group_48194 {
|
||
position: relative;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 1;
|
||
margin-left: 0;
|
||
margin-top: 0;
|
||
|
||
.div_1227 {
|
||
position: relative;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
|
||
.path {
|
||
width: 73.3333%;
|
||
height: 73.3333%;
|
||
position: absolute;
|
||
top: 13.3333%;
|
||
left: 13.3333%;
|
||
right: 13.3333%;
|
||
bottom: 13.3333%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flexcontainer_3 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 288rpx;
|
||
height: 88rpx;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
z-index: 0;
|
||
margin-left: 12rpx;
|
||
margin-top: 2rpx;
|
||
|
||
.text_2 {
|
||
position: relative;
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
letter-spacing: 2rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 1;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.flexcontainer_4 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 232rpx;
|
||
height: 34rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
z-index: 0;
|
||
margin-top: 18rpx;
|
||
margin-left: 0;
|
||
|
||
.group_13982 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
z-index: 0;
|
||
position: relative;
|
||
margin-left: 0;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.group_48197 {
|
||
width: 52rpx;
|
||
height: 34rpx;
|
||
z-index: 2;
|
||
position: relative;
|
||
margin-left: 152rpx;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.text_3 {
|
||
position: absolute;
|
||
top: 4rpx;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 34rpx;
|
||
color: #90969a;
|
||
white-space: pre;
|
||
height: 34rpx;
|
||
margin-top: -5rpx;
|
||
margin-bottom: -5rpx;
|
||
right: 60rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text_4 {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 400rpx;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 34rpx;
|
||
letter-spacing: 0.08em;
|
||
color: #3587e4;
|
||
white-space: pre;
|
||
height: 34rpx;
|
||
margin-top: -5rpx;
|
||
margin-bottom: -5rpx;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.text_5 {
|
||
position: relative;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 34rpx;
|
||
color: #545454;
|
||
white-space: pre;
|
||
height: 34rpx;
|
||
margin-top: 44rpx;
|
||
margin-bottom: -5rpx;
|
||
width: max-content;
|
||
margin-left: calc(50% - 189rpx);
|
||
margin-right: auto;
|
||
z-index: 2;
|
||
}
|
||
|
||
.text_6 {
|
||
position: relative;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 34rpx;
|
||
color: #545454;
|
||
white-space: pre;
|
||
height: 34rpx;
|
||
margin-top: 22rpx;
|
||
margin-bottom: -5rpx;
|
||
width: max-content;
|
||
margin-left: calc(50% - 189rpx);
|
||
margin-right: auto;
|
||
z-index: 3;
|
||
}
|
||
|
||
.flexcontainer_5 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 480rpx;
|
||
height: 70rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
z-index: 1;
|
||
margin-top: 22rpx;
|
||
margin-left: 102rpx;
|
||
|
||
.flexcontainer_6 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 360rpx;
|
||
height: 70rpx;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 1;
|
||
margin-left: 0;
|
||
margin-top: 0;
|
||
|
||
.text_7 {
|
||
position: relative;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 34rpx;
|
||
color: #545454;
|
||
white-space: pre;
|
||
height: 34rpx;
|
||
margin-top: 0;
|
||
margin-bottom: -5rpx;
|
||
width: max-content;
|
||
margin-left: calc(50% - 180rpx);
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_8 {
|
||
position: relative;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 34rpx;
|
||
color: #545454;
|
||
white-space: pre;
|
||
height: 34rpx;
|
||
margin-top: 22rpx;
|
||
margin-bottom: -5rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
.group_48196 {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
z-index: 0;
|
||
position: relative;
|
||
margin-left: 54rpx;
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rectangle_23314 {
|
||
width: 750rpx;
|
||
height: 28rpx;
|
||
position: relative;
|
||
margin-top: 42rpx;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
/* 组 48190 */
|
||
.group_48190 {
|
||
position: relative;
|
||
width: 750rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
background-color: #f8f8f8;
|
||
margin-top: -28rpx;
|
||
z-index: 9;
|
||
height: 140rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
.rectangle_23318 {
|
||
position: relative;
|
||
width: 700rpx;
|
||
height: 100rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #ffffff;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
margin-top: 0;
|
||
|
||
.group_13999 {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
z-index: 3;
|
||
position: relative;
|
||
margin-left: 652rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.frame_1 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 436rpx;
|
||
right: 0;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 0;
|
||
}
|
||
|
||
.frame_2 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 536rpx;
|
||
right: 0;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 1;
|
||
}
|
||
|
||
.text_9 {
|
||
position: absolute;
|
||
top: 32rpx;
|
||
left: 0;
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
right: 528rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 组 48191 */
|
||
.group_48191 {
|
||
position: relative;
|
||
width: 700rpx;
|
||
height: 206rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 3;
|
||
// margin-top: 24rpx;
|
||
margin-left: 26rpx;
|
||
|
||
.rectangle_23317 {
|
||
position: relative;
|
||
width: 700rpx;
|
||
height: 206rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #ffffff;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
margin-top: 0;
|
||
|
||
.rectangle_23316 {
|
||
position: relative;
|
||
width: 144rpx;
|
||
height: 54rpx;
|
||
border-radius: 27rpx;
|
||
background-color: #ecf3fd;
|
||
margin-left: calc(50% - 328rpx);
|
||
margin-right: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 1;
|
||
margin-top: 24rpx;
|
||
|
||
.text_10 {
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 40rpx;
|
||
color: #2066c1;
|
||
white-space: pre;
|
||
height: 40rpx;
|
||
margin-top: 14rpx;
|
||
margin-bottom: -6rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
.div_418 {
|
||
width: 700rpx;
|
||
height: 0;
|
||
position: relative;
|
||
transform: rotate(0deg);
|
||
border: 1rpx solid #f2f2f2;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 2;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.flexcontainer_7 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 650rpx;
|
||
height: 36rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
z-index: 0;
|
||
margin-top: 34rpx;
|
||
margin-left: 22rpx;
|
||
justify-content: space-between;
|
||
.group_14000 {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
z-index: 3;
|
||
position: relative;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.text_11 {
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
width: max-content;
|
||
z-index: 0;
|
||
}
|
||
|
||
.text_12 {
|
||
font-size: 28rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 40rpx;
|
||
color: #999999;
|
||
white-space: pre;
|
||
height: 40rpx;
|
||
margin-top: -6rpx;
|
||
margin-bottom: -6rpx;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 1;
|
||
}
|
||
|
||
.text_13 {
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 44rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
height: 44rpx;
|
||
margin-top: -6rpx;
|
||
margin-bottom: -6rpx;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 组 48192 */
|
||
.group_48192 {
|
||
position: relative;
|
||
width: 700rpx;
|
||
height: 264rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
z-index: 4;
|
||
margin-top: 24rpx;
|
||
margin-left: 26rpx;
|
||
|
||
.rectangle_23319 {
|
||
position: relative;
|
||
width: 700rpx;
|
||
height: 264rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #ffffff;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-top: 0;
|
||
|
||
.text_14 {
|
||
position: relative;
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
width: max-content;
|
||
margin-left: calc(50% - 318rpx);
|
||
margin-right: auto;
|
||
margin-top: 38rpx;
|
||
}
|
||
|
||
.flexcontainer_8 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 486rpx;
|
||
height: 36rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
isolation: isolate;
|
||
margin-top: 10rpx;
|
||
margin-left: 32rpx;
|
||
|
||
.group_48193 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
z-index: 1;
|
||
position: relative;
|
||
margin-left: 458rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
right: 38rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
z-index: 0;
|
||
}
|
||
}
|
||
|
||
.flexcontainer_9 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 552rpx;
|
||
height: 36rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin-top: 18rpx;
|
||
margin-left: 30rpx;
|
||
|
||
.text_16 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
right: 472rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_17 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 168rpx;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_18 {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 0;
|
||
font-size: 22rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 30rpx;
|
||
color: #e3360b;
|
||
white-space: pre;
|
||
height: 30rpx;
|
||
margin-top: -4rpx;
|
||
margin-bottom: -4rpx;
|
||
right: 216rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_19 {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 424rpx;
|
||
font-size: 22rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 30rpx;
|
||
color: #e3360b;
|
||
white-space: pre;
|
||
height: 30rpx;
|
||
margin-top: -4rpx;
|
||
margin-bottom: -4rpx;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
.flexcontainer_10 {
|
||
position: relative;
|
||
display: flex;
|
||
width: 564rpx;
|
||
height: 36rpx;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin-top: 10rpx;
|
||
margin-left: 30rpx;
|
||
|
||
.text_20 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
right: 484rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_21 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 156rpx;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
color: #1a1a1a;
|
||
white-space: pre;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_22 {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 0;
|
||
font-size: 22rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 30rpx;
|
||
color: #e3360b;
|
||
white-space: pre;
|
||
height: 30rpx;
|
||
margin-top: -4rpx;
|
||
margin-bottom: -4rpx;
|
||
right: 216rpx;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.text_23 {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 424rpx;
|
||
font-size: 22rpx;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 400;
|
||
line-height: 30rpx;
|
||
color: #e3360b;
|
||
white-space: pre;
|
||
height: 30rpx;
|
||
margin-top: -4rpx;
|
||
margin-bottom: -4rpx;
|
||
right: 0;
|
||
width: max-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 编辑弹窗样式 */
|
||
.editDialog {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.editDialog_bg {
|
||
width: 680rpx;
|
||
max-height: 80vh;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.editDialog_header {
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
text-align: center;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.editDialog_body {
|
||
padding: 20rpx 30rpx;
|
||
overflow-y: auto;
|
||
max-height: 60vh;
|
||
}
|
||
|
||
.formItem {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
text {
|
||
width: 200rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
padding: 20rpx 30rpx;
|
||
border-top: 1rpx solid #eee;
|
||
gap: 20rpx;
|
||
|
||
.btn-cancel,
|
||
.btn-save {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.btn-cancel {
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.btn-save {
|
||
background-color: #187AFF ;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
/* 卡号弹窗样式 */
|
||
.dask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99999 !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.info {
|
||
width: calc(100vw - 30px);
|
||
background: #FFFFFF;
|
||
border-radius: 4px 4px 4px 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #1A1A1A;
|
||
margin-left: 20px;
|
||
margin-top: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.dec {
|
||
font-weight: 400;
|
||
font-size: 17px;
|
||
color: #1A1A1A;
|
||
margin-left: 20px;
|
||
margin-top: 18rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.btnbox {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-top: 1rpx solid #F2F2F2;
|
||
|
||
.btn {
|
||
width: calc(50% - 1rpx);
|
||
height: 54px;
|
||
line-height: 54px;
|
||
font-weight: 400;
|
||
font-size: 15px;
|
||
color: #4466D4;
|
||
text-align: center;
|
||
}
|
||
|
||
.btns {
|
||
border-left: 1rpx solid #F2F2F2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|