浏览代码

修改图片和样式

lex 1 年之前
父节点
当前提交
2b0c4f91e0

二进制
src/page-instrument/custom-plugins/the-vip/icon_bg.png


二进制
src/page-instrument/custom-plugins/the-vip/icon_btn.png


二进制
src/page-instrument/custom-plugins/the-vip/icon_btn_cancel.png


+ 17 - 8
src/page-instrument/custom-plugins/the-vip/index.module.less

@@ -1,12 +1,12 @@
 .container {
     position: relative;
     width: 278px;
-    height: 250px;
+    height: 252px;
     background: url('./icon_bg.png') no-repeat;
-    background-size: 100%;
+    background-size: contain;
     display: flex;
     flex-direction: column;
-    padding-top: 50px;
+    padding-top: 126px;
 }
 
 .close {
@@ -25,7 +25,7 @@
 
 .content {
     position: relative;
-    padding: 35px 13px 25px 13px;
+    padding: 0 13px 25px 13px;
     font-size: 14px;
     font-weight: 400;
     color: #333333;
@@ -34,18 +34,27 @@
 }
 
 .btns {
-    width: 159px;
-    margin: 0 auto;
+    // width: 159px;
+    margin: 0 auto 23px;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     font-size: 16px;
     color: #777;
     line-height: 22px;
     text-align: center;
 
+    .btn {
+        width: 101px;
+        height: 37px;
+        cursor: pointer;
+    }
+
+    .btnCancel {
+        margin-right: 10px;
+    }
+
     img {
         width: 100%;
-        margin-bottom: 9px;
+        // margin-bottom: 9px;
     }
 }

+ 4 - 2
src/page-instrument/custom-plugins/the-vip/index.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from "vue";
 import icon_title from "./icon_title.png";
 import icon_btn from "./icon_btn.png";
+import icon_btn_cancel from "./icon_btn_cancel.png";
 import icon_close from "./icon_close.png";
 import styles from "./index.module.less";
 import { Popup } from "vant";
@@ -29,12 +30,13 @@ export default defineComponent({
     return () => (
       <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom"]} show={true}>
         <div class={styles.container}>
-          <img class={styles.close} src={icon_close} onClick={close} />
-          <img class={styles.title} src={icon_title} />
+          {/* <img class={styles.close} src={icon_close} onClick={close} /> */}
+          {/* <img class={styles.title} src={icon_title} /> */}
           <div class={styles.content}>
             立即开通<span style={{ color: "#FF5A56" }}>"乐器AI学练工具"</span>服务,解锁更多专属权益,享受全新学习体验!
           </div>
           <div class={styles.btns}>
+            <img class={[styles.btn, styles.btnCancel]} src={icon_btn_cancel} onClick={close} />
             <img
               class={styles.btn}
               src={icon_btn}