21313

src/views/components/solution.vue

@@ -228,10 +228,15 @@
 	transition: all .5s;
 	&>.title{
 		height: 3vw;
-		background-color: blue;
 		font-size: 1.5vw;
+		line-height: 3vw;
+		width: 100%;
+		padding-left: 3vw;
+		&>span{
+			float:left;
 		}
-		& >ul{
+	}
+	& >ul{
 			position: absolute;
 			top:3vw;
 			left:100%;
@@ -239,7 +244,7 @@
 			width: 100%;
 			height: 20vw;
 			/* 超出部分隐藏 */
-			// overflow: hidden;
+			overflow: hidden;
 			/* 过渡为0.3秒 */
 			transition: all .5s;
 			&>li{
@@ -267,7 +272,7 @@
 					color: #fff;
 					/* 文字遮罩层 */
 					background-color: rgba(0, 0, 0, .3);
-					transition: all .3s;
+					transition: all .5s;
 				}
 				&>.item{
 					position: absolute;
@@ -277,7 +282,6 @@
 					height: calc(100% - 0vw);
 					transform-style: preserve-3d;
 					perspective: 25vw;
-					// transition: all 2s;
 					&>div{
 						position: absolute;
 						top:0;
@@ -298,26 +302,28 @@
 							z-index:14;
 							opacity: 1;
 							background:url("../../assets/images/solution/swcs/1.jpg") no-repeat center center;
-							background-size:  contain;
+							background-size:  cover;
 						}
 						&>.item12{
 							z-index:14;
 							opacity: 0;
 							position: absolute;
 							top:0;
-							left:0;
+							right:0;
+							background-color: #aa55ff;
 							width: calc(100% - 0vw);
 							height: calc(100% - 0vw);
 							background:url("../../assets/images/solution/swcs/2.jpg") no-repeat center center;
-							background-size:  contain;
+							background-size:  cover;
 							transform: rotateY(180deg);
 						}
 					}
 					&>.item2{
 						z-index:3;
 						background:url("../../assets/images/solution/swcs/3.jpg") no-repeat center center;
-						background-size:  contain;
+						background-size: cover;
 						opacity: 0;	
+						background-color: antiquewhite;
 					}
 					&>.item3{
 						transform-origin: 100% 50%;
@@ -330,7 +336,7 @@
 							width: calc(100% - 0vw);
 							height: calc(100% - 0vw);
 							background:url("../../assets/images/solution/swcs/5.jpg") no-repeat center center;
-							background-size:  contain;
+							background-size:  cover;
 						}
 						&>.item32{
 							z-index:12;
@@ -341,7 +347,7 @@
 							width: calc(100% - 0vw);
 							height: calc(100% - 0vw);
 							background:url("../../assets/images/solution/swcs/4.jpg") no-repeat center center;
-							background-size:  contain;
+							background-size:  cover;
 							transform: rotateY(180deg);
 							
 						}
@@ -365,7 +371,7 @@
 	    height: 43vw
 	}
 	.box:hover ul {
-	    height: 4vw;
+	    height: 43vw;
 		animation-play-state: paused;
 	
 	}

src/views/index.vue

@@ -3,9 +3,6 @@
 	import product from './components/product.vue'
 	import videos from './components/videos.vue'
 	import solution from './components/solution.vue'
-
-	
-	
 </script>
 
 <template>