Home Explore Help
Register Sign In
zhaobao
/
website
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

提交

zhaobao 1 year ago
parent
07e1cf4260
commit
4e9fd7793c
3 changed files with 229 additions and 3 deletions
Unified View Show Diff Stats
  1. 162 1
      css/common.css
  2. BIN
      images/index/click.gif
  3. 67 2
      index.html

+ 162 - 1
css/common.css
View File 

@@ -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 {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.thisclass a {color: #fff;}
 
 .pagess ul li a{ display:block;color:#999}
 
 .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
View File


+ 67 - 2
index.html
View File 

@@ -49,7 +49,7 @@
 
     #tel-box{
 
     #tel-box{
 
       background: url(../images/tel.png) no-repeat 5px 10px;
 
       background: url(../images/tel.png) no-repeat 5px 10px;
 
       font-family: impact;
 
       font-family: impact;
 
-      padding: 25px 10px 5px 48px;
 
+      padding: 25px 10px 15px 48px;
 
       position: fixed;
 
       position: fixed;
 
       right: 9px;
 
       right: 9px;
 
       top: 30%;
 
       top: 30%;
 
@@ -69,9 +69,11 @@
 
  </head> 
  </head> 
  <body>
 
  <body>
 
   <div id="tel-box">
 
   <div id="tel-box">
 
+    
     <div class="tel">
 
     <div class="tel">
 
       <p>13669284528 </p>
 
       <p>13669284528 </p>
 
       <p>18591965516</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>
 
   </div>
 
   </div>
 
   <header class="header"> 
   <header class="header"> 
@@ -151,6 +153,7 @@
 
             <li><a href="/list/case.html?id=6">数字化资产平台 </a></li> 
             <li><a href="/list/case.html?id=6">数字化资产平台 </a></li> 
           </ul> 
           </ul> 
          </li> 
          </li> 
+         <li><a onclick="contcat()"><span>在线体验</span></a> </li>
 
        </ul> 
        </ul> 
        <div class="clearfix"></div> 
        <div class="clearfix"></div> 
       </nav> 
       </nav> 
@@ -158,6 +161,30 @@
 
     </div> 
     </div> 
    </div> 
    </div> 
   </header> 
   </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开始 --> 
   <!-- banner开始 --> 
   <div class="banner"> 
   <div class="banner"> 
    <div class="swiper-container swiper-banner"> 
    <div class="swiper-container swiper-banner"> 
@@ -724,6 +751,44 @@
 
   <script src="js/jquery.qrcode.min.js"></script> 
   <script src="js/jquery.qrcode.min.js"></script> 
   <script src="js/main.js"></script> 
   <script src="js/main.js"></script> 
   <script type="text/javascript" src="js/swiper.min2.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>
 
  </body>
 
 </html>
 
 </html>