1

taobao_mini/client/app.acss

+page {
+  background: #f7f7f7;
+  font-family: 'Helvetica Neue', Helvetica, Hiragino Sans GB, 'Microsoft Yahei', STHeiTi, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.d-flex {
+  display: flex
+}
+
+.d-flex__item {
+  flex: 1;
+}
+
+.d-flex--aligncenter {
+  align-items: center;
+}
+
+
+.modal-animate-fade-in {
+  opacity: 0;
+  animation: modalAnimateFadeIn .3s forwards;
+}
+
+.modal-animate-zoom-in {
+  transform: scale(0);
+  animation: modalAnimateZoomIn .3s forwards;
+}
+
+.modal-animate-fly-in {
+  transform: translateY(100%);
+  animation: modalAnimateFlyIn .3s forwards;
+}
+
+.btn-animate-pulse {
+  animation: btnAnimatePulse .8s infinite;
+}
+
+@keyframes modalAnimateFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modalAnimateZoomIn {
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes modalAnimateFlyIn {
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes btnAnimatePulse {
+  from {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  to {
+    transform: scale(1);
+  }
+}
\ No newline at end of file

taobao_mini/client/app.json

 {
     "pages": [
+        "pages/pageshop/pageshop",
         "pages/index/index",
         "pages/pagecanvas/pagecanvas",
-        "pages/pageshop/pageshop",
         "pages/myprize/myprize"
     ],
     "window": {

taobao_mini/client/pages/pageshop/pageshop.acss

-.shop {
-}
 .shop-page {
   width: 100vw;
   height: 100vh;
@@ -10,6 +8,26 @@
   overflow: hidden;
   /* background: url('') no-repeat center top/cover; */
 }
+
+.shop-wrap {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  top: 254rpx;
+  padding-left: 54rpx;
+  right:0;
+  overflow-x: auto;
+}
+
+.shop-list {
+  width: 100%;
+  height: auto;
+  /* background-color: black; */
+  display: flex;
+  flex-flow: row wrap;
+  align-content: flex-start;
+}
+
 .shop .shopbg {
   width: 750rpx;
   height: 1624rpx;
@@ -17,15 +35,21 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+
 .shop .shopitem {
+  position: relative;
+  /* display: flex;
+  justify-content: center;
+  align-items: center; */
+  box-sizing: border-box;
   width: 309rpx;
   height: 324rpx;
   opacity: 1;
-  left: 54rpx;
-  top: 254rpx;
-  position: absolute;
-  transform-origin: 0rpx 0rpx 0rpx;
+  margin: 0 30rpx 30rpx 0;
+  /* left: 54rpx;
+  top: 254rpx; */
 }
+
 .shop .shopitem .shopitem_bg2 {
   width: 309rpx;
   height: 324rpx;
@@ -33,6 +57,7 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+
 .shop .shopitem .shopitem_bg1 {
   width: 224rpx;
   height: 161rpx;
@@ -42,6 +67,7 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+
 .shop .shopitem .shopitem_disabledbtn {
   width: 209rpx;
   height: 60rpx;
@@ -51,6 +77,7 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+
 .shop .shopitem .shopitem_buybtn {
   width: 217rpx;
   height: 68rpx;
@@ -60,6 +87,7 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+
 .shop .shopitem .shopitem_txt {
   width: 88rpx;
   height: 20rpx;
@@ -71,6 +99,7 @@
   font-size: 21.79723rpx;
   color: #474543;
 }
+
 .shop .shopitem .shopitem_name {
   width: 209rpx;
   height: 23rpx;
@@ -81,7 +110,11 @@
   transform-origin: 0rpx 0rpx 0rpx;
   font-size: 20.12052rpx;
   color: #474543;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+
 .shop .shop_gold {
   width: 98rpx;
   height: 21rpx;
@@ -93,6 +126,7 @@
   font-size: 23.47394rpx;
   color: #7b644e;
 }
+
 .shop .shop_backbtn {
   width: 67rpx;
   height: 67rpx;
@@ -101,4 +135,4 @@
   top: 41rpx;
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
-}
+}
\ No newline at end of file

taobao_mini/client/pages/pageshop/pageshop.axml

 <view class="shop">
   <view class="shop-page" style="{{{'background':`url(${resList['da6bc001-768a-4b1c-95af-a9a8853ef6f9'].url}) no-repeat center top/cover`}}}">
-    <!-- <image class="shopbg" src={{resList['da6bc001-768a-4b1c-95af-a9a8853ef6f9'].url}} /> -->
-    <view class="shopitem">
-      <image class="shopitem_bg2" src={{resList['a5230993-3870-4a91-bdd1-ffc4782770d0'].url}} />
-      <image class="shopitem_bg1" src={{resList['dd4ee407-16e4-4cb7-9eba-365b33f466a3'].url}} />
-      <image class="shopitem_disabledbtn" src={{resList['8d08152f-311a-446a-a15a-ff02ebed0139'].url}} />
-      <image class="shopitem_buybtn" src={{resList['dd8ea96e-e33f-4f5d-b31f-29f332c3c867'].url}} />
-      <label class="shopitem_txt">101010</label>
-      <label class="shopitem_name">商品名商品名商品名</label>
-    </view>
     <label class="shop_gold">101010</label>
     <image a:if={{false}} class="shop_backbtn" src={{resList['bdab9777-8a4d-4659-ba23-66aaddb7fa5b'].url}} />
+    <view class="shop-wrap">
+      <view class="shop-list">
+        <!--<image class="shopbg" src={{resList['da6bc001-768a-4b1c-95af-a9a8853ef6f9'].url}} /> -->
+        <view class="shopitem" a:for="{{list}}">
+          <image class="shopitem_bg2" src={{resList['a5230993-3870-4a91-bdd1-ffc4782770d0'].url}} />
+          <image class="shopitem_bg1" src={{resList['dd4ee407-16e4-4cb7-9eba-365b33f466a3'].url}} />
+          <image class="shopitem_disabledbtn" src={{resList['8d08152f-311a-446a-a15a-ff02ebed0139'].url}} />
+          <image class="shopitem_buybtn" src={{resList['dd8ea96e-e33f-4f5d-b31f-29f332c3c867'].url}} />
+          <label class="shopitem_txt">101010</label>
+          <label class="shopitem_name">start{{item}}eeeeeeend</label>
+        </view>
+       
+      </view>
+    </view>
   </view>
 </view>
\ No newline at end of file

taobao_mini/client/pages/pageshop/pageshop.js

@@ -3,7 +3,9 @@
 import resList from '../../resconfig/resList'; //import API from '../../api';
 
 Page({
-  data: {},
+  data: {
+    list:[1,2,3,4,5]
+  },
 
   onLoad(props) {
     this.setData( {

taobao_mini/client/resconfig/resList.js

 const resList = {
+
+
+  '137b39ef-0c25-4991-a57e-0308daaec2dd': {
+    name: 'levelup_light',
+    ext: '.png',
+    uuid: '137b39ef-0c25-4991-a57e-0308daaec2dd',
+    url: '//yun.duiba.com.cn/spark/assets/0928fc8aa144851335f0588f4418df0a12f4e232.png'
+  },
+  'bca418af-89d1-4fe0-90a8-ae8581ad328c': {
+    name: 'levelup_bg',
+    ext: '.png',
+    uuid: 'bca418af-89d1-4fe0-90a8-ae8581ad328c',
+    url: '//yun.duiba.com.cn/spark/assets/2b70fadb540ea098ab1305551d4fdc4d96b050ed.png'
+  },
+  'c2adf081-7720-4814-ad9e-e28d13522ee0': {
+    name: 'levelup_closebtn',
+    ext: '.png',
+    uuid: 'c2adf081-7720-4814-ad9e-e28d13522ee0',
+    url: '//yun.duiba.com.cn/spark/assets/2b22fec0227db9f7df6ee42e5161939aa4f9a06f.png'
+  },
+  '9de58772-9830-4e72-aba8-b07802266b5d': {
+    name: 'levelup_bg2',
+    ext: '.png',
+    uuid: '9de58772-9830-4e72-aba8-b07802266b5d',
+    url: '//yun.duiba.com.cn/spark/assets/3626273026f000df09d73b2b37a92aca68ed7feb.png'
+  },
+  'be93e436-d2eb-4c29-922c-577810ed6571': {
+    name: 'levelup_title',
+    ext: '.png',
+    uuid: 'be93e436-d2eb-4c29-922c-577810ed6571',
+    url: '//yun.duiba.com.cn/spark/assets/f88ebf9dad3fb309575d72f91ab0a8704291574f.png'
+  },
+  'b1c40894-4d50-45e6-8fc8-118ef6d9d598': {
+    name: 'levelup_imgbg',
+    ext: '.png',
+    uuid: 'b1c40894-4d50-45e6-8fc8-118ef6d9d598',
+    url: '//yun.duiba.com.cn/spark/assets/adbbe665822e7e67c405ee5a62b56859521ab715.png'
+  },
+  '8da5fe13-41a3-4b5b-b079-938e0c7eef5a': {
+    name: 'levelup_btn',
+    ext: '.png',
+    uuid: '8da5fe13-41a3-4b5b-b079-938e0c7eef5a',
+    url: '//yun.duiba.com.cn/spark/assets/5193855f40ff72dea9f48022083a6a35240b6dc6.png'
+  },
+
+
+  
+
   'da6bc001-768a-4b1c-95af-a9a8853ef6f9': {
     name: 'shopbg',
     ext: '.png',