fix: 修改登录页面

src/store/modules/locale.ts

@@ -14,10 +14,16 @@ const lsLocaleSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
 interface LocaleState {
   localInfo: LocaleSetting;
 }
+interface appList {
+  name: string;
+  url: string;
+}
+
 interface appItem {
   name: string;
   icon: string;
   url: string;
+  appList: appList[];
 }
 
 export const useLocaleStore = defineStore({
@@ -36,13 +42,31 @@ export const useLocaleStore = defineStore({
       return [
         {
           name: 'iOS版',
-          url: 'http://fir.4dage.com/jpGeosi?release_id=63e5bff10d81cc60625f1bb9',
           icon: 'uil:apple',
+          appList: [
+            {
+              name: 'Pro',
+              url: 'https://apps.apple.com/cn/app/id6451010749',
+            },
+            {
+              name: 'Minion/Mega',
+              url: 'https://apps.apple.com/cn/app/id6451013242',
+            },
+          ],
         },
         {
           name: 'Android版',
-          url: 'http://fir.4dage.com/jwm6?release_id=63eb36e40d81cc40437b397d',
           icon: 'uil:android',
+          appList: [
+            {
+              name: 'Pro',
+              url: 'https://play.google.com/store/apps/details?id=com.fdage.eight.jp',
+            },
+            {
+              name: 'Minion/Mega',
+              url: 'https://play.google.com/store/apps/details?id=com.fdage.turn.dual.jp',
+            },
+          ],
         },
       ];
     },

src/views/sys/login/Login.vue

@@ -14,10 +14,11 @@
     <div class="container relative h-full py-2 mx-auto sm:px-10">
       <div class="flex h-full">
         <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
-          <AppLogo class="-enter-x" />
+          <AppLogo v-if="false" class="-enter-x" />
           <div class="my-auto">
             <img
               :alt="title"
+              style="margin-left: 25%"
               src="../../../assets/svg/login-box-bg.svg"
               class="w-1/2 -mt-16 -enter-x"
             />
@@ -28,16 +29,23 @@
               {{ t('sys.login.signInDesc') }}
             </div>
             <div class="appcode">
-              <div v-for="item in getAppList" :key="item.name">
-                <QrCode
-                  :value="item.url"
-                  :options="{ margin: 2 }"
-                  class="enter-x flex justify-center xl:justify-start"
-                  :width="150"
-                />
-                <div class="title">
-                  <Icon :icon="item.icon" :size="20" />
-                  {{ item.name }}
+              <div class="appcodeItem" v-for="item in getAppList" :key="item.name">
+                <div class="item">
+                  <span>new</span>
+                  <div class="itemTitle">{{ item.name }}</div>
+                  <div class="coderList">
+                    <div class="qecodeItem" v-for="items in item.appList" :key="items.url">
+                      <QrCode
+                        :value="items.url"
+                        :options="{ margin: 2 }"
+                        class="enter-x flex justify-center xl:justify-start"
+                        :width="100"
+                      />
+                      <div class="title">
+                        {{ items.name }}
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -46,9 +54,23 @@
         <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
           <div
             :class="`${prefixCls}-form`"
-            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
+            class="flex relative w-full mx-auto my-auto px-5 py-8 rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
           >
-            <LoginForm />
+            <div class="LoginForm">
+              <LoginForm />
+              <div class="newList">
+                <div
+                  class="newItem"
+                  v-for="item in newList"
+                  :key="item.title"
+                  @click="handleClick(item.link)"
+                >
+                  {{ item.time }}
+                  <div class="new">NEWS</div>
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
             <ForgetPasswordForm />
             <RegisterForm />
             <MobileForm />
@@ -73,7 +95,7 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
-  import Icon from '/@/components/Icon/src/Icon.vue';
+  // import Icon from '/@/components/Icon/src/Icon.vue';
 
   defineProps({
     sessionTimeout: {
@@ -88,6 +110,26 @@
   const showLocale = localeStore.getShowPicker;
   const title = computed(() => globSetting?.title ?? '');
   const { getAppList } = localeStore;
+  const newList = [
+    {
+      time: '2023/09/19',
+      title: 'iOS 17対応について',
+      link: 'https://apps.4dkankan.jp/news/view/8/',
+    },
+    {
+      time: '2023/07/07',
+      title: '4DKanKan®シリーズ、7月7日よりTJMデザインでの取扱いスタート',
+      link: 'https://apps.4dkankan.jp/news/view/7/',
+    },
+    {
+      time: '2022/11/01',
+      title: '建設DX展に出展いたします',
+      link: 'https://apps.4dkankan.jp/news/view/6/',
+    },
+  ];
+  function handleClick(link: string) {
+    window.open(link);
+  }
   defineExpose({
     getAppList,
   });
@@ -160,7 +202,7 @@
     }
 
     .@{logo-prefix-cls} {
-      position: absolute;
+      position: relative;
       top: 12px;
       height: 30px;
 
@@ -175,12 +217,94 @@
     }
 
     .container {
+      .LoginForm {
+        width: 455px;
+      }
+      .newList {
+        width: 600px;
+        overflow: hidden;
+        .newItem {
+          &:hover:after {
+            opacity: 1;
+            transform: translateX(0%);
+          }
+          cursor: pointer;
+          padding-top: 20px;
+          border-bottom: 1px solid #cdcccd;
+          width: 100%;
+          .new {
+            display: inline-block;
+            padding: 5px 10px;
+            background-color: #8cefee;
+          }
+          &:after {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 1px;
+            opacity: 0.4;
+            background: #121212;
+            transition: all 0.3s;
+            transform: translateX(-100%);
+          }
+        }
+      }
       .my-auto {
         .appcode {
           margin-top: 1.25rem;
-          width: 340px;
+          width: 500px;
           display: flex;
           justify-content: space-between;
+          text-align: center;
+          &Item {
+            display: flex;
+            justify-content: space-between;
+            text-align: center;
+          }
+          span {
+            font-size: 20px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 28px;
+          }
+          .item {
+            text-align: center;
+            &Title {
+              width: 214px;
+              height: 50px;
+              padding: 11px 0;
+              background: #8defef;
+              border-radius: 25px;
+              font-size: 20px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              color: #333333;
+              line-height: 28px;
+              text-align: center;
+              margin: 12px auto;
+            }
+            .coderList {
+              .qecodeItem {
+                .title {
+                  padding: 4px 5px;
+                  font-size: 14px;
+                  font-family: PingFangSC, PingFang SC;
+                  font-weight: 500;
+                  color: #333333;
+                  line-height: 20px;
+                  width: 100px;
+                  height: 28px;
+                  background: #8defef;
+                  border-radius: 14px;
+                }
+              }
+            }
+          }
+          .coderList {
+            display: flex;
+            justify-content: space-between;
+          }
           img {
             width: 150px;
             padding: 2px;
@@ -253,4 +377,8 @@
       color: @text-color-secondary;
     }
   }
+  @keyframes showBorder {
+    0% {
+    }
+  }
 </style>