h5添加商品页面

<div class="creat_product_container">
    
    <div class="creat_title_box style_box">
        <div class="product_title">
            <div class="title_name creat_name">标题</div>
            <div class="title_num creat_num">
                <span class="product_title_num">0/30</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="title_content creat_content">
            <textarea class="title_content_describe content_describe" maxlength="30" oninput="titleWord()"
                      placeholder="例如：【五双装】韩版复古女袜，五种颜色各一双"></textarea>
        </div>
        <div class="title_img_body">
            <div class="title_img_box img_box" onclick="addWebImages(0)">
                <i class="iconfont icon-xiangji"></i>
                <div class="title_img_describe img_describe">商品图</div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="creat_describe_box style_box">
        <div class="product_describe">
            <div class="describe_name creat_name">描述</div>
            <div class="describe_num creat_num">
                <span class="product_describe_num">0/300</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="describe_content creat_content">
            <textarea class="describe_content_describe content_describe" maxlength="300" oninput="describeWord()"
                      placeholder="请输入商品描述"></textarea>
        </div>
        <div class="describe_img_body">
            <div class="describe_img_box img_box" onclick="addWebImages(1)">
                <i class="iconfont icon-xiangji"></i>
                <div class="describe_img_describe img_describe">详情图</div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="creat_classify_box style_box">
        <div class="classify_name">分类</div>
        <div class="classify_select" onclick="commodityClass()">
            <span class="select_describe">请选择商品分类</span>
            <i class="iconfont icon-jiantou"></i>
        </div>
        <div class="clear"></div>
    </div>

    <div class="creat_price_box">
        <div class="creat_market_single_box li_box">
            <div class=" market_box">
                <div class="price_market price_container">市场价</div>
                <div class="market_num">
                    <span class="market_num_span num_span">￥</span>
                    <input class="market_num_input price_input" placeholder="市场价" type="text"/>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="creat_group_single_box li_box">
            <div class=" group_box">
                <div class="price_group price_container">团购价</div>
                <div class="group_num">
                    <span class="group_num_span num_span">￥</span>
                    <input class="group_num_input price_input" placeholder="团购价" type="text"/>
                </div>
                <div class="clear"></div>
            </div>
            <div class="single_box">
                <div class="price_single price_container">单买价</div>
                <div class="single_num">
                    <span class="single_num_span num_span">￥</span>
                    <input class="single_num_input price_input" placeholder="单买价" type="text"/>
                </div>
                <div class="clear"></div>
            </div>

            <div class="clear"></div>
        </div>
        <div class="creat_stock_box li_box li_box_last">
            <div class="stock_name">库存</div>
            <div class="stock_num">
                <input class="stock_num_input" placeholder="库存数(默认不限)" type="text"/>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="creat_return_box style_box">
        <div class="return_goods">是否支持配送</div>
        <div class="return_switch">
            <input type="checkbox" class="js-switch return_input">
        </div>
        <div class="clear"></div>
    </div>
    <div class="creat_button_box">
        <div class="shelf_box button_box">
            <div class="shelf_button button_name" onclick="getUserInfo(0)">直接上架</div>
        </div>
        <div class="keep_box button_box">
            <div class="keep_button button_name" onclick="getUserInfo(1)">保存草稿</div>
        </div>
        <div class="clear"></div>
    </div>
</div>

其中监控开关按钮用js控制：

//开关按钮
    var switch_on = 0;
    var elems = document.querySelectorAll('.js-switch');
    var switchery = new Switchery(elems[0]);
    //判断开关
    $('.switchery').click(function () {
        if (document.querySelector('.js-switch').checked) {
            switch_on = 1;
        } else {
            switch_on = 0;
        }
    });

同时需要在顶部引入.js文件：

<!--<%&#45;&#45;switchery选择插件&#45;&#45;%>-->
    <link href="../static/css/switchery.css" rel="stylesheet">
    <!--<%&#45;&#45;switchery选择插件&#45;&#45;%>-->
    <script src="../static/js/switchery.js" type="text/javascript"></script>

一下为css样式布局：

<style type="text/css">
        .top_return {
            position: fixed;
            height: 55px;
            border-bottom: 2px solid #e8e8e8;
            width: 100%;
            background: #f9f9f9;
        }

        .return_button_img {
            width: 32px;
            padding: 13px;
        }

        .return_word {
            color: #333333;
            line-height: 55px;
            text-align: center;
            font-size: 16px;
        }

        .return_button {
            position: absolute;
            top: 0;
            left: 0;
        }

        .style_box {
            padding: 15px;
            background: #ffffff;
            margin-bottom: 10px;
        }

        .creat_name {
            float: left;
        }

        .creat_num {
            float: right;
            color: #999;
        }

        .creat_content {
            padding: 20px 0px;
            text-align: center;
        }

        .content_describe {
            border: none;
            resize: none;
            width: 100%;
            overflow-x: visible;
            overflow-y: visible;
        }

        .describe_content_describe {
            min-height: 120px;
        }

        .img_box {
            border: 1px dashed #e8e8e8;
            width: 62px;
            height: 60px;
            text-align: center;
            float: left;
            margin-left: 6px;
        }

        .icon-xiangji {
            font-size: 27px;
            color: #999;
            margin-top: 4px;
            display: inline-block;
        }

        .img_describe {
            color: #999;
            font-size: 12px;
            margin-top: 3px;
        }

        .classify_name {
            float: left;
        }

        .classify_select {
            float: right;
            color: #999;
        }

        .group_box {
            float: left;
            width: 50%;
        }

        .single_box {
            float: left;
            width: 50%;
        }

        .price_container {
            float: left;
        }

        .market_num {
            float: left;
        }

        .group_num {
            float: left;
        }

        .single_num {
            float: left;
        }

        .price_input {
            border: none;
            width: 80px;
        }

        .group_num_span {
            /*color: #c0392b;*/
        }

        .num_span {
            padding-left: 20px;
        }

        .creat_price_box {
            background: #fff;
            margin-bottom: 20px;
            padding-left: 15px;
        }

        .stock_name {
            float: left;
        }

        .stock_num {
            float: left;
            padding-left: 38px;
        }

        .return_goods {
            float: left;
        }

        .return_switch {
            float: right;
        }

        .shelf_box {
            float: left;
            background: #2ecc71;
        }

        .keep_box {
            float: right;
            background: #e67e22;
        }

        .button_box {
            width: 50%;
            text-align: center;
            height: 55px;
        }

        .button_name {
            color: #fff;
            line-height: 55px;
        }

        .icon-shanchuchahao {
            color: #c0392b;
            position: relative;
            left: 26px;
            bottom: 6px;
            z-index: 2;
        }

        .add_img {
            height: 60px;
            width: 62px;
            position: relative;
            bottom: 19px;
        }

        .creat_return_box {
            line-height: 30px;
        }

        .li_box {
            line-height: 50px;
            border-bottom: 1px solid #e8e8e8;
        }

        .li_box_last {
            border-bottom: none;
        }

        .stock_num_input {
            border: none;
        }


    </style>

猜你喜欢