当前位置：首页 > news >正文

[vue]提供一种网站底部备案号样式代码

news 2025/6/24 21:58:18

演示

在这里插入图片描述

vue组件型（可直接用）

组件代码：copyright-icp.vue

<template><div class="icp">{{`© ${year} ${author} `}}<a href="http://beian.miit.gov.cn/" target="_blank">{{ record }}</a></div>
</template><script setup>
let year = new Date().getFullYear();        // 一般都是最新的一年
let author = 'alsoeasy';					// 作者名
let record = '湘ICP备2023xxxxxx号';			// 备案号
</script><style>
.icp {position: absolute;bottom: 0px;padding: 10px 0;width: 100%;text-align: center;color: gray;
}
.icp > a {color: gray;text-decoration: none;
}
.icp > a:hover {color: aqua;text-decoration: none;
}
</style>

直接在页面中调用（注意这里是setup写法）

<script setup>
import CopyrightIcp from '@/components/copyright-icp.vue';
</script><template><router-view /><!-- 配置备案号 --><CopyrightIcp></CopyrightIcp>
</template>

html代码型

注意如果要设置为绝对定位，记得设为bfc或者添加占位块，防止阻挡问题

<html><style>.icp {/* position: absolute;bottom: 0px; */padding: 10px 0;width: 100%;height: 36px;text-align: center;color: gray;z-index: 1000;}.icp > a {color: gray;text-decoration: none;}.icp > a:hover {color: aqua;text-decoration: none;}</style><body><div>这里是内容部分</div><div class="icp">© 2023 alsoeasy <a href="http://beian.miit.gov.cn/" target="_blank"> 湘ICP备2023xxxxxx号</a></div></body>
</html>