Skip to content

U
uni-pdtravel
Commit 895f31e3 authored by qipeng's avatar qipeng
Browse files
Options

拼图脚部代码

parent be8002c4
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 1 deletion
pages/album/photoJigsaw/photoJigsaw.vue
View file @ 895f31e3
...@@ -23,9 +23,42 @@ ...@@ -23,9 +23,42 @@
src="../static/album/backgroundImgTo.png"></image> src="../static/album/backgroundImgTo.png"></image>
</view> </view>
<button @click="toCanvas">按钮</button> <button @click="toCanvas">按钮</button>
<!--画图板-->
<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}"> <view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas> <canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
</view> </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> </view>
</template> </template>
...@@ -77,6 +110,7 @@ export default { ...@@ -77,6 +110,7 @@ export default {
canvasMaskNum:0, //渲染次数 canvasMaskNum:0, //渲染次数
canvasMaskType:false, canvasMaskType:false,
switchType:true,//模板开关按钮
} }
}, },
onLoad(option) { onLoad(option) {
...@@ -238,7 +272,7 @@ export default { ...@@ -238,7 +272,7 @@ export default {
// display: flex; // display: flex;
// flex-direction:column; // flex-direction:column;
height: 100VH; height: 100VH;
background-color: #fff; background: #F5F7FA;
overflow: auto; overflow: auto;
} }
.nav-bar { .nav-bar {
...@@ -302,4 +336,136 @@ export default { ...@@ -302,4 +336,136 @@ export default {
.jigsaw-canvasMaskAct{ .jigsaw-canvasMaskAct{
z-index: 100; 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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment