Welink ui组件介绍Form(纯展示)

举报
云会议运营喵大人 发表于 2020/02/19 18:20:27 2020/02/19
【摘要】 Form(纯展示)纯展示表单。Form UI 提供与WeLink规范一致的表单视图 <div class="page" style="background: #eee;"> <div class="page__hd"> <h1 class="page__title">Form</h1> <p class="page__desc"...

Form(纯展示)


纯展示表单。Form UI 提供与WeLink规范一致的表单视图

    <div class="page" style="background: #eee;">
        <div class="page__hd">
            <h1 class="page__title">Form</h1>
            <p class="page__desc">表单(纯展示)
        </div>
        <div class="page__bd">
            <div class="weui-form_view">
                <div class="weui-form_view-cell">
                    <div class="weui-form_view-cell__header">个人交养老险</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-500.00</div>
                </div>
                <div class="weui-form_view-cell">
                    <div class="weui-form_view-cell__header">个人交医疗险</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-200.00</div>
                </div>
                <div class="weui-form_view-cell">
                    <div class="weui-form_view-cell__header">个人交失业险</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-168.34</div>
                </div>
                <div class="weui-form_view-cell">
                    <div class="weui-form_view-cell__header">个人交住房金</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-252.50</div>
                </div>
                <div class="weui-form_view-cell">
                    <div class="weui-form_view-cell__header">扣个人所得税</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-1458.60</div>
                </div>
            </div>
            <div class="weui-form_view"  style="margin-top: 30px;">
                <div class="weui-form_view-cell weui-form_view-cell__line">
                    <div class="weui-form_view-cell__header">纯展示标题</div>
                    <div class="weui-form_view-cell__body">文字数字左对齐</div>
                </div>
                <div class="weui-form_view-cell weui-form_view-cell__line">
                    <div class="weui-form_view-cell__header">纯展示</div>
                    <div class="weui-form_view-cell__body">文字数字左对齐</div>
                </div>
                <div class="weui-form_view-cell weui-form_view-cell__line">
                    <div class="weui-form_view-cell__header">纯展示</div>
                    <div class="weui-form_view-cell__body">文字数字左对齐</div>
                </div>
            </div>
            <div class="weui-form_view"  style="margin-top: 30px;">
                <div class="weui-form_view-cell__verticality">
                    <div class="weui-form_view-cell__header">上下接口的纯展示</div>
                    <div class="weui-form_view-cell__body">文字数字左对齐</div>
                </div>
            </div>      
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__verticality">
                    <div class="weui-form_view-cell__header">
                        文案太多最对显示三行
                    </div>
                    <div class="weui-form_view-cell__body">
                        <div class="weui-form_view-cell__access_text weui-form_view-cell__body-content_trigger">
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                        </div>
                        <div class="weui-form_view-cell__body-btn">展开</div>
                    </div>
                </div>
                <div class="weui-form_view-cell">
                    <div class="weui-form_view-cell__header">
                        文案太多最对显示三行
                    </div>
                    <div class="weui-form_view-cell__body">
                        <div class="weui-form_view-cell__access_text">
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                        </div>
                        <div class="weui-form_view-cell__body-btn">收起</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.weui-form_view-cell__body-btn').on('click',function () {
                var text = $(this).html();
                if(text === '展开'){
                    $(this).parent().find('.weui-form_view-cell__access_text').removeClass('weui-form_view-cell__body-content_trigger');
                    $(this).html('收起');
                } else {               
                    $(this).parent().find('.weui-form_view-cell__access_text').addClass('weui-form_view-cell__body-content_trigger');
                    $(this).html('展开');
                }
            });
        });
    </script>

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。