first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/22.html

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../rem.js"></script>
+    <link rel="stylesheet" href="../公共css/clear.css">
+    <link rel="stylesheet" href="../公共css/public.css">
+    <link rel="stylesheet" href="./css/22.css">
+</head>
+
+<body>
+    <div class="header">
+        <img src="../img/22/返回.png" alt="">
+        <span>填写订单</span>
+        <div></div>
+    </div>
+    <div class="content">
+        <div class="shuaxin">
+            <img src="../img/64/朋友圈.png" alt="">
+        </div>
+        <div class="address">
+            <div class="add_l">
+                <div class="add_up">
+                    <span class="name">张晓明</span>
+                    <span>186****0019</span>
+                </div>
+                <div class="add_down">上海市黄浦区中山南路128号千古美城1楼1210室</div>
+            </div>
+            <img src="../img/22/-e-右.png" alt="">
+        </div>
+        <div class="select">
+            <span>选择支付方式</span>
+            <div class="pay">
+                <span>在线支付</span>
+                <img src="../img/22/三个点.png" alt="">
+            </div>
+        </div>
+        <ul id="goodsBox">
+            <li class="goods">
+                <div class="goods_title">
+                    <img class="l" src="../img/22/矢量智能对象.png" alt="">
+                    <span>路易斯女装旗舰店</span>
+                    <img class="r" src="../img/22/-e-右.png" alt="">
+                </div>
+                <ul>
+                    <li class="information">
+                        <img src="../img/22/产品图.png" alt="">
+                        <div class="des">
+                            <p>真丝连衣裙2019春夏新款
+                                杭州大牌气质修……</p>
+                            <div class="up">
+                                <span>颜色：黑白</span>
+                                <span>尺码：L</span>
+                            </div>
+                            <div class="down">
+                                <div class="number">
+                                    ￥<span class="one">160</span>
+                                    <span class="two">.00</span>
+                                </div>
+                                <div class="amount">X1</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                <div class="remarkes">
+                    <p class="three">订单备注</p>
+                    <p class="four">有什么想对商家留言的可以在这里说</p>
+                </div>
+                <div class="cost">
+                    <div class="cost_up">
+                        <p>优惠抵用</p>
+                        <span>-￥5</span>
+                    </div>
+                    <div class="cost_down">
+                        <p>快递费用</p>
+                        <span>免费包邮</span>
+                    </div>
+                </div>
+                <div class="money">
+                    <p>商品金额</p>
+                    <span>￥155.00</span>
+                </div>
+            </li>
+            <li class="goods">
+                <div class="goods_title">
+                    <img class="l" src="../img/22/矢量智能对象.png" alt="">
+                    <span>路易斯女装旗舰店</span>
+                    <img class="r" src="../img/22/-e-右.png" alt="">
+                </div>
+                <ul>
+                    <li class="information">
+                        <img src="../img/22/产品图.png" alt="">
+                        <div class="des">
+                            <p>真丝连衣裙2019春夏新款
+                                杭州大牌气质修……</p>
+                            <div class="up">
+                                <span>颜色：黑白</span>
+                                <span>尺码：L</span>
+                            </div>
+                            <div class="down">
+                                <div class="number">
+                                    ￥<span class="one">160</span>
+                                    <span class="two">.00</span>
+                                </div>
+                                <div class="amount">X1</div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="information">
+                        <img src="../img/22/产品图.png" alt="">
+                        <div class="des">
+                            <p>真丝连衣裙2019春夏新款
+                                杭州大牌气质修……</p>
+                            <div class="up">
+                                <span>颜色：黑白</span>
+                                <span>尺码：L</span>
+                            </div>
+                            <div class="down">
+                                <div class="number">
+                                    ￥<span class="one">160</span>
+                                    <span class="two">.00</span>
+                                </div>
+                                <div class="amount">X1</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+
+
+                <div class="remarkes">
+                    <p class="three">订单备注</p>
+                    <p class="four">有什么想对商家留言的可以在这里说</p>
+                </div>
+                <div class="cost">
+                    <div class="cost_up">
+                        <p>优惠抵用</p>
+                        <span>-￥5</span>
+                    </div>
+                    <div class="cost_down">
+                        <p>快递费用</p>
+                        <span>免费包邮</span>
+                    </div>
+                </div>
+                <div class="money">
+                    <p>商品金额</p>
+                    <span>￥315.00</span>
+                </div>
+            </li> -->
+        </ul>
+
+    </div>
+    <div class="footer">
+        <div class="text">
+            <p>共3件，</p>
+            <p>合计：</p>
+            <p>¥<span>5999.00</span></p>
+        </div>
+        <div class="button">结算(2)</div>
+    </div>
+</body>
+<script>
+
+    function $(className) {
+        var nodeList = document.querySelectorAll(className)
+        if (nodeList.length > 1) {
+            return nodeList
+        } else {
+            return document.querySelector(className)
+        }
+    }
+
+
+
+    var content =$('.content')
+
+
+
+    var startY = 0
+    var distanceY = 0
+
+    //    获取开始的y值
+       content.addEventListener('touchstart',function(e){ 
+            startY = event.targetTouches[0].screenY;
+            // console.log(startY);
+        })
+
+
+    // 监听移动实现跟手动
+        content.addEventListener('touchmove', function(e){
+            var moveY = event.changedTouches[0].screenY;
+            var distanceY = moveY - startY
+            if(distanceY >30 && distanceY< 100){
+                content.style.transform = `translateY(${distanceY}PX)`
+            }
+
+        })
+
+
+
+
+    //    获取结束的y值
+        content.addEventListener('touchend', function(e){
+
+            var endY = event.changedTouches[0].screenY;
+           
+            if(endY > startY){
+                var distanceY = endY - startY
+               
+                if(distanceY > 0 && distanceY < 100){
+                    content.style.transform = `translateY(0PX)`
+                }
+                else if(distanceY > 100){
+                    content.style.transform = `translateY(100PX)`
+                    setTimeout(() =>{
+                        content.style.transform = `translateY(0PX)`
+                    },500)
+
+                }
+            }
+            distance = 0
+        })
+
+
+
+
+</script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/39.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../rem.js"></script>
+    <link rel="stylesheet" href="../公共css/clear.css">
+    <link rel="stylesheet" href="../公共css/public.css">
+    <link rel="stylesheet" href="./css/39.css">
+</head>
+<body>
+    <div class="header">
+        <img class="photo" src="../img/39/扫一扫.png" alt="">
+        <ul class="select">
+            <li class="active" >推荐</li>
+            <li>关注</li>
+            <li>直播</li>
+        </ul>
+        <img class="search" src="../img/39/搜索.png" alt="">
+    </div>
+    <div class="content">
+        <img class="background" src="../img/39/meinv.png" alt="">
+        <div class="model"></div>
+        
+        <div class="title">
+            <div class="name">
+                <img src="../img/39/店铺(1).png" alt="">
+                <p>美林美妆合肥店&nbsp&nbsp&nbsp>7KM</p>
+            </div>
+            <div class="goods">
+                <img class="picture" src="../img/39/4832198.png" alt="">
+                <div class="goods_name">
+                    <p class="des">夏季网纱半身裙中长款纱……</p>
+                    <div class="price">
+                        <p class="number" >¥68.00</p>
+                        <div class="text">
+                            <p>精选</p>
+                        </div>
+                    </div>
+                    <p class="all">已卖1020</p>
+                    <div class="icon">
+                        <img src="../img/39/购物车满.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="music">
+            <img src="../img/39/音符.png" alt="">
+            <p>你像花儿一样美（DJ）版</p>
+        </div>
+        <ul class="menu">
+            <li class="user">
+                <img class="top" src="../img/39/501099714.png" alt="">
+                <div class="add">
+                    <img src="../img/39/加号(1).png" alt="">
+                </div>
+            </li>
+            <li class="like">
+                <img src="../img/39/心.png" alt="">
+                <p>71.1W</p>
+            </li>
+            <li class="share">
+                <img src="../img/39/分享.png" alt="">
+                <p>分享</p>
+            </li>
+            <li class="comment">
+                <img src="../img/39/评论.png" alt="">
+                <p>评论</p>
+            </li>
+            <li class="shopping">
+                <img src="../img/39/5购物袋2.png" alt="">
+                <p>购物袋</p>
+            </li>
+        </ul>
+    </div>
+    <ul class="footer">
+        <li class="active">首页</li>
+        <li>好友</li>
+        <li>圈子</li>
+        <li>购物车</li>
+        <li>我的</li>
+    </ul>
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/64.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../rem.js"></script>
+    <link rel="stylesheet" href="../公共css/clear.css">
+    <link rel="stylesheet" href="../公共css/public.css">
+    <link rel="stylesheet" href="./css/64.css">
+</head>
+
+<body>
+    <div class="header">
+        <div class="header_l">
+            <img src="../img/64/左.png" alt="">
+            <img src="../img/64/店铺头像.png" alt="">
+        </div>
+        <div class="header_m">
+            <p>新手体验店</p>
+            <div class="status">营业中</div>
+        </div>
+        <div class="header_r">
+            <div class="message">
+                <img src="../img/64/消息拷贝.png" alt="">
+                <p>1</p>
+            </div>
+            <img src="../img/64/设置.png" alt="">
+        </div>
+    </div>
+    <div class="content">
+        <ul class="fans">
+            <li>
+                <p class="number">0</p>
+                <p class="text">关注人数</p>
+            </li>
+            <li>
+                <p class="number">1</p>
+                <p class="text">商品数</p>
+            </li>
+            <li>
+                <p class="number">0</p>
+                <p class="text">粉丝数</p>
+            </li>
+            <li>
+                <p class="number">0</p>
+                <p class="text">浏览量</p>
+            </li>
+        </ul>
+        <div class="living">
+            <div class="living_l">
+                <img src="../img/64/直播.png" alt="">
+                <p>我要直播</p>
+            </div>
+            <div class="living_r">
+                <a href="">去开启直播</a>
+                <img src="../img/64/右.png" alt="">
+            </div>
+        </div>
+        <div class="identity">
+            <p>店铺资质认证</p>
+            <ul>
+                <li>
+                    <img src="../img/64/营业执照.png" alt="">
+                    <p class="text">营业执照</p>
+                    <p class="test">已认证</p>
+                </li>
+                <li>
+                    <img src="../img/64/身份证.png" alt="">
+                    <p class="text">身份证</p>
+                    <p class="test">未认证</p>
+                </li>
+                <li>
+                    <img src="../img/64/银行卡_.png" alt="">
+                    <p class="text">银行卡</p>
+                    <p class="test">未认证</p>
+                </li>
+            </ul>
+        </div>
+        <div class="manage">
+            <p>店铺管理</p>
+            <ul>
+                <li>
+                    <img src="../img/64/商品.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="../img/64/朋友圈.png" alt="">
+                    <p>朋友圈管理</p>
+                </li>
+                <li>
+                    <img src="../img/64/资金.png" alt="">
+                    <p>资金管理 </p>
+                </li>
+                <li>
+                    <img src="../img/64/数据.png" alt="">
+                    <p>数据管理</p>
+                </li>
+                <li>
+                    <img src="../img/64/店铺.png" alt="">
+                    <p>店铺信息</p>
+                </li>
+                <li>
+                    <img src="../img/64/粉丝.png" alt="">
+                    <p>粉丝管理</p>
+                </li>
+                <li>
+                    <img src="../img/64/运费模板.png" alt="">
+                    <p>运费管理</p>
+                </li>
+                <li>
+                    <img src="../img/64/三角形.png" alt="">
+                    <p>视频管理</p>
+                </li>
+                <li>
+                    <img src="../img/64/店铺预览.png" alt="">
+                    <p>店铺预览</p>
+                </li>
+                <li>
+                    <img src="../img/64/订单.png" alt="">
+                    <p>订单管理</p>
+                </li>
+
+            </ul>
+        </div>
+        <div class="market">
+            <p>店铺营销</p>
+            <ul>
+                <li>
+                    <img src="../img/64/优惠券.png" alt="">
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <img src="../img/64/拼团.png" alt="">
+                    <p>拼团</p>
+                </li>
+                <li>
+                    <img src="../img/64/秒杀02.png" alt="">
+                    <p>秒杀</p>
+                </li>
+                <li>
+                    <img src="../img/64/积分.png" alt="">
+                    <p>积分充值</p>
+                </li>
+            </ul>
+        </div>
+    </div>
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/68.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../rem.js"></script>
+    <link rel="stylesheet" href="../公共css/clear.css">
+    <link rel="stylesheet" href="../公共css/public.css">
+    <link rel="stylesheet" href="./css/68.css">
+</head>
+
+<body>
+    <div class="background">
+        <img src="../img/68/商家店铺.png" alt="">
+        <div class="popover">
+            <div class="content">
+                <div class="card">
+                    <img src="../img/68/-e-背景.png" alt="">
+                    <div class="change">
+                        <img src="../img/68/-e-修改icon.png" alt="">
+                    </div>
+                    <div class="information">
+                        <img src="../img/68/-e-头像.png" alt="">
+                        <div class="name">新手体验店</div>
+                        <div class="address">
+                            <img src="../img/68/-e-定位.png" alt="">
+                            <p>广东东莞厂家直供一层&nbsp30号</p>
+                        </div>
+                        <div class="code">
+                            <img src="../img/68/-e-二维码.png" alt="">
+                            <p>长按二维码马上逛店铺</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul class="share">
+                <li>
+                    <img src="../img/68/-e-朋友圈.png" alt="">
+                    <p>朋友圈</p>
+                </li>
+                <li>
+                    <img src="../img/68/-e-微信好友.png" alt="">
+                    <p>微信好友</p>
+                </li>
+                <li>
+                    <img src="../img/68/-e-更多分享.png" alt="">
+                    <p>更多分享</p>
+                </li>
+                <li>
+                    <img src="../img/68/-e-保存模板.png" alt="">
+                    <p>保存模板</p>
+                </li>
+            </ul>
+        </div>
+    </div>
+    </div>
+
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/72.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../rem.js"></script>
+    <link rel="stylesheet" href="../公共css/clear.css">
+    <link rel="stylesheet" href="../公共css/public.css">
+    <link rel="stylesheet" href="./css/72.css">
+</head>
+<body>
+    <div class="title">
+        <img class="title_l" src="../img/72/-e-(.png" alt="">
+        <p>订单管理</p>
+        <img class="title_r" src="../img/72/-e-搜索.png" alt="">
+    </div>
+    <div class="menu">
+        <ul>
+            <li class="active">
+                <p class="text">全部</p>
+                <p class="number">(624)</p>
+            </li>
+            <li>
+                <p class="text">待付款</p>
+                <p class="number">(0)</p>
+            </li>
+            <li>
+                <p class="text">待成团</p>
+                <p class="number">(0)</p>
+            </li>
+            <li>
+                <p class="text">待发货</p>
+                <p class="number">(0)</p>
+            </li>
+            <li>
+                <p class="text">待收货</p>
+                <p class="number">(0)</p>
+            </li>
+            <li>
+                <p class="text">待收货</p>
+                <p class="number">(0)</p>
+            </li>
+        </ul>
+        <img src="../img/72/-e-下.png" alt="">
+    </div>
+    <ul class="content">
+        <li>
+            <div class="store">
+                <div class="me">
+                    <img src="../img/72/买家头像.png" alt="">
+                    <p>何坚（yl-feg5940）</p>
+                </div>
+                <p>交易取消</p>
+            </div>
+            <ul class="goods">
+                <li>
+                    <img src="../img/72/-e-产品图.png" alt="">
+                    <div class="des">
+                        <div class="name">欧美风羽绒服</div>
+                        <span class="tips">48小时包退换</span>
+                        <p>货号：0001</p>
+                        <p>颜色：如图色，尺码：均码</p>
+                    </div>
+                </li>
+            </ul>
+            <div class="date">
+                <div class="time">2018-11-26</div>
+                <p>共1款，1件商品 合计：</p>
+                <p>¥100.00</p>
+                <p>（运费0.00）</p>
+            </div>
+        </li>
+
+        <li>
+            <div class="store">
+                <div class="me">
+                    <img src="../img/72/买家头像.png" alt="">
+                    <p>何坚（yl-feg5940）</p>
+                </div>
+                <p>待付款</p>
+            </div>
+            <ul class="goods">
+                <li>
+                    <img src="../img/72/-e-产品图.png" alt="">
+                    <div class="des">
+                        <div class="name">欧美风羽绒服</div>
+                        <span class="tips">48小时包退换</span>
+                        <p>货号：0001</p>
+                        <p>颜色：如图色，尺码：均码</p>
+                    </div>
+                </li>
+            </ul>
+            <div class="date">
+                <div class="time">2018-11-26</div>
+                <p>共1款，1件商品 合计：</p>
+                <p>¥100.00</p>
+                <p>（运费0.00）</p>
+            </div>
+        </li>
+
+        <li>
+            <div class="store">
+                <div class="me">
+                    <img src="../img/72/买家头像.png" alt="">
+                    <p>何坚（yl-feg5940）</p>
+                </div>
+                <p>已完成</p>
+            </div>
+            <ul class="goods">
+                <li>
+                    <img src="../img/72/-e-产品图.png" alt="">
+                    <div class="des">
+                        <div class="name">欧美风羽绒服</div>
+                        <span class="tips">48小时包退换</span>
+                        <p>货号：0001</p>
+                        <p>颜色：如图色，尺码：均码</p>
+                    </div>
+                </li>
+            </ul>
+            <div class="date">
+                <div class="time">2018-11-26</div>
+                <p>共1款，1件商品 合计：</p>
+                <p>¥100.00</p>
+                <p>（运费0.00）</p>
+            </div>
+        </li>
+    </ul>
+     
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/22.css

@@ -0,0 +1,327 @@
+
+
+
+.header {
+    padding: 0 0.3rem;
+    height: 0.9rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: white;
+    font-weight: 900;
+    box-sizing: border-box;
+    z-index: 999;
+    background: white;
+}
+
+.header img {
+    width: 0.2rem;
+    height: 0.33rem;
+}
+
+.header span {
+    font-size: 0.34rem;
+    color: #333333;
+}
+
+.content {
+    width: 100%;
+    box-sizing: border-box;
+    transition: transform ease 0.3s;
+}
+.shuaxin{
+    align-items: center;
+    height: 0.9rem;
+    display: flex;
+    justify-content: center;
+}
+.shuaxin img{
+    width: 0.3rem;
+    height: 0.3rem;
+}
+
+.address {
+    border-top: 0.01rem solid #f2f2f2;
+    background-image: url("../../img/22/yellow-red-block.png");
+    width: 100%;
+    height: 1.26rem;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+    box-sizing: border-box;
+
+}
+
+.add_l {}
+
+.add_up {
+    font-size: 0.3rem;
+    color: #333333;
+    margin-top: 0.12rem;
+    margin-bottom: 0.15rem;
+}
+
+.add_up .name {
+    margin-right: 0.52rem;
+    font-weight: 900;
+
+}
+
+.add_down {
+    font-size: 0.24rem;
+    color: #333333;
+    margin-bottom: 0.2rem;
+}
+
+.address img {
+    width: 0.14rem;
+    height: 0.26rem;
+}
+
+.select {
+    border-top: 0.19rem solid #f2f2f2;
+    height: 1.18rem;
+    width: 100%;
+    font-size: 0.28rem;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: white;
+    border-bottom: 0.16rem solid #f2f2f2;
+    padding-left: 0.26rem;
+    box-sizing: border-box;
+}
+
+.select .pay {
+    padding-right: 0.44rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+}
+
+.pay img {
+    padding-left: 0.07rem;
+    width: 0.31rem;
+    height: 0.06rem;
+}
+
+.goods {
+    border-bottom: 0.01rem solid #f2f2f2;
+}
+
+.goods_title {
+    height: 0.62rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 0.01rem solid #f2f2f2;
+}
+
+.goods_title .l {
+    width: 0.24rem;
+    height: 0.22rem;
+    margin-left: 0.24rem;
+    margin-right: 0.06rem;
+}
+
+.goods_title span {
+    font-size: 0.26rem;
+    color: #333333;
+    margin-right: 0.16rem;
+    margin: 0.2rem 0.16rem 0.17rem0;
+}
+
+.goods_title .r {
+    width: 0.1rem;
+    height: 0.19rem;
+}
+
+.information {
+    height: 2.22rem;
+    display: flex;
+    align-items: center;
+}
+
+.information img {
+    width: 2rem;
+	height: 1.65rem;
+    margin-left: 0.24rem;
+    margin-right: 0.36rem;
+}
+
+.information .des {
+    width: 100%;
+}
+
+.des p {
+    font-size: 0.28rem;
+    color: #333333;
+    width: 3.5rem;
+    margin-bottom: 0.08rem;
+}
+
+.des .up {
+    font-size: 0.2rem;
+    color: #999999;
+    margin-bottom: 0.12rem;
+}
+
+.des .down{
+    color: #ea4e3d;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+.des .number {
+    font-size: 0.2rem;
+
+}
+.des .number .one{
+font-size: 0.34rem;
+}
+.des .number .two{
+    font-size: 0.24rem;
+}
+.des .amount {
+    font-size: 0.2rem;
+    color: #999999;
+    margin-right: 0.76rem;
+    transform: scale(0.9);
+}
+
+.remarkes{
+    width: 100%;
+    height: 0.88rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 0.3rem;
+    border-top: 0.01rem solid #f2f2f2;
+    border-bottom: 0.01rem solid #f2f2f2;
+    box-sizing: border-box;
+}
+.remarkes .three{
+    font-size: 0.3rem;
+    color: #333333;
+    margin-right: 0.31rem;
+}
+.remarkes .four{
+    font-size: 0.26rem;
+    color: #aaaaaa;
+}
+
+.cost{
+    margin-left: 0.3rem;
+    margin-right: 0.26rem;
+}
+.cost_up{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.22rem;
+    margin-bottom: 0.24rem;
+}
+.cost_up p{
+    font-size: 0.24rem;
+    color: #333333;
+}
+.cost_up span{
+    font-size: 0.24rem;
+    color: #f09c48;
+}
+.cost_down{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.16rem;
+}
+.cost_down p{
+    font-size: 0.24rem;
+    color: #333333;
+}
+.cost_down span{
+    font-size: 0.24rem;
+    color: #ea4e3d;
+}
+
+.money{
+    border-top: 0.01rem solid #f2f2f2;
+    border-bottom: 0.16rem solid #f2f2f2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.84rem;
+    padding-left: 0.31rem;
+    padding-right: 0.26rem;
+    box-sizing: border-box;
+}
+.money p{
+    font-size: 0.3rem;
+    color: #333333;
+}
+.money span{
+    font-size: 0.34rem;
+    color: #ea4e3d;
+}
+
+.footer{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 1rem;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    background-color: white;
+}
+.text{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.text p:first-child{
+    font-size: 0.26rem;
+    color: #c6c6c6;
+}
+.text p:nth-child(2){
+    font-size: 0.26rem;
+    color: #999999;
+    margin-right: 0.27rem;
+}
+
+.text p:last-child{
+    font-size: 0.24rem;
+    color: #000000;
+}
+
+.text span{
+    font-size: 0.3rem;
+    color: #000000;
+    margin-left: 0.06rem;
+}
+
+.footer .button{
+    font-size: 0.28rem;
+    color: #ffffff;
+    width: 1.92rem;
+    height: 0.66rem;
+    background-color: #5697f4;
+	border-radius: 0.33rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0.42rem;
+    margin-right: 0.24rem;
+}
+
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/39.css

@@ -0,0 +1,324 @@
+body{
+    width: 100%;
+}
+
+.header{
+    width: 100%;
+    height: .9rem;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1;
+    padding: 0 0.37rem;
+    box-sizing: border-box;
+}
+
+
+.header .photo{
+    width: 0.42rem;
+	height: 0.42rem;
+}
+
+.header .select{
+    display: flex;
+    justify-content: space-between;
+    width: 2.5rem;
+}
+.select li{
+    font-size: 0.28rem;
+    color: #fefefe;
+    text-shadow: 0.01rem 0.01rem white;
+    letter-spacing: 0.04rem;
+}
+.select .active{
+    position: relative;
+}
+.select .active::after{
+    content: "";
+    position: absolute;
+    height: 0.03rem;
+    width: 0.4rem;
+    background: white;
+    bottom: -0.12rem;
+    left: calc((100% - 0.4rem) / 2);
+}
+.header .search{
+    width: 0.43rem;
+	height: 0.43rem;
+}
+
+.content{
+    position: relative;
+    height: calc(100vh - 1rem);
+}
+.content .background{
+    width: 100%;
+    height: calc(100vh - 1rem);
+    object-fit: cover;
+}
+.model{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #0000008c;
+}
+.content .title{
+    z-index: 1;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    bottom: 0.65rem;
+    left: 0.3rem;
+}
+.title .name{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 0.22rem;
+}
+.name img{
+    width: 0.28rem;
+	height: 0.26rem;
+    margin-right: 0.1rem;
+    margin-left: 0.07rem;
+
+}
+.name p{
+    font-size: 0.26rem;
+    color: #ffc600;
+}
+.title .goods{
+    width: 5.85rem;
+    height: 1.68rem;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+}
+.goods .picture{
+    width: 1.48rem;
+	height: 1.48rem;
+    margin-left: 0.09rem;
+
+}
+.goods_name{
+    position: relative;
+    flex: 1;
+    margin-left: 0.15rem;
+}
+.goods_name p{}
+.goods_name .des{
+    font-size: 0.28rem;
+    color: #333333;
+    margin-bottom: 0.1rem;
+}
+
+.goods_name .price{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 0.18rem;
+}
+.price .number{
+    font-size: 0.28rem;
+    color: #333333;
+}
+.price .text{
+    width: 0.6rem;
+	height: 0.24rem;
+	background-color: #ea4e3d;
+	border-radius: 0.12rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0.03rem;
+}
+.price .text p{
+    font-size: 0.2rem;
+    color: #fffefe;
+    transform: scale(0.8);
+}
+.goods_name .all{
+    font-size: 0.2rem;
+	color: #626262;
+    margin-top: 0.1rem;
+}
+.goods_name .icon{
+	width: 0.46rem;
+	height: 0.46rem;
+	background-color: #333333;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    right: 0.34rem;
+
+}
+.goods_name .icon img{
+    width: 0.27rem;
+	height: 0.27rem;
+}
+
+
+
+
+
+
+
+
+.music{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: absolute;
+    bottom: 0.13rem;
+    left: 0.3rem;
+
+}
+.music img{
+    width: 0.27rem;
+	height: 0.28rem;
+    margin-right: 0.13rem;
+}
+.music p{
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+
+.content .menu{
+    position: absolute;
+    z-index: 1;
+    bottom: 0.14rem;
+    right: 0.19rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 0;
+}
+
+.user{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+}
+.user .top{
+    width: 0.96rem;
+	height: 0.97rem;
+    border: 0.03rem solid #ffffff;
+    border-radius: 50%;
+}
+
+.user .add{
+    width: 0.34rem;
+	height: 0.33rem;
+    border-radius: 50%;
+	background-color: #ea4e3d;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 0.3rem;
+    bottom: -7px;
+}
+.user .add img{
+    width: 0.23rem;
+	height: 0.23rem;
+}
+.menu p{
+    font-size: 0.2rem;
+    color: #ffffff;
+}
+
+.menu .like{
+    text-align: center;
+}
+.menu .like img{
+    width: 0.68rem;
+	height: 0.63rem;
+    margin-top: 0.35rem;
+}
+.menu .like p{
+
+}
+
+
+.menu .share{
+    text-align: center;
+}
+.menu .share img{
+    width: 0.67rem;
+	height: 0.8rem;
+    margin-bottom: 0.08rem;
+    margin-top: 0.2rem;
+}
+.menu .share p{}
+
+
+.menu .comment{
+    text-align: center;
+}
+.menu .comment img{
+    width: 0.7rem;
+	height: 0.7rem;
+    margin-top: 0.2rem;
+}
+.menu .comment p{
+    margin-top: 0.13rem;
+}
+
+
+.menu .shopping{
+    text-align: center;
+}
+.menu .shopping img{
+    width: 0.61rem;
+	height: 0.61rem;
+    margin-top: 0.28rem;
+}
+.menu .shopping p{
+    margin-top: 0.08rem;
+}
+.footer{
+    height: 1rem;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    background-color: #141414;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.39rem;
+    padding-right: 0.54rem;
+    box-sizing: border-box;
+    letter-spacing: 0.03rem;
+    z-index: 1;
+}
+
+.footer .active{
+    font-size: 0.3rem;
+    color: #ffffff;
+    position: relative;
+}
+.footer .active::after{
+    content: "";
+    position: absolute;
+    width: 0.51rem;
+    height: 0.04rem;
+    background: white;
+    bottom: -0.24rem;
+    left: calc((100% - 0.51rem) / 2);
+}
+.footer li {
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/64.css

@@ -0,0 +1,286 @@
+body {
+    width: 100%;
+    background-color: #f2f3f7;
+    padding: 0 0.24rem;
+    box-sizing: border-box;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: .9rem;
+    margin-bottom: 0.24rem;
+}
+
+.header_l {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header_l img:first-child {
+    width: 0.2rem;
+    height: 0.38rem;
+    margin-right: 0.3rem;
+}
+
+.header_l img:last-child {
+    width: 0.48rem;
+    height: 0.48rem;
+}
+
+.header_m {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header_m p {
+    font-size: 0.28rem;
+    color: #000000;
+}
+
+.header_m .status {
+    background-color: #3b75e2;
+    border-radius: 0.05rem;
+    font-size: 0.2rem;
+    color: #ffffff;
+    margin-left: 0.02rem;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    transform: scale(0.8);
+    padding: .04rem 0.1rem;
+}
+
+
+.header_r {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.message img {
+    width: 0.42rem;
+    height: 0.35rem;
+
+}
+
+.message p {
+    font-size: 0.2rem;
+    color: #ffffff;
+    position: absolute;
+    top: -0.14rem;
+    right: -0.14rem;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background-color: #ea4e3d;
+    text-align: center;
+    line-height: 0.25rem;
+}
+
+.header_r img:last-child {
+    width: 0.37rem;
+    height: 0.36rem;
+    margin-left: 0.38rem;
+}
+
+
+.content {}
+
+.fans {
+    width: 7.02rem;
+	height: 1.8rem;
+    background-image: url("../../img/64/图层1.png");
+    background-size: cover;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.37rem;
+    box-sizing: border-box;
+    margin-bottom: 0.24rem;
+}
+
+
+
+.fans li {
+    color: #ffffff;
+    text-align: center;
+}
+
+.fans .number {
+    font-size: 0.34rem;
+}
+
+.fans .text {
+    font-size: 0.24rem;
+    margin-top: 0.3rem;
+}
+
+
+.living{
+    width: 100%;
+	height: 0.78rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.19rem;
+    box-sizing: border-box;
+    margin-bottom: 0.24rem;
+}
+.living_l{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.living_l img{
+    width: 0.41rem;
+	height: 0.39rem;
+    margin-right: 0.09rem;
+}
+.living_l p{
+    font-size: 0.32rem;
+    color: #1a1a1a;
+}
+.living_r{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.living_r a{
+    font-size: 0.28rem;
+	color: #0079f1;
+    margin-right: 0.11rem;
+}
+.living_r img{
+    width: 0.12rem;
+	height: 0.21rem;
+}
+
+
+
+.identity{
+    width: 100%;
+	height: 2.75rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    padding: 0.28rem 0.34rem;
+    box-sizing: border-box;
+    margin-bottom: 0.23rem;
+}
+
+.identity > p{
+    font-weight: 600;
+    font-size: 0.3rem;
+    color: #010101;
+    letter-spacing: 0.015rem;
+}
+.identity ul{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.identity li img{
+    width: 0.6rem;
+    margin-top: 0.3rem;
+}
+.identity li{
+    text-align: center;
+}
+.identity .text{
+    font-size: 0.24rem;
+    color: #333333;
+    margin-top: 0.19rem;
+    margin-bottom: 0.08rem;
+}
+.identity .test{
+    font-size: 0.22rem;
+    color: #e93323;
+}
+.identity ul li:first-child .test{
+    color: #abb1bc;
+}
+
+
+
+.manage{
+    width: 100%;
+	height: 4.02rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    padding: 0.36rem 0.34rem;
+    box-sizing: border-box;
+    margin-bottom: 0.24rem;
+}
+.manage > p{
+    font-weight: 600;
+    font-size: 0.3rem;
+    color: #010101;
+    letter-spacing: 0.015rem;
+    margin-bottom: 0.48rem;
+}
+.manage ul{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.manage li{
+    width: calc(100% / 5);
+    text-align: center;
+}
+.manage li img{
+    height: 0.45rem;
+
+}
+
+.manage li p{
+    font-size: 0.24rem;
+    color: #333333;
+    margin-top: 0.3rem;
+    margin-bottom: 0.3rem;
+}
+
+.market{
+    width: 100%;
+	height: 2.51rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    padding: 0.34rem 0.34rem;
+    box-sizing: border-box;
+    margin-bottom: 0.56rem;
+}
+.market > p{
+    font-weight: 600;
+    font-size: 0.3rem;
+    color: #010101;
+    letter-spacing: 0.015rem;
+    margin-bottom: 0.48rem;
+}
+.market ul{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.market li{
+    text-align: center;
+}
+.market li img{
+    height: 0.5rem;
+}
+.market li p{
+    font-size: 0.24rem;
+    color: #333333;
+    margin-top: 0.3rem;
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/68.css

@@ -0,0 +1,131 @@
+.background{
+    width: 100%;
+    height: 100vh;
+    /* overflow-y溢出了元素的内容区是否剪辑 */
+    /* auto内容如果溢出框，则应该提供滚动机制  */
+    overflow-y: auto;
+}
+.background img{
+    width: 100%;
+}
+
+/* 遮罩 */
+.popover{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgb(0 0 0 / 83%);
+}
+
+
+.content{
+    position: absolute;
+    left: 0.75rem;
+    right: 0.75rem;
+    top: 2.05rem;
+}
+.content .card{
+    width: 6rem;
+	height: 7rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    position: relative;
+}
+.card > img{
+    width: 6rem;
+	height: 4.57rem;
+    position: absolute;
+    z-index: 1;
+}
+.card .change{
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    right: 1rem;
+    top: 0.3rem;
+}
+.card .change img{
+    width: 0.28rem;
+	height: 0.29rem;
+}
+.card .change p{
+    font-size: 0.26rem;
+    color: #ffffff;
+}
+.card .information{
+    position: relative;
+    text-align: center;
+    z-index: 2;
+}
+.information > img{
+    width: 1.08rem;
+	height: 1.08rem;
+    margin-top: 1.64rem;
+    margin-bottom: 0.51rem;
+}
+.information .name{
+    font-size: 0.28rem;
+    color: #ffffff;
+    margin-bottom: 0.26rem;
+}
+
+
+.information .address{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+}
+.address img{
+    width: 0.18rem;
+	height: 0.24rem;
+}
+.address p{
+    font-size: 0.24rem;
+    color: #ffffff;
+    margin-left: 0.13rem;
+}
+
+
+
+.card .code{
+    position: relative;
+    z-index: 2;
+}
+.card .code img{
+    width: 1.95rem;
+	height: 1.95rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.1rem;
+}
+.card .code p{
+    font-size: 0.28rem;
+    color: #333333;
+}
+
+
+.popover .share{
+    position: absolute;
+    width: 100%;
+    bottom: 0.28rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.popover .share li{
+    text-align: center;
+}
+.popover .share img{
+    width: 1.08rem;
+	height: 1.08rem;
+}
+.popover .share p{
+    font-size: 0.28rem;
+    color: #ffffff;
+    margin-top: 0.2rem;
+}
+
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/72.css

@@ -0,0 +1,179 @@
+body{
+    background-color: #efeff4;
+}
+.title{
+    background-color: #ffffff;
+    width: 100%;
+    height: .9rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 0.3rem;
+    padding-right: 0.41rem;
+    box-sizing: border-box;
+}
+.title_l{
+	width: 0.19rem;
+	height: 0.34rem;
+}
+.title p{	
+    font-size: 0.34rem;
+    color: #333333;
+    font-weight: 600;
+}
+.title_r{
+	width: 0.35rem;
+	height: 0.35rem;
+}
+
+.menu{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    margin-bottom: 0.2rem;
+}
+
+.menu ul{
+    flex: 1;
+    height: 1.66rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: scroll;
+
+}
+.menu li{
+    width: 21%;
+    flex: none;
+    text-align: center;
+	color: #666666;
+}
+
+.menu .active{
+    color: #357ef4 !important;
+    position: relative;
+}
+.menu .active::after{
+    content: "";
+    position: absolute;
+    bottom: -22px;
+    left: calc((100% - 1.29rem)/2);
+    width: 1.29rem;
+    height: 0.05rem;
+    background-color: #357ef4;
+}
+.menu .text{
+    font-size: 0.29rem;
+}
+.menu .number{
+    font-size: 0.24rem;
+}
+.menu img{
+    width: 0.24rem;
+	height: 0.13rem;
+}
+
+
+
+.content > li{
+	width: 7.01rem;
+	height: 4.11rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    margin: 0 0.24rem;
+    margin-bottom: 0.18rem;
+}
+
+.store{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 0.39rem;
+}
+.store .me{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 0.27rem;
+    padding-bottom: 0.27rem;
+}
+.me img{
+	width: 0.71rem;
+	height: 0.71rem;
+
+}
+.me p{
+    margin-left: 0.14rem;
+    font-size: 0.3rem;
+    color: #2c2c2c !important;
+}
+.store p{
+	font-size: 0.28rem;
+    color: #f09c48;
+}
+
+
+.content{}
+.content .goods{
+    margin-left: 0.34rem;
+    margin-top: 0.2rem;
+}
+.content .goods li{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.content .goods li img{
+    width: 1.6rem;
+	height: 1.6rem;
+}
+.content li .des{
+    margin-left: 0.18rem;
+}
+.content li .des .name{
+    font-size: 0.3rem;
+    color: #333333;
+    margin-bottom: 0.1rem;
+}
+.content li .des .tips{
+    width: 100%;
+	height: 0.24rem;
+	background-color: #fef6ee;
+    font-size: 0.2rem !important;
+    color: #f09c48 !important;
+    padding: 0.02rem 0.09rem 0.03rem 0.06rem;
+}
+
+.content li .des p{
+    font-size: 0.24rem;
+    color: #959595;
+    margin-top: 0.08rem;
+}
+
+
+.content .date{
+    display: flex;
+    align-items: center;
+    margin-top: 0.53rem;
+    margin-left: 0.34rem;
+}
+.date .time{
+    font-size: 0.24rem;
+    color: #959595;
+}
+.date p:nth-child(2){
+    font-size: 0.24rem;
+    color: #333333;
+    margin-left: 0.42rem;
+}
+.date p:nth-child(3){
+    font-size: 0.24rem;
+    color: #ea4e3d;
+}
+.date p:last-child{
+    font-size: 0.2rem;
+    color: #959595;
+}
+