Vue.js 导航栏组件：简洁高效的设计与实现

<template>
        <div class='navi'>
      <div class='navi-center'>
        <div class='navi-center-left'>
          <div class='navi-center-left-big'>
            <h3 class='navi-txt'>快捷导航</h3>
          </div>
          <div class='navi-center-left-small'>
            <h4 class='navi-txt'>PHP开发</h4>
            <h4 class='navi-txt'>JAVA开发</h4>
            <h4 class='navi-txt'>PYTHON开发</h4>
            <h4 class='navi-txt'>WEB前端</h4>
            <h4 class='navi-txt'>测试开发</h4>
            <h4 class='navi-txt'>数据科学</h4>
            <h4 class='navi-txt'>网络安全</h4>
            <h4 class='navi-txt'>七七八八</h4>
          </div>
        </div>
        <div class='navi-center-right'>
          <span class='navi-center-right-txt'>登录</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class='navi-center-right-txt'>注册</span>
        </div>
      </div>
      <div>
    <a-button type='primary' @click='showModal'>Open Modal</a-button>
    <a-modal v-model:visible='visible' title='Basic Modal' @ok='handleOk'>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
    </div>
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const visible = ref<boolean>(false);
<pre><code>const showModal = () =&gt; {
  visible.value = true;
};

const handleOk = (e: MouseEvent) =&gt; {
  console.log(e);
  visible.value = false;
};
return {
  visible,
  showModal,
  handleOk,
};
</code></pre>
<p>},
});
</script></p>
<style scoped>

 .navi {
    height: 60px;
    width: 100%;
    background-color: green;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .navi-center {
    width: 68%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    /* background-color: gray; */
  }
  .navi-center-left {
    width: 65%;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
  }
  .navi-txt
  {
    color: white;
    cursor: pointer;
  }
  .navi-center-left-big {
    width: 15%;
    height: 100%;
    /* background-color: bisque; */
  }
  .navi-center-left-small {
    width: 85%;
    height: 100%;
    /* background-color: green; */
    display: flex;
    justify-content: space-between;
  }
  .navi-center-right {
    width: 15%;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .navi-center-right-txt {
    color: white;
    font-size: 20px;
    cursor: pointer;
  }
 
</styl