| 提交 | 用户 | 时间 | ||
| e57a89 | 1 | <template> |
| 懒 | 2 | <el-row :gutter="40" class="panel-group"> |
| 3 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | |
| 4 | <div class="card-panel" @click="handleSetLineChartData('newVisitis')"> | |
| 5 | <div class="card-panel-icon-wrapper icon-people"> | |
| 6 | <svg-icon icon-class="peoples" class-name="card-panel-icon" /> | |
| 7 | </div> | |
| 8 | <div class="card-panel-description"> | |
| 9 | <div class="card-panel-text"> | |
| 10 | 访客 | |
| 11 | </div> | |
| 12 | <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> | |
| 13 | </div> | |
| 14 | </div> | |
| 15 | </el-col> | |
| 16 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | |
| 17 | <div class="card-panel" @click="handleSetLineChartData('messages')"> | |
| 18 | <div class="card-panel-icon-wrapper icon-message"> | |
| 19 | <svg-icon icon-class="message" class-name="card-panel-icon" /> | |
| 20 | </div> | |
| 21 | <div class="card-panel-description"> | |
| 22 | <div class="card-panel-text"> | |
| 23 | 消息 | |
| 24 | </div> | |
| 25 | <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" /> | |
| 26 | </div> | |
| 27 | </div> | |
| 28 | </el-col> | |
| 29 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | |
| 30 | <div class="card-panel" @click="handleSetLineChartData('purchases')"> | |
| 31 | <div class="card-panel-icon-wrapper icon-money"> | |
| 32 | <svg-icon icon-class="money" class-name="card-panel-icon" /> | |
| 33 | </div> | |
| 34 | <div class="card-panel-description"> | |
| 35 | <div class="card-panel-text"> | |
| 36 | 金额 | |
| 37 | </div> | |
| 38 | <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" /> | |
| 39 | </div> | |
| 40 | </div> | |
| 41 | </el-col> | |
| 42 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | |
| 43 | <div class="card-panel" @click="handleSetLineChartData('shoppings')"> | |
| 44 | <div class="card-panel-icon-wrapper icon-shopping"> | |
| 45 | <svg-icon icon-class="shopping" class-name="card-panel-icon" /> | |
| 46 | </div> | |
| 47 | <div class="card-panel-description"> | |
| 48 | <div class="card-panel-text"> | |
| 49 | 订单 | |
| 50 | </div> | |
| 51 | <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> | |
| 52 | </div> | |
| 53 | </div> | |
| 54 | </el-col> | |
| 55 | </el-row> | |
| 56 | </template> | |
| 57 | ||
| 58 | <script> | |
| 59 | import CountTo from 'vue-count-to' | |
| 60 | ||
| 61 | export default { | |
| 62 | components: { | |
| 63 | CountTo | |
| 64 | }, | |
| 65 | methods: { | |
| 66 | handleSetLineChartData(type) { | |
| 67 | this.$emit('handleSetLineChartData', type) | |
| 68 | } | |
| 69 | } | |
| 70 | } | |
| 71 | </script> | |
| 72 | ||
| 73 | <style lang="scss" scoped> | |
| 74 | .panel-group { | |
| 75 | margin-top: 18px; | |
| 76 | ||
| 77 | .card-panel-col { | |
| 78 | margin-bottom: 32px; | |
| 79 | } | |
| 80 | ||
| 81 | .card-panel { | |
| 82 | height: 108px; | |
| 83 | cursor: pointer; | |
| 84 | font-size: 12px; | |
| 85 | position: relative; | |
| 86 | overflow: hidden; | |
| 87 | color: #666; | |
| 88 | background: #fff; | |
| 89 | box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); | |
| 90 | border-color: rgba(0, 0, 0, .05); | |
| 91 | ||
| 92 | &:hover { | |
| 93 | .card-panel-icon-wrapper { | |
| 94 | color: #fff; | |
| 95 | } | |
| 96 | ||
| 97 | .icon-people { | |
| 98 | background: #40c9c6; | |
| 99 | } | |
| 100 | ||
| 101 | .icon-message { | |
| 102 | background: #36a3f7; | |
| 103 | } | |
| 104 | ||
| 105 | .icon-money { | |
| 106 | background: #f4516c; | |
| 107 | } | |
| 108 | ||
| 109 | .icon-shopping { | |
| 110 | background: #34bfa3 | |
| 111 | } | |
| 112 | } | |
| 113 | ||
| 114 | .icon-people { | |
| 115 | color: #40c9c6; | |
| 116 | } | |
| 117 | ||
| 118 | .icon-message { | |
| 119 | color: #36a3f7; | |
| 120 | } | |
| 121 | ||
| 122 | .icon-money { | |
| 123 | color: #f4516c; | |
| 124 | } | |
| 125 | ||
| 126 | .icon-shopping { | |
| 127 | color: #34bfa3 | |
| 128 | } | |
| 129 | ||
| 130 | .card-panel-icon-wrapper { | |
| 131 | float: left; | |
| 132 | margin: 14px 0 0 14px; | |
| 133 | padding: 16px; | |
| 134 | transition: all 0.38s ease-out; | |
| 135 | border-radius: 6px; | |
| 136 | } | |
| 137 | ||
| 138 | .card-panel-icon { | |
| 139 | float: left; | |
| 140 | font-size: 48px; | |
| 141 | } | |
| 142 | ||
| 143 | .card-panel-description { | |
| 144 | float: right; | |
| 145 | font-weight: bold; | |
| 146 | margin: 26px; | |
| 147 | margin-left: 0px; | |
| 148 | ||
| 149 | .card-panel-text { | |
| 150 | line-height: 18px; | |
| 151 | color: rgba(0, 0, 0, 0.45); | |
| 152 | font-size: 16px; | |
| 153 | margin-bottom: 12px; | |
| 154 | } | |
| 155 | ||
| 156 | .card-panel-num { | |
| 157 | font-size: 20px; | |
| 158 | } | |
| 159 | } | |
| 160 | } | |
| 161 | } | |
| 162 | ||
| 163 | @media (max-width:550px) { | |
| 164 | .card-panel-description { | |
| 165 | display: none; | |
| 166 | } | |
| 167 | ||
| 168 | .card-panel-icon-wrapper { | |
| 169 | float: none !important; | |
| 170 | width: 100%; | |
| 171 | height: 100%; | |
| 172 | margin: 0 !important; | |
| 173 | ||
| 174 | .svg-icon { | |
| 175 | display: block; | |
| 176 | margin: 14px auto !important; | |
| 177 | float: none !important; | |
| 178 | } | |
| 179 | } | |
| 180 | } | |
| 181 | </style> | |
