要求代码除了样式全部处理成vue3展示出来不允许省略

好的，以下是将代码转换为 Vue 3 的版本，并保留所有逻辑和功能：

<template>
  <div class="all">
    <div class="left-column">
      <h2>欢迎使用智慧社区商城后台管理系统</h2>
      <img style="width: 300px; height: 300px;" src="@/assets/logo1.jpg" alt="Logo" />
      <p>万里学院大数据与软件工程学院提供技术支持</p>
      <p>基于Vue+springBoot技术实现</p>
    </div>
    <a-divider class="divider" type="vertical"></a-divider>
    <div class="right-column">
      <a-form :model="loginObject" style="margin-top: 35px;">
        <a-form-item style="margin-left: 180px;" prop="companyCode">
          <svg class="login-icon" xmlns="http://www.w3.org/2000/svg" height="20" width="22.5" viewBox="0 0 384 512">
            <path fill="#FFD43B" d="M48 0C21.5 0 0 21.5 0 48L0 464c0 26.5 21.5 48 48 48l96 0 0-80c0-26.5 21.5-48 48-48s48 21.5 48 48l0 80 96 0c26.5 0 48-21.5 48-48l0-416c0-26.5-21.5-48-48-48L48 0zM64 240c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm112-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM80 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM272 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16z" />
          </svg>
          <a-select v-model="loginObject.companyCode" show-search size="large" @select="getHallCode" option-filter-prop="children">
            <a-select-option v-for="item in companiesInfo" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="username">
          <svg class="login-icon2" xmlns="http://www.w3.org/2000/svg" height="20" width="22.5" viewBox="0 0 448 512">
            <path fill="#FFD43B" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" />
          </svg>
          <a-input class="ant-select-selection" size="large" v-model="loginObject.username" placeholder="请输入用户名" :rules="[ { required: true, message: '请输入用户名' } ]" />
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="password" has-feedback>
          <svg class="login-icon3" xmlns="http://www.w3.org/2000/svg" height="20" width="22.5" viewBox="0 0 448 512">
            <path fill="#FFD43B" d="M224 64c-44.2 0-80 35.8-80 80l0 48 240 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0 0-48C80 64.5 144.5 0 224 0c57.5 0 107 33.7 130.1 82.3c7.6 16 .8 35.1-15.2 42.6s-35.1 .8-42.6-15.2C283.4 82.6 255.9 64 224 64zm32 320c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0z" />
          </svg>
          <a-input-password class="ant-select-selection" type="password" size="large" v-model="loginObject.password" autocomplete="false" placeholder="请输入密码" :rules="[ { required: true, message: '请输入密码' } ]" />
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="hallCode">
          <svg class="login-icon4" xmlns="http://www.w3.org/2000/svg" height="20" width="22.5" viewBox="0 0 576 512">
            <path fill="#FFD43B" d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
          </svg>
          <a-select v-model="loginObject.hallCode" show-search size="large" allow-clear option-filter-prop="children" placeholder="请选择营业网点">
            <a-select-option v-for="item in hallCodeDataList" :key="item.hallCode" :value="item.hallCode">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="code">
          <svg class="login-icon5" xmlns="http://www.w3.org/2000/svg" height="20" width="22.5" viewBox="0 0 512 512">
            <path fill="#FFD43B" d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM160 154.4c0-5.8 4.7-10.4 10.4-10.4l.2 0c3.4 0 6.5 1.6 8.5 4.3l40 53.3c3 4 7.8 6.4 12.8 6.4l48 0c5 0 9.8-2.4 12.8-6.4l40-53.3c2-2.7 5.2-4.3 8.5-4.3l.2 0c5.8 0 10.4 4.7 10.4 10.4L352 272c0 53-43 96-96 96s-96-43-16a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z" />
          </svg>
          <a-input class="ant-select-selection" size="large" v-model="loginObject.code" @change="inputCodeChange" style="width: 140px; float: left;" placeholder="请输入验证码" :rules="[ { required: true, message: '请输入验证码' } ]" />
          <a-col :span="8" style="text-align: right;">
            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" />
          </a-col>
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="rememberMe">
          <a-checkbox v-model="loginObject.rememberMe">自动登录</a-checkbox>
          <a class="login-form-forgot" href="">忘记密码</a>
        </a-form-item>
        <a-form-item style="margin-left: 180px;">
          <a-button class="ant-select-selection" size="large" type="primary" html-type="submit" :loading="loginBtn" @click.prevent="handleSubmit" :disabled="loginBtn">确定</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { login, getImage, getHallCode, getReadcard, gethallCode, getCompanies } from '../utils/api';
import md5 from 'md5';
import { encryption } from '@/utils/encryption/aesEncrypt';

const router = useRouter();
const route = useRoute();

const loginBtn = ref(false);
const loginObject = reactive({
  companyCode: '',
  username: '',
  password: '',
  hallCode: '',
  code: '',
  rememberMe: false,
});
const companiesInfo = ref([]);
const hallCodeDataList = ref([]);
const randCodeImage = ref('');
const verifiedCode = ref("");
const requestCodeSuccess = ref(false);
const encryptedString = reactive({ key: "1234567890adbcde", iv: "1234567890hjlkew" });

onMounted(() => {
  window.localStorage.setItem('icCardModeLogin', 'http://127.0.0.1:16021');
  handleChangeCheckCode();
  currdatetime = new Date().getTime();
  getHallCodeList();
  getCompaniesInfo();
});

const handleSubmit = async () => {
  const valid = await formRef.validate();
  if (valid) {
    console.log("参数1", encryptedString.key, encryptedString.iv);
    const loginParams = {
      companyCode: loginObject.companyCode,
      username: loginObject.username,
      password: encryption(new Date().getTime() + md5(loginObject.password), encryptedString.key, encryptedString.iv),
      hallCode: loginObject.hallCode,
      remember_me: loginObject.rememberMe,
      timestamp: new Date().getTime(),
      captcha: loginObject.code,
      checkKey: currdatetime,
    };
    console.log("登录参数", loginParams);
    loginBtn.value = true;
    try {
      const response = await login(loginParams);
      if (response.code === 200) {
        message.success('欢迎回来', 1);
        router.push("/photo");
      } else {
        console.error('登录失败', response.message);
      }
    } catch (error) {
      console.error('请求错误', error);
    } finally {
      loginBtn.value = false;
    }
  } else {
    loginBtn.value = false;
  }
};

const handleChangeCheckCode = (url) => {
  currdatetime = new Date().getTime();
  url = '/' + currdatetime;
  getImage(url).then(res => {
    if (res.success) {
      randCodeImage.value = res.result;
      requestCodeSuccess.value = true;
      generateCode(res.result);
    } else {
      message.error(res.message);
      requestCodeSuccess.value = false;
    }
  }).catch(() => {
    requestCodeSuccess.value = false;
  });
};

const inputCodeChange = (e) => {
  loginObject.code = e.target.value;
};

const generateCode = (value) => {
  verifiedCode.value = value.toLowerCase();
};

const validateInputCode = (rule, value, callback) => {
  if (!value || verifiedCode.value == loginObject.code) {
    callback();
  } else {
    callback("您输入的验证码不正确!");
  }
};

const getHallCode = () => {
  if (window.localStorage.icCardModeLogin) {
    getReadCard(window.localStorage.icCardModeLogin);
  } else {
    const companyCode = loginObject.companyCode;
    const formData = { companyCode };
    if (!companyCode) {
      hallCodeDataList.value = [];
    } else {
      gethallCode(formData).then((res) => {
        if (res.code == 200) {
          window.localStorage.icCardModeLogin = res.result;
          getReadCard(window.localStorage.icCardModeLogin);
        }
      });
    }
  }
};

const getReadCard = (url) => {
  const that = this;
  url = window.localStorage.icCardModeLogin + '/cardApi/Card/GetStationNo';
  getReadcard(url).then(responseHttp => {
    if (!responseHttp.responseCode) {
      that.currentHallCode = responseHttp.result;
      getHallCodeList();
    } else {
      getHallCodeList();
    }
  }).catch(error => {
    console.error('请求错误', error);
    getHallCodeList();
  });
};

const getHallCodeList = () => {
  formRef.resetFields("hallCode");
  hallCodeDataList.value = [];
  let currentHallCode = loginObject.hallCode;
  let currentCompanyCode = loginObject.companyCode;
  let username = loginObject.username;
  const formData = { _t: new Date().getTime(), hallCode: currentHallCode, companyCode: currentCompanyCode, username: username };
  getHallCode(formData).then(res => {
    if (res.success) {
      hallCodeDataList.value = res.result;
      hallCodeDataList.value.forEach(item => {
        if (item.isChoose) {
          formRef.setFieldsValue({ hallCode: item.hallCode });
        }
      });
    } else {
      hallCodeDataList.value = [];
    }
  }).catch(error => {
    console.error('请求错误', error);
  });
};

const getCompaniesInfo = () => {
  getCompanies().then(res => {
    if (res.success) {
      const comArr = [];
      companiesInfo.value = res.result ? res.result : [];
      if (companiesInfo.value.length > 0) {
        companiesInfo.value.forEach(item => {
          comArr.push(item.value);
        });
        if (comArr.indexOf(currentCompany) !== -1) {
          formRef.setFieldsValue({ companyCode: currentCompany });
        }
      }
      getHallCode();
    }
  });
};
</script>

<style scoped>
.all {
  display: flex;
  min-height: 780px;
  justify-content: space-between;
  align-items: center;
  padding: 20px;