oil-station/fuintAdmin_zt/src/views/homeComponents/agent.vue

<template>
  <div class="app-container">
    <el-carousel height="230px">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <div class="bannser">

          <!--          <img src="../../assets/images/banner.png" alt="" >-->
          <img :src="imagePath+item.productImage" alt="" >
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="b-bs">
      <div class="left-box">
        <div class="san-box">
          <div>
            <img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
          </div>
          <div>
            <div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
            <div class="r-size">合作油站总数</div>
          </div>
        </div>
        <div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
          <div>
            <img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
          </div>
          <div>
            <div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
            <div class="r-size">7日活跃油站汇总数</div>
          </div>
        </div>
        <div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
          <div>
            <img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
          </div>
          <div>
            <div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
            <div class="r-size">本月新增油站数</div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="title_">
          <div>通知中心</div>
          <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center" @click="goRoute">更多 <i class="el-icon-arrow-right"></i> </div>
        </div>
<!--        <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>-->
        <div class="hang_" v-for="(item,index) in noticeList" :key="index" >【{{ item.notificationType }}】{{ item.templateContent }}</div>
        <div class="hang_" v-if="this.noticeList.length==0">暂无通知</div>
      </div>
    </div>
    <div class="b-bs">
      <div class="left-box-t">
        <div class="d-s">
          <div class="h-tt" >数据看板</div>
          <div class="q-anniu">近一周</div>
          <div style="margin-right: 40px">
            <el-date-picker
              v-model="value1"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getStoreAmount">
            </el-date-picker>
          </div>
          <div style="margin-right: 40px">
            <el-select v-model="value" clearable placeholder="请选择" @change="chooseDept()">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="d-s" style="margin-top: 15px">
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #000;margin-bottom: 6px;">  活跃油站数</div>
            </div>
            <div class="num-size">{{ storeAmount.storeTotal || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #000;margin-bottom: 6px;">交易金额(万元)/交易笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.tradeAmount || 0 }}  /  {{ storeAmount.tradeTotal || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #000;margin-bottom: 6px;">退款金额(元)/退款笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.refundAmount || 0 }}  /  {{ storeAmount.refundTotal || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #000;margin-bottom: 6px;">笔均单价(元)</div>
            </div>
            <div class="num-size">{{ storeAmount.averagePrice || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #000;margin-bottom: 6px;">日均交易额(万元)/日均交易笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.dayTradeAmount || 0 }}  /  {{ storeAmount.dayTradeTotal || 0 }}</div>
          </div>
        </div>
        <div class="hui-hang"></div>
        <div class="h-tt" >活跃油站</div>
        <div class="d-s" style="justify-content: space-around" >
            <div id="ccc" style="width: 400px;height: 350px;"></div>
           <div id="cttt" style="width: 350px;height: 300px;"></div>
           <div id="ccct" style="width: 350px;height: 300px;"></div>
        </div>
      </div>
      <div class="right-box-t">
<!--        <div class="h-tt" >硬件设备</div>-->
        <div class="title_" style="margin-top: -10px;">
          <div>硬件设备</div>
          <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">
            <el-popover
              placement="bottom"
              width="200"
              trigger="click">
              <div>
                联系人：张总<br>
                联系电话：15666665287
              </div>
              <el-button slot="reference" style="border: 0px" type="text"><img src="@/assets/images/phone.png"></el-button>
            </el-popover>
          </div>
        </div>
        <div style="height: 90%;overflow:auto;">
          <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :key="index" >
            <!--          <div class="r-img">-->
            <!--            <img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">-->
            <!--          </div>-->
            <!--          <div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>-->
            <div class="r-img">
              <img :src="imagePath + item.image" style="width: 84px;height: 70px">
            </div>
            <div style="font-size: 14px;">{{ item.name }}</div>
          </div>
        </div>

      </div>
    </div>
    <div class="bottom_">
      <div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
      <div class="d-s">
        <div class="anniu-h" :class="{ 'anniu-act': index == timeIndex }" v-for="(item,index) in timeList" :key="index" @click="editColor(index)">
          {{item}}
        </div>
        <el-date-picker
          v-model="value2"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabled="disabled"
          @change="getStoreList()">
        </el-date-picker>
      </div>
      <div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
<!--      <div id="cccc" style="width: 300px;height: 200px;"></div>-->

    </div>

  </div>
</template>

<script>
import echarts from "echarts";
import {getStoreAmountByTime, storeAmountIndex1, storeTotalIndex} from "@/api/indexBanner";
import {selectChildByDeptId} from "@/api/system/Site/site";
import {parseTime,formatDate} from "@/utils/fuint";
import {getBannerListApi} from "@/api/sys/banner";
import {getListApi} from "@/api/setting/hardware";
import {getNotificationlogList} from "@/api/sys/sysNotificationlog";
export default {

  props:["accountId",'deptId'],
  data(){
    return{
      form: {},
      timeList:[
        "今日",
        "近一周",
        "近一月",
        "近一年",
        "自定义",
      ],
      timeIndex:0,
      disabled:true,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: [],
      value2: [],
      imagePath: process.env.VUE_APP_SERVER_URL,
      queryParams:{},
      // 店铺数量
      storeTotal:{},
      // 店铺金额
      storeAmount:{},
      // banner图列表
      bannerList:{},
      storeList:[],
      hardwareList:[],
      noticeList:[]
    }
  },
  created() {
    let nowDate = new Date();
    let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
    this.value1 = [formatDate(oneWeekAgo),formatDate(nowDate)]
    this.getStoreTotal()
    this.selectChildByDeptIdApi()
    // this.getStoreAmount()
    // this.value = this.deptId
    // this.chooseDept()
    this.selectBannerList()
    let start = new Date();
    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)
    start.setMilliseconds(0)
    this.value2 = [parseTime(start),parseTime(new Date())];
    this.getStoreList()
    this.getHardwareList()
    this.getNoticeList()
  },
  mounted() {
    // this.initChart()
  },
  methods:{
    goRoute(){
      this.$router.push("/notify")
    },
    getNoticeList(){
      getNotificationlogList({pageNo: 1, pageSize: 4,sentTo:this.accountId}).then(res => {
        this.noticeList = res.data.records
      })
    },
    getHardwareList(){
      getListApi({page: 1, pageSize: 3,status:'1'}).then(res=>{
        this.hardwareList = res.data.records;
        this.hardwareList.forEach(item => {
          if (item.image.includes(",")){
            item.image = item.image.split(",")[0]
          }
        })
      })
    },
    editColor(index){
      this.timeIndex = index
      this.disabled = true
      if (this.timeList[index]=='今日'){
        let start = new Date();
        start.setHours(0)
        start.setMinutes(0)
        start.setSeconds(0)
        start.setMilliseconds(0)
        this.value2 = [parseTime(start),parseTime(new Date())];
      } else if (this.timeList[index]=='近一周'){
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
        this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
      } else if (this.timeList[index]=='近一月'){
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
        this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
      } else if (this.timeList[index]=='近一年'){
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getFullYear() - 1, nowDate.getMonth(), nowDate.getDate())
        this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
      }else if (this.timeList[index]=='自定义'){
        this.disabled = false
      }
      this.getStoreList()
    },
    getStoreList(){
      getStoreAmountByTime(this.addDateRange({},this.value2)).then(res => {
        this.storeList = res.data
        this.initChart()
      })
    },
    selectBannerList(){
      let queryParams = {
        pageNo:1,
        pageSize:10,
        systemPosition:"系统首页",
        bannerStatus:true
      }
      getBannerListApi(queryParams).then(res=>{
        this.bannerList = res.data.records
      })
    },
    // 查询
    selectChildByDeptIdApi() {
      selectChildByDeptId().then(res => {
        this.options = res.data

        this.value = this.deptId
        this.chooseDept()
      })
    },
    getStoreTotal(){
      storeTotalIndex().then(res => {
        this.storeTotal = res.data
      })
    },
    // 选择机构信息
    chooseDept(){
      this.options.forEach(item => {
        if (item.deptId == this.value){
          this.queryParams.ancestors = item.ancestors
        }
      })
      this.getStoreAmount()
    },
    getStoreAmount(){
      storeAmountIndex1(this.addDateRange(this.queryParams,this.value1)).then(res => {
        this.storeAmount = res.data
        this.initChart()
      })
    },
    countPercentage(upNum,downNum){
      let percentage = 0;
      percentage = (upNum / downNum)*100
      return percentage.toFixed(2)
    },
    initChart() {
      const chart = echarts.init(document.getElementById('ccc'))
      // const chart1 = echarts.init(document.getElementById('cccc'))
      const chart2= echarts.init(document.getElementById('ccct'))
      const chart4= echarts.init(document.getElementById('cttt'))
      const chart3= echarts.init(document.getElementById('ctct'))
      let hourList = []
      let storeNumList = []
      let tradeAmountList = []
      let tradeNumList = []
      if (this.storeList.length>0) {
        // for (let i = 0; i < 24; i++) {
        //   let flag = false;
        //   let hour = i.toString().padStart(2, '0') + ":00"; // 转换为两位数格式
          this.storeList.forEach(item => {
            // if (item.tradeTime == hour){
              // flag = true
            hourList.push(item.tradeTime);
              storeNumList.push(item.storeNum)
              tradeAmountList.push(item.tradeAmount)
              tradeNumList.push(item.tradeNum)
            // }
          })
        //   hourList.push(hour);
        //   if (!flag) {
        //     storeNumList.push(0)
        //     tradeAmountList.push(0)
        //     tradeNumList.push(0)
        //   }
        // }
      }else {
        hourList = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        storeNumList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        tradeAmountList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        tradeNumList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
      }

      const option =  {
        color: [
          '#3B6ADE',
          '#fe8c4a',
          '#179726',
          '#FFB519',
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '35%'],
            label: {
              position: 'inner',
              fontSize: 14,
              formatter: '{d}%'
            },

            labelLine: {
              show: false
            },
            data: [
              { value: Number(this.storeAmount.noWeekStoreTotal), name: '非7日活跃油站' },
              { value: Number(this.storeAmount.weekStoreTotal), name: '7日活跃油站' }
            ]
          },
          {
            name: '',
            type: 'pie',
            radius: ['30%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              // show: false,
              position: 'inner',
              formatter: ' {d}%  ',
              rich: {
                b: {
                  color: '#fff',
                  fontSize: 14,

                  fontWeight: 'bold',
                  lineHeight: 14
                },
                per: {
                  color: '#fff',

                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              { value: Number(this.storeAmount.noAddStoreTotal), name: '非本月新增' },
              { value: Number(this.storeAmount.addStoreTotal), name: '本月新增' },
            ]
          }
        ]
      };
      const option1 = {
        color: [
          '#3B6ADE',
          '#fe8c4a',
        ],
        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '80%',
            data: [
              { value: Number(this.storeAmount.addStoreTotal), name: '本月新增油站' },
              { value: Number(this.storeAmount.noAddStoreTotal), name: '非本月新增油站' },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const option2 = {
        color: ['#fe7e01', '#48c837'],
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {

              borderColor: '#fff',

            },

            data: [
              // { value: 50, name: '富友交易金额占比 ' },
              // { value: 50, name: '拉卡拉交易金额占比' }
              { value: this.countPercentage(Number(this.storeAmount.fuYouAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '富友交易金额占比' },
              { value: this.countPercentage(Number(this.storeAmount.laKaLaAmount),Number(this.storeAmount.fuYouAmount) + Number(this.storeAmount.laKaLaAmount)), name: '拉卡拉交易金额占比' }
            ],
            label: {
              show: true,
              position: "inside",
              color:'#fff',
              formatter: `{d}%`,
            },
          }
        ]
      };
      const option3 = {
        color: ['#FF9655', '#0DC291', '#fe8c4a'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },


        legend: {
          data: ['交易金额', '交易笔数', '活跃油站数'],
          left: 'right'
        },
        xAxis: [
          {
            type: 'category',
            // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
            data: hourList,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '活跃油站数',

            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '金额(元)',
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '活跃油站数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            barWidth: 13,
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
                barBorderRadius: [50, 50, 0, 0]
              }
            },
            // data: [
            //   30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6,0,1,4,5,7,2
            // ]
            data: storeNumList
          },

          {
            name: '交易金额',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            // data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6,0,4,5,7,5]
            data: tradeAmountList
          },
          {
            name: '交易笔数',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            // data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
            data: tradeNumList
          }
        ],
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        }

      };
      const option4 ={
        color: ['#fe7e01', '#48c837'],
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 10
            },

            data: [
              // { value: 50, name: '7日活跃油站 ' },
              // { value: 50, name: '非7日活跃油站' }
              { value: this.countPercentage(Number(this.storeAmount.storeTotal),Number(this.storeAmount.storeTotal) + Number(this.storeAmount.noStoreTotal)), name: '7日活跃油站' },
              { value: this.countPercentage(Number(this.storeAmount.noStoreTotal),Number(this.storeAmount.storeTotal) + Number(this.storeAmount.noStoreTotal)), name: '非7日活跃油站' }
            ],
            label: {
              show: true,
              position: "inside",
              color:'#fff',
              formatter: `{d}%`,
            },
          }
        ]
      };
      chart.setOption(option)
      // chart1.setOption(option1)
      chart2.setOption(option2)
      chart3.setOption(option3)
      chart4.setOption(option4)



    }

  }

}
</script>

<style scoped lang="scss">

.app-container{
  width: 100%;
  height: 100%;
  /* height: 100vh; */
  background: #f4f5f9;
}
.d-s{
  display: flex;
  align-items: center;
}
.bannser{
  width: 100%;
  height: 230px;
  border-radius: 8px;
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
  }

}
.b-bs{
  width: 100%;
  display: flex;

  justify-content: space-between;
  margin-top: 20px;
}
.left-box{
  width: 73%;
  background: #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #FFFFFF;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px;
}
.left-box-t{
  width: 73%;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFFFFF;


}
.right-box{
  width: 26%;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFFFFF;
  height: 192px;
  box-sizing: border-box;
  padding: 15px;
}
.right-box-t{
  width: 26%;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFFFFF;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  height: 558px;
  overflow: auto;
}
.san-box{
  width: 360px;
  height: 150px;
  box-sizing: border-box;
  border-radius: 8px;
  background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
  margin: 15px 0px;
  margin-right: 15px;
  box-sizing: border-box;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.r-title{
  font-weight: bold;
  font-size: 48px;
  color: #FFFFFF;
  text-align: center;
}
.r-size{
  font-size: 18px;
  color: #FFFFFF;
}
.title_{
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.hang_{
  width: 100%;
  white-space: nowrap;   //不换行
  overflow: hidden;       //超出部分隐藏
  text-overflow: ellipsis;    //文本溢出显示省略号
  font-size: 14px;
  color: #777777;
  margin: 14px auto;
}
.h-tt{
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  margin-right: 40px;
}
.q-anniu{
  width: 80px;
  height: 26px;
  background: #FF9655;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  margin-right: 20px;
}

.k-box{
  width: 215px;
  height: 68px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #e1e0e0;
  box-sizing: border-box;
  padding: 10px;
  margin-right: 10px;
}
.num-size{
  font-weight: bold;
  font-size: 24px;
  color: #555555;
}
.sian{
  width: 6px;
  height: 6px;
  background: #2BBCFF;
  border-radius: 50%;
  margin-right: 5px;
}
.hui-hang{
  width: 100%;
  height: 5px;
  background: #F4F5F9;
  margin: 15px auto;
}
.h-r-ba{
  height: 170px;
  margin: 0px 50px;
  width: 5px;
  background: #f4f5f9;
}
.r-img{
  width: 84px;
  height: 70px;
  margin-right: 20px;
}
.bottom_{
  width: 100%;
  border-radius: 10px;
  background:  #fff;
  box-sizing: border-box;
  padding: 20px;
  margin-top: 20px;
}
.anniu-h{
  width: 80px;
  height: 26px;
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777777;
  margin-right: 20px;
}
.anniu-act{
  background: #FF9655 !important;
  border: 1px solid #FF9655 !important;
  color: #fff;

}
</style>