成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

electron仿制百度網(wǎng)盤客戶端2(登錄界面制作)

劉東 / 1713人閱讀

摘要：效果預(yù)覽尺寸測(cè)量百度網(wǎng)盤客戶端的尺寸是主界面頂部開始制作下載安裝制作登錄界面首先將主界面隱藏掉只需要在主進(jìn)程里面設(shè)置就可以了之后制作一個(gè)登錄界面創(chuàng)建一個(gè)在主進(jìn)程之中引入代碼創(chuàng)建路由創(chuàng)建登錄界面樣式代碼微軟雅黑圖標(biāo)下載去阿里

效果預(yù)覽

尺寸測(cè)量

百度網(wǎng)盤客戶端的尺寸是:
主界面 w:662px h:442px
頂部header h:75px bg:#EFF2F6

開始制作 下載安裝electron-vue

制作登錄界面

首先將主界面 mainWindow 隱藏掉 只需要在主進(jìn)程index.js 里面設(shè)置show: false就可以了
之后制作一個(gè)登錄界面
創(chuàng)建一個(gè)login.js 在主進(jìn)程index.js之中引入
login.js 代碼

import {BrowserWindow} from "electron"

let loginWindow = null;

const loginUrl = process.env.NODE_ENV === "development" ? `http://localhost:9080/#/login` : `file://${__dirname}/index.html/#/login`;

function createLoginWindow() {
    loginWindow = new BrowserWindow({
        width: 662,
        height: 442,
        useContentSize: true,
        frame: false,
        resizable: false
    });

    loginWindow.setMenu(null);

    loginWindow.loadURL(loginUrl);
}

createLoginWindow();
創(chuàng)建login路由 
  {path: "/login", name: "login", component: () => import("@/view/login")},
創(chuàng)建登錄界面
樣式代碼 
    * {
        padding: 0;
        margin: 0;
    }

    .login {
        width: 662px;
        height: 442px;
        border: 1px solid #999999;
        font-family: "微軟雅黑";
        -webkit-user-select: none;
    }

    header {
        height: 75px;
        background-color: #EFF2F6;
        -webkit-app-region: drag;
        position: relative;
    }
圖標(biāo)下載

去阿里矢量素材中心下載一致的圖標(biāo), 耐心掉 因?yàn)橛袝r(shí)候很難找到一樣的!
下載完畢之后丟到 assets/fonts目錄下
在 login.vue中引入

import "./assets/fonts/iconfont.css"
頭部制作 頭部代碼
頭部樣式 
    header {
        height: 75px;
        background-color: #EFF2F6;
        -webkit-app-region: drag;
        position: relative;
    }

    header .logo {
        width: 140px;
        height: 75px;
        background: url("../../assets/img/[email protected]") no-repeat 0 20px;
        background-size: 140px 33px;
        margin: 0 auto;
    }

    header .menu {
        width: 100px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        text-align: right;
        padding-top: 8px;
        padding-right: 8px;
    }

    header .menu span {
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-left: 5px;
        cursor: pointer;
        text-align: center;
        line-height: 22px;
    }
左側(cè)掃碼 模板代碼 
 

            

                
掃一掃登錄

                
請(qǐng)使用xxxxxApp掃碼登錄 

                

                    
                

                刷新二維碼
樣式 
 main {
        height: 365px;
        padding-top: 30px;
        background: #FFFFFF;
    }

    main .scan p.title {
        text-align: center;
        font-size: 14px;
        color: #666666;
        font-weight: normal;
        margin-top: 30px;
    }

    .scan p.title i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
        margin-left: 5px;
        color: #398CFF;
        cursor: pointer;
    }

    .scan p.title i:hover {
        border-bottom: 1px solid #398CFF;
    }

    main .scan h2 {
        text-align: center;
        font-size: 16px;
        font-weight: normal;
    }

    main .scan h2 i {
        margin-right: 5px;
        font-size: 14px;
    }

    .scan .qrcode {
        width: 154px;
        height: 154px;
        margin: 20px auto 0 auto;
        padding: 10px;
        border-radius: 3px;
        border: 1px solid #ECEDEE;
    }

    .scan .qrcode img {
        width: 100%;
        height: 100%;
    }

    .scan span.refresh {
        display: block;
        width: 94px;
        height: 30px;
        border: 1px solid #BAD4FD;
        margin: 22px auto 0 auto;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        border-radius: 4px;
        color: #3482F9;
    }
右側(cè)表單 模板代碼
樣式代碼 
.form {
        padding-right: 30px;
        padding-left: 10px;
    }

    .form .validate_msg {
        height: 37px;
    }

    .form .header {
        display: flex;
    }

    .form .header i {
        font-style: normal;
        color: #3482F9;
        cursor: pointer;
        margin-left: auto;
        font-size: 12px;
    }

    .form input, .form button {
        outline: none;
    }

    .form input.text {
        height: 40px;
        width: 290px;
        border: 1px solid #C7C7C7;
        padding-left: 35px;
        border-radius: 1px;
    }

    .form .form_item {
        margin-bottom: 16px;
        position: relative;
    }
    .form .form_item:nth-last-child(2){
        /*margin-bottom: 10px;*/
    }

    .form .form_item i {
        position: absolute;
        font-size: 16px;
        top: 12px;
        left: 10px;
        color: #000000;
    }

    .form .form_options {
        display: flex;
    }

    .form .form_options i {
        margin-left: auto;
        font-style: normal;
        font-size: 12px;
        color: #3482F9;
        cursor: pointer;
        position: relative;
        top:3px;
    }

    .form .form_options i:hover {
        text-decoration: underline;
    }

    .login_options .option_item {
        display: inline-block;
        width: 13px;
        height: 13px;
        margin-right: 5px;
        position: relative;
        border: 1px solid #B3B3B3;
        vertical-align: middle;
        cursor: pointer;
        top: -1px;
    }

    .login_options .option_item input {
        opacity: 0;
    }

    .login_options span.text {
        display: inline-block;
        margin-right: 14px;
        font-size: 13px;
    }

    .login_options .option_item span.checked {
        position: absolute;
        top: -5px;
        right: -1px;
        font-weight: bold;
        display: inline-block;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

    .form_options label {
        cursor: pointer;
    }

    .option_item span.checked img {
        width: 100%;
        height: 100%;
    }

    input[type="checkbox"] + span {
        opacity: 0;
    }

    input[type="checkbox"]:checked + span {
        opacity: 1;
    }

    button.submit {
        margin-top: 25px;
        width: 100%;
        height: 38px;
        background-color: #398CFF;
        color: #FFFFFF;
        border:none;
        border-radius: 3px;
        font-size: 16px;
        font-family: 微軟雅黑;
    }

    .form .footer{
        display: flex;
        position: absolute;
        bottom: 15px;
        width:300px;
    }

    .form .footer i.register{
        font-style: normal;
        font-size: 13px;
        color: #3482F9;
        cursor: pointer;

    }
    .form .footer i.register:hover{
        text-decoration: underline;
    }
    .form .footer div{
        margin-left: auto;
        color:#5D9BFA;
    }
    .form .footer div i{
        display: inline-block;
        margin-left: 10px;
        width:20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
        font-size: 18px;
    }
    .form .footer div i:hover{
        background-color: #EBF3FF;
    }
完結(jié)

到這里就完成了,沒(méi)有制作短信登錄的界面!

聲明:

本項(xiàng)目只用于學(xué)習(xí)使用,請(qǐng)不要用于商業(yè)用途,項(xiàng)目中使用的百度網(wǎng)盤的Logo只作為學(xué)習(xí)使用!

下載代碼

github: https://github.com/lihaotian0...
碼云地址: https://gitee.com/leehaotian/...
qq群: 814270669

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98639.html

相關(guān)文章

  • electron 仿制QQ登錄界面

    摘要：首先來(lái)看看的登錄界面準(zhǔn)備開發(fā)制作一個(gè)窗口先主進(jìn)程代碼暫時(shí)調(diào)用界面基本布局我們先大概做一個(gè)這樣的界面頁(yè)面代碼樣式代碼取消全部的外邊距和內(nèi)邊距設(shè)置窗口的樣式設(shè)置手型加一個(gè)邊框調(diào)試樣式最后要?jiǎng)h除或者更改設(shè)置寬度必須要和主進(jìn)程中設(shè)置的一樣不能大于主 首先來(lái)看看qq的登錄界面:showImg(https://segmentfault.com/img/bVbiu16?w=483&h=458); 準(zhǔn)...

    youkede 評(píng)論0 收藏0

  • electron制作聊天界面(仿制qq)

    摘要：將炙啖朱亥，持觴勸侯嬴。三杯吐然諾，五岳倒為輕眼花耳熱后，意氣素霓生。救趙揮金槌，邯鄲先震驚。千秋二壯士，烜赫大梁城。縱死俠骨香，不慚世上英。誰(shuí)能書閣下，白首太玄經(jīng)。是唐代大詩(shī)人李白借樂(lè)府古題創(chuàng)作的一首詩(shī)。 效果圖:showImg(https://segmentfault.com/img/bVbj3Yd?w=1215&h=735); 樣式使用scss和flex布局 這也是制作IM系統(tǒng)的...

    LucasTwilight 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<