我用html+css+js+vue写了一个赛博朋克2077_cyberpunk dialog ui vue-CSDN博客

本文链接：https://blog.csdn.net/hideonbush123/article/details/129777893

闲来无事,想做个牛*点的个人博客,又不想太大众化
于是乎诞生了创造一个2077的想法
记得进入按 F11 开启全屏浏览

欢迎来到夜之城http://zhangdarui.3vdo.club/

看看截图

附上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="强尼银手">
    <meta name="author" content="张大瑞">
    <meta name="referrer" content="no-referrer" />
    <meta name="referrer" content="never">
    <meta name="referrer" content="same-origin" />
    <link rel="shortcut icon" href="./img/医学人体-通用.png">
    <title>V</title>
    <link rel="stylesheet" href="./css/index1.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>

<body class="bg">
    <!-- V的电脑屏幕有了纯黑背景只需要加导航栏和能切换内容的盒子就好了 -->
    <!-- 导航栏 -->
    <nav class="nav">
        <div class="w">
            <div class="d active">
                <img src="img/信息.png" alt=""> 信息
            </div>
            <div class="d "><img src="img/网络.png" alt=""> 网络</div>
            <div class="d"><img src="img/224用户 (1).png" alt=""> 银手</div>
        </div>
    </nav>

    <!-- 内容切换盒子 -->
    <div class="bigBOX" id="app">
        <!-- 信息盒子 -->
        <div class="m active">
            <div class="mLeft">
                <button class="li" v-for="item in messageList" @click="setM" data-id="item.id">
                    {{item.title}}
                </button>
            </div>
            <!-- 对应的盒子内容通过点击button传值，遍历数组，寻找，设定，渲染 -->
            <div class="mRight">
                <h1>{{contentTitle}}</h1>
                <h2>发件人:<span>{{conntentSender}}</span></h2>
                <h2>收件人：<span>V</span></h2>
                <p>{{contentContent}}</p>
            </div>
        </div>
        <!-- 网络盒子 -->
        <div class="m">
            <div class="sou">
                <p style="color: darkgoldenrod;">
                    &nbsp &nbsp &nbsp &nbsp HOME
                </p>
                <span style="color: blue;"> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    &nbsp &nbsp &nbsp &nbsp
                    &nbsp
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp http://zhangdarui.3vdo.club</span>
            </div>
            <div class="netlist">
                <div class="nl" v-for="item in netList">
                    <li> <a :href="item.address" style="text-decoration: none;"><img :src="item.imgsrc" alt="">
                            <p>{{item.name}}</p>
                        </a>
                    </li>
                </div>
            </div>
        </div>
        <!-- 用户盒子 -->
        <div class="m ">
            <div class="photo">
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img
                                src="https://i1.hdslb.com/bfs/archive/59e1730bb495b3ef67a800b82757ac40e82d1d41.jpg"
                                alt=""></div>
                        <div class="swiper-slide"><img
                                src="https://i1.hdslb.com/bfs/archive/4d6e7d8a6ca87c94bea5f8bba0d61fe1ddc348fb.jpg"
                                alt=""></div>
                        <div class="swiper-slide"><img
                                src="https://p0.itc.cn/q_70/images03/20210125/93648099cd224a50838ff52ad6f10919.jpeg"
                                alt=""></div>
                    </div>
                </div>
                <!-- 歌曲渲染部分 -->
                <div class="songList">
                    <h3 style="color: darkorange;">我的专辑</h3>
                    <li v-for="item in songList">
                        <!-- 绑定事件，点击列表里的歌曲播放按钮，传递给播放器音乐地址，并开始播放 -->
                        <a href="javascript:;" @click='playMusic(item.songsrc)'></a>
                        <b>{{item.name}}</b>
                    </li>
                </div>
                <div class="audio_con">
                    <audio ref='audio' @play="play" @pause="pause" :src="songUrl" autoplay loop class="myaudio"></audio>
                </div>
            </div>
            <div class="info">
                <li>姓名<h5 style="color: silver;">强尼银手</h5>
                </li>
                <li>
                    外文名<h6 style="color: chartreuse;">Johnny Silverhand</h6>
                </li>
                <li>简介<p> 强尼·银手是《赛博朋克》系列的核心人物、超人气的摇滚小子、武侍乐队的吉他手兼歌手。在《赛博朋克2077》中由好莱坞男星基努·里维斯扮演。</li>

                <li>个性签名<p>
                        我目睹过公司夺走农民的水源.….最后是土地。还目睹过夜之城变成一台机器，用人们崩溃的精神，破碎的梦想以及民脂民膏来做燃料。长久以来公司控制着民生，拿走了一切..…..现在就连灵魂也不放过。
                    </p>
                </li>
            </div>
        </div>
    </div>
    <!-- 显示时间 -->
    <div class="time">
        <div><a href="index.html">按 C 退出 </a></div>
        <div>丨</div>
        <div id="xq">星期一</div>
        <div>丨</div>
        <div id="HH">00</div>
        <div>:</div>
        <div id="mm">00</div>
        <div>:</div>
        <div id="ss">00</div>
    </div>
</body>
<!-- 导入vue和轮播图的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/index1.js"></script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="强尼银手">
    <meta name="author" content="张大瑞">
    <meta name="referrer" content="no-referrer" />
    <meta name="referrer" content="never">
    <meta name="referrer" content="same-origin" />
    <link rel="shortcut icon" href="./img/医学人体-通用.png">
    <title>欢迎来到夜之城</title>

    <div style="display: none;">
        <audio src="music/V.mp3" id="dd" autoplay="autoplay" controls="none" loop="loop" preload="auto"></audio>
    </div>

    <style>
        * {
            height: 100%;

        }

        a {
            text-decoration-line: none;
        }

        li {
            list-style: none;
        }

        body {
            margin: 0;
            padding: 0;
            background-image: url(./img/1\ \(1\).jpg);
            background-size: cover;

        }

        .box {
            position: fixed;
            width: 300px;
            height: 200px;
            top: 20%;
            right: 15%;
            border-radius: 10px;
            /* text-align: center; */

        }

        .bg-img {
            width: 100%;
            filter: blur(5px);
        }

        .contentUser {
            position: absolute;
            width: 100%;
            top: 0
        }

        .boxt {
            width: 50px;
            height: 50px;
            margin-top: 5px;
            margin-left: 126px;
            border-radius: 100%;
            background-position: center center;
            background-size: cover;
            background-image: url("img/13.jpg");
        }

        .boxt img {
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }

        h3 {
            margin: 25px 114px;
            width: 100px;
            height: 15px;
            color: white
                /* background-color: black; */
        }


        .downbox {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 105px;
            height: 20px;
            /* background-color: black; */
        }

        li:first-child {
            float: left;
            width: 15px;
            height: 15px;
        }


        li:last-child {
            float: right;
            width: 15px;
            height: 15px;
        }



        li img {
            width: 15px;
            height: 15px;
        }


        .disbox {
            display: none;
            position: absolute;
            bottom: -100px;
            left: 55px;
            width: 100px;
            height: 100px;
            background-color: white;
        }

        .disboxsan {
            width: 0;
            height: 0;
            position: absolute;
            top: -18px;
            left: 40%;
            /* background-color: blue; */
            border-bottom: 10px solid white;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
        }

        .disbox2 {
            display: none;
            position: absolute;
            bottom: -100px;
            left: 145px;
            width: 100px;
            height: 100px;
            background-color: white;
        }

        .disboxsan2 {
            width: 0;
            height: 0;
            position: absolute;
            top: -18px;
            left: 40%;
            /* background-color: blue; */
            border-bottom: 10px solid white;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
        }

        .disbox img {
            width: 80px;
            height: 80px;
            border: 10px solid white;

        }

        .footer {
            font-size: 12px;
            position: fixed;
            top: 95%;
            left: 90%;
        }
    </style>
</head>

<body id="bd">



    <!-- 透明盒子 -->
    <div class="box">
        <img src="img/13.jpg" alt="" class="bg-img">
        <div class="contentUser">
            <!-- 头像 -->
            <div class="boxt">
            </div>
            <h3> 强尼银手</h3>


            <div class="downbox">
                <li id="qq"><img src="img/qq.png" alt=""></li>
                <li id="csdn"><img src="img/csdn.png" alt=""></li>

            </div>
            <div class="disbox" id="qq2">
                <img src="img/qqma.jpg" alt="">
                <div class="disboxsan"></div>
            </div>
            <div class="disbox2" id="csdn2">
                <img src="img/csdnma.jpg" alt="">
                <div class="disboxsan2"></div>
            </div>
        </div>
    </div>

    <div class="footer"> <a href="index1.html">点击空格继续</a></div>


</body>
<script>
    document.addEventListener("keydown", keydown);
    function keydown(event) {
        if (event.keyCode == 32) {
            location.href = 'index1.html'
        } else {
            alert('杰克:别拱火!!!!')
        }

    }
    const i1 = document.querySelector('#qq')
    const i2 = document.querySelector('#csdn')
    const j1 = document.querySelector('#qq2')
    const j2 = document.querySelector('#csdn2')
    i1.addEventListener('mouseenter', function () {
        j1.style.display = 'block'
    })
    i1.addEventListener('mouseleave', function () {
        j1.style.display = 'none'
    })
    i2.addEventListener('mouseenter', function () {
        j2.style.display = 'block'
    })
    i2.addEventListener('mouseleave', function () {
        j2.style.display = 'none'
    })
</script>

</html>


window.onload = function () {
    // 定时器，每隔 1 秒执行 1 次
    setInterval(() => {
        var dt = new Date()
        // var week = "星期" + "日一二三四五六".split(/(?!\b)/)[now.getDay()];
        // console.log(week);
        var week = "星期" + "日一二三四五六".split(/(?!\b)/)[dt.getDay()];
        console.log(dt.getDay())
        var HH = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()

        // 为页面上的元素赋值
        document.querySelector('#HH').innerHTML = padZero(HH)
        document.querySelector('#mm').innerHTML = padZero(mm)
        document.querySelector('#ss').innerHTML = padZero(ss)
        document.querySelector('#xq').innerHTML = week
    }, 1000)
}


// 补零函数
function padZero(n) {
    return n > 9 ? n : '0' + n
}



//dom操作，先获取节点，遍历添加绑定事件，当鼠标经过的时候，更改样式，并显示出下面对应的内容
const as = document.querySelectorAll('.nav .w div')
console.log(as)
for (let i = 0; i < as.length; i++) {
    as[i].addEventListener('mouseenter', function () {
        // console.log('鼠标经过')
        document.querySelector('.nav .active').classList.remove('active')
        this.classList.add('active')
        document.querySelector('.bigBOX .active').classList.remove('active')
        document.querySelector(`.bigBOX .m:nth-child(${i + 1})`).classList.add('active')
    })
}


//歌曲列表、信息列表、网站列表都是通过VUE绑定渲染
var app = new Vue({
    el: "#app",
    data: {
        netList: [
            {
                name: "夜之城官网",
                address: "https://www.nightcity.love/zh-cn/",
                imgsrc: "https://img2.baidu.com/it/u=1758393626,179997858&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            },
            {
                name: "NCPD",
                address: "https://wiki.biligame.com/cyberpunk2077/NCPD",
                imgsrc: "http://img1.gamersky.com/upimg/pic/2017/04/14/201704141750052227_small.jpg"
            },
            {
                name: "豪车购买",
                address: "https://wiki.biligame.com/cyberpunk2077/%E8%BD%BD%E5%85%B7",
                imgsrc: "https://img1.gamersky.com/upimg/pic/2019/08/27/201908271508566233_small.jpg"
            },
            {
                name: "CSDN",
                address: "https://blog.csdn.net/hideonbush123",
                imgsrc: "https://img1.gamersky.com/upimg/pic/2019/08/27/201908271508596335_small.jpg"
            },
            {
                name: "Tools",
                address: "http://cxysite.com/",
                imgsrc: "https://img1.gamersky.com/upimg/pic/2019/08/27/201908271509087908_small.jpg"
            },
            {
                name: "Note",
                address: "http://zhangdarui.3vdo.club/note.html",
                imgsrc: "https://img1.gamersky.com/upimg/pic/2019/08/27/201908271509075550_small.jpg"
            },
            {
                name: "Projects",
                address: "http://zhangdarui.3vdo.club/project.html",
                imgsrc: "https://img1.gamersky.com/upimg/pic/2019/08/27/201908271509061428_small.jpg"
            },
            {
                name: "BACK",
                address: "http://zhangdarui.3vdo.club",
                imgsrc: "https://img1.gamersky.com/upimg/pic/2019/08/27/201908271509056001_small.jpg"
            },
        ],
        songList: [
            {
                id: 0,
                name: "Never Fade Away (SAMURAI Cover)",
                songsrc: "music/0.mp3",
            },
            {
                id: 1,
                name: "Marcin Przybylowicz",
                songsrc: "music/1.mp3",
            },
            {
                id: 2,
                name: "Paul Leonard-Morgan",
                songsrc: "music/2.mp3",
            },

        ],
        messageList: [
            {
                id: 0,
                title: '房租欠了',
                content: '依照我国《合同法》的规定，出租人行使解除权有两种方式：一种是通知解除，即在承租人欠付租金的行为构成根本违约的情况下，出租人可以直接通知承租人解除合同；另一种是催告解除，即在承租人欠付租金的行为尚未构成根本违约的情况下，出租人要先对承租人进行催告，敦促其缴纳房租。如果承租人在收到催告后的合理时间内仍不缴纳房租，出租人才可通知承租人解除租赁合同。',
                sender: '物业'
            },
            {
                id: 1,
                title: '我想你了',
                content: '花若谢，定是为你凋零，泪若流，定是为你哭泣；月若瘦，定是为你相思，笔若动，定是为你写诗。执笔流年，醉枕墨香，不管落花有意，还是流水无情，我都愿意用最轻最淡的文字，为你写尽我那最重最浓的相思。信手翻开为你写的诗，开头写着一见钟情，结尾却是一往情深。行走红尘，清风执笔，细雨为墨，为你写一树桃红李白，与此每一个文字，都是一朵花开，每一朵花开都是一种美丽；醉卧青石，月夜为纸，星斗为字，为你写一枕梦呓心语，其间每一个标点，都是一声叹息，每一声叹息都有一段故事。默念着素笺风干的前尘往事，不知是相知太深，还是记忆太浓，执笔写瘦了一方风月，梦里的浅笑依旧挥之不去；咀嚼着墨字流香的只言片语，不知是情义太重，还是相思太满，抬头仰望成一个角度，眼里的泪水还是要流出来。',
                sender: '帕南'
            },
            {
                id: 2,
                title: '你已受到攻击',
                content: '电脑或其他设备连接到网络时，来自内部主机的可疑通讯是攻击的极佳警示。原因就是：有一些恶意程序需要连接到指挥与控制服务器，而这些服务器通常位于不同国家，用来中继信息和接收指令。',
                sender: '匿名'
            },
            {
                id: 3,
                title: '请勿相信医疗彩票信息',
                content: '此类骗局之前已经多次发生，四川省医疗保障局曾严正声明：四川省医疗保障部门或相关政府部门未以任何名义发送此类信息或其他的“医保停用更换电子版使用”“完善个人信息”的短信提醒，更不会通过短信发送任何网址请参保群众点击。',
                sender: '国家反诈中心'
            },
        ],
        songUrl: '',
        isPlay: false,
        contentTitle: '',
        contentContent: '',
        conntentSender: '',
    },
    methods: {
        playMusic(musicUrl) {
            console.log(musicUrl);
            this.songUrl = musicUrl

        },
        play() {
            this.isPlay = true
        },
        // audio的pause事件
        pause() {
            this.isPlay = false
        },

        setM: function (e) {
            console.log(e);
            console.log(e.target.innerText);
            const arr = this.messageList.find(element => element.title === e.target.innerText
            )
            console.log(arr);
            this.contentTitle = arr.title;
            this.contentContent = arr.content;
            this.conntentSender = arr.sender;
        }
    },
})


//轮播图
var swiper = new Swiper('.swiper-container', {

    autoplay: {
        delay: 1000
    },
    observer: true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents: true//修改swiper的父元素时，自动初始化swiper
});

document.addEventListener("keydown", keydown);
function keydown(event) {

    if (event.keyCode == 67) {
        location.href = 'index.html'
    } else {
        alert('杰克:别拱火!!!!')
    }

}

怎么说,点赞过100,我就是累死,也升级2.0版本