ssff

package.json

@@ -22,6 +22,7 @@
     "vue-awesome-swiper": "^4.1.1",
     "vue-meta": "^2.4.0",
     "vue-photo-preview": "^1.1.3",
+    "vue-preview": "^1.1.3",
     "vue-router": "^3.0.1",
     "vue2-waterfall": "^3.0.1"
   },

src/App.vue

@@ -12,12 +12,28 @@ export default {
 
 <style>
 html,body{
-   width: 100%;
+  width: 100vw;
+
     height: 100%;
     padding: 0px;
     margin: 0upx;
     font-family: PingFang SC;
-		overflow-x: hidden;
 }
 
+html {
+  overflow-y: scroll;
+}
+ 
+:root {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+ 
+:root body {
+  position: absolute;
+}
+ ul,li{
+	 padding: 0px;
+ }
+
 </style>

src/main.js

@@ -7,12 +7,12 @@ import './units/rem';
 import 'swiper/dist/css/swiper.min.css'
 import 'swiper/dist/js/swiper.min'
 import axios from 'axios'
-import preview from 'vue-photo-preview'
-import 'vue-photo-preview/dist/skin.css'
+import VuePreview from 'vue-preview'
+
 
 
 import Meta from 'vue-meta'
-Vue.use(Meta,preview)
+Vue.use(Meta,VuePreview)
 
 Vue.config.productionTip = false
 Vue.prototype.$axios = axios

src/pages/home.css

@@ -19,6 +19,7 @@
 		display: flex;
 		justify-content:space-between;
 		align-items: center;
+
 	}
   /*  .fix-nav{
 		width: 120rem;
@@ -33,8 +34,8 @@
 		box-shadow: 0px 0px 19px 0px rgba(59, 59, 59, 0.17);
 	} */
 	.logo {
-		width: 13rem;
-		height: 3.25rem;
+		width:6.75rem;
+		height:3.625rem;
 	}
 
 	.nav {
@@ -462,84 +463,140 @@ a:hover {color:#38507E}
     border-radius: 1.3125rem;
 }
 .case-ul{
-  width: 113.5rem;
+  width:113.5rem;
   margin: auto;
   margin-top: 0.75rem;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-  padding-bottom: 6.25rem;
-}
-.case-list:nth-child(4n+1){
-  margin-left: 0rem;
+  padding-bottom: 6.25rem; 
+ 
 }
+
 /* .case-list:hover{
 	background: #000000;
 	opacity: 0.7;
 } */
 
-.case-list:hover .case-list-act{
-	
-	display: block;
-    transition: height 0.5s ease-in-out; 
-	height:25.5rem; 
+/* .case-list:hover .case-list-act{
+	 height:15.625rem; 
     box-shadow: 10px 0px 19px 10px rgba(59, 59, 59, 0.17);
 	border: 4px solid #47B1E3;
-}
-.case-list-act{
-	background: #000000;
-	opacity: 0.8;
-	 width: 24.6875rem;
-	 position: absolute;
-	height:0rem; 
-	 z-index: 99;
-	 top: 0px;
 	
+} */
+.case-list:first-child{
+	 margin-left: 0px!important;
 }
-.case-list:hover .case-name{
-	display: block;
-	transform:translateY(7.25rem);
-	
+.case-list:nth-child(4n+1){
+  margin-left: 0px!important;
+ 
 }
-.case-list:hover .case-indrouce{
-	display: block;
-	transform:translateY(8.25rem);
-	
+.case-list{
+  width:24.6875rem;
+  height:15.625rem; 
+  margin-left:4.875rem;
+  margin-top: 3.125rem;
+  text-align: center;
+  position: relative;
+  z-index: 9;
+ /* -webkit-transition: -webkit-transform .3s ease;
+    -moz-transition: -moz-transform .3s ease;
+    -ms-transition: -ms-transform .3s ease;
+    transition: transform .3s ease; */
+  
+}
+.list-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to
+/* .list-leave-active for below version 2.1.8 */ {
+
+  transform: translateY(30px);
+}
+.flip-list-move {
+  transition: transform 1s;
 }
+ /* .v-enter, .v-leave-to {
+            opacity: 0;
+        }
+        .v-enter-active, .v-leave-active {
+            transition: opacity 1s;
+        } */
 .case-name{
-   width: 24.6875rem;
   font-size: 1.125rem;
   color:#FFFFFF;
   font-weight: bold;
-  margin-top:1rem;
-  display: none;
+  margin-top: 1.25rem;
 }
 
 .case-indrouce{
-   width: 24.6875rem;
  font-size:1rem;
   color: #FFFFFF;
   opacity: 0.5;
-  margin-top: 1.25rem;
-  display: none;
-}
-.case-list{
-  width:24.6875rem;
-  height:25.5rem; 
-  margin-left:3.8rem;
-  margin-top: 3.125rem;
-  text-align: center;
-  position: relative;
-  z-index: 9;
-  -webkit-transition: -webkit-transform .3s ease;
-  -moz-transition: -moz-transform .3s ease;
-  -ms-transition: -ms-transform .3s ease;
-  transition: transform .3s ease;
 }
+
 .case-img{
   width: 100%;
-  height:25.5rem; 
+  height:15.625rem; 
+}
+.case-list-act{
+	background: #000000;
+	opacity: 0.8;
+	 width: 24.6875rem;
+	 position: absolute;
+	 height:15.625rem; 
+	 z-index: 99;
+	 top: 0px;
+	 display: flex;
+	 align-items: center;	
 }
+.a-start-item{
+	align-items:center;
+}
+.center-text{
+	width:22rem;
+	position: absolute;
+	top:2rem; 
+	left: 50%;
+	margin-left:-11rem;
+	animation: topMove 0.5s;
+	-webkit-animation: topMove 0.5s;
+}
+.see-img{
+	width:1.5625rem;
+	height:1.5625rem;
+}
+@keyframes topMove {
+	0% {
+	
+		top:15.625rem;
+	}
+	
+		100% {
+			
+			top:2rem;
+		}
+	}
+
+	@-webkit-keyframes topMove
+
+	/* Safari and Chrome */
+		{
+		0% {
+		
+			top:15.625rem;
+		}
+		
+			100% {
+				
+				top:2rem;
+			}
+	}
+
 
 .copmey-card{
   width:120rem;
@@ -562,18 +619,18 @@ a:hover {color:#38507E}
   color: #000000;
   font-weight: bold;
   margin-top: 4.625rem;
-  margin-left: 13.5rem;
+  margin-left: 19rem;
   margin-top:5rem;
 }
 .line-gsjj{
   width: 1.9375rem;
   height: 0.25rem;
   background: #0096DF;
-  margin-left: 13.5rem;
+   margin-left: 19rem;
   margin-top: 2.3125rem;
 }
 .compy-indoce{
-   margin-left: 13.5rem;
+   margin-left: 19rem;
    width: 41.75rem;
    font-size: 1.125rem;
    color: #000000;
@@ -582,7 +639,7 @@ a:hover {color:#38507E}
    line-height: 1.875rem;
 }
 .gsbq-ul{
-   margin-left: 13.5rem;
+    margin-left: 19rem;
    margin-top:3.375rem;
    width: 41.75rem;
    display: flex;
@@ -621,10 +678,10 @@ a:hover {color:#38507E}
 }
 .gstp{
   position: absolute;
-  width:34.375rem;
-  height:25.5rem;
+  width:32rem;
+  height:23.68rem;
   top:7.1875rem;
-  left: 63rem;
+  left: 66rem;
 }
 .donghua{
   animation:bigTitle 3s;
@@ -746,6 +803,7 @@ a:hover {color:#38507E}
 /* .member-img :hover .hovers{
 	display: block;
 } */
+
 .hovers{
   width: 100%;
   height:21.0625rem;
@@ -756,6 +814,7 @@ a:hover {color:#38507E}
   top: 0;
   display: flex;
   align-items: center;
+  
 }
 .menmber-indroce{
 	width: 90%;
@@ -763,12 +822,15 @@ a:hover {color:#38507E}
 	font-size: 1.125rem;
 	color: white;
 }
-.fade-enter{
-			opacity: 0;
-		}
-		.fade-enter-active{
-			transition: opacity 1s;
-		}
+
+.fade-enter-active, .fade-leave-active { 
+  transition: opacity .5s; 
+} 
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 
+  opacity: 0; 
+} 
+
+
 
 .member-zhiwei{
   font-size: 0.9375rem;
@@ -1035,36 +1097,7 @@ width: 74.9375rem;
 }
 
 
-.bounce-enter-active {
-  animation: bounce-in .5s;
-}
-.bounce-leave-active {
-  animation: bounce-in .5s reverse;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
 
 
 
-.list-complete-item {
-  transition: all 1s;
-  display: inline-block;
-  margin-right: 10px;
-}
-.list-complete-enter, .list-complete-leave-to
-/* .list-complete-leave-active for below version 2.1.8 */ {
-  opacity: 0;
-  transform: translateY(30px);
-}
-.list-complete-leave-active {
-  position: absolute;
-}
+