快捷导航 - PHP、JAVA、Python等开发学习资源

<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' @click='showModal'>登录</span
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span class='navi-center-right-txt' @click='showModal'>注册</span>
      </div>
    </div>
    <div>
      <a-modal
  :visible='visible'
  :confirm-loading='confirmLoading'
  @ok='handleOk'
  @cancel='handleCancel'
>
  <a-tabs>
    <a-tab-pane v-for='option in options' :key='option.key' :tab='option.tab'>
      <div>
        <a-button
          v-for='button in option.buttons'
          :key='button.text'
          type='primary'
          style='margin-bottom: 10px'
        >
          {{ button.text }}
          <a-input
            placeholder='Basic usage'
            style='margin-left: 50px; width: 300px; padding-top: 10px'
          />
        </a-button>
        <br />
      </div>
    </a-tab-pane>
  </a-tabs>
</a-modal>

    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  setup() {
    const options = ref([
      {
        key: '1',
        tab: 'Tab 1',
        buttons: [
          { text: '注册邮件' },
          { text: '登录密码' },
          { text: '输验证码' },
        ],
      },
      {
        key: '2',
        tab: 'Tab 2',
        buttons: [
          { text: '注册邮件' },
          { text: '登录密码' },
          { text: '输验证码' },
        ],
      },
      {
        key: '3',
        tab: 'Tab 3',
        buttons: [
          { text: '注册邮件' },
          { text: '登录密码' },
          { text: '输验证码' },
        ],
      },
    ]);

    const handleOk = (e) => {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    };

    const handleCancel = (e) => {
      console.log('Clicked cancel button');
      this.visible = false;
    };

    const showModal = () => {
      this.visible = true;
    };

    return {
      ModalText: ref('Content of the modal'),
      visible: ref(false),
      confirmLoading: ref(false),
      options,
      handleOk,
      handleCancel,
      showModal,
    };
  },
});
</script>

<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;
}

/deep/.ant-btn {
  width: 100px;
  line-height: 10px;
}
</style>