修改样式

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

@@ -8,9 +8,17 @@
   --k-font-primary: #007AFE;
 
   .studentRegisterContainer {
-    padding-top: 155px;
-    background: url('./images/banner-bg.png') no-repeat top center;
-    background-size: contain;
+    position: relative;
+    z-index: 1;
+    // margin-top: -50%;
+    // padding-top: 155px;
+    // background: url('./images/banner-bg.png') no-repeat top center;
+    // background-size: contain;
+  }
+
+  .bannerBg {
+    width: 100%;
+    margin-bottom: -41%;
   }
 
 

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

@@ -1,5 +1,4 @@
 import {
-  Image,
   Cell,
   Tag,
   Button,
@@ -11,18 +10,13 @@ import {
   RadioGroup,
   Radio,
   Picker,
-  closeToast,
-  Popover,
-  Area,
-  CellGroup,
-  showConfirmDialog
+  Area
 } from 'vant';
 import {
   computed,
   defineComponent,
   nextTick,
   onMounted,
-  onUnmounted,
   reactive,
   ref
 } from 'vue';
@@ -36,10 +30,8 @@ import request from '@/helpers/request';
 import { browser, checkPhone, getUrlCode, moneyFormat } from '@/helpers/utils';
 // import deepClone from '@/helpers/deep-clone';
 import OWxTip from '@/components/m-wx-tip';
-import { useCountDown } from '@vant/use';
 
 import MImgCode from '@/components/m-img-code';
-import { useInterval, useIntervalFn } from '@vueuse/core';
 import MMessageTip from '@/components/m-message-tip';
 import SelectStudent from '@/views/student-register/modal/select-student';
 import { api_sysAreaQueryAllProvince } from '@/views/school-register/api';
@@ -49,6 +41,7 @@ import { removeAuth } from '@/views/student-register/layout/utils';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import { api_verification } from '@/views/creation/api';
+import bannerBg from './images/banner-bg.png';
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -472,6 +465,7 @@ export default defineComponent({
           const status = await checkLogin();
           if (!status) {
             studentInfo.username = '';
+            forms.activationCode = '';
             phoneChangeEmptyInfo();
           }
         }
@@ -808,11 +802,8 @@ export default defineComponent({
       forms.classList = classList;
     });
     return () => (
-      <div
-        class={[
-          styles['student-register'],
-          browser().isTablet ? styles.registrationContainerTablet : ''
-        ]}>
+      <div class={[styles['student-register']]}>
+        <img src={bannerBg} class={styles.bannerBg} />
         <div class={styles.studentRegisterContainer}>
           <div class={[styles.studentSection]}>
             <Form labelAlign="left" class={styles.registerForm}>

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

@@ -298,19 +298,45 @@
 
 .sectionItem {
   margin: 8px auto;
-  background: url('./images/item-bg.png') no-repeat top center;
-  background-size: cover;
-  min-height: 141px;
-  max-width: 349px;
+  // background: url('./images/item-bg.png') no-repeat top center;
+  // background-size: cover;
+  // min-height: 141px;
+  // max-width: 349px;
+
+
+  .itemTop {
+    position: relative;
+    z-index: 1;
+    background: linear-gradient(180deg, #EFEAFE 0%, #E1F4FF 10%, #FFFFFF 50%);
+    border: 1px solid #FFFFFF;
+    border-radius: 10px;
+
+    &::after {
+      position: absolute;
+      bottom: -2px;
+      left: 17px;
+      right: 17px;
+      content: '';
+      height: 0px;
+      border-bottom: 2px dashed #EBEBEB;
+    }
+  }
 
   .itemTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .recordItemBg {
+      width: 128px;
+      height: 26px;
+    }
+
     font-weight: 600;
     font-size: 14px;
     color: #333333;
     line-height: 20px;
-    padding-top: 6px;
-    padding-right: 14px;
-    text-align: right;
+    padding: 9px 12px;
 
     .text {
       position: relative;
@@ -335,21 +361,30 @@
   }
 
   .itemCode {
+    position: relative;
     font-weight: 500;
     font-size: 20px;
     color: #1CACF1;
     line-height: 28px;
-    padding-top: 24px;
-    padding-left: 12px;
+    padding: 6px 12px 16px;
+    // padding-top: 24px;
+    // padding-left: 12px;
   }
 
   .itemTime {
-    padding-top: 30px;
-    padding-left: 12px;
+    border: 1px solid #FFFFFF;
+    border-radius: 10px;
+    background: #fff;
+    position: relative;
+    padding: 14px 12px;
+    // padding-top: 30px;
+    // padding-left: 12px;
     font-size: 14px;
     color: #777777;
     line-height: 20px;
 
+
+
     span {
       color: #333333;
     }

src/views/activation-code/instrument-registration/detail.module.less

@@ -7,10 +7,17 @@
 
   --k-font-primary: #007AFE;
 
+  .bannerBg {
+    width: 100%;
+    margin-bottom: -35%;
+  }
+
   .studentRegisterContainer {
-    padding-top: 180px;
-    background: url('./images/banner1.png') no-repeat top center;
-    background-size: contain;
+    position: relative;
+    z-index: 1;
+    // padding-top: 180px;
+    // background: url('./images/banner1.png') no-repeat top center;
+    // background-size: contain;
   }
 }
 
@@ -66,7 +73,8 @@
       background: rgba(17, 137, 255, 0.08);
       border-radius: 20px;
       border: 1px solid rgba(17, 137, 255, 0.6);
-      padding: 0px 8px;
+      padding: 1px 8px 0;
+      line-height: 22px;
     }
   }
 

src/views/activation-code/instrument-registration/detail.tsx

@@ -1,85 +1,14 @@
-import {
-  Image,
-  Cell,
-  Tag,
-  Button,
-  Popup,
-  showToast,
-  Form,
-  Field,
-  CountDown,
-  RadioGroup,
-  Radio,
-  Picker,
-  closeToast,
-  Popover,
-  Area,
-  CellGroup,
-  showConfirmDialog
-} from 'vant';
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref
-} from 'vue';
+import { Tag, Button, Popup, Form, Field, RadioGroup, Radio } from 'vant';
+import { computed, defineComponent, onMounted, reactive } from 'vue';
 import styles from './detail.module.less';
 import MSticky from '@/components/m-sticky';
 // import MVideo from '@/components/m-video';
 import { useRoute, useRouter } from 'vue-router';
 import request from '@/helpers/request';
 import loginSuccess from './images/login-success.png';
+import bannerBg from './images/banner1.png';
 
 import SelectStudent from '@/views/student-register/modal/select-student';
-import { browser } from '@/helpers/utils';
-
-const classList: any = [];
-for (let i = 1; i <= 40; i++) {
-  classList.push({ text: i + '班', value: i });
-}
-
-const GRADE_ENUM = {
-  '1': '一年级',
-  '2': '二年级',
-  '3': '三年级',
-  '4': '四年级',
-  '5': '五年级',
-  '6': '六年级',
-  '7': '七年级',
-  '8': '八年级',
-  '9': '九年级'
-} as any;
-const getGradeList = (gradeYear?: string, instrumentCode?: string) => {
-  let tempList: any = [];
-  const five = [
-    { text: '一年级', value: 1, instrumentCode },
-    { text: '二年级', value: 2, instrumentCode },
-    { text: '三年级', value: 3, instrumentCode },
-    { text: '四年级', value: 4, instrumentCode },
-    { text: '五年级', value: 5, instrumentCode }
-  ];
-  const one = [{ text: '六年级', value: 6, instrumentCode }];
-  const three = [
-    { text: '七年级', value: 7, instrumentCode },
-    { text: '八年级', value: 8, instrumentCode },
-    { text: '九年级', value: 9, instrumentCode }
-  ];
-  if (gradeYear === 'FIVE_YEAR_SYSTEM') {
-    tempList.push(...[...five]);
-  } else if (gradeYear === 'SIX_YEAR_SYSTEM') {
-    tempList.push(...[...five, ...one]);
-  } else if (gradeYear === 'THREE_YEAR_SYSTEM') {
-    tempList.push(...[...three]);
-  } else if (gradeYear === 'FORE_YEAR_SYSTEM') {
-    tempList.push(...[...one, ...three]);
-  } else {
-    tempList.push(...[...five, ...one, ...three]);
-  }
-  return tempList;
-};
 
 export default defineComponent({
   name: 'activation-register',
@@ -206,11 +135,8 @@ export default defineComponent({
       getDetail();
     });
     return () => (
-      <div
-        class={[
-          styles['student-register'],
-          browser().isTablet ? styles.hotMusicMoreTablet : ''
-        ]}>
+      <div class={[styles['student-register']]}>
+        <img src={bannerBg} class={styles.bannerBg} />
         <div class={styles.studentRegisterContainer}>
           <div class={[styles.studentSection]}>
             <Form labelAlign="left" class={styles.registerForm}>

src/views/activation-code/instrument-registration/index.module.less

@@ -2,16 +2,21 @@
   min-height: 100vh;
   background: #C3EBFE;
 
+  .bannerBg {
+    width: 100%;
+  }
+
   .registration {
-    min-height: 100vh;
-    background: url('./images/banner.png') no-repeat top;
-    background-size: contain;
+    // min-height: 100vh;
+    // background: url('./images/banner.png') no-repeat top;
+    // background-size: contain;
     overflow: hidden;
   }
 
 
   .inputGroup {
-    margin-top: 426px;
+    // margin-top: 426px;
+    margin-top: 17px;
     position: relative;
     padding: 0 18px;
 
@@ -41,6 +46,7 @@
     .btnGroup {
       margin: 30px 73px 0;
       --van-button-default-height: 52px;
+      min-height: 80px;
 
       .progress {
         margin-top: 18px;

src/views/activation-code/instrument-registration/index.tsx

@@ -3,6 +3,7 @@ import styles from './index.module.less';
 import { Button, Field, Popup, Progress, showToast } from 'vant';
 import iconKey from './images/icon-phone.png';
 import loginError from './images/login-error.png';
+import bannerBg from './images/banner.png';
 import request from '@/helpers/request';
 import { useRouter } from 'vue-router';
 import { browser } from '@/helpers/utils';
@@ -64,11 +65,8 @@ export default defineComponent({
     };
 
     return () => (
-      <div
-        class={[
-          styles.registrationContainer,
-          browser().isTablet ? styles.registrationContainerTablet : ''
-        ]}>
+      <div class={[styles.registrationContainer]}>
+        <img src={bannerBg} class={styles.bannerBg} />
         <div class={styles.registration}>
           <div class={styles.inputGroup}>
             <Field

src/views/activation-code/record.tsx

@@ -12,6 +12,7 @@ import isBetween from 'dayjs/plugin/isBetween';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
 dayjs.extend(isBetween);
+import recordItemBg from './images/record-item-bg.png';
 
 const vipGiftPeriodType = {
   DAY: '天',
@@ -150,13 +151,16 @@ export default defineComponent({
             {state.list.length > 0 &&
               state.list.map((item: any) => (
                 <div class={styles.sectionItem}>
-                  <div class={styles.itemTitle}>
-                    <div class={styles.text}>
-                      乐器AI学练工具{item.times}
-                      {vipGiftPeriodType[item.type]}
+                  <div class={styles.itemTop}>
+                    <div class={styles.itemTitle}>
+                      <img src={recordItemBg} class={styles.recordItemBg} />
+                      <div class={styles.text}>
+                        乐器AI学练工具{item.times}
+                        {vipGiftPeriodType[item.type]}
+                      </div>
                     </div>
+                    <div class={styles.itemCode}>{item.code}</div>
                   </div>
-                  <div class={styles.itemCode}>{item.code}</div>
                   <div class={styles.itemTime}>
                     激活时间：
                     <span>{dayjs(item.activateTime).format('YYYY-MM-DD')}</span>