增加login界面

src/assets/svg/exit.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="41px" viewBox="0 0 40 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 3</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页备份-2" transform="translate(-1254, -253)" fill="#1777FF">
+            <g id="编组-4" transform="translate(610, 238)">
+                <g id="编组-3" transform="translate(663.7929, 35.2929) rotate(45) translate(-663.7929, -35.2929)translate(649.7929, 21.2929)">
+                    <rect id="矩形" x="12.5" y="0" width="3" height="28" rx="1.5"></rect>
+                    <rect id="矩形" transform="translate(14, 14) rotate(90) translate(-14, -14)" x="12.5" y="1.09139364e-11" width="3" height="28" rx="1.5"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svg/search.svg

@@ -1,13 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="31px" height="30px" viewBox="0 0 31 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>编组</title>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页" transform="translate(-507, -129)">
-            <g id="编组-10" transform="translate(460, 112)">
-                <g id="编组" transform="translate(67.5, 37.5) rotate(-45) translate(-67.5, -37.5)translate(57, 22)">
-                    <rect id="矩形" fill="#000000" x="9" y="21" width="3" height="10" rx="1.5"></rect>
-                    <circle id="椭圆形" stroke="#000000" stroke-width="3" cx="10.5" cy="10.5" r="10.5"></circle>
-                </g>
+        <g id="首页" transform="translate(-1625, -25)">
+            <g id="编组" transform="translate(1641, 40.3333) rotate(-45) translate(-1641, -40.3333)translate(1633, 29)">
+                <rect id="矩形" fill="#1777FF" x="6.85714286" y="16" width="2" height="6.66666667" rx="1"></rect>
+                <circle id="椭圆形" stroke="#1777FF" stroke-width="2" cx="8" cy="8" r="8"></circle>
             </g>
         </g>
     </g>

src/components/Login.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <img :src="exitIcon" alt="关闭" class="exit-icon" @click="emit('close')" />
+      <header class="login-form__header">
+        <span>登录</span>
+      </header>
+      <main class="login-form__main">
+        <el-input v-model="username" placeholder="请输入您的账号" class="el-input--default" />
+        <el-input
+          v-model="password"
+          placeholder="请输入您的密码"
+          type="password"
+          show-password
+          class="el-input--default"
+        />
+        <div class="login-form__code">
+          <el-input v-model="code" placeholder="验证码" class="el-input--default" />
+        </div>
+      </main>
+      <footer class="login-form__footer">
+        <el-button class="login-form__button" @click="emit('close')">登录</el-button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import exitIcon from 'assets/svg/exit.svg';
+  const username = ref('');
+  const password = ref('');
+  const code = ref('');
+  const emit = defineEmits(['close']);
+</script>
+
+<style lang="scss" scoped>
+  .login-container {
+    @include flex-center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.42);
+    z-index: 1000;
+  }
+  .login-form {
+    position: relative;
+    width: 700cpx;
+    height: 514cpx;
+    padding: 0 33cpx;
+    background: $white-color;
+    border-radius: 24cpx;
+    &__header {
+      width: 100%;
+      height: 100cpx;
+      font-size: 28cpx;
+      font-weight: 550;
+      color: #333;
+      text-align: center;
+      line-height: 100cpx;
+      letter-spacing: 5cpx;
+    }
+    &__main {
+      @include flex-center;
+      flex-direction: column;
+      gap: 20cpx;
+    }
+    &__code {
+      @include flex-center;
+      justify-content: space-between;
+      width: 100%;
+      height: 72cpx;
+      .el-input--default {
+        width: 50%;
+      }
+    }
+    &__footer {
+      width: 100%;
+      height: 100cpx;
+      margin-top: 36cpx;
+      .login-form__button {
+        width: 100%;
+        height: 74cpx;
+        font-size: 24cpx;
+        color: $white-color;
+        background-color: $primary-color;
+        border-radius: 8cpx;
+        cursor: pointer;
+      }
+    }
+    .exit-icon {
+      position: absolute;
+      top: 15cpx;
+      right: 16cpx;
+      width: 40cpx;
+      height: 40cpx;
+      cursor: pointer;
+    }
+  }
+  .el-input--default {
+    width: 100%;
+    height: 72cpx;
+    :deep(.el-input__inner) {
+      font-size: 20cpx;
+      color: #999;
+    }
+  }
+  :deep(.el-icon svg) {
+    width: 30cpx;
+    height: 30cpx;
+  }
+</style>

src/components/Nav.vue

@@ -13,8 +13,15 @@
         <span>{{ item.name }}</span>
       </div>
     </nav>
-    <div class="platform__login">
-      <div class="platform__login__button" @click="showLogin = true">
+    <div class="platform__right">
+      <div class="platform__right__search">
+        <el-input v-model="searchValue" placeholder="搜索您想了解的" class="input-with-icon" clearable>
+          <template #prepend>
+            <img :src="searchIcon" alt="search" class="search-icon" @click="handleSearch"/>
+          </template>
+        </el-input>
+      </div>
+      <div class="platform__right__login" @click="showLogin = true">
         <span>登录</span>
       </div>
     </div>
@@ -27,9 +34,16 @@
   import { useRouter } from 'vue-router';
   import { NAV_LIST } from '@/constant/nav';
   import logo from 'assets/images/home/comac-logo@1X.png';
+  import searchIcon from 'assets/svg/search.svg';
+  import Login from '@/components/Login.vue';
   const activeNav = ref(NAV_LIST[0].name);
   const router = useRouter();
   const showLogin = ref(false);
+  const searchValue = ref('');
+
+  const handleSearch = () => {
+    console.log('searchValue', searchValue.value);
+  };
 
   const handleNavClick = (item: { name: string; path: string }) => {
     activeNav.value = item.name;
@@ -41,13 +55,14 @@
   .header {
     display: flex;
     align-items: center;
+    position: relative;
     width: 100%;
     height: 78cpx;
     background: url('assets/images/home/nav-bg@1X.png') no-repeat center center / cover;
     &__nav {
       @include flex-center;
       height: 100%;
-      margin-left: 11cpx;
+      margin-left: 32cpx;
       &--item {
         @include flex-center;
         height: 45cpx;
@@ -74,16 +89,43 @@
     font-weight: 600;
     margin-left: 9cpx;
   }
-  .platform__login {
-    width: 129cpx;
-    height: 100%;
-    background: $primary-color;
-    margin-left: auto;
-    &__button {
+  .platform__right {
+    @include flex-center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 73cpx;
+    &__search {
       @include flex-center;
+      width: 210cpx;
+      height: 100%;
+      padding: 28cpx 26cpx;
+      background: rgba($white-color, 0.4);
+    }
+    &__login {
       height: 100%;
+      padding: 27cpx 40cpx 26cpx 40cpx;
       font-size: 18cpx;
-      color: $white-color;
+      color: $primary-color;
+      cursor: pointer;
+    }
+  }
+  .input-with-icon {
+    :deep(.el-input__wrapper),
+    :deep(.el-input-group__prepend) {
+      background-color: transparent;
+      box-shadow: none;
+      padding: 0;
+    }
+    :deep(.el-input__inner) {
+      width: 120cpx;
+      margin-left: 5cpx;
+      font-size: 16cpx;
+      color: #909399;
+    }
+    .search-icon {
+      width: 28cpx;
+      height: 28cpx;
       cursor: pointer;
     }
   }

src/styles/variables.scss

@@ -1,6 +1,6 @@
 // 主题颜色
 $primary-color: #1777ff;
-$background-color: rgba(#1777ff, 0.1);
+$background-color: rgba(#1777ff, 0.2);
 $error-color: #e74c3c;
 $text-color: #000;
 $white-color: #fff;

src/views/home/PageHome.vue

@@ -1,15 +1,5 @@
 <template>
   <div class="container home-container">
-    <section class="search-section">
-      <el-input v-model="searchValue" placeholder="搜索您想了解的咨询" class="input-with-button">
-        <template #prepend>
-          <img :src="searchIcon" alt="search" class="search-icon" />
-        </template>
-        <template #append>
-          <span class="search-button">搜索</span>
-        </template>
-      </el-input>
-    </section>
     <img :src="IntroductionWords" alt="公司标语" class="introduction-words" />
     <section class="introduction-card-section">
       <IntroductionCard />
@@ -18,11 +8,8 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import searchIcon from 'assets/svg/search.svg';
   import IntroductionWords from 'assets/images/home/introduction-words@1X.png';
   import IntroductionCard from './src/components/IntroductionCard.vue';
-  const searchValue = ref('');
 </script>
 
 <style lang="scss" scoped>
@@ -33,42 +20,9 @@
   }
   .introduction-words {
     position: absolute;
-    left: 345cpx;
-    top: 110cpx;
-    width: 280cpx;
-  }
-  .input-with-button {
-    margin-top: 20cpx;
-    width: 1000cpx;
-    height: 62cpx;
-    border-radius: 8cpx;
-    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.31);
-    :deep(.el-input__wrapper),
-    :deep(.el-input-group__prepend) {
-      background-color: rgba(255, 255, 255, 0.71);
-    }
-    :deep(.el-input-group__prepend) {
-      border-radius: 8cpx 0 0 8cpx;
-    }
-    :deep(.el-input-group__append) {
-      width: 140cpx;
-      background-color: $primary-color;
-      border-radius: 0 8px 8px 0;
-      box-shadow: none;
-      cursor: pointer;
-    }
-    :deep(.el-input__inner) {
-      font-size: 24cpx;
-      color: #666;
-    }
-    .search-icon {
-      width: 35cpx;
-      height: 35cpx;
-    }
-    .search-button {
-      font-size: 24cpx;
-      color: $white-color;
-    }
+    left: 339cpx;
+    top: 72cpx;
+    width: 290cpx;
   }
   .introduction-card-section {
     display: flex;