第二个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;
}

效果图:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值