image.png
| | <!DOCTYPE html> |
| | <html> |
| |
|
| | <head> |
| | <meta charset="utf-8" /> |
| | <title>统计图</title> |
| | <link rel="stylesheet" href="[https://unpkg.com/element-ui/lib/theme-chalk/index.css](https://unpkg.com/element-ui/lib/theme-chalk/index.css)"> |
| | <link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css](https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css)"> |
| | <script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script> |
| | <script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script> |
| | <script src="[https://unpkg.com/element-ui/lib/index.js](https://unpkg.com/element-ui/lib/index.js)"></script> |
| | <!-- |
| | 作者：1206251389@qq.com |
| | 时间：2019-09-27 |
| | 描述：新增插件文件 |
| | --> |
| | <script src="[https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js)"></script> |
| | <script src="[https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js](https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js)"></script> |
| | </head> |
| |
|
| | <body> |
| | <div id="app" class="opera"> |
| | <div class="m-top"> |
| | <div class="formtop"> |
| | <div class="top_inline"> |
| | <div class="tit">时间筛选：</div> |
| | <ul class="time_choose"> |
| | <el-button :type="current == 0 ? 'primary' : ''" @click="choosetime(0)">今天</el-button> |
| | <el-button :type="current == 1 ? 'primary' : ''" @click="choosetime(1)">昨天</el-button> |
| | <el-button :type="current == 2 ? 'primary' : ''" @click="choosetime(2)">最近七天</el-button> |
| | <el-button :type="current == 3 ? 'primary' : ''" @click="choosetime(3)">最近30天</el-button> |
| | <div class="date_choose"> |
| | <el-date-picker v-model="value" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> |
| | </el-date-picker> |
| | </div> |
| | </ul> |
| | </div> |
| | <div class="top_inline" style="padding:0px!important;"> |
| | <ul class="time_choose"> |
| | <el-button type="primary" @click="filercharts" style="margin-left: 30px;">筛选</el-button> |
| | <el-button type="success" @click="outdatahiaght" style="margin-left: 30px;">导出</el-button> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="txttips">（说明： * 本统计去除会员券、新用户券）</p> |
| |
|
| | <div class="mainconview"> |
| | <div class="partview"> |
| | <div class="view1"> |
| | <span>销券率：</span> |
| | <ve-histogram :data="ratedataview" width="600px" :settings="persentSettings" :extend="chartpper" style="margin:20px auto 0px;"> |
| | </ve-histogram> |
| | </div> |
| | <div class="view2"> |
| | <span>优惠金额分析：</span> |
| | <ve-pie :data="bingDataview" width="600px" :settings="bingsettxt" :extend="bingExtend" style="margin:auto"></ve-pie> |
| | </div> |
| | </div> |
| | <div class="viewall"> |
| | <span>销券总金额</span> |
| | <ve-line width="98%" :data="columndataview" :settings="chartSettings" :extend="chartExtend" style="margin:auto"></ve-line> |
| | </div> |
| | <div class="tdata1"> |
| | <div class="builddata"> |
| | <p style="background:rgb(229, 229, 229);"><span>类型</span><span v-for="(item, index) in namestylelist">{{item.redPacketTypeName}}</span><span>总计</span></p> |
| | <p><span>总计销券金额（元）</span><span v-for="(item, index) in yuanlist">{{item.useMoney}}</span><span>{{allnomery}}</span></p> |
| | <p><span>总计销券数量（张）</span><span v-for="(item, index) in numlist">{{item.useNum}}</span><span>{{allnum}}</span></p> |
| | </div> |
| | <!--<div class="tabcontxt"> |
| | <el-table :data="smalltabdata" border show-summary :header-cell-style="{background:'#e5e5e5',color:'#595959',border:'#dbdbdb'}" style="width: 100%"> |
| | <el-table-column prop="redPacketType" label="类型" align="center"> |
| | <template slot-scope="scope"> |
| | <span v-if="scope.row.redPacketType == 0">通用 </span> |
| | <span v-if="scope.row.redPacketType == 1">店铺</span> |
| | <span v-if="scope.row.redPacketType == 2">分类</span> |
| | <span v-if="scope.row.redPacketType == 3">商品</span> |
| | <span v-if="scope.row.redPacketType == 4">仓库</span> |
| | <span v-if="scope.row.redPacketType == 5">配送专用</span> |
| | </template> |
| | </el-table-column> |
| | <el-table-column prop="useMoney" label="总计销券金额（元）" align="center"> </el-table-column> |
| | <el-table-column prop="useNum" label="总计销券数量（张）" align="center"> </el-table-column> |
| | </el-table> |
| | </div>--> |
| | </div> |
| |
|
| | <div class="fixed_table_show" :class="searchBarFixed == true ? 'show' :''"> |
| | <ul> |
| | <li>类型</li> |
| | <li>优惠券名称</li> |
| | <li>优惠券金额（元）</li> |
| | <li>已发放数量（张）</li> |
| | <li>已发放金额（元）</li> |
| | <li>销券数量（张）</li> |
| | <li>销券金额（元）</li> |
| | <li>操作</li> |
| | </ul> |
| | </div> |
| |
|
| |
|
| | <div class="tdata2"> |
| | <span class="youhuitxt">优惠券明细</span> |
| | <div class="tabcontxt" id="searchBar"> |
| | <el-table show-summary :header-cell-style="{background:'#e5e5e5',color:'#595959',border:'#dbdbdb'}" :data="moredetdata" border style="width: 100%" align="center"> |
| | <el-table-column prop="redPacketType" label="类型" width="180" align="center"> |
| | <template slot-scope="scope"> |
| | <span v-if="scope.row.redPacketType == 0">全场通用 </span> |
| | <span v-if="scope.row.redPacketType == 1">指定店铺</span> |
| | <span v-if="scope.row.redPacketType == 2">指定分类</span> |
| | <span v-if="scope.row.redPacketType == 3">指定商品</span> |
| | <span v-if="scope.row.redPacketType == 4">指定仓库</span> |
| | <span v-if="scope.row.redPacketType == 5">配送专用</span> |
| | </template> |
| | </el-table-column> |
| | <el-table-column prop="redPacketName" label="优惠券名称" width="180" align="center"> </el-table-column> |
| | <el-table-column prop="releaseMoney" label="优惠券金额（元）" align="center"> </el-table-column> |
| | <el-table-column prop="sendNum" label="已发放数量（张）" align="center"> </el-table-column> |
| | <el-table-column prop="releaseMoneySum" label="已发放金额（元）" align="center"> </el-table-column> |
| | <el-table-column prop="useNum" label="销券数量（张）" align="center"> </el-table-column> |
| | <el-table-column prop="useMoney" label="销券金额（元）" align="center"> </el-table-column> |
| | <el-table-column prop="" label="操作" align="center"> |
| | <template slot-scope="scope"> |
| | <el-button type="text" size="small" class="el-tag--success" @click="watchfor(scope.row)">详情</el-button> |
| | </template> |
| | </el-table-column> |
| | </el-table> |
| | </div> |
| | </div> |
| | </div> |
| | <!--//明细显示--> |
| | <div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="detshow"> |
| | <div class="el-dialog" style="padding:20px 20px; margin-top: 120px;overflow: hidden;clear: both; width: 60%;"> |
| | <div class="el-dialog__header"> |
| | {{redPacketName}} |
| | <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closedet"> |
| | <i class="el-dialog__close el-icon el-icon-close"></i> |
| | </button> |
| | </div> |
| | <div class="shuzhuangtu"> |
| | <el-button type="text" size="small" @click="updetdata" class="el-tag--success" style="display: inline-block; float: right;margin-right: 6px;">下载详情</el-button> |
| | <el-table :data="detdata" border style="width: 100%"> |
| | <el-table-column prop="no" label="订单号" width="180"></el-table-column> |
| | <el-table-column prop="money" label="原价金额" width="180"></el-table-column> |
| | <el-table-column prop="payMoney" label="实付金额"></el-table-column> |
| | <el-table-column prop="releaseMoney" label="优惠券金额"></el-table-column> |
| | <el-table-column prop="discountMoney" label="总优惠金额"></el-table-column> |
| | </el-table> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | </div> |
| | <script type="text/javascript"> |
| | var app = new Vue({ |
| | el: '#app', |
| | data() { |
| | this.chartSettings = { |
| | labelMap: { |
| | money: '总金额', |
| | } |
| | } |
| | this.persentSettings = { |
| | yAxisType: ['percent'], |
| | labelMap: { |
| | setpersent: '销券率', |
| | } |
| | } |
| | this.bingsettxt = { |
| | dimension: 'releaseMoney', |
| | metrics: 'num', |
| | } |
| | return { |
| | namestylelist:[], |
| | yuanlist:[], |
| | numlist:[], |
| | searchBarFixed: false, |
| | LINK:"http://ha.tongchengxianggou.com", |
| | // LINK:"http://pic.tongchengxianggou.com:9011", |
| | //LINK: "http://192.168.1.120:8080", |
| | redPacketType: "", |
| | redPacketName: "", |
| | detdata: [], |
| | detshow: false, |
| | chartpper: { |
| | series: { |
| | type: 'bar', // 添加该属 |
| | smooth: false, |
| | label: { |
| | normal: { |
| |
|
| | } |
| | } |
| |
|
| | } |
| | }, |
| | chartExtend: { |
| | series: { |
| | type: 'line', // 添加该属 |
| | smooth: false, |
| | label: { |
| | normal: { |
| | show: true |
| | } |
| | } |
| | }, |
| | }, |
| | bingExtend: { |
| | legend: { |
| | x: 'center', // 'center' | 'left' | {number}, |
| | y: 'bottom', // 'center' | 'bottom' | {number} |
| | textStyle: { |
| | color: '#A0A0A0', |
| | fontSize: 12 |
| | } |
| | }, |
| | series : [ |
| | { |
| | name: '姓名', |
| | type: 'pie', |
| | radius : '55%', |
| | center: ['40%', '50%'], |
| | itemStyle: { |
| | emphasis: { |
| | shadowBlur: 10, |
| | shadowOffsetX: 0, |
| | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | } |
| | } |
| | } |
| | ] |
| | }, |
| | moredetdata: [], |
| | smalltabdata: [], |
| | columndataview: { |
| | columns: ['payDate', 'money', ], |
| | rows: [] |
| | }, |
| | ratedataview: { |
| | columns: ['redPacketTypeName', 'setpersent', ], |
| | rows: [] |
| | }, |
| | bingDataview: { |
| | columns: ['releaseMoney', 'num', ], |
| | rows: [] |
| | }, |
| | current: 2, |
| | viewstyle: "1,2", |
| | platform: ["自营", "合作"], |
| | platformval: ["自营", "合作"], |
| | workDo: "", |
| | select: 0, |
| | value: [], |
| | chartdata: { |
| | startTime: null, |
| | endTime: null, |
| | workDo: "" |
| | }, |
| | allnum:"", |
| | allnomery:"", |
| | viewname:[], |
| | tabledata: [], |
| | tabledata2: [], |
| | cweek: null, |
| | visible: false, |
| | pickerOptions: { |
| | onPick: (dateRange => { |
| | if(dateRange.maxDate) { |
| | this.current = -1; |
| | } |
| |
|
| | }) |
| | }, |
| | } |
| | }, |
| | mounted() { |
| | console.log(this.chartExtend) |
| | var end_value = this.formartDate(new Date()); |
| | var begin_value = this.formartDate(new Date() - 3600 * 1000 * 24 * 6); |
| | this.value = [begin_value, end_value]; |
| | this.gitList(this.value); |
| | var that = this; |
| | window.addEventListener('scroll', function() { |
| | let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; |
| | let offsetTop = document.querySelector('#searchBar').offsetTop; |
| | if (scrollTop > offsetTop) { |
| | that.searchBarFixed = true; |
| | } else { |
| | that.searchBarFixed = false; |
| | } |
| |
|
| | }) |
| | }, |
| | methods: { |
| | stylecheck(valstyle) { |
| | if(valstyle.indexOf("自营") === -1) { |
| | if(valstyle.length == 1) { |
| | this.viewstyle = "2" |
| | } |
| | } else if(valstyle.indexOf("合作") === -1) { |
| | if(valstyle.length == 1) { |
| | this.viewstyle = "1" |
| | } |
| | } |
| | if(valstyle.length == 0) { |
| | this.viewstyle = "1,2" |
| | } else if(valstyle.length == 2) { |
| | this.viewstyle = "1,2" |
| | } |
| | }, |
| | formartDate(param) { |
| | let date = new Date(param); |
| | var Y = date.getFullYear() + '-'; |
| | var M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'; |
| | var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '; |
| | var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'; |
| | var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'; |
| | var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); |
| | return Y + M + D; |
| | }, |
| | choosetime(sta) { |
| | this.current = sta; |
| | if(sta == 0) { |
| | let end_value0 = this.formartDate(new Date()); |
| | let begin_value0 = this.formartDate(new Date() - 3600 * 1000 * 24 * 0); |
| | this.value = [begin_value0, end_value0]; |
| | } |
| | if(sta == 1) { |
| | let end_value1 = this.formartDate(new Date() - 3600 * 1000 * 24 * 1); |
| | let begin_value1 = this.formartDate(new Date() - 3600 * 1000 * 24 * 1); |
| | this.value = [begin_value1, end_value1]; |
| | } |
| | if(sta == 2) { |
| | let end_value2 = this.formartDate(new Date()); |
| | let begin_value2 = this.formartDate(new Date() - 3600 * 1000 * 24 * 6); |
| | this.value = [begin_value2, end_value2]; |
| | } |
| | if(sta == 3) { |
| | let end_value3 = this.formartDate(new Date()); |
| | let begin_value3 = this.formartDate(new Date() - 3600 * 1000 * 24 * 30); |
| | this.value = [begin_value3, end_value3]; |
| | } |
| | }, |
| | filercharts() { |
| | this.gitList(this.value); |
| | }, |
| | watchfor(itemval) { |
| | this.viewtxt= |
| | this.detshow = true; |
| | this.redPacketType = itemval.redPacketType; |
| | this.redPacketName = itemval.redPacketName; |
| | var param = new FormData(); //创建form对象 |
| | param.append('startTime', this.value[0]) |
| | param.append('endTime', this.value[1]) |
| | param.append('redPacketType', this.redPacketType) |
| | param.append('redPacketName', this.redPacketName) |
| | axios({ |
| | method: 'POST', |
| | url: this.LINK + "/api/v3/statistic/yunyingRedpacketOrder", |
| | headers: { |
| | 'Content-Type': 'application/x-www-form-urlencoded' |
| | }, |
| | data: param, |
| | }).then(res => { |
| | if(res.data.code == 200) { |
| | this.detdata = res.data.data |
| | } else { |
| | this.$message({ |
| | type: 'error', |
| | message: res.data.msg |
| | }); |
| | } |
| | }) |
| | }, |
| | closedet() { |
| | this.detshow = false; |
| | }, |
| | outdatahiaght() { |
| | var url = this.LINK + "/api/v3/statistic/redPacketToExcel"; |
| | var urldata = url + "?startTime=" + this.value[0] + "&endTime=" + this.value[1] |
| | window.open(urldata); |
| | }, |
| | updetdata() { |
| | var url = this.LINK + "/api/v3/statistic/redPacketOrderToExcel"; |
| | var urldata = url + "?startTime=" + this.value[0] + "&endTime=" + this.value[1] + "&redPacketType=" + this.redPacketType + "&redPacketName=" + this.redPacketName; |
| | window.open(urldata); |
| | }, |
| | gitList(alview) { |
| | var param = new FormData(); //创建form对象 |
| | param.append('startTime', this.value[0]) |
| | param.append('endTime', this.value[1]) |
| | axios({ |
| | method: 'POST', |
| | url: this.LINK + "/api/v3/statistic/yunyingRedpacketStatistic", |
| | headers: { |
| | 'Content-Type': 'application/x-www-form-urlencoded' |
| | }, |
| | data: param, |
| | }).then(res => { |
| | if(res.data.code == 200) { |
| | this.yuanlist=[]; |
| | this.numlist=[]; |
| | this.namestylelist=[]; |
| | this.moredetdata = res.data.data.redPacketTypeAndName; //优惠券明细明细 |
| | this.smalltabdata = res.data.data.redPacketType; // |
| | let sarr = []; |
| | res.data.data.redPacketType.forEach((item)=>{ |
| | this.namestylelist.push({ |
| | redPacketTypeName: item.redPacketTypeName, |
| | }); |
| | this.yuanlist.push({ |
| | useMoney: (parseInt(item.useMoney)).toFixed(2), |
| | }); |
| | this.numlist.push({ |
| | useNum: parseInt(item.useNum), |
| | }); |
| | }) |
| | var allnum = 0; |
| | var allmoney = 0; |
| | for (var i=this.numlist.length-1; i>=0; i--) { |
| | allnum += this.numlist[i].useNum; |
| | } |
| | for (var i=this.yuanlist.length-1; i>=0; i--) { |
| | allmoney += parseInt(this.yuanlist[i].useMoney); |
| | } |
| | this.allnum= allnum; |
| | this.allnomery=allmoney.toFixed(2) |
| |
|
| |
|
| | this.columndataview.rows = res.data.data.redPacketDayUse; //柱状图 |
| | this.bingDataview.rows = res.data.data.redPacketGet; //柱状图 |
| | for(let item of res.data.data.redPacketUseRate) { |
| | this.$set(item, 'setpersent', (item.useNum / item.allNum)) |
| | } |
| | this.ratedataview.rows = res.data.data.redPacketUseRate; //柱状图 |
| | } else { |
| | this.$message({ |
| | type: 'error', |
| | message: res.data.msg |
| | }); |
| | } |
| | }) |
| | } |
| | }, |
| | }); |
| | </script> |
| | </body> |
| | <style> |
| | #app { |
| | box-sizing: border-box; |
| | background: #f0f0f0; |
| | width: 100%; |
| | } |
| | </style> |
| | <style scoped> |
| | .builddata{ |
| | font-size:14px; |
| | width: 96%; |
| | margin: auto; |
| | box-sizing: border-box; |
| | border: 1px solid #EBEEF5; |
| | } |
| | .builddata p{ |
| | padding: 0px; |
| | margin: 0px; |
| | width: 100%; |
| | display: block; |
| | overflow: hidden; |
| | clear: both; |
| | } |
| | .builddata span{ |
| | display: inline-block; |
| | float: left; |
| | width: 12.5%; |
| | height: 47px; |
| | line-height: 47px; |
| | margin: auto; |
| | box-sizing: border-box; |
| | border: 1px solid #EBEEF5; |
| | text-align: center; |
| | } |
| | html, |
| | * { |
| | padding: 0px; |
| | margin: 0px; |
| | } |
| |
|
| | .partview { |
| | width: 98%; |
| | margin-top: 20px; |
| | margin-left: auto; |
| | margin-right: auto; |
| | height: 500px; |
| | clear: both; |
| | overflow: hidden; |
| | } |
| |
|
| | .view1 { |
| | width: 49%; |
| | height: 100%; |
| | float: left; |
| | background: white; |
| | box-sizing: border-box; |
| | padding: 0px 20px; |
| | } |
| | .tdata2 th div{ |
| | text-align: center; |
| | } |
| | .tdata2 tbody tr th span{ |
| | padding: 0px!important; |
| | margin: 0px; |
| | text-align: center; |
| | } |
| | .view2 { |
| | width: 49%; |
| | height: 100%; |
| | float: right; |
| | background: white; |
| | } |
| |
|
| | .view1 span, |
| | .view2 span { |
| | display: block; |
| | padding-left: 40px; |
| | padding-top: 20px; |
| | font-weight: bold; |
| | font-size: 14px; |
| | } |
| |
|
| | .viewall { |
| | width: 98%; |
| | height: 420px; |
| | margin-top: 10px; |
| | margin-left: auto; |
| | margin-right: auto; |
| | clear: both; |
| | background: white; |
| | padding: 20px 0px; |
| | clear: both; |
| | overflow: hidden; |
| | } |
| |
|
| | .viewall span { |
| | padding: 8px 0px; |
| | display: block; |
| | padding-left: 40px; |
| | font-weight: bold; |
| | font-size: 14px; |
| | } |
| |
|
| | .tdata1 { |
| | clear: both; |
| | overflow: hidden; |
| | width: 98%; |
| | margin-left: auto; |
| | margin-right: auto; |
| | background: white; |
| | padding-bottom: 20px; |
| | } |
| |
|
| | .tabcontxt { |
| | width: 100%; |
| | margin: auto; |
| | box-sizing: border-box; |
| | padding: 0px 60px; |
| | } |
| |
|
| | .tdata2 { |
| | clear: both; |
| | overflow: hidden; |
| | margin-top: 20px; |
| | width: 98%; |
| | margin-left: auto; |
| | margin-right: auto; |
| | background: salmon; |
| | background: white; |
| | padding-bottom: 50px |
| | } |
| |
|
| | .tdata2 .youhuitxt { |
| | display: block; |
| | padding: 20px; |
| | display: block; |
| | padding-left: 40px; |
| | font-weight: bold; |
| | font-size: 14px; |
| | } |
| |
|
| | .txttips { |
| | background: white; |
| | padding-left: 30px; |
| | padding-top: 25px; |
| | padding-bottom: 14px; |
| | font-weight: bold; |
| | font-size: 14px; |
| | min-width: 1010px; |
| | } |
| |
|
| | .date_choose { |
| | display: inline-block; |
| | float: right; |
| | } |
| |
|
| | .opera_change { |
| | width: 600px; |
| | margin: 10px auto; |
| | position: relative; |
| | } |
| |
|
| | .ul_center { |
| | width: 600px; |
| | height: 48px; |
| | margin: 10px auto; |
| | border-bottom: 2px solid #f1f1f1; |
| | } |
| |
|
| | .ul_center .item { |
| | position: relative; |
| | cursor: pointer; |
| | float: left; |
| | height: 45px; |
| | padding: 0 20px; |
| | margin: 0 20px; |
| | background: #ffffff; |
| | font-size: 14px; |
| | color: #666; |
| | line-height: 45px; |
| | border-bottom: 3px solid #ffffff; |
| | } |
| |
|
| | .ul_center .item.active { |
| | color: rgba(24, 144, 255, 1); |
| | background: rgba(24, 144, 255, 0.1); |
| | border-bottom: 3px solid rgba(24, 144, 255, 1); |
| | } |
| |
|
| | .container { |
| | width: 100%; |
| | max-width: 1600px; |
| | overflow-y: auto; |
| | } |
| |
|
| | .channel_change { |
| | padding: 10px 10px; |
| | } |
| |
|
| | .channel_change::after { |
| | display: block; |
| | content: ""; |
| | visibility: hidden; |
| | clear: both; |
| | height: 0; |
| | } |
| |
|
| | .opera_show .btn { |
| | width: 40%; |
| | float: right; |
| | } |
| |
|
| | .opera .m-top { |
| | background: #ffffff; |
| | padding: 0 10px; |
| | } |
| |
|
| | .opera .m-top::after { |
| | display: block; |
| | height: 0; |
| | content: " "; |
| | visibility: hidden; |
| | clear: both; |
| | } |
| |
|
| | .opera .top_inline { |
| | padding: 20px 0 0 0; |
| | display: inline-block; |
| | } |
| |
|
| | .opera .top_inline::after { |
| | display: block; |
| | content: " "; |
| | visibility: hidden; |
| | height: 0; |
| | clear: both; |
| | } |
| |
|
| | .opera .top_inline .tit { |
| | float: left; |
| | font-size: 14px; |
| | line-height: 40px; |
| | color: #606266; |
| | padding: 0px 10px 0px 30px; |
| | } |
| |
|
| | .opera .top_inline .data_choose { |
| | float: left; |
| | line-height: 40px; |
| | } |
| |
|
| | .opera_show { |
| | position: absolute; |
| | top: 70px; |
| | left: 0; |
| | width: 700px; |
| | height: 300px; |
| | border: 1px solid #EBEEF5; |
| | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
| | border-radius: 4px; |
| | background: #fff; |
| | z-index: 99; |
| | } |
| |
|
| | .opera_show .c_list { |
| | width: 120px; |
| | float: left; |
| | } |
| |
|
| | .opera_alt_show { |
| | position: absolute; |
| | top: 51px; |
| | left: 50%; |
| | margin-left: -10px; |
| | width: 20px; |
| | height: 20px; |
| | z-index: 999; |
| | } |
| |
|
| | .opera_alt_show::after { |
| | content: ''; |
| | position: absolute; |
| | bottom: 0px; |
| | left: 0px; |
| | border-left: 10px solid transparent; |
| | border-right: 10px solid transparent; |
| | border-bottom: 10px solid #fff; |
| | } |
| |
|
| | .opera_alt_show::before { |
| | position: absolute; |
| | bottom: 0px; |
| | left: 0px; |
| | content: ''; |
| | border-left: 10px solid transparent; |
| | border-right: 10px solid transparent; |
| | border-bottom: 10px solid rgba(0, 0, 0, .1); |
| | } |
| |
|
| | .table_bottom { |
| | padding: 20px 0; |
| | } |
| |
|
| | .p20 { |
| | padding: 20px; |
| | } |
| |
|
| | .mt20 { |
| | margin-top: 20px; |
| | } |
| |
|
| | .mt40 { |
| | margin-top: 40px; |
| | } |
| |
|
| | .mt30 { |
| | margin-top: 30px; |
| | } |
| |
|
| | .mt10 { |
| | margin-top: 10px; |
| | } |
| |
|
| | .hide { |
| | display: none; |
| | } |
| |
|
| | .mt40::after { |
| | display: block; |
| | height: 0; |
| | visibility: hidden; |
| | content: ""; |
| | clear: both; |
| | } |
| |
|
| | .mt20::after { |
| | display: block; |
| | height: 0; |
| | visibility: hidden; |
| | content: ""; |
| | clear: both; |
| | } |
| |
|
| | .mt30::after { |
| | display: block; |
| | height: 0; |
| | visibility: hidden; |
| | content: ""; |
| | clear: both; |
| | } |
| |
|
| | .top_lab { |
| | float: left; |
| | line-height: 34px; |
| | } |
| |
|
| | .check_pt { |
| | line-height: 34px; |
| | } |
| |
|
| | .check_pt span { |
| | float: left; |
| | margin-right: 20px; |
| | } |
| |
|
| | .check_pt span input { |
| | float: left; |
| | width: 20px; |
| | height: 20px; |
| | margin-top: 5px; |
| | } |
| |
|
| | .sx_btn { |
| | width: 80px; |
| | height: 34px; |
| | background: rgba(69, 154, 248, 1); |
| | border-radius: 5px; |
| | color: rgba(255, 255, 255, 1); |
| | text-align: center; |
| | line-height: 34px; |
| | border: 0; |
| | outline: 0; |
| | } |
| |
|
| | .sx_btn:hover { |
| | opacity: 0.9; |
| | } |
| |
|
| | h2 { |
| | font-size: 14px; |
| | font-weight: bold; |
| | color: rgba(80, 80, 80, 1); |
| | } |
| |
|
| | .line_1 { |
| | width: 100%; |
| | height: 1px; |
| | background: rgba(153, 153, 153, 0.2); |
| | } |
| |
|
| | .or_fl { |
| | width: 50%; |
| | min-width: 600px; |
| | margin: 0 auto; |
| | flex: 1; |
| | padding: 0 20px; |
| | } |
| |
|
| | .flex_opera { |
| | display: flex; |
| | } |
| |
|
| | .fixed_table_show { |
| | top: 0; |
| | left: 1%; |
| | position: fixed; |
| | width: 98%; |
| | padding: 0 60px; |
| | box-sizing: border-box; |
| | z-index: 500; |
| | opacity: 0; |
| | } |
| |
|
| | .fixed_table_show.show { |
| | opacity: 1; |
| | } |
| |
|
| | .fixed_table_show ul { |
| |
|
| | list-style:none; |
| | width: 100%; |
| | display: flex; |
| | background: rgb(229, 229, 229); |
| | color: rgb(89, 89, 89); |
| | border: rgb(219, 219, 219); |
| | } |
| |
|
| | .fixed_table_show li { |
| | font-weight: bold; |
| | list-style:none; |
| | text-align: center; |
| | font-size: 14px; |
| | color: rgb(89, 89, 89); |
| | padding: 12px 0; |
| | flex: 1; |
| | } |
| |
|
| | .time_choose { |
| | width: 740px; |
| | float: left; |
| | margin-right: 14px; |
| | } |
| | </style> |
| |
|
| | </html> |
网友评论