Html-列表

<template>
<div class="clause">
<div class="AllContnent">
<div class="title">
<span class="tiContent">條款及條件</span>
</div>
<div class="clauseContent">
<ul class="stage">
<li>在此購物记錄卡發出後三個月内,在任何位於香港或澳門之莎莎分店(下稱[莎莎分店])集齊12個印花,即可申請成為莎莎貴實會員(有關莎莎貴賓會籍之詳細資料,請向各店鋪查詢)。</li>
<li>申請人可於莎莎分店將此購物記錄卡交給店員,以便處理申請人之莎莎貴實會員申請。</li>
<li>成功申請莎莎贵賓卡,在莎莎分店可享九五折購物優惠。</li>
<li>此購物記錄卡的有效期為三個月,逾期作廢。</li>
<li>於每次付款前,請出示此購物記錄卡以作記錄。</li>
<li>遺失和損壞此購物記錄卡不能獲得補發。</li>
<li>不同莎莎購物記錄卡賬戶不可合饼。</li>
<li>此購物記錄卡並非莎莎贵賓卡,持卡人在莎莎分店不會享有九五折購物優惠。</li>
<li>所有購物記錄均以莎莎系統內之記錄為準。如有任何爭議,莎莎化妝品有限公司保留最終決定權。</li>
<li>莎莎化妝品有限公司保留修訂使用條款之權利,毋須另行通知。</li>
</ul>
</div>
<div class="title">
<span class="tiContent">Terms and Conditions</span>
</div>
<div class="clauseContent">
<ul class="stage">
<li>Within 3 months from the issue of this Purchase Record Card, the holder is eligible to apply for the Sa Sa VIPINK Card upon accumulation of 12 stamps at any Hong Kong and Macau Sa Sa shops (hereafter called"Sa Sa shops") (please check with shops for details).</li>
<li>Please submit this Purchase Record Card to our staff at any Sa Sa shops for the process of the Sa SaVIPINK Card application.</li>
<li> Successful applicant to the Sa Sa VIPINK Card is entitled to 5% VIP purchase discount at Sa Sa shops.</li>
<li>This Purchase Record Card is valid for 3 months from the date of issue.</li>
<li>Please present this Purchase Record Card upon every purchase.</li>
<li>Sa Sa will not be liable for any lost and damaged Purchase Record Cards.</li>
<li>Different Sa Sa Purchase Record Cards cannot be combined.</li>
<li>This Purchase Record Card is not the Sa Sa VIPINK Card. The holder of this Purchase Record Cardis notentitled to 5% VIP purchase discount at any Sa Sa shops.</li>
<li>All purchose records ore based on the company systemis dota. In the case of any dispute. the decisionofSa Sa Cosmetic Company Limited shall be final and conclusive
</li>
<li>sa sa Cosmetic Company Limited reser ves the right to amend these terms and conditions without givingprior notice.
</li>
</ul>
</div>
</div>
<div class="footer">
<span class="footerleft">不同意</span>
<span class="footerright">同意</span>
</div>
</div>
</template>

<script>
export default {};
</script>

<style lang="stylus">
.clause {
background-color: #FF88C2;
100%;
.AllContnent{
padding-bottom :50px;
}
.title {
display: flex;
margin: 0 auto;
padding-top: 15px;

.tiContent {
font-size: 16px;
font-weight: 700;
padding-left: 20px;
}
}

.clauseContent {
80%;
font-size: 14px;
margin: 0 auto;

.stage {
li {
padding-top: 15px;
line-height: 18px;
list-style: decimal;
word-break: break-all;
text-align: justify;
font-weight: 500;
}
}
}

.footer {
position: fixed;
bottom: 0;
left: 0;
100%;
height: 40px;
background-color: #666666;
color: #fff;
font-size: 16px;

.footerleft {
line-height: 40px;
float: left;
padding-left: 10px;
}

.footerright {
line-height: 40px;
float: right;
padding-right: 10px;
}
}
}
</style>
原文地址:https://www.cnblogs.com/huanhuan55/p/9772549.html