Vue 和 CSS 实现网站导航栏和内容区域鼠标悬停显示

以下是一个用 Vue 和 CSS 实现的简单网站示例，包含导航栏、logo 图片区域和右侧内容区域，内容区域包括简介、新闻中心和制度公告。鼠标悬停在标题上时，会在下方显示一个盒子，盒子用来存放对应内容，内容可点击。

HTML 代码如下：

<template>
  <div>
    <nav>
      <div class='logo'>
        <img src='./logo.png' alt='logo'>
      </div>
      <div class='menu'>
        <ul>
          <li @mouseover='showBox('intro')' @mouseleave='hideBox'>简介</li>
          <li @mouseover='showBox('news')' @mouseleave='hideBox'>新闻中心</li>
          <li @mouseover='showBox('policy')' @mouseleave='hideBox'>制度公告</li>
        </ul>
      </div>
    </nav>
    <div class='content'>
      <div class='box' v-show='showIntro'>
        <h2>简介</h2>
        <p>这是一个简介内容。</p>
      </div>
      <div class='box' v-show='showNews'>
        <h2>新闻中心</h2>
        <ul>
          <li><a href='#'>新闻1</a></li>
          <li><a href='#'>新闻2</a></li>
          <li><a href='#'>新闻3</a></li>
        </ul>
      </div>
      <div class='box' v-show='showPolicy'>
        <h2>制度公告</h2>
        <ul>
          <li><a href='#'>公告1</a></li>
          <li><a href='#'>公告2</a></li>
          <li><a href='#'>公告3</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

CSS 代码如下：

* {
  box-sizing: border-box;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
}

.logo {
  width: 40%;
}

.logo img {
  width: 100%;
  height: auto;
}

.menu {
  width: 60%;
}

ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

li {
  cursor: pointer;
}

.content {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.box {
  width: 30%;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.box h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.box ul {
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
}

.box li {
  margin-bottom: 5px;
}

.box a {
  color: #333;
  text-decoration: none;
}

.box a:hover {
  text-decoration: underline;
}

JavaScript 代码如下：

<script>
export default {
  data() {
    return {
      showIntro: false,
      showNews: false,
      showPolicy: false
    }
  },
  methods: {
    showBox(type) {
      switch (type) {
        case 'intro':
          this.showIntro = true;
          break;
        case 'news':
          this.showNews = true;
          break;
        case 'policy':
          this.showPolicy = true;
          break;
      }
    },
    hideBox() {
      this.showIntro = false;
      this.showNews = false;
      this.showPolicy = false;
    }
  }
}
</script>

说明：

• 通过<template>标签定义了 HTML 模板。
• 通过 CSS 样式定义了导航栏、logo 图片区域和右侧内容区域的样式。
• 通过 JavaScript 代码实现了鼠标悬停时显示对应盒子的功能，使用了 Vue 的数据绑定和条件渲染功能。