Browse Source

样式调整

冯诚 2 years ago
parent
commit
cf1d4aa02a

+ 14 - 8
src/components/nav-bar/index.vue

@@ -38,7 +38,7 @@
       <div class="user pointer flex-ac" @click.stop="onClickMine">
         <template v-if="state.userInfo">
           <i class="icon-mine"></i>
-          <span class="user-name">{{
+          <span class="user-name ellipsis">{{
             state.userInfo ? state.userInfo.name : 'Sign in'
           }}</span>
         </template>
@@ -68,7 +68,7 @@
         >
           <div class="info" @click.stop>
             <div class="p1">
-              <p class="name">Hi, {{ state.userInfo.name }}</p>
+              <p class="name ellipsis">Hi, {{ state.userInfo.name }}</p>
               <p class="intro">
                 {{ state.userInfo.orders.length ? 'Pro' : 'Ordinary' }} member
               </p>
@@ -95,14 +95,17 @@
                     <div class="service">
                       <div class="service-title">
                         <i class="service-icon icon-lite fls0"></i>
-                        <div class="service-type fls0">
+                        <div class="service-type ellipsis">
                           {{ item.product_name }}
                         </div>
-                        <div class="service-period">
-                          {{ item.start_time }} to {{ item.end_time }}
+                        <div class="service-period fls0">
+                          {{ $util.formatDate(item.start_time) }} to
+                          {{ $util.formatDate(item.end_time) }}
                         </div>
                       </div>
-                      <div class="service-model tac">{{ item.phone_info }}</div>
+                      <div class="service-model tac ellipsis">
+                        {{ item.phone_info }}
+                      </div>
                       <div class="service-code tac">{{ item.phone_imei }}</div>
                     </div>
                   </div>
@@ -273,6 +276,7 @@ async function signOut() {
         height: 32px;
       }
       .user-name {
+        max-width: 300px;
         font-size: 32px;
         font-weight: 600;
         color: $primary-color;
@@ -399,7 +403,9 @@ async function signOut() {
 
     &-body {
       flex: 1;
-      overflow: auto;
+      @include media-breakpoint-down(md) {
+        overflow: auto;
+      }
     }
   }
   .nav-links {
@@ -501,7 +507,7 @@ async function signOut() {
   }
   .p1 {
     position: relative;
-    padding: 48px 0 0 50px;
+    padding: 48px 50px 0;
     height: 202px;
     color: $primary-color;
     background-color: #e9ebf0;

+ 0 - 19
src/filters/index.ts

@@ -1,19 +0,0 @@
-import { App } from 'vue'
-
-export function formatDate(value: string) {
-  return value.split(' ')[0].replace(/-/g, '/')
-}
-
-const filters = { formatDate }
-
-export default {
-  install(app: App) {
-    app.config.globalProperties.$filters = filters
-  },
-}
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $filters: typeof filters
-  }
-}

+ 2 - 3
src/main.ts

@@ -9,11 +9,10 @@ import './utils/third-login'
 
 import Toast from './components/toast'
 import Dialog from './components/dialog'
-import globalFilters from './filters'
+import globalUtils from './utils/global'
 
 bootstrap().finally(() => {
   const app = createApp(App)
-  app.use(router).mount('#app')
+  app.use(globalUtils).use(router).mount('#app')
   app.use(Toast).use(Dialog)
-  app.use(globalFilters)
 })

+ 7 - 4
src/pages/dashboard/index.vue

@@ -34,14 +34,17 @@
                 <div class="service">
                   <div class="service-title">
                     <i class="service-icon icon-lite fls0"></i>
-                    <div class="service-type fls0">
+                    <div class="service-type ellipsis">
                       {{ item.product_name }}
                     </div>
-                    <div class="service-period">
-                      {{ item.start_time }} to {{ item.end_time }}
+                    <div class="service-period fls0">
+                      {{ $util.formatDate(item.start_time) }} to
+                      {{ $util.formatDate(item.end_time) }}
                     </div>
                   </div>
-                  <div class="service-model tac">{{ item.phone_info }}</div>
+                  <div class="service-model tac ellipsis">
+                    {{ item.phone_info }}
+                  </div>
                   <div class="service-code tac">{{ item.phone_imei }}</div>
                 </div>
               </div>

+ 1 - 0
src/pages/fill-order/StepOne.vue

@@ -280,6 +280,7 @@ async function next() {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
+  line-height: 1;
 
   .p1 {
     color: #9aa8c5;

+ 5 - 3
src/pages/fill-order/StepThree.vue

@@ -4,14 +4,16 @@
       <div class="ptc-inner">
         <p class="ptc-label">Version & Price</p>
         <div class="detail">
-          <strong class="s1">{{ getters.selectedProduct.name }}</strong>
-          <span style="font-size: 0"
+          <strong class="s1 ellipsis" :title="getters.selectedProduct.name">{{
+            getters.selectedProduct.name
+          }}</strong>
+          <span class="fls0" style="font-size: 0"
             ><strong class="s2">${{ getters.cost }}</strong
             ><span class="s3">{{
               state.form.subscribe_type === 'year' ? 'Annual' : 'Monthly'
             }}</span></span
           >
-          <strong class="s4" @click="$emit('go', -2)">Modify ></strong>
+          <strong class="s4 fls0" @click="$emit('go', -2)">Modify ></strong>
         </div>
       </div>
     </div>

+ 16 - 3
src/pages/fill-order/StepTwo.vue

@@ -4,14 +4,16 @@
       <div class="ptc-inner">
         <p class="ptc-label">Version & Price</p>
         <div class="detail">
-          <strong class="s1">{{ getters.selectedProduct.name }}</strong>
-          <span style="font-size: 0"
+          <strong class="s1 ellipsis" :title="getters.selectedProduct.name">{{
+            getters.selectedProduct.name
+          }}</strong>
+          <span class="fls0" style="font-size: 0"
             ><strong class="s2">${{ getters.cost }}</strong
             ><span class="s3">{{
               state.form.subscribe_type === 'year' ? 'Annual' : 'Monthly'
             }}</span></span
           >
-          <strong class="s4" @click="$emit('go', -1)">Modify ></strong>
+          <strong class="s4 fls0" @click="$emit('go', -1)">Modify ></strong>
         </div>
       </div>
     </div>
@@ -52,6 +54,13 @@
               class="device-item"
               :value="model.id"
               :disabled="!!state.form.renewal"
+              :style="{
+                fontSize: $util.calcFZ({
+                  text: model.name,
+                  baseLength: 12,
+                  baseSize: 40,
+                }),
+              }"
             >
               <img class="device-img" :src="model.image" />
               <p class="device-name">{{ model.name }}</p>
@@ -121,5 +130,9 @@ function onSelectModel() {
     background-color: #eee;
     background-size: contain;
   }
+
+  &-name {
+    padding: 0 24px;
+  }
 }
 </style>

+ 1 - 0
src/pages/fill-order/index.vue

@@ -72,6 +72,7 @@ function go(delta = 1) {
       margin: 0 20px 0 48px;
     }
     .s3 {
+      margin-right: 48px;
       font-size: 28px;
       color: #1a1a1a;
     }

+ 2 - 2
src/pages/gift-card/index.vue

@@ -38,8 +38,8 @@
           >
             <p class="card-title">{{ item.title }}</p>
             <p class="card-period">
-              Validity: {{ $filters.formatDate(item.created_at) }}-{{
-                $filters.formatDate(item.expired_at)
+              Validity: {{ $util.formatDate(item.created_at) }}-{{
+                $util.formatDate(item.expired_at)
               }}
             </p>
             <p class="card-value">

+ 5 - 3
src/pages/pay-result/index.vue

@@ -54,7 +54,7 @@
         <i class="alert-icon icon-warn"></i>
         <p class="alert-message">Your membership service purchase failed</p>
       </div>
-      <p class="reason">Insufficient bank card balance</p>
+      <!-- <p class="reason">Insufficient bank card balance</p> -->
       <div class="button-group">
         <button class="ptc-button">CUSTOMER SERVICE</button>
         <button class="ptc-button ptc-button--stroke">HOMEPAGE</button>
@@ -71,7 +71,9 @@ export default defineComponent({
   name: 'PayResult',
   props: ['status'], // 'success' | 'fail'
   async beforeRouteEnter(to) {
-    await getCurrentOrder(to.query.id)
+    if (to.params.status === 'success') {
+      await getCurrentOrder(to.query.id)
+    }
   },
   computed: {
     info() {
@@ -98,7 +100,7 @@ export default defineComponent({
     background-image: url(@img/warn.png);
   }
   .alert {
-    margin-top: 64px;
+    margin: 64px 0;
     &-icon {
       display: block;
       margin: auto;

+ 4 - 1
src/pages/repair/history.vue

@@ -50,7 +50,10 @@
       </div>
       <div class="button-group">
         <button
-          v-if="item.audit_status == 2"
+          v-if="
+            item.audit_status == 2 ||
+            (item.audit_status == 1 && item.expired == 1)
+          "
           class="ptc-button ptc-button--stroke"
           @click="deleteRepair(item)"
         >

+ 26 - 0
src/utils/global.ts

@@ -0,0 +1,26 @@
+import { App } from 'vue'
+
+export const utils = {
+  formatDate(value: string) {
+    return value.split(' ')[0].replace(/-/g, '/')
+  },
+  calcFZ({ text = '', baseLength = 0, baseSize = 24, minSize = 24 }) {
+    const scale = Math.max(
+      Math.min(baseLength / text.length, 1),
+      minSize / baseSize
+    )
+    return (baseSize / 100) * scale + 'rem'
+  },
+}
+
+export default {
+  install(app: App) {
+    app.config.globalProperties.$util = utils
+  },
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $util: typeof utils
+  }
+}

+ 0 - 1
vite.config.ts

@@ -22,7 +22,6 @@ export default defineConfig(({ command }) => ({
   },
   base: '/ptc/',
   server: {
-    https: true,
     proxy: {
       '/api/': {
         target: 'http://t.ptcrepair.com.au',