Bläddra i källkod

Default Changelist

syyang 2 år sedan
förälder
incheckning
561d2190e8

+ 125 - 0
mybusiness/src/main/resources/templates/appxhn/chaitamh.html

@@ -9,6 +9,8 @@
 		<title>拆TA盲盒</title>
 		<title>拆TA盲盒</title>
 		<link th:href="@{/tuodanweb/css/main.css}" rel="stylesheet" />
 		<link th:href="@{/tuodanweb/css/main.css}" rel="stylesheet" />
 		<script th:src="@{/tuodanweb/js/jquery.min.js}" type="text/javascript"></script>
 		<script th:src="@{/tuodanweb/js/jquery.min.js}" type="text/javascript"></script>
+		<script type="text/javascript" th:src="@{/tuodanweb/js/iscroll.js}"></script>
+		<script type="text/javascript" th:src="@{/tuodanweb/js/navbarscroll.js}"></script>
 	</head>
 	</head>
 	<body>
 	<body>
 		<div class="container wid_con2" th:object="${user}">
 		<div class="container wid_con2" th:object="${user}">
@@ -138,6 +140,79 @@
 				<h4>微信号</h4>
 				<h4>微信号</h4>
 				<p class="ctmh_p" id="wechat_code" onclick="openBox()">拆开后可见</p>
 				<p class="ctmh_p" id="wechat_code" onclick="openBox()">拆开后可见</p>
 			</div>
 			</div>
+
+			<div class="stlw">
+				<div class="lw_top">
+					<i><img th:src="@{/tuodanweb/images/ctmh_lw.png}"/></i>
+				</div>
+				<h2>请选择一份礼物</h2>
+				<div class="lw_bg">
+					<div class="lw_con wrapper" id="sass">
+						<div class="scroller">
+							<ul>
+								<li class="lw_div">
+									<a>
+										<div class="lw_img">
+											<img th:src="@{/tuodanweb/images/ctmh_xh.png}" />
+										</div>
+										<h5>鲜花</h5>
+										<div class="lw_txt">
+											<div class="buymain_body_son">
+												<input class="min buymain_body_btn" name="" type="button" value="-" />
+												<input class="text_box buymain_body_num" name="" type="number" value=""
+													   placeholder="0" />
+												<input class="add buymain_body_btn" name="" type="button" value="+" />
+											</div>
+											<div class="lw_jf price">5积分</div>
+										</div>
+
+									</a>
+								</li>
+								<li class="lw_div">
+									<a>
+										<div class="lw_img">
+											<img th:src="@{/tuodanweb/images/ctmh_dg.png}" />
+										</div>
+										<h5>蛋糕</h5>
+										<div class="lw_txt">
+											<div class="buymain_body_son">
+												<input class="min buymain_body_btn" name="" type="button" value="-" />
+												<input class="text_box buymain_body_num" name="" type="number" value=""
+													   placeholder="0" />
+												<input class="add buymain_body_btn" name="" type="button" value="+" />
+											</div>
+											<div class="lw_jf price">5积分</div>
+										</div>
+									</a>
+								</li>
+								<li class="lw_div">
+									<a>
+										<div class="lw_img">
+											<img th:src="@{/tuodanweb/images/ctmh_dg.png}" />
+										</div>
+										<h5>鲜花</h5>
+										<div class="lw_txt">
+											<div class="buymain_body_son">
+												<input class="min buymain_body_btn" name="" type="button" value="-" />
+												<input class="text_box buymain_body_num" name="" type="number" value=""
+													   placeholder="0" />
+												<input class="add buymain_body_btn" name="" type="button" value="+" />
+											</div>
+											<div class="lw_jf price">5积分</div>
+										</div>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="lw_sf">
+						<p>消费:<label id="total"></label>积分</p>
+						<input type="button" value="购买" />
+					</div>
+
+				</div>
+			</div>
+
 			<div style="display: none;" id="gift">
 			<div style="display: none;" id="gift">
 				<div th:each="gift : ${giftList}">
 				<div th:each="gift : ${giftList}">
 					<img th:src="${gift.giftPath}" style="width: 10%">
 					<img th:src="${gift.giftPath}" style="width: 10%">
@@ -168,6 +243,56 @@
 					}
 					}
 				})
 				})
                 getOpenBlindBox();
                 getOpenBlindBox();
+
+                // 送礼
+                $('.wrapper').navbarscroll();
+                // 加减
+                $(".add").click(function() {
+                    var t = $(this).parent().find('input[class*=text_box]');
+                    if (t.val() == "" || undefined || null) {
+                        t.val(0);
+                    }
+                    t.val(parseInt(t.val()) + 1)
+                    setTotal();
+                })
+                $(".min").click(function() {
+                    var t = $(this).parent().find('input[class*=text_box]');
+                    if (t.val() == "" || undefined || null) {
+                        t.val(0);
+                    }
+                    t.val(parseInt(t.val()) - 1)
+                    if (parseInt(t.val()) < 0) {
+                        t.val(0);
+                    }
+                    setTotal();
+                })
+                $(".text_box").keyup(function() {
+                    var t = $(this).parent().find('input[class*=text_box]');
+                    if (parseInt(t.val()) == "" || undefined || null || isNaN(t.val())) {
+                        t.val(0);
+                    }
+                    setTotal();
+                })
+
+                function setTotal() {
+                    var s = 0;
+                    $("#sass li").each(function() {
+                        var t = $(this).find('.buymain_body_num').val();
+                        console.log(t);
+                        var p = $(this).find('.price').text();
+                        if (parseInt(t) == "" || undefined || null || isNaN(t) || isNaN(parseInt(t))) {
+                            t = 0;
+                        }
+                        s += parseInt(t) * parseFloat(p);
+                        console.log(p);
+                    });
+                    $("#total").html(s.toFixed(0));
+                }
+                setTotal();
+
+
+
+
 			});
 			});
 
 
             /**
             /**

+ 3 - 3
mybusiness/src/main/resources/templates/appxhn/index.html

@@ -55,7 +55,7 @@
 				<div id="userTable">
 				<div id="userTable">
 					<div th:each="user : ${userList.list}">
 					<div th:each="user : ${userList.list}">
 						<th:block th:if="${user.sex == '1'}">
 						<th:block th:if="${user.sex == '1'}">
-							<div class="mh_div rz nan vip" th:onclick="lookChaitamh([[${user.openid}]])">
+							<div class="mh_div nan vip" th:onclick="lookChaitamh([[${user.openid}]])">
 								<!--<i class="rz_i">颜值认证</i>-->
 								<!--<i class="rz_i">颜值认证</i>-->
 								<div class="mh_img fl"></div>
 								<div class="mh_img fl"></div>
 								<div class="mh_txt fl">
 								<div class="mh_txt fl">
@@ -71,7 +71,7 @@
 							</div>
 							</div>
 						</th:block>
 						</th:block>
 						<th:block th:if="${user.sex == '2'}">
 						<th:block th:if="${user.sex == '2'}">
-							<div class="mh_div rz nv vip" th:onclick="lookChaitamh([[${user.openid}]])">
+							<div class="mh_div nv vip" th:onclick="lookChaitamh([[${user.openid}]])">
 								<!--<i class="rz_i">颜值认证</i>-->
 								<!--<i class="rz_i">颜值认证</i>-->
 								<div class="mh_img fl"></div>
 								<div class="mh_img fl"></div>
 								<div class="mh_txt fl">
 								<div class="mh_txt fl">
@@ -298,7 +298,7 @@
 					<i class="ye_icon"></i>
 					<i class="ye_icon"></i>
 					<div>
 					<div>
 						<span>余额:[[*{memberMoney}]]</span>
 						<span>余额:[[*{memberMoney}]]</span>
-						<span>积分:<p id="jf">[[*{memberIntegral}]]</p></span>
+						<span>积分:<u id="jf">[[*{memberIntegral}]]</u></span>
 					</div>
 					</div>
 				</div>
 				</div>
 				<div class="grzx_it">
 				<div class="grzx_it">

+ 9 - 7
mybusiness/src/main/resources/templates/appxhn/kefu.html

@@ -12,16 +12,18 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div class="container wid_con2">
+		<div class="container wid_con">
 			<div class="yjtx_list">
 			<div class="yjtx_list">
-				<h1>客服列表</h1>
-				<div class="tx_li" th:each="kefu : ${kefu}">
+				<div class="kf_li" th:each="kefu : ${kefu}">
 					<img th:src="*{kefu.avatar}"/>
 					<img th:src="*{kefu.avatar}"/>
-					<h4>[[${kefu.userName}]]</h4>
-					<div class="tx_txt">
-						<p>邮箱:[[${kefu.email}]]</p>
-						<span>电话:[[${kefu.phonenumber}]]</span>
+					<div class="kf_div">
+						<h4>[[${kefu.userName}]]</h4>
+						<div class="tx_txt">
+							<p>邮箱:[[${kefu.email}]]</p>
+							<span>电话:[[${kefu.phonenumber}]]</span>
+						</div>
 					</div>
 					</div>
+
 				</div>
 				</div>
 			</div>
 			</div>
 		</div>
 		</div>

+ 2 - 1
mybusiness/src/main/resources/templates/appxhn/qidongye.html

@@ -30,7 +30,8 @@
             data: {
             data: {
                 APPID: "wx19ac981693d1a79a",
                 APPID: "wx19ac981693d1a79a",
                 APPSECRET: "cc7d798b4ce862979bb8f1571ef8be2b",
                 APPSECRET: "cc7d798b4ce862979bb8f1571ef8be2b",
-                homeUrl: "http://qiyerenzibao.com/xhn/register",//通过微信认证后的回调地址
+                // homeUrl: "http://qiyerenzibao.com/xhn/register",//通过微信认证后的回调地址
+                homeUrl: "http://9e7xvv.natappfree.cc/xhn/register",//通过微信认证后的回调地址
                 promoter: '',
                 promoter: '',
             },
             },
             created() {//   页面加载时触发方法
             created() {//   页面加载时触发方法

+ 7 - 0
ruoyi-admin/src/main/resources/static/tuodanweb/css/jbxx.css

@@ -699,3 +699,10 @@ input,textarea{
 	}
 	}
 
 
 
 
+.k{
+    width: 100%;
+    padding: 1rem 2rem;
+    font-size: 1.5rem;
+    border: solid 1px #efeeee;
+    background: transparent;
+}

+ 263 - 21
ruoyi-admin/src/main/resources/static/tuodanweb/css/main.css

@@ -232,7 +232,7 @@ textarea{
 	width: 100%;
 	width: 100%;
 	height: 45px;
 	height: 45px;
 	line-height: 45px;
 	line-height: 45px;
-	background: #e8e8e8;
+	background: #f5f5f5;
 	border: 0;
 	border: 0;
 	border-radius: 8px;
 	border-radius: 8px;
 	padding: 0.2% 5%;
 	padding: 0.2% 5%;
@@ -248,7 +248,7 @@ textarea{
 	font-size: 1.4rem;
 	font-size: 1.4rem;
 	right: 0px;
 	right: 0px;
 	width: 70px;
 	width: 70px;
-	border-left: 1px solid #ccc;
+	border-left: 1px solid #e6e6e6;
 	border-right: 0px;
 	border-right: 0px;
 	border-top: 0px;
 	border-top: 0px;
 	border-bottom: 0px;
 	border-bottom: 0px;
@@ -260,23 +260,23 @@ textarea{
 	height: 40px;
 	height: 40px;
 }
 }
 .index_tit span{
 .index_tit span{
-	font-size: 1.4rem;
+	font-size: 1.6rem;
 	color: #2a2a2a;
 	color: #2a2a2a;
 	margin-right: 20px;
 	margin-right: 20px;
 	font-weight: 900;
 	font-weight: 900;
 }
 }
 .index_tit span.on{
 .index_tit span.on{
-	font-size: 1.6rem;
+	font-size: 1.8rem;
 	color: #333;
 	color: #333;
 	position: relative;
 	position: relative;
 }
 }
 .index_tit span.on:before{
 .index_tit span.on:before{
 	content: "";
 	content: "";
 	    position: absolute;
 	    position: absolute;
-	    left: 24px;
-	    bottom: 1px;
-	    width: 45px;
-	    height: 8px;
+	  right: -0.5rem;
+	      bottom: 1px;
+	      width: 3rem;
+	      height: 8px;
 	    background: linear-gradient(to right, #d77ef5 , #a5a5f7);
 	    background: linear-gradient(to right, #d77ef5 , #a5a5f7);
 	    border-radius: 50px;
 	    border-radius: 50px;
 	    z-index: -1;
 	    z-index: -1;
@@ -356,8 +356,8 @@ textarea{
 	margin-right: 8px;
 	margin-right: 8px;
 }
 }
 .mh_txt .tit i{
 .mh_txt .tit i{
-	width: 25px;
-	height: 25px;
+	width: 18px;
+	height: 18px;
 	display: inline-block;
 	display: inline-block;
 	margin-right: 8px;
 	margin-right: 8px;
 }
 }
@@ -475,7 +475,18 @@ textarea{
 	background: #00d88f;
 	background: #00d88f;
 	color: #fff;
 	color: #fff;
 }
 }
-
+#ewm{
+	position: fixed;
+	z-index: 999;
+	top: 50%;
+	left: 50%;
+	margin-top: -150px;
+	margin-left: -150px;
+	width: 300px;
+	box-shadow: 0 0 15px #e0e0e0;
+	height: 300px;
+	border: 1px solid #ccc;
+}
 
 
 /* 盲盒抽选 */
 /* 盲盒抽选 */
 .mh_banner{
 .mh_banner{
@@ -489,6 +500,9 @@ textarea{
 	background: url("../images/right.png") no-repeat right center;
 	background: url("../images/right.png") no-repeat right center;
 	background-size: 23px;
 	background-size: 23px;
 }
 }
+.mhcx_form label span{
+	font-size: 1.4rem;
+}
 .mhcx_form label button{
 .mhcx_form label button{
 	float: right;
 	float: right;
 	padding-right: 30px;
 	padding-right: 30px;
@@ -528,14 +542,14 @@ textarea{
 	padding: 0px 0px 60px 0px!important;
 	padding: 0px 0px 60px 0px!important;
 	width: 100%;
 	width: 100%;
 	background: #f6f6f6;
 	background: #f6f6f6;
-	height: 100vh;
+	min-height: 100vh;
 }
 }
 .top_bg{
 .top_bg{
 	width: 100%;
 	width: 100%;
 	background: url("../images/grzx_02.png") no-repeat top center;
 	background: url("../images/grzx_02.png") no-repeat top center;
 	display: flex;
 	display: flex;
 	flex-direction: row;
 	flex-direction: row;
-	padding: 7% 4% 7% 8%;
+	padding: 7% 2% 7% 8%;
 	justify-content: space-between;
 	justify-content: space-between;
 	position: relative;
 	position: relative;
 	height: 24rem;
 	height: 24rem;
@@ -605,10 +619,12 @@ textarea{
 }
 }
 .grzx_ye span{
 .grzx_ye span{
 	line-height: 19px;
 	line-height: 19px;
-	height: 19px;
-	font-size: 1.2rem;
+	font-size: 1rem;
 	color: #333;
 	color: #333;
 }
 }
+.grzx_ye span u{
+	text-decoration: none;
+}
 .grzx_it{
 .grzx_it{
 	position: absolute;
 	position: absolute;
 	display: flex;
 	display: flex;
@@ -942,6 +958,8 @@ textarea{
 	margin: 0px!important;
 	margin: 0px!important;
 	padding: 0px 0px 0px 0px!important;
 	padding: 0px 0px 0px 0px!important;
 	width: 100%;
 	width: 100%;
+	height: 100vh;
+	background: #ec7d50;
 }
 }
 .qd_btn{
 .qd_btn{
 	position: fixed;
 	position: fixed;
@@ -976,6 +994,11 @@ textarea{
 	align-items: center;
 	align-items: center;
 	padding-top: 3rem;
 	padding-top: 3rem;
 }
 }
+.ctmh_bg .ctmh{
+	flex-direction: column;
+	display: flex;
+	align-items: center;
+}
 .ctmh_bg .ctmh i{
 .ctmh_bg .ctmh i{
 	display: block;
 	display: block;
 	width: 90px;
 	width: 90px;
@@ -1189,7 +1212,204 @@ margin: 0px auto;
 	color: #fff;
 	color: #fff;
 	border-radius: 5px;
 	border-radius: 5px;
 	padding: 15px 20px;
 	padding: 15px 20px;
-	background: linear-gradient(to right, #f7aaea , #6150bf);
+	background: linear-gradient(to right, #f999e8 , #61d9fd);
+	text-align: center;
+}
+
+/* ---送礼 */
+.stlw {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.lw_top {
+	padding: 1rem;
+	background: #fff;
+	border-radius: 50%;
+	z-index: 9;
+}
+
+.lw_top i {
+	width: 45px;
+	height: 45px;
+	background: #f5f5f5;
+	display: flex;
+	border-radius: 50%;
+}
+
+.lw_top i img {
+	width: 100%;
+	height: 100%;
+}
+
+.lw_bg {
+	width: 94%;
+	background: #fff;
+	z-index: 1;
+	padding: 15px 20px;
+	display: flex;
+	border-radius: 10px;
+	box-shadow: 0px 0px 7px #f7e3fb;
+	margin-top: -6rem;
+	display: flex;
+	flex-direction: column;
+}
+.lw_con{
+	display: flex;
+	flex-direction: column;
+}
+.stlw h2{
+	padding: 1rem 0rem 0rem 1rem;
+	font-size: 1.6rem;
+	color: #333;
+	text-align: left;
+	z-index: 9;
+}
+.lw_div{
+	display: flex;
+	flex-direction: column;
+}
+.lw_div .lw_img{
+	width: 12rem;
+	height: 11rem;
+}
+.lw_div .lw_img img{
+	width: 100%;
+	height: 100%;
+}
+.lw_div h5{
+	font-size: 1.4rem;
+	color: #333;
+	text-align:left;
+	padding-bottom: 0.5rem;
+}
+.lw_txt{
+	display: flex;
+	flex-direction:row;
+	justify-content: space-between;
+	padding: 0.5rem 0rem;
+}
+.lw_jf{
+	color: #333;
+
+}
+.lw_sf{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+.lw_sf p{
+	font-size: 1.4rem;
+}
+#total{
+	font-size: 1.6rem;
+	padding-right: 5px;
+	color: #f35484;
+	font-weight: 900;
+}
+
+.lw_sf input{
+	padding: 0.5rem 1.5rem;
+	border: 0px;
+	background: #fd78a0;
+	color: #fff;
+	font-size: 1.4rem;
+	border-radius: 5px;
+}
+.wrapper {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+	margin: 0 auto;
+	padding-top: 2rem;
+	height: 26rem;
+}
+
+.wrapper .scroller {
+	position: absolute;
+	top: 6rem;
+}
+.wrapper .scroller ul{
+	display: flex;
+	flex-direction: row;
+}
+
+.wrapper .scroller li a{
+	/* height: 5rem; */
+	color: #333;
+	/* float: left; */
+	font-size: .4rem;
+	text-align: center;
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	padding: 1rem 1rem;
+	margin: 0px 10px;
+}
+
+.wrapper .scroller li a {
+	color: #333;
+	display: block;
+	margin: 0 .3rem
+}
+
+.wrapper .scroller li.cur a{
+	background: #f6f6f6;
+	border: 1px solid #fd78a0;
+}
+
+.wrapper .scroller li.cur a {
+	color: #fff;
+}
+.buymain_body_son {
+	display: flex;
+	flex-direction: row;
+	/* margin-top: 4vw; */
+}
+
+.buymain_body_son_left {
+	display: flex;
+	font-size: 1.4rem;
+	letter-spacing: 1px;
+	text-shadow: 0 0 0 #777;
+	align-items: center;
+	color: #fff;
+}
+.buymain_body_num::placeholder{
+	color: #fff;
+}
+.buymain_body_son_right {
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+	justify-content: flex-end;
+	align-items: center;
+}
+.buymain_body_btn {
+	font-size: 1.4rem;
+	background-color: #ffa1bd;
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 1vw;
+	padding: 0 1.5vw;
+	border-radius: 4px;
+	border: 0px;
+}
+.buymain_body_num {
+	font-size: 1.4rem;
+	background-color: #ffa1bd;
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 1vw;
+	padding: 0vw 1.5vw;
+	border: 0px;
+	border-radius: 4px;
+	width: 30px;
 	text-align: center;
 	text-align: center;
 }
 }
 
 
@@ -1369,13 +1589,35 @@ margin: 0px auto;
 	color: #999;
 	color: #999;
 }
 }
 
 
+/*客服*/
+.kf_li{
+	display: flex;
+	flex-direction: row;
+	padding: 0.5rem 0rem;
+}
+.kf_li img{
+	width: 5rem;
+	height: 5rem;
+	border-radius: 50%;
+	background: #ccc;
+	margin-right: 10px;
+}
+.kf_div h4{
+	font-size: 1.4rem;
+	color: #333;
+	font-weight: 900;
+}
+.kf_div .tx_txt{
+	font-size: 1.2rem;
+	color: #666;
+}
 
 
 @media screen and (max-width: 414px) {
 @media screen and (max-width: 414px) {
  .mh_txt {
  .mh_txt {
      width: 76%;
      width: 76%;
  }
  }
  .qd_btn {
  .qd_btn {
-     bottom: 1%;
+     bottom: 10%;
  }
  }
 }
 }
 @media screen and (max-width: 375px) {
 @media screen and (max-width: 375px) {
@@ -1383,22 +1625,22 @@ margin: 0px auto;
      width: 74%;
      width: 74%;
  }
  }
  .qd_btn {
  .qd_btn {
-     bottom: 17%;
+     bottom: 26%;
  }
  }
 }
 }
 @media screen and (max-width: 375px) and (max-height:667px) {
 @media screen and (max-width: 375px) and (max-height:667px) {
  .qd_btn {
  .qd_btn {
-     bottom: 0%;
+     bottom: 9%;
  }
  }
 }
 }
 @media screen and (max-width: 411px) and (max-height:823px) {
 @media screen and (max-width: 411px) and (max-height:823px) {
  .qd_btn {
  .qd_btn {
-     bottom: 12%;
+     bottom: 20%;
  }
  }
 }
 }
 @media screen and (max-height: 731px) and (max-width: 411px){
 @media screen and (max-height: 731px) and (max-width: 411px){
 .qd_btn {
 .qd_btn {
-    bottom: 1%;
+    bottom: 9%;
 }
 }
 }
 }
 
 

BIN
ruoyi-admin/src/main/resources/static/tuodanweb/images/ctmh_dg.png


BIN
ruoyi-admin/src/main/resources/static/tuodanweb/images/ctmh_lw.png


BIN
ruoyi-admin/src/main/resources/static/tuodanweb/images/ctmh_xh.png


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 2121 - 0
ruoyi-admin/src/main/resources/static/tuodanweb/js/iscroll.js


+ 89 - 0
ruoyi-admin/src/main/resources/static/tuodanweb/js/navbarscroll.js

@@ -0,0 +1,89 @@
+/*
+ * 移动端模拟导航可点击自动滑动 0.1.4
+ * Date: 2017-01-11
+ * by: xiewei
+ * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围【依赖于iscroll.js】
+ */
+(function ($) {
+    $.fn.navbarscroll = function (options) {
+        //各种属性、参数
+        var _defaults = {
+            className:'cur', //当前选中点击元素的class类名
+            clickScrollTime:300, //点击后滑动时间
+            duibiScreenWidth:0.4, //单位以rem为准,默认为0.4rem
+            scrollerWidth:3, //单位以px为准,默认为3,[仅用于特殊情况:外层宽度因为小数点造成的不精准情况]
+            defaultSelect:0, //初始选中第n个,默认第0个
+            fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致,方可用此项
+            endClickScroll:function(thisObj){}//回调函数
+        }
+        var _opt = $.extend(_defaults, options);
+        this.each(function () {
+            //插件实现代码
+            var _wrapper = $(this);
+            var _win = $(window);
+            var _win_width = _win.width(),_wrapper_width = _wrapper.width(),_wrapper_off_left = _wrapper.offset().left;
+            var _wrapper_off_right=_win_width-_wrapper_off_left-_wrapper_width;
+            var _obj_scroller = _wrapper.children('.scroller');
+            var _obj_ul = _obj_scroller.children('ul');
+            var _obj_li = _obj_ul.children('li');
+            var _scroller_w = 0;
+            _obj_li.css({"margin-left":"0","margin-right":"0"});
+            for (var i = 0; i < _obj_li.length; i++) {
+                _scroller_w += _obj_li[i].offsetWidth;
+            }
+            _obj_scroller.width(_scroller_w+_opt.scrollerWidth);
+            var myScroll = new IScroll('#'+_wrapper.attr('id'), {
+                eventPassthrough: true,
+                scrollX: true,
+                scrollY: false,
+                preventDefault: false
+            });
+            _init(_obj_li.eq(_opt.defaultSelect));
+            _obj_li.click(function(){
+                _init($(this));
+            });
+			//解决PC端谷歌浏览器模拟的手机屏幕出现莫名的卡顿现象,滑动时禁止默认事件(2017-01-11)
+			_wrapper[0].addEventListener('touchmove',function (e){e.preventDefault();},false);
+            function _init(thiObj){
+                var $this_obj=thiObj;
+                var duibi=_opt.duibiScreenWidth*_win_width/10,this_index=$this_obj.index(),this_off_left=$this_obj.offset().left,this_pos_left=$this_obj.position().left,this_width=$this_obj.width(),this_prev_width=$this_obj.prev('li').width(),this_next_width=$this_obj.next('li').width();
+                var this_off_right=_win_width-this_off_left-this_width;
+                if(_scroller_w+2>_wrapper_width){
+                    if(_opt.fingerClick==1){
+                        if(this_index==1){
+                            myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
+                        }else if(this_index==0){
+                            myScroll.scrollTo(-this_pos_left,0, _opt.clickScrollTime);
+                        }else if(this_index==_obj_li.length-2){
+                            myScroll.scrollBy(this_off_right-_wrapper_off_right-this_width,0, _opt.clickScrollTime);
+                        }else if(this_index==_obj_li.length-1){
+                            myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
+                        }else{
+                            if(this_off_left-_wrapper_off_left-(this_width*_opt.fingerClick)<duibi){
+                                myScroll.scrollTo(-this_pos_left+this_prev_width+(this_width*_opt.fingerClick),0, _opt.clickScrollTime);
+                            }else if(this_off_right-_wrapper_off_right-(this_width*_opt.fingerClick)<duibi){
+                                myScroll.scrollBy(this_off_right-this_next_width-_wrapper_off_right-(this_width*_opt.fingerClick),0, _opt.clickScrollTime);
+                            }
+                        }
+                    }else{
+                        if(this_index==1){
+                            myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
+                        }else if(this_index==_obj_li.length-1){
+                            if(this_off_right-_wrapper_off_right>1||this_off_right-_wrapper_off_right<-1){
+                                myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
+                            }
+                        }else{
+                            if(this_off_left-_wrapper_off_left<duibi){
+                                myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
+                            }else if(this_off_right-_wrapper_off_right<duibi){
+                                myScroll.scrollBy(this_off_right-this_next_width-_wrapper_off_right,0, _opt.clickScrollTime);
+                            }
+                        }
+                    }
+                }
+                $this_obj.addClass(_opt.className).siblings('li').removeClass(_opt.className);
+                _opt.endClickScroll.call(this,$this_obj);
+            }
+        });
+    };
+})(jQuery);