淘宝移动端购物详情页

最新推荐文章于 2023-12-31 10:27:11 发布
最新推荐文章于 2023-12-31 10:27:11 发布
阅读量753 收藏 4
点赞数 1 
HTML

 

<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>订单详情</title>
    <link rel="stylesheet" href="dist/Order-details.css">
    <link rel="stylesheet" href="source/base.css">
    <link rel="stylesheet" href="source/config.css">
    <link rel="stylesheet" href="source/index.css">
    <script src="js/flexible.js"></script>
</head>
<body>
    <!-- 顶部导航条         -->
    <div class="navbar-top">
        <a href="#" class="back"></a>
        <h2>订单列表</h2>
        <a href="" class="home"></a>
    </div>
    <!-- 订单搜素 -->
    <div class="order-search">
        <form action="#">
            <i></i>
            <input type="text" placeholder="搜素所有订单">
        </form>
    </div>
    <section class="container">
    <div class="deal-over comment">
            <div class="deal-top com-top">
                <span></span>
                <h4>农夫果院水果超市</h4>
                <span>交易完成</span>
            </div>
            <div class="order-item">
                <div class="item clearfix">
                    <a href="" class="item-pic"><img src="images/sp-01.jpg" alt=""></a>
                    <p class="item-conten">
                        <a href="" class="item-title">[海报畅销]草原情休闲奶酪酸奶条150g/袋</a>
                        <span class="item-color">颜色: 米黄 (香甜型)</span>
                        <span class="item-num">X1</span>
                    </p>
                    <span class="item-price">￥6.80</span>
                </div>
                <div class="item clearfix">
                        <a href="" class="item-pic"><img src="images/sp-02.jpg" alt=""></a>
                        <p class="item-conten">
                            <a href="" class="item-title">[最新上架]进口甜橙，新鲜上市 500克</a>
                            <span class="item-color">颜色: 米黄 (香甜型)</span>
                            <span class="item-num">X1</span>
                        </p>
                        <span class="item-price">￥6.80</span>
                    </div>
            </div>
            <div class="com-total">
                <p>共计3件商品 合计: <span>￥42.80</span></p>
            </div>
            <div class="com-btn">
                    <p><a href="" class="again-buy">再次购买</a><a href="" class="evaluate-now">立即评价</a></p>
            </div>
        </div>
        <div class="wait-buy comment">
                <div class="deal-top com-top">
                        <span></span>
                        <h4>青年菜君半成品蔬菜</h4>
                        <span>等待买家付款</span>
                    </div>
                    <div class="order-item">
                        <div class="item clearfix">
                            <a href="" class="item-pic"><img src="images/sp-03.jpg" alt=""></a>
                            <p class="item-conten">
                                <a href="" class="item-title">[海报畅销]四川智力蔬菜柿子椒</a>
                                <span class="item-color">颜色: 红色,黄色</span>
                                <span class="item-num">X1</span>
                                <i class="return-shop">七天退货</i>
                            </p>
                            <span class="item-price">￥6.80</span>
                        </div>
                    </div>
                    <div class="com-total">
                        <p>共计2件商品 合计: <span>￥13.60</span></p>
                    </div>
                    <div class="com-btn">
                            <p><a href="" class="again-buy">取消订单</a><a href="" class="evaluate-now">付款</a></p>
                    </div>
        </div>
        <div class="deal-close comment">
                <div class="deal-top com-top">
                        <span></span>
                        <h4>凯吉利鲜花</h4>
                        <span>交易关闭</span>
                    </div>
                    <div class="order-item">
                        <div class="item clearfix">
                            <a href="" class="item-pic"><img src="images/sp-04.jpg" alt=""></a>
                            <p class="item-conten">
                                <a href="" class="item-title">香水百合加康乃馨花(精美花篮和礼盒装)</a>
                                <span class="item-color">颜色: 粉色</span>
                                <span class="item-num">X1</span>
                                <i class="return-shop">七天退货</i>
                            </p>
                            <span class="item-price">￥168.00</span>
                        </div>
                    </div>
                    <div class="com-total">
                        <p>共计1件商品 合计: <span>￥168.00</span></p>
                    </div>
                    <div class="com-btn">
                            <p><a href="" class="again-buy">再次购买</a><a href="" class="evaluate-now">删除订单</a></p>
                    </div>
        </div>
        </section>
</body>
</html>

 

CSS

config.css

.hd-top{
    position: relative;
    width: 750/200rem;
    height: 88/200rem;
    background-color: #e6071b;
    border-bottom: 1px solid #A50010;
    span{
        display: block;
        font-size: 30/200rem;
        color: #fff;
        line-height: 88/200rem;
        text-align: center;
    }
    i{
        position: absolute;
        &.arrow-l{
            left: 24/200rem;
            width: 20/200rem;
            height: 88/200rem;
            font-size: 50/200rem;
            color: #fff;
            line-height: 88/200rem;
        }
        &.hd-home{
            position: absolute;
            right: 24/200rem;
            top: 25/200rem;
            width: 40/200rem;
            height: 40/200rem;
            background-image: url(../img/home.png);
            background-size: 40/200rem 40/200rem;
        }
        
       
    }
}
.comment{
    width: 750/200rem; 
    margin-top: 20/200rem;
    .com-top{
        position: relative;
        width: 750/200rem; 
        height: 99/200rem;
        background-color: #fff;
        border-bottom: 1px solid #DADADA;
        >span{
            font-size: 24/200rem;
            position: absolute;
            &:nth-of-type(1){                   
                top: 29/200rem;
                left: 25/200rem;
                width: 36/200rem;
                height: 36/200rem;
                background-image: url(../img/shop.jpg);
                background-size: 36/200rem 36/200rem;
                background-repeat: no-repeat;
            }
            &:nth-of-type(2){
                right: 25/200rem;
                top: 40/200rem;
                color: #e6071b;
            }
        }
        h4{
            line-height: 99/200rem;
            font-size: 26/200rem;
            padding-left: 92/200rem;
        }
    }
    .order-item{
        .item{
            padding: 20/200rem 24/200rem;
            border-bottom: 1px solid #ccc;
            .item-pic{
                width: 186/200rem;
                height: 186/200rem;
                float: left;
                img{
                    display: block;
                    width: 100%;
                }
            }
            .item-conten{
                float: left;
                width: 310/200rem;
                margin-left: 22/200rem;
                margin-top: 12/200rem;
                .item-title{
                    font-size: 28/200rem;
                    display: block;
                    color: #666;
                    /* line-height: 38/200rem; */
                  }
                  .item-color{
                      font-size: 26/200rem;
                      display: block;
                      color: #a6a6a6;
                      margin-top: 15/200rem;
                  }
                  .item-num{
                      font-size: 18/200rem;
                      display: block;
                      margin-top: 12/200rem;
                      color: #919191;
                  }
                  .return-shop{
                      display: block;
                      width: 108/200rem;
                      height: 30/200rem;
                      background-color: #dd2727;
                      color: #fff;
                      font-size: 22/200rem;
                      text-align: center;
                      line-height: 30/200rem;
                  }
            }
            .item-price{
                float: right;
                font-size: 20/200rem;
                color: #666;
                margin-top: 12/200rem;
            }
            
        }
    }
    .com-total{
        height: 86/200rem;
        background-color: #fff;
        line-height: 86/200rem;
        p{
            text-align: right;
            font-size: 24/200rem;
            padding-right: 25/200rem;
        }
    }
    .com-btn{
        height: 109/200rem;
        background-color: #fff;
        border-top: 1px solid #ccc;
        line-height: 109/200rem;
        p{
            font-size: 25/200rem;
            text-align: right;
            padding-right: 25/200rem;
            a{
                display: inline-block;
                height: 48/200rem;
                width: 148/200rem;
                border: 1px solid #d7d7d7;
                line-height: 48/200rem;
                text-align: center;
                border-radius: 8/200rem;
                &:nth-of-type(1){
                    margin-right: 19/200rem;
                }
                &:hover{
                    color: #E5071E;
                    border: 1px solid #E5071E;
                }
            }
        }
    }
}
.you-like{
    width: 750/200rem;
    padding-left: 25/200rem;/* 
    padding-right: 24/200rem; */
    margin-top: 20/200rem;
    padding-bottom: 25/200rem;
    background-color: #fff;
    h4{
        font-size: 32/200rem;
        color: #666666;
        padding-top: 30/200rem;
    }
    .like-item{
        .item{
            float: left;
            width: 220/200rem;
            margin-top: 28/200rem;
            margin-right: 20/200rem;
            a{
                display: block;
                img{
                    display: block;
                    width: 100%;
                }
            }
            p{
                padding-left: 10/200rem;
            }
            .like-i-title{
                margin-top: 26/200rem;
                font-size: 30/200rem;
            }
            .like-i-price{
                font-size: 25/200rem;
                margin-top: 26/200rem;
                color: #e6071b;
                span{
                    font-size: 18/200rem;
                }
            }

        }
    }
}

 

base.css

/*CSS Document*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
html,body{
    font: 20px Helvetica Neue, tahoma, Arial, Verdana,Helvetica,Tahoma,sans-serif "Microsoft YaHei", "Hiragino Sans GB", "\5b8b\4f53";
    background-color: #eee;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
fieldset,
textarea,
blockquote,
p {
    padding: 0;
    margin: 0;
}

table,
td,
tr,
th {
    font-size: 12px;
}

li {
    list-style: none;
}

img {
    vertical-align: top;
    border: 0;
}

ol,
ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 12px;
    font-weight: normal;
}

address,
cite,
code,
em,
th,
i {
    font-weight: normal;
    font-style: normal;
}

*:focus {
    outline: none;
}

.fB {
    font-weight: bold;
}

.f12 {
    font-size: 12px;
}

.f14 {
    font-size: 14px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

a {
    color: #2b2b2b;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    color: #ff3c3c;
    text-decoration: none;
}

a:active {
    color: #ba2636;
}
i,
u {
    font-style: normal;
}
 

Order-details.css

@base:200rem;

//导入样式重置
@import url(resize.less);

//导入头部导航条

@import url(../dist/navbar-top.css);


//订单搜素
.order-search{
    height: 82 / @base;
    width: 750 / @base;

    form{
        position: relative;
        width: 700 / @base;
        margin: 7/@base auto;
        height: 65 / @base;
        border:1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;

        font-size: 24 / @base;

        input{
            width: 100%;
            border:0;
            padding: 18/@base 10/@base;
            padding-left: 62 / @base;

        }
        i{
            position: absolute;
            top:15/ @base;
            left:20/@base;
            width: 30 / @base;
            height: 31/@base;
            background: url(../images/search.png) no-repeat;
            background-size: 30/@base 31/@base;
        }
    }
}

作者：Александр-Саша
来源：CSDN
原文：https://blog.csdn.net/weixin_42400955/article/details/82498821
版权声明：本文为博主原创文章，转载请附上博文链接！

拼命学习ing...
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 手机商品列表页面,HTML - 商品列表项小结（移动端）
weixin_34651473的博客
06-03 2117
前言电商网站中常会以列表的形式展示商品项，这里参照一些电商网站，将通常使用的结构和样式小结如下。商品列表项.png小结：1.在商品项的最外层包裹a标签，便于用户点击查看详情a.item-block {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}2.商品(介绍)标题单行显示，溢出隐藏，超出部分显示省略号"...".item-...
移动端手机详情页html,15个手机详情页设计细节，助你输出高品质页面
weixin_35935264的博客
06-03 2312
15个手机详情页设计细节，助你输出高品质页面8月 6, 2019发表于: 视觉设计.评论Sponsor前言：这是一篇扫盲式的手机详情页的设计细节文章，主要写给0基础的小白设计师的，大佬们笑一笑就好了，当然有错误的地方也恳求指正，不仅能让我学习到知识，还能避免把人带弯。目的：做详情之前得清楚详情页的核心目的，个人认为是展示产品卖点与传递产品信息，形成转化，美观是其次。​所以在制作详情页的时候得时刻记...
淘宝移动端布局简单代码
weixin_30408165的博客
10-11 1500
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /...
html移动端商城
09-27
一个weiui开发的移动端商城，需要的可以下载看看，=VV=
淘宝宝贝详情页设计指南：从构思到实现，打造高转化率的页面
最新发布
Api19970108018的博客
12-31 454
本文将为您提供一份详尽的淘宝宝贝详情页设计指南，帮助您从构思到实现，打造高转化率的页面。通过明确设计目标、构建逻辑框架、运用设计技巧、创意海报设计以及持续优化与测试我们可以打造出具有高转化率的宝贝详情页为店铺带来更多的流量和销量。在开始设计详情页之前，首先要明确设计目标。一个好的详情页应该能够吸引买家的注意，激发他们的购买欲望，并建立起信任感。一个成功的详情页需要遵循一定的逻辑顺序：吸引注意、激发兴趣、建立信任、促成交易。首屏海报是详情页中最重要的部分之一，一个创意十足的海报可以瞬间抓住买家的眼球。
淘宝详情页分发推荐算法总结：用户即时兴趣强化
淘系技术
07-21 7424
本文介绍淘宝详情页全网分发场景的机制。商品详情页是手淘内流量最大的模块之一，它加载了数十亿级商品的详细信息，是用户整个决策过程必不可少的一环。这个区块不仅要承接用户对当前商品充分感知的诉求...
超详细实现淘宝静态页面(附全部代码)
x1037490413的博客
09-12 2万+
文章目录一:基本结构与样式 一:基本结构与样式 1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示 2.考虑的因素有内容,颜色块,间距
淘宝商品信息css+html
qq_37244548的博客
05-15 6679
目标制作:
HTML+CSS实现淘宝首页
热门推荐
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
仿淘宝移动端的静态html5页面(比较全27个页面)
01-03
仿淘宝移动端的静态html5页面，还是比较全的，共有27个页面。 注意只有移动端的网页，没有pc端的。
使用HTML5编写的移动端仿淘宝页面
10-16
使用HTML5编写的安卓移动端仿淘宝页面，基本上一样，下载即用
电商移动端页面模板(基于html5+css，包括主页，商品详情，转账，付款，购物车等页面)
04-09
电商移动端页面模板，基于html5+css，包括主页，商品详情，转账，付款，购物车等页面
商城产品详情网页html
03-03
这是一个JS+CSS+HTML 源码文件，是一个商城产品详情页的模板。
仿淘宝手机触屏版商城静态HTML5页面
05-21
仿淘宝手机触屏版商城静态HTML5页面
移动端购物商城.rar
03-17
html+js+php+mysql
html5移动端仿淘宝界面
01-21
html5移动端仿淘宝界面，商品分类，商品下单 结算，个人信息等等
淘宝手机无线详情页-crx插件
03-15
无线详情页制作一键生成 广州大麦手机无线详情页一键生成浏览器插件 支持语言:中文 (简体)
SSM开发的移动端购物书城.zip
01-25
SSM开发的移动端购物书城
帮我用vue2写一个移动端电商平台商品详情页
03-11
好的，我可以回答这个问题。首先，你需要安装Vue.js和Vue CLI。然后，你可以创建一个新的Vue项目，使用Vue Router来管理路由，并使用Axios来获取数据。在商品详情页中，你可以展示商品的图片、名称、价格、描述等信息，并提供加入购物车、立即购买等功能。你可以使用Vue组件来构建页面，并使用CSS样式来美化页面。希望这些信息能够帮助你完成移动端电商平台商品详情页的开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值