industry-database/src/views/c-views/visualizationPart/mainPage/mainPageTop/MainPageTop.vue

<template>
  <div class="main-page-top">
    <div class="content-wrapper">
      <div class="content">
        <div class="image-container">
          <img src="../../../../../assets/imgs/上海.png" alt="上海天际线"/>
        </div>
        <div  class="sidebar" >
          <button @click="goToPage('/visualizationHome/planningPlan')" class="sidebar-1 button-with-arrow">规划计划</button>
          <button @click="goToPage('/visualizationHome/projectManagement')" class="sidebar-2 button-with-arrow">项目管理</button>
          <button @click="goToPage('/visualizationHome/device')" class="sidebar-3 button-with-arrow">设备设施监测</button>
          <button @click="goToPage('/visualizationHome/effect')" class="sidebar-4 button-with-arrow">成效评估</button>
          <button @click="goToPage('/visualizationHome/knowledgdBase')" class="sidebar-5 button-with-arrow">知识库</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainPageTop",
  methods: {
    goToPage(path) {
      this.$router.push({ path: path});
    }
  }
}


</script>

<style scoped>
.main-page-top {
  display: flex;
  flex-direction: column;
  background-color: #F5F5F5;
  padding-top: 30px;
  padding-bottom: 30px;
}



.content-wrapper {
  display: flex;
  justify-content: center; /* 居中对齐 */
}

.content {
  display: flex;
  align-items: flex-start;
}

.image-container {
  flex-shrink: 0;
}

.image-container img {
  width: 920px; /* 设定图片的最大宽度 */
  height: 520px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin-left: 20px;
}

.sidebar button {
  display: block;
  width: 270px;
  height:  96px;
  padding: 29px;
  margin-bottom: 10px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  font-family: "MicrosoftYaHei-Bold", sans-serif;
  text-align: left;
  font-size: 20px;
  background-color: #FFFFFF;
  color: #333333;
  /* 其他样式 */
  box-shadow: none; /* 移除阴影效果 */
}

.sidebar button:focus {
  outline: none; /* 移除聚焦时的默认边框 */
}

.sidebar-1{
  background-image: url("../../../../../assets/imgs/mainPage/ghjh1.png");
  background-size: cover;
}
.sidebar-1:hover{
  background-image: url("../../../../../assets/imgs/mainPage/ghjh2.png");
  background-size: cover;
}

.sidebar-2{
  background-image: url("../../../../../assets/imgs/mainPage/xmgl1.png");
  background-size: cover;
}
.sidebar-2:hover{
  background-image: url("../../../../../assets/imgs/mainPage/xmgl2.png");
  background-size: cover;
}

.sidebar-3{
  background-image: url("../../../../../assets/imgs/mainPage/sbss1.png");
  background-size: cover;
  pointer-events: none;
  cursor: not-allowed
}
.sidebar-3:hover{
  background-image: url("../../../../../assets/imgs/mainPage/sbss2.png");
  background-size: cover;
}

.sidebar-4{
  background-image: url("../../../../../assets/imgs/mainPage/cxpg1.png");
  background-size: cover;
}
.sidebar-4:hover{
  background-image: url("../../../../../assets/imgs/mainPage/cxpg2.png");
  background-size: cover;
}

.sidebar-5{
  background-image: url("../../../../../assets/imgs/mainPage/zzk1.png");
  background-size: cover;
  pointer-events: none;

}
.sidebar-5:hover{
  background-image: url("../../../../../assets/imgs/mainPage/zzs2.png");
  background-size: cover;
}
.sidebar button:disabled {
  background-color: #F5F5F5;
}

.button-with-arrow {
  position: relative;
  padding-right: 10px; /* 调整箭头与按钮文本之间的间距 */
}

.button-with-arrow::after {
  content: '→'; /* 使用Unicode编码或者直接使用箭头字符 */
  position: absolute;
  top: 50%;
  right: 30px; /* 箭头与按钮右侧的距离 */
  transform: translateY(-50%);
  font-size: 28px; /* 调整箭头的大小 */
  color: #B3B3B3; /* 箭头的颜色 */
}

.button-with-arrow:hover{
  color: #0080FF; /* 箭头的颜色 */
}

.button-with-arrow:hover::after {
  color: #0080FF; /* 箭头悬停时的颜色 */
}


</style>