Commit 8530c025424485efbde6c08c0ffde00134600367
1 parent
2caf9228
总计
Showing
4 changed files
with
62 additions
and
3 deletions
src/components/VParking.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="theme-wrap"> |
| 3 | 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 | 12 | </div> |
| 6 | 13 | </template> |
| 7 | 14 | |
| ... | ... | @@ -21,6 +28,29 @@ export default { |
| 21 | 28 | } |
| 22 | 29 | .theme-body { |
| 23 | 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 | 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> | ... | ... |