pqs-9100_client/frontend/src/layouts/components/Footer/index.vue

<template>
  <div class="footer flx-align-center pl10">
    <el-dropdown>
      <!-- <span class="el-dropdown-link">
      {{ title }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span> -->
      <el-button type="primary">
        {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="title = '模拟式模式'"
            >模拟式模块</el-dropdown-item
          >
          <el-dropdown-item @click="title = '数字式模式'"
            >数字式模块</el-dropdown-item
          >
          <el-dropdown-item @click="title = '对比式模式'"
            >对比式模块</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <p> <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a></p>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
const title = ref("模拟式模块");
</script>
<style scoped lang="scss">
@import "./index.scss";
.footer{
  position: relative;
  p{
    position: absolute;
 width: 100%;
 height: 100%;
 text-align: center;
 line-height: 40px;
  }
}
</style>