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;
+}
+
+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 VuePreview from 'vue-preview'
-import 'vue-photo-preview/dist/skin.css'
+
 
 
 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;
+		width:6.75rem;
-		height: 3.25rem;
+		height:3.625rem;
 	}
 
 	.nav {
@@ -469,77 +470,133 @@ a:hover {color:#38507E}
   flex-wrap: wrap;
   overflow: hidden;
   padding-bottom: 6.25rem; 
+ 
 }
-.case-list:nth-child(4n+1){
+
-  margin-left: 0rem;
-}
 /* .case-list:hover{
 	background: #000000;
 	opacity: 0.7;
 } */
 
-.case-list:hover .case-list-act{
+/* .case-list:hover .case-list-act{
-	
+	 height:15.625rem; 
-	display: block;
-    transition: height 0.5s ease-in-out; 
-	height:25.5rem; 
     box-shadow: 10px 0px 19px 10px rgba(59, 59, 59, 0.17);
 	border: 4px solid #47B1E3;
+	
+} */
+.case-list:first-child{
+	 margin-left: 0px!important;
 }
-.case-list-act{
+.case-list:nth-child(4n+1){
-	background: #000000;
+  margin-left: 0px!important;
-	opacity: 0.8;
-	 width: 24.6875rem;
-	 position: absolute;
-	height:0rem; 
-	 z-index: 99;
-	 top: 0px;
  
 }
-.case-list:hover .case-name{
+.case-list{
-	display: block;
+  width:24.6875rem;
-	transform:translateY(7.25rem);
+  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; */
   
 }
-.case-list:hover .case-indrouce{
+.list-item {
-	display: block;
+  display: inline-block;
-	transform:translateY(8.25rem);
+  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;
+  margin-top: 1.25rem;
-  display: none;
 }
 
 .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;
+  width:32rem;
-  height:25.5rem;
+  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,13 +822,16 @@ a:hover {color:#38507E}
 	font-size: 1.125rem;
 	color: white;
 }
-.fade-enter{
+
-			opacity: 0;
+.fade-enter-active, .fade-leave-active { 
+  transition: opacity .5s; 
 } 
-		.fade-enter-active{
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 
-			transition: opacity 1s;
+  opacity: 0; 
 } 
 
+
+
 .member-zhiwei{
   font-size: 0.9375rem;
   color:#666666;
@@ -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;
-}

src/pages/home.vue

@@ -65,9 +65,9 @@
 		</div>
 		<div class="our-serve">
 			<div class="serve-left">
-        <div class="servr-text">{{firstServe}}</div>
+				<div class="servr-text">{{firstServe[0]}}</div>
 				<div class="servr-text-grey">
-          {{secServe}}
+					{{firstServe[1]}}
 				</div>
 			</div>
 			<div class="serve-right">
@@ -82,8 +82,8 @@
 		</div>
 		<!-- fuwu-->
 		<div class="khfw" id='3'>
-      <div class="khfw-list" v-for="(item,index) in solve" :style="{ backgroundImage:`url(${getImgUrl(item.image)})`}"
+			<div class="khfw-list" v-for="(item,index) in solve"
-        :key="index">
+				:style="{ backgroundImage:`url(${getImgUrl(item.image)})`}" :key="index">
 				<img class="khfw-icon" :src="getImgUrl(item.background)" />
 				<div class="line-khfw"></div>
 				<div class="khfw-title">{{item.title}}</div>
@@ -95,8 +95,8 @@
 			<div class="line-fwal"></div>
 			<p class="fwmw-text">{{contentInfo.ServiceCase?contentInfo.ServiceCase.introduce:''}}</p>
 			<div class="ywfw-ul">
-        <div class="ywfw-tag" :class="fwfwIndex==index?'ywfw-tag-act':'ywfw-tag'" @click="checkTag(index,item.id)"
+				<div class="ywfw-tag" :class="fwfwIndex==index?'ywfw-tag-act':'ywfw-tag'"
-          v-for="(item,index) in ywfwList" :key="index">{{item.title}}</div>
+					@click="checkTag(index,item.id)" v-for="(item,index) in ywfwList" :key="index">{{item.title}}</div>
 			</div>
 
 			<!-- <div class="case-ul">
@@ -106,13 +106,24 @@
           <p class="case-indrouce">{{item.introduce}}</p>
         </div>
       </div> -->
-      <transition-group name="list-complete" tag="ul" v-bind:class="'case-ul'">
+			<transition-group name="flip-list" tag="ul" v-bind:class="'case-ul'">
-        <li class="case-list" v-for="item in caseList" :key="item.name">
+				<li class="case-list" @mousemove="caseMove(item.id)" @mouseleave="caseOut" v-for="item in caseList"
+					:key="item.name">
 					<img class="case-img"  :src="getImgUrl(item.image)" />
-          <div class="case-list-act">
+				<!-- <viewer :images="item.imgShow">
+				      <img v-for="(src,index) in item.imgShow"
+						:src="item"
+						:key="index">
+				    </viewer> -->
+					<transition name="fade" mode="out-in">
+						<div v-if="caseIds==item.id" class="case-list-act">
+							<div class="center-text">
+								<img v-if="item.imgShow" class="see-img" src="../assets/jia.png" />
 								<div class="case-name">{{item.name}}</div>
 								<p class="case-indrouce">{{item.introduce}}</p>
 							</div>
+						</div>
+					</transition>
 				</li>
 			</transition-group>
 		</div>
@@ -164,12 +175,12 @@
 			<p class="fwmw-text">{{team.introduce}}</p>
 			<div v-if="team.content">
 				<div class="s-content2">
-          <div class="member-list" @mouseover="teamMove(index)" @mouseout="teamOut" style="position: relative;"
+					<div class="member-list" @mouseover="teamMove(index)" @mouseout="teamOut"
-            v-for="(item,index) in team.content" :key="index">
+						style="position: relative;" v-for="(item,index) in team.content" :key="index">
 						<img class="member-img" :src="getImgUrl(item.avatar)" />
 						<div class="member-name">{{item.name}}</div>
 						<div class="member-zhiwei">{{item.position}}</div>
-            <transition name="fade" mode="out-in">
+						<transition name="fade">
 							<div class="hovers" v-if="memberIds==index">
 								<div class="menmber-indroce">{{item.introduce}}</div>
 							</div>
@@ -243,8 +254,8 @@
 				<div class="foot-line"></div>
 				<div class="foot-dow">
 					<div class="foot-dow-ul">
-            <div class="foot-dow-list" v-for="(item,index) in menuList" :key="index"><a style="color: white;"
+						<div class="foot-dow-list" v-for="(item,index) in menuList" :key="index"><a
-                :href="'#'+item.id">
+								style="color: white;" :href="'#'+item.id">
 								{{item.title}}
 							</a></div>
 						<!-- <div class="foot-dow-list">联系我们</div> -->
@@ -286,12 +297,15 @@
 	import "swiper/dist/css/swiper.css";
 	import Vue from 'vue';
 	
+    
+
 	export default {
 		name: "home",
 
 		components: {
 			swiper,
-      swiperSlide
+			swiperSlide,
+		
 		},
 
 		data() {
@@ -322,7 +336,9 @@
 				description: "",
 				keyword: "",
 				phone: '',
-        memberIds: -1
+				memberIds: -1,
+				caseIds: -1,
+				preImg:[]
 			};
 		},
 
@@ -448,7 +464,8 @@
 					this.contentInfo = res.data.data
 					this.bannerList = this.contentInfo.banner.content
 					this.service = this.contentInfo.service
-          this.firstServe = this.service.introduce.substr(0, 70)
+					this.firstServe = this.service.introduce.split('\n')
+					console.log("ssssddffg",this.firstServe);
 					this.secServe = this.service.introduce.substr(71, this.service.introduce.length - 1)
 					this.solve = this.contentInfo.solve.content
 					//this.caseList=this.contentInfo.ServiceCase.content
@@ -457,19 +474,31 @@
 					this.team = this.contentInfo.team
 					this.partner = this.contentInfo.Partner
 					this.honor = this.contentInfo.Honor
-
 					this.caseList = this.contentInfo.ServiceCase.content.filter(item => {
 						return item.type.includes(this.checkCaseId)
 					})
-          this.caseList.filter(item => {
+
-            this.imgsArr.push(this.host + item.image)
+					this.caseList.map((item, i) => {
+						item.id = i
+						
+						if(item.item_show!=''&&item.item_show.length!=0){
+							console.log("you");
+							let newStr=''
+							newStr=item.item_show
+							item.imgShow=newStr.split(",")
+							
+						}
+						else{
+							console.log("没有");
+						}
+						
 					})
 					// for(let i in caseTag){
 					//     this.ywfwList.push({[i]:caseTag[i]})
 					// }
 					//this.ywfwList=Array.from(caseTag)
 					//this.ywfwList=this.contentInfo.ServiceCase.type_map
-          console.log("选项卡1", this.imgsArr);
+					console.log("选项卡1", this.caseList);
 					console.log("选项卡id", this.checkCaseId);
 				}, err => {
 					console.log(err);
@@ -497,9 +526,29 @@
 				setTimeout(() => {
 					this.flag = true;
 				})
+
 				this.caseList = this.contentInfo.ServiceCase.content.filter(item => {
 					return item.type.includes(this.checkCaseId)
 				})
+				this.caseList.map((item, i) => {
+					item.id = i
+					
+					if(item.item_show!=''&&item.item_show.length!=0){
+						
+						let newStr=''
+						newStr=item.item_show
+						item.imgShow=newStr.split(",")
+					}
+					else{
+						console.log("没有");
+					}
+					console.log("you11",this.caseList);
+				})
+				
+			},
+			show() {
+			        const viewer = this.$el.querySelector('.images').$viewer
+			               viewer.show()
 			      },
 			teamMove(index) {
 				this.memberIds = index
@@ -507,6 +556,12 @@
 			teamOut() {
 				this.$set(this, 'memberIds', -1)
 			},
+			caseMove(id) {
+				this.caseIds = id
+			},
+			caseOut() {
+				this.$set(this, 'caseIds', -1)
+			},
 			checkMenu(selector, index) {
 				this.activeBtn = index;
 				// document.querySelector("#app-root").scrollTop = this.$el.querySelector(selector).offsetTop;