HTML5手机端网页开发

其他 2018-10-31 03:41:59 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lt623265189/article/details/77334112 


<html lang="zh-cn" style="font-size: 64.6875px;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>仿真交易移动端</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

<!-- 弹窗引用 -->
<link rel="stylesheet" href="js/alert/common.css">
<link rel="stylesheet"
	href="js/alert/SyntaxHighlighter/shCoreDefault.css">
<link rel="stylesheet" href="js/alert/alert.css">
<link rel="stylesheet" href="js/alert/style.css">


<!-- <script type="text/javascript">
	//html root的字体计算应该放在最前面，这样计算就不会有误差了/
	//2016.3.23 wjq update 之所以要加个判断返回一个20.5，是因为当用户在谷歌等浏览器直接输入手机端网站网址时，如果用户设置模块自定义样式的高度比较小，由于这时候的clientWidth为1920px，及返回的_htmlFontSize为40，这时候就会使模块太小，展示不完全，因此先取一个较为准确的值去展示。Mobi.resetHtmlFontSize()顺便也加了
	var _htmlFontSize = (function() {
		var clientWidth = document.documentElement ? document.documentElement.clientWidth
				: document.body.clientWidth;
		if (clientWidth > 640)
			clientWidth = 640;
		document.documentElement.style.fontSize = clientWidth * 1 / 6.4 + "px";
		return clientWidth * 1 / 6.4;
	})();
</script> -->

<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript">
	var phoneWidth = parseInt(window.screen.width);
	var phoneScale = phoneWidth / 640;
	var ua = navigator.userAgent;
	if (/Android (\d+\.\d+)/.test(ua)) {
		var version = parseFloat(RegExp.$1);
		if (version > 2.3) {
			document
					.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
		} else {
			document
					.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
		}
	} else {
		document
				.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
	}
</script>
</head>
<body class="html">
	<div class="main">
		<div class="content">
			<div class="clearfix header text-center">
				<a class="pull-left img-l" href="#"><img class=""
					src="images/left.jpg" alt=""></a>
				<div class="head-tt">{{room.title}}</div>
			</div>
		</div>
		<div class="clearfix head-t1">
			<div class="pull-left">我的余额：{{my.avamoney}}</div>
			<div class="pull-left" style="margin-left: 0.1rem;">盈亏：{{my.balance}}</div>
		</div>
		<div class="clearfix head-t2">
			<span>最新：{{md.lastPrice}}</span> <span>开盘：{{md.openPrice}}</span> <br>
			<span>最高：{{md.highPrice}}</span> <span>最低：{{md.lowPrice}}</span>
		</div>
		<img style="width: 100%;" src="images/01.jpg" alt="">

		<div class="bs-example bs-example-tabs bs-exa"
			data-example-id="togglable-tabs">
			<ul id="myTabs" class="nav nav-tabs nav-new" role="tablist">
				<li role="presentation" class="active"><a href="#home"
					id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
					aria-expanded="false">交  易</a></li>
				<li role="presentation" class=""><a href="#profile" role="tab"
					id="profile-tab" data-toggle="tab" aria-controls="profile"
					aria-expanded="true">持  仓</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div role="tabpanel" class="tab-pane fade active in" id="home"
					aria-labelledby="home-tab">
					<div class="clearfix conts">
						<div class="text1">
							<span>手数：</span>
							<div id="num-1" data-value="1" class="form-control text-f1"
								@click="volumeCount(1)">1</div>
							<div id="num-5" data-value="5" class="form-control text-f1"
								@click="volumeCount(5)">5</div>
							<div id="num-10" data-value="10" class="form-control text-f1"
								@click="volumeCount(10)">10</div>
							<div id="num-15" data-value="15" class="form-control text-f1"
								@click="volumeCount(15)">15</div>
							<input type="number" name="volume" class="form-control text-f2"
								placeholder="手动输入" v-model="order.num">
						</div>
						<div class="text1">
							<div class="text-con">
								<span>止损：</span> <input type="text" class="form-control text-f3"
									placeholder="请输入点数" v-model="order.limitdown">
							</div>
							<div class="text-con pad2">
								<span>止盈：</span> <input type="text" class="form-control text-f3"
									placeholder="请输入点数" v-model="order.limitup">
							</div>
						</div>
					</div>
					<div class="clearfix conts2">
						<div
							style="height: 1.3rem; line-height: 1.3rem; font-size: 0.5rem;">
							<!--class="text-con" class="paya1" -->
							<a class="paya1"> <span class="span-left"
								@click="buy" data-name="direction" data-value="1">买  涨</span>
							</a> <a class="paya2"> <span class="span-left"
								@click="sell" data-name="direction" data-value="-1">买  跌</span>
							</a>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="profile"
					aria-labelledby="profile-tab">
					<div id="myTabContent2" class="tab-content">
						<!-- 当前持仓 -->
						<div class="tablefilter clearfix">
							<div class="fr" style="margin-top: 0.2rem;">
								<form class="ng-pristine ng-valid">
									<button type="button" class="btn btn-danger"
										@click="closeall()" name="button" style="font-size: 0.5rem;">一键平仓</button>
								</form>
							</div>
						</div>
						<div class="bs-example" data-example-id="simple-table">
							<table class="table table-tt2" id="p-table"
								style="font-size: 0.4rem;">
								<thead>
									<tr style="text-align: center;">
										<th width="5%">合约</th>
										<th width="10%">手数</th>
										<th width="10%">买/卖</th>
										<th width="10%">价格</th>
										<th width="10%">盈亏</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(p,index) in positions" @click="rowClick(index)">
										<td>{{p.investorid}}</td>
										<td>{{p.num}}</td>
										<td>{{p.direct==0?'买':'卖'}}</td>
										<td>{{p.price}}</td>
										<td>{{p.balance}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<!-- 交易明细 -->
					<div role="tabpanel" class="tab-pane fade" id="dropdown12"
						aria-labelledby="dropdown1-tab">
						<div class="tablefilter clearfix">
							<div class="fl">
								<div class="dib">
									<input checked="checked" id="D161filter-0"
										ng-click="selectOrder(0)" type="radio" name="filter" /> <label>全部</label>
								</div>
								<div class="dib">
									<input id="D161filter--1" ng-click="selectOrder(-1)"
										type="radio" name="filter"> <label>卖出</label>
								</div>
								<div class="dib">
									<input id="D161filter-1" ng-click="selectOrder(1)" type="radio"
										name="filter"> <label>买入</label>
								</div>
							</div>
						</div>
						<div class="bs-example" data-example-id="simple-table">
							<table class="table table-tt2" id="t-table">
								<thead>
									<tr>
										<th>时间</th>
										<th>合约</th>
										<th>手数</th>
										<th>开/平</th>
										<th>买/卖</th>
										<th>价格</th>
										<th>盈亏</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="t in trads">
										<td>{{t.uptime}}</td>
										<td>{{t.investorid}}</td>
										<td>{{t.num}}</td>
										<td>{{t.flag==0?'开':'平'}}</td>
										<td>{{t.direct==0?'买':'卖'}}</td>
										<td>{{t.price}}</td>
										<td>{{t.balance}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- 弹框 -->
				<!-- <div id="domset" class="modal fade" role="dialog"
					aria-labelledby="closeModal_title" aria-hidden="true">
					<div style="font-size:0.4rem;display:inline;">
						止盈：<input ref="input1" id="limitup1" name="volume" type="number" class="form-control text-f3"  placeholder="点数"/> 
						止损：<input	id="limitdown1" type="number" class="form-control text-f3" placeholder="点数"/>
						<button type="button" class="btnx btn-primary"
							@click="updateLimit(positionOrder)">设  置</button>
					</div>
					<br>
					<div style="font-size:0.4rem;display:inline;">
						平仓：<input id="closeNum1" type="text" class="form-control text-f3"  placeholder="不超过最大手数"/>
						<button type="button" class="btnx btn-primary"
							@click="close(positionOrder)">平  仓</button>
					</div>
				</div> -->
			</div>
		</div>
		<div class="foot">
			<a href="">首 页</a> <a href="">在线客服</a> <a href="">用户中心</a>
		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/scroll.js"></script>
	<script type="text/javascript" src="js/jquery.cxscroll.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="simtrad.js"></script>
	
	<!-- 弹窗组件 -->
	<script src="js/alert/SyntaxHighlighter/shCore.js"></script>
	<script src="js/alert/SyntaxHighlighter/makeSy.js"></script>
	<script src="js/alert/alert.js"></script>
	<script src="js/alert/alert-api.js"></script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/lt623265189/article/details/77334112
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022