第二个vue实例
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兑换列表</title>
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- <script type="text/javascript" src="dest/js/flexible.js"></script> -->
<link rel="stylesheet" href="dest/css/exchange.css">
</head>
<body>
<div class="main dn" id="page">
<!--loading-->
<div v-show="isLoading" class="cover"></div>
<aside v-show="isLoading" class="loading-wrapper" id="loadingWrapper">
<div>
<div class="loading-img"></div>
<div class="loading-animate"></div>
</div>
</aside>
<!-- 日期选择 -->
<div class="head">
<div class="nowTime">
</div>
<ul class="headDate">
</ul>
</div>
<!-- 可兑换机票列表 -->
<div class="listBox">
<div class="center" id="listItem" v-for="(flight,index) in flightList" v-show="Object.keys(flightList).length > 0">
<div class="in-li">
<div class="inli-top">
<div class="inli-left">
<span>{{timeReversal(flight.StarTime).fullDate}}</span>
<span>{{timeReversal(flight.StarTime).day}}</span>
<i>{{timeReversal(flight.StarTime).fullHour}}</i>-
<i>{{timeReversal(flight.EndTime).fullHour}}</i>
</div>
<b class="rule" @click="rule(flight.Rule)">
<i></i>
规则
</b>
<!-- 规则遮罩层 -->
<div class="rule_show">
<div @click="shutDown()" class="shutDown"></div>
<p class="txt">
{{flight.Rule}}
</p>
</div>
</div>
<div class="inli-cen">
<div class="in-mes">
<div class="inli-cenlt">
<p class="bold">{{flight.StartName}}</p>
<p>{{flight.StartAirport}}</p>
</div>
<div class="inli-cenc">
<div v-show="flight.Stopover == 'false' ? false :true">
<span>经停</span>
<b>{{flight.Stopover}}</b>
</div>
</div>
<div class="inli-cenrt">
<p class="bold">{{flight.EndName}}</p>
<p>{{flight.EndAirport}}</p>
</div>
</div>
<div class="in-yd">
<span>{{flight.SpecialFlightNo}}</span>
<br>
<span>{{cabin_index(flight.Cabin_index) + flight.SpecialCabinCode}}舱</span>
</div>
</div>
<div class="inli-top inli-bot">
<div class="inli-left moneyColor">
<p>
<i class="pointImg"></i>
<i class="bold font200">{{flight.Price}}</i>起</p>
</div>
<a class="book" @click="goOrder(flight)">立即预订</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="dest/js/lib/vue.js"></script>
<script type="text/javascript" src="dest/js/lib/axios.min.js"></script>
<script type="text/javascript" src="dest/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="dest/js/exchange.min.js"></script>
</body>
</html>
js:
var date = "";
var Needlogintype;
var ajaxUrl = '/api/LowPriceAPI/GetLowPriceList?pageIndex=1&pageSize=10&userP=null&date=' + date;
function showTime() {
var show_day = new Array('日', '一', '二', '三', '四', '五', '六');
var time = new Date(new Date(new Date(new Date().toLocaleDateString()).getTime() - 86400000).valueOf()); //获取零点，减去86400000是需求需要
var year = time.getFullYear(); //年
var month = time.getMonth() + 1; //月
var date = time.getDate(); //日
var day = time.getDay(); //星期几
month < 10 ? month = '0' + month : month;
date < 10 ? date = '0' + date : date;
var currentYear = "<div class='left first'><p>" + year + '年' + "</p><p>" + month + '月' + "</p></div>";
//当前日期
var startTime = year + "/" + month + "/" + date;
//第十四天时间戳
//var lastTimeStamp = new Date(startTime).getTime() + 14 * 24 * 60 * 60 * 1000;
//第十四天时间
//var lastTime = new Date(lastTimeStamp);
var canStamp = new Array();
var calendar = new Array();
var dataRule = new Array();
function ifAddMonth(time) {
var obj = {};
if (new Date(time).getTime() == new Date(time).setDate(1)) {
obj.addMonth = "addMonth";
obj.month = new Date(new Date(time).setDate(1)).getMonth() + 1;
obj.year = new Date(new Date(time).setDate(1)).getFullYear()
} else {
obj.addMonth = "";
obj.month = new Date(time).getMonth() + 1;
obj.year = new Date(time).getFullYear();
}
return obj;
}
for (var i = 1; i < 15; i++) {
canStamp[i] = new Date(new Date(startTime).getTime() + i * 24 * 60 * 60 * 1000);
dataRule[i] = canStamp[i].getFullYear() + '/' + (canStamp[i].getMonth() + 1) + '/' + canStamp[i].getDate();
var calday = canStamp[i].getDate();
calday < 10 ? calday = '0' + calday : calday;
calendar[i] = "<li data-rule='" + dataRule[i] + "' class='" + ifAddMonth(canStamp[i]).addMonth + "' data-year = '" + ifAddMonth(canStamp[i]).year + "' data-month='" + ifAddMonth(canStamp[i]).month + "'><p>" + show_day[canStamp[i].getDay()] + "</p><p>" + calday + "</p></li>"
}
$(".nowTime").html(currentYear);
$(".headDate").append(calendar.toString().replace(/,/g, ""));
if (!!$(".addMonth").data()) {
var newYear = $(".addMonth").data("year"),
newMonth = $(".addMonth").data("month");
$(".addMonth").before("<li class='left second' data-year='" + newYear + "'><p>" + newYear + '年' + "</p><p>" + newMonth + '月' + "</p></li>");
}
}
$(function () {
showTime();
var newYear = $(".addMonth").data("year"),
newMonth = $(".addMonth").data("month"),
oldYear = new Date($(".headDate li").eq(0).data("rule")).getFullYear(),
oldMonth = new Date($(".headDate li").eq(0).data("rule")).getMonth() + 1,
startX, startY, moveEndX, moveEndY, X, Y;
$(".headDate").on("touchmove", function (e) {
$(".nowTime").css("position", "fixed")
if (!!$(".second").data("year")) {
if ($(".second").offset().left < 0) {
$(".nowTime").find("p").eq(0).text(newYear + "年").end().eq(1).text(newMonth > 10 ? newMonth : "0" + newMonth + "月");
} else {
$(".nowTime").find("p").eq(0).text(oldYear + "年").end().eq(1).text(oldMonth > 10 ? oldMonth : "0" + oldMonth + "月");
}
}
});
$(".headDate li").click(function () {
var date = $(this).data("rule");
vm.init(date);
})
$(".listBox").on("touchstart", function (e) {
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".listBox").on("touchend", function (e) {
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Y < 0) { //上滑
$(".nowTime").css("position", "static");
} else if (Y > 0) { //下滑
$(".nowTime").css("position", "fixed");
}
})
$(".listBox").on("touchmove", function (e) {
$(".nowTime").css("position", "static");
})
})
function parseUrl(url) {
var pattern = /(\w+)=([^\#&]*)/ig,
parames = {};
url = url || window.location.href;
url.replace(pattern, function (attr, key, value) {
parames[key] = decodeURI(value);
});
return parames;
}
//http://10.66.28.44:8999/api/LowPriceAPI/GetLowPriceList
var vm = new Vue({
el: "#page",
data: {
flightList: {},
isLoading: true,
},
beforeMount() {},
mounted(date) {
this.init(date);
},
methods: {
init(date) {
var _this = this;
var url;
if (date) {
url = '/api/LowPriceAPI/GetLowPriceList?pageIndex=1&pageSize=10&userP=null&date=' + date;
} else {
url = '/api/LowPriceAPI/GetLowPriceList?pageIndex=1&pageSize=10&userP=null'
}
axios.get(url)
.then(function (response) {
if (response) {
_this.flightList = response.data.Data.List || {};
Needlogintype = response.data.Data.Needlogintype || {};
}
})
.finally((res) => {
this.isLoading = false;
$("#page").removeClass("dn")
})
.catch(function (error) {});
},
//点击预定按钮事件
goOrder(data) {
this.goDate(data);
var dataarr = data.split(",");
if (this.isInApp()) {
if (this.deviceType() === "iphone") {
registerOrderInfo(dataarr[0], dataarr[1], dataarr[2], dataarr[3], dataarr[4], dataarr[5], dataarr[6], dataarr[7], dataarr[8], dataarr[9], dataarr[10], dataarr[11], dataarr[12], dataarr[13], dataarr[14], dataarr[15], dataarr[16], dataarr[17]);
} else {
AirportOrder.registerOrderInfo(dataarr[0], dataarr[1], dataarr[2], dataarr[3], dataarr[4], dataarr[5], dataarr[6], dataarr[7], dataarr[8], dataarr[9], dataarr[10], dataarr[11], dataarr[12], dataarr[13], dataarr[14], dataarr[15], dataarr[16], dataarr[17]);
}
} else {
window.location.href = "https://m.ceair.com/mobile/book/flight-search!specialOffers.shtml?flightNo=" + dataarr[12] + "&cabinCode=" + dataarr[13] + "&tripType=" + (dataarr[4] == '1' ? 'OW' : 'RT') + "&deptCode=" + dataarr[0] + "&arrvCode=" + dataarr[1] + "&deptDate=" + dataarr[2].split(" ")[0].split("-").join("") + "&goCodeType=0&productCode=" + dataarr[14] + "&backCodeType=0"
}
},
//日期显示
timeReversal(date) {
var date = date.replace(/-/g, '/');
var t = new Date(date),
m = t.getMonth() + 1,
y = t.getFullYear(),
d = t.getDate(),
day = t.getDay(),
hour = t.getHours(),
minutes = t.getMinutes(),
seconds = t.getSeconds();
var arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
var obj = {
year: y,
month: m < 10 ? "0" + m : m,
date: d < 10 ? "0" + d : d,
day: arr[day],
hour: hour < 10 ? "0" + hour : hour,
minutes: minutes < 10 ? "0" + minutes : minutes,
seconds: seconds < 10 ? "0" + seconds : seconds,
};
obj.fullDate = obj.year + "-" + obj.month + "-" + obj.date;
obj.fullHour = obj.hour + ":" + obj.minutes;
return obj;
},
//点击规则事件
rule() {
$(".rule_show").show();
},
//点击规则关闭事件
shutDown() {
$(".rule_show").hide();
console.log(vm)
},
//拼接点击预定按钮数据
goDate(data) {
const arrData = new Array();
const t = this.timeReversal(data.StarTime);
const t2 = this.timeReversal(data.EndTime);
arrData.push(data.StartCode); //出发机场三字码 index0
arrData.push(data.EndCode); //到达机场三字码 index1
const startdate = t.year + '' + t.month + '' + t.date;
arrData.push(startdate); //出发时间 index2
arrData.push(data.Cabin_index); //舱位 0所有舱 1经济舱 2经济全价舱 3头等舱 4公务舱 index3
arrData.push(data.Triptype); //1单程 2往返，index4
arrData.push(data.Nextorgcode); //返程城市 index5
arrData.push(data.Nextdstcode); //返程城市三字码 index6
arrData.push(data.Nexttripdate); //往返时间，如20150101， index7
arrData.push(data.Flightype); //国内 332 国际，index8
arrData.push(data.IsRMB); //人民币 index9
arrData.push(data.IsB2G.toString()); //版本 index10
arrData.push(Needlogintype); //登录信息 如： FFP会员登录 index11
arrData.push(data.SpecialFlightNo); //去程的航班号 index12
arrData.push(data.SpecialCabinCode); //去程舱位 index13
arrData.push(data.SpecialProductCode); //去程的产品code index14
arrData.push(data.NextSpecialFlightNo); //回程的航班号 index15
arrData.push(data.NextSpecialCabinCode); //回程舱位 index16
arrData.push(data.NextSpecialProductCode); //回程的产品code index17
return arrData.join(',');
},
//舱位显示
cabin_index(e) {
var txt = "";
switch (e) {
case "0":
txt = "所有舱位";
break;
case "1":
txt = "经济舱";
break;
case "2":
txt = "经济全价舱";
break;
case "3":
txt = "头等舱";
break;
case "4":
txt = "公务舱";
break;
default:
txt = "";
};
return txt;
}
},
computed: {
},
filters: {
}
});
less:
@charset "utf-8";
html{
width: 100%;
height: 100%;
font-size: 62.5%;
}
body, html,dl,dd,p,h4,h5{
margin: 0;
padding: 0;
word-break: break-all;
-ms-word-wrap: break-word;
word-wrap: break-word;
line-height: 180%;
}
img{ display: block; max-width: 100%; height: auto;}
li,dd{list-style: none;}
em,h4{font-style:normal; font-weight: normal}
/* Reset */
i{ font-style: normal;}
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
:before,:after{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input:focus{ border: none;}
body{
font-weight: 500;
font-size: 1.4rem;
font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
color: #2e1623;
}
a{text-decoration: none;}
ul,ol{ list-style: none;}
.main {
width: 100%;
height: auto;
overflow: hidden;
background: #F0EFF5;
}
.pointImg{
display: inline-block;
background: url(../images/point.png) no-repeat left center;
background-size: 100% auto;
width: 1rem;
height: 1rem;
}
.font200{
font-size: 2rem;
}
.m05{
margin:0 5%;
}
.text-center{
text-align: center;
}
.bold{
font-size: 125%;
}
.moneyColor{
color: #ff7f00;
}
.center {
width: 94%;
margin: 3% auto;
}
.in-li {
width: 100%;
border: 0.1rem solid #d2d2d5;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
border-radius: 0.5rem;
color: #798CA4;
background: #fff;
margin-bottom: 4%;
}
.inli-top, .inli-cen, .inli-cen .in-mes {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.inli-top, .inli-cen {
border-bottom: 0.1rem dotted #d6d6d6;
}
.inli-cenlt,.inli-cenrt{
text-align: center;
}
.inli-top .inli-left, .inli-cen .in-mes, .in-mes .inli-cenlt, .in-mes .inli-cenc, .in-mes .inli-cenrt ,.more,.book{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.inli-top{
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
.inli-top .inli-left{
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
.text-over {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
}
.inli-left span {
display: inline-block;
border-right: 0.1rem solid #9aa8ba;
padding-right: 2%;
margin-right: 2%;
line-height: 120%;
}
.inli-left .rule, .inli-top b {
color: #5aa5f0;
font-weight: 100;
}
.inli-top b {
white-space: nowrap;
height: 2.1rem;
display: block;
padding-left: 1.5rem;
position: relative;
}
.inli-top b i{
background: url("../images/i.png") no-repeat left center;
background-size: 100% auto;
width: 1.3rem;
height: 1.3rem;
position: absolute;
left: 0;
top: 50%;
margin-top: -.65rem;
}
.inli-left .rule {
text-decoration: underline;
margin-left: 5%;
}
.inli-cen .in-mes {
padding-right: 3%;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
.in-mes span {
font-size: 2rem;
color: #4A586A;
}
.inli-cenc span {
color: #FF7F00;
}
.inli-cenc b {
color: #798CA4;
font-weight: normal;
}
.inli-cenc span, .inli-cenc b {
display: block;
line-height: 2.2rem;
font-size: 1rem;
}
.inli-cenc {
min-height: 1.5rem;
background: url("../images/bg.png") no-repeat center;
text-align: center;
background-size: 60% auto;
height: 4.4rem;
}
.in-yd{
color: #a7b2c1;
}
.in-yd p {
font-size: 1.1rem;
white-space: nowrap;
}
.in-yd p i {
font-size: 1.3rem;
font-weight: 100;
margin-right: 1%;
}
.in-yd p b {
font-size: 1.6rem;
font-weight: 900;
}
.book {
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius:0.5rem;
border-radius: 0.5rem;
width: 4rem;
text-align: center;
height: 2.4rem;
line-height: 2.4rem;
}
.book {
display: inline-block;
font-size: 1.5rem;
color: #fff;
background: #ff9a16;
border-radius: 0.5rem;
}
.moneyColor p{
height: 2.4rem;
line-height: 2.4rem;
}
.inli-bot .more {
color: #798CA4;
border: 0.1rem solid #798CA4;
}
.inli-top, .inli-cen, .inli-bot {
padding: 2% 3%;
}
.inli-bot {
border-bottom: none;
}
#loadStatus {
text-align: center;
line-height: 200%;
color: #999;
}
.rule_pop {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
left: 0;
top: 0;
z-index: 999;
color: #FFF;
}
.rule_pop .rule_content {
padding: 1rem;
}
.head{
width: 100%;
overflow-x: scroll;
position: relative;
height: 5rem;
}
.nowTime{
height: 5rem;
width: 5rem;
float: left;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background-color: #5aa5f0;
color: #fff;
text-align: center;
p{
width: 5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
}
:nth-child(1){
line-height: 3rem;
}
:nth-child(2){
line-height: 2rem;
font-size: 1.8rem;
}
}
.headDate{
display: block;
width:auto;
height: 5rem;
text-align: center;
background-color: #5aa5f0;
word-wrap: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
color: #fff;
padding-left:3%;
padding-right: 3%;
margin: 0 ;
width: 250%;
position: absolute;
left: 5rem;
top: 0;
li{
height: 5rem;
width: 5rem;
display: block;
float: left;
p{
width: 5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
}
:first-child{
line-height: 3rem;
}
:last-child{
font-size:1.8rem;
line-height: 2rem;
}
&.first{
position: fixed;
left: 0;
top: 0;
}
}
.dataClick{
background-color: #fff;
color: #5aa5f0;
}
}
.cover{
position:fixed;
z-index:1000;
left:0;
bottom:0;
right:0;
top:0;
}
.loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation-duration: 1s;
animation-fill-mode: both;
z-index:1200;
}
.loading-img {
margin: 0 auto;
width: 5rem;
height: 6rem;
background: url('../images/penguin.png') no-repeat;
background-size: 100% auto;
}
.loading-animate {
margin: 0 auto;
width: 5rem;
height: 2.5rem;
background: url(data:../images/gif;base64,R0lGODlhZgAbAMQAAOvr69vb29fX19LO0s7O0srGysK+wrq2urKutrKqsqqiqqKepqKaoo6Kko6Gjn11fXVteWlhbV1VYVVNWUk9TUU5STEkNRwMIP///wAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBwAYACwUAAcAPwANAAAFniAmKtVlVoqoruw6LE68DG3NAsKgC8AKlKbgpdKztWCxpGNhrOV00IFABRQGK80VUplkZkXPKHSqsJpT2QF3TcsCxPCf2YrNbteybxi+m5u/eGtffHB+VoCBSoOEUYZCiIkxi4w6VX51TXd4Xk17fAJljmhNapFtTW+UPZZ0XyKaSpxZnlFTGHJmRK6vm7tgnywkV6O+L12nvjhjRRghACH5BAUHABgALBQABwA/AA0AAAWeICYeEWVGh6iu7Go8UvwYbc0GyKIjAVuaQErEZoPFjpIHsZbTORcI1S8IHC5VRuRReRU1n87ogUpOXQ3aNO0aALsDU/Kpm03Lul/3Tk7u2tNdem58VH5/SIGCT4RBhocxiYo6cXJWS3V2XEt5eghjjGZLaI9rS22SPZRBlleYSJpXnE9RIqpCXSuuSbgqslAsJFWhvBgvW6XEOGE9IiEAIfkEBQcAGAAsFAAHAD8ADQAABYogJhYNZDaFqK7smkxWPCVtzZImhLJlnjc2GyxGtEyCtZ5Pp1IumUjVsEg8RkXOJbDwXKaiCaqYFuV2c7jz6ToVy67ZZ7x7dYuv6jw9aqfi9YAmdX1Ef3pzPkBRbW5WSIg/ZmpfSGGEZEiSZymQimx9jlGdTV2eVxiMb6dYpTdKO6sqL1WYsWk6lCEAIfkECQcAGAAsFAAHAD8ADQAABaAgJgbIYiKBqK7sqlRXXCltzR4RpUcHW5rABcJWA8BiyEsFQGzldFBKRPULAodN1TGJrGRVzyh0GrCaU1kFd03LHsTwQ9V8+m7Xsm8YvqObv3hrX3xwflaAgUmDhFGGQYiJMYuMOnN0WE13eF5Ze3wRZY5oTWqRbU1vlD2WQZhZmkmceoxTIqxCXypGm0y5GJ47LCRXo74YL12nxjhjPSIhACH5BAUHABgALBQABwA/AA0AAAWeICYCwmAKgKiu7Fo0UNwUbc0mk6VPCVuawIHAZoPFjpAGsZbTOS0T1S8IHC5VRuRReRU1n84ogEpOXQvaNO2aALsTU/Kpm03Lul/3Tk7u2tNdem58VH5/SIGCT4RBhocxiYo6cXJWS3V2XEt5ehNjjGZLaI9rS22SPZRBlleYSJpXnE9RIqpCXSuuSbgqslAsJFWhvBgvW6XEOGE9IiEAIfkEBQcAGAAsLQAHACYADQAABWUgJgbIYiKBqK7sekRUHB1sad4L0u4qHP+UiMqGu+l4LB/wJwwUnymk6LCsHojPk1SkrMqyzy3GWwUXxeSlGYdO/7DZo7TrjTjXUSnVTYPj5Ft0QEIifjliK4JBLCRGeYhTSjMqIQAh+QQFBwAYACwtAAcAJgANAAAFUyAmFg1kNoWoruxKmhDKljDctLhK17HO17fc7GfDFIi1lHCEhL2avSVmh6Q2pRiolofdeiHdrfUXXI55KK1yeYSmziesCB6dEsvyM964k8ldfWshACH5BAUHABgALBQABwA/AA0AAAWKICYGyGIigaiu7HpEVBwdbc2S5oKyZZ4jNhssRqREgrWeT6dSLplI1bBIPEZFziUw8FymogeqmBbldnO48+k6Fcuu2We8e3WLr+o8PWqn4vWAJnV9RH96cz5AUW1uVkiIP2ZqX0hhhGRIkmcpkIpsfY5RnU1dnlcYjG+nWKU3SjurKi9VmLFpOpQhACH5BAkHABgALBQABwA/AA0AAAWPICYWDWQ2haiu7EqaENrOLCAMuACwJQw3NFrPFwvObrjkQKAaEovG5vMXVSGVSWZh6ktFt1yT1wjAmgHOKTCafq6NV3Mu7KvSYVW5+W6y8/N6SnwQfneAgThtRG9Bij6MNHFyAmBhY0GVXJc0ZYg7jlBVoJBBkkpMIoqkRqpVK6ZLLC8nm66zMbVVNlk7IiEAOw==) no-repeat;
background-size: 100% auto;
}
.rule_show {
background: #000;
opacity: 1;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: none;
overflow: auto;
z-index: 25;
}
.shutDown {
display: block;
width: 2rem;
height: 2rem;
position: absolute;
top:2rem;
right: 1.5rem;
background: url('../images/close.png') no-repeat right 0;
background-size: 2rem 2rem;
}
.rule_show h3 {
font-size: 1.5rem;
width: 100%;
text-align: center;
color: #fff;
margin:1rem 0;
border-bottom: solid 0.2rem #666;
line-height: 4rem
}
.rule_show .txt {
width: 90%!important;
margin:5rem auto;
color: #fff;
font-size: 1rem;
line-height: 2rem!important;
font-weight: normal;
word-wrap: break-word;
}
.rule_show .txt2 {
width: 100%!important;
margin: 0 auto;
color: #fff;
font-size: 1rem;
line-height: 2rem!important;
font-weight: normal;
background: #4c4c4c;
padding:3rem 0 2rem 0;
text-align: center;
}
.dn {
display: none!important;
}
.listBox{
position: absolute;
left: 0;
top: 5rem;
z-index: 99;
width: 100%;
background: #f0eff5;
}
效果图：