期望可以支持 MasterGo导出的Sketch文件 · Issue #I5E24I · D2C/lens - Gitee.com

开源项目 > 前沿技术 > 低代码 &&

/ 详情

待办的

创建于

2022-06-24 20:20

使用MasterGo导入官方demo 的Sketch文件，然后再使用MasterGo导出Sketch文件  使用lens 解析输出的文件代码就变成了这个样子
```
<template>
  <view class="app">
    <view class="list_3">
      <view class="list_1 list_1_be493238ef7e464eb8a3d8ed1269b114">
        <image src="@/static/images/3bc429c3-5b15-47f7-aaf7-78d0297beb0c.png"
          class="img_5" mode="aspectFit"></image>
        <view class="warp_2">
          <image src="@/static/images/69bad9ea-04c3-4ec5-b392-34cf2de0cbf2.png"
            class="img_2" mode="aspectFit"></image> </view>
      </view>
      <view class="list_1 list_1_c2231e2d9f3d4fa588878d5f332c3f93">
        <image src="@/static/images/13fbb2c7-bd98-4a9b-951b-87fd87a0a534.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/17c74818-8ed0-4ec3-bdd1-2969db417ee8.png"
          class="img_6 img_6_59a5ab7e8def4703bf1f5d07533018a6" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/508332c1-8333-45c3-9f64-18c6404f488f.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/cce15c60-a4a0-4376-b6b0-0bc7af9808fd.png"
          class="img_6" mode="aspectFit"></image> </view>
      <view class="list_1 list_1_e284371dcb3548568f6eee6bd1db9191">
        <image src="@/static/images/954703f9-1046-473e-9bfd-f50390acdb5c.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/bc47206b-d282-44e7-9b64-bc28f9cdca52.png"
          class="img_6 img_6_70dc3dad97f145f9ad2cbc7b71bb6bda" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/d4590324-53c1-42a0-a554-8b8d043aa06e.png"
          class="img_5 img_5_0ff1f0bfb189472cac86a93d61a18ba3" mode="aspectFit"></image>
        <image src="@/static/images/05ec00d7-c098-4b92-8ae2-da6e520c06e5.png"
          class="img_6 img_6_e562f5384a2d41b9a6bbdf73a90356ac" mode="aspectFit"></image>
      </view>
      <view class="list_1 list_1_ec290238858943be8334aaf5a8686e49">
        <image src="@/static/images/45c926d1-6d59-49d8-8f94-e0e19397a3aa.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/58cb3629-82cb-4f8b-b1cb-eb3684f765da.png"
          class="img_6 img_6_28ae2627d4984d5fb7e29e45990634fa" mode="aspectFit"></image>
      </view>
    </view>
    <view class="list_3">
      <view class="list_1 list_1_be493238ef7e464eb8a3d8ed1269b114">
        <image src="@/static/images/5be4d4ec-c26e-4764-aa20-9eb55229caea.png"
          class="img_5" mode="aspectFit"></image>
        <view class="warp_2">
          <image src="@/static/images/32a4e86f-b306-4ebf-bbb7-cc28f0d503a5.png"
            class="img_2" mode="aspectFit"></image> </view>
      </view>
      <view class="list_1 list_1_c2231e2d9f3d4fa588878d5f332c3f93">
        <image src="@/static/images/82e37c87-237d-4981-8ccb-a8b2448d310a.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/0788433d-249c-4665-b097-8caeafaeff3c.png"
          class="img_6 img_6_59a5ab7e8def4703bf1f5d07533018a6" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/622f551b-aa8c-4f8c-a04b-ada4ea6747bc.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/e5cc5732-3a27-4138-9713-46f3d0b0d0cf.png"
          class="img_6" mode="aspectFit"></image> </view>
      <view class="list_1 list_1_e284371dcb3548568f6eee6bd1db9191">
        <image src="@/static/images/d175d8a5-95b5-40ad-a739-e2270ec93b45.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/66bdc79e-3834-4032-a747-00e07534f7b0.png"
          class="img_6 img_6_70dc3dad97f145f9ad2cbc7b71bb6bda" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/83d47f20-56dd-4aeb-abd4-b8fbd0626d5d.png"
          class="img_5 img_5_0ff1f0bfb189472cac86a93d61a18ba3" mode="aspectFit"></image>
        <image src="@/static/images/720868ea-3a60-4b4a-ba58-394cb92be8d4.png"
          class="img_6 img_6_e562f5384a2d41b9a6bbdf73a90356ac" mode="aspectFit"></image>
      </view>
      <view class="list_1 list_1_ec290238858943be8334aaf5a8686e49">
        <image src="@/static/images/d88e10b5-ba5c-4e8d-b7d0-6a0b2a131fa1.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/e0a4874a-0ee9-4ec9-b563-4d79fda91693.png"
          class="img_6 img_6_28ae2627d4984d5fb7e29e45990634fa" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.app {
  width: 750rpx;
  height: 1454rpx;
  background-color: rgb(255, 255, 255);
  padding-top: 338rpx;
  padding-bottom: 288rpx;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  .list_3 {
    width: 710rpx;
    height: 374rpx;
    background-color: rgb(255, 255, 255);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    .list_1 {
      width: 710rpx;
      height: 40rpx;
      margin-top: 10rpx;
      padding-right: 44rpx;
      padding-left: 48rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6 {
        height: 40rpx;
        width: 50rpx;
      }
      .img_5_0ff1f0bfb189472cac86a93d61a18ba3 {
        height: 40rpx;
        width: 88rpx;
      }
      .img_6_e562f5384a2d41b9a6bbdf73a90356ac {
        height: 40rpx;
        width: 116rpx;
      }
    }
    .list_1_be493238ef7e464eb8a3d8ed1269b114 {
      height: 44rpx;
      margin-top: 30rpx;
      padding-right: 48rpx;
      .img_5 {
        height: 44rpx;
        width: 132rpx;
      }
      .warp_2 {
        width: 108rpx;
        height: 44rpx;
        background-color: rgb(246, 65, 74);
        border-radius: 22rpx 22rpx 0rpx 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .img_2 {
          height: 34rpx;
          width: 76rpx;
        }
      }
    }
    .list_1_c2231e2d9f3d4fa588878d5f332c3f93 {
      margin-top: 30rpx;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6_59a5ab7e8def4703bf1f5d07533018a6 {
        height: 40rpx;
        width: 66rpx;
      }
    }
    .list_1_e284371dcb3548568f6eee6bd1db9191 {
      padding-right: 46rpx;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6_70dc3dad97f145f9ad2cbc7b71bb6bda {
        height: 40rpx;
        width: 38rpx;
      }
    }
    .list_1_ec290238858943be8334aaf5a8686e49 {
      height: 70rpx;
      padding-right: 38rpx;
      padding-bottom: 30rpx;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6_28ae2627d4984d5fb7e29e45990634fa {
        height: 40rpx;
        width: 168rpx;
      }
    }
  }
}
</style>
```

使用MasterGo导入官方demo 的Sketch文件，然后再使用MasterGo导出Sketch文件  使用lens 解析输出的文件代码就变成了这个样子
```
<template>
  <view class="app">
    <view class="list_3">
      <view class="list_1 list_1_be493238ef7e464eb8a3d8ed1269b114">
        <image src="@/static/images/3bc429c3-5b15-47f7-aaf7-78d0297beb0c.png"
          class="img_5" mode="aspectFit"></image>
        <view class="warp_2">
          <image src="@/static/images/69bad9ea-04c3-4ec5-b392-34cf2de0cbf2.png"
            class="img_2" mode="aspectFit"></image> </view>
      </view>
      <view class="list_1 list_1_c2231e2d9f3d4fa588878d5f332c3f93">
        <image src="@/static/images/13fbb2c7-bd98-4a9b-951b-87fd87a0a534.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/17c74818-8ed0-4ec3-bdd1-2969db417ee8.png"
          class="img_6 img_6_59a5ab7e8def4703bf1f5d07533018a6" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/508332c1-8333-45c3-9f64-18c6404f488f.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/cce15c60-a4a0-4376-b6b0-0bc7af9808fd.png"
          class="img_6" mode="aspectFit"></image> </view>
      <view class="list_1 list_1_e284371dcb3548568f6eee6bd1db9191">
        <image src="@/static/images/954703f9-1046-473e-9bfd-f50390acdb5c.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/bc47206b-d282-44e7-9b64-bc28f9cdca52.png"
          class="img_6 img_6_70dc3dad97f145f9ad2cbc7b71bb6bda" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/d4590324-53c1-42a0-a554-8b8d043aa06e.png"
          class="img_5 img_5_0ff1f0bfb189472cac86a93d61a18ba3" mode="aspectFit"></image>
        <image src="@/static/images/05ec00d7-c098-4b92-8ae2-da6e520c06e5.png"
          class="img_6 img_6_e562f5384a2d41b9a6bbdf73a90356ac" mode="aspectFit"></image>
      </view>
      <view class="list_1 list_1_ec290238858943be8334aaf5a8686e49">
        <image src="@/static/images/45c926d1-6d59-49d8-8f94-e0e19397a3aa.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/58cb3629-82cb-4f8b-b1cb-eb3684f765da.png"
          class="img_6 img_6_28ae2627d4984d5fb7e29e45990634fa" mode="aspectFit"></image>
      </view>
    </view>
    <view class="list_3">
      <view class="list_1 list_1_be493238ef7e464eb8a3d8ed1269b114">
        <image src="@/static/images/5be4d4ec-c26e-4764-aa20-9eb55229caea.png"
          class="img_5" mode="aspectFit"></image>
        <view class="warp_2">
          <image src="@/static/images/32a4e86f-b306-4ebf-bbb7-cc28f0d503a5.png"
            class="img_2" mode="aspectFit"></image> </view>
      </view>
      <view class="list_1 list_1_c2231e2d9f3d4fa588878d5f332c3f93">
        <image src="@/static/images/82e37c87-237d-4981-8ccb-a8b2448d310a.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/0788433d-249c-4665-b097-8caeafaeff3c.png"
          class="img_6 img_6_59a5ab7e8def4703bf1f5d07533018a6" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/622f551b-aa8c-4f8c-a04b-ada4ea6747bc.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/e5cc5732-3a27-4138-9713-46f3d0b0d0cf.png"
          class="img_6" mode="aspectFit"></image> </view>
      <view class="list_1 list_1_e284371dcb3548568f6eee6bd1db9191">
        <image src="@/static/images/d175d8a5-95b5-40ad-a739-e2270ec93b45.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/66bdc79e-3834-4032-a747-00e07534f7b0.png"
          class="img_6 img_6_70dc3dad97f145f9ad2cbc7b71bb6bda" mode="aspectFit"></image>
      </view>
      <view class="list_1">
        <image src="@/static/images/83d47f20-56dd-4aeb-abd4-b8fbd0626d5d.png"
          class="img_5 img_5_0ff1f0bfb189472cac86a93d61a18ba3" mode="aspectFit"></image>
        <image src="@/static/images/720868ea-3a60-4b4a-ba58-394cb92be8d4.png"
          class="img_6 img_6_e562f5384a2d41b9a6bbdf73a90356ac" mode="aspectFit"></image>
      </view>
      <view class="list_1 list_1_ec290238858943be8334aaf5a8686e49">
        <image src="@/static/images/d88e10b5-ba5c-4e8d-b7d0-6a0b2a131fa1.png"
          class="img_5" mode="aspectFit"></image>
        <image src="@/static/images/e0a4874a-0ee9-4ec9-b563-4d79fda91693.png"
          class="img_6 img_6_28ae2627d4984d5fb7e29e45990634fa" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.app {
  width: 750rpx;
  height: 1454rpx;
  background-color: rgb(255, 255, 255);
  padding-top: 338rpx;
  padding-bottom: 288rpx;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  .list_3 {
    width: 710rpx;
    height: 374rpx;
    background-color: rgb(255, 255, 255);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    .list_1 {
      width: 710rpx;
      height: 40rpx;
      margin-top: 10rpx;
      padding-right: 44rpx;
      padding-left: 48rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6 {
        height: 40rpx;
        width: 50rpx;
      }
      .img_5_0ff1f0bfb189472cac86a93d61a18ba3 {
        height: 40rpx;
        width: 88rpx;
      }
      .img_6_e562f5384a2d41b9a6bbdf73a90356ac {
        height: 40rpx;
        width: 116rpx;
      }
    }
    .list_1_be493238ef7e464eb8a3d8ed1269b114 {
      height: 44rpx;
      margin-top: 30rpx;
      padding-right: 48rpx;
      .img_5 {
        height: 44rpx;
        width: 132rpx;
      }
      .warp_2 {
        width: 108rpx;
        height: 44rpx;
        background-color: rgb(246, 65, 74);
        border-radius: 22rpx 22rpx 0rpx 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .img_2 {
          height: 34rpx;
          width: 76rpx;
        }
      }
    }
    .list_1_c2231e2d9f3d4fa588878d5f332c3f93 {
      margin-top: 30rpx;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6_59a5ab7e8def4703bf1f5d07533018a6 {
        height: 40rpx;
        width: 66rpx;
      }
    }
    .list_1_e284371dcb3548568f6eee6bd1db9191 {
      padding-right: 46rpx;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6_70dc3dad97f145f9ad2cbc7b71bb6bda {
        height: 40rpx;
        width: 38rpx;
      }
    }
    .list_1_ec290238858943be8334aaf5a8686e49 {
      height: 70rpx;
      padding-right: 38rpx;
      padding-bottom: 30rpx;
      .img_5 {
        height: 40rpx;
        width: 116rpx;
      }
      .img_6_28ae2627d4984d5fb7e29e45990634fa {
        height: 40rpx;
        width: 168rpx;
      }
    }
  }
}
</style>
```

创建了任务

登录后才可以发表评论

JavaScript

1

https://gitee.com/d2-c/lens.git

git@gitee.com:d2-c/lens.git

d2-c

lens

lens