分享一款基于aui框架的图文发布界面

YonBuilder低代码开发平台

于 2019-07-23 10:22:44 发布

阅读量354

点赞数

文章标签： aui 图文发布

本文链接：https://blog.csdn.net/weixin_43947457/article/details/96971495

版权

本文出自APICloud官方论坛，
感谢论坛版主川哥哥的分享。

分享一款基于aui框架的图文发布界面，可以添加多张图可以删除，类似qq空间发布说说，没做服务器后端，只演示前端操作。
需要用到UIMediaScanner模块
在这里插入图片描述

项目部分源码：

<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;
                }