2
0

11 Commits 6cac877abc ... 9d6b5e1c2d

Autor SHA1 Mensagem Data
  panyong 9d6b5e1c2d Merge branch 'shining-project' há 2 anos atrás
  panyong deca538c35 始宁农业小程序:代码优化 há 2 anos atrás
  panyong bf8e38ca88 Merge branch 'shining-project' há 2 anos atrás
  panyong 24b2699b0b 始宁农业小程序:代码优化 há 2 anos atrás
  panyong 69296188c3 始宁农业小程序:代码优化 há 2 anos atrás
  panyong b784e1ea6e 始宁农业小程序:代码优化 há 2 anos atrás
  panyong 75ea9a453b 始宁农业:商户信息修改 há 2 anos atrás
  panyong c6efebadf9 始宁农业小程序:瀑布流优化 há 2 anos atrás
  panyong 71962bdfe4 Merge branch 'H5-tuotuo' há 2 anos atrás
  panyong 307f003186 分支改名测试 há 2 anos atrás
  panyong a3490326c6 aa há 2 anos atrás

+ 12 - 0
.run/dev_loan.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="dev_loan" type="js.build_tools.npm" singleton="false">
+    <package-json value="$PROJECT_DIR$/htmldev/loan/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="dev" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

+ 3 - 1
README.md

@@ -1 +1,3 @@
-# loan
+# loan
+
+# 始宁农业

BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node1.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node2.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node3.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node4.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node5.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node6.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node7.jpg


BIN
htmldev/shiningVR/20221102/images/preview_nodeimage_node8.jpg


+ 94 - 70
htmldev/shiningVR/20221102/index.html

@@ -1,75 +1,99 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
-		<title>三界镇牛场山家庭农场</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
-		<meta name="apple-mobile-web-app-capable" content="yes" />
-		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
-		<meta name="mobile-web-app-capable" content="yes" />
-		<style type="text/css" title="Default">
-			body, div, h1, h2, h3, span, p {
-				font-family: Verdana,Arial,Helvetica,sans-serif;
-			}
-			/* fullscreen */
-			html {
-				height:100%;
-			}
-			body {
-				height:100%;
-				margin: 0px;
-				overflow:hidden; /* disable scrollbars */
-				font-size: 10pt;
-				-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight on tab for iOS/Android */
-			}
-			/* fix for scroll bars on webkit & >=Mac OS X Lion */ 
-			::-webkit-scrollbar {
-				background-color: rgba(0,0,0,0.5);
-				width: 0.75em;
-			}
-			::-webkit-scrollbar-thumb {
-    			background-color:  rgba(255,255,255,0.5);
-			}
-		</style>	
-	</head>
-	<body>
-<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
-		<script type="text/javascript" src="pano2vr_player.js">
-		</script>
-		<script type="text/javascript" src="skin.js">
-		</script>
-		<div id="container" style="width:100%;height:100%;overflow:hidden;">
-		<br>Loading...<br><br>
-		</div>
-		<script type="text/javascript">
-	
-			// create the panorama player with the container
-			pano=new pano2vrPlayer("container");
-			// add the skin object
-			skin=new pano2vrSkin(pano);
-			// load the configuration
-		
-			window.addEventListener("load", function() {
-				pano.readConfigUrlAsync("pano.xml");
-			});
-		</script>
-		<noscript>
-			<p><b>Please enable Javascript!</b></p>
-		</noscript>
-<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - --> 
-		<!-- Hack needed to hide the url bar on iOS 9, iPhone 5s --> 
-		<div style="width:1px;height:1px;"></div>
-    <style>
-        .ggskin.ggskin_scrollarea_hscrollbg {
-           height: 6px !important;
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <title>三界镇牛场山家庭农场</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <style type="text/css" title="Default">
+        body, div, h1, h2, h3, span, p {
+            font-family: Verdana, Arial, Helvetica, sans-serif;
+        }
+
+        /* fullscreen */
+        html {
+            height: 100%;
+        }
+
+        body {
+            height: 100%;
+            margin: 0px;
+            overflow: hidden; /* disable scrollbars */
+            font-size: 10pt;
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight on tab for iOS/Android */
+        }
+
+        /* fix for scroll bars on webkit & >=Mac OS X Lion */
+        ::-webkit-scrollbar {
+            background-color: rgba(0, 0, 0, 0.5);
+            width: 0.75em;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: rgba(255, 255, 255, 0.5);
         }
     </style>
-	<script>
-		window.onload = function () {
-			document.querySelectorAll('.ggskin.ggskin_scrollarea')[0].style.visibility='visible'
-			document.querySelectorAll('.ggskin.ggskin_scrollarea')[0].style.opacity=1
-		}
-	</script>
-	</body>
+</head>
+<body>
+<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
+<script type="text/javascript" src="pano2vr_player.js">
+</script>
+<script type="text/javascript" src="skin.js?ts=202211062328">
+</script>
+<div id="container" style="width:100%;height:100%;overflow:hidden;">
+    <br>Loading...<br><br>
+</div>
+<script type="text/javascript">
+
+  // create the panorama player with the container
+  pano = new pano2vrPlayer('container')
+  // add the skin object
+  skin = new pano2vrSkin(pano)
+  // load the configuration
+
+  window.addEventListener('load', function () {
+    pano.readConfigUrlAsync('pano.xml')
+  })
+</script>
+<noscript>
+    <p><b>Please enable Javascript!</b></p>
+</noscript>
+<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
+<!-- Hack needed to hide the url bar on iOS 9, iPhone 5s -->
+<div style="width:1px;height:1px;"></div>
+<style>
+    .ggskin.ggskin_scrollarea_hscrollbg {
+        opacity: 0;
+        height: 6px !important;
+    }
+
+    .ggskin.ggskin_scrollarea {
+        left: 0 !important;
+        bottom: 30px !important;
+        width: 100% !important;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .ggskin.ggskin_scrollarea > div {
+        margin-top: -31px !important;
+    }
+
+    .ggskin.ggskin_container {
+        opacity: 0;
+    }
+
+    .ggskin.ggskin_svg img {
+        visibility: hidden;
+    }
+</style>
+<script>
+  window.onload = function () {
+    document.querySelectorAll('.ggskin.ggskin_scrollarea')[0].style.visibility = 'visible'
+    document.querySelectorAll('.ggskin.ggskin_scrollarea')[0].style.opacity = 1
+  }
+</script>
+</body>
 </html>

+ 3 - 3
htmldev/shiningVR/20221102/skin.js

@@ -14084,7 +14084,7 @@ function pano2vrSkin(player,base) {
 		el=me._thumbnail_nodeimage=document.createElement('div');
 		els=me._thumbnail_nodeimage__img=document.createElement('img');
 		els.className='ggskin ggskin_nodeimage';
-		els.setAttribute('src',basePath + "images/preview_nodeimage_" + nodeId + ".jpg");
+		els.setAttribute('src',basePath + "images/preview_nodeimage_" + nodeId + ".jpg?ts=202211062328");
 		el.ggNodeId=nodeId;
 		els.setAttribute('style','position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;-webkit-user-drag:none;pointer-events:none;thumbnail_nodeimage;');
 		els.className='ggskin ggskin_nodeimage';
@@ -14261,10 +14261,10 @@ function pano2vrSkin(player,base) {
 				me._thumbnail_active.ggCurrentLogicStateBorderColor = newLogicStateBorderColor;
 				me._thumbnail_active.style[domTransition]='border-color 0s';
 				if (me._thumbnail_active.ggCurrentLogicStateBorderColor == 0) {
-					me._thumbnail_active.style.borderColor="rgba(255,255,255,1)";
+					me._thumbnail_active.style.borderColor="#ff6800";
 				}
 				else if (me._thumbnail_active.ggCurrentLogicStateBorderColor == 1) {
-					me._thumbnail_active.style.borderColor="rgba(255,255,255,1)";
+					me._thumbnail_active.style.borderColor="#ff6800";
 				}
 				else {
 					me._thumbnail_active.style.borderColor="rgba(209,209,209,1)";

+ 4 - 3
htmldev/shiningWxMini/app.js

@@ -10,14 +10,14 @@ App({
     // 胶囊按钮位置信息
     const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
     // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
-    that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
-      menuButtonInfo.height + systemInfo.statusBarHeight
+    that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight
     that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right
     that.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight
     that.globalData.menuHeight = menuButtonInfo.height
     that.fetchSystemConfig()
     that.fetchUserData()
     checkUpdateVersion()
+    wx.removeStorage({ key: this.globalData.businessGoodsEditsStorageKey })
   },
   globalData: {
     wxMiniversion: 'v0.0.0',
@@ -69,7 +69,8 @@ App({
         name: '家庭农场',
         value: '2'
       }
-    ]
+    ],
+    businessGoodsEditsStorageKey: 'businessGoodsEdit'
   },
   async fetchUserData() {
     try {

+ 125 - 83
htmldev/shiningWxMini/pages/businessGoodsEdit/businessGoodsEdit.js

@@ -85,6 +85,13 @@ Page({
       wx.setNavigationBarTitle({
         title: '产品新增'
       })
+
+      try {
+        const response = await wx.getStorage({ key: app.globalData.businessGoodsEditsStorageKey })
+        if (response.errMsg === 'getStorage:ok' && /^{/.test(response.data)) {
+          this.setForm(JSON.parse(response.data))
+        }
+      } catch (err) {}
     }
     app.fetchSystemConfigCallback = () => {
       this.setUnitInColumns()
@@ -161,80 +168,10 @@ Page({
     } catch (err) {}
   },
   async fetchProductDetail() {
-    let temp = {}
     try {
       const { status, data, msg } = await getProductDetail(this.data.form.id)
       if (status) {
-        for (let key in data) {
-          let value = data[key]
-          if ((Array.isArray(value) && value.length >= 1) || (Object.prototype.toString.call(value) === '[object Object]') || (typeof value === 'string' && value) || typeof value === 'number') {
-
-            if (key === 'product_img_url') {
-              value = [
-                {
-                  'formkey': key,
-                  'url': value
-                }
-              ]
-            }
-            if (key === 'product_rotation_img_list' || key === 'product_detail_img_list') {
-              value = JSON.parse(value).map(item => {
-                return {
-                  'formkey': key,
-                  'url': item
-                }
-              })
-            }
-
-            if (key === 'product_category_id') {
-              const category = this.data.categoryList.filter(item => item.id === value)
-              if (category.length > 0) {
-                value = category[0]
-                temp['categoryInDefaultIndex'] = this.data.categoryList.findIndex(item => item.id === value)
-              }
-            }
-            if (key === 'product_brand_id') {
-              const brand = this.data.brandList.filter(item => item.id === value)
-              if (brand.length > 0) {
-                value = brand[0]
-                temp['brandInDefaultIndex'] = this.data.brandList.findIndex(item => item.id === value)
-              }
-            }
-
-            if (key === 'product_unit') {
-              const unit = this.data.unitInColumns.filter(item => item === value)
-              if (unit.length > 0) {
-                temp['unitInDefaultIndex'] = this.data.unitInColumns.findIndex(item => item === value)
-              }
-            }
-
-            if (key === 'product_all_price' || key === 'product_price') {
-              value = fen2Yuan(value)
-            }
-
-            if (key === 'product_sale_at') {
-              if (value === 0) {
-                value = '现货'
-              } else {
-                const { YYYY, MM, DD} = formatTs(value * 1000)
-
-                temp['saleAtType'] = '1'
-                temp['currentDate'] = value * 1000
-                value = `${YYYY}年${MM}月${DD}日`
-              }
-            }
-
-            if (key === 'product_check_status') {
-              temp['productCheckStatus'] = value
-            }
-
-            if (this.data.form.hasOwnProperty(key)) {
-              temp[`form.${key}`] = value
-            }
-          }
-        }
-
-        this.setData(temp)
+        this.setForm(data)
       } else {
         wx.showToast({
           title: msg,
@@ -245,6 +182,7 @@ Page({
   },
   ...uploadJS,
   uploadCallBack(res) {
+    const that = this
     const temp = res.map(item => {
       return {
         'url': item.url,
@@ -270,7 +208,9 @@ Page({
     }
 
     if (Object.keys(tempForm).length > 0) {
-      this.setData(tempForm)
+      this.setData(tempForm, () => {
+        that.updateBusinessGoodsEditsDataOfStorage(formkey, that.data.form[formkey].map(item => item.url))
+      })
     }
   },
   categoryShow() {
@@ -293,6 +233,8 @@ Page({
     this.setData({
       'form.product_category_id': value,
       categoryInDefaultIndex: index
+    }, () => {
+      this.updateBusinessGoodsEditsDataOfStorage('product_category_id', value.id)
     })
 
     this.categoryHide()
@@ -317,6 +259,8 @@ Page({
     this.setData({
       'form.product_brand_id': value,
       brandInDefaultIndex: index
+    }, () => {
+      this.updateBusinessGoodsEditsDataOfStorage('product_brand_id', value.id)
     })
 
     this.brandHide()
@@ -341,6 +285,8 @@ Page({
     this.setData({
       'form.product_unit': value,
       unitInDefaultIndex: index
+    }, () => {
+      this.updateBusinessGoodsEditsDataOfStorage('product_unit', value)
     })
 
     this.unitHide()
@@ -366,13 +312,8 @@ Page({
       default:
     }
 
-    this.setData(tempForm)
-  },
-  handleRadio(event) {
-    const { formkey, item } = event.currentTarget.dataset
-
-    this.setData({
-      [`form.${formkey}`]: item.value
+    this.setData(tempForm, () => {
+      this.updateBusinessGoodsEditsDataOfStorage(formkey, this.data.form[formkey])
     })
   },
   saleAtTypeShow() {
@@ -389,7 +330,9 @@ Page({
       tempForm['booSaleAt'] = true
     }
 
-    this.setData(tempForm)
+    this.setData(tempForm, () => {
+      this.updateBusinessGoodsEditsDataOfStorage('product_sale_at', 0)
+    })
   },
   handleSaleAtType(e) {
     const { type } = e.currentTarget.dataset
@@ -411,6 +354,8 @@ Page({
     this.setData({
       currentDate: event.detail,
       'form.product_sale_at': `${YYYY}年${MM}月${DD}日`
+    }, () => {
+      this.updateBusinessGoodsEditsDataOfStorage('product_sale_at', getTs(this.data.form.product_sale_at, 'YYYY年MM月DD日', 's'))
     })
 
     this.saleAtHide()
@@ -525,10 +470,10 @@ Page({
       } else {
         res = await postAddProduct(temp)
       }
-      const { status, data, msg } = res
+      const { status, msg } = res
       if (status) {
-        wx.redirectTo({
-          url: '/pages/businessGoodsManage/businessGoodsManage'
+        wx.navigateBack({
+          delta: 1
         })
       } else {
         wx.showToast({
@@ -544,5 +489,102 @@ Page({
     this.setData({
       unitInColumns: Array.isArray(product_unit_list) && product_unit_list.length > 0 ? product_unit_list : []
     })
+  },
+  setForm(data) {
+    let temp = {}
+    for (let key in data) {
+      let value = data[key]
+      if ((Array.isArray(value) && value.length >= 1) || (Object.prototype.toString.call(value) === '[object Object]') || (typeof value === 'string' && value) || typeof value === 'number') {
+        if (key === 'product_img_url') {
+          value = [
+            {
+              'formkey': key,
+              'url': Array.isArray(value) ? value.join('') : value
+            }
+          ]
+        }
+        if (key === 'product_rotation_img_list' || key === 'product_detail_img_list') {
+          value = (Array.isArray(value) ? value : JSON.parse(value)).map(item => {
+            return {
+              'formkey': key,
+              'url': item
+            }
+          })
+        }
+
+        if (key === 'product_category_id') {
+          const category = this.data.categoryList.filter(item => item.id === value)
+          if (category.length > 0) {
+            value = category[0]
+            temp['categoryInDefaultIndex'] = this.data.categoryList.findIndex(item => item.id === value.id)
+          }
+        }
+        if (key === 'product_brand_id') {
+          const brand = this.data.brandList.filter(item => item.id === value)
+          if (brand.length > 0) {
+            value = brand[0]
+            temp['brandInDefaultIndex'] = this.data.brandList.findIndex(item => item.id === value.id)
+          }
+        }
+
+        if (key === 'product_unit') {
+          const unit = this.data.unitInColumns.filter(item => item === value)
+          if (unit.length > 0) {
+            temp['unitInDefaultIndex'] = this.data.unitInColumns.findIndex(item => item === value)
+          }
+        }
+
+        if (key === 'product_all_price' || key === 'product_price') {
+          value = fen2Yuan(value)
+        }
+
+        if (key === 'product_sale_at') {
+          if (value === 0) {
+            value = '现货'
+          } else {
+            const { YYYY, MM, DD } = formatTs(value * 1000)
+
+            temp['saleAtType'] = '1'
+            temp['currentDate'] = value * 1000
+            value = `${YYYY}年${MM}月${DD}日`
+          }
+        }
+
+        if (key === 'product_check_status') {
+          temp['productCheckStatus'] = value
+        }
+
+        if (this.data.form.hasOwnProperty(key)) {
+          temp[`form.${key}`] = value
+        }
+      }
+    }
+
+    this.setData(temp)
+  },
+  async updateBusinessGoodsEditsDataOfStorage(formKey, value) {
+    const key = app.globalData.businessGoodsEditsStorageKey
+    let temp = {}
+
+    if (this.data.form.id) {
+      return
+    }
+
+    try {
+      const { data, errMsg } = await wx.getStorage({ key })
+      if (errMsg === 'getStorage:ok' && /^{/.test(data)) {
+        temp = JSON.parse(data)
+      }
+    } catch (e) {
+      temp = {}
+    }
+
+    wx.setStorage({
+      key,
+      data: JSON.stringify({
+        ...temp,
+        [formKey]: value
+      })
+    })
   }
 })

+ 2 - 2
htmldev/shiningWxMini/pages/businessInfo/businessInfo.js

@@ -376,8 +376,8 @@ Page({
     try {
       const { status, msg } = await modifyShopInfo(temp)
       if (status) {
-        wx.redirectTo({
-          url: '/pages/businessHome/businessHome'
+        wx.navigateBack({
+          delta: 1
         })
       } else {
         console.log(msg)

+ 8 - 25
htmldev/shiningWxMini/pages/goods/goods.js

@@ -1,8 +1,5 @@
 const pages = require('../../mixin/pages')
 const { getProductCategoryList } = require('../../api/common')
-let leftHeight = 0
-let rightHeight = 0
-let query = null
 
 Page({
 
@@ -127,32 +124,18 @@ Page({
       leftList,
       rightList
     } = this.data
-    query = wx.createSelectorQuery().in(this)
-    for (const item of list) {
-      if (leftHeight < rightHeight) {
+
+    list.forEach((item, index) => {
+      if (index % 2 === 0) {
         leftList.push(item)
-      } else if (leftHeight === rightHeight) {
-        leftList.length <= rightList ? leftList.push(item) : rightList.push(item)
       } else {
         rightList.push(item)
       }
-      await this.getBoxHeight(leftList, rightList)
-    }
-  },
-  getBoxHeight(leftList, rightList) {
-    return new Promise((resolve, reject) => {
-      this.setData({
-        leftList,
-        rightList
-      }, () => {
-        query.select('.waterfall-left').boundingClientRect()
-        query.select('.waterfall-right').boundingClientRect()
-        query.exec((res) => {
-          leftHeight = res[0].height
-          rightHeight = res[1].height
-          resolve()
-        })
-      })
+    })
+
+    this.setData({
+      leftList,
+      rightList
     })
   }
 })

+ 1 - 0
htmldev/shiningWxMini/pages/goods/goods.scss

@@ -25,6 +25,7 @@
 .waterfall-right {
   display: inline-block;
   width: 330rpx;
+  vertical-align: top;
 }
 
 .waterfall-right {

+ 9 - 28
htmldev/shiningWxMini/pages/home/home.js

@@ -3,9 +3,6 @@ const { getProductCategoryList } = require('../../api/common')
 const { getLunboList } = require('./api/index')
 const app = getApp()
 const tmplIds = 'uc9ztDw9ZscpNkMr52XUcB7YrDBk5AzjrRtNSu8Dq-4'
-let leftHeight = 0
-let rightHeight = 0
-let query = null
 
 Page({
 
@@ -59,9 +56,7 @@ Page({
     }
     this.fetchLunboList()
     await this.fetchProductCategoryList()
-    if (this.data.searchForm.category_id) {
-      this.fetchOrderList()
-    }
+    this.fetchOrderList()
   },
 
   /**
@@ -182,32 +177,18 @@ Page({
       leftList,
       rightList
     } = this.data
-    query = wx.createSelectorQuery().in(this)
-    for (const item of list) {
-      if (leftHeight < rightHeight) {
+
+    list.forEach((item, index) => {
+      if (index % 2 === 0) {
         leftList.push(item)
-      } else if (leftHeight === rightHeight) {
-        leftList.length <= rightList ? leftList.push(item) : rightList.push(item)
       } else {
         rightList.push(item)
       }
-      await this.getBoxHeight(leftList, rightList)
-    }
-  },
-  getBoxHeight(leftList, rightList) {
-    return new Promise((resolve, reject) => {
-      this.setData({
-        leftList,
-        rightList
-      }, () => {
-        query.select('.waterfall-left').boundingClientRect()
-        query.select('.waterfall-right').boundingClientRect()
-        query.exec((res) => {
-          leftHeight = res[0].height
-          rightHeight = res[1].height
-          resolve()
-        })
-      })
+    })
+
+    this.setData({
+      leftList,
+      rightList
     })
   },
   jumpLeavingAMessage() {

+ 1 - 0
htmldev/shiningWxMini/pages/home/home.wxss

@@ -221,6 +221,7 @@
 .waterfall-right {
   display: inline-block;
   width: 330rpx;
+  vertical-align: top;
 }
 
 .waterfall-right {