样式调整

pages/packages/jobInformation/jobDetails.vue

@@ -92,15 +92,21 @@
 					</view>
 				</view>
 				
-				<view  v-if="info.images" class="codeImage">
+				<view class="item" v-if="info.images" >
 					
-					<view  class="codeImageView" >展示图片</view>
 					
-					<image  mode="aspectFit"  v-for="(item,i) in imagesList " 
-					v-if="item" :key="i"
-					:src="item.url" :show-menu-by-longpress="true" ></image>
-					<view  class="codeImageView" ><u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon> 长按图片可保存<u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon></view>
+					<view   class="codeImage">
+						<view class="codeImageView">预览图片 点击查看</view>
+						
+						<view class="class">
+							<img   v-for="(item,i) in imagesList "  @click="previewImage(i)"
+							v-if="item" :key="i"     :class="'class'+i"
+							:src="item.url" :show-menu-by-longpress="false" ></image>
+						</view>
+						
+					</view>
 				</view>
+				
 
 			</view>
 			
@@ -272,6 +278,17 @@
 		},
 		
 		methods: {
+				previewImage(index) {
+					var list=this.imagesList.map(item=>{
+						return item.url
+					})
+			   		uni.previewImage({
+			   			urls:list ,
+			   			current: index,
+			   			 indicator:"number",
+			   			loop: true
+			   		})
+			   	},
 			getNewsInfo(){
 				
 				API_weixin.bannerList({
@@ -508,26 +525,60 @@
 <style lang="scss" scoped>
 	
 	.codeImage{
+		 //   height:160rpx;
 		background-color: #fff;
-		 text-align: center;
-		  border: 1px dashed;
-		  width: 700rpx;
+		// text-align: center;
+		//  border: 1px dashed;
+		 // width: 700rpx;
+		 //position: relative;
+		 // padding-bottom: 20px;
 		.codeImageView{
-			padding: 20rpx 0px 40rpx;
-			font-size: 32rpx;
-		}
-		image {
-			
-			max-height: 500rpx;
+			//padding: 20rpx 0px 40rpx;
+			color: #777777;
+			//font-size: 24rpx;
 		}
-		image img{
-			
-			max-height: 500rpx;
+		.class{
+			// position: absolute;
+			 img{
+				 margin: 3px;
+				 //border-bottom: 1px solid #777777;
+				//  position: absolute;
+				 width :180rpx;
+				 height: 160rpx;
+			 }
 		}
-		img{
+		// .class0{
+		// 	top:0 ;left:0;
+		// }
+		// .class1{
+		// 	top:10px ;left:20px;
+		// }
+		// .class2{
+		// 	top:20px ;left:40px;
+		// }
+		// .class3{
+		// 	top:60px ;left:60px;
+		// }
+		
+		
+		// .class0{
+		// 	top:0;left:0;
+		// }
+		// .class1{
+		// 	top:3px;left:20px;
+		// }
+		// .class2{
+		// 	top:6px;left:40px;
+		// }
+		// .class3{
+		// 	left:60px;
+		// }
+		
+		// .class{
+		// 	 position: absolute;
+		// }
+		 
 		
-			max-height: 500rpx;
-		}
 	}
 	
 	.swiper{