拼图脚部代码

pages/album/photoJigsaw/photoJigsaw.vue

@@ -23,9 +23,42 @@
 				src="../static/album/backgroundImgTo.png"></image>
 		</view>
 		<button @click="toCanvas">按钮</button>
+		<!--画图板-->
 		<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
 			<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
 		</view>
+		<!--脚部模板-->
+		<view class="jigsaw-template">
+			<view class="template-list template-listAct">
+				<image class="list-img" src="../static/album/DIY.png"></image>
+			</view>
+			<view class="template-list">
+				<image class="list-img" src="../static/album/DIY.png"></image>
+			</view>
+			<view class="template-list">
+				<image class="list-img" src="../static/album/DIY.png"></image>
+			</view>
+		</view>
+		<!--脚部购物车-->
+		<view class="jigsaw-btoom">
+			<view class="bottom-pictureFrame">
+				<view class="pictureFrame pictureFrameAct">金属框</view>
+				<view class="pictureFrame">木框</view>
+				<view class="pictureFrame">无框</view>
+			</view>
+			<view class="message-trading">
+				<view class="trading-btn trading-left">
+					<image src="../static/album/icon06.png"></image>
+					<view class="trading-num">2</view>
+				</view>
+				<view class="trading-btn trading-right">购买</view>
+			</view>
+		</view>
+		<!--脚部模板开关-->
+		<view class="jigsaw-switch" :class="switchType!=true?'jigsaw-switchAct':''">
+			<image v-if="switchType==true" class="jigsaw-switchImg" src="../static/album/icon09.png"></image>
+			<image v-else class="jigsaw-switchImg" src="../static/album/icon10.png"></image>
+		</view>
 		
 	</view>
 </template>
@@ -77,6 +110,7 @@ export default {
       canvasMaskNum:0, //渲染次数
       canvasMaskType:false,
 			
+      switchType:true,//模板开关按钮
     }
   },
   onLoad(option) {
@@ -238,7 +272,7 @@ export default {
 		// display: flex;
 		// flex-direction:column;
 		height: 100VH;
-		background-color: #fff;
+		background: #F5F7FA;
 		overflow: auto;
 	}
 	.nav-bar {
@@ -302,4 +336,136 @@ export default {
 	.jigsaw-canvasMaskAct{
 		z-index: 100;
 	}
+	.jigsaw-template{
+		display: flex;
+		width: 100%;
+		height: 180rpx;
+		padding: 20rpx;
+		background-color: #fff;
+		overflow: auto;
+		position: fixed;
+		bottom: 100rpx;
+		left: 0;
+		z-index: 110;
+		.template-list{
+			width: 108rpx;
+			height: 160rpx;
+			border-radius: 9rpx;
+			border: 3rpx solid #EDEDED;
+			box-sizing: border-box;
+			margin-right: 20rpx;
+			position: relative;
+			.list-img{
+				display: block;
+				width: 92rpx;
+				height: 138rpx;
+				margin: auto;
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+			}
+		}
+		.template-listAct{
+			border: 3rpx solid #FE6600;
+		}
+	}
+	.jigsaw-btoom{
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 100rpx;
+		padding: 18rpx 32rpx 0 20rpx;
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 110;
+		.bottom-pictureFrame{
+			display: flex;
+			width: 324rpx;
+			padding-top: 6rpx;
+			overflow: auto;
+			.pictureFrame{
+				width: 108rpx;
+				height: 48rpx;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #999999;
+				line-height: 48rpx;
+				text-align: center;
+			}
+			.pictureFrameAct{
+				background: #F7F8FA;
+				border-radius: 24rpx;
+				color: #333333;
+				font-weight: 600;
+			}
+		}
+		.message-trading{
+			display: flex;
+			position: relative;
+			.trading-btn{
+				width: 160rpx;
+				height: 64rpx;
+				position: relative;
+			}
+			.trading-left{
+				background: #FF9F43;
+				border-radius: 200rpx 0rpx 0rpx 200rpx;
+				image{
+					width: 40rpx;
+					height: 40rpx;
+					margin: auto;
+					position: absolute;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+				}
+			}
+			.trading-num{
+				width: 42rpx;
+				height: 44rpx;
+				border-radius: 50%;
+				background: #FFFFFF;
+				line-height: 44rpx;
+				text-align: center;
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #FE6600;
+				position: absolute;
+				right: 12rpx;
+				top: -22rpx;
+			}
+			.trading-right{
+				background: #FE6600;
+				border-radius: 0rpx 200rpx 200rpx 0rpx;
+				text-align: center;
+				line-height: 64rpx;
+				font-size: 28rpx;
+				font-weight: 600;
+				text-align: center;
+				color: #FFFFFF;
+			}
+		}
+	}
+	.jigsaw-switch{
+		width: 52rpx;
+		height: 52rpx;
+		position: fixed;
+		bottom: 220rpx;
+		right: 32rpx;
+		z-index: 110;
+		image{
+			display: block;
+			width: 52rpx;
+			height: 52rpx;
+		}
+	}
+	.jigsaw-switchAct{
+		bottom: 144rpx;
+	}
+	
 </style>