smart-screen-demo-web/src/App.vue

<template>
  <div id="app">
    <div class="app-bg"></div>

    <!--    <div class="safe-area-inset-bottom">
      <div class="tabbar-height-inset-bottom">
        <router-view />
      </div>
    </div>-->

    <router-view v-slot="{ Component }">
      <component
        :is="Component"
        v-if="
          !$route.meta ||
          ($route.meta &&
            ($route.meta.notKeepAlive ||
              $route.meta.notKeepAlive === undefined))
        "
      />

      <div
        v-if="
          !(
            !$route.meta ||
            ($route.meta &&
              ($route.meta.notKeepAlive ||
                $route.meta.notKeepAlive === undefined))
          )
        "
      >
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </div>
    </router-view>

    <van-sticky position="bottom" class="bg-red">
      <x-footer></x-footer>
    </van-sticky>
    <!--    未来可能需要封装组件-->
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { provide, inject } from "vue";
import { $commonService } from "@/services/framework/dependency-injection-service";
import { $commonService0, testFun } from "@/app-import";

// console.log(useRouter());
const $route = useRoute();

console.log("window.$commonService", window.$commonService);
// 推荐使用 $commonService
console.log($commonService.$i18nService.getI18nLocale());

// test 在单独js中引用公共服务
testFun();

// debugger
const title = ref("");

// 生命周期
// 组件被挂载时
onMounted(() => {});
</script>

<style lang="scss">
@import "src/styles/index";

body {
  min-height: 100vh;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  //background: #9c26b0;

  .app-bg {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    // 海信内页渐变
    background: linear-gradient(
      0.44deg,
      #e5effb 2.48%,
      #e5f0f5 88.5%,
      #e9f4f9 90.37%,
      #f7fdff 100.97%
    );
    //background: red;
  }
}
// 延长自动填充背景色的时间 为达到修改自动填充时input的背景色问题
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 111111s;
  -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}
</style>