css+div布局实现优惠券特价支付弹出层效果代码-html代码-BFW代码库

css+div布局实现优惠券特价支付弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：css+div布局实现优惠券特价支付弹出层效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <style>
    body{
        width: 100vw;
        height: 100vh;
    }
        .pay-modal {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 241px;
            height: 100%;
            animation-duration: .5s;
            border: 1px solid rgba(6,10,38,.04);
            border-radius: 8px
        }
        
        .pay-modal .p-title {
            padding-top: 32px;
            padding-bottom: 22px
        }
        
        .pay-modal .p-title img {
            width: auto;
            height: 32px
        }
        
        .pay-modal .card {
            position: relative;
            width: 351px;
            height: 180px;
            background-image: url(//repo.bfw.wiki/bfwrepo/icon/66beba589ec4b.png);
            background-size: 100% 100%;
            margin-bottom: 20px
        }
        
        .pay-modal .card .tag {
            position: absolute;
            left: -4px;
            top: 0;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 105px;
            padding: 4px 6px;
            background-color: #ff5745;
            font-family: PingFangSC-Semibold;
            font-size: 11px;
            color: #fff;
            text-align: center;
            font-weight: 600;
            border-radius: 8px
        }
        
       
        
        .pay-modal .card .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px
        }
        
        .pay-modal .card .content .left {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column
        }
        
        .pay-modal .card .content .left .title {
            margin-top: 16px;
            padding-bottom: 8px;
            font-family: AlibabaPuHuiTiM;
            font-size: 16px;
            color: #7a5821;
            text-align: center;
            font-weight: 500
        }
        
        .pay-modal .card .content .left .price-box {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-family: Gilroy-Bold;
            color: #ff5745;
            font-weight: 700
        }
        
        .pay-modal .card .content .left .price-box .syc {
            padding-right: 9px;
            font-size: 34px
        }
        
        .pay-modal .card .content .left .price-box .price {
            font-size: 50px;
            line-height: 50px
        }
        
        .pay-modal .card .content .left .del-price {
            opacity: .6;
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ff5745;
            text-align: center;
            font-weight: 600
        }
        
        .pay-modal .card .content .left .agm {
            width: 144px;
            font-family: PingFangSC-Medium;
            color: #ecbf76;
            text-align: center;
            font-weight: 500;
            overflow: hidden
        }
        
        .pay-modal .card .content .left .agm .agreement {
            font-size: 12px;
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.75, 0.75);
            transform: scale(0.75, 0.75);
            width: 100%;
            white-space: nowrap
        }
        
        .pay-modal .card .content .lef.........完整代码请登录后点击上方下载按钮下载查看