1

@@ -9,20 +9,22 @@
     <van-row>
       <van-list v-model="isLoading" :finished="!hasMore" finished-text @load="refreshMore">
         <van-cell v-for="(itemList,index1) in worksList" :key="index1">
-          <van-col span="12" v-for="(item,index2) in itemList" :key="index2">
-            <div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
-              <div
-                class="worksThumb"
-                v-bind:style="{backgroundImage:'url(' + (item.worksList && item.worksList[0] ? item.worksList[0].worksUrl : '') + ')'}"
-              ></div>
-              <div class="worksDescription">
-                <div class="worksNo">{{item.worksNo}}</div>
-                <div class="worksName">{{item.name}}</div>
-                <div class="worksPriaseNo">{{item.praiseNumber}}</div>
-                <div class="worksPraise"></div>
+          <div class="cell">
+            <div v-for="(item,index2) in itemList" :key="index2">
+              <div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
+                <div
+                  class="worksThumb"
+                  v-bind:style="{backgroundImage:'url(' + (item.worksList && item.worksList[0] ? item.worksList[0].worksUrl : '') + ')'}"
+                ></div>
+                <div class="worksDescription">
+                  <div class="worksNo">{{item.worksNo}}</div>
+                  <div class="worksName">{{item.name}}</div>
+                  <div class="worksPriaseNo">{{item.praiseNumber}}</div>
+                  <div class="worksPraise"></div>
+                </div>
               </div>
             </div>
-          </van-col>
+          </div>
         </van-cell>
 
         <van-col span="24" v-if="worksList.length == 0 && !isLoading">
@@ -33,6 +35,8 @@
             <div class="empty-message">没有搜到任何作品 ！</div>
           </div>
         </van-col>
+
+        <div class="bottom-line"></div>
       </van-list>
     </van-row>
   </div>
@@ -175,10 +179,10 @@ export default {
 
   .input-panel {
     width: 450px;
-    height: 52px;
+    height: 55px;
     border: 2px solid #82acae;
     background-color: #e8e8e8;
-    line-height: 54px;
+    line-height: 55px;
     border-radius: 26px;
     display: flex;
     input {
@@ -212,19 +216,25 @@ export default {
 .van-cell {
   padding: 0;
 }
+.cell {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
 
 .worksItem {
-  margin: 0 auto 20px auto;
-  width: 300px;
-  height: 275px;
+  margin: 0 auto 30px auto;
+  width: 298px;
+  height: 215px;
   border: solid 1px #d1d0d0;
-  box-shadow: 2px 2px 2px #d1d0d0;
+  box-shadow: 0 0 2px #d1d0d0;
   border-radius: 20px;
   overflow: hidden;
 
   .worksThumb {
     width: 300px;
-    height: 215px;
+    height: 168px;
     background-size: cover;
   }
   .worksDescription {
@@ -234,30 +244,33 @@ export default {
 
     div {
       font-size: 22px;
-      height: 60px;
-      line-height: 60px;
+      height: 47px;
+      line-height: 47px;
       text-align: left;
       text-overflow: ellipsis;
       overflow: hidden;
-      font-weight: 600;
+      font-weight: 400;
     }
 
     .worksNo {
+      padding-left: 10px;
       width: 55px;
     }
     .worksName {
-      width: 133px;
+      flex: 1;
+      padding: 0 10px;
     }
     .worksPriaseNo {
       width: 60px;
       text-align: right;
-      padding-right: 5px;
+      padding-right: 10px;
     }
     .worksPraise {
       width: 28px;
       height: 24px;
       background: url(../../../assets/imgs/list-heart-red.png) no-repeat;
       background-size: 100%;
+      margin-right: 10px;
     }
   }
 }
@@ -274,4 +287,7 @@ export default {
     color: #a1a1a1;
   }
 }
+.bottom-line {
+  height: 200px;
+}
 </style>

@@ -160,20 +160,20 @@ export default {
 
   .swipe {
     width: 630px;
-    height: 451px;
+    height: 320px;
     margin: auto;
     border: 2px solid #82acae;
     border-radius: 30px;
     overflow: hidden;
 
     .img {
-      height: 451px;
+      height: 320px;
       width: 630px;
       background-size: cover;
     }
 
     video {
-      height: 451px;
+      height: 320px;
       width: 630px;
     }
   }
@@ -292,10 +292,11 @@ export default {
 
 .btn-tips {
   width: 640px;
-  text-align: left;
+  text-align: center;
   font-size: 24px;
   color: #303531;
   margin: auto;
+  margin-top: 18px;
 }
 
 .btn-back {

@@ -200,8 +200,8 @@ export default {
   }
 
   .swipe {
-    width: 265px;
-    height: 200px;
+    width: 293px;
+    height: 196px;
     border: 2px solid #45a402;
     border-radius: 20px;
     margin: 32px;
@@ -209,21 +209,21 @@ export default {
 
     div {
       line-height: 200px;
-      height: 200px;
       text-align: center;
-      width: 265px;
+      width: 293px;
+      height: 196px;
     }
     .img {
       margin: auto;
       //   width: 235px;
-      height: 190px;
-      width: 265px;
+      width: 293px;
+      height: 196px;
       background-size: cover;
     }
 
     video {
-      height: 190px;
-      width: 265px;
+      width: 293px;
+      height: 196px;
     }
   }
 

@@ -5,7 +5,7 @@
 
     <works-list-view
       v-model="formData"
-      v-if="init && listVisiabled"
+      v-if="init"
       v-show="listVisiabled"
       v-on:showRule="showRuleHandler"
       v-on:worksDetail="showWorksDetail"
@@ -21,7 +21,7 @@
 
     <biz-model v-model="model"></biz-model>
 
-    <div class="bottom-line"></div>
+    <!-- <div class="bottom-line"></div> -->
 
     <!-- 分享蒙层 -->
     <div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">

@@ -12,6 +12,7 @@
 
     <!-- 底部操作栏 -->
     <div class="action-bar">
+      <div class="button" @click="_cancel">取消</div>
       <div class="button" @click="_clipper">确认</div>
     </div>
 
@@ -70,7 +71,10 @@
     height: 80px;
     line-height: 80px;
     border-top: 1px solid rgba(256, 256, 256, 0.3);
+    display: flex;
+    justify-content: center;
     .button {
+      width: 50%;
       line-height: 80px;
       height: 80px;
       font-size: 26px;
@@ -189,7 +193,7 @@ export default {
       // }
 
       clipperWidth = clipperClientRect.width;
-      clipperHeight = clipperWidth / 1.375;
+      clipperHeight = clipperWidth / 1.96875;
 
       // if (clipperHeight < 0 || clipperHeight > clipperClientRect.height) {
       //     clipperHeight = 100
@@ -441,7 +445,7 @@ export default {
       // console.log("this.actionBarHeight===", this.actionBarHeight)
 
       if (w < maxW && h < maxH) {
-        if (w > 1.375 * h) {
+        if (w > 1.96875 * h) {
           eH = maxH;
           eW = (w / h) * maxH;
         } else {

@@ -21,7 +21,7 @@
       v-if="imageData.show"
       :img="imageData.data"
       :clipper-img-width="750"
-      :clipper-img-height="537"
+      :clipper-img-height="380.95"
       @ok="imageClipperHandler"
       @cancel="imageData.show=false"
     ></image-clipper>

@@ -166,7 +166,7 @@ export default {
 
   .swipe {
     width: 630px;
-    height: 451px;
+    height: 320px;
     margin: auto;
     margin-top: 15px;
     border: 2px solid #82acae;
@@ -174,13 +174,13 @@ export default {
     overflow: hidden;
 
     .img {
-      height: 451px;
+      height: 320px;
       width: 630px;
       background-size: cover;
     }
 
     video {
-      height: 451px;
+      height: 320px;
       width: 630px;
     }
   }