mashangyoujiu/Application/Vip/View/Coupon/coupondetail.html

<!DOCTYPE html>
<html>
<!--[1.7.84]-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/reset.css"/>
    <title>优惠券</title>
    <style>
        .leftbody{
            -webkit-tap-highlight-color: transparent;
            position: relative;
            min-height: 180px;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#fe314e), to(#fe6263));
            background: -moz-linear-gradient(to bottom, #fe314e, #fe6263);
            color: #fff;
            /*margin-top: 20px;*/
        }
        .dot{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 5px;
            background: url(__PUBLIC__/Retail/Mcoupon/dot.png) repeat-x left bottom;
            background-size: auto 5px;
        }
        .promote-card-name{
            font-size: 18px;
            line-height: 60px;
            padding-left: 10px;
        }
        .js-share{
            position: absolute;
            right: 10px;
            top: 15px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ffbabb;
            border-color: rgba(255,255,255,0.5);
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            color:rgba(255,255,255,0.5)
        }
        .center{
            text-align: center;
        }
        .promote-value{
            font-size: 40px;
            word-break: break-word;
        }
        .promote-limit{
            line-height: 40px;
        }
        .font-size-14{
            font-size: 12px;
        }
        .promote-desc {
            /*display: none;*/
            color: #333;
            word-break: break-all;
        }
        .promote-desc .promote-desc-title {
            padding: 10px 0 10px 20px;
        }
        .block-item {
            position: relative;
            display: block;
            padding: 10px 0px 10px 20px;
            line-height: 1.5;
            border: 0;
            border-top: 2px solid #e5e5e5;
            border-bottom: 2px solid #e5e5e5;
            overflow: hidden;
        }
        .transparent-color{
            color:rgba(255,255,255,0.5);
        }
        .couponshow{
            width:100%;
        }
        .leftshow{
            width:100%;
            box-sizing: border-box;
            padding: 6px;
            float: left;
            background-color: white;
            margin-top: 10px;
            box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
        }
        #app{
            width:100%;
            box-sizing: border-box;
            padding: 0px 30px;
        }
        .vipgrade{
            display: inline-block;
            padding: 4px 18px 4px 8px;
            margin: 6px;
            border: 1px solid rgba(0,0,0,0.2);
            position: relative;
        }
        body,html{

        }
    </style>
</head>

<body>
<div id="app">
    <div class="leftshow">
        <div class="couponshow">
            <div class="leftbody">
                <div class="clearfix" style="height:60px;">
                    <h2 class="promote-card-name" v-text="couponname">{$coupon['coupon_name']}</h2>
                </div>
                <p class="center promote-value">
                    <span class="promote-value-sign">
                        <span>￥</span>
                        <i v-text="couponmoney">{$coupon['reducemoney']}</i>
                    </span>
                </p>
                <p class="center font-size-14 promote-limit" v-text="couponlimit">满{$coupon['needmoney']}元使用</p>
                <p class="center font-size-14 transparent-color" v-text="canusedate">有效期：{$coupon['validity_time']}</p>
                <div class="dot"></div>
            </div>
            <div class="promote-desc">
                <h2 class="font-size-14 c-gray-dark promote-desc-title">使用规则</h2>
                <div class="block border-top-0">
                    <div class="block-item clearfix" style="min-height: 45px;box-sizing: border-box;">
                        <span class="js-desc-detail" v-html="showdetail" >{$coupon['appoint_type_name']}</span>
                    </div>
                </div>
            </div>
            <div class="promote-desc">
                <h2 class="font-size-14 c-gray-dark promote-desc-title">可用门店</h2>
                <div class="block border-top-0">
                    <div class="block-item clearfix" style="min-height: 45px;box-sizing: border-box;border-bottom: none;">
                        <span class="js-desc-detail">
                            {$coupon['store_type']}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="__PUBLIC__/vip/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/vip/js/window-reload.js"></script>
<script src="__PUBLIC__/js/tips.js"></script>
</html>