vue+css实现手机端移动端拼团砍价分享页面代码-html代码-BFW代码库

代码语言：html

代码描述：vue+css实现手机端移动端拼团砍价分享页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>砍价</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
    body{width: 100%;overflow-x: hidden;background: url(//repo.bfw.wiki/bfwrepo/images/app/kanjia/bg.jpg) top center no-repeat #fff;background-size: 100% auto;}
    img{vertical-align: middle;max-width: 100%;}
    .layui-m-layerchild{width: 80%!important;}
    .top-bar{width: 100%;height: .88rem;line-height: .88rem;text-align: center;position: relative;font-size: .38rem;color: #333333;margin-top: .2rem;}
    .top-bar a{width: .5rem;height: .88rem;position: absolute;top: 0;left: .3rem;background: url(//repo.bfw.wiki/bfwrepo/images/app/kanjia/icon-left.png) left center no-repeat;background-size: .19rem auto;z-index: 2;}
    .container{width: 100%;margin-top: 5.25rem;background: #fff;border-radius: .8rem .8rem 0 0;position: relative;padding: .75rem .45rem .4rem .45rem;}
    .container .head{position: absolute;top: -0.55rem;left: 50%;transform: translate(-50%);}
    .container .head img{width: 1.19rem;height: 1.19rem;border-radius: 100%;box-shadow: 0 0 .15rem rgba(255,255,255,.3);}
    .container .desc{font-size:.28rem;color:#666666;text-align: center;line-height: .38rem;}
    /* 商品 */
    .container .goods{width: 100%;padding: .2rem;padding-bottom: .1rem;background: #f9eed6;display: flex;justify-content: space-between;margin-top: .2rem;margin-bottom: .35rem;}
    .container .goods .l{flex-shrink: 0;width: 1.5rem;margin-right: .2rem;}
    .container .goods .l img{width: 100%;height: auto;}
    .container .goods .r{width: 100%;padding-right: .2rem;}
    .container .goods .r h3{font-size: .28rem;color: #000;line-height: .4rem;margin-bottom: .05rem;}
    .container .goods .r .price{display: flex;align-items: baseline;}
    .container .goods .r .price p{font-size: .6rem;color: #d72038;font-weight: bold;}
    .container .goods .r .price p i{font-size: .28rem;font-weight: normal;}
    .container .goods .r .price span{font-size: .23rem;color: #666666;text-decoration: line-through;margin-left: .3rem;}
    /* 进度 */
    .progress{width: 100%;font-size: .18rem;position: relative;}
    .progress .base-line{width: 100%;height: .15rem;background: #f4eee2;border-radius: .15rem;}
    .progress .on{position: absolute;top: 0;left: 0;height: .15rem;background: linear-gradient(to right,#fc9e1d,#e8221a);border-radius: .15rem;}
    .progress .on span{position: absolute;top: -.5rem;right: -1.2rem;display: inline-block;padding: .05rem .15rem;border-radius: .1rem;background: #fdb715;color: #fff;}
    .progress .on span.fixed{right: -.2rem;}
    .progress .on span::after{content: "";position: absolute;display: block;width: 0;height: 0;bottom: -.2rem;left: .25rem;border-width: .1rem;border-style: solid;border-color: #fdb715 transparent transparent transparent;}
    .progress .info{width: 100%;display: flex;justify-content: space-between;align-items: center;padding: .1rem 0;color: #666666;}
    .progress .info span:first-child{color: #e8221a;}
    /* 倒计时 */
    .time-count{width: 100%;display: flex;justify-content: center;align-items: center;font-size: .26rem;margin-top: .3rem;margin-bottom: .5rem;}
    .time-count i{display: inline-flex;flex-shrink: 0;width: .45rem;height: .45rem;line-height: .45rem;justify-content: center;background: #ffbd00;border-radius: .05rem;font-weight: bold;margin: 0 .06rem;}
    .time-count p{padding-left: .15rem;}
    /* 按钮 */
    .button{width: 100%;height: auto;margin-bottom: .5rem;}
    .button button{width: 100%;height: .95rem;line-height: .95rem;border-radius: .95rem;background: linear-gradient(to right,#fc9e1d,#e8221a);font-size: .34rem;color: #ffffff;font-weight: bold;letter-spacing: .05rem;box-shadow: 0 0 .25rem rgba(250,160,30,.7);cursor: pointer;}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layer.mobile.js"></script>
</head>

<body>
    <div id="app">
        <div class="top-bar">
            <a href="javascript:;"></a>
        </div>
        <!-- 主体 -->
        <div class="container">
            <!-- 头像 -->
            <div class="head">
                <img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png&.........完整代码请登录后点击上方下载按钮下载查看