zhaobao 1 éve
szülő
commit
4e9fd7793c
3 módosított fájl, 229 hozzáadás és 3 törlés
  1. 162 1
      css/common.css
  2. BIN
      images/index/click.gif
  3. 67 2
      index.html

+ 162 - 1
css/common.css

@@ -1001,4 +1001,165 @@ a:hover {
 .pagess ul li.thisclass {display: inline-block;border: 1px solid #ccc;padding: 2px 9px;margin: 0 3px;background: #ccc;color: #fff;}
 .pagess ul li.thisclass a {color: #fff;}
 .pagess ul li a{ display:block;color:#999}
-.pagess ul li a:hover {color: #fff;}
+.pagess ul li a:hover {color: #fff;}
+
+
+
+/* 联系我们 */
+.contcat-form-container{
+	width: 340px;
+	max-width: 90%;
+	background-color: #fff;
+	position: fixed;
+	left: 50%;
+	top: 150px;
+	z-index: 9999;
+	transform: translateX(-50%);
+	box-shadow: 1px 4px 4px rgba(0,0,0,.6);
+	border-radius: 20px;
+	display: none;
+}
+.contcat-form{
+	padding: 20px;
+	background-color: #fff;
+	position: relative;
+}
+.contcat-form .close{
+	width: 20px;
+	height: 20px;
+	border: 1px solid #666;
+	color: #666;
+	text-align: center;
+	line-height: 20px;
+	border-radius: 50%;
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	cursor: pointer;
+}
+.form-item{
+	margin-bottom: 10px;
+}
+.form-item .lable{
+	padding-bottom: 10px;
+}
+.form-item .form-item-cont input{
+	-webkit-appearance: none;
+    background-color: #fff;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    font-size: inherit;
+    height: 40px;
+    line-height: 40px;
+    outline: none;
+    padding: 0 15px;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+    width: 100%;
+}
+.contcatSubmit{
+	width: 100%;
+	display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 4px;
+	color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
+}
+/* 点击体验 */
+.word-scratchy .clickbt{
+	display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 10px 15px;
+    font-size: 14px;
+    border-radius: 4px;
+	color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
+
+}
+.word-scratchy{ 
+	color: #333;
+    font-size: 14px;
+    border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}  
+.word-scratchy .click {
+	display: block;
+	width: 35px;
+	height: 35px;
+	border-radius: 50%;
+	position: relative;
+	border: 4px solid #fe1456;
+	text-align: center;
+	line-height: 35px;
+	font-size: 12px;
+	color: #333;
+	margin-right: 5px;
+	animation: warn 1.7s ease-out 0s infinite;
+}
+.click:after {
+  display: block;
+  content: '';
+  width: 30px;
+  height:30px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 50%;
+  margin-left: -15px;
+  margin-top: -15px;
+  border: 3px solid #fe1456;
+  box-sizing: border-box;
+  animation: warn 1.7s ease-out 0.7s reverse infinite;
+}
+@keyframes  warn {
+    0% {
+		transform: scale(0.4);
+		opacity: 1;
+	  }
+   
+	  30% {
+		opacity: 1;
+	  }
+   
+	  100% {
+		transform: scale(1.1);
+		opacity: 0;
+	  }
+}

BIN
images/index/click.gif


+ 67 - 2
index.html

@@ -49,7 +49,7 @@
     #tel-box{
       background: url(../images/tel.png) no-repeat 5px 10px;
       font-family: impact;
-      padding: 25px 10px 5px 48px;
+      padding: 25px 10px 15px 48px;
       position: fixed;
       right: 9px;
       top: 30%;
@@ -69,9 +69,11 @@
  </head> 
  <body>
   <div id="tel-box">
+    
     <div class="tel">
       <p>13669284528 </p>
       <p>18591965516</p>
+      <p class="word-scratchy" style="font-size: 16px;cursor: pointer;" onclick="contcat()"><span class="click"></span><span class="clickbt">在线体验</span></p>
     </div>
   </div>
   <header class="header"> 
@@ -151,6 +153,7 @@
             <li><a href="/list/case.html?id=6">数字化资产平台 </a></li> 
           </ul> 
          </li> 
+         <li><a onclick="contcat()"><span>在线体验</span></a> </li>
        </ul> 
        <div class="clearfix"></div> 
       </nav> 
@@ -158,6 +161,30 @@
     </div> 
    </div> 
   </header> 
+  <div class="contcat-form-container">
+    <div class="contcat-form">
+      <div class="close">X</div>
+      <div class="form-item">
+        <div class="lable">公司名称</div>
+        <div class="form-item-cont">
+          <input class="company" type="text">
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="lable">姓名</div>
+        <div class="form-item-cont">
+          <input class="name" type="text">
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="lable">手机号</div>
+        <div class="form-item-cont">
+          <input class="phone" type="text">
+        </div>
+      </div>
+      <div class="contcatSubmit">提交</div>
+    </div>
+  </div>
   <!-- banner开始 --> 
   <div class="banner"> 
    <div class="swiper-container swiper-banner"> 
@@ -724,6 +751,44 @@
   <script src="js/jquery.qrcode.min.js"></script> 
   <script src="js/main.js"></script> 
   <script type="text/javascript" src="js/swiper.min2.js"></script> 
-  <script type="text/javascript" src="js/index.js"></script>  
+  <script type="text/javascript" src="js/index.js"></script> 
+  <script>
+    function contcat(){
+      $('.contcat-form-container').show()
+        $('.contcat-form-container .company').val('')
+        $('.contcat-form-container .name').val('')
+        $('.contcat-form-container .phone').val('')
+    }
+    $('.contcat-form-container .close').click(function(){
+      $('.contcat-form-container').hide()
+    })
+    $('.contcat-form-container .contcatSubmit').click(function(){
+      var  websiteId=188;
+      var companyName=$('.contcat-form-container .company').val()
+      var contactName=$('.contcat-form-container .name').val()
+      var contactIphone=$('.contcat-form-container .phone').val()
+      if(companyName.length<1) {alert('请填写公司名称');return} 
+      if(contactName.length<1) {alert('请填写姓名');return} 
+      if(contactIphone.length<1) {alert('请填写手机号');return} 
+      $.ajax({
+        url:'http://webapi.xazhyc.com/guestbook/add',
+        data:JSON.stringify({websiteId,companyName,contactName,contactIphone}),
+        method:'post',
+        contentType: 'application/json',
+        success(res){
+            if(res.code===0){
+              $('.contcat-form-container').hide()
+              alert('提交成功!资料审核完毕,会有专业客服联系您')
+            }else{
+              alert('提交失败')
+            }
+        },
+        error(){
+          alert('提交失败')
+        }
+      })
+    })
+    
+  </script> 
  </body>
 </html>