css模拟机打小票字迹效果代码
代码语言：html
所属分类：布局界面
代码描述：css模拟机打小票字迹效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128|VT323" rel="stylesheet">
<style>
* {
margin: 0;
box-sizing: border-box;
font-family: "VT323", monospace;
color: #1f1f1f;
}
.container {
background: #f1f1f1;
padding: 20px 10px;
}
.bold {
font-weight: bold;
}
.center {
text-align: center;
}
.receipt {
width: 300px;
min-height: 100vh;
height: 100%;
background: #fff;
margin: 0 auto;
box-shadow: 5px 5px 19px #ccc;
padding: 10px;
}
.logo {
text-align: center;
padding: 20px;
}
.barcode {
font-family: "Libre Barcode 128", cursive;
font-size: 42px;
text-align: center;
}
.address {
text-align: center;
margin-bottom: 10px;
}
.transactionDetails {
display: flex;
justify-content: space-between;
margin: 0 10px 10px;
}
.transactionDetails .detail {
text-transform: uppercase;
}
.centerItem {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.survey {
text-align: center;
margin-bottom: 12px;
}
.survey .surveyID {
font-size: 20px;
}
.paymentDetails {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 150px;
}
.creditDetails {
margin: 10px auto;
width: 230px;
font-size: 14px;
text-transform: uppercase;
}
.receiptBarcode {
margin: 10px 0;
text-align: center;
}
.returnPolicy {
margin: 10px 20px;
width: 220px;
display: flex;
justify-content: space-between;
}
.coupons {
margin-top: 20px;
}
.tripSummary {
margin: auto;
width: 255px;
}
.tripSummary .item {
display: flex;
justify-content: space-between;
margin: auto;
width: 220px;
}
.feedback {
margin: 20px auto;
}
.feedback h3.clickBait {
font-size: 30px;
font-weight: bold;
text-align: center;
margin: 10px 0;
}
.feedback h4.web {
font-size: 20px;
font-weight: bold;
text-align: center;
margin: 10px 0;
}
.feedback .break {
text-align: center;
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
.couponContainer {
border-top: 1px dashed #1f1f1f;
margin-bottom: 20px;
}
.couponContainer .discount {
font-size: 35px;
text-align: center;
margin-bottom: 10px;
}
.couponContainer .discountDetails {
font-size: 20px;
text-align: center;
margin-bottom: 15px;
}
.couponContainer .barcode {
margin: 10px 0 0;
}
.couponContainer .legal {
font-size: 12px;
margin-bottom: 12px;
}
.couponContainer .barcodeID {
margin-bottom: 8px;
}
.couponContainer .expiration {
display: flex;
justify-content: space-between;
margin: 10px;
}
.couponContainer .couponBottom {
font-size: 13px;
text-align: center;
}
</style>
</head>
<body>
<div id="showScroll" class="container">
<div class="receipt">
<h1 class="logo">CVS/pharmacy</h1>
<div class="address">
666 Lincoln St. Santa Monica, CA
</div>
<div class="transactionDetails">
<div class="detail">Reg#17</div>
<div class="detail">TRN#1313</div>
<div class="detail">CSHR#00097655</div>
<div class="detail">str#9852</div>
</div>
<div class="transactionDetails">
Helped by: Garrett
</div>
<div class="centerItem bold">
<div class="item">ExtraCare Card #: *********1875</div>
</div>
<div class="transactionDetails">
<div class="detail">1</div>
<div class="detail">OB Glide 3CT</div>
<div class="detail">3.99</div>
</div>
<div class="survey bold">
<p>Survey ID #</p>
<p class="surveyID">6588 4755 3256 544 21</p>
</div>
<div class="paymentDetails bold">
<div class="detail">TOTAL</div>
<div class="detail">3.99</div>
</div>
<div class="paymentDetails">
<div class="detail">CHARGE</div>
<div class="detail">3.99</div>
</div>
<div class="paymentDetails">
<div class="detail">************4023</div>
<div class="detail">CH</div>
</div>
<div class="creditDetails">
<p>VISA CREDIT ****************</p>
<p>approved# 09773B</p>
<p>ref# 013589</p>
<p>tran type: SALE</p>
<p>AID: 30000000090755</p>
<p>TC: B7A2A4044AEE380A4</p>
<p>terminal: 69010003</p>
<p>no signature required</p>
<p>CVM: 1e0300</p>
<p>TMR(95): 0080081111</p>
<p>TS(9B): E900</p>
</div>
<div class="paymentDetails">
<div class="detail">CHANGE</div>
<div class="detail">.00</div>
</div>
<div class="receiptBarcode">
<div class="barcode">
HelloCVSScript
</div>
2003 0998 9000 8730 21
</div>
<div class="returnPolicy bold">
Returns with receipt, subject to CVS Return Policy, thru 12/04/2018
</div>
<div class="returnPolicy">
<div class="detail">October 5, 2018</div>
<div class="detail">10:16 AM</div>
</div>
<div class="tripSummary">
<div class="bold">Trip Summary:</div>
<div class="item">
<div>Today You Saved:</div>
<div>.00</div>
</div>
<div class="item">
<div>Savings Value</div>
<div>0%</div>
</div>
</div>
<div class="feedback">
<div class="break">
*************************************
</div>
<p class="center">
We would love to hear your feedback on your recent experience with us. This survey will only take 1 minute to complete.
</p>
<h3 class="clickBait">Share Your Feedback</h3>
<h4 class="web">www.CVSHealthSurvey.com</h4>
<p class="center">
Hablamos español
</p>
<div class="break">
*************************************
</div>
</div>
<div id="coupons" class="coupons">
<!-- start coupon -->
<div class="couponContainer">
<h1 class="logo">CVS/pharmacy</h1>
<div class="discount">$2.00 off</div>
<div class="discountDetails">$2.00 off COLEGATE Toothbrush, Toothpaste, or Mouthwash</div>
<div class="expiration">
<div class="item bold">
Expires 12/12/2018
</div>
<div class="item">
Up to $2 Value
</div>
</div>
<div class="barcode">
HelloCVSMate1
</div>
<div class="barcodeID center">
9007 9876 9087 7665 62
</div>
<div class="legal center">
ExtraCare card required. Excludes lottery, money orders, postage stamps, milk, prescriptions, pre-paid cards, gift cards, pseudoephedrine products, other fees, deposits, taxes, alcohol and local exclusions. No cash back. Tax charged on pre-coupon price
where required. Limit of one purchase-based coupon, i.e., $4 off $20 purchase, per transaction. Not valid in specialty centers within CVS.
</div>
<div class="couponBottom">
<p>ExtraCare Card #: *7140 00130030598777</p>
<p>CPN#: 85887</p>
</div>
</div>
<!-- end coupon -->
</div>
</div>
</div>
<script >
const rawProductData = [
[
{
productTitle: "CVS Health Non-Drowsy Allergy Relief Tablets, 70 CT",
price: "24.99" },
{
productTitle: "CVS Health 100% Pure Omega-3 Krill Oil Softgels, 350mg",
price: "37.99" },
{
productTitle: "CVS Health Multi-Symptom Nasal Allergy Spray 0.37 OZ",
price: "12.99" },
{
productTitle:
"CVS Health Original Prescription Strength Allergy Relief, 70 CT",
price: "29.99" },
{
productTitle: "M&M's Peanut Milk Chocolate Sharing Size, 10.7 OZ",
price: "4.19" },
{
productTitle: "M&M's Milk Chocolate Sharing Size, 10.7 OZ",
price: "4.19" },
{
productTitle: "M&M's Peanut Butter Milk Chocolate Sharing Size, 9.6 OZ",
price: "4.19" },
{
productTitle:
"Playtex Sport Tampons Multi-Pack, Unscented, Regular and Super Absorbency",
price: "8.49" },
{
productTitle:
"Depend FIT-FLEX Incontinence Underwear for Men, Maximum Absorbency, XL, Gray (Packaging may vary)",
price: "14.99" },
{
productTitle:
"Depend FIT-FLEX Incontinence Underwear for Women, Maximum Absorbency, L",
price: "19.79" },
{
productTitle:
"Depend FIT-FLEX Incontinence Underwear for Women, Maximum Absorbency, S, Tan (Packaging may vary)",
price: "14.99" },
{
productTitle:
"Depend FIT-FLEX Incontinence Underwear for Women, Maximum Absorbency, XL, Tan (Packaging may vary)",
price: "19.79" },
{
productTitle: "First Response Triple Check Pregnancy Test Kit, 3 CT",
price: "23.99" },
{
productTitle: "Stayfree Maxi Pads with Wings, Super",
price: "7.59" },
{
productTitle: "Playtex Sport Tampons, Unscented, Regular Absobency",
price: "5.29" },
{
productTitle: "M&M'S Pretzel Chocolate Candy Sharing Size, 8 OZ",
price: "4.19" },
{
productTitle:
"ChapStick Original Moisturizer SPF 15 Sunscreen and Skin Protectant, 0.45 OZ, 3 CT",
price: "4.49" },
{
productTitle:
"O.B. Pro Comfort Multi-Pack Tampons, Regular and Super Absorbency",
price: "8.29" },
{ productTitle: "Febreze Unstopables Air Refresher", price: "5.99" },
{
productTitle: "Life Savers Neons Gummies Candy, 7 OZ",
price: "2.99" }],
[
{
productTitle: "M&M'S Peanut Dark Chocolate Candy Sharing Size, 10.1 OZ",
price: "4.19" },
{
productTitle: "O.B. Pro Comfort Tampons, Regular Abs.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0