修改样式

src/views/collection-record-detail/index.module.less

@@ -1,181 +1,189 @@
 .paymentTitle {
-    min-height: 177px;
-    background: linear-gradient(180deg, rgba(91, 236, 255, 1) 0%, rgba(37, 156, 254, 1) 100%);
-    border-radius: 0px 0px 8px 8px;
+  min-height: 177px;
+  background: linear-gradient(0deg, #31C7FF 0%, #007AFE 100%);
+  border-radius: 0px 0px 8px 8px;
 
-    :global {
+  :global {
 
-        .van-nav-bar .van-icon,
-        .van-nav-bar__title {
-            color: #fff;
-        }
+    .van-nav-bar .van-icon,
+    .van-nav-bar__title {
+      color: #fff;
     }
-
-    .orderType {
-        padding-top: 35px;
-        padding-bottom: 90px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-
-        .img {
-            width: 52px;
-            height: 52px;
-            margin-right: 14px;
-        }
-
-        span {
-            font-size: 22px;
-            font-weight: 500;
-            line-height: 30px;
-        }
+  }
+
+  .orderType {
+    padding-top: 35px;
+    padding-bottom: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+
+    .img {
+      width: 52px;
+      height: 52px;
+      margin-right: 14px;
     }
 
-    .orderPrice {
-        padding-top: 2px;
-        font-size: 22px;
-        text-align: center;
-        font-size: 14px;
+    span {
+      font-size: 22px;
+      font-weight: 500;
+      line-height: 30px;
     }
+  }
+
+  .orderPrice {
+    padding-top: 2px;
+    font-size: 22px;
+    text-align: center;
+    font-size: 14px;
+  }
 }
 
 .mTop {
-    margin-top: -52px !important;
+  margin-top: -52px !important;
 }
 
 .cellGroup {
-    margin: 10px 13px;
-
-    .brandName {
-        line-height: 18px;
-        font-size: 12px;
-        padding: 0 6px;
-        border-radius: 4px;
-        background: linear-gradient(180deg, #FFF5E6 0%, #FFF6E7 100%);
-        border-radius: 4px;
-        border: 1px solid #FFE9D9;
-        color: #BE7332;
+  margin: 10px 13px;
+
+  .brandName {
+    line-height: 18px;
+    font-size: 12px;
+    padding: 0 6px;
+    background: #F4FAFF;
+    border-radius: 4px;
+    border: 1px solid rgba(52, 173, 255, 0.55);
+    color: #19A1FE;
+  }
+
+  :global {
+    .van-cell {
+      padding: 16px 17px;
+      font-size: 16px;
+      color: #333333;
+    }
+
+    .van-cell__value {
+      flex: 0 auto;
     }
+  }
 
-    :global {
-        .van-cell {
-            padding: 16px 17px;
-            font-size: 16px;
-            color: #333333;
-        }
+  .buyDetail {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 18px 0;
 
-        .van-cell__value {
-            flex: 0 auto;
-        }
+    i {
+      display: inline-block;
+      margin-right: 6px;
+      width: 4px;
+      height: 14px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      border-radius: 2px;
     }
 
-    .buyDetail {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 18px 18px 0;
-
-        i {
-            display: inline-block;
-            margin-right: 6px;
-            width: 4px;
-            height: 14px;
-            background: linear-gradient(180deg, #FFB790 0%, #FF8057 100%);
-            border-radius: 2px;
-        }
-
-        font-size: 16px;
-        font-weight: 500;
-        color: #333333;
-        line-height: 22px;
-
-        .buyDetailTitle {
-            display: flex;
-            align-items: center;
-        }
-
-        .refundBtn {
-            font-size: 16px;
-            color: #777777;
-            line-height: 22px;
-        }
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 22px;
+
+    .buyDetailTitle {
+      display: flex;
+      align-items: center;
     }
 
-    .buyImg {
-        width: 58px;
-        height: 58px;
-        overflow: hidden;
-        border-radius: 5px;
-        margin-right: 9px;
+    .refundBtn {
+      font-size: 16px;
+      color: #777777;
+      line-height: 22px;
     }
+  }
+
+  .buyImg {
+    width: 58px;
+    height: 58px;
+    overflow: hidden;
+    border-radius: 5px;
+    margin-right: 9px;
+  }
+
+  .giftFlag {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 31px;
+    height: 14px;
+  }
 }
 
 .container {
-    :global {
-        .van-button {
-            font-size: 18px;
-            font-weight: 500;
-        }
+  :global {
+    .van-button {
+      font-size: 18px;
+      font-weight: 500;
     }
+  }
 }
 
 .dialogTitle {
-    i {
-        display: inline-block;
-        width: 4px;
-        height: 14px;
-        background: #ff8057;
-        border-radius: 2px;
-        margin-right: 6px;
-    }
-
-    text-align: left;
-    font-size: 18px;
-    font-weight: 500;
-    color: #333333;
-    line-height: 25px;
-    padding: 20px 0 15px 25px;
+  i {
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #ff8057;
+    border-radius: 2px;
+    margin-right: 6px;
+  }
+
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 25px;
+  padding: 20px 0 15px 25px;
 }
 
 .refundContent {
-    padding: 0 20px 25px;
+  padding: 0 20px 25px;
 
-    .tips {
-        font-size: 15px;
-        color: #333333;
-        line-height: 21px;
-    }
+  .tips {
+    font-size: 15px;
+    color: #333333;
+    line-height: 21px;
+  }
 }
 
 .refundTitle {
-    padding-top: 25px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333333;
-    line-height: 22px;
-
-    span {
-        color: #f44541;
-    }
+  padding-top: 25px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+  line-height: 22px;
+
+  span {
+    color: #f44541;
+  }
 }
 
 .phoneName {
-    background: #f2f2f2;
-    border-radius: 6px;
+  background: #f2f2f2;
+  border-radius: 6px;
 }
 
 .cancelBtn {
-    height: 44px;
-    border: none;
-    background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
-    font-size: 16px;
-    font-weight: 500;
-    margin: 20px auto;
-    width: 88%;
-    &.orderNo{
-        background: #fff;
-        color: #777;
-        border: 1Px solid #777;
-    }
-}
+  height: 44px;
+  border: none;
+  background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
+  font-size: 16px;
+  font-weight: 500;
+  margin: 20px auto;
+  width: 88%;
+
+  &.orderNo {
+    background: #fff;
+    color: #777;
+    border: 1Px solid #777;
+  }
+}

src/views/collection-record-detail/index.tsx

@@ -17,6 +17,7 @@ import iconRefunding from './images/icon_refunding.svg';
 import icon_success from './images/icon_success.svg';
 import iconClose from './images/icon_close.svg';
 import iconTradeing from './images/icon_tradeing.svg';
+import giftFree from './images/giftFree.png';
 import { useRoute, useRouter } from 'vue-router';
 import { browser, moneyFormat } from '@/helpers/utils';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
@@ -226,7 +227,12 @@ export default defineComponent({
             <Cell>
               {{
                 icon: () => (
-                  <Image class={styles.buyImg} src={goods.goodsUrl} />
+                  <div style={{ position: 'relative' }}>
+                    <Image class={styles.buyImg} src={goods.goodsUrl} />
+                    {goods.giftFlag && (
+                      <Image class={styles.giftFlag} src={giftFree} />
+                    )}
+                  </div>
                 ),
                 title: () => (
                   <div class={styles.buyContent}>

src/views/student-register/index-apply.module.less

@@ -836,7 +836,7 @@
     font-size: 26px;
     color: #FF113F;
     line-height: 36px;
-    padding: 0 2px;
+    padding: 0 3px;
     margin-top: -6px;
   }
 

src/views/student-register/index.module.less

@@ -872,7 +872,7 @@
     font-size: 26px;
     color: #FF113F;
     line-height: 36px;
-    padding: 0 2px;
+    padding: 0 3px;
     margin-top: -6px;
   }