分享一款基於aui框架的圖文發佈界面

時間 2019-11-08

標籤分享一款基於 aui 框架圖文發佈界面简体版

原文原文鏈接

本文出自APICloud官方論壇，感謝論壇版主川哥哥的分享。css

分享一款基於aui框架的圖文發佈界面，能夠添加多張圖能夠刪除，相似qq空間發佈說說，沒作服務器後端，只演示前端操做。須要用到UIMediaScanner模塊前端

部分項目源碼：web

<head>
            <meta charset="utf-8">
            <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
            <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
            <link rel="stylesheet" type="text/css" href="../css/aui.css" />
            <style>
                    .sm textarea {
                            color: #979797;
                            height: 6.4rem
                    }
                    .aui-list {
                            border-top: none;
                    }
                    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
                            .aui-list {
                                    border: none;
                                    background-size: 100% 0px;
                            }
                    }
                    .aui-list .aui-list-item:active {
                            background-color: #FFFFFF;
                    }
                    .imglist {
                            width: 100%;
                            clear: both;
                            margin: 1rem auto;
                    }
                    .imglist img {
                            width: 4rem;
                            height: 4rem;
                    }
                    .add {
                            width: 4rem;
                            height: 4rem;
                            background: url(../res/add.png) no-repeat;
                            background-size: 100% 100%;
                            float: left;
                            margin-right: 1rem;
                    }
                    .addimg {
                            float: left;
                            height: 4rem;
                            width: 4rem;
                            margin-right: 1rem;
                            margin-bottom: 1rem;
                    }
                    .addimg img {
                            width: 4rem;
                            height: 4rem;
                    }
                    .addimg .x img {
                            width: 0.8rem;
                            height: 0.8rem;
                            position: relative;
                            top: -4.4rem;
                            left: -0.5rem;
                    }
                    /*遮罩層*/
                    .mask {
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, .5);
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 999;
                            display: none;
                    }
                    .alert {
                            width: 12rem;
                            height: 7.42rem;
                            border-radius: 0.2rem;
                            background: #fff;
                            font-size: 0.75rem;
                            text-align: center;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -6rem;
                            margin-top: -4.2rem;
                    }
                    .alert p:nth-child(1) {
                            line-height: 5rem;
                            border-bottom: 1px solid #EBEBEB;
                            font-size: 0.9rem;
                    }
                    .alert p:nth-child(2) span {
                            display: inline-block;
                            width: 49%;
                            height: 2.4rem;
                            line-height: 2.4rem;
                            float: left;
                            font-size: 0.8rem;
                    }
                    .cancel {
                            border-right: 1px solid #EBEBEB;
                            color: #00BB3D;
                    }
                    .sure {
                            color: #F60;
                    }
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。