af-mobile-client-vue3 1.3.11 → 1.3.13

package/src/views/user/login/LoginTitle.vue

@@ -1,76 +1,76 @@
-<script setup lang="ts">
-import { APP_WEB_CONFIG_KEY } from '@af-mobile-client-vue3/stores/mutation-type'
-import { createStorage } from '@af-mobile-client-vue3/utils/Storage'
-
-const Storage = createStorage({ storage: localStorage })
-const webConfig = Storage.get(APP_WEB_CONFIG_KEY)
-
-//  动态获取图片
-function getAssetsImages(logo) {
-  return new URL(`/src/assets/img/user/login/${logo}`, import.meta.url).href
-}
-</script>
-
-<template>
-  <div class="login_title">
-    <div class="login_logo">
-      <img :src="getAssetsImages(webConfig?.setting?.systemLogo ?? 'logo.png')" alt="logo">
-    </div>
-    <div class="title_content">
-      <div class="login_title_value">
-        {{ webConfig?.setting?.systemName ?? '智慧燃气' }}
-      </div>
-      <div class="login_description">
-        欢迎使用
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-html:not(.dark) {
-  .login_title {
-    background-image: url('@af-mobile-client-vue3/assets/img/user/login/background-shadow-1.svg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-  }
-  .title_content {
-    color: rgb(83, 88, 110);
-    .login_description {
-      color: var(--van-text-color-3);
-    }
-  }
-}
-.login_title {
-  width: 100%;
-  text-align: center;
-  .login_logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100px;
-    height: 100px;
-    margin: 0 auto 62px auto;
-    border-radius: 23.04px;
-    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.09);
-    background: var(--van-background-2);
-    text-align: center;
-    img {
-      width: 82px;
-      height: 82px;
-    }
-  }
-  .title_content {
-    font-size: 26px;
-    font-weight: 600;
-    line-height: 26px;
-    .login_description {
-      margin-top: 13px;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 16px;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { APP_WEB_CONFIG_KEY } from '@af-mobile-client-vue3/stores/mutation-type'
+import { createStorage } from '@af-mobile-client-vue3/utils/Storage'
+
+const Storage = createStorage({ storage: localStorage })
+const webConfig = Storage.get(APP_WEB_CONFIG_KEY)
+
+//  动态获取图片
+function getAssetsImages(logo) {
+  return new URL(`/src/assets/img/user/login/${logo}`, import.meta.url).href
+}
+</script>
+
+<template>
+  <div class="login_title">
+    <div class="login_logo">
+      <img :src="getAssetsImages(webConfig?.setting?.systemLogo ?? 'logo.png')" alt="logo">
+    </div>
+    <div class="title_content">
+      <div class="login_title_value">
+        {{ webConfig?.setting?.systemName ?? '智慧燃气' }}
+      </div>
+      <div class="login_description">
+        欢迎使用
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+html:not(.dark) {
+  .login_title {
+    background-image: url('@af-mobile-client-vue3/assets/img/user/login/background-shadow-1.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+  }
+  .title_content {
+    color: rgb(83, 88, 110);
+    .login_description {
+      color: var(--van-text-color-3);
+    }
+  }
+}
+.login_title {
+  width: 100%;
+  text-align: center;
+  .login_logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 100px;
+    margin: 0 auto 62px auto;
+    border-radius: 23.04px;
+    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.09);
+    background: var(--van-background-2);
+    text-align: center;
+    img {
+      width: 82px;
+      height: 82px;
+    }
+  }
+  .title_content {
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 26px;
+    .login_description {
+      margin-top: 13px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 16px;
+    }
+  }
+}
+</style>

package/src/views/user/login/LoginWave.vue

@@ -1,109 +1,109 @@
-<script setup lang="ts">
-import { hexToRgba } from '@af-mobile-client-vue3/utils/common'
-</script>
-
-<template>
-  <div class="wave">
-    <div class="enter-y wave-wrapper fixed bottom-0 w-full !-z-5">
-      <svg
-        class="ignore-waves"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        viewBox="0 24 150 28"
-        preserveAspectRatio="none"
-        shape-rendering="auto"
-      >
-        <defs>
-          <path
-            id="gentle-wave"
-            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
-          />
-        </defs>
-        <g class="parallax">
-          <use
-            xlink:href="#gentle-wave"
-            x="48"
-            y="0"
-            :fill="hexToRgba('#3895fa', 0.4)"
-          />
-          <use
-            xlink:href="#gentle-wave"
-            x="48"
-            y="3"
-            :fill="hexToRgba('#3895fa', 0.5)"
-          />
-          <use
-            xlink:href="#gentle-wave"
-            x="48"
-            y="5"
-            :fill="hexToRgba('#3895fa', 0.6)"
-          />
-          <use
-            xlink:href="#gentle-wave"
-            x="48"
-            y="7"
-            :fill="hexToRgba('#3895fa', 0.7)"
-          />
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.wave {
-  position: relative;
-  height: 80px;
-  z-index: 9999;
-}
-
-.wave-wrapper {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-}
-.ignore-waves {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 50px;
-  min-height: 40px;
-  max-height: 80px;
-}
-
-/* Animation */
-.parallax > use {
-  animation: move-forever 12s linear infinite;
-}
-
-.parallax > use:nth-child(1) {
-  animation-delay: -2s;
-  animation-duration: 7s;
-}
-
-.parallax > use:nth-child(2) {
-  animation-delay: -3s;
-  animation-duration: 10s;
-}
-
-.parallax > use:nth-child(3) {
-  animation-delay: -4s;
-  animation-duration: 13s;
-}
-
-.parallax > use:nth-child(4) {
-  animation-delay: -5s;
-  animation-duration: 16s;
-}
-
-@keyframes move-forever {
-  0% {
-    transform: translate3d(-90px, 0, 0);
-  }
-
-  100% {
-    transform: translate3d(85px, 0, 0);
-  }
-}
-</style>
+<script setup lang="ts">
+import { hexToRgba } from '@af-mobile-client-vue3/utils/common'
+</script>
+
+<template>
+  <div class="wave">
+    <div class="enter-y wave-wrapper w-full bottom-0 fixed !-z-5">
+      <svg
+        class="ignore-waves"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 24 150 28"
+        preserveAspectRatio="none"
+        shape-rendering="auto"
+      >
+        <defs>
+          <path
+            id="gentle-wave"
+            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+          />
+        </defs>
+        <g class="parallax">
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="0"
+            :fill="hexToRgba('#3895fa', 0.4)"
+          />
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="3"
+            :fill="hexToRgba('#3895fa', 0.5)"
+          />
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="5"
+            :fill="hexToRgba('#3895fa', 0.6)"
+          />
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="7"
+            :fill="hexToRgba('#3895fa', 0.7)"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.wave {
+  position: relative;
+  height: 80px;
+  z-index: 9999;
+}
+
+.wave-wrapper {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+}
+.ignore-waves {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 50px;
+  min-height: 40px;
+  max-height: 80px;
+}
+
+/* Animation */
+.parallax > use {
+  animation: move-forever 12s linear infinite;
+}
+
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 16s;
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+</style>

package/src/views/user/login/index.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import ForgetPasswordForm from './ForgetPasswordForm.vue'
-import LoginForm from './LoginForm.vue'
-import LoginTitle from './LoginTitle.vue'
-</script>
-
-<template>
-  <div class="login_container">
-    <LoginTitle />
-    <LoginForm />
-    <ForgetPasswordForm />
-  </div>
-</template>
-
-<style scoped lang="less">
-.login_container {
-  height: 100vh;
-  padding-top: 10px;
-  background: var(--van-background-2);
-  position: relative;
-}
-</style>
+<script setup lang="ts">
+import ForgetPasswordForm from './ForgetPasswordForm.vue'
+import LoginForm from './LoginForm.vue'
+import LoginTitle from './LoginTitle.vue'
+</script>
+
+<template>
+  <div class="login_container">
+    <LoginTitle />
+    <LoginForm />
+    <ForgetPasswordForm />
+  </div>
+</template>
+
+<style scoped lang="less">
+.login_container {
+  height: 100vh;
+  padding-top: 10px;
+  background: var(--van-background-2);
+  position: relative;
+}
+</style>