uni-xiudoyou/src/pages/index/index.vue

<template>
	<view class="rf-index">
		<view class="index">
			<view class="header">
				<view class="header-warp">
					<view class="header-left">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="shopArray" range-key="name">
										<view class="uni-input" >{{ shopArray[index].name }}</view>
									</picker>
									<image src="../../static/images/downicon.png" mode="" class="icon"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="header-bar header-center">首页</view>
					<view class="header-right">
						<image src="../../static/images/seticon.png" mode="" class="icon" @tap="tosetting"></image>
					</view>
				</view>
				<view class="user">
					<view class="user-left">
            <open-data type="userAvatarUrl" class="usericon"></open-data>
						<!-- <image :src="userInfo.avatarUrl" mode="" class="usericon"></image> -->
						<view class="message">
							<!-- <view class="name">{{userInfo.nickName}}</view> -->
              <open-data type="userNickName" class="name"></open-data>
							<view class="tele"></view>
						</view>
					</view>
					<view class="user-right" @tap="scanCode">
						<image src="../../static/images/scan.png" mode="" class="sacnicon"></image>
						<view class="txt">
							验证码核销
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 284upx;"></view>
     
      <!-- 输入框 -->
      <view class="input-code">
        <input type="text" v-model="ordernum" maxlength="-1" placeholder-style="color:#b8bbbb;font-size:28upx;" class="code" placeholder="请输入验证码核验">
        <view class="search" @tap="searchOrder">搜索</view>
      </view>
			<view class="index-content">
				<!-- 关键指数 -->
				<view class="exponent">
					<view class="title-warp">
						<view class="name">
							关键指数
						</view>
						<view class="time">
							数据截至：2020.07.03 <text class="hour">10:10</text>
						</view>
					</view>
					<view class="exponent-list">
						<view class="item seale">
							<view class="left">
								<view class="title">
									销售总额
								</view>
								<view class="num">
									{{sellSun.num}}
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon" v-if="sellSun.num < 0">
										<image src="../../static/images/up.png" class="icon" v-if="sellSun.num>0"> {{ sellSun.percent }}% <text class="compare">{{ sellSun.status ? '无增长' :'同比上月' }}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item order">
							<view class="left">
								<view class="title">
									订单总量
								</view>
								<view class="num">
									{{orderSun.num}}
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon" v-if="orderSun.num < 0">
										<image src="../../static/images/up.png" class="icon" v-if="orderSun.num>0"> {{ orderSun.percent }}% <text class="compare">{{ orderSun.status ? '无增长' :'同比上月' }}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item todayseale">
							<view class="left">
								<view class="title">
									今日销售额
								</view>
								<view class="num">
									{{todaysellSun.num}}
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon" v-if="todaysellSun.num < 0">
										<image src="../../static/images/up.png" class="icon" v-if="todaysellSun.num>0"> {{ todaysellSun.percent }}% <text class="compare">{{ todaysellSun.status ? '无增长' :'同比上月' }}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item todayorder">
							<view class="left">
								<view class="title">
									今日订单量
								</view>
								<view class="num">
									{{todayorderSun.num}}
								</view>
								<view class="ratio">
									<view class="detail">
                    <image src="../../static/images/down.png" class="icon" v-if="todayorderSun.num < 0">
										<image src="../../static/images/up.png" class="icon" v-if="todayorderSun.num>0"> {{ todayorderSun.percent }}% <text class="compare">{{ todayorderSun.status ? '无增长' :'同比上月' }}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 待处理事物 -->
				<view class="something">
					<view class="title">
						待处理事物
					</view>
					<view class="todo-list">
						<view class="item">
							<view class="title">
								待审核店铺
							</view>
							<view class="num">
								{{ pendingData.store }}
							</view>
						</view>
						<view class="item">
							<view class="title">
								待审核商品
							</view>
							<view class="num">
							  {{ pendingData.shop }}
							</view>
						</view>
						<view class="item">
							<view class="title">
								待上架产品
							</view>
							<view class="num">
  							{{ pendingData.shelf }}
							</view>
						</view>
            	<view class="item">
							<view class="title">
								待退款订单
							</view>
							<view class="num">
								{{ pendingData.refund }}
							</view>
						</view>
						<view class="item ">
							<view class="title">
								已支付订单
							</view>
							<view class="num">
								{{ pendingData.payorder }}
							</view>
						</view>
					
					</view>
				</view>

				<!-- 数据概况 -->
				<view class="data">
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
						<view class="qiun-title-dot-light">数据概况</view>
					</view>
          <!-- 产品销售数量走势 -->
					<view class="echarts shopsell">
						<view class="title">
							<view class="left">
								<text class="future">产品销售数量走势：<text class="num">0</text>
									<text class="yesterday">昨日全天：<text class="daynum">0</text></text>
								</text>
							</view>
							<view class="right">
                <view class="today-icon"></view><text class="title">今日</text>
								<view class="yesterday-icon"></view><text class="title">昨日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="shopsellEcharts" id="shopsellEcharts" class="shopsellEcharts" disable-scroll=true  @touchend="shopSellEndTouch"></canvas>
						</view>
					</view>
          <!-- 产品销售金额走势 -->
					<view class="echarts shopmoney">
						<view class="title">
							<view class="left">
								<text class="future">产品销售金额走势：<text class="num">0</text>
									<text class="yesterday">昨日全天：<text class="daynum">0</text></text>
								</text>
							</view>
							<view class="right">
								<view class="today-icon"></view><text class="title">今日</text>
								<view class="yesterday-icon"></view><text class="title">昨日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="shopmoneyEcharts" id="shopmoneyEcharts" class="shopmoneyEcharts" @touchstart="shopMoneyTouch"></canvas>
						</view>
					</view>
          <!-- 未来7天预定 -->
					<view class="echarts">
						<view class="title">
							<view class="left">
								<text class="future">未来七天预定：<text class="num">0</text>
									<text class="yesterday">昨日全天：<text class="daynum">0</text></text>
								</text>
							</view>
							<view class="right">
								<view class="today-icon"></view><text class="title">今日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
						</view>
					</view>
				</view>

				<!-- 商品销售占比 -->
				<view class="shop-echarts-warp">
					<view class="title">
						商品销售占比
					</view>
					<view class="shop-echarts">
						<canvas canvas-id="shopecharts" id="shopecharts" class="shopecharts" @touchstart="touchPie"></canvas>
					</view>
				</view>

        <view id="testecharts"></view>

				<view class="" style="height: 40upx;"></view>
			</view>
		</view>
    <mask :txt="masktxt" :iconShow="iconShow" v-if="isShowMask" @isSureConver="isSureConver"></mask>
		<rf-loading v-if="loading"></rf-loading>
	</view>
</template>
<script>
import uCharts from '../../js_sdk/u-charts/u-charts/u-charts';
import moment from '@/common/moment';
import mask from '../components/mask'

let _self;
let canvaLineA = null;
let canvaPie = null;
let shopSellLine = null;
let shopMoneyLine = null;
export default {
  name: 'Header',
  components: {
    mask
  },
  data() {
    return {
      //用户信息
      userInfo:uni.getStorageSync('wechatUserInfo'),
      loading: true,
      
      // 遮罩层
      isShowMask: false,
      iconShow: false,
      masktxt:'',


      shopArray: [{ name: '全部', id: 0 }],
      shopID: 0,
      index: 0,
      // 商品销售走势
      shopwidth: '',
      shopheight: '',

      // 销售金额走势
      moneywidth: '',
      moneyheight: '',

      // 未来七天
      cWidth: '',
      cHeight: '',

      // 饼图数据
      bWidth: '',
      bHeight: '',

      pixelRatio: 1, // 像素比
      ordernum: '', // 订单号

      orderMessage: {},

      today: moment().format('YYYY-MM-DD'),

      // 数据还可以优化
      sellSun: {
        num: 0,
        percent: 0,
        status: null,
      },
      todaysellSun: {
        num: 0,
        percent: 0,
        status: null,
      },
      orderSun: {
        num: 0,
        percent: 0,
        status: null,
      },
      todayorderSun: {
        num: 0,
        percent: 0,
        status: null,
      },

      // 待处理事物
      pendingData: {
        store: 0,
        shop: 0,
        shelf: 0,
        payorder: 0,
        refund: 0,
      },
    };
  },
  // 此处定义传入的数据
  props: {
    shoplist: {
      type: Object,
      value: null,
    },
  },
  // 页面生命周期 监听页面加载
  onLoad() {
    _self = this;
    this.cWidth = uni.upx2px(690); // upx2px 转换为px
    this.cHeight = uni.upx2px(300);
    this.bWidth = uni.upx2px(690);
    this.bHeight = uni.upx2px(300);

    this.getShopList();
    this.loading = false;

    
  },
  methods: {
    // 监听遮罩层行为
		isSureConver(e) {
			this.isShowMask = false;
			this.$mRouter.back()
    },
     // 扫码订单
    scanCode() {
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function (res) {
          _self.ordernum = res.result
          _self.searchOrder()
        },
      });
    },
     // 搜索框根据订单号查询订单
    searchOrder() {
      if (this.ordernum === '') {
        this.$mHelper.toast('请输入正确的订单号进行查询，不能为空！')
        return
      }
      this.$http.get('/orders/getOrdersByNo/'+this.ordernum).then(res=>{
        if (res.code === 200 ) {
          this.ordernum = ''
          if (res.data === "该订单已失效！") {
            this.iconShow = false
            this.isShowMask = true
            this.masktxt = res.data
          } else if (res.data === "未查询到该订单，请输入正确的核销码！") {
            this.iconShow = false
            this.isShowMask = true
            this.masktxt = "未查询到该订单，请重新输入！"
          } else {
            uni.setStorageSync('orderDetail', res.data);
            this.$mRouter.push({ route: '/pages/index/conversion' });
          }
          this.orderMessage = res.data
        }
      
      }).catch( error=>{
        this.ordernum = ''
      })
      
    },

    // 选择商铺
    bindPickerChange(e) {
      this.shopID = null;
      this.index = e.detail.value;
      this.shopID = this.shopArray[this.index].id;
      this.getExponentData();
      this.getPendingData();
      this.futureDayData();
      this.shopSellData();
      this.shopSellTrend();
      this.shopSellMoneyTrend();
    },

    // 跳转设置页
    tosetting() {
      this.$mRouter.push({ route: '/pages/index/setting/setting' });
    },

    // 获取店铺列表
    async getShopList() {
      await this.$http.get('/homePage/getShopByMerId').then((res) => {
        if (res.data && res.code === 200) {
          let newarr = [{ name: '全部', id: 0 }];
          this.shopArray = newarr.concat(res.data);
          this.getExponentData();
          this.getPendingData();
          this.shopSellTrend();
          this.shopSellMoneyTrend();
          this.futureDayData();
          this.shopSellData();

        }
      });
    },

    // 关键指数
    async getExponentData() {
      if (this.shopID === 0) {
        this.shopID = '';
      }
      await this.$http
        .get('/homePage/gjzs', {
          date: this.today,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.code === 200 && res.data) {
            let todaynum = 0;
            let yesnum = 0;
            // 销售总额
            this.dataDo(res.data.xsze, this.sellSun);
            // 今日销售总额
            this.dataDo(res.data.jrxxe, this.todaysellSun);
            // 订单总量
            this.dataDo(res.data.xsze, this.orderSun);
            // 今日订单总量
            this.dataDo(res.data.xsze, this.todayorderSun);
          }
        });
    },

    // 指数数据处理
    dataDo(data, itemEle) {
      let todaynum = 0;
      let yesnum = 0;
      data.forEach((element) => {
        if (element.time === 'all') {
          itemEle.num = (element.num / 100).toFixed(2);
        } else if (element.time === 'dy') {
          todaynum = element.num;
        } else if (element.time === 'sy') {
          yesnum = element.num;
        }
      });
      if (yesnum === 0) {
        itemEle.percent = 100;
      } else {
        itemEle.percent = ((todaynum - yesnum) / yesnum).toFixed(2);
      }

      if (yesnum === todaynum) {
        itemEle.percent = 0;
        itemEle.status = true;
      } else {
        itemEle.status = false;
      }

      return itemEle;
    },

    // 待处理事物
    async getPendingData() {
      if (this.shopID === 0) {
        this.shopID = '';
      }
      await this.$http
        .get('/homePage/pendingTransaction', {
          date: this.today,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            this.pendingData.store = res.data.shopCheck;
            this.pendingData.shop = res.data.goodsCheck;
            this.pendingData.shelf = res.data.upGoods;
            this.pendingData.payorder = res.data.payNum;
            this.pendingData.refund = res.data.refundNum;
          }
        });
    },

    // 商品销售走势
    async shopSellTrend() {
      if (this.shopID === 0) {
        this.shopI = '';
      }
      await this.$http
        .get('/homePage/getData2', {
          date: this.today,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            let shopSellData = {
              xdata: [],
              jrdata: [],
              zrdata: [],
            };

            res.data.forEach((ele) => {
              shopSellData.xdata.push(ele.time);
              shopSellData.jrdata.push(ele.jr);
              shopSellData.zrdata.push(ele.zr);
            });
            _self.shopSellEcharts('shopsellEcharts', shopSellData);
          }
        });
    },
    shopSellEcharts(id, echartsData) {
      shopSellLine = new uCharts({
        $this: _self,
        canvasId: id,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false,
        },
        dataLabel: true,
        duration: 500,
        dataPointShape: false, // 折点
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: echartsData.xdata, // x轴数据
        series: [
          {
            textColor:'#ffcc01',
            color: '#ffcc01',
            data: echartsData.jrdata,
            name: '今日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
          {
            color: '#7d66f3',
            textColor:'#7d66f3',
            data: echartsData.zrdata,
            name: '昨日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
        ], // 值
        animation: true,
        // enableScroll: true,
        xAxis: {
          type: 'grid',
          disableGrid: true,
          labelCount: 7
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#cccccc',
          min: 0,
          max: 180,
          data: [
          {
            axisLine: false,
            format: (val) => {
            return val.toFixed(0);
          },
          }],
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15,15,4,15],
        extra: {
          line: {
            type: 'curve', // 平滑曲线； straight直线
          },
        },
      });
    },
    shopSellEndTouch(e) {
      shopSellLine.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
    },

    // 商品销售金额走势
    async shopSellMoneyTrend() {
      if (this.shopID === 0) {
        this.shopI = '';
      }
      await this.$http
        .get('/homePage/getData3', {
          date: this.today,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            let shopMoney = {
              xdata: [],
              jrdata: [],
              zrdata: [],
            };

            res.data.forEach((ele) => {
              shopMoney.xdata.push(ele.time);
              shopMoney.jrdata.push(ele.jr);
              shopMoney.zrdata.push(ele.zr);
            });
            _self.shopMoneyEcharts('shopmoneyEcharts', shopMoney);
          }
        });
    },
    shopMoneyEcharts(id, echartsData) {
      shopMoneyLine = new uCharts({
        $this: _self,
        canvasId: id,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false,
        },
        dataLabel: true, // 图表中是否显示数据
        duration: 500,
        dataPointShape: false, // 折点
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: echartsData.xdata, // x轴数据
        series: [
          {
            textColor: '#f79554',            
            color: '#f79554',
            data: echartsData.jrdata,
            name: '今日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
          {
            color: '#2ad3a1',
            textColor: '#2ad3a1',
            data: echartsData.zrdata,
            name: '昨日',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
        ], // 值
        animation: true,
        xAxis: {
          type: 'grid',
          disableGrid: true,
          labelCount: 7
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#CCCCCC',
          min: 0,
          max: 180,
          data: [{ 
            axisLine: false,
            format: (val) => {
              return val.toFixed(2);
            }
          }],
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15,15,4,15],
        extra: {
          line: {
            type: 'curve', // 平滑曲线； straight直线
          },
        },
      });
    },
    shopMoneyTouch(e) {
      shopMoneyLine.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },

    // 未来七天
    async futureDayData() {
      if (this.shopID === 0) {
        this.shopID = '';
      }
      await this.$http
        .get('/homePage/getData0', {
          date: this.today,
          shopId: this.shopID,
        })
        .then(async (res) => {
          if (res.data) {
            let LineA = {
              categories: [],
              series: [],
            };
            res.data.forEach((ele) => {
              LineA.series.push(ele.num);
              LineA.categories.push(ele.date.slice(5));
            });
            _self.showLineA('canvasLineA', LineA);
          }
        });
    },
    // 折线图表
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'line',
        fontSize: 12,
        legend: {
          show: false,
        },
        dataLabel: true, // 图表中是否显示数据
        duration: 500,
        dataPointShape: false, // 折点
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories, // x轴数据
        series: [
          {
            color: '#ffcc01',
            data: chartData.series,
            name: '人次',
            pointShape: 'circle',
            show: true,
            type: 'line',
          },
        ], // 值
        animation: true,
        xAxis: {
          type: 'grid',
          disableGrid: true,
        },
        yAxis: {
          gridType: 'solid',
          gridColor: '#CCCCCC',
          min: 0,
          max: 180,
          data: [{
            axisLine: false,
            format: (val) => {
              return val.toFixed(0);
            },
          }],
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        padding: [15,15,4,15],
        extra: {
          line: {
            type: 'curve', // 平滑曲线； straight直线
          },
        },
      });
    },
    touchLineA(e) {
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },

    // 商品销售占比
    async shopSellData() {
      await this.$http
        .get('/homePage/getData1', {
          // date: this.today,
          date: '2020-07-28',
          shopId: this.shopID
        })
        .then(async (res) => {
          let pie = {
            series: [],
          };
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let element = res.data[i];
              pie.series.push({name: element.name, data: element.value})
            }
            _self.showPie('shopecharts', pie);
          } else {
            pie.series = [{ name: '无数据', data: 0 }];
            _self.showPie('shopecharts', pie);
          }
        });
    },
    // 饼图
    showPie(canvasId, chartData) {
      canvaPie = new uCharts({
        $this: _self,
        colors: ['#FFBC3C', '#F25051', '#FE7DDE', '#4880FF', '#47EDFB'],
        canvasId: canvasId,
        type: 'pie',
        fontSize: 12,
        legend: {
          show: true,
          position: 'left',
          float: 'center',
          itemGap: 10,
          padding: 5,
          lineHeight: 20,
          margin: 5,
          borderWidth: 1,
        },
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        series: chartData.series,
        animation: true,
        width: _self.bWidth * _self.pixelRatio,
        height: _self.bHeight * _self.pixelRatio,
        dataLabel: true,
        extra: {
          pie: {
            lableWidth: 15,
          },
        },
      });
    },
    touchPie(e) {
      canvaPie.showToolTip(e, {
        format: function (item) {
          return item.name + ':' + item.data;
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  padding: 0 30rpx;
  background-color: $barColor;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  z-index: 99;

  .header-warp {
    display: flex;
    height: 80rpx;
    color: #231726;
    background-color: #ffcc01;
    position: relative;
    .header-left {
      position: absolute;
      font-size: 28rpx;
      .uni-list:after {
        border-color: transparent;
      }
      .uni-list-cell-db {
        height: 80rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $barColor;

        .icon {
          width: 17rpx;
          height: 12rpx;
          margin-left: 10rpx;
        }
      }
    }

    .header-center {
      flex: 1;
      font-size: 36rpx;
      font-weight: 700;
      text-align: center;
      line-height: 80rpx;
    }

    .header-right {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -20upx;
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .user {
    padding: 30upx 30upx 75upx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-left {
      display: flex;
      justify-content: center;
      align-items: center;

      .usericon {
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        background-color: #ffffff;
        overflow: hidden;
      }

      .message {
        margin-left: 32rpx;
        color: #2c1b0a;

        .name {
          font-size: 30rpx;
          font-weight: 700;
        }

        .tele {
          font-size: 24rpx;
        }
      }
    }

    .user-right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .sacnicon {
        width: 40rpx;
        height: 40rpx;
      }

      .txt {
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }
}

.input-code {
  position: fixed;
  left: 50%;
  margin-left: -344upx;
  top: 234upx;
  background-color: #fff;
  width: 686upx;
  padding: 0 38upx;
  box-shadow: 0 10upx 10upx rgba($color: #f4f4f4, $alpha: 0.1);
  z-index: 100;
  border-radius: 10upx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .code {
    flex: 1;
    height: 100upx;
  }
  .search {
    width: 60upx;
    height: 100upx;
    line-height: 100upx;
    font-size: 28upx;
    color: #ffcd00;
    margin-left: 20upx;
  }
}
.index {
  background-color: #fafafa;

  .index-content {
    padding: 85upx 33rpx;

    .exponent {
      .title-warp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;

        .name {
          font-size: 32rpx;
          font-weight: 700;
        }

        .time {
          font-size: 24rpx;
          color: #191919;

          .hour {
            margin-left: 15rpx;
          }
        }
      }

      .exponent-list {
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 320rpx;
          border-radius: 10rpx;
          color: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 25rpx;
          box-sizing: border-box;
          margin-bottom: 32rpx;

          &:nth-child(odd) {
            margin-right: 44rpx;
          }

          &:nth-child(3),
          &:nth-child(4) {
            margin-bottom: 0;
          }

          .left {
            .title {
              font-size: 24rpx;
            }

            .num {
              font-size: 36rpx;
              font-weight: 700;
              margin-top: 5rpx;
            }

            .ratio {
              margin-top: 10rpx;
              font-size: 20rpx;

              .detail {
                display: flex;
                justify-content: center;
                align-items: center;

                .icon {
                  width: 12rpx;
                  height: 16rpx;
                  margin-right: 5rpx;
                }

                .compare {
                  margin-left: 10rpx;
                  font-size: 20rpx;
                }
              }
            }
          }

          .right {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            background-color: rgba($color: #ffffff, $alpha: 0.2);
            display: flex;
            justify-content: center;
            align-items: center;

            .logoicon {
              width: 44rpx;
              height: 53rpx;
            }
          }
        }

        .seale {
          background-image: linear-gradient(to top right, #e379d0, #f767b1);
        }

        .order {
          background-image: linear-gradient(to top right, #f38867, #fca43d);
        }

        .todayseale {
          background-image: linear-gradient(to top right, #9859fd, #d98afa);
        }

        .todayorder {
          background-image: linear-gradient(to top right, #17c1b1, #40e98f);
        }
      }
    }

    .something {
      margin-top: 30rpx;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        color: $titleColor;
      }

      .todo-list {
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 30rpx;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 43rpx 30rpx;
        border-radius: 10rpx;

        .item {
          width: 33.33%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-bottom: 30upx;

          .title {
            color: $subheadColor;
            font-size: 30rpx;
          }

          .num {
            color: $titleColor;
          }
        }
      }
    }

    .data {
      margin-top: 40rpx;

      .echarts {
        background-color: #ffffff;
        border-radius: 10rpx;
        margin-bottom: 30upx;
      }

      .title {
        display: flex;
        justify-content: space-between;
        color: #333333;
        padding-top: 30rpx;
        padding-left: 15rpx;
        padding-bottom: 30rpx;
        box-sizing: border-box;

        .left {
          .future {
            font-size: 28rpx;

            .num {
              font-size: 30rpx;
            }

            .yesterday {
              margin-left: 10rpx;
            }
          }
        }

        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;

          .today-icon {
            width: 20rpx;
            height: 9rpx;
            background-color: #ff9c2f;
            margin-right: 10rpx;
          }

          .title {
            font-size: 20rpx;
            margin-right: 20rpx;
          }

          .yesterday-icon {
            width: 20rpx;
            height: 9rpx;
            background-color: #b15cfa;
            margin-left: 10rpx;
          }

          .title {
            font-size: 20rpx;
          }
        }
      }

      .qiun-title-dot-light {
        color: $titleColor;
        font-size: 32rpx;
        font-weight: 700;
        padding-bottom: 25rpx;
      }

      /* 样式的width和height一定要与定义的cWidth和cHeight相对应 */
      .qiun-charts {
        width: 690rpx;
        height: 300rpx;
      }

      .charts {
        width: 690rpx;
        height: 300rpx;
      }

      .shopsell {
        .shopsellEcharts {
          width: 690rpx;
          height: 300rpx;
        }
      }
      .shopmoney {
        .shopmoneyEcharts {
          width: 690rpx;
          height: 300rpx;
        }
      }
    }

    .shop-echarts-warp {
      background-color: #ffffff;
      border-radius: 10rpx;
      margin-top: 40rpx;

      .title {
        padding: 40rpx 24rpx 30rpx;
        font-size: 26rpx;
        color: $titleColor;
      }

      .shop-echarts {
        width: 690rpx;
        height: 300rpx;
      }

      .shopecharts {
        width: 690rpx;
        height: 300rpx;
      }
    }
  }
}
</style>