change

src/components/contantWe.vue

@@ -0,0 +1,111 @@
+<template>
+	<div class="contantwe">
+		<div class="button" @click="showT=!showT">
+			<img src="../assets/img/banner/kefu.png" height="22" width="22" alt="">
+			<span>在<br>线<br>客<br>服</span>
+		</div>
+		<div class="contant" v-show="showT">
+			<div class="wechart">
+				<img src="../assets/img/banner/contant.png" height="266" width="122" alt="">
+			</div>
+			<div class="phone">
+				<div>
+					<p>电话咨询</p>
+				</div>
+				<img src="../assets/img/banner/phone.png" height="31" width="37" alt="">
+				<p>400-1566-899</p>
+			</div>
+		</div>
+	</div>
+	
+</template>
+<script>
+	export default{
+		data(){
+			return{
+				showT:true,
+			}
+		},
+		methods:{
+
+		}
+	}
+</script>
+<style>
+	.contantwe{
+		position: fixed;
+		top: 28%;
+		right: 0px;
+		z-index: 100;
+		/*width: 130px;
+		height: 430px;
+		background: #20a0ff;
+		z-index: 100;
+		border-top-left-radius: 10px;
+		border-bottom-left-radius: 10px;*/
+		.contant{
+			box-shadow: 0 3px 5px 2px #333;
+			width: 150px;
+			height: 450px;
+			background: #20a0ff;
+			border-top-left-radius: 10px;
+			border-bottom-left-radius: 10px;
+			padding-top: 10px;
+			.wechart{
+				background: #fff;
+				width: 130px;
+				margin: 0 auto;
+				padding: 10px 0;
+				border-radius: 10px;
+			}
+			.phone{
+				background: #fff;
+				width: 130px;
+				height: 130px;
+				margin: 0 auto;
+				padding: 10px 5px;
+				border-radius: 10px;
+				margin-top: 10px;
+				div{
+					border-bottom: 1px solid #e5e5e5;
+					p{
+						font-size: 14px;
+						color: #333;
+						font-weight: bold;
+						line-height: 30px;
+						text-align: left;
+						margin-left: 10px;
+					}
+				}
+				p{
+					font-size: 14px;
+					color: #333;
+					font-weight: bold;
+					line-height: 30px;
+				}
+				img{
+					margin-top: 10px;
+				}
+			}
+		}
+		.button{
+			width: 36px;
+			height: 120px;
+			background: #20a0ff;
+			position: absolute;
+			margin-left: -36px;
+			border-top-left-radius: 10px;
+			border-bottom-left-radius: 10px;
+			cursor: pointer;
+			margin-top: 150px;
+			text-align: center;
+			img{
+				margin-top: 10px;
+			}
+			span{
+				color: #fffc00;
+				font-size: 14px;
+			}
+		}
+	}
+</style>

src/views/home/home.vue

@@ -10,10 +10,48 @@
         </ol>
       </div> -->
       <div class="banner-block">
-        <el-carousel trigger="click" height="900px" :autoplay="false" indicator-position="none" arrow="never">
-          <el-carousel-item v-for="item in 4" :key="item">
-            <!-- <img src="../assets/img/banner1.png" alt=""> -->
-            <div class="banner"></div>
+        <!-- <el-carousel trigger="click" height="900px" :autoplay="false" indicator-position="none" arrow="never">
+          <el-carousel-item>
+            
+            <div class="banner">
+              <img src="../../assets/img/banner1.png" height="910" width="1920" alt="">
+            </div>
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="banner">
+              <img src="../../assets/img/arrowhead.png" height="10" width="10" alt="">
+            </div>
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="banner">
+              <img src="../../assets/img/hui.png" alt="">
+            </div>
+          </el-carousel-item>
+        </el-carousel> -->
+        <el-carousel indicator-position="outside" height="900px" arrow="never" :interval="5000">
+          <el-carousel-item>
+            <div class="banner1">
+              <!-- <img src="" height="910" width="1920" alt="">   -->
+              <div class="widcen">
+                <button @click="jumpapply">申请代理</button>
+              </div>
+            </div>  
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="banner2">
+              <!-- <img src="../../assets/img/banner/banner1.png" height="910" width="1920" alt="">  -->
+              <div class="widcen">
+                <button @click="jumpapply">申请代理</button>
+              </div>
+            </div>
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="banner3">
+              <!-- <img src="../../assets/img/banner/banner2.png" height="910" width="1920" alt="">  -->
+              <div class="widcen">
+                <button @click="jumpapply">申请代理</button>
+              </div>
+            </div>
           </el-carousel-item>
         </el-carousel>
         
@@ -77,7 +115,7 @@ import loginPart from "./login.vue"
 import addUs from "./addUs.vue"
 import plat from "./plat.vue"
 import server from "./server-block.vue"
-import contactUs from "../../components/contact.vue"
+import contactUs from "../../components/contantWe.vue"
 import {ajax} from "../../assets/js/common.js"
 
 export default{
@@ -225,6 +263,9 @@ export default{
     })
   },
   methods:{
+    jumpapply(){
+      this.$router.push({path:"/apply"});
+    },
     gohelp(coin,state){
       if(state){
         this.$router.push({path:"/help/coinintroduce"});
@@ -360,10 +401,35 @@ export default{
   }
   .banner-block{
     position: relative;
-    .banner{
-      background:url("../../assets/img/banner1.png") no-repeat center center;
+    .widcen{
+      text-align: left;
+      width: 1200px;
+      margin: 0 auto;
+      button{
+        margin: 480px 0 0 8px;
+        width: 150px;
+        height: 40px;
+        font-size: 16px;
+        color: #1f52c9;
+        background: #fede00;
+        border: none;
+        cursor: pointer;
+      }
+    }
+    .banner1{
+      background:url("../../assets/img/banner/banner.png") no-repeat center center;
+      background-size: auto 100%;
+      height: 900px
+    }
+    .banner2{
+      background:url("../../assets/img/banner/banner1.png") no-repeat center center;
+      background-size: auto 100%;
+      height: 900px
+    }
+    .banner3{
+      background:url("../../assets/img/banner/banner2.png") no-repeat center center;
       background-size: auto 100%;
-      height: 900px;
+      height: 900px
     }
   }
   .server-block{