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

演示

[vue]提供一种网站底部备案号样式代码_第1张图片

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>

你可能感兴趣的:(Vue,vue.js,前端,备案号,网站备案号,vue组件)