初探 Electron - 实践篇2

最新推荐文章于 2021-10-29 15:54:20 发布

Jartto

最新推荐文章于 2021-10-29 15:54:20 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/Jartto/article/details/106681469

版权

上文初探 Electron - 实践篇1中，我们完成了项目的主架构，虽然可以运行，但并不完美。这节我们继续补充，一起完成剩下的工作。

八、使用 Material-UI

项目虽然有了主轮廓，但是外观并不令人满意。我们来引入一个 UI 框架 Material-UI，为项目添加一些亮丽的色彩。

1	npm install material-ui --save

至于为啥选 Material-UI ，大概是其他 UI 框架使用的太频繁了，换换口味😂

当然，从理论上讲，你可以引入任何你喜欢的 UI 框架，大家各取所需。

九、增加 less 文件

仅仅引入 UI 框架是不够的，我们需要引入自己的样式文件，这里用 less 示例。首先，在 app 目录下，建立 css 文件夹：

1	cd app && mkdir css

这里将存放我们的 less 文件，我们分别添加 main.less 和 _reset.less 文件：
main.less，为项目的主要样式文件，代码如下：

@import "./_reset.less";
body, .box::before{
        
  background: url(../image/bg.jpg) 0 / cover fixed;
  overflow: hidden;
}
a {
        
  text-decoration: none;
}
.box {
        
  text-align: center;
  color: #fff;
  position: absolute;
  width: 500px;
  height: 400px;
  background: rgba(255, 255, 255, 0.3);
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -250px;
  border-radius: 8px;
  background: hsla(0,0%,100%,.3);
  overflow: hidden;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.box::before { 
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(10px);
  margin: -20px;
  z-index: -1;
}
.box {
        
  .desc {
        
    font-size: 12px;
    position: absolute;
    bottom: 90px;
    opacity: 0.6;
    cursor: pointer;
    letter-spacing: 1px;
  }
}

_reset.less 为重置样式表文件，具体代码如下：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6,