个人中心详情更新

pages.json

@@ -56,6 +56,13 @@
         	{
         		"navigationBarTitleText" : "面部档案"
         	}
+        },
+        {
+        	"path" : "pages/user/photo/detail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "照片详情"
+        	}
         }
        
     ],

pages/user/index.vue

@@ -64,7 +64,7 @@
 			   
 			  <view class="datalist">
 				  
-				  <view class="picBox">
+				  <view class="picBox" @click="goTo('/pages/user/photo/detail')">
 				  					 <view class="p_left">
 				  						 <image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
 										 <image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>

pages/user/photo/detail.vue

@@ -0,0 +1,106 @@
+<template>
+	<view  class="container">
+		<view class="imgList">
+			<!--如果是多个就用imgBox-->
+			<view class="imgBox">
+				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
+			</view>
+			
+			<view class="imgBox">
+				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
+			</view>
+			<view class="imgBox">
+				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
+			</view>
+			<view class="imgBox">
+				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
+			</view>
+			<!--如果是一个就用picBox-->
+			<!-- <view class="picBox">
+				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
+			</view> -->
+			
+		</view>	
+		<view class="btnList">
+			<view class="btnBox a1">
+				<view class="btnImg">
+					<image src="/static/img/user/delete.png" mode="widthFix"></image>
+				</view>
+				<view class="btnTxt">删除照片</view>
+			</view>
+			<view class="btnBox a2">
+				<view class="btnImg">
+					<image src="/static/img/user/download.png" mode="widthFix"></image>
+				</view>
+				<view class="btnTxt">保存到相册</view>
+			</view>
+		</view>	
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+.container{padding: 20rpx 26rpx;}
+.imgList{width: 100%; height: auto;
+ display: flex; flex-wrap: wrap;
+ justify-content: space-around; /* 使子元素在容器中均匀分布 */
+ align-items: center; /* 如果需要垂直居中子元素 */
+ }
+.imgBox{width: 340rpx; height: 440rpx; margin-bottom: 20rpx; }
+.imgBox image{width: 340rpx; height: 440rpx; border-radius: 24rpx;}
+
+
+.picBox{width: 660rpx; height: 770rpx; margin-top: 20rpx; }
+.picBox image{width: 660rpx; height: 770rpx; border-radius: 24rpx;}
+
+.btnList{
+	width: 100%; height: 88rpx;
+	display: flex; flex-wrap: wrap;
+	justify-content: space-around; /* 使子元素在容器中均匀分布 */
+	align-items: center; /* 如果需要垂直居中子元素 */
+}
+.btnBox{
+	width: 340rpx; height: 88rpx;
+	border-radius: 44rpx;
+	display: flex;
+}
+.btnBox .btnImg{
+	width:126rpx ;
+	height: 88rpx;
+}
+.btnBox .btnImg image{
+	width:30rpx ;
+	height: 30rpx;
+	margin-top: 29rpx;
+	margin-left: 80rpx;
+}
+.btnBox .btnTxt{
+	width:214rpx ;
+	height: 88rpx;
+	font-weight: 700;
+	font-size: 30rpx;
+	line-height: 88rpx;
+}
+.a1{
+	background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
+	color:#7A74F0;
+}
+.a2{
+	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
+	color:#FFFFFF;
+}
+</style>
+