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

自己搜没搜到，就自己做了一个

Also_easy

7251人浏览 · 2023-03-08 16:10:20

Also_easy · 2023-03-08 16:10:20 发布

演示

在这里插入图片描述

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: 0;
	right: 0;
	margin: 10px 0;
	width: 100%;
	height: 36px;
	white-space: pre;
	text-align: center;
	color: gray;
	z-index: 1000;
}
.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: 0;
            right: 0;*/
            margin: 10px 0;
            width: 100%;
            height: 36px;
            white-space: pre;
            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>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport