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 | <template> | 1 | <template> |
| 2 | <div class="totalwrap"> | 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 | </div> | 8 | </div> |
| 6 | </template> | 9 | </template> |
| 7 | 10 | ||
| @@ -23,11 +26,33 @@ export default { | @@ -23,11 +26,33 @@ export default { | ||
| 23 | 26 | ||
| 24 | <style scoped> | 27 | <style scoped> |
| 25 | .totalwrap { | 28 | .totalwrap { |
| 26 | - height: 40px; | 29 | + height: 72px; |
| 30 | + padding: 23px 0 23px 23px; | ||
| 31 | + box-sizing: border-box; | ||
| 27 | color: #fff; | 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 | </style> | 58 | </style> |
src/styles/reset.css
| @@ -45,7 +45,6 @@ html, body { | @@ -45,7 +45,6 @@ html, body { | ||
| 45 | background: url("../assets/img/bg.jpg") no-repeat; | 45 | background: url("../assets/img/bg.jpg") no-repeat; |
| 46 | background-size: 100% 100%; | 46 | background-size: 100% 100%; |
| 47 | overflow: hidden; | 47 | overflow: hidden; |
| 48 | - /*box-sizing: border-box;*/ | ||
| 49 | } | 48 | } |
| 50 | 49 | ||
| 51 | ol, ul { | 50 | ol, ul { |