登録済みのご契約
登録済みのご契約のレイアウトについての章です。
コンテンツエリア毎のラッピング
各コンテンツエリアは「t-selection」クラスを付与したタグで囲ってください。
<div class="t-selection">
<!-- 各コンテンツが入ります -->
</div>
基本レイアウト
基本レイアウトは「t-selection」クラス内の「t-container」クラス内に下記を参考に記述してください。
表示するご契約を選択してください。
品川
333
さ
12
34
ランサーエボリューションワゴン
F123456789
2021/03/14 ～ 2022/03/14
品川
333
さ
12
34
レクサス
F123456789
2021/03/14 ～ 2022/03/14
一覧から削除する場合はこちら
<body>
<div class="t-selection">
<section class="t-container">
<div class="t-selection-body">
<div class="t-selection-body-header">
<p class="t-selection-body-header-text">表示するご契約を選択してください。</p>
</div><!-- /.t-selection-body-header -->
<div class="t-selection-body-list">
<a href="../" class="t-selection-body-list-item">
<span class="t-selection-body-list-item-adjust">
<div class="t-selection-body-list-item-header">
<div class="t-selection-body-list-item-header-number">
<div class="t-selection-body-list-item-header-number-upper">
<div class="t-selection-body-list-item-header-number-upper-first">品川</div>
<div class="t-selection-body-list-item-header-number-upper-second">333</div>
</div><!-- /.t-selection-body-list-item-header-number-upper -->
<div class="t-selection-body-list-item-header-number-body">
<div class="t-selection-body-list-item-header-number-body-parm">さ</div>
<div class="t-selection-body-list-item-header-number-body-box">
<div class="t-selection-body-list-item-header-number-body-box-first">12</div>
<div class="t-selection-body-list-item-header-number-body-box-second">34</div>
</div><!-- /.t-selection-body-list-item-header-number-body-box -->
</div><!-- /.t-selection-body-list-item-header-number-body -->
</div><!-- /.t-selection-body-list-item-header-number -->
<div class="t-selection-body-list-item-header-car">ランサーエボリューションワゴン</div>
</div><!-- /.t-selection-body-list-item-header -->
<div class="t-selection-body-list-item-body">
<div class="t-selection-body-list-item-body-item-first"><span>F123456789</span></div>
<div class="t-selection-body-list-item-body-item-second"><span>2021/03/14 ～ <span>2022/03/14</span></span></div>
</div><!-- /.t-selection-body-list-item-body -->
</span>
</a>
<a href="../" class="t-selection-body-list-item">
<span class="t-selection-body-list-item-adjust">
<div class="t-selection-body-list-item-header">
<div class="t-selection-body-list-item-header-number">
<div class="t-selection-body-list-item-header-number-upper">
<div class="t-selection-body-list-item-header-number-upper-first">品川</div>
<div class="t-selection-body-list-item-header-number-upper-second">333</div>
</div><!-- /.t-selection-body-list-item-header-number-upper -->
<div class="t-selection-body-list-item-header-number-body">
<div class="t-selection-body-list-item-header-number-body-parm">さ</div>
<div class="t-selection-body-list-item-header-number-body-box">
<div class="t-selection-body-list-item-header-number-body-box-first">12</div>
<div class="t-selection-body-list-item-header-number-body-box-second">34</div>
</div><!-- /.t-selection-body-list-item-header-number-body-box -->
</div><!-- /.t-selection-body-list-item-header-number-body -->
</div><!-- /.t-selection-body-list-item-header-number -->
<div class="t-selection-body-list-item-header-car">レクサス</div>
</div><!-- /.t-selection-body-list-item-header -->
<div class="t-selection-body-list-item-body">
<div class="t-selection-body-list-item-body-item-first"><span>F123456789</span></div>
<div class="t-selection-body-list-item-body-item-second"><span>2021/03/14 ～ <span>2022/03/14</span></span></div>
</div><!-- /.t-selection-body-list-item-body -->
</span>
</a>
</div><!-- /.t-selection-body-list -->
<div class="t-selection-body-add">
<a href="../contract_add/" class="t-selection-body-add-button">
<span class="t-selection-body-add-button-text">一覧にご契約を追加</span>
<span class="t-selection-body-add-button-icon">
<span class="t-selection-body-add-button-icon-first"></span>
<span class="t-selection-body-add-button-icon-second"></span>
</span>
</a>
</div><!-- /.t-selection-body-add -->
<div class="t-selection-body-delete">
<p class="t-selection-body-delete-text">一覧から削除する場合は<a href="../contract_delete/">こちら</a></p>
</div><!-- /.t-selection-body-delete -->
</div><!-- /.t-selection-body -->
</section><!-- /.t-container -->
</div><!-- /.t-selection -->
</body>
ログイン設定
ログイン設定はID「ft01」内の「t-selection-footer」クラス内に下記を参考に記述してください。
<body>
<footer id="ft01" class="mt-auto text-center page-footer">
<div class="t-selection">
<div class="t-selection-footer">
<section class="t-container">
<div class="t-selection-list">
<h3 class="title">ログイン設定</h3>
<div class="t-selection-list-block">
<a href="" class="t-selection-list-block-item">
<div class="t-selection-list-block-item-title">
<img src="../apl/sp/images/common/menu_mail01.png" alt="メールアドレス変更" class="t-selection-list-block-item-image-1">
</div>
</a>
<a href="" class="t-selection-list-block-item">
<div class="t-selection-list-block-item-title">
<img src="../apl/sp/images/common/menu_password01.png" alt="パスワード変更" class="t-selection-list-block-item-image-2">
</div>
</a>
</div><!-- /.t-selection-list-block -->
</div><!-- /.t-selection-list -->
</section>
</div><!-- /.t-selection-footer -->
</div><!-- /.t-selection -->
</footer>
</body>