html--好看的手机充值单页

news2024/10/6 10:35:25
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>线上充值-首页</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<link href="static/css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
	</head>
	<body>
		<section class="aui-flexView">
			<header class="aui-navBar aui-navBar-fixed">
				<a href="denglu.html" class="aui-navBar-item">
					<i class="icon icon-return"></i>首页
				</a>
				<div class="aui-center">
					<span class="aui-center-title">充值中心</span>
				</div>
				<a href="chongzhijilu.html" class="aui-navBar-item">充值记录</a>
			</header>
			<section class="aui-scrollView">
				<div class="aui-recharge-iphone">
					<div class="aui-well-bd">
						<p>&nbsp;默认号码</p>
						<p><input type="text" name="" id="" value="www.zzvips.com" placeholder="请输入手机号码"></p>
					</div>
					<div class="aui-well-hd">
						<img src="static/picture/yinhangkahao.png" alt="">
					</div>
				</div>
				<div class="aui-blue-box">
					<div class="aui-palace aui-palace-one">
						<div class="aui-current-box">
							<a href="javascript:;" class="aui-current-item "
								data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
								<div class="aui-current-item-hd">
									<h1>50元</h1>
									<h3>快充:50元</h3>
								</div>
							</a>
							<a href="javascript:;" class="aui-current-item "
								data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
								<div class="aui-current-item-hd">
									<h1>100元</h1>
									<h3>快充:100元</h3>
								</div>
							</a>
							<a href="javascript:;" class="aui-current-item ">
								<div class="aui-current-item-hd">
									<h1>200元</h1>
									<h3>快充:200元</h3>
								</div>
							</a>
							<a href="javascript:;" class="aui-current-item ">
								<div class="aui-current-item-hd">
									<h1>100元</h1>
									<h3>慢充:92元</h3>
								</div>
							</a>
							<a href="javascript:;" class="aui-current-item ">
								<div class="aui-current-item-hd">
									<h1>200元</h1>
									<h3>慢充:92元</h3>
								</div>
							</a>
							<a href="javascript:;" class="aui-current-item ">
								<div class="aui-current-item-hd">
									<b style="color: #108ee9;">更多<br>金额</b>
								</div>
							</a>
						</div>
					</div>
				</div>
				
				<div class="aui-flex">
					<div class="aui-flex-box">
						<h1>充值记录</h1>
					</div>
					<div class="aui-arrow">
						<a href="xiaofeijilu.html">
							<span>全部</span>
						</a>
					</div>
				</div>
				<div class="aui-job-list">
					<a href="javascript:;" class="aui-flex">
						<div class="aui-flex-box">
							<h2>中国移动</h2>
							<p>09-16 10:34</p>
						</div>
						<div class="aui-monthly">
							<h3>-10.00</h3>
						</div>
					</a>
				</div>
				<div class="aui-job-list">
					<a href="javascript:;" class="aui-flex">
						<div class="aui-flex-box">
							<h2>中国移动</h2>
							<p>09-16 10:34</p>
						</div>
						<div class="aui-monthly">
							<h3>-10.00</h3>
						</div>
					</a>
				</div>
				<div class="aui-job-list">
					<a href="javascript:;" class="aui-flex">
						<div class="aui-flex-box"><hr>
							<h2>公告:快充30分钟内到账,慢充72小时左右到账</h2>
						</div>
						<div class="aui-monthly">
						</div>
					</a>
				</div>
			</section>
		</section>
		<div class="m-actionsheet" id="actionSheet">
			<div class="aui-show-box">
				<div class="aui-show-box-title aui-footer-flex">
					<div class="aui-flex b-line">
						<i class="icon icon-close" id="cancel"></i>
						<div class="aui-flex-box">
							<h4>确认付款</h4>
						</div>
					</div>
					<div class="aui-coll-share-box">
						<h1><i>¥10.00</i></h1>
					</div>
					<div class="aui-info-line">
						<a href="javascript:;" class="aui-flex b-line">
							<div class="aui-flex-box">
								<h5>付款方式</h5>
							</div>
							<div class="aui-arrow">招商银行储值卡</div>
						</a>
					</div>
					<div class="aui-coll-cancel">
						<a href="javascript:;" id="cancel" class="">立即付款</a>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="static/js/layer.js"></script>
	</body>
</html>


在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1855216.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【树形dp 换根法 BFS】2581. 统计可能的树根数目

本文涉及知识点 CBFS算法 动态规划汇总 图论知识汇总 树形dp 换根法 BFS LeetCode 2581. 统计可能的树根数目 Alice 有一棵 n 个节点的树&#xff0c;节点编号为 0 到 n - 1 。树用一个长度为 n - 1 的二维整数数组 edges 表示&#xff0c;其中 edges[i] [ai, bi] &#xf…

2.树莓派4b+ubuntu18.04(ros版本melodic)+arduino mega自制两轮差速小车,实现建图导航功能

这篇文章介绍arduino使用和安装arduino_bridge 将arduino与树莓派连接 查看arduino的端口号&#xff0c;我们这里查看到的时ttyUSB0 ll /dev/ttyUSB*将当前用户添加进dialout组 sudo usermod -a -G dialout your_user_name然后重启树莓派&#xff0c;然后才能生效 然后如果你…

【ajax核心02】底层原理-Promise对象

目录 一&#xff1a;promise对象是什么 二&#xff1a;语法&#xff08;Promise使用步骤&#xff09; 三&#xff1a;Promise-三种状态 一&#xff1a;promise对象是什么 Promise 对象代表异步操作最终的完成&#xff08;或失败&#xff09;以及其结果值。 即Promise对象是…

安卓逆向经典案例—H5appXX运维

H5app的class不一定是android.webkit.WebView 也可能是腾讯X5内核或者是uc webview 殊途同归也要去hook webview的系统函数和可调式方法setWebContentsDebuggingEnabled。突破sign算法&#xff0c;输出协议和加密算法的作用是什么&#xff1f;分析c-sign值 在加密的位置下断点 …

STM32单片机实现PWR多种模式

文章目录 1. PWR多种模式 2. 修改主频 2.1 main.c 3. 睡眠模式串口发送接收 3.1 Serial.c 3.2 Serial.h 3.3 main.c 4. 停止模式对射式红外传感器计次 4.1 CountSensor.c 4.2 CountSensor.h 4.3 main.c 5. 待机模式实时时钟 5.1 MyRTC.c 5.2 MyRTC.h 5.3 main.c…

【Spring】Spring Boot 快速入门

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

【漏洞复现】AJ-Report开源数据大屏 verification;swagger-ui RCE漏洞

0x01 产品简介 AJ-Report是一个完全开源的B平台&#xff0c;酷炫大屏展示&#xff0c;能随时随地掌控业务动态&#xff0c;让每个决策都有数据支撑。多数据源支持&#xff0c;内置mysql、elasticsearch、kudu等多种驱动&#xff0c;支持自定义数据集省去数据接口开发&#xff…

缓存层持久化

** 读缓存** 分布式缓存 先将所有的缓存数据集中存储在同一个地方&#xff0c;而非重复保存到各个服务器节点中&#xff0c;然后所有的服务器节点都从这个地方读取数据 使用MongoDB的公司最少&#xff0c;目前&#xff0c;Redis比Memcached更流行&#xff1a; &#xff08;1&…

SpringBoot2+Vue3开发博客管理系统

项目介绍 博客管理系统&#xff0c;可以帮助使用者管理自己的经验文章、学习心得、知识文章、技术文章&#xff0c;以及对文章进行分类&#xff0c;打标签等功能。便于日后的复习和回忆。 架构介绍 博客管理系统采用前后端分离模式进行开发。前端主要使用技术&#xff1a;Vu…

Comfyui-ChatTTS-OpenVoice 为ComfyUI添加语音合成、语音克隆功能

‍‍ 生成多人播客&#xff1a; Comfyui-ChatTTS是一个开源的GitHub项目&#xff0c;致力于为ComfyUI添加语音合成功能。该项目提供了一系列功能强大的节点和模型&#xff0c;支持用户创建和复用音色&#xff0c;支持多人对话模式的生成&#xff0c;并提供了导出音频字幕文件的…

sed的用法

grep 就是查找文本当中的内容&#xff0c;扩展正则表达式 sed是一种流编辑器&#xff0c;一次处理一行内容 如果只是展示&#xff0c;会放在缓冲区&#xff08;模式空间&#xff09;&#xff0c;展示结束之后&#xff0c;会从模式空间把操作结果删除。 一行一行处理&#xf…

消息认证码解析

1. 什么是消息认证码 消息认证码(Message Authentication Code)是一种确认完整性并进行认证的技术&#xff0c;取三个单词的首字母&#xff0c;简称为MAC。 消息认证码的输入包括任意长度的消息和一个发送者与接收者之间共享的密钥&#xff0c;它可以输出固定长度的数据&#x…

深入分析 Android BroadcastReceiver (六)

文章目录 深入分析 Android BroadcastReceiver (六)1. 广播机制的高级优化策略1.1 使用 Sticky Broadcast&#xff08;粘性广播&#xff09;示例&#xff1a;粘性广播&#xff08;过时&#xff0c;不推荐&#xff09; 1.2 使用 LiveData 和 ViewModel 进行组件通信示例&#xf…

【题解】—— LeetCode一周小结25

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结24 17.最长特殊序列 II 题目链接&#xff1a;522. 最长特殊序列…

Elastaticsearch与SpringBoot集成的互联网的实战分享

以前有过类似的文章&#xff0c;今天升级版分享重磅内容&#xff0c;Elastaticsearch与SpringBoot集成的互联网的实战。 一、需求分析&#xff1a; 起因是这样的&#xff0c;产品有这样一个需求&#xff1a;数据中的标题、内容、关键词等实现结构化搜索和半结构化搜索、数据时…

[SAP ABAP] 内表

内表是在程序中定义&#xff0c;仅在程序运行时间内&#xff0c;存在于内存中的表格&#xff0c;用于暂时存储数据库表中的数据&#xff0c;实现复杂的数据操作 内表中存放的数据是临时的&#xff0c;当程序执行时才会占用内存&#xff0c;关闭程序时会释放内存 内表的种类 ①…

MyBatis-Plus常用注解详解与实战应用

MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。它提供了大量的常用注解&#xff0c;使得开发者能够更方便地进行数据库操作。 MyBatis-Plus 提供的注解可以帮我们解决一些数据库与实体之间相…

车辆数据的提取、定位和融合(其二.一 共十二篇)

第一篇&#xff1a; System Introduction 第二篇&#xff1a;State of the Art 第三篇&#xff1a;localization 第四篇&#xff1a;Submapping and temporal weighting 第五篇&#xff1a;Mapping of Point-shaped landmark data 第六篇&#xff1a;Clustering of landma…

论坛实现随机发帖的学习

1、badboy操作&#xff0c;录制发帖全过程&#xff0c;录制结果保存&#xff0c;生成为.jmx格式的文件 2、在Jmeter中打开该.jmx文件&#xff0c;重命名&#xff0c;便于了解步骤 3、生成结果树&#xff0c;查看所以步骤是否正确 4、实现随机发帖。。。。还没写完

Vue2配置前端代理

在8080向5000请求数据 clivue2 一、cli内配置前端代理 1、使用 发送请求时写8080 在配置文件中配置 vue.config.js 2、缺点 无法配置多个代理无法控制某个请求知否要代理 二、方式二 module.exports {devServer: {proxy: {/api1:{ //匹配所有以/api1开头的请求路径…