【vue2静态复古win95简历网页】模仿电脑状态栏实现

实现效果：

具体功能：

1. 开始栏

            <a href="https://blog.csdn.net/EVELESLIE?type=blog" target="_blank"><div class="bar"><img class="social-image" src="@/assets/iPhone-Icons/csdn.png"/><u>B</u>log</div></a><a href="https://github.com/eveleslie" target="_blank"><div class="bar"><img class="social-image" src="@/assets/iPhone-Icons/Github.webp"/><u>G</u>itHub</div></a><div class="divider"></div><a href="/files/zanxi_resume.pdf" target="_blank"><div class="bar"><img class="social-image" src="@/assets/win95Icons/resume.png"/><u>R</u>ésumé</div></a>

开始栏使用a标签实现

.menu {width: 165px;height: 282px;background: black;background: rgb(195, 195, 195);overflow: hidden;border-top: solid rgb(250, 250, 250) 2px;border-left: solid rgb(250, 250, 250) 2px;border-right: solid rgb(90, 90, 90) 1.5px;border-bottom: solid rgb(90, 90, 90) 1.5px;box-shadow: 1.5px 1.5px black;max-height: 100%;max-width: 100%;align-items: flex-end;outline: rgb(222, 222, 222) 1px solid;display: flex;flex-direction: row;align-items: flex-start;font-size: 12px;
}

使用边框来实现立体效果

2. 底部状态栏

在App.vue中导入底部导航栏

<navbar id="navbar" />```javascript<div v-for="window in this.activeWindows" :key="window.key"><button v-if="$store.getters.getActiveWindow!==window.windowId && (window.windowState=='open' || window.windowState=='minimize')" v-on:click="openWindow(window.windowId)" class="navbar-item open"> <img class="icon-image" :src="require('@/assets/win95Icons/' + window.iconImage)" :alt="window.altText"/><p>{{window.displayName}}</p></button><button v-if="$store.getters.getActiveWindow==window.windowId" v-on:click="openWindow(window.windowId)" class="navbar-item-depressed"><img class="icon-image" :src="require('@/assets/win95Icons/' + window.iconImage)" :alt="window.altText"/><p>{{window.displayName}}</p></button></div>

首先使用v-for从激活队列中循环读取激活的窗口，然后使用v-if来判断窗口处于休眠状态还是激活状态。如果窗口没有正在被激活，但是处于open或者minimize状态，那么导航栏启动open休眠样式。```css
.navbar-item {width: 100px;height: 28px;border-radius: 10px;margin-left: 2px;margin-right: 2px;box-shadow: 1.5px 1.5px black;border-top: solid rgb(250, 250, 250) 1.5px;border-left: solid rgb(250, 250, 250) 1.5px;border-bottom: solid rgb(90, 90, 90) 1.5px;border-right: solid rgb(90, 90, 90) 1.5px;background: rgb(192, 192, 192);border-radius: 0.5px;display: flex;justify-content: flex-start;align-items: center !important;padding-left: 5px;padding-right: 5px;font-weight: bold;font-size: 0.7rem;padding-top: 2px;
}

如果窗口正在被激活，导航栏启用depress激活样式

.navbar-item-depressed {width: 100px;height: 28px;border-radius: 10px;margin-left: 2px;margin-right: 2px;border-radius: 0.5px;display: flex;justify-content: flex-start;align-items: center;padding-left: 5px;padding-right: 5px;font-weight: bold;font-size: 0.7rem;background: rgb(192, 192, 192);box-shadow: none;background: repeating-conic-gradient(rgb(189, 190, 189) 0% 25%, rgb(255, 255, 255) 0% 50%) 50% / 2px 2px;border-top: solid rgb(0, 0, 0) 1.5px;border-left: solid rgb(0, 0, 0) 1.5px;border-bottom: solid rgb(250, 250, 250) 1.5px;border-right: solid rgb(250, 250, 250) 1.5px;padding-top: 2px;
}

3. 时间栏

**
使用moment.js来获取事件，并通过定时器每秒更新

    beforeMount() {setInterval(() => {this.time = moment().format('hh:mm A')}, 1000)setInterval(() => {this.date = moment().format('ddd DD MMMM')}, 1000)},

【vue2静态复古win95简历网页】模仿电脑状态栏实现相关推荐

个人简历网页设计项目（入门）
个人简历网页设计项目唠叨正题项目进度设计思路最终成果唠叨在文章的开头,首先感谢张迪老师给我的指导和一些资源.其次,我内心有点愧疚.本该在开学前完成的项目,硬生生被我拖延到开学第一周周末才 ...
使用云服务器搭建个人简历网页
一.开通云服务器进入公有云提供商官网(示例:阿里云) 地址:www.aliyun.com或www.aliyun.com/minisite/goods?userCode=3satwfcw 已有阿里云账 ...
html期末作业代码网页设计 web网页设计实例作业 ——中国风文化传媒企业官网(6页) 简单网页设计作业静态HTML文化主题网页作业
web网页设计实例作业 --中国风文化传媒企业官网(6页) 简单个人网页设计作业静态HTML文化主题网页作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
好看的扁平化大气IT个人简历网页模板
介绍: 扁平化响应式紫色风格,非常大气简约的IT个人简历网页模板,也可以做团体介绍模板,具体看效果图. 网盘下载地址: http://kekewangLuo.cc/fuXx0rRkasd0 图片:
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
TML5期末大作业：动漫网站设计——神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码
HTML5期末大作业:动漫网站设计--神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有个人. 美食. 公司 ...
编写一个简单的“个人简历”网页
新建HTML5文档,另存为"index01.html". 根据个人简历各元素,每一个元素用一个<p></p>标签,每个<p>标签为并列关系,且& ...
HTML5+CSS期末大作业：篮球明星个人网站设计——篮球明星介绍(6页) 简单的学生DW网页设计作业成品 web课程设计网页规划与设计简单个人网页设计作业静态HTML旅行主题网页作业 DW
HTML5+CSS期末大作业:篮球明星个人网站设计--篮球明星介绍(6页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有 ...
Python 实战系列-微信或网页远程控制电脑
Python 实战系列-微信或网页远程控制电脑本系列课程为Python实战系列课程:使用微信控制电脑,使用Python的Web框架Flask搭建网页, 并使用网页控制电脑:使用wxPython编写图 ...

【vue2静态复古win95简历网页】模仿电脑状态栏实现

实现效果：

具体功能：

1. 开始栏

2. 底部状态栏

3. 时间栏

【vue2静态复古win95简历网页】模仿电脑状态栏实现相关推荐

最新文章

热门文章