Commit e7c25d67ca26110adfc95a8c355ec93e5af799dc
1 parent
9a83dd61
总计
Showing
3 changed files
with
45 additions
and
7 deletions
src/assets/img/totalbg.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" id="图层_1" 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/components/total.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="totalwrap"> |
| 3 | - 总计 | |
| 4 | - <span v-for="item in this.$util.formatNumArr(totalNum)" :class="item !== ',' ? 'titlebg' : '' ">{{item}}</span> | |
| 3 | + <p> | |
| 4 | + <span class="totalbgname">总计</span> | |
| 5 | + <span v-for="item in this.$util.formatNumArr(totalNum)" :class="item !== ',' ? 'totalbg' : 'totalnobg' ">{{item}}</span> | |
| 6 | + </p> | |
| 7 | + | |
| 5 | 8 | </div> |
| 6 | 9 | </template> |
| 7 | 10 | |
| ... | ... | @@ -23,11 +26,33 @@ export default { |
| 23 | 26 | |
| 24 | 27 | <style scoped> |
| 25 | 28 | .totalwrap { |
| 26 | - height: 40px; | |
| 29 | + height: 72px; | |
| 30 | + padding: 23px 0 23px 23px; | |
| 31 | + box-sizing: border-box; | |
| 27 | 32 | color: #fff; |
| 33 | + font-size:14px; | |
| 34 | + font-weight:500; | |
| 28 | 35 | } |
| 29 | - | |
| 30 | - .titlebg { | |
| 31 | - background: #f00; | |
| 36 | + .totalwrap p{ | |
| 37 | + height: 29px; | |
| 38 | + line-height: 29px; | |
| 39 | + } | |
| 40 | + .totalbgname{ | |
| 41 | + padding-right: 10px; | |
| 42 | + } | |
| 43 | + .totalbg { | |
| 44 | + width: 20px; | |
| 45 | + height: 29px; | |
| 46 | + margin-right: 3px; | |
| 47 | + display: inline-block; | |
| 48 | + text-align: center; | |
| 49 | + line-height: 29px; | |
| 50 | + font-size: 22px; | |
| 51 | + background: url("../assets/img/totalbg.svg") no-repeat; | |
| 52 | + } | |
| 53 | + .totalnobg{ | |
| 54 | + display: inline-block; | |
| 55 | + margin-right: 3px; | |
| 56 | + font-size: 22px; | |
| 32 | 57 | } |
| 33 | 58 | </style> | ... | ... |