f

components/component-made/made-solid.wxml

@@ -1,11 +1,9 @@
 <view class="wrapper">
-<!-- <canvas class='canvas-box' canvas-id="bgCanvas"> -->
   <view class='solid' style='top:{{propPosition.top}};left:{{propPosition.left}};width:{{propPosition.width}};height:{{propPosition.height}}'>
-      <text class='top'>{{propSize.top}}</text>
-      <text class='right'>{{propSize.right}}</text>
-      <text class='bottom'>{{propSize.bottom}}</text>
-      <text class='left'>{{propSize.left}}</text>
+      <view class='top'>{{propSize.top}}</view>
+      <view class='right'>{{propSize.right}}</view>
+      <view class='bottom'>{{propSize.bottom}}</view>
+      <view class='left'>{{propSize.left}}</view>
       <slot></slot>
   </view>
-  <!-- </canvas> -->
 </view>

components/component-made/made-solid.wxss

@@ -11,7 +11,6 @@ page{
   width:270rpx;
   height:270rpx;
   border:1rpx dashed #fff;
-  line-height:270rpx;
   text-align: center;
   margin:0 auto;
   position:absolute;
@@ -21,32 +20,35 @@ page{
   color:#fff;
   font-size:26rpx;
 }
-/* .solid-box{
-  width:inherit;
-  height:inherit;
-  position:relative;
-  font-size:26rpx;
-} */
 .solid .top{
-  height:20rpx;
   position:absolute;
-  top:-50%;
+  height:30rpx;
+  line-height:30rpx;
+  top:-30rpx;
   left:50%;
-  margin-left:-20rpx;
-  margin-top:-12rpx;
+  margin-left:-28rpx;
 }
 .solid .right{
   position:absolute;
+  height:30rpx;
+  line-height:30rpx;
   right:-56rpx;
+  top:50%;
+  margin-top:-15rpx;
 }
 .solid .bottom{
   position:absolute;
-  bottom:-50%;
-  left:50%;
-  margin-left:-20rpx;
-  margin-bottom:-12rpx;
+  height:30rpx;
+  line-height:30rpx;
+  bottom:-30rpx;
+  right:50%;
+  margin-right:-28rpx;
 }
 .solid .left{
   position:absolute;
+  height:30rpx;
+  line-height:30rpx;
   left:-56rpx;
+  top:50%;
+  margin-top:-15rpx;
 }

pages/customized/index/index.wxml

@@ -11,9 +11,9 @@
       <navigator url="/pages/customized/made/made" class='cust-btn f-s36 bg-green c-white'>去定制</navigator>
     </view>
   </view>
-  <view class='cust-footer f-box f-right'>
-    <navigator class='icon-wode iconfont c-green'></navigator>
-    <navigator class='icon-gouwuche iconfont c-green'></navigator>
+  <view class='cust-footer f-box f-justify-content-end'>
     <navigator class='icon-shouye iconfont c-green'></navigator>
+    <navigator class='icon-gouwuche iconfont c-green'></navigator>
+    <navigator class='icon-wode iconfont c-green'></navigator>
   </view>
 </view>

pages/customized/made/made.js

@@ -7,27 +7,30 @@ Page({
   data: {
     dataPositionObj:{
       top:'156rpx',
-      left:'286rpx'
+      left:'286rpx',
+      // width:'100rpx',
     },
     propSize:{
       top:'8cm',
       right:'8cm',
       bottom: '8cm',
       left:'8cm',
-    }
+    },
+    obverseImg: '/images/customized/cup_black_big.png',/*正面 */
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    console.log('页面加载完成')
+    console.log(this.data.obverseImg,"dd")
+    let canvasBg = this.data.obverseImg;
     wx.getSystemInfo({
       success: function (res) {
         let rpx = res.windowWidth / 750;
         console.log(res.windowWidth)
         const ctx = wx.createCanvasContext('madeContent');
-        ctx.drawImage('/images/customized/cup_black_big.png', 0, 0, 750 * rpx, 588 * rpx)
+        ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
         ctx.draw()
       },
     })
@@ -38,6 +41,7 @@ Page({
    */
   onReady: function () {
     // console.log('页面开始准备中')
+    
   
     const ctx = wx.createCanvasContext('madeBox');
     // Canvas.SetLeft(ctx, '10rpx'); 

pages/customized/made/made.wxml

@@ -3,8 +3,8 @@
 <!-- <image src='/images/customized/cup_black_big.png' bindload="imageLoad"/> -->
   <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
     <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
-    <text>可定制区域</text>
+    <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
   </made-solid>
-  <canvas canvas-id='myCanvas' class='made-box' style='margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
+  <canvas canvas-id='myCanvas' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
 </canvas>
 </view>

pages/customized/made/made.wxss

@@ -4,8 +4,14 @@
  height:588rpx;
  margin:60rpx 0;
 }
+.made-prompt{
+  width:inherit;
+  height:inherit;
+}
 .made-box{
-  width:272rpx;
-  height:272rpx;
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
   margin:0 auto;
+  /* background:red; */
 }

style/customized.wxss

@@ -18,12 +18,56 @@
   display: flex;
   display: -webkit-flex; /* Safari */
 }
-.f-right{
-   flex-direction:row-reverse
-}
 .f-item {
   flex-grow: 1; /* default 0 */
 }
+/* 排列方向 */
+.f-direction-row{ 
+   flex-direction: row/*主轴为水平方向，起点在左端。*/
+}
+.f-direction-row-reverse{ 
+   flex-direction: row-reverse；/*主轴为水平方向，起点在右端。*/
+}
+.f-direction-column{ 
+   flex-direction: column；/*主轴为垂直方向，起点在上端。*/
+}
+.f-direction-column-reverse{ 
+   flex-direction: column-reverse；/*主轴为垂直方向，起点在下端。*/
+}
+/*水平 对齐方向 */
+.f-justify-content-start{
+  justify-content: flex-start; /* 向左对齐 */
+}
+.f-justify-content-end{
+  justify-content: flex-end; /* 向右对齐 */
+}
+.f-justify-content-center{
+  justify-content: center; /* 居中对齐 */
+}
+.f-justify-content-between{
+  justify-content: space-between; /*两端对齐*/
+}
+.f-justify-content-around{
+  justify-content: space-around; /* 距离等比 */
+}
+
+/* 交叉轴对齐方向 */
+.f-align-items-start{
+  align-items: flex-start
+}
+.f-align-items-end{
+  align-items: flex-end
+}
+.f-align-items-center{
+  align-items:center;
+}
+.f-align-items-baseline{
+  align-items: baseline; /*项目的第一行文字的基线对齐。*/
+}
+.f-align-items-stretch{
+  align-items: stretch; /*如果项目未设置高度或设为auto，将占满整个容器的高度。*/
+}
+
 /* color */
 .c-green{
   color:#00af66