Commit 8530c025424485efbde6c08c0ffde00134600367
1 parent
2caf9228
总计
Showing
4 changed files
with
62 additions
and
3 deletions
src/components/VParking.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="theme-wrap"> | 2 | <div class="theme-wrap"> |
| 3 | <card-title> <span>停车场消息</span></card-title> | 3 | <card-title> <span>停车场消息</span></card-title> |
| 4 | - <div class="theme-body">123</div> | 4 | + <div class="theme-body"> |
| 5 | + <div class="total-wrap"> | ||
| 6 | + <span>总计</span> | ||
| 7 | + <div class="total-main"> | ||
| 8 | + <div class="eleNumBg">1</div><div class="eleNumBg">3</div><div class="eleNumBg">5</div><div class="eleNumBg">8</div> | ||
| 9 | + </div> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 5 | </div> | 12 | </div> |
| 6 | </template> | 13 | </template> |
| 7 | 14 | ||
| @@ -21,6 +28,29 @@ export default { | @@ -21,6 +28,29 @@ export default { | ||
| 21 | } | 28 | } |
| 22 | .theme-body { | 29 | .theme-body { |
| 23 | height: calc(100% - 30px); | 30 | height: calc(100% - 30px); |
| 24 | - background-color: #ff0; | 31 | + margin-left: 20px; |
| 32 | + } | ||
| 33 | + .total-wrap{ | ||
| 34 | + height: 30%; | ||
| 35 | + display: flex; | ||
| 36 | + align-items: center; | ||
| 37 | + .total-main{ | ||
| 38 | + margin-left: 10px; | ||
| 39 | + padding: 5px 5px 5px 0; | ||
| 40 | + background: url("../images/content/numBorder.svg") no-repeat; | ||
| 41 | + background-size: 100% 100%; | ||
| 42 | + } | ||
| 43 | + .eleNumBg{ | ||
| 44 | + width: 20px; | ||
| 45 | + height: 30px; | ||
| 46 | + display: inline-block; | ||
| 47 | + margin-left: 5px; | ||
| 48 | + line-height: 30px; | ||
| 49 | + font-size: 22px; | ||
| 50 | + font-weight: 600; | ||
| 51 | + text-align: center; | ||
| 52 | + background: url("../images/content/numBg.svg") no-repeat; | ||
| 53 | + background-size: 100% 100%; | ||
| 54 | + } | ||
| 25 | } | 55 | } |
| 26 | </style> | 56 | </style> |
src/images/content/numBg.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="utf-8"?> | ||
| 2 | +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | ||
| 3 | +<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| 4 | + viewBox="0 0 20 29" style="enable-background:new 0 0 20 29;" xml:space="preserve"> | ||
| 5 | +<style type="text/css"> | ||
| 6 | + .st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_44_);} | ||
| 7 | +</style> | ||
| 8 | +<linearGradient id="XMLID_44_" gradientUnits="userSpaceOnUse" x1="10" y1="1.028133e-05" x2="10" y2="29"> | ||
| 9 | + <stop offset="0" style="stop-color:#574DFE"/> | ||
| 10 | + <stop offset="1" style="stop-color:#4BD3FF"/> | ||
| 11 | +</linearGradient> | ||
| 12 | +<path id="XMLID_2_" class="st0" d="M18,29H2c-1.1,0-2-0.9-2-2v-9.5L2.5,15h14.9l2.5,2.5V27C20,28.1,19.1,29,18,29z M2.5,14L0,11.5V2 | ||
| 13 | + c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v9.5L17.5,14H2.5z"/> | ||
| 14 | +</svg> |
src/images/content/numBorder.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="utf-8"?> | ||
| 2 | +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | ||
| 3 | +<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| 4 | + viewBox="0 0 155 39" style="enable-background:new 0 0 155 39;" xml:space="preserve"> | ||
| 5 | +<style type="text/css"> | ||
| 6 | + .st0{opacity:0.1;} | ||
| 7 | + .st1{fill:#157ADB;} | ||
| 8 | + .st2{opacity:0.5;fill-rule:evenodd;clip-rule:evenodd;fill:#157ADB;} | ||
| 9 | +</style> | ||
| 10 | +<g id="XMLID_14_" class="st0"> | ||
| 11 | + <path id="XMLID_77_" class="st1" d="M154,1v37H1V1H154 M155,0H0v39h155V0L155,0z"/> | ||
| 12 | +</g> | ||
| 13 | +<path id="XMLID_15_" class="st2" d="M154,39h-4v-1h4v-4h1v4v1H154z M154,1h-4V0h4h1v1v4h-1V1z M0,39v-1v-4h1v4h4v1H1H0z M1,5H0V1V0 | ||
| 14 | + h1h4v1H1V5z"/> | ||
| 15 | +</svg> |
src/style/reset.css
| @@ -61,7 +61,7 @@ body{ | @@ -61,7 +61,7 @@ body{ | ||
| 61 | background: url("../images/bg.jpg") no-repeat; | 61 | background: url("../images/bg.jpg") no-repeat; |
| 62 | background-size: 100% 100%; | 62 | background-size: 100% 100%; |
| 63 | overflow: hidden; | 63 | overflow: hidden; |
| 64 | - /*background-size:100% 100%;*/ | 64 | + font-size: 14px; |
| 65 | /*默认颜色*/ | 65 | /*默认颜色*/ |
| 66 | } | 66 | } |
| 67 | 67 |