修改样式

src/views/activation-code/activation-register/index.module.less

@@ -22,7 +22,7 @@
       left: 50%;
       margin-left: -100.5px;
       width: 201px;
-      height: 38px;
+      height: 44px;
     }
   }
 
@@ -88,7 +88,7 @@
   background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 4%, #FFFFFF 100%);
   // margin: 0 12px;
   overflow: hidden;
-  padding-top: 24px;
+  padding-top: 28px;
 
   .selectStudentGroup {
     margin-left: 10px;
@@ -192,18 +192,49 @@
   }
 }
 
+.studentSectionPopup {
+  position: relative;
+  width: 305px;
+  background: linear-gradient( 181deg, #D0EFF7 0%, #81DEFE 100%);
+  position: relative;
+  padding: 6px;
+  border-radius: 12px;
+
+  .title2 {
+    width: 201px;
+    height: 44px;
+    left: 50%;
+    margin-left: -100px;
+    top: -6px;
+    position: absolute;
+    z-index: 1;
+  }
+}
 
 .studentInfo {
+  border-radius: 12px;
+  border: 1px solid #FFFFFF;
+  padding: 4px;
+  overflow: hidden;
+  .studentInner {
+    padding: 35px 15px 15px;
+    background-color: #fff;
+    border-radius: 12px;
+  }
   :global {
     .van-cell {
       padding: 10px 0;
 
       &:first-child {
         padding-top: 0;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
       }
 
       &:last-child {
         padding-bottom: 0;
+        border-bottom-left-radius: 12px;
+        border-bottom-right-radius: 12px;
       }
     }
 
@@ -230,15 +261,24 @@
       }
     }
   }
-
-
 }
 
 .studentBtnGroup {
   display: flex;
-  align-items: center;
-  padding-top: 20px;
-  padding-bottom: 5px;
+  align-items: center;  
+  justify-content: center;
+  // padding-bottom: 5px;
+  padding-top: 10px;
+  margin-left: -15px;
+  margin-right: -15px;
+
+  .btn {
+    width: 128px;
+    // height: 40px;
+  }
+  .cancelBtn {
+    margin-right: 10px;
+  }
 
   :global {
     .van-button {
@@ -259,3 +299,5 @@
     padding-top: 280px;
   }
 }
+
+

src/views/activation-code/activation-register/index.tsx

@@ -44,6 +44,11 @@ import { api_verification } from '@/views/creation/api';
 import bannerBg from './images/banner-bg.png';
 import submitBtn from './images/btn1.png'
 import title1 from './images/title1.png'
+import title2 from './images/title2.png'
+import btn4 from './images/btn4.png'
+import btn5 from './images/btn5.png'
+import btn3 from './images/btn3.png'
+import btn6 from './images/btn6.png'
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -129,7 +134,7 @@ export default defineComponent({
       cityCode: null,
       regionCode: null,
 
-      showResultPopup: true,
+      showResultPopup: false,
       reslutPopupType: '' as any,
       resultPopupContent: '',
       registerType: '', // 报名类型
@@ -1433,8 +1438,10 @@ export default defineComponent({
             background: 'transparent',
             overflow: 'visible !important'
           }}>
-          <CodeDialog type="INFO" showButton={false}>
+          <div class={styles.studentSectionPopup}>
+            <img src={title2} class={styles.title2} />
             <div class={styles.studentInfo}>
+              <div class={styles.studentInner}>
               <Cell
                 border={false}
                 title="学生姓名"
@@ -1465,28 +1472,19 @@ export default defineComponent({
                   title="激活码"
                   value={forms.activationCode}></Cell>
               )}
-            </div>
+
             <div class={styles.studentBtnGroup}>
-              <Button
-                round
-                block
-                onClick={() => (forms.showConfirmPopup = false)}>
-                取消
-              </Button>
-              <Button
-                round
-                block
-                disabled={forms.submitLoading}
-                loading={forms.submitLoading}
-                color="linear-gradient( 305deg, #3192FF 0%, #40C8FF 100%)"
-                onClick={() => {
+              <img src={btn5} class={[styles.btn, styles.cancelBtn]} onClick={() => (forms.showConfirmPopup = false)} />
+              <img src={btn4} class={[styles.btn, styles.primaryBtn]} onClick={() => {
+                  if(forms.submitLoading) return
                   forms.showConfirmPopup = false;
                   onSubmit();
-                }}>
-                确认
-              </Button>
+                }} />
             </div>
-          </CodeDialog>
+              </div>
+            </div>
+           
+          </div>
         </Popup>
 
         <Popup
@@ -1497,12 +1495,13 @@ export default defineComponent({
           }}>
           <CodeDialog
             type={forms.reslutPopupType}
-            btnText={
-              forms.reslutPopupType === 'ACTIVATING' ||
-              forms.reslutPopupType === 'ACTIVATING-TWO'
-                ? '立即下载激活'
-                : '我知道了'
-            }
+            // btnText={
+            //   forms.reslutPopupType === 'ACTIVATING' ||
+            //   forms.reslutPopupType === 'ACTIVATING-TWO'
+            //     ? '立即下载激活'
+            //     : '我知道了'
+            // }
+            btnImg={forms.reslutPopupType === 'ACTIVATING' || forms.reslutPopupType === 'ACTIVATING-TWO' ? btn6 : btn3}
             onConfirm={() => {
               //
               if (

src/views/activation-code/modal/code-dialog/index.module.less

@@ -1,6 +1,6 @@
 .codeDialog {
   width: 305px;
-  background: linear-gradient(89deg, #D0EFF7 0%, #D9F9DC 100%);
+  background: linear-gradient( 89deg, #D0EFF7 0%, #D9F9DC 100%);
   position: relative;
   border-radius: 12px;
 }
@@ -72,6 +72,11 @@
   .btnGroup {
     padding: 20px 55px 0;
 
+    .imgBtn {
+      width: 148px;
+      height: 48px;
+    }
+
     :global {
       .van-button {
         padding: 0;

src/views/activation-code/modal/code-dialog/index.tsx

@@ -15,6 +15,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    btnImg : {
+      type: String as PropType<any>,
+      default: ''
+    },
     btnText: {
       type: String,
       default: '我知道了'
@@ -104,7 +108,10 @@ export default defineComponent({
               </div>
               {props.showButton && (
                 <div class={styles.btnGroup}>
-                  <Button
+                  
+                  {props.btnImg ? <img src={props.btnImg} class={styles.imgBtn} onClick={() => {
+                      emit('confirm');
+                    }} /> : <Button
                     block
                     round
                     color="linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)"
@@ -112,7 +119,8 @@ export default defineComponent({
                       emit('confirm');
                     }}>
                     {props.btnText}
-                  </Button>
+                  </Button>}
+
                 </div>
               )}
             </div>