本週課題任務書

時間  2019-11-30
標籤 本週 課題 任務書 简体版
原文   原文鏈接

1.任務安排

計劃時間 計劃任務 計劃是否完成
4.16-4.22 完成發佈活動、註冊、最新活動界面  是
     
     

2.下週計劃完成內容

完成管理員界面javascript

3.本週實現功能

實現了發佈活動界面、註冊、最新活動的微信端界面

4.本週實現代碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>用戶註冊</title>
        <link rel="stylesheet" href="css/weui.min.css" />
        <script type="text/javascript" src="js/weui.min.js"></script>
        <script src="js/zepto.min.js"></script>
    </head>

    <body>
        <div class="page">
            <div class="page__hd">
                <h1 class="page__title">
                    <p class="用戶註冊"/>
                </h1>
            </div>
            <div class="weui-cells__title">用戶名</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="text" placeholder="請輸入用戶名" />
                    </div>
                </div>
                <div class="weui-cells__sex">性別</div>
                <div class="weui-cells weui-cells_radio">
                    <label class="weui-cell weui-check__label" for="x11">
                <div class="weui-cell__bd">
                    <p>男</p>
                </div>
                <div class="weui-cell__ft">
                    <input type="radio" class="weui-check" name="radio1" id="x11">
                    <span class="weui-icon-checked"></span>
                </div>
            </label>
                    <label class="weui-cell weui-check__label" for="x12">

                <div class="weui-cell__bd">
                    <p>女</p>
                </div>
                <div class="weui-cell__ft">
                    <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
                    <span class="weui-icon-checked"></span>
                </div>
            </label>
                    <label class="weui-cell weui-check__label" for="x13">

                <div class="weui-cell__bd">
                    <p>保密</p>
                </div>
                <div class="weui-cell__ft">
                    <input type="radio" name="radio1" class="weui-check" id="x13" checked="checked">
                    <span class="weui-icon-checked"></span>
                </div>
            </label>
                </div>
                <div class="weui-cell weui-cell_select weui-cell_select-after">
                    <div class="weui-cell__hd">
                        <label for="" class="weui-label">用戶類型</label>
                    </div>
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="select2">
                            <option value="1">我的用戶</option>
                            <option value="2">企業用戶</option>

                        </select>
                    </div>
                </div>
                <div class="weui-cells__password">密碼</div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="password" placeholder="請輸入密碼" />
                        </div>
                    </div>
                    <div class="weui-cells__password">確認密碼</div>
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="password" placeholder="請再次輸入密碼" />
                            </div>
                        </div>
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell weui-cell_vcode">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">手機號</label>
                                </div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="tel" placeholder="請輸入手機號">
                                </div>
                                <div class="weui-cell__ft">
                                    <button class="weui-vcode-btn">獲取驗證碼</button>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_vcode">
                                <div class="weui-cell__hd"><label class="weui-label">驗證碼</label></div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="number" placeholder="請輸入驗證碼" />
                                </div>
                                <div class="weui-cell__ft">
                                    <img class="weui-vcode-img" src="./images/vcode.jpg" />
                                </div>
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_email">
                            <div class="weui-cell__hd">
                                <label class="weui-label">郵箱</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="email" placeholder="請輸入郵箱">
                            </div>
                        </div>
                        <label for="weuiAgree" class="weui-agree">
            <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
            <span class="weui-agree__text">
                閱讀並贊成<a href="javascript:void(0);">《相關條款》</a>
            </span>
        </label>

                        <div class="weui-btn-area">
                            <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">肯定</a>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function() {
                            var $tooltips = $('.js_tooltips');

                            $('#showTooltips').on('click', function() {
                                if($tooltips.css('display') != 'none') return;

                                // toptips的fixed, 若是有`animation`, `position: fixed`不生效
                                $('.page.cell').removeClass('slideIn');

                                $tooltips.css('display', 'block');
                                setTimeout(function() {
                                    $tooltips.css('display', 'none');
                                }, 2000);
                            });
                        });
                    </script>
                </div>

    </body>

</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>最新活動</title>
        <link rel="stylesheet" href="css/weui.min.css" />
        <script type="text/javascript" src="js/weui.min.js"></script>
        <script src="js/zepto.min.js"></script>
    </head>

    <body>
        <div class="page">
            <div class="page__hd">
                <h1 class="page__title">
                    <p class="最新活動"/>
                </h1>
            </div>

            <div class="page">
                <div class="page__bd">
                    <div class="weui-search-bar" id="searchBar">
                        <form class="weui-search-bar__form">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search"></i>
                                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required/>
                                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                            </div>
                            <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索活動</span>
                </label>
                        </form>
                        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                    </div>

                </div>
                <div class="page__ft">
                    <a href="javascript:home()"></a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                var $searchBar = $('#searchBar'),
                    $searchResult = $('#searchResult'),
                    $searchText = $('#searchText'),
                    $searchInput = $('#searchInput'),
                    $searchClear = $('#searchClear'),
                    $searchCancel = $('#searchCancel');

                function hideSearchResult() {
                    $searchResult.hide();
                    $searchInput.val('');
                }

                function cancelSearch() {
                    hideSearchResult();
                    $searchBar.removeClass('weui-search-bar_focusing');
                    $searchText.show();
                }

                $searchText.on('click', function() {
                    $searchBar.addClass('weui-search-bar_focusing');
                    $searchInput.focus();
                });
                $searchInput
                    .on('blur', function() {
                        if(!this.value.length) cancelSearch();
                    })
                    .on('input', function() {
                        if(this.value.length) {
                            $searchResult.show();
                        } else {
                            $searchResult.hide();
                        }
                    });
                $searchClear.on('click', function() {
                    hideSearchResult();
                    $searchInput.focus();
                });
                $searchCancel.on('click', function() {
                    cancelSearch();
                    $searchInput.blur();
                });
            });
        </script>
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-navbar">
                    <div class="weui-navbar__item weui-bar__item_on">
                        文藝體育
                    </div>
                    <div class="weui-navbar__item">
                        學習交流
                    </div>
                    <div class="weui-navbar__item">
                        戶外體育
                    </div>
                    <div class="weui-navbar__item">
                        生活家居
                    </div>
                </div>
                <div class="weui-tab__panel">

                </div>
            </div>
        </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('.weui-navbar__item').on('click', function() {
                    $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
                });
            });
        </script>

        <div class="page__bd">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">最新活動列表</div>
                <div class="weui-panel__bd">
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">標題一</h4>
                            <p class="weui-media-box__desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">標題二</h4>
                            <p class="weui-media-box__desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">標題三</h4>
                            <p class="weui-media-box__desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">標題四</h4>
                            <p class="weui-media-box__desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
                        </div>
                    </a>
                </div>
                <div class="weui-panel__ft">
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel">

                </div>
                <div class="weui-tabbar">
                    <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                        <span style="display: inline-block;position: relative;">
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;"></span>
                        </span>
                        <p class="weui-tabbar__label">微信</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <p class="weui-tabbar__label">通信錄</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <span style="display: inline-block;position: relative;">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                        </span>
                        <p class="weui-tabbar__label">發現</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <p class="weui-tabbar__label">我</p>
                    </a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('.weui-tabbar__item').on('click', function() {
                    $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
                });
            });
        </script>
        </script>
    </body>

</html>

6.本週碰到問題及解決方法

本週遇到的問題主要是微信端界面沒法顯示，乳酸菌學長講解絕對路徑解決了這個問題。css

7.本週小結

本週界面設計徹底完成啦！下週作管理員界面！html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程