smartsearch/h5app/src/App.vue

<template >
  <ion-app style="z-index: 1">
    <ion-router-outlet/>
  </ion-app>
</template>

<script setup lang="ts">
import {IonApp, IonRouterOutlet} from '@ionic/vue';
import {getCurrentInstance, ref} from "vue";
import {useUserStore} from "@/store/modules/user";

const {appContext: {config: {globalProperties}}} = getCurrentInstance();

const userStore = useUserStore();

const user = ref(userStore.getUserInfo);

if (user.value != null) {
  globalProperties.$routeActive = true;
}

</script>

<style lang="less">
ion-content {
  --background: #fafafa !important;
}

/*顶部导航白色背景主题样式*/
.header-theme2 {
  background: white;
  text-align: center;

  ion-toolbar {
    --background: white;
    color: #4F4F63;
    font-weight: bold;

    ion-icon {
      padding: 0px 10px;
      font-size: 24px !important;
      height: 44px !important;
    }
  }

  ion-title {
    margin-left: -40px;
    font-weight: bold;
  }
}

.grid-content {
  margin: 10px 10px;
  background-color: #f0f2f5;
  border-radius: 20px;
  position: relative;

  #btnDetail {
    position: absolute;
    top: 50%;
    right: 10px;
  }

  h6 {
    text-align: center;
    color: #1a1a1a;
  }

  ion-item::part(native) {
    padding-left: 10px;
  }

  ion-item {
    border-radius: 10px;
    --border-width: 0px;
    --border-style: unset !important;
  }
}

.back-icon {
  font-size: 24px;
  padding-left: 7px;
  height: 44px;
}

.panel {
  margin: 0px;


  .panel-content {
    margin-top: 10px;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
  }
}


.panel-title2 {
  font-size: 16px;
  color: #380F0A;
  display: flex;
  font-weight: bold;
  padding-top: 5px;

  .item-flag {
    height: 20px;
    width: 3px;
    border-radius: 8px;
    margin-top: 1px;
    margin-right: 7px;
    background: linear-gradient(to bottom, #fff, #0094FF);
  }
}

.add-icon {
  font-size: 24px;
  height: 44px;
}

.edit-del-icon {
  padding: 0px 0px;
  font-size: 13px;
  height: 15px !important;
}

.edit-page {
  .edit-content {
    margin: 12px;
    background: white;
    border-radius: 10px;
    padding: 7px;
  }

  ion-item {
    --border-style: none;
  }

  ion-select {
    max-width: 75%;
  }

  .edit-button {
    text-align: right;

    ion-button {
      width: 100px;
      --border-radius: 18px !important;
    }
  }

  ion-input {
    text-align: right;
  }
}

.danger {
  color: red;
}

.detail-page {

  .detail-content {
    margin: 12px;
    background: white;
    border-radius: 10px;
    padding: 7px;
  }

  ion-list {
    padding: 0px;
  }

  ion-item {
    --border-style: none;
  }

  ion-label {
    min-width: 120px;
  }
}

.list-page {
  --background: #fafafa !important;

  .list-content {
    margin: 10px 8px;
    background-color: #f0f2f5;
    border-radius: 20px;
    position: relative;

    ion-item::part(native) {
      padding-left: 10px;
    }

    ion-item {
      border-radius: 10px;
    }
  }

  ion-item {
    --border-style: none;
  }

  ion-grid {
    ion-row {
      /* ion-col:last-child {
         text-align: left;
         font-size: 14px;
       }

       ion-col:last-child {
         //display: flex;
         overflow: hidden;
         text-overflow: ellipsis;

         span {
           white-space: nowrap;
         }
       }*/
    }

    .row-detail {
      ion-col {
        text-align: left;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}

ion-grid {
  ion-row {
    /* ion-col:last-child {
       text-align: left;
       font-size: 14px;
     }

     ion-col:last-child {
       //display: flex;
       overflow: hidden;
       text-overflow: ellipsis;

       span {
         white-space: nowrap;
       }
     }*/
  }

  .row-detail {
    ion-col {
      text-align: left;
      color: #333333;
      font-size: 14px;
    }
  }
}

.ion-buttonLen {
  --border-radius: 18px;
  --background: #0094FF;
  color: #fff;
  font-size: 14px;
  --border-color: #0094FF;
  width: 70%;
}


</style>