refactor: add close icon in qr and adjust clickable range

src/views/platform/profile/index.vue

@@ -62,45 +62,35 @@
           />
         </div>
         <div class="l-flex--row center has-top-padding">
-          <div class="o-app">
+          <div
+            class="o-app u-pointer"
+            @click="onClickWechat"
+          >
             <i class="o-icon wechat has-bg" />
-            <template v-if="wechat">
-              <div class="l-flex--row">
-                <div class="c-sibling-item u-color--info light">已绑定</div>
-                <div
-                  class="c-sibling-item u-pointer"
-                  @click="onClickWechat"
-                >
-                  解绑
-                </div>
-              </div>
-            </template>
             <div
-              v-else
-              class="u-pointer"
-              @click="onClickWechat"
+              v-if="wechat"
+              class="l-flex--row"
             >
+              <div class="c-sibling-item u-color--info light">已绑定</div>
+              <div class="c-sibling-item u-pointer">解绑</div>
+            </div>
+            <div v-else>
               绑定微信
             </div>
           </div>
-          <div class="o-app">
+          <div
+            class="o-app u-pointer"
+            @click="onClickApplet"
+          >
             <i class="o-icon applet has-bg" />
-            <template v-if="applet">
-              <div class="l-flex--row">
-                <div class="c-sibling-item u-color--info light">已绑定</div>
-                <div
-                  class="c-sibling-item u-pointer"
-                  @click="onClickApplet"
-                >
-                  解绑
-                </div>
-              </div>
-            </template>
             <div
-              v-else
-              class="u-pointer"
-              @click="onClickApplet"
+              v-if="applet"
+              class="l-flex--row"
             >
+              <div class="c-sibling-item u-color--info light">已绑定</div>
+              <div class="c-sibling-item u-pointer">解绑</div>
+            </div>
+            <div v-else>
               绑定小程序
             </div>
           </div>
@@ -110,16 +100,20 @@
     <el-dialog
       :visible.sync="showQr"
       custom-class="c-preview"
-      @close="onCloseQr"
+      :close-on-click-modal="false"
     >
       <div class="c-wechat has-padding">
-        <div class="l-flex--row center has-bottom-padding">
+        <div class="l-flex--row center c-sibling-item--v u-relative">
           <i class="c-sibling-item o-icon medium wechat has-bg" />
           <span class="c-sibling-item u-color--black u-bold">请使用微信扫一扫</span>
+          <i
+            class="c-wechat__close o-icon medium el-icon-close has-active u-bold u-pointer"
+            @click="onCloseQr"
+          />
         </div>
         <div
           v-loading="qrOptions.loading"
-          class="c-wechat__wrapper"
+          class="c-sibling-item--v far c-wechat__wrapper"
           :class="{ retry: qrOptions.retry }"
           @click="getQr"
         >
@@ -578,6 +572,13 @@ export default {
   border-radius: $radius;
   background-color: #fff;
 
+  &__close {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
   &__wrapper {
     position: relative;
     width: 240px;