's'

src/pages/index/index.jsx

@@ -1,71 +1,16 @@
-import { Component } from "react";
 import Taro, { useRouter } from "@tarojs/taro";
 import { View, Text, Image, Button } from "@tarojs/components";
 import "./index.scss";
-import { AtTabBar } from "taro-ui";
+import React, { useEffect, useState, useRef } from "react";
-import React, { useCallback, useEffect, useState, useRef } from "react";
-import { AtGrid } from "taro-ui";
-import { Swiper, SwiperItem } from "@tarojs/components";
-import { AtCard } from "taro-ui";
-import { AtImagePicker } from "taro-ui";
 import { AtButton } from "taro-ui";
-import { AtSearchBar } from "taro-ui";
-import { Picker } from "@tarojs/components";
-import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
 import { marked } from "marked";
-import infoText from "../book/info.md";
+import indexMd from "./index.md";
-import bookText from "../book/book.md";
-import index from "./index.md";
-
-import {
-  AtModal,
-  AtModalHeader,
-  AtModalContent,
-  AtModalAction,
-  AtAvatar,
-  AtAccordion,
-} from "taro-ui";
-import { AtToast } from "taro-ui";
-import { AtIcon } from "taro-ui";
-import { VIEW } from "@tarojs/runtime";
 import "animate.css";
 import touxiang from "../../images/touxiang.png";
-import hackrobot from "../../images/hackrobot.png";
-
-import cat from "../../images/cat.jpg";
-import girl from "../../images/girl.jpg";
-
-import emoji from "../../images/emoji.png";
-import phone from "../../images/phone.png";
-// import robot from "../../images/robot.png";
-import nomad from "../../images/nomad.png";
-// import book from "../../images/book.png";
-import qrcode from "../../images/qrcode.png";
-
-import meetup from "../../images/meetup.jpg";
-import bookqr from "../../images/bookqr.jpg";
-import loft from "../../images/loft.png";
-import AIGC from "../../images/AIGC.png";
-import robot192 from "../../images/robot192.png";
-import youtube from "../../images/youtube.svg";
-import ssh from "../../images/ssh.svg";
-import robot from "../../images/robot.svg";
-import host from "../../images/host.svg";
-import ytGpt from "../../images/ytGpt.png";
-
-import demo from "../../images/demo.svg";
-import AI from "../../images/AI.png";
-import nomadro from "../../images/nomadro.png";
-import phone2 from "../../images/phone2.png";
-
 import code from "../../images/code.svg";
 import laptop from "../../images/laptop.svg";
 import travel from "../../images/travel.svg";
 import group from "../../images/group.svg";
-import planet from "../../images/avatar.jpg";
-
-import book from "../../images/book.svg";
-import youtubesvg from "../../images/youtube.svg";
 
 
 // PocketBase 配置
@@ -97,8 +42,7 @@ const Index = () => {
   const [bookpay, setbookpay] = useState(0);
 
   const [isWeChat, setisWeChat] = useState(false);
-  const [markText, setmarkText] = useState(paidType ? index : index);
+  const [headers, setHeaders] = useState([]);
-  const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
   const contentRef = useRef(null); // 用于获取渲染后的 DOM
 
   const router = useRouter(); // Taro 3+ 获取路由参数
@@ -124,14 +68,9 @@ const Index = () => {
       const h2Elements = contentRef.current.querySelectorAll("h2");
 
       const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
-      const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
-
       setHeaders(h1Texts);
-      // console.log("获取到的 H1 标题:"); // 控制台查看
-      console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
-      console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
     }
-  }, [markText]); // 监听 HTML 内容变化
+  }, [indexMd]); // 监听内容变化
   const getOpenidFromUrl = (url) => {
     const pattern = /[?&]openid=([^&#]+)/;
     const match = url.match(pattern);
@@ -221,9 +160,9 @@ const Index = () => {
   const getWxidFromUrl = () => {
     const urlParams = new URLSearchParams(window.location.search);
     const urlwxid = urlParams.get("wxid");
-    if (!!urlwxid) {
+    if (urlwxid) {
       setwxid(urlwxid);
-      window.localStorage.setItem("wxid", wxid);
+      window.localStorage.setItem("wxid", urlwxid);
       // 优先查询openid是否存在数据库
       Taro.request({
         method: "GET",
@@ -267,7 +206,7 @@ const Index = () => {
       // tg消息通知
       // tgMessage();
     }
-    return wxid;
+    return urlwxid;
   };
 
   // 绑定wxid与openid
@@ -441,12 +380,11 @@ const Index = () => {
 
 
   useEffect(() => {
-    // 判断是否在微信
+    isWeChatFun();
-    isWeChatFun()
+    const params = router?.params || {};
-    // 方法1：Taro 3+ 推荐方式（支持小程序 + H5）
+    if (params.type === 'clean') {
-    if (router && router.params && router.params.type === 'clean') {
       clearAllStorage();
-      return
+      return;
     }
 
     const init = async () => {
@@ -745,7 +683,7 @@ const Index = () => {
               className="markdown-body  markVip" // 添加 GitHub Markdown 主题类
               dangerouslySetInnerHTML={{
                 // __html: marked(markText),
-                __html: marked(paidType ? index : index),
+                __html: marked(indexMd),
               }}
             ></View>
 
@@ -753,24 +691,20 @@ const Index = () => {
               {paidType === 'vip' ? (
                 <View className="vipcode">
                   <View
-                    onClick={() => {
+                    className="vipcode-link"
-                      window.location.href = `https://qun.hackrobot.cn`;
+                    onClick={() => { window.location.href = 'https://qun.hackrobot.cn'; }}
-                    }}
                   >
-                    {/* 👉星球地址: memos.hackrobot.org */}
                     👉 星球地址: qun.hackrobot.cn
                   </View>
-                  <View>账号:{Taro.getStorageSync('userName')}</View>
+                  <View className="vipcode-row">
-                  <Button onClick={handleCopyUsername}>复制账号</Button>
+                    <Text>账号: {userName || Taro.getStorageSync('userName') || '-'}</Text>
-                  <View>密码:{"123456"}</View>{" "}
+                    <Button size="mini" onClick={handleCopyUsername}>复制账号</Button>
-                  <View>打开网页后,请点击"左上角头像",打开侧面栏</View>
+                  </View>
-
+                  <View className="vipcode-row">
-                  {/* <View>
+                    <Text>密码: 123456</Text>
-                    添加
+                    <Button size="mini" onClick={handleCopyPassword}>复制密码</Button>
-                    <span style={{ color: "green" }}>微信好友: hackrobot</span>
+                  </View>
-                  </View> */}
+                  <View className="vipcode-tip">打开网页后，请点击「左上角头像」打开侧面栏</View>
-                  {/* <Image className="vipcodeImg" src={hackrobot}></Image> */}
-                  {/* <View>获取 账号</View> */}
                 </View>
               ) : (
                 <AtButton

src/pages/index/index.md

@@ -1,50 +1,48 @@
-<img title="" src="https://minioweb.hackrobot.cn/hackrobot/image_20251231_015321_20586.jpg" alt="image_20251231_015321_20586.jpg" width="271">  
+<img src="https://minioweb.hackrobot.cn/hackrobot/image_20251231_015321_20586.jpg" alt="异度星球" width="271">
 
-🌟你将收获：
+## 🌟 你将收获
-🚀 业务方向：无人直播、RPA 自动化、web开发
 
-⚙️ 技术杠杆：云手机、PVE 虚拟化、服务器集群
+**🚀 业务方向**  
+无人直播 · RPA 自动化 · Web 开发
 
-🌐 海外平台：YouTube、TikTok、SaaS 运营实战    
+**⚙️ 技术杠杆**  
+云手机 · PVE 虚拟化 · 服务器集群
 
+**🌐 海外平台**  
+YouTube · TikTok · SaaS 运营实战
 
+---
 
-<br/>
+## 📖 解锁权益
 
-📖 解锁=>电子书+视频教程
+**电子书 + 视频教程**
 
-1️⃣[《数字游民》：地理套利 + 自动化杠杆](https://hackrobot.cn)
+1. [《数字游民》：地理套利 + 自动化杠杆](https://hackrobot.cn)
+2. [《云手机》：低成本工作室搭建指南](https://android.hackrobot.cn)
 
-2️⃣ [《云手机》：低成本工作室搭建指南](https://android.hackrobot.cn) 
+<img src="https://minioweb.hackrobot.cn/hackrobot/20260101205143_20260101_205202_1552.png" alt="权益" width="180">
 
-<img src="https://minioweb.hackrobot.cn/hackrobot/20260101205143_20260101_205202_1552.png" title="" alt="20260101205143_20260101_205202_1552.png" width="180">
+**📱 设备自助下单**（开箱即用）
 
+<img src="https://minioweb.hackrobot.cn/hackrobot/wqdq_20260101_212749_8560.jpg" alt="设备下单" width="282">
 
+**📚 即时问答**（技术咨询）
 
-📱设备自助下单(开箱即用) 
+<img src="https://minioweb.hackrobot.cn/hackrobot/20260101203904_20260101_204741_699.png" alt="即时问答" width="284">
 
-<img title="" src="https://minioweb.hackrobot.cn/hackrobot/wqdq_20260101_212749_8560.jpg" alt="wqdq_20260101_212749_8560.jpg" width="282">
+**㊙️ 私密社群**
 
+<img src="https://minioweb.hackrobot.cn/hackrobot/20260101204456_20260101_204802_768.png" alt="私密社群" width="186">
 
+---
 
-📚  即时问答 (技术咨询)
+## ⚠️ 须知
 
-<img src="https://minioweb.hackrobot.cn/hackrobot/20260101203904_20260101_204741_699.png" title="" alt="20260101203904_20260101_204741_699.png" width="284"> 
+- 🚫 内容不适合想躺赚、现金流紧张的人
+- 💰 价格随参与人数阶梯式调整（维护与答疑成本随规模增长）
+- 📌 本内容为虚拟数字交付，不支持退款
 
-㊙️私密社群
+---
 
-<img src="https://minioweb.hackrobot.cn/hackrobot/20260101204456_20260101_204802_768.png" title="" alt="20260101204456_20260101_204802_768.png" width="186">
+👉 **限时特惠 · 3月12日恢复原价**
-
-<br/>
-
-🚫 内容不适合想躺赚、现金流紧张的人
-
-💰 价格随参与人数阶梯式调整  
-（维护与答疑成本随规模增长）
-
-📌 本内容为虚拟数字交付  
-不支持退款
-
-<!-- 👉 **确认理解规则，进入系统构建通道** -->
-👉 **限时特惠,3月12日恢复**
 

src/pages/index/index.scss

@@ -1,6 +1,6 @@
-// 在 src/index.scss 中引入 GitHub Markdown 主题
 @import "github-markdown-css/github-markdown.css";
-// marktext的换行处理
+
+// Markdown 内容样式
 .markdown-body p,
 .markdown-body blockquote,
 .markdown-body ul,
@@ -13,23 +13,47 @@
 }
 
 .markdown-body li > p {
-  margin-top: 0px;
+  margin-top: 0;
 }
+
 .markVip {
-  padding-left: 100px;
+  padding: 0 16px;
-  padding-right: 100px;
+  width: 100%;
+  box-sizing: border-box;
   img {
     display: block;
-    margin: 20px auto; // 上下间距 + 水平居中
+    margin: 16px auto;
-    max-width: 100%; // 响应式：不超过容器宽度
+    max-width: 100%;
-    height: auto; // 保持比例
+    height: auto;
-    border-radius: 12px; // 可选：圆角美化
+    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 可选：轻微阴影提升质感
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }
 }
+
 .markdown-body p {
-  font-size: 30px;
+  font-size: 30px; /* H5 2倍 */
-  // text-align: center !important;
+  line-height: 1.6;
+}
+
+.markVip .markdown-body {
+  h2 {
+    font-size: 36px; /* H5 2倍 */
+    margin: 20px 0 12px;
+    color: #262626;
+    font-weight: 600;
+  }
+  hr {
+    margin: 20px 0;
+    border: none;
+    border-top: 1px solid #e8e8e8;
+  }
+  ul {
+    padding-left: 20px;
+    margin: 8px 0;
+  }
+  li {
+    margin: 4px 0;
+  }
 }
 .book_header_div {
   width: 100%;
@@ -88,44 +112,44 @@
 
 
 
+// 响应式断点
+$mobile: 480px;
+$tablet: 768px;
+$desktop: 1024px;
+$wide: 1280px;
+
 .index {
-  // background-color: #002329;
+  min-height: 100vh;
-  // width: 100vw;
+  width: 100%;
-  // padding-top: 80px;
+  overflow-x: hidden;
-  height: 100vh;
+  box-sizing: border-box;
-  // height: 100%;
+
-  // padding-left: 100px;
-  // padding-right: 100px;
-  // background-color: yellow;
   .index-book {
-    // margin-top: 80px;
+    min-height: 280px;
-    // width: 100%;
+    width: 100%;
-    min-height: 300px;
+    padding: 20px 16px;
-    // padding: 20px;
     display: flex;
     flex-direction: column-reverse;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
-    // justify-content: center;
+    box-sizing: border-box;
 
-    // background-color: #f0f0f0;
-    // background-color: #f0f5ff;
-    // background-color: yellow;
     .index_book_left {
-      min-width: 600px;
+      width: 100%;
-      min-height: 300px;
+      max-width: 100%;
+      min-height: 200px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-around;
-      // justify-content: center;
+      box-sizing: border-box;
-      // background-color: rgb(208, 255, 0);
 
       .left_title {
-        font-size: 50px;
+        font-size: 64px; /* H5 2倍 */
         font-weight: 700;
         color: #69b1ff;
-        margin-top: 10px;
+        margin-top: 8px;
+        text-align: center;
       }
       .left_text {
         font-size: 30px;
@@ -142,125 +166,93 @@
       }
 
       .card {
-        margin-top: 20px;
+        margin-top: 16px;
+        width: 100%;
+        max-width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        // background-color: #69b1ff;
-        .cardItem {
-          padding: 20px;
-          // padding-top: 20px;
-          width: 500px;
-          // height: 300px;
 
-          margin-bottom: 20px;
+        .cardItem {
+          padding: 16px 20px;
+          width: 100%;
+          max-width: 340px;
+          margin-bottom: 12px;
           display: flex;
           flex-direction: row;
-          background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
+          align-items: center;
-          // background-color: yellow;
           background-color: #f0f5ff;
-          border-radius: 20px;
+          border-radius: 16px;
+          box-sizing: border-box;
 
-          // align-items: center;
-          // justify-content: center;
           .cardItem_left {
-            // width: 100px;
-            // height: 100%;
-            // background-color: #69b1ff;
             display: flex;
             flex-direction: column;
-            // align-items: center;
+            justify-content: center;
-            // justify-content: center;
+            margin-right: 16px;
-            margin-right: 40px;
+            flex-shrink: 0;
+
             .cardItem_left_img {
-              width: 80px;
+              width: 56px;
-              height: 80px;
+              height: 56px;
             }
             .youtubeSvg {
               position: relative;
-              top: -5px;
+              top: -2px;
             }
           }
           .cardItem_right {
             flex: 1;
+            min-width: 0;
             display: flex;
             flex-direction: column;
-            align-items: center;
             justify-content: center;
-            // background-color: red;
+
             .cardItem_rightUp {
-              width: 100%;
-              height: 80px;
-              // background-color: aquamarine;
-              display: flex;
-              flex-direction: row;
               font-weight: 700;
-              font-size: 35px;
+              font-size: 36px; /* H5 2倍 */
-              // align-items: center;
-              // justify-content: center;
-            }
-            .cardItem_rightDown {
-              width: 100%;
-              // height: 200px;
-              flex: 1;
-              // background-color: red;
-              display: flex;
-              flex-direction: row;
-              // align-items: center;
-              // justify-content: center;
-              font-size: 30px;
-              flex-wrap: wrap;
               color: #262626;
             }
+            .cardItem_rightDown {
+              font-size: 28px; /* H5 2倍 */
+              color: #595959;
+              margin-top: 4px;
             }
-          .left_mobile {
-            margin-top: 20px;
-            // width: 100%;
-            font-size: 30px;
-            display: flex;
-            flex-direction: column;
-            // background-color: aqua;
-            // align-items: center;
-            // justify-content: space-around;
-            // background-color: yellow;
           }
         }
       }
 
       .left_btn {
-        // position: fixed;
+        margin-top: 24px;
-        // bottom: -10px;
+        margin-bottom: 24px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
 
-        margin-top: 30px;
-        margin-bottom: 30px;
-        // background-color: aqua;
-        // display: none;
         .startRead {
-          width: 500px;
+          width: 100%;
-          // width: 100%;
+          max-width: 320px;
         }
       }
     }
     .index_book_img {
-      margin-top: 30px;
+      margin-top: 20px;
-      width: 400px;
+      width: 200px;
-      height: 400px;
+      height: 200px;
-      // margin: 0 auto;
+      flex-shrink: 0;
+
+      .book_img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
     }
   }
 
   .svgItems {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    // background-color: yellow;
-    margin-top: 20px;
-    // padding: 20px;
-    .bookImg {
     display: none;
-    }
+    margin-top: 20px;
   }
   .index_btn {
     // background-color: yellow;
@@ -280,128 +272,171 @@
     width: 100%;
     height: 60px;
     // margin-bottom: 20px;
-    font-size: 14px;
+    font-size: 28px; /* H5 2倍 */
     // background-color: yellow;
   }
 }
 
-@media (min-width: 1536px) {
+// 平板
+@media (min-width: $tablet) {
+  .markVip {
+    padding: 0 32px;
+  }
+  .markdown-body p {
+    font-size: 17px;
+  }
+  .index .index-book .index_book_left {
+    .left_title {
+      font-size: 40px;
+    }
+    .card .cardItem {
+      max-width: 420px;
+      .cardItem_left_img {
+        width: 64px;
+        height: 64px;
+      }
+      .cardItem_rightUp {
+        font-size: 20px;
+      }
+      .cardItem_rightDown {
+        font-size: 30px; /* H5 2倍 */
+      }
+    }
+    .left_btn .startRead {
+      max-width: 360px;
+    }
+  }
+  .index .index-book .index_book_img {
+    width: 260px;
+    height: 260px;
+  }
+}
+
+// 桌面端
+@media (min-width: $desktop) {
+  .markVip {
+    padding: 0 48px;
+  }
+  .markdown-body p {
+    font-size: 18px;
+  }
+}
+
+// 大屏 PC
+@media (min-width: $wide) {
   .index {
-    // padding: 100px;
-    // height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
-    // background-color: aqua;
+    padding: 40px 24px 60px;
-    position: relative;
 
     .index-book {
       width: 100%;
-      max-width: 1400px;
+      max-width: 1200px;
-
+      padding: 40px 48px;
-      // max-width: 2000px;
-      // padding: 20px;
       display: flex;
       flex-direction: row;
-      align-items: center;
+      align-items: stretch;
-      // justify-content: center;
       justify-content: space-between;
-      background-color: #f0f5ff;
+      background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
-      border-radius: 20px;
+      border-radius: 24px;
+      box-shadow: 0 8px 32px rgba(105, 177, 255, 0.12);
 
       .index_book_left {
-        display: flex;
+        flex: 1;
-        flex-direction: column;
+        max-width: 560px;
-        align-items: center;
+        min-width: 0;
-        justify-content: space-around;
+        align-items: flex-start;
-        // background-color: yellow;
+        justify-content: flex-start;
-        // background-color: #69b1ff;
+
-        .left_mobile {
+        .left_title {
-          display: none;
+          font-size: 44px;
+          text-align: left;
         }
         .card {
           display: none;
         }
+        .markVip {
+          padding: 0;
+          width: 100%;
+        }
         .left_btn {
-          display: flex;
+          margin-top: 28px;
+          justify-content: flex-start;
 
           .startRead {
-            // display: flex;
+            max-width: 220px;
-            width: 200px;
           }
         }
       }
       .index_book_img {
-        display: flex;
+        margin-top: 0;
-        flex-direction: column;
+        margin-left: 48px;
-        align-items: center;
+        width: 320px;
-        justify-content: center;
+        height: 320px;
-        // height: 100%;
+        flex-shrink: 0;
-        // background-color: yellow;
+
         .book_img {
-          margin-bottom: 40px;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
         }
       }
     }
 
     .svgItems {
-      // width: 1400px;
-      width: 100%;
-      max-width: 1400px;
-      margin-top: 80px;
-      // padding: 0px;
       display: flex;
-      flex-direction: row;
+      width: 100%;
-      align-items: center;
+      max-width: 1200px;
-      justify-content: center;
+      margin-top: 48px;
-      // background-color: #69b1ff;
+      padding: 0 24px;
-      // background-color: yellow;
+
-      // background-color: brown;
       .svgItem {
-        // min-width: 1400px;
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: space-around;
+        justify-content: space-between;
-        // background-color: #69b1ff;
+        gap: 24px;
+
         .bookImg {
-          width: 350px;
+          flex: 1;
-          height: 350px;
+          min-width: 0;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          // background-color: yellow;
+          padding: 24px 16px;
+          background: #fff;
+          border-radius: 16px;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+          transition: transform 0.2s, box-shadow 0.2s;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 20px rgba(105, 177, 255, 0.15);
+          }
+
           .bookImg_text {
-            margin-top: 20px;
+            margin-top: 12px;
-            font-size: 30px;
+            font-size: 16px;
+            font-weight: 500;
+            color: #262626;
+          }
+        }
       }
     }
   }
 }
 
-    .index_btn {
+// 超宽屏
-      .startRead {
+@media (min-width: 1536px) {
-        display: none;
+  .index .index-book {
-      }
+    max-width: 1400px;
-    }
-
-    .footer {
-      position: absolute;
-      // position: fixed;
-      bottom: 0px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 60px;
-      // margin-bottom: 20px;
-      font-size: 14px;
-      // background-color: yellow;
   }
+  .index .svgItems {
+    max-width: 1400px;
   }
 }
 
@@ -414,13 +449,54 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 12px;
+  padding: 24px 20px;
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 360px;
+  box-sizing: border-box;
   font-size: 30px;
+  line-height: 1.5;
+  color: #262626;
+
+  .vipcode-link {
+    cursor: pointer;
+    color: #69b1ff;
+    font-weight: 600;
+    word-break: break-all;
+  }
+
+  .vipcode-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .vipcode-tip {
+    font-size: 26px; /* H5 2倍 */
+    color: #8c8c8c;
+    text-align: center;
+  }
+
+  button {
+    margin-top: 8px;
+    padding: 10px 24px;
+    font-size: 28px; /* H5 2倍 */
+  }
+
   .vipcodeImg {
-    width: 300px;
+    width: 200px;
-    height: 300px;
+    height: 200px;
   }
 }
 
-.payBtntext {
+@media (min-width: $wide) {
-  font-size: 20px;
+  .vipcode {
+    max-width: 420px;
+    font-size: 16px;
+    padding: 28px 24px;
+  }
 }