去掉观看量，点赞按钮移位

src/views/CommonDrawList.vue

@@ -55,6 +55,29 @@
       })"
     />
     <button
+      class="like"
+      :class="{
+        liked: hasLiked,
+      }"
+      @click="onClickLike"
+    >
+      <img
+        v-show="!hasLiked"
+        class=""
+        src="@/assets/images/like.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-show="hasLiked"
+        class=""
+        src="@/assets/images/liked.png"
+        alt=""
+        draggable="false"
+      >
+      <span class="txt">{{ likeCount }}</span>
+    </button>
+    <button
       class="return"
       @click="router.push({
         name: 'EntryList',
@@ -65,25 +88,6 @@
       v-show="isViewingBigImage"
       class="show-on-mask"
     >
-      <img
-        class="eye"
-        src="@/assets/images/eye.png"
-        alt=""
-        draggable="false"
-      >
-      <div class="view-count">
-        {{ viewCount }}
-      </div>
-      <button
-        class="like"
-        :class="{
-          liked: hasLiked,
-        }"
-        @click="onClickLike"
-      />
-      <div class="like-count">
-        {{ likeCount }}
-      </div>
       <button
         class="return"
         @click="closeViewer"
@@ -253,14 +257,49 @@ function onGroupUlWheel(e) {
   >button.game-entry{
     position: absolute;
     bottom: 0;
-    right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    width: 194px;
-    height: 86px;
+    right: calc(160 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(194 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background-image: url(@/assets/images/game-entry.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
   }
+  >button.like{
+    position: absolute;
+    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: #FFD73C;
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    border-radius: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    opacity: 1;
+    border: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
+    width: calc(88 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    >img{
+      width: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >.txt{
+      font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  >button.like.liked{
+    background: #fbf0d8;
+    >.txt{
+      color: rgba(215, 173, 13, 1);
+    }
+  }
   >button.return{
     position: absolute;
     bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -271,11 +310,13 @@ function onGroupUlWheel(e) {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    border-radius: 50%;
   }
   >ul.group-list{
     width: 100%;
     padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    padding-right: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     display: flex;
     align-items: center;
@@ -317,37 +358,6 @@ function onGroupUlWheel(e) {
     display: flex;
     flex-direction: column;
     align-items: center;
-    >img.eye{
-      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
-    >.view-count{
-      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #FFFFFF;
-      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
-    >button.like{
-      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      background-image: url(@/assets/images/like.png);
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center center;
-    }
-    >button.like.liked{
-      background-image: url(@/assets/images/liked.png);
-    }
-    >.like-count{
-      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #FFFFFF;
-      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
     >button.return {
       width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));