EmploymentSite/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";
import {useRouter} from "vue-router";

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

const userStore = useUserStore();

const router = useRouter();

const user = ref(userStore.getUserInfo);

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

</script>

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

/*顶部导航白色背景主题样式*/
.header-theme2 {
  border-bottom: 1px solid #f1f5f7;
  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;
  }
}

.header-theme2::after {
  background-image: none !important;
}

.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;

  .custom {
    --placeholder-color: gray;
    --placeholder-opacity: 0.5;
  }

  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .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%;
}

.bw-vue-form {
  .form-title {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .form-input {
    padding: 10px;

    ion-input {
      border-bottom: 1px solid #f1f5f7;
      color: #8c8f93;
      --padding-start: 0px;
    }

    ion-textarea {
      border-bottom: 1px solid #f1f5f7;
      color: #8c8f93;
      --padding-start: 0px;
    }
  }

  .form-select {
    padding: 10px;

    ion-select {
      border-bottom: 1px solid #f1f5f7;
      color: #8c8f93;
      --padding-start: 0px;
    }

    ion-select::part(icon) {
      display: none;
    }

    ion-select::after {
      content: "选择";
      color: #02a6f1;
    }

    ion-item {
      ion-select {
        border-bottom: 1px solid #f1f5f7;
        color: #8c8f93;
        --padding-start: 0px;
      }

      ion-select::part(icon) {
        display: none;
      }

      ion-select::after {
        content: "选择";
        color: #02a6f1;
      }
    }
  }

  .form-detail {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    color: #8c8f93;

    ion-label {
      min-width: 80px;
      padding: 0 5px 0 0;
    }
  }
}

.bw-vue-list {
  .list-title {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .list-content {

    ion-item {
      --inner-border-width: 0;
      //--inner-padding-end: 0px;
      margin: 0 10px;
      border-bottom: 1px solid #f1f5f7;
      border-radius: 0px;

      ion-label {
        .multi-title {
          display: flex;
          justify-content: space-between;
        }

        p {
          font-size: 12px;
          color: #8c8f93;
        }
      }
    }

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

.b-badge {
  padding: 8px;
  margin-right: 8px;
}

.b-badge-dange {
  background-color: #D9001B;
}

.b-badge-warning {
  background-color: #F59A23;
}

.b-badge-default {
  background-color: #008080;
}


.cascade-model {
  --height: 50%;
  --border-radius: 16px;
  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);


  ::part(backdrop) {
    background: rgba(209, 213, 219);
    opacity: 1;
  }

  ion-toolbar {
    --background: white;
    --color: white;
    padding-left: 0 !important;
    padding-right: 0 !important;
    --padding-start: 0;
    --padding-end: 0;
  }

  ion-toolbar ion-item:first-child {
    --inner-border-width: 0 0 0 0;
    text-align: center;
  }

  ion-toolbar ion-item:last-child {
    --padding-start: 0;
    --inner-padding-end: 0;
  }

  ion-segment {
    width: 100%;
    --background: #ffffff;
  }

  ion-segment-button {
    --indicator-color: rgba(254, 255, 255, 0.97);
    --color: #000000;
    --color-checked: #1a65eb;
    --background-hover: rgba(47, 107, 215, 0.98);
    --border-width: 0 0 0 0;
    --indicator-box-shadow: 0 0 0 0;
  }

  /*!* Material Design styles *!*/
  /*ion-segment-button.md {*/
  /*  --color: #000;*/
  /*  --color-checked: #1a65eb;*/
  /*  --border-radius: 0px;*/
  /*  --border-width: 0 0 0 0;*/
  /*}*/

  /*!* iOS styles *!*/
  /*ion-segment-button.ios {*/
  /*  --color: #000;*/
  /*  --color-checked: #1a65eb;*/
  /*  --border-radius: 0px;*/
  /*  --border-width: 0 0 0 0;*/
  /*}*/

  .custom-scroll {
    overflow-y: auto; /* 显示垂直滚动条 */
    max-height: 200px; /* 设置最大高度，超出部分会出现滚动条 */
  }

  /* 可以根据需要自定义滚动条的样式 */

  .custom-scroll::-webkit-scrollbar {
    width: 8px;
  }

  .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
  }

  .custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

}

.b-select {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f7;
  align-items: center;

  .select-placeholder {
    color: #8c8f93;
  }

  .select-text {
    color: #8c8f93;
  }

  a {
    color: #02a6f1;
    font-size: 16px;
    padding: 10px 0px 10px 16px;
  }
}

</style>