color

src/components/CommissionItem.vue

@@ -1,9 +1,6 @@
 <template>
     <div class="commission-item">
         <div class="head">
-            <ion-thumbnail class="avatar">
-                <img :src="detail.junior.avatar" />
-            </ion-thumbnail>
             <div class="name">{{ detail.junior.nickname }}</div>
             <div class="num">{{ $t('distribution.commission') }}: +{{ detail.amount }}</div>
         </div>
@@ -12,15 +9,21 @@
                 <img :src="detail.order.pic[0]" />
             </ion-thumbnail>
             <div class="info">
-                <div class="name">{{ getLocaleString(detail.order.name) }}</div>
+                <div class="name">
+                    {{ getLocaleString(detail.order.name) }}asdgasdegasdfawfdwdfdslg;ajsgdlk;jasdl;kfj;alksdjfl
+                </div>
                 <div class="price">
                     <div class="value">{{ $t('balance.symbol') }}100</div>
-                    <div class="num">×1</div>
                 </div>
             </div>
         </div>
-        <div class="prop">{{ $t('order.id') }}: {{ detail.orderId }}</div>
-        <div class="prop">{{ $t('order.createdAt') }}: {{ detail.createdAt }}</div>
+        <div class="bottom">
+            <div class="num">×1</div>
+            <div class="props">
+                <div class="prop">{{ $t('order.id') }}: {{ detail.orderId }}</div>
+                <div class="prop">{{ $t('order.createdAt') }}: {{ detail.createdAt }}</div>
+            </div>
+        </div>
     </div>
 </template>
 <script setup>
@@ -39,13 +42,16 @@ const props = defineProps({
 </script>
 <style lang="less" scoped>
 .commission-item {
-    margin: 0 16px 10px 16px;
-    background: var(--ion-color-step-0);
-    border-radius: 2px;
-    padding: 0 15px 12px 15px;
+    margin: 0 16px 15px 16px;
+    background: #2c302f;
+    border-radius: 8px;
+    padding-bottom: 12px;
     .head {
         height: 44px;
-        border-bottom: 1px solid var(--ion-color-step-50);
+        background: #3d403f;
+        padding: 0 15px;
+        color: #c7f2df;
+        border-radius: 8px 8px 0 0;
         .f();
         .avatar {
             width: 24px;
@@ -54,12 +60,11 @@ const props = defineProps({
         }
         .name {
             flex-grow: 1;
-            font-size: 14px;
-            margin-left: 6px;
+            font-size: 16px;
+            font-weight: bold;
         }
         .num {
-            font-size: 13px;
-            color: #ff7f1f;
+            font-size: 14px;
             font-weight: bold;
         }
     }
@@ -67,43 +72,70 @@ const props = defineProps({
         .f();
         margin-top: 14px;
         margin-bottom: 10px;
+        padding: 0 15px;
         .cover {
             width: 50px;
             height: 50px;
+            min-width: 50px;
             --border-radius: 4px;
         }
         .info {
+            height: 50px;
             margin-left: 10px;
+            flex-basis: 0;
             flex-grow: 1;
+            min-width: 0;
             .name {
+                max-width: 100%;
                 font-size: 14px;
+                color: #c7f2df;
+                font-weight: bold;
                 line-height: 20px;
+                .ellipsis();
             }
             .price {
                 .f();
                 margin-top: 5px;
                 line-height: 17px;
-                font-size: 12px;
+                font-size: 14px;
                 width: 100%;
+                color: #c7f2df;
+                font-weight: bold;
                 .value {
                     flex-grow: 1;
                 }
-                .num {
-                    color: var(--ion-color-step-350);
-                }
             }
         }
     }
     .prop {
-        font-size: 12px;
-        line-height: 17px;
-        color: var(--ion-color-step-600);
-        margin-top: 5px;
+        font-size: 10px;
+        line-height: 14px;
+        color: #9fbfb1;
+        margin-top: 4px;
     }
 }
-.dark {
-    .commission-item {
-        background: var(--ion-color-step-50);
+.commission-item.darker {
+    background: #1c1c1c;
+    .head {
+        background: #202020;
+    }
+}
+.bottom {
+    padding: 0 15px;
+    .f();
+    align-items: stretch;
+    .num {
+        width: 50px;
+        .f;
+        justify-content: center;
+        font-size: 14px;
+        color: #c7f2df;
+        font-weight: bold;
+    }
+    .props {
+        margin-left: 10px;
+        border-top: 0.5px solid #a6a6a6;
+        flex-grow: 1;
     }
 }
 </style>

src/components/CommissionItem1.vue

@@ -1,133 +0,0 @@
-<template>
-    <div class="commission-item">
-        <div class="head">
-            <div class="name">{{ detail.junior.nickname }}</div>
-            <div class="num">{{ $t('distribution.commission') }}: +{{ detail.amount }}</div>
-        </div>
-        <div class="order">
-            <ion-thumbnail class="cover">
-                <img :src="detail.order.pic[0]" />
-            </ion-thumbnail>
-            <div class="info">
-                <div class="name">{{ getLocaleString(detail.order.name) }}</div>
-                <div class="price">
-                    <div class="value">{{ $t('balance.symbol') }}100</div>
-                </div>
-            </div>
-        </div>
-        <div class="bottom">
-            <div class="num">×1</div>
-            <div class="props">
-                <div class="prop">{{ $t('order.id') }}: {{ detail.orderId }}</div>
-                <div class="prop">{{ $t('order.createdAt') }}: {{ detail.createdAt }}</div>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-const props = defineProps({
-    detail: {
-        type: Object,
-        default: () => {
-            return {
-                junior: {},
-                order: { pic: [] }
-            }
-        }
-    }
-})
-</script>
-<style lang="less" scoped>
-.commission-item {
-    margin: 0 16px 10px 16px;
-    background: var(--ion-color-step-0);
-    border-radius: 2px;
-    padding: 0 15px 12px 15px;
-    .head {
-        height: 44px;
-        border-bottom: 1px solid var(--ion-color-step-50);
-        .f();
-        .avatar {
-            width: 24px;
-            height: 24px;
-            --border-radius: 2px;
-        }
-        .name {
-            flex-grow: 1;
-            font-size: 16px;
-            color: #c7f2df;
-            font-weight: bold;
-        }
-        .num {
-            font-size: 14px;
-            color: #c7f2df;
-            font-weight: bold;
-        }
-    }
-    .order {
-        .f();
-        margin-top: 14px;
-        margin-bottom: 10px;
-        .cover {
-            width: 50px;
-            height: 50px;
-            --border-radius: 4px;
-        }
-        .info {
-            margin-left: 10px;
-            flex-grow: 1;
-            .name {
-                font-size: 14px;
-                color: #c7f2df;
-                font-weight: bold;
-                line-height: 20px;
-            }
-            .price {
-                .f();
-                margin-top: 5px;
-                line-height: 17px;
-                font-size: 14px;
-                width: 100%;
-                color: #c7f2df;
-                font-weight: bold;
-                .value {
-                    flex-grow: 1;
-                }
-                .num {
-                    color: var(--ion-color-step-350);
-                }
-            }
-        }
-    }
-    .prop {
-        font-size: 10px;
-        line-height: 14px;
-        color: #9fbfb1;
-        margin-top: 4px;
-    }
-}
-.dark {
-    .commission-item {
-        background: var(--ion-color-step-50);
-    }
-}
-
-.bottom {
-    .f;
-    align-items: stretch;
-    .num {
-        width: 50px;
-        .f;
-        justify-content: center;
-        font-size: 14px;
-        color: #c7f2df;
-        font-weight: bold;
-    }
-    .props {
-        margin-left: 10px;
-        border-top: 0.5px solid #a6a6a6;
-        flex-grow: 1;
-    }
-}
-</style>

src/router/index.js

@@ -203,6 +203,14 @@ const router = createRouter({
             meta: {
                 allowGuest: true
             }
+        },
+        {
+            path: '/webView',
+            name: 'webView',
+            component: () => import('@/views/WebViewPage.vue'),
+            meta: {
+                allowGuest: true
+            }
         }
     ]
 })

src/styles/common.less

@@ -14,3 +14,15 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+.ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ellipsisLn(@line) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: @line;
+    -webkit-box-orient: vertical;
+}

src/styles/theme/variables.less

@@ -10,25 +10,25 @@ http://ionicframework.com/docs/theming/ */
     --ion-text-color-rgb: 255, 255, 255;
 
     --ion-color-step-0: #1C1C1C;
-    --ion-color-step-50: #1e1f30;
-    --ion-color-step-100: #2a2b3b;
-    --ion-color-step-150: #363646;
-    --ion-color-step-200: #414251;
-    --ion-color-step-250: #4d4e5c;
-    --ion-color-step-300: #595a66;
-    --ion-color-step-350: #60616d;
-    --ion-color-step-400: #71717c;
-    --ion-color-step-450: #7d7d87;
-    --ion-color-step-500: #898992;
-    --ion-color-step-550: #94959d;
-    --ion-color-step-600: #a0a1a8;
-    --ion-color-step-650: #acacb3;
-    --ion-color-step-700: #b8b8be;
-    --ion-color-step-750: #c4c4c9;
-    --ion-color-step-800: #d4d4d4;
-    --ion-color-step-850: #dbdcde;
-    --ion-color-step-900: #e7e7e9;
-    --ion-color-step-950: #f3f3f4;
+	--ion-color-step-50: #272727;
+	--ion-color-step-100: #333333;
+	--ion-color-step-150: #3e3e3e;
+	--ion-color-step-200: #494949;
+	--ion-color-step-250: #555555;
+	--ion-color-step-300: #606060;
+	--ion-color-step-350: #6b6b6b;
+	--ion-color-step-400: #777777;
+	--ion-color-step-450: #828282;
+	--ion-color-step-500: #8e8e8e;
+	--ion-color-step-550: #999999;
+	--ion-color-step-600: #a4a4a4;
+	--ion-color-step-650: #b0b0b0;
+	--ion-color-step-700: #bbbbbb;
+	--ion-color-step-750: #c6c6c6;
+	--ion-color-step-800: #d2d2d2;
+	--ion-color-step-850: #dddddd;
+	--ion-color-step-900: #e8e8e8;
+	--ion-color-step-950: #f4f4f4;
 
     --ion-item-background: #1C1C1C;
 

src/views/CommissionListPage.vue

@@ -133,47 +133,8 @@ export default {
         padding-right: 6px;
     }
 }
-.dark {
-    .date {
-        background: var(--ion-color-step-50);
-    }
-}
-.record-item {
-    --background: var(--ion-color-step-0);
-    --border-color: var(--ion-color-step-100);
-    ion-icon {
-        width: 32px;
-        height: 32px;
-    }
-    ion-label {
-        margin-left: 10px;
-    }
-    .amount {
-        font-weight: bold;
-    }
-    ion-icon {
-        fill: #59b12c;
-    }
-    &.recharge,
-    &.receipt {
-        ion-icon {
-            fill: #477bff;
-        }
-        .amount {
-            color: #477bff;
-        }
-    }
-    &.withdraw {
-        h3 {
-            color: #ff7f1f;
-        }
-        ion-icon {
-            fill: #ff7f1f;
-        }
-        .amount {
-            color: #ff7f1f;
-        }
-    }
+.date {
+    background: #2c302f;
 }
 ion-modal#picker {
     --min-width: calc(100vw - 100px);

src/views/DistributionPage.vue

@@ -62,7 +62,7 @@
                         <ion-icon :icon="chevronForwardOutline"></ion-icon>
                     </div>
                 </div>
-                <CommissionItem class="light" v-for="item in records" :key="item.id" :detail="item"></CommissionItem>
+                <CommissionItem class="darker" v-for="item in records" :key="item.id" :detail="item"></CommissionItem>
                 <van-empty v-if="empty" :description="$t('common.noRecords')" :image="emptyImg"></van-empty>
             </div>
             <ion-modal class="qr-modal dialog" :is-open="showQR" @didDismiss="showQR = false">
@@ -82,7 +82,7 @@
 import { mapState } from 'pinia'
 import { useUserStore } from '@/stores/user'
 import { caretForwardCircleOutline, chevronForwardOutline } from 'ionicons/icons'
-import CommissionItem from '@/components/CommissionItem1.vue'
+import CommissionItem from '@/components/CommissionItem.vue'
 import VueQrcode from '@chenfengyuan/vue-qrcode'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -418,15 +418,6 @@ ion-content {
         color: #9fbfb1;
     }
 }
-:deep(.commission-item.light) {
-    background: #1c1c1c;
-    .head {
-        border-bottom: 1px solid #202020;
-    }
-    .prop {
-        color: rgba(255, 255, 255, 0.6);
-    }
-}
 .qr-modal {
     --width: 250px;
     --height: 250px;

src/views/WebViewPage.vue

@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+<script>
+export default {
+    name: 'WebPage',
+    data() {
+        return {
+            url: 'https://www.google.com'
+        }
+    }
+}
+</script>