OPay 首页换装工作台 V21

−

100%

＋

适应屏幕

100%

'; } function readyImages(doc){return Promise.all([...doc.images].map(async img=>{if(!img.complete)await img.decode();if(!img.naturalWidth)throw Error('图片未加载完成')}))} window.addEventListener('message',e=>{if(e.source!==currentWindow())return;if(e.data?.type==='opay-scroll-top')$('stage').scrollTo({top:0,behavior:'smooth'})}); const DEFAULT={base:'proposal',headerStyle:'native',assetLayout:'native',assetSkin:'native',assetHeight:0,chain:'native',mainStyle:'native',mainPalette:'auto',mainLayout:'native',serviceStyle:'native',servicePalette:'auto',kbox:'native',background:'native',backgroundCustom:'#F8F8FB',mainIconSize:0,serviceIconSize:0,mainItemGap:0,serviceItemGap:0,serviceRowGap:0,moduleGap:0}; const CHOICES={headerStyle:[['native','基座原样'],['search','旧稿 · 搜索顶栏']],assetLayout:[['native','基座原样'],['source-dual','旧稿 · 轻双资产卡'],['tabbed','页签单卡'],['single','单资产卡'],['split','双卡分离'],['merged','双卡合并'],['hub','白底内双卡']],assetSkin:[['native','基座原色'],['source-white','旧稿 · 纯白轻卡'],['proposal-glow','深绿高光'],['proposal-forest','统一墨绿'],['proposal-obsidian','曜石黑'],['proposal-bright','明亮品牌绿'],['brand','OPay 原绿'],['mint','浅薄荷'],['white','白底浅边'],['dual','绿白双卡'],['glass','透光白'],['gradient','明亮绿渐变'],['web','官网绿紫'],['palm','OPay 浅绿']],chain:[["native", "基座原样"],["source-history","旧稿 · 轻量 History 条"], ["v9-compact", "紧凑 · 卡内交易＋充值"], ["v9-current-payment", "现状 · 卡下支付状态"], ["v9-current-order", "现状 · 独立订单提示"], ["v9-merged", "合并 · 单行转账条"], ["v9-tall", "高双卡 · 转账＋双指示条"], ["v9-glass", "浅光 · 半透明交易条"], ["v9-contrast", "绿白 · 白卡交易条"], ["v9-palm", "PalmPay思路 · 卡内绿色充值"], ["v9-proposal", "明绿 · 转账＋双指示条"], ["inline", "卡下 · 仅交易入口"], ["inline-add", "卡下 · 交易＋充值"], ["transaction", "独立 · 仅交易入口"], ["transfer", "独立 · 交易消息"], ["activity", "独立 · 消息＋入口"], ["preview", "独立 · 原文双层展示"], ["none", "隐藏"]],mainLayout:[['native','基座原样'],['group','统一白色底'],['split','四张独立小卡'],['plain','不加外层底']],kbox:[['native','基座原样'],['source-progress','旧稿 · 消费任务进度'],['source-airtime','旧稿 · 礼盒话费横幅'],['source-stack','旧稿 · 任务＋话费组合'],['photo','Small steps 人物'],['reference1','彩色角色插画'],['reference2','优惠券插画'],['current','OPay 现状储蓄'],['ai-vault','AI · 精致储蓄'],['ai-life','AI · 生活新篇章'],['ai-gift','AI · 纸艺礼遇']]}; const skinColors={'source-white':'#FFFFFF','proposal-glow':'linear-gradient(110deg,#003D2C,#00B876)','proposal-forest':'linear-gradient(145deg,#009A69,#003D2C)','proposal-obsidian':'linear-gradient(120deg,#60605E,#141514)','proposal-bright':'#00B876',native:'linear-gradient(90deg,#00B876 50%,#E4F5EC 50%)',brand:'#00B876',mint:'#D7F3E6',white:'#FFF',dual:'linear-gradient(90deg,#00B876 50%,#E4F5EC 50%)',glass:'linear-gradient(130deg,#EEF8FF,#D8EEE5)',gradient:'linear-gradient(45deg,#00B876,#7EDB6C)',web:'linear-gradient(90deg,#1DC99B 50%,#210F60 50%)',palm:'#E3F8EF'}; const PROPOSALS=[{"id": "glow", "name": "深色渐变", "subtitle": "品牌质感", "skin": "proposal-glow", "main": "proposal-duotone", "services": "proposal-line", "palette": "proposal-forest", "layout": "split"}, {"id": "forest", "name": "墨绿统一", "subtitle": "稳健专业", "skin": "proposal-forest", "main": "proposal-forest", "services": "proposal-line", "palette": "proposal-forest", "layout": "split"}, {"id": "obsidian", "name": "曜石黑金", "subtitle": "高端尊贵", "skin": "proposal-obsidian", "main": "proposal-obsidian", "services": "proposal-obsidian", "palette": "proposal-obsidian", "layout": "plain"}, {"id": "bright", "name": "明亮品牌绿", "subtitle": "年轻活力", "skin": "proposal-bright", "main": "proposal-solid", "services": "proposal-layered", "palette": "proposal-green", "layout": "split"}]; let config={...DEFAULT},activeModule='asset',regionsVisible=false,mode='h5',frameReady=false,saves=[],comparisons=[],timer,canvasTheme='light',canvasColor='#EEF2EF',zoom='fit',loadSeq=0; const $=id=>document.getElementById(id),esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); CHOICES.kbox.push(...[["design-classic","经典产品卡"],["design-split","奶油分栏卡"],["design-airtime","话费礼盒横幅"],["design-growth","储蓄增长横幅"],["design-mint-a","薄荷 · 现金叠层"],["design-mint-b","薄荷 · 轻盈钱钞"],["design-mint-c","薄荷 · 金色收益"],["design-gold-a","香槟 · 金币储蓄罐"],["design-gold-b","香槟 · 透明金罐"],["design-gold-c","香槟 · 丰盈金罐"],["design-blue-a","雾蓝 · 增长屏幕"],["design-blue-b","雾蓝 · 立体数字"],["design-blue-c","雾蓝 · 收益图表"],["design-lilac-a","灰紫 · 幸运金币"],["design-lilac-b","灰紫 · 轻巧礼遇"],["design-lilac-c","灰紫 · 礼遇星球"],["design-coral-a","珊瑚 · 储蓄目标"],["design-coral-b","珊瑚 · 成长钱袋"],["design-coral-c","珊瑚 · 目标金币"],["design-forest-a","墨绿 · 金币钱袋"],["design-forest-b","墨绿 · 光感金袋"],["design-forest-c","墨绿 · 琉璃钱袋"]]); function validate(v){let c={...DEFAULT};if(!v||typeof v!=='object')return c;if(D.bases[v.base])c.base=v.base;for(const[k,vs]of Object.entries(CHOICES))if(vs.some(x=>x[0]===v[k]))c[k]=v[k];for(const k of ['mainStyle','serviceStyle'])if(v[k]==='native'||I.styles.some(x=>x.id===v[k]))c[k]=v[k];for(const k of ['mainPalette','servicePalette'])if(I.palettes.some(x=>x.id===v[k]))c[k]=v[k];if(Number.isFinite(+v.assetHeight)&&+v.assetHeight>=0&&+v.assetHeight<=220)c.assetHeight=+v.assetHeight===0?0:Math.max(60,Math.round(+v.assetHeight));for(const [key,max] of Object.entries({mainIconSize:64,serviceIconSize:48,mainItemGap:20,serviceItemGap:20,serviceRowGap:32,moduleGap:32})){if(Number.isFinite(+v[key])&&+v[key]>=0&&+v[key]<=max)c[key]=Math.round(+v[key])}if(D.backgrounds.some(x=>x.id===v.background)||v.background==='custom')c.background=v.background;if(/^#[0-9a-f]{6}$/i.test(v.backgroundCustom||''))c.backgroundCustom=v.backgroundCustom;return c} try{const v8Saved=localStorage.getItem('opay-studio-v9-saved');const savedSource=v8Saved===null?(localStorage.getItem('opay-studio-v8-saved')||localStorage.getItem('opay-studio-v6-saved')):v8Saved;saves=JSON.parse(savedSource||'[]').map(x=>({...x,config:validate(x.config)}));if(v8Saved===null&&savedSource!==null)localStorage.setItem('opay-studio-v9-saved',JSON.stringify(saves));config=validate(JSON.parse(localStorage.getItem('opay-studio-v14-current')||'null'));const pref=JSON.parse(localStorage.getItem('opay-studio-v9-canvas')||'null');if(pref){canvasTheme=pref.theme;canvasColor=pref.color||canvasColor}}catch(e){console.error('读取本机方案失败',e)} function toast(t){$('status').textContent=t;$('status').classList.add('show');clearTimeout(timer);timer=setTimeout(()=>$('status').classList.remove('show'),2300)} function safe(v){return JSON.stringify(v).replace(/<\//g,'<\\/')} function pageHTML(c,slim=false,viewState=null,editor=false,displayMode=editor?'desktop':'mobile'){const b=D.bases[c.base],graphics=slim&&!editor?(D.graphics[c.kbox]?{[c.kbox]:D.graphics[c.kbox]}:{}):D.graphics;return b.html.replace('','').replace('',`

已保存方案对比