vue布局样式

清疚 2023-03-01 13:25 8阅读 0赞

![在这里插入图片描述][20200726165228318.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]  
**数据**

tips: [
            { 
              title: '店铺及商品提示',
              desc: '需要关注的店铺信息及待处理事项',
              list: [
                {  name: '出售中', num: '64' },
                {  name: '待回复', num: '10' },
                {  name: '内存预警', num: '0' },
                {  name: '仓库中', num: '3' }
              ]
            },
            { 
              title: '交易提示',
              desc: '您需要立即处理的交易订单',
              list: [
                {  name: '代付款', num: '0' },
                {  name: '代发货', num: '10' },
                {  name: '已发货', num: '0' },
                {  name: '已收货', num: '3' },
                {  name: '退款中', num: '3' },
                {  name: '待售后', num: '3' }
              ]
            }
          ],

<el-col :span="12"
                  class="d-flex flex-column"
                  style="height:460px; justify-content:space-between;">
            <el-card class="box-card"
                     shadow="never"
                     v-for="(tip, ti) in tips"
                     :key="ti">
              <div slot="header"
                   class="clearfix">
                <span>{ {  tip.title }}</span>
                <el-button style="float: right; padding: 3px 0"
                           type="text">{ { 
                  tip.desc
                }}</el-button>
              </div>
              <div class="row">
                <div :class="tip.list.length | getCol"
                     v-for="(tlist, listi) in tip.list"
                     :key="listi">
                  <button class="btn btn-light w-100">
                    <h4>{ {  tlist.num }}</h4>
                    <small class="text-muted">{ {  tlist.name }}</small>
                  </button>
                </div>
              </div>
            </el-card>
          </el-col>

上边四个，下边六个需要做个筛选

filters: { 
        getCol (total) { 
          return `col-${ 12 / total}`
        }
      },

![在这里插入图片描述][20200726165712909.png]  
**数据**

counts: [
            { 
              icon: 'el-icon-user-solid',
              num: '30',
              desc: '关注人数(个)',
              color: 'bg-primary'
            },
            { 
              icon: 'el-icon-s-finance',
              num: '120',
              desc: '订单总数(笔)',
              color: 'bg-success'
            },
            { 
              icon: 'el-icon-tickets',
              num: '4183.80',
              desc: '今日订单总金额(元)',
              color: 'bg-danger'
            },
            { 
              icon: 'el-icon-s-data',
              num: '100',
              desc: '本月销售(笔)',
              color: 'bg-warning'
            }
          ],

<el-row :gutter="20"
                style="">
          <el-col :span="6"
                  v-for="(item, index) in counts"
                  :key="index">
            <el-card class="box-card"
                     shadow="hover">
              <div class="d-flex align-items-center">
                <i :class="[item.icon, item.color]"
                   class=" h4 mb-0 text-white text-center mr-3"
                   style="width:40px;height:40px;line-height:40px;"></i>
                <div>
                  <h4 class="mb-0">{ {  item.num }}</h4>
                  <small class="text-muted">{ {  item.desc }}</small>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70 1]

<el-col :span="12">
            <el-card class="box-card"
                     style="height:460px;"
                     shadow="never">
              <div slot="header"
                   class="clearfix">
                <span>订单总数统计</span>
                <el-button style="float: right; padding: 3px 0"
                           type="text">订单数量</el-button>
              </div>
              
              <div id="main"
                   style="width:100%;height:360px;"
                   ref="myChart"></div>
            </el-card>
          </el-col>

import echarts from 'echarts'

_drawLine () { 
          let myChart = echarts.init(this.$refs.myChart)
          //  配置参数
          myChart.setOption({ 
            title: { },
            tooltip: { 
              trigger: 'axis',
              axisPointer: { 
                type: 'cross',
                label: { 
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: { 
              data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: { 
              feature: { 
                saveAsImage: { }
              }
            },
            grid: { 
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              { 
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              }
            ],
            yAxis: [
              { 
                type: 'value'
              }
            ],
            series: [
              { 
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                data: [120, 132, 101, 134, 90, 230, 210]
              },
              { 
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              { 
                name: '视频广告',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                data: [150, 232, 201, 154, 190, 330, 410]
              },
              { 
                name: '直接访问',
                type: 'line',
                stack: '总量',
                areaStyle: {  normal: { } },
                data: [320, 332, 301, 334, 390, 330, 320]
              },
              { 
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                label: { 
                  normal: { 
                    show: true,
                    position: 'top'
                  }
                },
                areaStyle: {  normal: { } },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
              }
            ]
          })
          window.onresize = function () { 
            myChart.resize()
          }
        }

// dom元素渲染完毕
      mounted () { 
        // 统计图
        this.$axios.post(`http://192.168.1.20:8765/honghu-collect-service/favorite/attention_store`).then(res => { 
          alert(res)
        })
        this._drawLine()
      },

[20200726165228318.png]: /images/20230208/160028c7504a406eb481f7da3a577af8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]: /images/20230208/660a9ef041464961ad713052ec0f76bf.png
[20200726165712909.png]: /images/20230208/4b3a493cc80c43519a90ad897622bbf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70 1]: /images/20230208/f7d0e21591984184a2e1013434df2c9f.png