4. 通常Web页面底部都会有一个版权信息，各个页面都写一个版权信息显然很繁琐。因此，请创建一个自定义插件，实现版权信息显示。要求：版权作者填写“1班、老六”，联系方式写10086。 5.请给按钮加上动画特效。点击之后，出现进度条，处理完成之后进度条消失。为了可以方便观测到进度条，可以在计算的函数当中增加一个等待2秒的操作。 6.在页面顶部增加导航“奖学金评选资格功能”和“奖学金评选资格功能说明”。具体地，点击“奖学金评选资格功能”显示相应功能，点击“奖学金评选资格功能说明”显示功能规则说明文字。 7.“Vue状态管理”的技术点，统计操作成功数和未操作成功数。

以下是实现题目要求的Vue源码：

1. 自定义插件实现版权信息显示：

// copyright.js
export default {
  install(Vue) {
    Vue.prototype.$copyright =
      '版权所有：1班、老六，联系方式：10086';
  }
}

在main.js中引入该插件：

import Copyright from '@/plugins/copyright'

Vue.use(Copyright)

在组件中即可使用`this.$copyright`获取版权信息。

2. 给按钮加上动画特效：

// 组件中的按钮代码
<button @click="hzd_checkQualification" class="hzd-button">
  <span>判断是否可以参评奖学金</span>
  <div class="hzd-progress-bar" v-show="hzd_loading"></div>
</button>

// 组件的CSS代码
.hzd-button {
  position: relative;
}

.hzd-button span {
  z-index: 1;
}

.hzd-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007aff;
  transition: width 2s ease-in-out;
}

.hzd-progress-bar::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #007aff;
  animation: hzd-pulsate 1.5s ease-out infinite;
  opacity: 0.0;
}

@keyframes hzd-pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

使用CSS实现了一个进度条和按钮的动画特效，点击按钮时会显示进度条，处理完成之后进度条消失。为了可以方便观测到进度条，计算的函数中增加了一个等待2秒的操作。

3. 在页面顶部增加导航：

// 组件的HTML代码
<div class="hzd-nav">
  <ul>
    <li><a href="#" @click.prevent="hzd_showFunction">奖学金评选资格功能</a></li>
    <li><a href="#" @click.prevent="hzd_showFunctionDesc">奖学金评选资格功能说明</a></li>
  </ul>
</div>

// 组件的CSS代码
.hzd-nav {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 20px;
}

.hzd-nav ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hzd-nav li {
  margin: 0 20px;
}

.hzd-nav a {
  color: #007bff;
  text-decoration: none;
}

.hzd-nav a:hover {
  text-decoration: underline;
}

使用HTML和CSS实现了一个简单的导航栏，点击不同的链接可以显示不同的功能或说明。

4. 使用Vue状态管理统计操作成功数和未操作成功数：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    successCount: 0,
    failCount: 0
  },
  mutations: {
    incrementSuccessCount(state) {
      state.successCount++
    },
    incrementFailCount(state) {
      state.failCount++
    }
  }
})

在main.js中引入该状态管理插件：

import store from '@/store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在组件中使用该状态管理插件：

// 组件的计算属性代码
hzd_successCount() {
  return this.$store.state.successCount
},
hzd_failCount() {
  return this.$store.state.failCount
}

// 组件的判断条件代码
if (averageScore >= 90 && this.hzd_score1 >= 80 && this.hzd_score2 >= 80 && this.hzd_score3 >= 80 && this.hzd_score4 >= 80 && this.hzd_score5 >= 80) {
  this.hzd_success = true;
  this.hzd_message = this.hzd_name + '符合奖学金评选条件！';
  this.$store.commit('incrementSuccessCount');
} else {
  this.hzd_success = false;
  this.hzd_message = this.hzd_name + '不符合奖学金评选条件！';
  this.$store.commit('incrementFailCount');
}

使用计算属性统计操作成功数和未操作成功数，使用mutations实现增加计数的功能。每次成功或失败时，调用mutations中的方法，增加对应计数。