数据概览整改

src/main.js

@@ -68,10 +68,10 @@ Vue.use(Element, {
 Vue.mixin({
   computed:{
     jiBie:()=>{
-      return this.state.user.jiBie
+      return store.state.user.jiBie
     },
     deptId:()=>{
-      return this.state.user.deptId
+      return store.state.user.deptId
     },
   },
   created: function () {

src/views/overview/summary.vue

@@ -1,81 +1,97 @@
 <template>
   <div>
     <div>
-      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">数据概览</span>
-      <el-form :model="queryParams" style="margin-left: 20px;" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <span style="color: #ff9955; font-size: 25px">|</span
+      ><span style="font-size: 20px">数据概览</span>
+      <el-form
+        style="margin-left: 20px"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
         <el-form-item>
-          <el-button  size="mini" @click="dayDataSource">今天</el-button>
-          <el-button  size="mini" @click="yesDataSource">昨天</el-button>
-          <el-button  size="mini" @click="workDataSource">本周</el-button>
-          <el-button  size="mini" @click="monthDataSource">本月</el-button>
-          <el-date-picker style="margin: 0px 10px;"
+          <el-button size="mini" @click="getData(0)">今天</el-button>
+          <el-button size="mini" @click="getData(1)">昨天</el-button>
+          <el-button size="mini" @click="getData(2)">本周</el-button>
+          <el-button size="mini" @click="getData(3)">本月</el-button>
+          <el-date-picker
+            style="margin: 0px 10px"
             v-model="dateRangeCreatedDate"
             type="datetimerange"
             size="mini"
             range-separator="至"
             start-placeholder="开始日期"
-            end-placeholder="结束日期">
+            end-placeholder="结束日期"
+          >
           </el-date-picker>
-          <el-button type="cyan" size="mini" @click="queryDataSource">查询</el-button>
+          <el-button type="cyan" size="mini" @click="getData(4)"
+            >查询</el-button
+          >
         </el-form-item>
       </el-form>
       <el-row :gutter="10" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" >
+        <el-col :xs="12" :sm="12" :lg="6">
           <div class="flex xiaoliang">
-            <div style="line-height: 62px;font-size: 2vw;">
+            <div style="line-height: 62px; font-size: 2vw">
               {{ form.zongliters }}
             </div>
-            <div style="font-size: 2vw;">
-              总销量(L)
-            </div>
+            <div style="font-size: 2vw">总销量(L)</div>
           </div>
         </el-col>
         <el-col :xs="12" :sm="12" :lg="6">
-          <div  class="flex xiaoe">
-            <div style="line-height: 62px;font-size: 2vw;">
+          <div class="flex xiaoe">
+            <div style="line-height: 62px; font-size: 2vw">
               {{ form.zongAmt }}
             </div>
-            <div style="font-size: 2vw;">
-              总金额(元)
-            </div>
+            <div style="font-size: 2vw">总金额(元)</div>
           </div>
         </el-col>
-        <el-col   :xs="12" :sm="12" :lg="6">
+        <el-col :xs="12" :sm="12" :lg="6">
           <div class="flex qiyou">
-            <div style="font-size: 28px;margin-top: -20px;">  汽油  </div>
-            <div class="flex-qy" style="margin-top: 30px;">
-              <div class="flex-qy-sx"  style="margin-right: 10px;">
-                <div style="font-size: 1.5vw;" >{{ form.qyliters }}</div>
-                <div style="font-size: 1.5vw;">升数(L)</div>
+            <div style="font-size: 28px; margin-top: -20px">汽油</div>
+            <div class="flex-qy" style="margin-top: 30px">
+              <div class="flex-qy-sx" style="margin-right: 10px">
+                <div style="font-size: 1.5vw">{{ form.qyliters }}</div>
+                <div style="font-size: 1.5vw">升数(L)</div>
               </div>
-              <div class="flex-qy-sx"  style="margin-left: 10px;">
-                <div style="font-size: 1.5vw;">{{ form.qyamt }} </div>
-                <div style="font-size: 1.5vw;">金额(元)</div>
+              <div class="flex-qy-sx" style="margin-left: 10px">
+                <div style="font-size: 1.5vw">{{ form.qyamt }}</div>
+                <div style="font-size: 1.5vw">金额(元)</div>
               </div>
             </div>
           </div>
         </el-col>
-        <el-col  :xs="12" :sm="12" :lg="6">
+        <el-col :xs="12" :sm="12" :lg="6">
           <div class="flex chaiyou">
-            <div style="font-size: 28px;margin-top: -20px;">  柴油  </div>
-            <div class="flex-qy" style="margin-top: 30px;">
-              <div class="flex-qy-sx" style="margin-right: 10px;">
-                <div style="font-size:1.5vw;">{{ form.cyliters }}</div>
-                <div style="font-size: 1.5vw;">升数(L)</div>
+            <div style="font-size: 28px; margin-top: -20px">柴油</div>
+            <div class="flex-qy" style="margin-top: 30px">
+              <div class="flex-qy-sx" style="margin-right: 10px">
+                <div style="font-size: 1.5vw">{{ form.cyliters }}</div>
+                <div style="font-size: 1.5vw">升数(L)</div>
               </div>
-              <div class="flex-qy-sx" style="margin-left: 10px;">
-                <div style="font-size: 1.5vw;">{{ form.cyamt }}</div>
-                <div style="font-size: 1.5vw;">金额(元)</div>
+              <div class="flex-qy-sx" style="margin-left: 10px">
+                <div style="font-size: 1.5vw">{{ form.cyamt }}</div>
+                <div style="font-size: 1.5vw">金额(元)</div>
               </div>
             </div>
           </div>
         </el-col>
       </el-row>
     </div>
-    <div style="width:100%; height: 151px;background: #FFFFFF;">
-      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">收入概览</span>
-      <el-row style="display:flex; align-items:center;justify-content:center;width:100%; height: 100%;">
-        <el-col :xs="12" :sm="12" :lg="3" >
+    <div style="width: 100%; height: 151px; background: #ffffff">
+      <span style="color: #ff9955; font-size: 25px">|</span
+      ><span style="font-size: 20px">收入概览</span>
+      <el-row
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+        "
+      >
+        <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
             <div>
               <span class="sr-font">{{ form.wxAmt }}</span>
@@ -85,7 +101,9 @@
         </el-col>
         <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
-            <div><span class="sr-font">{{ form.zfbAmt }}</span></div>
+            <div>
+              <span class="sr-font">{{ form.zfbAmt }}</span>
+            </div>
             <div>支付宝（元）</div>
           </div>
         </el-col>
@@ -94,7 +112,7 @@
             <div>
               <span class="sr-font">{{ form.xjAmt }}</span>
             </div>
-            <div >现金（元）</div>
+            <div>现金（元）</div>
           </div>
         </el-col>
         <el-col :xs="12" :sm="12" :lg="3">
@@ -102,7 +120,7 @@
             <div>
               <span class="sr-font">{{ form.posAmt }}</span>
             </div>
-            <div >POS（元）</div>
+            <div>POS（元）</div>
           </div>
         </el-col>
         <el-col :xs="12" :sm="12" :lg="3">
@@ -131,13 +149,22 @@
         </el-col>
       </el-row>
     </div>
-    <div style="width:100%; height: 151px;">
-      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">今日数据</span>
-      <el-row style="display:flex; align-items:center;justify-content:center;width:100%; height: 100%;">
+    <div style="width: 100%; height: 151px">
+      <span style="color: #ff9955; font-size: 25px">|</span
+      ><span style="font-size: 20px">今日数据</span>
+      <el-row
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+        "
+      >
         <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
             <div>
-               <span class="sr-font">{{ infoFrom.czAmt }}</span>
+              <span class="sr-font">{{ infoFrom.czAmt }}</span>
             </div>
             <div>充值金额(元)</div>
           </div>
@@ -145,26 +172,32 @@
         <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
             <div>
-               <span class="sr-font">{{ infoFrom.xfAmt }}</span>
+              <span class="sr-font">{{ infoFrom.xfAmt }}</span>
             </div>
             <div>消费金额(元)</div>
           </div>
         </el-col>
         <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
-            <div><span class="sr-font">{{ infoFrom.yeAmt }}</span></div>
+            <div>
+              <span class="sr-font">{{ infoFrom.yeAmt }}</span>
+            </div>
             <div>余额(元)</div>
           </div>
         </el-col>
         <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
-            <div><span class="sr-font">{{ infoFrom.jrhy}}</span></div>
+            <div>
+              <span class="sr-font">{{ infoFrom.jrhy }}</span>
+            </div>
             <div>新增电子卡(个)</div>
           </div>
         </el-col>
         <el-col :xs="12" :sm="12" :lg="3">
           <div class="flex-sr">
-             <div><span class="sr-font">{{ infoFrom.zonghy }}</span></div>
+            <div>
+              <span class="sr-font">{{ infoFrom.zonghy }}</span>
+            </div>
             <div>电子卡总数（个）</div>
           </div>
         </el-col>
@@ -186,377 +219,308 @@
 </template>
 
 <script>
-  import { listSum,listOilType,listViewData,listCZData,listXFData,listHYData,listJRHYData } from "@/api/dataSource/saleReport";
+import {
+  listSum,
+  listOilType,
+  listViewData,
+  listCZData,
+  listXFData,
+  listHYData,
+  listJRHYData,
+} from "@/api/dataSource/saleReport";
 
 export default {
   name: "sourceI",
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 显示搜索条件
       showSearch: true,
-      dateRangeCreatedDate:[],
-      // 查询参数
-      queryParams: {
-        createdDate: null,
-        stationId: null,
-        stationName: null,
-        beginTime:null,
-        endTime:null
-      },
-      queryInfo:{
-        stationId:null
-      },
-      // 表单参数
+      dateRangeCreatedDate: [],
+      // 数据概览 和 收入概览
       form: {
-        zongAmt:0,
-        zongliters:0,
-        qyamt:0,
-        cyamt:0,
-        qyliters:0,
-        cyliters:0,
-        wxAmt:0,
-        zfbAmt:0,
-        xjAmt:0,
-        didiAppAmt:0,
-        tyAppAmt:0,
-        otherAmt:0,
-        memberAmt:0,
-        posAmt:0              
+        zongAmt: 0, // 总金额
+        zongliters: 0, // 总销量
+        qyamt: 0, // 汽油金额
+        cyamt: 0, // 柴油金额
+        qyliters: 0, // 汽油升数
+        cyliters: 0,
+        wxAmt: 0,
+        zfbAmt: 0,
+        xjAmt: 0,
+        didiAppAmt: 0,
+        tyAppAmt: 0,
+        otherAmt: 0,
+        memberAmt: 0,
+        posAmt: 0,
       },
-      infoFrom:{
-         czAmt:0,
-        xfAmt:0,
-        yeAmt:0,
-        jrhy:0,
-        zonghy:0
+
+      // 今日数据
+      infoFrom: {
+        czAmt: 0,
+        xfAmt: 0,
+        yeAmt: 0,
+        jrhy: 0,
+        zonghy: 0,
       },
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
   created() {
-    this.dayDataSource();
+    this.getData(0);
   },
   methods: {
     /** 查询优惠劵管理列表 */
-    getList() {
-      if(this.queryParams.stationId==null || this.queryParams.stationId==""){
-        this.queryParams.stationId =this.$store.state.user.deptId;
-      }
-      listSum(this.queryParams).then(response => {
-        if(response.hasOwnProperty('data')){
+    getList(query) {
+      listSum(query).then((response) => {
+        console.log("listSum",response)
+        if (response.hasOwnProperty("data")) {
           this.form.zongAmt = response.data.amt;
           this.form.zongliters = response.data.orderLiters;
         }
       });
-      listOilType(this.queryParams).then(response => {
-        if(response.hasOwnProperty('rows')){
-          for(let i in response.rows){
-            if(response.rows[i].oilType==="2"){
-              this.form.qyamt=response.rows[i].amt;
-              this.form.qyliters=response.rows[i].orderLiters;
-            }else if(response.rows[i].oilType==="1"){
-              this.form.cyamt=response.rows[i].amt;
-              this.form.cyliters=response.rows[i].orderLiters;
+      listOilType(query).then((response) => {
+        console.log("listOilType",response)
+        if (response.hasOwnProperty("rows")) {
+          for (let i in response.rows) {
+            if (response.rows[i].oilType === "2") {
+              this.form.qyamt = response.rows[i].amt;
+              this.form.qyliters = response.rows[i].orderLiters;
+            } else if (response.rows[i].oilType === "1") {
+              this.form.cyamt = response.rows[i].amt;
+              this.form.cyliters = response.rows[i].orderLiters;
             }
           }
         }
       });
-      listViewData(this.queryParams).then(response => {
-        if(response.hasOwnProperty('data')){
-          if(response.data.wxAmt){
+      listViewData(query).then((response) => {
+        console.log("listViewData",response)
+        if (response.hasOwnProperty("data")) {
+          if (response.data.wxAmt) {
             this.form.wxAmt = response.data.wxAmt;
-          }else{
+          } else {
             this.form.wxAmt = 0;
           }
-          if(response.data.zfbAmt){
+          if (response.data.zfbAmt) {
             this.form.zfbAmt = response.data.zfbAmt;
-          }else{
+          } else {
             this.form.zfbAmt = 0;
           }
-          if(response.data.xjAmt){
+          if (response.data.xjAmt) {
             this.form.xjAmt = response.data.xjAmt;
-          }else{
+          } else {
             this.form.xjAmt = 0;
           }
-          if(response.data.didiAppAmt){
+          if (response.data.didiAppAmt) {
             this.form.didiAppAmt = response.data.didiAppAmt;
-          }else{
+          } else {
             this.form.didiAppAmt = 0;
           }
-          if(response.data.tyAppAmt){
+          if (response.data.tyAppAmt) {
             this.form.tyAppAmt = response.data.tyAppAmt;
-          }else{
+          } else {
             this.form.tyAppAmt = 0;
           }
-          if(response.data.otherAmt){
+          if (response.data.otherAmt) {
             this.form.otherAmt = response.data.otherAmt;
-          }else{
+          } else {
             this.form.otherAmt = 0;
           }
-          if(response.data.memberAmt){
+          if (response.data.memberAmt) {
             this.form.memberAmt = response.data.memberAmt;
-          }else{
+          } else {
             this.form.memberAmt = 0;
           }
-          if(response.data.posAmt){
+          if (response.data.posAmt) {
             this.form.posAmt = response.data.posAmt;
-          }else{
+          } else {
             this.form.posAmt = 0;
           }
         }
       });
-      
-      
     },
     //本日的数据
-    dayDataSource(){
-      this.reset();
-      this.queryParams.beginTime=this.getNowFormatDate(new Date());
-      this.queryParams.endTime =this.getEndFormatDate(new Date());
-      this.queryParams.stationId=this.$store.selectDeptId;
-      this.getList();
-      console.log("this.queryParams",this.queryParams);
-      listCZData(this.queryParams).then(response => {
-        if(response.hasOwnProperty('data')){
-          if(response.data.amt){
+    getTodayList(query) {
+      // 查询汇总充值金额
+      listCZData(query).then((response) => {
+        if (response.hasOwnProperty("data")) {
+          if (response.data.amt) {
             this.infoFrom.czAmt = response.data.amt;
-          }else{
+          } else {
             this.infoFrom.czAmt = 0;
           }
         }
       });
-      listXFData(this.queryParams).then(response => {
-        if(response.hasOwnProperty('data')){
-          if(response.data.amt){
+      // 查询消费金额
+      listXFData(query).then((response) => {
+        if (response.hasOwnProperty("data")) {
+          if (response.data.amt) {
             this.infoFrom.xfAmt = response.data.amt;
-          }else{
+          } else {
             this.infoFrom.xfAmt = 0;
           }
         }
       });
-      this.queryInfo.stationId =this.queryParams.stationId;
-      listHYData(this.queryInfo).then(response => {
-        if(response.hasOwnProperty('data')){
-          if(response.data.amt){
+      // 汇总电子卡数据
+      listHYData({ stationId: query.stationId }).then((response) => {
+        if (response.hasOwnProperty("data")) {
+          if (response.data.amt) {
             this.infoFrom.yeAmt = response.data.amt;
-          }else{
+          } else {
             this.infoFrom.yeAmt = 0;
           }
-          if(response.data.num){
+          if (response.data.num) {
             this.infoFrom.zonghy = response.data.num;
-          }else{
+          } else {
             this.infoFrom.zonghy = 0;
           }
         }
       });
-      listJRHYData(this.queryParams).then(response => {
-        if(response.hasOwnProperty('data')){
-          if(response.data.num){
+      // 今日汇总数据
+      listJRHYData(query).then((response) => {
+        if (response.hasOwnProperty("data")) {
+          if (response.data.num) {
             this.infoFrom.jrhy = response.data.num;
-          }else{
+          } else {
             this.infoFrom.jrhy = 0;
           }
         }
       });
     },
-    //昨天的数据
-    yesDataSource(){
-      this.reset();
-      this.queryParams.beginTime=this.getFormatDate(new Date());
-      this.queryParams.endTime =this.getNowFormatDate(new Date());
-      this.queryParams.stationId=this.$store.selectDeptId;
-      this.getList();
-    },
-    //本周的数据
-    workDataSource(){
-      this.reset();
-      this.queryParams.beginTime=this.getDates();
-      this.queryParams.endTime =this.getEndFormatDate(new Date());
-       this.queryParams.stationId=this.$store.selectDeptId;
-      this.getList();
-    },
-    //本月数据
-    monthDataSource(){
-      this.reset();
-      this.queryParams.beginTime=this.getMonthDate();
-      this.queryParams.endTime =this.getEndFormatDate(new Date());
-      this.queryParams.stationId=this.$store.selectDeptId;
-      this.getList();
-    },
-    //按照指定日期
-    queryDataSource(){
-      this.reset();
-      this.queryParams.beginTime =this.dateRangeCreatedDate[0];
-      this.queryParams.endTime = this.dateRangeCreatedDate[1];
-      this.queryParams.stationId=this.$store.selectDeptId;
-      this.getList();
-    },
-    //今天
-    getNowFormatDate(date){
-      let seperator1="-";
-      let month=date.getMonth()+1;
-      let strDate=date.getDate();
-      if (month>=1&&month<=9){
-        month="0"+month;
-      }
-      if (strDate>=0&&strDate<=9){
-        strDate="0"+strDate;
-      }
-      let currentdate=date.getFullYear()+seperator1+month+seperator1+strDate;
-      return currentdate;
-    },
-    //明天
-    getEndFormatDate(myDate){
-      let date = myDate.getDate();
-      date = date +1;
-      myDate.setDate(date);
-      let seperator1="-";
-      let month=myDate.getMonth()+1;
-      let strDate=myDate.getDate();
-      if (month>=1&&month<=9){
-        month="0"+month;
-      }
-      if (strDate>=0&&strDate<=9){
-        strDate="0"+strDate;
-      }
-      let currentdate=myDate.getFullYear()+seperator1+month+seperator1+strDate;
-      return currentdate;
-    },
-    //昨天
-    getFormatDate(myDate){
-      let date = myDate.getDate();
-      date = date - 1;
-      myDate.setDate(date);
-      let seperator1="-";
-      let month=myDate.getMonth()+1;
-      let strDate=myDate.getDate();
-      if (month>=1&&month<=9){
-        month="0"+month;
-      }
-      if (strDate>=0&&strDate<=9){
-        strDate="0"+strDate;
+    getData(type) {
+      let day;
+      this.reset()
+      const query = {
+        stationId: this.deptId,
+        createdDate: null,
+        stationName: null,
+        beginTime: null,
+        endTime: null,
+      };
+      switch (type) {
+        case 0: // 今日
+          query.beginTime = this.dateCalculate();
+          query.endTime = this.dateCalculate(1);
+          this.getTodayList(query);
+        case 1: // 昨天
+          query.beginTime = this.dateCalculate(-1);
+          query.endTime = this.dateCalculate();
+          break;
+        case 2: // 本周
+          day = new Date().getDay();
+          day = day === 0 ? 7 : day;
+          day = -(day - 1);
+          query.beginTime = this.dateCalculate(day);
+          query.endTime = this.dateCalculate(1);
+          break;
+        case 3: // 本月
+          day = new Date().getDay();
+          day = -(day - 1);
+          query.beginTime = this.dateCalculate(day);
+          query.endTime = this.dateCalculate(1);
+          break;
+        case 4: // 指定日期
+          query.beginTime = this.dateRangeCreatedDate[0];
+          query.endTime = this.dateRangeCreatedDate[1];
+        default:
+          console.log("switch");
       }
-      let currentdate=myDate.getFullYear()+seperator1+month+seperator1+strDate;
-      return currentdate;
-    },
-    //本周
-    getDates() {
-      var new_Date = new Date()
-      var timesStamp = new_Date.getTime();
-      var currenDay = new_Date.getDay();
-      var dates = new Date(timesStamp + 24 * 60 * 60 * 1000 * (0 - (currenDay + 6) % 7)).toLocaleDateString().replace(/[年月]/g, '-').replace(/[日上下午]/g, '');
-      let s=dates.replace(/-/g,"/");
-      var dt =new Date(s);
-      var m = dt.getMonth()+1;
-      var d = dt.getDate();
-      m = m<10?"0"+m:m;
-      d = d<10?"0"+d:d;
-      dates= dt.getFullYear() +"-"+ m+"-" + d
-      return dates;
+      this.getList(query)
     },
-    /*本月*/
-    getMonthDate(){
-      let date=new Date();
-      let seperator1="-";
-      let month=date.getMonth()+1;
-      if (month>=1&&month<=9){
-        month="0"+month;
+
+    dateCalculate(num = 0, date = false) {
+      if (!date) {
+        date = new Date(); //没有传入值时,默认是当前日期
+        date =
+          date.getFullYear() +
+          "-" +
+          (date.getMonth() + 1) +
+          "-" +
+          date.getDate();
       }
-      let currentdate=date.getFullYear()+seperator1+month+seperator1+"01";
-      return currentdate;
+      date += " 00:00:00"; //设置为当天凌晨12点
+      date = Date.parse(new Date(date)) / 1000; //转换为时间戳
+      date += 86400 * num; //修改后的时间戳
+      var newDate = new Date(parseInt(date) * 1000); //转换为时间
+      return (
+        newDate.getFullYear() +
+        "-" +
+        (newDate.getMonth() + 1) +
+        "-" +
+        newDate.getDate()
+      );
     },
     // 表单重置
     reset() {
-      this.queryParams = {
-        createdDate: null,
-        stationId: null,
-        stationName: null,
-        beginTime:null,
-        endTime:null
-      };
       this.form = {
-          zongAmt:0,
-          zongliters:0,
-          qyamt:0,
-          cyamt:0,
-          qyliters:0,
-          cyliters:0,
-          wxAmt:0,
-          zfbAmt:0,
-          xjAmt:0,
-          didiAppAmt:0,
-          tyAppAmt:0,
-          otherAmt:0,
-          memberAmt:0,
-          posAmt:0
+        zongAmt: 0,
+        zongliters: 0,
+        qyamt: 0,
+        cyamt: 0,
+        qyliters: 0,
+        cyliters: 0,
+        wxAmt: 0,
+        zfbAmt: 0,
+        xjAmt: 0,
+        didiAppAmt: 0,
+        tyAppAmt: 0,
+        otherAmt: 0,
+        memberAmt: 0,
+        posAmt: 0,
       };
-    }
+    },
   },
-
-
 };
 </script>
 <style lang="scss" scoped>
-  .flex{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    width: 100%;
-    height: 170px;
-    flex-direction:column;
-
-  }
-  .xiaoliang{
-    background-image: url('../../assets/image/bj-1.png');
-    background-size: 100% 100%;
-  }
-  .xiaoe{
-    background-image: url('../../assets/image/bj-02.png');
-    background-size: 100% 100%;
-  }
-  .qiyou{
-    background-image: url('../../assets/image/bj-3.png');
-    background-size: 100% 100%;
-  }
-  .chaiyou{
-    background-image: url('../../assets/image/bj-4.png');
-    background-size: 100% 100%;
-  }
-  .flex-qy{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-  }
-  .flex-qy-sx{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    flex-direction:column;
-  }
-  .panel-group {
-    padding-left: 10px;
-  }
-
-  .flex-sr{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    width: 100%;
-    flex-direction:column;
-  }
-  .sr-font{
-    font-size: 20px;
-    color: #F4A645;
-  }
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 170px;
+  flex-direction: column;
+}
+.xiaoliang {
+  background-image: url("../../assets/image/bj-1.png");
+  background-size: 100% 100%;
+}
+.xiaoe {
+  background-image: url("../../assets/image/bj-02.png");
+  background-size: 100% 100%;
+}
+.qiyou {
+  background-image: url("../../assets/image/bj-3.png");
+  background-size: 100% 100%;
+}
+.chaiyou {
+  background-image: url("../../assets/image/bj-4.png");
+  background-size: 100% 100%;
+}
+.flex-qy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flex-qy-sx {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.panel-group {
+  padding-left: 10px;
+}
 
+.flex-sr {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex-direction: column;
+}
+.sr-font {
+  font-size: 20px;
+  color: #f4a645;
+}
 </style>