frontend/src/pages/template/2/refund.astro

---
import Layout from "../../../layouts/Layout_2.astro";
import { getConfig, getExtra } from "../../../../utils/config";
import {
    TP2_COLUMN_ABOUT_US,
    TP2_COLUMN_ABOUT_US_URL,
    TP2_COLUMN_INDEX,
    TP2_COLUMN_INDEX_URL,
} from "../../../../utils/const";
const config = getConfig(Astro);
const extra = getExtra(config.app_extra_tag);
const breadcrumb = [
    { title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
    { title: TP2_COLUMN_ABOUT_US, url: TP2_COLUMN_ABOUT_US_URL },
];
---
<Layout
    title={TP2_COLUMN_ABOUT_US + ` - ${config.app_name}`}
    description={`退款条例 - ${config.app_name}`}
    keywords={config.app_keywords}
    breadcrumb={breadcrumb}
>
    <div id="content" class="main" data-site="中国">
        <div>
            <!-- 活动与新闻-->
            <div class="hcomponent-page-info">
                <div class="news-detail-title">
                    <div class="container-custom fix-p-color">
                        <h1><span>{config.app_name}{extra.refund.title}</span></h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-custom hcomponent-share-bar">
            <div class="container-custom">
                <ul class="share-box list-unstyled hasLine">
                    <li class="line"></li>
                </ul>
            </div>
        </div>
        <div >
            <div class="hcomponent-news-detail-content">
                <div class="news-detail-box container-custom clearfix">
                    <div class="news-detail-content">
                        <Fragment set:html={extra.refund.content} />
                        <p style="text-align: right;">{config.app_company}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</Layout>
<style>
    .main {
        padding-top: 10rem;
        h1 {
            span {
                font-weight: bold;
            }
            margin-top: 0;
            text-align: center;
            font-size: 2rem;
        }

        .container-custom {
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px
        }
    }

    p {
        color: #666;
        font-size: 1em;
        line-height: 1.95em;
        margin: 0
    }

    @media (max-width:767px) {
        .container-custom>.container-custom {
            padding: 0;
        }
    }

    .mt20{
        margin-top: 20px;
    }
    .main .bottom-box .share-box {
        margin: 20px auto 0 auto;
    }

    .main .share-box {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
        margin-bottom: 30px;
        width: 100%;
        position: relative;
        z-index: 99;
    }
    .share-box.list-unstyled:not(.hasLine){
        margin-bottom: 0;
    }
    .main .hasLine li {
        padding: 0 22px;
        margin: 0;
        background: #fff;
        position: relative;
        z-index: 2;
        margin: 0 -2px;
    }

    .main .share-box li .wechat-qrcode {
        top: 30px;
        height: 240px;
    }

    .main .share-box li .wechat-qrcode p {
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .main .hasLine .line {
        position: absolute;
        width: 100%;
        height: 1px;
        background: #dddddd;
        top: 0;
        left: 0;
        top: 50%;
        margin-top: -1px;
    }

    .main .share-box.s-bottom {
        border-bottom: 1px solid #ddd;
        padding-top: 40px;
        padding-bottom: 40px;
        margin: 20px auto 0 auto;
    }

        .news-detail-box {
            margin-top: 5rem;
        }

        @media (min-width: 768px) {
        .container {
            width:100%
        }
    }

    @media (min-width: 992px) {
        body,html {
            font-size:16px
        }

        .container-custom {
            max-width: 1430px;
            width: 85.652%;
        }

        .container {
            max-width: 1799.136px;
            width: 93.705%
        }
    }

    @media (min-width: 1440px) {
        body,html {
            font-size:17px
        }
    }

    @media (min-width: 1680px) {
        body,html {
            font-size:18px
        }
    }

    @media (min-width: 1500px) {
        .col-ls-4 {
            width:33.33333333%
        }

        .col-ls-3 {
            width: 25%
        }
    }

    .news-detail-box .news-detail-content {
    text-align: center;
    padding: 0 8.5%;
    }


    .news-detail-box p {
        margin-bottom: 20px;
    }

    .news-detail-box p {
    text-align: left;
    margin-bottom: 20px;
    text-indent: 0em;
    word-break: break-word;
    word-wrap: break-word;
    }

    .news-detail-box .content-text {
    text-align: left;
    }

    .news-detail-box .content-text p {
    padding: 0;
    }

    .news-detail-box .news-detail-content {
    text-align: center;
    padding: 0 8.5%;
    }

    .news-detail-box .news-detail-content a {
    color: #666;
    -webkit-text-decoration: underline;
    text-decoration: underline;
    }

    .news-detail-box .news-detail-content a:hover {
    color: #000;
    }

    .news-detail-box .news-detail-content a.link-submit:hover {
    color: #fff;
    }

    .news-detail-box .news-detail-content a.btn-rect {
    -webkit-text-decoration: none;
    text-decoration: none;
    }

    @media (min-width: 768px) {
    .news-detail-box .news-detail-content>h2 {
        padding: 0;
    }
    }
</style>