first commit
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
.reg-box{width:100%; height:100%; background: url(../../ztmpl/zhiqim_manager/index_bg_00.jpg) no-repeat top center;background-size:auto 100%;}
|
||||
a,a:visited{color:#333;text-decoration:none;cursor:pointer;}
|
||||
a:active,a:hover{color:#1e7eec;text-decoration:none;}
|
||||
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
|
||||
.clear{zoom:1;}
|
||||
|
||||
/****注册 ****/
|
||||
.header{width:100%;background:rgba(255,255,255,.3); filter:alpha(opacity=30); height:40px; line-height:40px; padding:0 0 0 10px; color:#fff; font-size:14px;}
|
||||
.reg-footer{position:fixed;bottom:0px; width:100%;height:40px;background:rgba(255,255,255,0.2);line-height:40px;text-align:center;color:#fff;}
|
||||
.reg-login{width:825px; background:rgba(255,255,255,.3); filter:alpha(opacity=30); border-radius:12px; position: absolute; right:7%; top:50%; margin:-260px 0 0 0;}
|
||||
.p-login{ margin:-210px 0 0 0;}
|
||||
input{background:#fff;color:#86BFE9; width:300px; font-size:14px;border:1px solid #3b8edc;border-radius:5px;height:45px;line-height:45px;text-indent:10px;}
|
||||
.design-logo{float:left; padding:170px 40px 0 40px;}
|
||||
.p-int{ padding:120px 40px 0 40px;}
|
||||
input::-webkit-input-placeholder{color:#86BFE9;}
|
||||
.input-code{ width:192px;}
|
||||
.reg-h{ font-size:20px; color:#fff; padding:0 0 10px 0;}
|
||||
.reg{ float:left; width:450px; border-left:1px solid #fff; padding:0 0 0 50px; margin:30px 0;}
|
||||
.reg-list{ float:left; margin:20px 0 0 0; width:100%;}
|
||||
.reg-list button{ width:100px; float:right; margin:0 12px 0 0; background:#427ae1; border:none; line-height:42px; border-radius:5px; color:#fff; font-size:14px;}
|
||||
.reg-list span{ width:86px; float:left; color:#fff; font-size:14px; line-height:45px;}
|
||||
.reg-btn{ float:left; background:#427ae1; color:#fff; width:180px; line-height:40px; margin:10px 0 0 110px; border:none; border-radius:5px; font-size:14px;}
|
||||
.p-btn{ margin:30px 0 0 110px;}
|
||||
.agree-popup{position: fixed; top:50%; left:50%; width:60%; height:600px; margin:-300px 0 0 -30%; background:#fff; display:none; }
|
||||
.agree-title{ font-size:16px; line-height:48px; border-bottom:1px solid #dfdfdf; color:#666; padding:0 0 0 20px;}
|
||||
.agree-content{ overflow-y:scroll; height:552px;}
|
||||
.agree-title span{float:right; line-height:44px; padding:0 20px; font-size:20px; color:#999; cursor:pointer;}
|
||||
.z-checkbox{ border:2px solid #fff; border-radius:16px; width:18px; height:18px; }
|
||||
.z-checkbox:hover{ border:2px solid #2fb6d4!important;}
|
||||
.z-checkbox.z-active{ background-color:#2fb6d4!important; border:#2fb6d4!important; background-position: 0 -191px;}
|
||||
.reg-check{ text-align:center; font-size:14px; line-height:40px; float:left; width:100%; margin:20px 0 0 0; color:#fff;}
|
||||
.reg-check a{color:#2fb6d4;}
|
||||
.reg-title{ font-size:14px; color:#fff; position: absolute; top:34px; right:30px;}
|
||||
.reg-title a{color:#ffd200;}
|
||||
.agree-content{padding:20px;}
|
||||
.agree-content h2{font-size:18px;}
|
||||
.agree-content p{ font-size:14px; color:#666; line-height:36px;}
|
||||
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
/*瀑布*/
|
||||
.srcFileList{
|
||||
/*
|
||||
-moz-column-count:5;
|
||||
-webkit-column-count:5;
|
||||
column-count:5;
|
||||
-moz-column-gap: 1em;
|
||||
-webkit-column-gap: 1em;
|
||||
column-gap: 1em;
|
||||
*/
|
||||
overflow:hidden;
|
||||
}
|
||||
.srcFileList:before,.srcFileList:after{content:"";display:table;}
|
||||
.srcFileList:after{clear:both;}
|
||||
|
||||
/*一个内容层*/
|
||||
.item{
|
||||
padding: 1em;
|
||||
position:relative;
|
||||
/*
|
||||
-moz-page-break-inside: avoid;
|
||||
-webkit-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
*/
|
||||
width:20%;
|
||||
float:left;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.item>div{
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
.item>div:hover{
|
||||
-webkit-box-shadow: #666 0px 0px 10px;
|
||||
-moz-box-shadow: #666 0px 0px 10px;
|
||||
box-shadow: #666 0px 0px 10px;
|
||||
behavior: url(/PIE.htc);
|
||||
}
|
||||
.item>div>img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.z-tabnav-main>nav span.z-cover{height:35px;line-height:1;}
|
||||
.z-tabnav-main>nav span.z-cover li{height:auto;}
|
||||
|
||||
/** 申请精品 **/
|
||||
.applyEssenceBtn{width:40px;height:130px;right:20px;top:50%;margin-top:-50px;font-size:16px;text-align:center;line-height:20px;background:#1299ec;color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.3);border-radius:5px;cursor:pointer;z-index:999;overflow:hidden;}
|
||||
.applyEssenceBtn:hover{background:#28a3ef}
|
||||
.applyEssenceBtn>span{display:block;}
|
||||
.applyEssenceBtn>span{padding:12px 10px 18px;}
|
||||
.applyEssenceBtn>span:last-child:hover{background:#0b85d0}
|
||||
.applyEssenceBtn>span:first-child,.applyEssenceBtn.active>span:last-child{display:block;}
|
||||
.applyEssenceBtn>span:last-child,.applyEssenceBtn.active>span:first-child{display:none;}
|
||||
.item>.checkBox{display:none;left:0;top:0;background:rgba(255,255,255,.8);background-clip:content-box;padding:1em;}
|
||||
/**
|
||||
.item.selectedItem>.checkBox{display:block;}
|
||||
.item.selectedItem>.checkBox::before{content:"\f00d";font-family:"z-font" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;
|
||||
font-size:30px;position: absolute;left:50%;top:50%;width:30px;height:16px;margin-top:-8px;margin-left:-15px;color:#006400;}
|
||||
**/
|
||||
.item>.checkBox>input{visibility: hidden;}
|
||||
|
||||
/** 悬浮操作按钮 **/
|
||||
.item>div.z-bg-white.z-pointer:hover .itemCtrBar{display:block;}
|
||||
.itemCtrBar{top:0;right:0;bottom:0;left:0;padding:10px;display:none;background:rgba(0,0,0,.3);background-origin:content-box;background-clip:content-box;pointer-events:none;}
|
||||
.itemCtrBar>button,.itemCtrBar>.itemCtrBar-item{pointer-events:auto;}
|
||||
.itemCtrBar>.itemCtrBar-item{width:30px;height:30px;margin:15px;text-align:center;line-height:26px;border-radius:50%;background:#fff;opacity:.9;}
|
||||
.itemCtrBar>.itemCtrBar-item-delete,.selectedItem .itemCtrBar>.itemCtrBar-item-success{display:none;}
|
||||
.selectedItem .itemCtrBar>.itemCtrBar-item-delete{display:block;}
|
||||
|
||||
.selectedItemBar{content:"精品";border-color:transparent transparent #f55 #f55;}
|
||||
|
||||
/** 显示 **/
|
||||
.allItem-info::before{position:absolute;font-size:12px;white-space:nowrap;color:#fff;text-indent:-20px;line-height:15px;bottom:0;border-width:16px 22px;border-style:solid;width:0;height:0;}
|
||||
.allItem-info{width:100%;height:32px;line-height:35px;left:0;bottom:0;color:#fff;background:rgba(0,0,0,.3);text-indent:35px}
|
||||
|
||||
/** 精品显示 **/
|
||||
.bestItem .allItem-info::before{content:"精品";left:0;border-color:transparent transparent #f55 #f55}
|
||||
|
||||
/** 模板显示 **/
|
||||
.modelItem .allItem-info::before{content:"模板";left:0;border-color:transparent transparent #00a2eb #00a2eb;}
|
||||
|
||||
/** 订单显示 **/
|
||||
.orderItem .allItem-info::before{content:"定稿";left:0;border-color:transparent transparent #9e70ca #9e70ca;}
|
||||
|
||||
/** 临时显示 **/
|
||||
.temporaryItem .allItem-info::before{content:"临时";left:0;border-color:transparent transparent #fb53cf #fb53cf;}
|
||||
|
||||
/**我的显示**/
|
||||
.myItem .allItem-info::before{content:"我的";left:0;border-color:transparent transparent #fb53cf #fb53cf;}
|
||||
|
||||
|
||||
|
||||
/** 已选显示 **/
|
||||
.selectedItemBar{right:0;top:0;text-indent:-4px;line-height:15px;border-color:#008b8b #008b8b transparent transparent;display:none;}
|
||||
.selectedItemBar::before{content:"已选";position:relative;top:-14px;}
|
||||
.selectedItem .selectedItemBar{display:block;}
|
||||
|
||||
/** 浮动选择框 **/
|
||||
.fixedDialog{transition:right .6s;}
|
||||
.fixedDialog.z-active{right:0 !important;}
|
||||
.fixedDialog-title{width:36px;padding:10px 3px;font-size:16px;color:#fff;background-clip:padding-box;cursor:pointer;text-align:center;border-top-left-radius:5px;border-bottom-left-radius:5px;border-width:5px 0 5px 5px;border-style:solid;border-color:rgba(0,0,0,.1);}
|
||||
.fixedDialog-content{height:100%;position:relative;background:#fff;border:1px solid #ccc;}
|
||||
.fixedDialog-content ul{width:100%;height:100%;}
|
||||
.fixedDialog-confirm{width:100%;position:absolute;bottom:8px;text-align:center;}
|
||||
.fixedDialog-hiddenBtn{bottom:0;background:#ccc;width:36px;padding:5px 0;text-align:center;color:#fff;cursor:pointer;}
|
||||
|
||||
#fixedDialog_1{height:400px;right:-210px;bottom:100px;}
|
||||
#fixedDialog_content_1{width:220px;padding:5px 5px 45px 5px;}
|
||||
#fixedDialog_content_1 li{float:left;position:relative;width:50%;height:25%;padding:10px;text-align:center;border:1px solid #f5f5f5;}
|
||||
#fixedDialog_content_1 li::before{content:"";display:inline-block;width:0;height:100%;vertical-align:middle;}
|
||||
#fixedDialog_content_1 li>img{}
|
||||
#fixedDialog_content_1 li>.z-delete{position:absolute;width:100%;height:100%;left:0;top:0;padding-top:35px;background:rgba(255,255,255,.5);cursor:pointer;text-align:center;font-size:25px;display:none;}
|
||||
#fixedDialog_content_1 li.z-active:hover>.z-delete{display:block;}
|
||||
|
||||
/** 浮动框订单信息 **/
|
||||
#fixedDialog_2{height:200px;right:-400px;bottom:630px;}
|
||||
#fixedDialog_content_2{width:410px;padding:10px;}
|
||||
#fixedDialog_content_2>ul{overflow:auto;}
|
||||
#fixedDialog_content_2 li{line-height:20px;padding:3px 2px;border-bottom:1px solid #f5f5f5;}
|
||||
@@ -0,0 +1,104 @@
|
||||
.bos{
|
||||
width: 478px;
|
||||
height: 125px;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
color: #666;
|
||||
background-color: #f6f6f6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.bos_son span{
|
||||
display:inline-block
|
||||
}
|
||||
.bos_two{
|
||||
width: 478px;
|
||||
height: 680px;
|
||||
}
|
||||
.bos_two_one{
|
||||
width: 100%;
|
||||
height: 155px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.my-textarea{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text{
|
||||
margin-bottom: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.my_text{
|
||||
display: inline-block;
|
||||
}
|
||||
.btn{
|
||||
display: inline-block;
|
||||
margin-left: 242px;
|
||||
|
||||
}
|
||||
.my_bos_two_one{
|
||||
margin-top: 35px;
|
||||
}
|
||||
.my_btn{
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 30.5%;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.boxs{
|
||||
float: left;
|
||||
width: 515px;
|
||||
}
|
||||
.boxs_two{
|
||||
float: right;
|
||||
/*margin-left: 100px;*/
|
||||
width: 1048px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 65px;
|
||||
}
|
||||
.boxs_two ul li{
|
||||
width:159px;
|
||||
height:100%;
|
||||
text-align: center;
|
||||
line-height: 45px !important;
|
||||
}
|
||||
.boxs_sons{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
border-radius: 2px;
|
||||
color: #666;
|
||||
/* border: 1px solid #dcdcdc;*/
|
||||
border: none;
|
||||
background-color: #ffffff
|
||||
}
|
||||
.my_z-float-right{
|
||||
width: 116px;
|
||||
height: 48px !important;
|
||||
}
|
||||
.mystyle{
|
||||
height: 100% !important;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.mystyle_svg{
|
||||
/* height:945px;*/
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
.boxs_svg{
|
||||
width:1050px;
|
||||
height:950px;
|
||||
}
|
||||
.mybtn_style_one{
|
||||
position: absolute;
|
||||
top:5px;
|
||||
right:10px;
|
||||
}
|
||||
.mybtn_style_two{
|
||||
position: absolute;
|
||||
top:5px;
|
||||
right:115px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
.min-width{min-width:450px;}
|
||||
|
||||
.main{position: relative;}
|
||||
.main .box{padding: 10px 0 0 10px; float: left;}
|
||||
.main .box .pic{padding: 5px; border: 1px solid #CCCCCC;border-radius: 5px; box-shadow: 0 0 5px #ccc;cursor:pointer}
|
||||
.main .box .pic >img{width: 150px; height: auto;}
|
||||
.main .box .pic .cont{width: 150px; height: auto; word-wrap:break-word;}
|
||||
.main .box .pic .z-content{width:auto !important;}
|
||||
|
||||
/*列表*/
|
||||
.list-file{overflow:hidden;}
|
||||
.list-file:before,.list-file:after{content:"";display:table;}
|
||||
.list-file:after{clear:both;}
|
||||
|
||||
/*内容项*/
|
||||
.list-file .item{
|
||||
padding: 5px;
|
||||
position:relative;
|
||||
width:33.3%;
|
||||
float:left;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.list-file .item>div{
|
||||
padding: 3px;
|
||||
background-color: #fff;
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #ccc;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.list-file .item>div:hover{
|
||||
-webkit-box-shadow: #666 0px 0px 10px;
|
||||
-moz-box-shadow: #666 0px 0px 10px;
|
||||
box-shadow: #666 0px 0px 10px;
|
||||
behavior: url(/PIE.htc);
|
||||
}
|
||||
|
||||
.list-file .item>div>img{width: 100%;}
|
||||
|
||||
.list-file .z-content{width:auto !important;}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,112 @@
|
||||
/**************************************************************************************/
|
||||
/* 布局（全局、导航、脚注） */
|
||||
/**************************************************************************************/
|
||||
|
||||
/** [全局定义] */
|
||||
html{overflow-x:auto;}
|
||||
body{background:#f5f5f5;}
|
||||
body,table,td,div{font-size:14px;line-height:120%;}
|
||||
a,a:visited{color:#333;text-decoration:none;cursor:pointer;}
|
||||
a:active,a:hover{color:#2173b2;text-decoration:none;}
|
||||
|
||||
/* [主导航] */
|
||||
.mainnav{position:fixed;top:0px;width:100%;height:76px;border-bottom:1px solid #dadada;background-color:#fff;z-index:9999;}
|
||||
.mainnav .mainnav-wrap{margin:0px auto;max-width:1200px;min-width:1000px;height:75px;}
|
||||
.mainnav .logo{float:left;width:290px;margin-top:8px;}
|
||||
.mainnav .logo-text{float:right;font-size:18px;font-weight:bold;line-height:58px;}
|
||||
.mainnav .menu{float:left; font-size:16px;height:75px;text-align:center;margin:10px 5px 0px 30px;}
|
||||
.mainnav .menu li{float:left; width:80px; line-height:30px; margin:12px 10px;}
|
||||
.mainnav .menu li:hover{border-bottom:2px solid #4bacc6;color:#4bacc6;cursor:pointer;}
|
||||
.mainnav .menu li.active{border-bottom:2px solid #4bacc6;color:#4bacc6;}
|
||||
|
||||
@media screen and (max-width: 1071px) {
|
||||
.mainnav .menu li{margin:12px 5px;}
|
||||
}
|
||||
|
||||
.mainnav .help{float:right;line-height:75px;color:#2173b2;}
|
||||
.mainnav .help a{background-color:#a4132a; color:#ffffff;font-size:16px;border-radius:20px; padding:6px 15px;margin-left:15px;}
|
||||
|
||||
/* [导航固定96px] */
|
||||
.navmargin{position:relative;width:100%;height:96px;}
|
||||
|
||||
.scrolltotop{position:fixed;right:20px;bottom:20px;display:none;z-index:99999;border:1px solid #d3d3d3;padding:10px;cursor:pointer;}
|
||||
.scrolltotop:hover{background-color:#333;}
|
||||
|
||||
/* [脚注] */
|
||||
.footer {position:relative;width:100%;min-width:1200px;z-index:0;display:block;border-top:1px solid #e6e6e6;overflow:hidden;background:#fff;}
|
||||
.footer-wrap {margin:10px auto;height:160px;width:1200px;text-align:center;color:#333;font-size:14px;}
|
||||
.footer li {float:left;height:130px;margin:10px 20px 10px 0;text-align:left;line-height:30px;color:#888;}
|
||||
.footer li a {margin:10px;color:#888;}
|
||||
.footer li a:hover {color:#4bacc6;}
|
||||
.footer li.fproduct{width:180px;margin-left:30px;}
|
||||
.footer li.fhelp{width:222px;}
|
||||
.footer li.fabout{width:190px;}
|
||||
.footer li.abountus {width:300px;}
|
||||
.footer li.fproduct,.footer li.fhelp,.footer li.fabout{border-right:1px dashed #ccc;}
|
||||
|
||||
@media screen and (max-width: 1071px) {
|
||||
.footer li.fproduct{width:140px;}
|
||||
.footer li.fhelp{width:180px;}
|
||||
.footer li.fabout{width:150px;}
|
||||
.footer li.abountus {width:280px;}
|
||||
}
|
||||
|
||||
.footer-cp {position:relative;width:100%;min-width:1200px;height:85px;line-height:85px;background-color:#eee;overflow:hidden;}
|
||||
.footer-cp-wrap{position:relative;margin:0 auto;width:1200px;height:85px;z-index:0;display:block;overflow:hidden;}
|
||||
.footer-cp .footer-text{width:1200px;height:85px;line-height:85px;text-align:center;}
|
||||
@media screen and (max-width: 1071px) {
|
||||
.footer-cp-wrap{width:1000px;}
|
||||
.footer-cp .footer-text{width:1000px;margin-left:-100px;}
|
||||
}
|
||||
|
||||
|
||||
/**************************************************************************************/
|
||||
/* 容器内容 */
|
||||
/**************************************************************************************/
|
||||
|
||||
/** [容器定义] */
|
||||
.container {position:relative;margin:0 auto;padding-bottom:20px;height:auto !important;min-height:1200px;width:1200px;overflow:hidden;z-index:0;}
|
||||
|
||||
/* [左导航] */
|
||||
.sidebar {position:relative;float:left;height:100%;padding-bottom:30px;overflow:hidden;width:220px;background:#fff;border:1px solid #e5e5e5;border-radius:3px;}
|
||||
.sidebar main {position:relative;display:block;width:100%;height:98px;line-height:98px;font-size:16px;text-align:center;color:#333;cursor:pointer;border-bottom:1px solid #f5f5f5;}
|
||||
.sidebar main.selected{color:#007d7e;border:1px solid #e6e6e6;background-color:#eee;}
|
||||
|
||||
.sidebar p{position:relative;padding:0 40px;height:40px;line-height:40px;font-size:16px;color:#333;cursor:pointer;border-bottom:1px solid #eee;}
|
||||
.sidebar p .z-font{position:absolute;font-size:14px;left:15px;bottom:0;}
|
||||
.sidebar ul{position:relative;height:auto;overflow:hidden;line-height:40px;background:#f9f9f9;}
|
||||
.sidebar ul li{display:block;padding:0 40px;line-height:38px;cursor:pointer;font-size:14px;color:#777;border:1px solid transparent;}
|
||||
.sidebar ul li:hover{color:#2173b2;text-decoration:none;}
|
||||
.sidebar p.z-selected,.sidebar ul li.z-selected{color:#fff; background-color:#2173b2;}
|
||||
|
||||
/* [主体部分] */
|
||||
.mainbody{position:relative;float:right;width:960px;background:#fff;border:1px solid #e5e5e5;border-radius:3px;}
|
||||
/* [搜索框]*/
|
||||
.mainsearch{text-align:center;padding:30px 10px;border-bottom:1px solid #f5f5f5;}
|
||||
.mainsearch .z-input{width:600px;font-size:14px;border-color:#2173b2;}
|
||||
.mainsearch .z-button{width:60px;height:38px;margin-left:-1px;font-family:"z-font";font-size:20px;background:#2173b2;border-color:#2173b2;box-shadow:none;color:#fff;}
|
||||
/* [问题显示主体] */
|
||||
.questionbody{padding:20px 40px 80px;}
|
||||
/*文章列表*/
|
||||
.article-list dd{margin:0;font-size:15px;line-height:38px;}
|
||||
/*文章内容*/
|
||||
.article {}
|
||||
.article,.article div{line-height:30px;font-size:15px;}
|
||||
.article h1{font-weight:normal;}
|
||||
|
||||
/* [搜索结果] */
|
||||
.search-resultBar {border-bottom:1px solid #fcfcfc;}
|
||||
.search-resultBar span{display:inline-block;max-width:300px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;vertical-align:top;color:#a4132a;}
|
||||
.search-resultList {}
|
||||
.search-resultList dt{margin:30px 0 10px;}
|
||||
.search-resultList dt a{display:inline-block;font-size:15px;color:#2173b2;line-height:30px;}
|
||||
.search-resultList dt a:hover{text-decoration:underline;color:#a4132a;}
|
||||
.search-resultList dd{margin:0;color:#666;line-height:20px;}
|
||||
|
||||
/**************************************************************************************/
|
||||
/* Mobile配置 */
|
||||
/**************************************************************************************/
|
||||
|
||||
/* [脚注]（Mobile） */
|
||||
.m-footer {position:relative;width:100%;border-top:1px solid #e6e6e6;background-color:#eee;padding:4% 0px;}
|
||||
.m-footer-wrap {width:100%;height:100%;color:#333;text-align:center;font-size:12px;height:28px;line-height:28px;}
|
||||
@@ -0,0 +1,286 @@
|
||||
+(function(Z)
|
||||
{
|
||||
//BEGIN
|
||||
|
||||
Z.SearchAutoList = Z.Class.newInstance();
|
||||
Z.SearchAutoList.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
elem: null, //输入框/输入框盒子ID
|
||||
className: null, //Ajax调用的类名
|
||||
methodName: null, //Ajax调用的类方法
|
||||
history: true, //历史记录显示
|
||||
callback: null //选中后的回调函数
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
this.$elem = Z.$elem(this.elem, "Z.SearchAutoList");
|
||||
this.id = this.$elem.attr("id") || "FSearchAutoList";
|
||||
|
||||
this.width = this.$elem.offsetWidth();
|
||||
var height = this.$elem.offsetHeight();
|
||||
var fontSize = this.$elem.css("fontSize");
|
||||
this.pdLeft = this.$elem.css("paddingLeft");
|
||||
this.pdRight = this.$elem.css("paddingRight");
|
||||
this.lHeight = this.$elem.css("lineHeight");
|
||||
|
||||
this.$cover = Z.$cover(this.$elem);
|
||||
this.$list = Z('<div class="z-absolute z-bg-white z-text-left z-bd z-hide"></div>')
|
||||
.css({width: this.width, left: 0, top: height-1, fontSize: fontSize, zIndex: 99})
|
||||
.appendTo(this.$cover);
|
||||
|
||||
//事件绑定
|
||||
this.$elem.on("focus", this.onFocus, this);
|
||||
this.$elem.on("input", this.onInput, this);
|
||||
this.$elem.keydown(this.onKeyDown, this);
|
||||
Z(document).click(this.onDocClick, this);
|
||||
},
|
||||
|
||||
onFocus: function(e)
|
||||
{//获取焦点事件
|
||||
this.value = Z.S.trim(this.$elem.val());
|
||||
if (Z.V.isEmptyBlank(this.value))
|
||||
{
|
||||
this.doHistoryList();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.beforeValue == this.value)
|
||||
{//内容不改变
|
||||
if (this.$list.html() != "")
|
||||
this.$list.show();
|
||||
}
|
||||
else
|
||||
{//内容已改变
|
||||
this.beforeValue = this.value;
|
||||
this.$list.show();
|
||||
this.doAjax();
|
||||
}
|
||||
},
|
||||
|
||||
onInput: function(e)
|
||||
{//input事件
|
||||
this.value = Z.S.trim(this.$elem.val());
|
||||
if (Z.V.isEmptyBlank(this.value))
|
||||
{
|
||||
this.doHistoryList();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.beforeValue != this.value)
|
||||
{//调用查询
|
||||
this.beforeValue = this.value;
|
||||
this.$list.show();
|
||||
this.doAjax();
|
||||
}
|
||||
},
|
||||
|
||||
//ajax调用，生成列表
|
||||
doAjax: function()
|
||||
{
|
||||
this.ajax = new Z.Ajax();
|
||||
this.ajax._this = this;
|
||||
this.ajax.setClassName(this.className);
|
||||
this.ajax.setMethodName(this.methodName);
|
||||
this.ajax.addParam(this.value);
|
||||
this.ajax.setCallback(function()
|
||||
{
|
||||
var _this = this._this;
|
||||
var titleList = Z.J.toObject(this.responseText);
|
||||
if (titleList.length == 0)
|
||||
{
|
||||
_this.$list.html("").hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<ul>';
|
||||
Z.eachof(_this, titleList, function(item){
|
||||
html += '<li class="z-text-ellipsis" style="width: ' + _this.width + 'px; padding: 2px ' + _this.pdRight + ' 2px ' + _this.pdLeft +'; line-height:'+ _this.lHeight +'; cursor: pointer;">' + item + "</li>";
|
||||
});
|
||||
html += "</ul>";
|
||||
|
||||
_this.$list.html(html);
|
||||
_this.lis = _this.$list.find("li");
|
||||
_this.lis.click(_this.doSelect, _this);
|
||||
_this.lis.mouseenter(_this.onMouseEnter, _this);
|
||||
_this.lis.mouseleave(_this.onMouseLeave, _this);
|
||||
});
|
||||
this.ajax.execute();
|
||||
},
|
||||
|
||||
doSelect: function(e)
|
||||
{//鼠标选中
|
||||
Z.E.forbidden(e);
|
||||
|
||||
this.beforeValue = this.value;
|
||||
this.value = Z(Z.E.target(e)).text();
|
||||
this.$elem.val(this.value);
|
||||
|
||||
this.$list.hide();
|
||||
this.doAjax();
|
||||
|
||||
this.saveHistory(e);
|
||||
this.doCallback(e);
|
||||
},
|
||||
|
||||
onDocClick: function(e)
|
||||
{//空白处点击，隐藏列表
|
||||
var target = Z.E.target(e);
|
||||
if (target == this.$elem[0])
|
||||
return;
|
||||
|
||||
this.$list.hide();
|
||||
if (this.beforeValue != this.value)
|
||||
{//静默调用
|
||||
this.beforeValue = this.value;
|
||||
this.doAjax();
|
||||
}
|
||||
},
|
||||
|
||||
onKeyDown: function(e)
|
||||
{//键盘 “上” “下” “回车”按键监听
|
||||
var keyVal = Z.E.key(e);
|
||||
if (keyVal != Z.E.KEY.UP && keyVal != Z.E.KEY.DOWN && keyVal != Z.E.KEY.ENTER)
|
||||
return;
|
||||
|
||||
Z.E.forbidden(e);
|
||||
if (this.lis)
|
||||
{//有选择列表的搜索框
|
||||
var liSetLength = this.lis.length;
|
||||
var liActive = this.$list.find(".z-bg-gray");
|
||||
var liActiveIndex = -1;
|
||||
var toIndex = null;
|
||||
if (liActive.length != 0)
|
||||
liActiveIndex = Z.EL.parentIndex(liActive[0]);
|
||||
|
||||
switch (keyVal)
|
||||
{
|
||||
case Z.E.KEY.UP://上
|
||||
toIndex = liActiveIndex - 1;
|
||||
if (toIndex <= -1)
|
||||
toIndex = liSetLength - 1;
|
||||
break;
|
||||
case Z.E.KEY.DOWN://下
|
||||
toIndex = liActiveIndex + 1;
|
||||
if (toIndex == liSetLength)
|
||||
toIndex = 0;
|
||||
break;
|
||||
case Z.E.KEY.ENTER://回车选中
|
||||
this.$elem[0].blur();
|
||||
this.$list.hide();
|
||||
this.value = Z.S.trim(this.$elem.val());
|
||||
this.beforeValue = this.value;
|
||||
this.doAjax();
|
||||
this.saveHistory(e);
|
||||
this.doCallback(e);
|
||||
return;
|
||||
}
|
||||
toIndex++;
|
||||
this.lis.removeClass("z-bg-gray");
|
||||
var toLi = this.$list.find("li:nth-child(" + toIndex +")").addClass("z-bg-gray");
|
||||
this.value = toLi.html();
|
||||
this.$elem.val(toLi.html());
|
||||
}
|
||||
else if (keyVal == Z.E.KEY.ENTER)
|
||||
{//直接在输入框回车搜索
|
||||
this.value = Z.S.trim(this.$elem.val());
|
||||
this.beforeValue = this.value;
|
||||
this.doAjax();
|
||||
this.saveHistory(e);
|
||||
this.doCallback(e);
|
||||
}
|
||||
},
|
||||
|
||||
//选中后的回掉函数
|
||||
doCallback: function(e)
|
||||
{
|
||||
if(!this.callback)
|
||||
return;
|
||||
this.callback(e);
|
||||
},
|
||||
|
||||
//历史记录列表展示
|
||||
doHistoryList: function(e)
|
||||
{
|
||||
if (!this.history)
|
||||
return;
|
||||
|
||||
this.$list.html("").hide();
|
||||
if (!localStorage.getItem(this.id))
|
||||
return;
|
||||
|
||||
var htmlStr = '<ul class="z-text-gray">';
|
||||
var hisArr = localStorage.getItem(this.id).split(";");
|
||||
for (var i = 0;i < hisArr.length;i++)
|
||||
{
|
||||
htmlStr += '<li class="z-text-ellipsis" style="width: ' + this.width + 'px; padding: 2px ' + this.pdRight + ' 2px ' + this.pdLeft +'; line-height:'+ this.lHeight +'; cursor: pointer;">'
|
||||
+ hisArr[i] + "</li>";
|
||||
}
|
||||
htmlStr += "</ul>";
|
||||
Z(htmlStr).appendTo(this.$list.show());
|
||||
var hisBar = '<div class="z-bg-blue z-clearfix" style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
|
||||
+ '<span class="z-float-right z-pointer z-deleteBtn">清空历史</span>'
|
||||
+ '</div>';
|
||||
Z(hisBar).appendTo(this.$list.show());
|
||||
//绑定事件
|
||||
this.lis = this.$list.find("li");
|
||||
this.lis.click(this.doSelect,this);
|
||||
this.lis.mouseenter(this.onMouseEnter,this);
|
||||
this.lis.mouseleave(this.onMouseLeave,this);
|
||||
//绑定删除事件
|
||||
var $delBtn = this.$list.find(".z-deleteBtn");
|
||||
$delBtn.click(this.emptyHistory,this);
|
||||
},
|
||||
|
||||
emptyHistory: function(e)
|
||||
{
|
||||
localStorage.removeItem(this.id);
|
||||
},
|
||||
|
||||
//输入完成，存储历史记录
|
||||
saveHistory: function(e)
|
||||
{
|
||||
if (!this.history)
|
||||
return;
|
||||
|
||||
var hisStr = localStorage.getItem(this.id);
|
||||
if (!hisStr)
|
||||
return localStorage.setItem(this.id, this.value);
|
||||
|
||||
var hisArr = hisStr.split(";");
|
||||
hisArr.unshift(this.value);
|
||||
|
||||
//去重
|
||||
var resultArr = [];
|
||||
for(var i = 0; i < hisArr.length; i++)
|
||||
{
|
||||
if(!Z.AR.contains(resultArr, hisArr[i]))
|
||||
resultArr.push(hisArr[i]);
|
||||
}
|
||||
|
||||
//限制个数
|
||||
if (resultArr.length > 10)
|
||||
resultArr.length = 10;
|
||||
|
||||
hisStr = resultArr.join(";");
|
||||
localStorage.setItem(this.id, hisStr);
|
||||
},
|
||||
|
||||
//鼠标悬浮，背景颜色变化
|
||||
onMouseEnter: function(e)
|
||||
{
|
||||
var $thisLi = Z(Z.E.target(e));
|
||||
$thisLi.addClass("z-bg-gray");
|
||||
},
|
||||
|
||||
onMouseLeave: function(e)
|
||||
{
|
||||
var $thisLi = Z(Z.E.target(e));
|
||||
$thisLi.removeClass("z-bg-gray");
|
||||
}
|
||||
}
|
||||
|
||||
//END
|
||||
})(zhiqim)
|
||||
Reference in New Issue
Block a user