login mobile ui

loginv3/components/login.vue

@@ -1,112 +1,23 @@
 <template>
   <v-app id="inspire">
-    <v-row no-gutters>
-      <v-col cols="8">
-        <v-img
-          :aspect-ratio="1"
-          class="bg-white"
-          src="./images/bg-left.jpg"
-          width="100vw"
-          height="100vh"
-          cover
-        ></v-img>
-      </v-col>
-      <v-col cols="4">
-        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
-          <v-img
-            class="bg-white"
-            height="86px"
-            src="../globalimages/logo.png"
-          ></v-img>
-        </div>
-        <v-container class="mb-6 mt-16">
-          <v-row style="min-height: 480px;" no-gutters justify="center">
-            <v-col>
-              <div class="d-flex px-10">
-                <v-sheet class="pl-16 ma-2">
-                  <h2 class="text-h6 font-weight-black">
-                    {{ $t("message.title") }}
-                  </h2>
-                  <p class="text-subtitle-1" style="color: #637381;">
-                    {{ $t("message.sublogin") }}
-                  </p>
-                </v-sheet>
-              </div>
-
-              <div class="d-flex justify-center mb-6">
-                <v-card
-                  class="mx-auto px-12"
-                  elevation="0"
-                  min-width="400"
-                  rounded="lg"
-                >
-                  <v-alert
-                    color="primary"
-                    density="compact"
-                    type="info"
-                    style="width: 100% !important;"
-                    class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
-                    text="Enter the registered account"
-                  >
-                  </v-alert>
-                  <v-text-field
-                    class="mt-3"
-                    v-model="email"
-                    :label="$t('message.email')"
-                    :placeholder="$t('message.placeholderEmail')"
-                    variant="outlined"
-                  ></v-text-field>
-                  <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
-                  <v-text-field
-                    :label="$t('message.password')"
-                    v-model="password"
-                    :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
-                    :type="visible ? 'text' : 'password'"
-                    :placeholder="$t('message.placeholderPassword')"
-                    variant="outlined"
-                    @click:append-inner="visible = !visible"
-                  ></v-text-field>
-                  <div class="text-center">
-                    <v-btn
-                      :loading="loading"
-                      @click="login"
-                      class="mt-5 text-none"
-                      color="blue"
-                      size="large"
-                      variant="elevated"
-                      block
-                    >
-                      {{ $t("message.login") }}
-                      <template v-slot:loader>
-                        <v-progress-linear indeterminate></v-progress-linear>
-                      </template>
-                    </v-btn>
-                  </div>
-                </v-card>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-col>
-    </v-row>
+    <div class="hidden-md-and-up">
+      <mobile-component></mobile-component>
+    </div>
+    <div class="hidden-sm-and-down">
+      <dekstop-component></dekstop-component>
+    </div>
   </v-app>
 </template>
 
 <script type="module">
+  import MobileComponent from "./mobile.vue";
+  import DekstopComponent from "./dekstop.vue";
   export default {
     name: "login",
+    components: {
+      "mobile-component": MobileComponent,
+      "dekstop-component": DekstopComponent,
+    },
     data() {
       return {
         visible: false,