|
@@ -0,0 +1,562 @@
|
|
|
+<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">
|
|
|
+ <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;"
|
|
|
+ v-model="dateRangeCreatedDate"
|
|
|
+ type="datetimerange"
|
|
|
+ size="mini"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button type="cyan" size="mini" @click="queryDataSource">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row :gutter="10" class="panel-group">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6" >
|
|
|
+ <div class="flex xiaoliang">
|
|
|
+ <div style="line-height: 62px;font-size: 2vw;">
|
|
|
+ {{ form.zongliters }}
|
|
|
+ </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;">
|
|
|
+ {{ form.zongAmt }}
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 2vw;">
|
|
|
+ 总金额(元)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <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>
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ <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 class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ form.wxAmt }}</span>
|
|
|
+ </div>
|
|
|
+ <div>微信(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div><span class="sr-font">{{ form.zfbAmt }}</span></div>
|
|
|
+ <div>支付宝(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ form.xjAmt }}</span>
|
|
|
+ </div>
|
|
|
+ <div >现金(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ form.posAmt }}</span>
|
|
|
+ </div>
|
|
|
+ <div >POS(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ form.didiAppAmt }}</span>
|
|
|
+ </div>
|
|
|
+ <div>滴滴APP(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ form.tyAppAmt }}</span>
|
|
|
+ </div>
|
|
|
+ <div>团油APP(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ form.otherAmt }}</span>
|
|
|
+ </div>
|
|
|
+ <div>其他(元)</div>
|
|
|
+ </div>
|
|
|
+ </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%;">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div>
|
|
|
+ <span class="sr-font">{{ infoFrom.czAmt }}</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.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>余额(元)</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>新增电子卡(个)</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>电子卡总数(个)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div><span>0</span></div>
|
|
|
+ <div>营销费用(元)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="3">
|
|
|
+ <div class="flex-sr">
|
|
|
+ <div><span>0</span></div>
|
|
|
+ <div>营销产出比(%)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ infoFrom:{
|
|
|
+ czAmt:0,
|
|
|
+ xfAmt:0,
|
|
|
+ yeAmt:0,
|
|
|
+ jrhy:0,
|
|
|
+ zonghy:0
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.dayDataSource();
|
|
|
+ },
|
|
|
+ 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')){
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ listViewData(this.queryParams).then(response => {
|
|
|
+ if(response.hasOwnProperty('data')){
|
|
|
+ if(response.data.wxAmt){
|
|
|
+ this.form.wxAmt = response.data.wxAmt;
|
|
|
+ }else{
|
|
|
+ this.form.wxAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.zfbAmt){
|
|
|
+ this.form.zfbAmt = response.data.zfbAmt;
|
|
|
+ }else{
|
|
|
+ this.form.zfbAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.xjAmt){
|
|
|
+ this.form.xjAmt = response.data.xjAmt;
|
|
|
+ }else{
|
|
|
+ this.form.xjAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.didiAppAmt){
|
|
|
+ this.form.didiAppAmt = response.data.didiAppAmt;
|
|
|
+ }else{
|
|
|
+ this.form.didiAppAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.tyAppAmt){
|
|
|
+ this.form.tyAppAmt = response.data.tyAppAmt;
|
|
|
+ }else{
|
|
|
+ this.form.tyAppAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.otherAmt){
|
|
|
+ this.form.otherAmt = response.data.otherAmt;
|
|
|
+ }else{
|
|
|
+ this.form.otherAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.memberAmt){
|
|
|
+ this.form.memberAmt = response.data.memberAmt;
|
|
|
+ }else{
|
|
|
+ this.form.memberAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.posAmt){
|
|
|
+ this.form.posAmt = response.data.posAmt;
|
|
|
+ }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){
|
|
|
+ this.infoFrom.czAmt = response.data.amt;
|
|
|
+ }else{
|
|
|
+ this.infoFrom.czAmt = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ listXFData(this.queryParams).then(response => {
|
|
|
+ if(response.hasOwnProperty('data')){
|
|
|
+ if(response.data.amt){
|
|
|
+ this.infoFrom.xfAmt = response.data.amt;
|
|
|
+ }else{
|
|
|
+ this.infoFrom.xfAmt = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.queryInfo.stationId =this.queryParams.stationId;
|
|
|
+ listHYData(this.queryInfo).then(response => {
|
|
|
+ if(response.hasOwnProperty('data')){
|
|
|
+ if(response.data.amt){
|
|
|
+ this.infoFrom.yeAmt = response.data.amt;
|
|
|
+ }else{
|
|
|
+ this.infoFrom.yeAmt = 0;
|
|
|
+ }
|
|
|
+ if(response.data.num){
|
|
|
+ this.infoFrom.zonghy = response.data.num;
|
|
|
+ }else{
|
|
|
+ this.infoFrom.zonghy = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ listJRHYData(this.queryParams).then(response => {
|
|
|
+ if(response.hasOwnProperty('data')){
|
|
|
+ if(response.data.num){
|
|
|
+ this.infoFrom.jrhy = response.data.num;
|
|
|
+ }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;
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ /*本月*/
|
|
|
+ getMonthDate(){
|
|
|
+ let date=new Date();
|
|
|
+ let seperator1="-";
|
|
|
+ let month=date.getMonth()+1;
|
|
|
+ if (month>=1&&month<=9){
|
|
|
+ month="0"+month;
|
|
|
+ }
|
|
|
+ let currentdate=date.getFullYear()+seperator1+month+seperator1+"01";
|
|
|
+ return currentdate;
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ 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
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+};
|
|
|
+</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;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|