【jq+css+html】移动web案例课美团外卖

在这里插入图片描述

首页

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script type="text/javascript">
        (function(){
            var docEl = document.documentElement

            // set 1rem = viewWidth / 10
            function setRemUnit () {
                var rem = docEl.clientWidth / 10;
                docEl.style.fontSize = rem + 'px';
            }

            setRemUnit()

            // reset rem unit on page resize
            window.addEventListener('resize', setRemUnit)
            window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
                setRemUnit()
            }
            });
        })();
    </script>
    <link rel="stylesheet" type="text/css" href="../lib/reset.css">
    <link rel="stylesheet" type="text/css" href="./header/header.css">
    <link rel="stylesheet" type="text/css" href="./searchBar/searchBar.css">
    <link rel="stylesheet" type="text/css" href="./category/category.css">
    <link rel="stylesheet" type="text/css" href="./starScore/starScore.css">
    <link rel="stylesheet" type="text/css" href="./contentList/contentList.css">
    <link rel="stylesheet" type="text/css" href="../common/bottomBar/bottomBar.css">

</head>
<body>
    <!--头部开始-->
    <div class="header">
        <div class="search-bar">
        <div class="bar-location">
            <div class="location-icon"></div>
            <div class="location-text">郑州市</div>
        </div>
        <div class="search-btn">
            <p class="place-holder">鸡翅</p>
        </div>
        </div>
        <img class="banner-img" src="http://xs01.meituan.net/waimai_i/img/bannertemp.e8a6fa63.jpg">
    </div>
    <!--头部结束-->
    <!--类目开始-->
    <div class="category-content clearfix"></div>
    <!--类目结束-->
    <!--商家列表开始-->
    <div class="list-content">
        <h4 class="list-title">
            <span class="title-line"></span>
            <span>附近商家</span>
            <span class="title-line"></span>
        </h4>
        <div class="list-wrap">
            
        </div>
        
    </div>
    <!--商家列表结束-->
    <!--底部栏-->
    <div class="bottom-bar">
    </div>
    <!--底部栏-->
    <script type="text/javascript" src="../lib/jquery.min.js"></script>
    <script type="text/javascript" src="./category/category.js"></script>
    <script type="text/javascript" src="./starScore/starScore.js"></script>
    <script type="text/javascript" src="./contentList/contentList.js"></script>
    <script type="text/javascript" src="../common/bottomBar/bottomBar.js"></script>
</body>
</html>

底部


(function(){


    var itemTmpl = '<a class="$key btn-item" href="$key.html"><div class="tab-icon"></div><div class="btn-name">$text</div></a>';


    function init(){
        var items = [{
            key: 'index',
            text: '首页'
        },{
            key: 'order',
            text: '订单'
        },{
            key: 'my',
            text: '我的'
        }];

        var str = '';

        items.forEach(function(item, index){
            str += itemTmpl.replace('$key',item.key)
                    .replace('$text',item.text);
        });

        $('.bottom-bar').append(str);

        var arr = window.location.pathname.split('/');
        var page = arr[arr.length-1].replace('.html','');

        $('a.'+page).addClass('active');
    }


    init();



})();

类目

(function(){
    // category类目
    var itemTmpl = '<div class="category-item">'+
                        '<img class="item-icon" src=$url />'+
                        '<p class="item-name">$name</p>'+
                    '</div>';

    function initCategory(argument) {
        $.get('../json/head.json', function(data){
            console.log(data);
            var list = data.data.primary_filter.splice(0,8);
            list.forEach(function(item, index){
                var str = itemTmpl.replace('$url',item.url).
                replace('$name',item.name);


                $('.category-content').append(str);

            });
        });
    }


    function addClick(){
        $('.category-content').on('click','.category-item', function(){
            alert(1);
        });
    }


    function init(argument) {
        initCategory();
        addClick();
    }


    init();
})();

contentList


(function(){
    // 商家详情模版
    var itemTmpl = '<div class="r-item-content scale-1px">'+
                        '<img class="item-img" src=$pic_url />'+
                        '$brand'+
                        '<div class="item-info-content">'+
                            '<p class="item-title">$name</p>'+
                            '<div class="item-desc clearfix">'+
                               '<div class="item-score">$wm_poi_score</div>'+
                               '<div class="item-count">月售$monthNum</div>'+
                               '<div class="item-distance">&nbsp;$distance</div>'+
                                '<div class="item-time">$mt_delivery_time&nbsp;|</div>'+
                            '</div>'+
                            '<div class="item-price">'+
                                '<div class="item-pre-price">$min_price_tip</div>'+
                                '$meituanFlag'+
                            '</div>'+
                            '<div class="item-others">'+
                                '$others'+
                            '</div>'+
                        '</div>'+
                    '</div>';

    /**
     * 请求数据
     * @param 
     */
    function getList(){
        $.get('../json/homelist.json', function(data){
            console.log(data);
            var list = data.data.poilist || [];
            initContentList(list);
        });
    }


    /**
     * 渲染是否是新到和品牌标签
     * @param {*} data 
     */
    function getBrand(data) {
        if (data.brand_type) {
            return '<div class="brand brand-pin">品牌</div>';
        } else {
            return '<div class="brand brand-xin">新到</div>';
        }
    }

    /**
     *  渲染月售数量
     * @param {*} data 
     */
    function getMonthNum(data) {
        var num = data.month_sale_num;

        // 大于999采用999+
        if (num > 999) {
            return '999+';
        }

        return num;
    }

    /**
     * 是否需要渲染美团专送tag
     * @param {*} data 
     */
    function getMeituanFlag(data) {

        if(data.delivery_type) {
            return '<div class="item-meituan-flag">美团专送</div>';
        }

        return '';
    }

    /**
     * 渲染商家活动
     * @param {*} data 
     */
    function getOthers(data) {
        var array = data.discounts2;
        var str = '';
        array.forEach((item, index)=>{
            var _str = '<div class="other-info">'+
                            '<img src=$icon_url class="other-tag"/>'+
                            '<div class="other-content">$info</div>'+
                        '</div>';
            _str = _str.replace('$icon_url',item.icon_url)
                   .replace('$info',item.info);


            str = str + _str;
        });

        return str;
    }
    /**
     * 渲染列表
     * @param [*] array 
     */
    function initContentList(list) {


        list.forEach(function(item, index){


            var str = itemTmpl.replace('$pic_url',item.pic_url)
            .replace('$name',item.name)
            .replace('$distance',item.distance)
            .replace('$mt_delivery_time',item.mt_delivery_time)
            .replace('$min_price_tip',item.min_price_tip)


            .replace('$brand',getBrand(item))

            .replace('$monthNum',getMonthNum(item))

            .replace('$meituanFlag',getMeituanFlag(item))
            
            .replace('$others', getOthers(item))

            .replace('$wm_poi_score',new StarScore(item.wm_poi_score).getStars());


            $('.list-wrap').append(str);

        });
    }


    function addClick(){
        $('.category-content').on('click','.category-item', function(){
            alert(1);
        });
    }

    /**
     * @constructor init
     * @description 列表单个组件
     */
    function init(argument) {
        getList();
    }


    init();
})();

样式

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.scale-1px {
    position: relative;
    border: none;
}

.scale-1px:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.two-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}
.hide {
    display: none;
}
* {
    -webkit-tap-highlight-color:transparent;
}

.header {
    position: relative;
}
.banner-img {
    width: 100%;
    height: 4.746667rem;
}
.search-bar {
  width: 100%;
  height: 1.0666666667rem;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.3733333333rem;
}
.search-bar .bar-location {
  margin-right: 0.5333333333rem;
  border-radius: 0.3466666667rem;
  background-color: rgba(0, 0, 0, 0.33);
  height: 0.7466666667rem;
  width: 2.4533333333rem;
}
.search-bar .location-icon {
  display: inline-block;
  width: 0.4rem;
  height: 0.5333333333rem;
  vertical-align: 0.2133333333rem;
  margin-left: 0.16rem;
  background-image: url("../img/locationIcon.png");
  background-size: cover;
}
.search-bar .location-text {
  position: relative;
  display: inline-block;
  font-size: 0.3733333333rem;
  color: #fff;
  vertical-align: 0.32rem;
}
.search-bar .location-text:after {
  content: '';
  display: block;
  position: absolute;
  width: 0.3733333333rem;
  height: 0.3733333333rem;
  background-image: url("../img/arrowIcon.png");
  background-size: cover;
  right: -0.4rem;
  top: -0.0266666667rem;
}
.search-bar .search-btn {
  position: relative;
  width: 4.5333333333rem;
  height: 0.8rem;
  background-color: #fff;
  border-radius: 0.5333333333rem;
}
.search-bar .search-btn:before {
  content: '';
  display: block;
  position: absolute;
  width: 0.3733333333rem;
  height: 0.3733333333rem;
  background-image: url("../img/searchIcon.png");
  background-size: cover;
  top: 0.1866666667rem;
  left: 0.2666666667rem;
}
.search-bar .place-holder {
  color: #a9a9a9;
  font-size: 0.3733333333rem;
  height: 100%;
  line-height: 0.8rem;
  margin-left: 0.7466666667rem;
}
.category-content {
  padding-bottom: 0.2666666667rem;
}
.category-content .category-item {
  float: left;
  width: 25%;
  padding-top: 0.3733333333rem;
  font-size: 0.3466666667rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-content .item-icon {
  width: 1.2533333333rem;
}
.category-content .item-name {
  margin-top: 0.3733333333rem;
}
.star-score .star {
  width: 0.2666666667rem;
  height: 0.2666666667rem;
  float: left;
  background-size: cover;
}
.star-score .fullstar {
  background-image: url("./img/fullstar.png");
}
.star-score .halfstar {
  background-image: url("./img/halfstar.png");
}
.star-score .nullstar {
  background-image: url("./img/gray-star.png");
}
.list-content {
  overflow: hidden;
  padding-bottom: 1.3333333333rem;
}
.list-content .list-title {
  text-align: center;
  font-size: 0.4266666667rem;
  margin-top: 0.3733333333rem;
  margin-bottom: 0.1333333333rem;
}
.list-content .title-line {
  display: inline-block;
  border-bottom: 1px solid #949494;
  height: 0.0266666667rem;
  width: 0.8rem;
  margin-left: 0.1066666667rem;
  margin-right: 0.1066666667rem;
  margin-bottom: 0.1066666667rem;
}

.r-item-content {
  display: flex;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  margin-left: 0.2666666667rem;
  margin-right: 0.2666666667rem;
  color: #656565;
}
.r-item-content:after {
  background-color: #e4e4e4;
}
.r-item-content .item-img {
  width: 2.2933333333rem;
  height: 1.7333333333rem;
  border: 1px solid #e4e4e4;
}
.r-item-content .item-info-content {
  flex: 1;
  margin-left: 0.1866666667rem;
  overflow: hidden;
}
.r-item-content .brand {
  position: absolute;
  left: 0.0266666667rem;
  top: 0.4266666667rem;
  font-size: 0.32rem;
  padding: 0.0533333333rem;
  color: #fff;
}
.r-item-content .brand-pin {
  background-color: #ffa627;
}
.r-item-content .brand-xin {
  background-color: #21c56c;
}
.r-item-content .item-title {
  margin-top: 0.08rem;
  font-size: 0.4266666667rem;
  font-weight: 500;
  color: #333;
}
.r-item-content .item-desc {
  margin-top: 0.3466666667rem;
  font-size: 0.32rem;
}
.r-item-content .item-score {
  float: left;
}
.r-item-content .item-count {
  float: left;
  margin-left: 0.1333333333rem;
}
.r-item-content .item-time {
  float: right;
}
.r-item-content .item-distance {
  float: right;
}
.r-item-content .item-price {
  margin-top: 0.2666666667rem;
  font-size: 0.32rem;
  height: 0.64rem;
}
.r-item-content .item-meituan-flag {
  float: right;
  background-color: #ffd161;
  color: #000;
  padding: 0.08rem;
  border-radius: 0.08rem;
}
.r-item-content .other-info {
  color: #898989;
  margin-top: 0.1866666667rem;
  font-size: 0.32rem;
  display: flex;
}
.r-item-content .other-tag {
  width: 0.3733333333rem;
  height: 0.3733333333rem;
}
.r-item-content .other-content {
  vertical-align: 0.08rem;
  margin-left: 0.08rem;
  height: 0.3733333333rem;
  width: 6.1333333333rem;
}
.r-item-content .item-pre-price {
  float: left;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.3333333333rem;
  display: flex;
  border-top: 1px solid #b6b6b6;
  background-color: rgba(246, 246, 246, 0.95);
}
.bottom-bar .btn-item {
  text-decoration: none;
  flex: 1;
  font-size: 0.2933333333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}
.bottom-bar .btn-item .tab-icon {
  margin-bottom: 0.1066666667rem;
  width: 0.6666666667rem;
  height: 0.6666666667rem;
  background-size: cover;
}
.bottom-bar .btn-item.active {
  color: #000;
}
.bottom-bar .btn-item.my.active .tab-icon {
  background-image: url("./img/myIconActive.png");
}
.bottom-bar .btn-item.my .tab-icon {
  background-image: url("./img/myIcon.png");
}
.bottom-bar .btn-item.order .tab-icon {
  background-image: url("./img/orderIcon.png");
}
.bottom-bar .btn-item.order.active .tab-icon {
  background-image: url("./img/orderIconActive.png");
}
.bottom-bar .btn-item.index .tab-icon {
  background-image: url("./img/homeIcon.png");
}
.bottom-bar .btn-item.index.active .tab-icon {
  background-image: url("./img/homeIconActive.png");
}