登录页修改

src/design/index.less

@@ -90,4 +90,38 @@ ul {
   color: rgba(0, 0, 0, 0.8) !important;
   background: rgba(0, 0, 0, 0.01) !important;
 }
+@font-face {
+  font-family: 'PingFangSC-Medium';
+  src: url('/public/fonts/PingFangSC-Medium.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'PingFangSC-Regular';
+  src: url('/public/fonts/PingFangSC-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'PingFangSC-Semibold';
+  src: url('/public/fonts/PingFangSC-Semibold.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Bebas';
+  src: url('/public/fonts/BEBAS.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "HarmonyOS Sans SC";
+  src: url("https://db.onlinewebfonts.com/t/243710884e5ebac408cd10a7a89fcc96.eot");
+  src: url("https://db.onlinewebfonts.com/t/243710884e5ebac408cd10a7a89fcc96.eot?#iefix") format("embedded-opentype"),
+       url("https://db.onlinewebfonts.com/t/243710884e5ebac408cd10a7a89fcc96.woff2") format("woff2"),
+       url("https://db.onlinewebfonts.com/t/243710884e5ebac408cd10a7a89fcc96.woff") format("woff"),
+       url("https://db.onlinewebfonts.com/t/243710884e5ebac408cd10a7a89fcc96.ttf") format("truetype"),
+       url("https://db.onlinewebfonts.com/t/243710884e5ebac408cd10a7a89fcc96.svg#HarmonyOS Sans SC") format("svg");
+}
+
 

src/views/demo/illegalconstruction/reportviolations/ShowInfoModal/index.vue

@@ -28,7 +28,7 @@
           <template v-else-if="item.key == 'vehicles'">
             <a-table :dataSource="props.modalData['vehicles']" :columns="vehiclesColumns" :pagination="false">
               <template #bodyCell="{ column, record, text }">
-                <template v-if="column.key === 'images'">
+                <template v-if="column.key === 'vehicleImages'">
                   <a-image-preview-group
                     :preview="{
                       getContainer: getContainer,
@@ -97,7 +97,7 @@ const vehiclesColumns = [
   { title: '联系方式', dataIndex: 'phone', key: 'phone',},
   { title: '类型', dataIndex: 'type', key: 'type',},
   { title: '牌照', dataIndex: 'licensePlate', key: 'licensePlate',},
-  { title: '图片', dataIndex: 'images', key: 'images',},
+  { title: '图片', dataIndex: 'vehicleImages', key: 'vehicleImages',},
 ]
 
 onMounted(() => {

src/views/sys/login/Login.vue

@@ -1,141 +1,114 @@
 <template>
-  <div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
-    <div
-      class="title"
-      :style="{
-        top: `calc(${25}% - (${230 * bi}px))`,
-        left: `${143 * bi}px`,
-        height: `${99 * bi}px`,
-      }"
-    >
-      <img
-        src="/login/logo.png"
-        :style="{
-          width: `${99 * bi}px`,
-          marginRight: `${28 * bi}px`,
-        }"
-      />
-      <div
-        class="title_span"
-        :style="{
-          top: `${22 * bi}px`,
-        }"
-      >
-        <a-col>
-          <a-row>
-            <span
-              class="title_CN"
-              :style="{
-                fontSize: `${50 * bi}px`,
-                height: `${50 * bi}px`,
-              }"
-            >
-              {{ VITE_GLOB_APP_TITLE }}
-            </span>
-          </a-row>
-          <a-row>
-            <span
-              class="title_EN"
-              :style="{
-                fontSize: `${22 * bi}px`,
-                height: `${22 * bi}px`,
-                top: `${10 * bi}px`,
-                opacity: `${0.3 * bi}`,
-              }"
-            >
-              {{ VITE_GLOB_APP_EN_TITLE }}
-            </span>
-          </a-row>
-        </a-col>
-      </div>
+  <div class="login-out-div">
+    <div class="login-image">
+      <div class="image-content"></div>
+      <div class="project-name">{{VITE_GLOB_APP_TITLE}}</div>
     </div>
-    <div class="bg">
-      <div
-        class="bg_login"
-        :style="{
-          height: `${isRegister ? 600 * bi : 400 * bi}px`,
-          width: `${294.1 * bi}px`,
-        }"
-      >
-        <LoginForm :bi="bi" />
-        <ForgetPasswordForm />
-        <RegisterForm />
-        <MobileForm />
-        <QrCodeForm />
+    <div class="login-form">
+      <div class="content" :style="{ transform: `scale(${ratio})` }">
+        <div class="title-icon"></div>
+        <div class="title">费县违法建设监管平台</div>
+        <div class="sub-title">欢迎登陆</div>
+        <a-form
+          class="login-use-form"
+          :model="formData"
+          :rules="getFormRules"
+          ref="formRef"
+          @keypress.enter="handleLogin"
+        >
+          <FormItem name="account">
+            <a-input
+              size="large"
+              v-model:value="formData.account"
+              placeholder="请输入账户"
+              class=""
+              style="height: 56px"
+            >
+              <template #prefix>
+                <div class="icon-div">
+                  <div class="account-icon"></div>
+                </div>
+              </template>
+            </a-input>
+          </FormItem>
+          <FormItem name="password">
+            <InputPassword
+              size="large"
+              visibilityToggle
+              v-model:value="formData.password"
+              placeholder="请输入密码"
+              style="height: 56px"
+            >
+              <template #prefix>
+                <div class="icon-div">
+                  <div class="password-icon"></div>
+                </div>
+              </template>
+            </InputPassword>
+          </FormItem>
+          <!-- <div class="control-password">
+            <div><a-checkbox v-model:checked="rememberMe">记住密码</a-checkbox></div>
+            <div style="cursor: pointer">忘记密码</div>
+          </div> -->
+          <a-form-item>
+            <a-button
+              size="large"
+              block
+              @click="handleLogin"
+              :loading="loading"
+              class="login-button"
+            >
+              登录
+            </a-button>
+          </a-form-item>
+        </a-form>
       </div>
-    </div>
-    <div
-      class="bottom"
-      :style="{
-        width: `${628 * bi}px`,
-        height: `${18 * bi}px`,
-        fontSize: `${18 * bi}px`,
-        borderRadius: `${5 * bi}px`,
-        bottom: `${26 * bi}px`,
-        left: `calc(${50}% - (${(628 / 2) * bi}px))`,
-      }"
-    >
-      {{
-        VITE_GLOB_APP_MANAGEMENT_UNIT
-          ? VITE_GLOB_APP_MANAGEMENT_UNIT
-          : t('sys.subject.bottom_copyright_lindidiaocha')
-      }}
-      &nbsp;&nbsp;&nbsp;&nbsp;
-      {{
-        VITE_GLOB_APP_TECHINICAL_SUPPORT
-          ? VITE_GLOB_APP_TECHINICAL_SUPPORT
-          : t('sys.subject.bottom_support')
-      }}
+      <div class="company">{{ VITE_GLOB_APP_TECHINICAL_SUPPORT }}</div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
-  import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
-  import { useGlobSetting } from '@/hooks/setting';
+  import { ref, onMounted, onUnmounted, reactive } from 'vue';
   import { useDesign } from '@/hooks/web/useDesign';
   import { useI18n } from '@/hooks/web/useI18n';
-  import { useLocaleStore } from '@/store/modules/locale';
-  import ForgetPasswordForm from './ForgetPasswordForm.vue';
-  import LoginForm from './LoginForm.vue';
-  import MobileForm from './MobileForm.vue';
-  import QrCodeForm from './QrCodeForm.vue';
-  import RegisterForm from './RegisterForm.vue';
-  import { LoginStateEnum, useLoginState } from './useLogin';
   import { getAppEnvConfig } from '@/utils/env';
+  import { useFormRules, useFormValid } from './useLogin';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useUserStore } from '@/store/modules/user';
+  import { Form, Input } from 'ant-design-vue';
 
-  const { getLoginState } = useLoginState();
-  const {
-    VITE_GLOB_APP_MANAGEMENT_UNIT,
-    VITE_GLOB_APP_TECHINICAL_SUPPORT,
-    VITE_GLOB_APP_TITLE,
-    VITE_GLOB_APP_EN_TITLE,
-  } = getAppEnvConfig();
-
-  const isRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
 
+  const { VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT, VITE_GLOB_APP_TITLE } = getAppEnvConfig();
   defineProps({
     sessionTimeout: {
       type: Boolean,
     },
   });
-
-  const globSetting = useGlobSetting();
   const { prefixCls } = useDesign('login');
   const { t } = useI18n();
-  const localeStore = useLocaleStore();
-  const showLocale = localeStore.getShowPicker;
-  const title = computed(() => globSetting?.title ?? '');
+
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+  const formData = reactive({
+    account: '',
+    password: '',
+  });
+  const loading = ref(false);
+  const formRef = ref();
+  const rememberMe = ref(false);
+  const { getFormRules } = useFormRules();
+  const { notification, createErrorModal } = useMessage();
+  const userStore = useUserStore();
+  const { validForm } = useFormValid(formRef);
 
   // 分辨率
-  const viewportWidth = ref(window.innerWidth);
-  const referenceWidth = 1920;
+  const defaultWidth = 1920;
+  const ratio = ref(1);
   const updateWindowSize = () => {
-    viewportWidth.value = window.innerWidth;
+    let widthRatio = window.innerWidth / defaultWidth;
+    console.log(window.innerWidth, defaultWidth, widthRatio);
+    ratio.value = widthRatio >= 1 ? widthRatio : 1;
   };
-  const bi = computed(() => {
-    return viewportWidth.value / referenceWidth;
-  });
 
   onMounted(() => {
     window.addEventListener('resize', updateWindowSize);
@@ -145,93 +118,182 @@
   onUnmounted(() => {
     window.removeEventListener('resize', updateWindowSize);
   });
+
+  async function handleLogin() {
+    const data = await validForm();
+    if (!data) return;
+    try {
+      loading.value = true;
+      const userInfo = await userStore.login({
+        password: data.password,
+        account: data.account,
+        mode: 'none', //不要默认的错误提示
+      });
+      localStorage.setItem('fireUserLoginName', userInfo.name);
+      if (userInfo) {
+        localStorage.setItem('userid', userInfo.id);
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,
+          duration: 3,
+        });
+      }
+    } catch (error) {
+      createErrorModal({
+        title: t('sys.api.errorTip'),
+        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
+        getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
+      });
+    } finally {
+      loading.value = false;
+    }
+  }
 </script>
 <style lang="less">
-  .login {
-    // 页面不能被选中
-    -webkit-user-select: none; /* Safari */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* IE/Edge */
+  .login-out-div {
+    display: flex;
+    height: 100vh;
+    position: relative;
     user-select: none;
-  }
-
-  .title {
-    position: relative;
-    display: inline-block;
-    // left: 143px;
-    // height: 99px;
-
-    // img {
-    //   width: 99px;
-    //   margin-right: 28px;
-    // }
-
-    &_span {
-      display: inline-block;
+    .login-image {
+      height: 100%;
       position: relative;
-      // top: 22px;
+      .image-content {
+        width: calc(1182 / 1920 * 100vw);
+        height: 100%;
+        object-fit: contain;
+        background-image: url('/public/login/login_background.png');
+        background-size: 100% 100%;
+      }
+      .project-name{
+        position: absolute;
+        bottom: 150px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: AlibabaPuHuiTi_2_75_SemiBold;
+        font-size: 50px;
+        color: #FFFFFF;
+        line-height: 95px;
+        text-shadow: 3px 3px 0px #008D5D;
+      }
     }
-
-    &_CN {
-      width: 100%;
-      // height: 50px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 900;
-      // font-size: 50px;
-      color: #131313;
-      letter-spacing: 3px;
-    }
-    &_EN {
-      position: relative;
-      // top: 10px;
-      width: 100%;
-      // height: 22px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 300;
-      // font-size: 22px;
-      color: #131313;
-      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
-      opacity: 0.3;
-    }
-  }
-
-  .bg {
-    position: relative;
-    top: 50px;
-    width: 100%;
-    height: calc(100% - 280px);
-    background-image: url('/login/bg.png');
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 100%;
-    display: flex;
-    align-items: center;
-    text-align: center;
-
-    &_login {
-      position: relative;
-      left: calc(70%);
-      // width: 294.1px;
+    .login-form {
+      position: absolute;
+      right: 0px;
+      width: calc(740 / 1920 * 100vw);
+      min-width: 628px;
+      height: 100vh;
       background-color: #ffffff;
-      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .content {
+        width: 392px;
+        transform-origin: center;
+        .title-icon{
+          width: 80px;
+          height: 44px;
+          background-image: url('/public/login/login_title_icon.png');
+          background-size: 100% 100%;
+          margin-bottom: 1px;
+        }
+        .title {
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 32px;
+          color: #000000;
+          line-height: 56px;
+        }
+        .sub-title {
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 26px;
+          color: #000000;
+          line-height: 56px;
+          margin-bottom: 20px;
+        }
+        .login-use-form {
+          .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
+            border-color: #55d187;
+            box-shadow: 0 0 8px rgba(85, 209, 135, 0.5);
+          }
+          .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):focus {
+            border-color: #55d187;
+            box-shadow: 0 0 8px rgba(85, 209, 135, 0.5);
+          }
+          .ant-input-affix-wrapper-focused {
+            border-color: #55d187;
+            box-shadow: 0 0 8px rgba(85, 209, 135, 0.5);
+          }
+          .ant-form-item {
+            margin-bottom: 30px;
+          }
+          .icon-div {
+            height: 33px;
+            display: flex;
+            align-items: center;
+            padding-left: 6px;
+            padding-right: 17px;
+            // border-right: 1px solid #eaeaea;
+            .account-icon {
+              width: 22px;
+              height: 22px;
+              background-image: url('/public/login/account.png');
+              background-size: 100% 100%;
+            }
+            .password-icon {
+              width: 22px;
+              height: 22px;
+              background-image: url('/public/login/password.png');
+              background-size: 100% 100%;
+            }
+          }
+          .control-password {
+            display: flex;
+            justify-content: space-between;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            font-size: 15px;
+            color: #878686;
+            padding-top: 7px;
+            margin-bottom: 62px;
+            span {
+              justify-content: space-between;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              font-size: 15px;
+              color: #878686;
+            }
+            /* 修改 Checkbox 选中颜色 */
+            .ant-checkbox-checked .ant-checkbox-inner {
+              background-color: #008b47 !important; /* 选中时的背景色 */
+              border-color: #008b47 !important; /* 选中时的边框色 */
+            }
+            /* 修改 Hover 时的颜色 */
+            .ant-checkbox:hover .ant-checkbox-inner {
+              border-color: #55d187 !important;
+            }
+          }
+          .login-button {
+            height: 56px;
+            background: #029956;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            font-size: 18px;
+            color: #FFFFFF;
+            line-height: 25px;
+          }
+        }
+      }
+      .company{
+        position: absolute;
+        bottom: 37px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 16px;
+        color: #000000;
+        line-height: 22px;
+      }
     }
   }
-
-  .bottom {
-    width: 628px;
-    height: 18px;
-    font-family: Alibaba PuHuiTi;
-    font-weight: 400;
-    font-size: 18px;
-    border-radius: 5px;
-
-    position: absolute;
-    bottom: 26px;
-
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-    left: calc(50% - 628px / 2);
-  }
 </style>