333

src/components/buy/guidelines.vue

 <template>
   <div class="guidelines">
     <!--    <div class="" @click="micromessengerClick">{{ this.micromessenger == 0 ? '浏览器' : '支付宝' }}</div>-->
-    <div class="jiao">点击右上角...</div>
+    <div class="jiao" :style="{ opacity: micromessenger == 0 ? '1' : '0' }">点击右上角...</div>
+    <div class="open-browser" :style="{ opacity: micromessenger == 0 ? '1' : '0' }">选择 <span>在浏览器中打开</span></div>
+    <div class="wancheng" :style="{ opacity: micromessenger == 0 ? '1' : '0' }">以完成支付</div>
+    <div class="tup">
+      <div class="liulanqi"></div>
+      <div class="tup-text">{{ micromessenger == 0 ? '在浏览器中打开' : '支付宝' }}</div>
+    </div>
   </div>
 </template>
 
@@ -57,6 +63,47 @@
       font-weight: 500;
       color: #333333;
     }
+
+    .open-browser {
+      padding-top: 16 * @toVw;
+      font-size: 15 * @toVw;
+      color: #666666;
+      span {
+        font-size: 17 * @toVw;
+        font-weight: 500;
+        color: #40A9FF;
+      }
+    }
+
+    .wancheng {
+      padding-top: 16 * @toVw;
+      font-size: 17 * @toVw;
+      font-weight: 500;
+      color: #333333;
+    }
+
+    .tup {
+      width: 152 * @toVw;
+      height: 152 * @toVw;
+      margin-top: 35 * @toVw;
+      padding-top: 36 * @toVw;;
+      background: #EFEEF3;
+      border-radius: 100px;
+      box-sizing: border-box;
+
+      .liulanqi {
+        width: 44 * @toVw;
+        height: 44 * @toVw;
+        background: red;
+        border-radius: 100px;
+      }
+
+      .tup-text {
+        padding-top: 11 * @toVw;
+        font-size: 15 * @toVw;
+        color: #666666;
+      }
+    }
   }
 
 </style>