|
@@ -0,0 +1,626 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- 产量趋势 -->
|
|
|
+ <view class="content">
|
|
|
+ <view class="title_box">
|
|
|
+ <picker mode="selector" :range="array_active" :value="index_active" @change="bindPickerChange_active">
|
|
|
+ <view class="box">
|
|
|
+ <view>{{array_active[index_active]}}</view>
|
|
|
+ <view class="icon">
|
|
|
+ <uni-icons type="arrowdown"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+
|
|
|
+ <view v-if="index_active==1">
|
|
|
+ <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
|
|
|
+ <view class="box">
|
|
|
+ <view>{{date}}</view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="index_active==2">
|
|
|
+ <picker mode="date" :value="date_year" :start="startDate_year" :end="endDate_year" @change="bindDateChange_year" fields="year">
|
|
|
+ <view class="box">
|
|
|
+ <view>{{date_year}}</view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="inner">
|
|
|
+ <view v-show="index_active == 0">
|
|
|
+ <view class="inner_content">
|
|
|
+ <canvas style="width: 700upx; height:600upx;" canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts" @touchstart="touchColumn"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-show="index_active == 1">
|
|
|
+ <view class="inner_content">
|
|
|
+ <canvas style="width: 700upx; height:2500upx;" canvas-id="canvasColumnStack_month" id="canvasColumnStack_month" class="charts" @touchstart="touchColumn_month"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-show="index_active == 2">
|
|
|
+ <view class="inner_content">
|
|
|
+ <canvas style="width: 700upx; height:600upx;" canvas-id="canvasColumnStack_year" id="canvasColumnStack_year" class="charts" @touchstart="touchColumn_year"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from '@/components/u-charts/u-charts.js';
|
|
|
+ var _self;
|
|
|
+
|
|
|
+ // 周产量
|
|
|
+ var canvaColumn=null;
|
|
|
+
|
|
|
+ // 月产量
|
|
|
+ var canvaColumn_month=null;
|
|
|
+
|
|
|
+ // 年产量
|
|
|
+ var canvaColumn_year=null;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name:"p-production-report-inner-2",
|
|
|
+ props:[
|
|
|
+ "mine",
|
|
|
+ "org_num"
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ const currentDate = this.getDate({
|
|
|
+ format: true
|
|
|
+ })
|
|
|
+ const currentDate_year = this.getDate_year({
|
|
|
+ format: true
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ cWidth: '',
|
|
|
+ cHeight: '',
|
|
|
+ pixelRatio: 1,
|
|
|
+ // serverData: '',
|
|
|
+
|
|
|
+
|
|
|
+ // 月
|
|
|
+ cWidth_month: '',
|
|
|
+ cHeight_month: '',
|
|
|
+ pixelRatio_month: 1,
|
|
|
+ cHeight_month:'',
|
|
|
+
|
|
|
+ // 周产量
|
|
|
+
|
|
|
+ // 产量趋势
|
|
|
+ array_active: ['周产量趋势', '月产量趋势','年产量趋势'],
|
|
|
+ index_active: 0,
|
|
|
+ // 年 月
|
|
|
+ date: currentDate,
|
|
|
+ //
|
|
|
+ date_year:currentDate_year,
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 当前月
|
|
|
+ month:""
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 月
|
|
|
+ startDate() {
|
|
|
+ return this.getDate('start');
|
|
|
+ },
|
|
|
+ endDate() {
|
|
|
+ return this.getDate('end');
|
|
|
+ },
|
|
|
+ // 年
|
|
|
+ startDate_year() {
|
|
|
+ return this.getDate_year('start');
|
|
|
+ },
|
|
|
+ endDate_year() {
|
|
|
+ return this.getDate_year('end');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.month = (new Date().getFullYear()) + "-" + (new Date().getMonth()+1)
|
|
|
+ // console.log(this.month)
|
|
|
+ _self = this;
|
|
|
+ this.cWidth = uni.upx2px(680);
|
|
|
+ this.cHeight = uni.upx2px(500);
|
|
|
+
|
|
|
+ this.cWidth_month = uni.upx2px(680);
|
|
|
+ this.cHeight_month = uni.upx2px(2500);
|
|
|
+
|
|
|
+ // 周产量
|
|
|
+ this.getServerData_week();
|
|
|
+
|
|
|
+ // 月产量
|
|
|
+ this.getServerData_month(this.date);
|
|
|
+
|
|
|
+ // 年产量
|
|
|
+ this.getServerData_year(this.date_year);
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 产量趋势 选择列表
|
|
|
+ bindPickerChange_active: function(e) {
|
|
|
+ console.log('picker发送选择改变,携带值为', e.target.value)
|
|
|
+ this.index_active = 0
|
|
|
+
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.index_active = e.target.value
|
|
|
+
|
|
|
+ if(this.index_active == 0){
|
|
|
+ this.getServerData_week(this.date)
|
|
|
+ }else if(this.index_active == 1){
|
|
|
+ // uni.switchTab({
|
|
|
+ // url:"../../tabbar/production/production",
|
|
|
+ // animationType:"fade-in",
|
|
|
+ // animationDuration:50
|
|
|
+ // })
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url:"../../production/p-i-metering/p-i-metering",
|
|
|
+ // animationType:"fade-in",
|
|
|
+ // animationDuration:150
|
|
|
+ // })
|
|
|
+ // console.log(this.date)
|
|
|
+ this.date = this.month
|
|
|
+ this.getServerData_month(this.month)
|
|
|
+ }else if(this.index_active == 2){
|
|
|
+ this.getServerData_year(this.date_year)
|
|
|
+ }
|
|
|
+
|
|
|
+ },100)
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 月
|
|
|
+ bindDateChange: function(e) {
|
|
|
+ this.date = e.target.value
|
|
|
+ console.log(this.date)
|
|
|
+ this.getServerData_month(this.date);
|
|
|
+ },
|
|
|
+ getDate(type) {
|
|
|
+ const date = new Date();
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ let day = date.getDate();
|
|
|
+
|
|
|
+ if (type === 'start') {
|
|
|
+ year = year - 60;
|
|
|
+ } else if (type === 'end') {
|
|
|
+ year = year + 2;
|
|
|
+ }else{
|
|
|
+ year = year
|
|
|
+ }
|
|
|
+ month = month > 9 ? month : '0' + month;
|
|
|
+ return `${year}-${month}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 年
|
|
|
+ bindDateChange_year: function(e) {
|
|
|
+ this.date_year = e.target.value
|
|
|
+ console.log(this.date_year)
|
|
|
+
|
|
|
+ this.getServerData_year(this.date_year)
|
|
|
+ },
|
|
|
+ getDate_year(type) {
|
|
|
+ const date = new Date();
|
|
|
+ let year = date.getFullYear();
|
|
|
+
|
|
|
+ if (type === 'start') {
|
|
|
+ year = year - 60;
|
|
|
+ } else if (type === 'end') {
|
|
|
+ year = year + 2;
|
|
|
+ }
|
|
|
+ return `${year}`;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 周产量
|
|
|
+ getServerData_week(){
|
|
|
+ this.$p_api.coalmine_one_trend({
|
|
|
+ type:"week",
|
|
|
+ mine:this.mine,
|
|
|
+ org_num:this.org_num
|
|
|
+ }).then((res)=>{
|
|
|
+ // console.log(res.data.data)
|
|
|
+
|
|
|
+ let ColumnStack={
|
|
|
+ categories:[],
|
|
|
+ series:[
|
|
|
+ {
|
|
|
+ "name": "早班",
|
|
|
+ "data": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "中班",
|
|
|
+ "data": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "晚班",
|
|
|
+ "data": []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ const categories = res.data.data
|
|
|
+ categories.map(function(item,index){
|
|
|
+ // console.log(item.date,index)
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.date;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack.categories[index] = sevm
|
|
|
+ })
|
|
|
+
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n1;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack.series[0].data[index] = sevm
|
|
|
+ })
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n2;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack.series[1].data[index] = sevm
|
|
|
+ })
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n3;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack.series[2].data[index] = sevm
|
|
|
+ })
|
|
|
+
|
|
|
+ _self.showColumnStack("canvasColumnStack",ColumnStack);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ showColumnStack(canvasId,chartData){
|
|
|
+ canvaColumn=new uCharts({
|
|
|
+ $this:_self,
|
|
|
+ canvasId: canvasId,
|
|
|
+ type: 'column',
|
|
|
+ legend:{show:true},
|
|
|
+ fontSize:11,
|
|
|
+ background:'#FFFFFF',
|
|
|
+ pixelRatio:_self.pixelRatio,
|
|
|
+ animation: true,
|
|
|
+ categories: chartData.categories,
|
|
|
+ legend:{
|
|
|
+ position:'top',
|
|
|
+ margin:10,
|
|
|
+
|
|
|
+ },
|
|
|
+ series: chartData.series,
|
|
|
+ xAxis: {
|
|
|
+ disableGrid:true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ //disabled:true
|
|
|
+ },
|
|
|
+ dataLabel: false,
|
|
|
+ width: _self.cWidth*_self.pixelRatio,
|
|
|
+ height: _self.cHeight*_self.pixelRatio,
|
|
|
+ extra: {
|
|
|
+ column: {
|
|
|
+ type:'stack',
|
|
|
+ width: _self.cWidth*_self.pixelRatio*0.5/chartData.categories.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ touchColumn(e){
|
|
|
+ canvaColumn.showToolTip(e, {
|
|
|
+ format: function (item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 月产量
|
|
|
+ getServerData_month(date){
|
|
|
+ this.$p_api.coalmine_one_trend({
|
|
|
+ type:"month",
|
|
|
+ date: date,
|
|
|
+ mine:this.mine,
|
|
|
+ org_num:this.org_num
|
|
|
+ }).then((res)=>{
|
|
|
+ // console.log(res.data.data)
|
|
|
+ let ColumnStack_month={
|
|
|
+ categories:[],
|
|
|
+ series:[
|
|
|
+ {
|
|
|
+ "name": "晚班",
|
|
|
+ "data": []
|
|
|
+ }, {
|
|
|
+ "name": "早班",
|
|
|
+ "data": []
|
|
|
+ }, {
|
|
|
+ "name": "中班",
|
|
|
+ "data": []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ // console.log(item.date,index)
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.date;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_month.categories[index] = sevm
|
|
|
+ })
|
|
|
+
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n1;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_month.series[0].data[index] = sevm
|
|
|
+ })
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n2;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_month.series[1].data[index] = sevm
|
|
|
+ })
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n3;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_month.series[2].data[index] = sevm
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ _self.showColumnStack_month("canvasColumnStack_month",ColumnStack_month);
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ showColumnStack_month(canvasId,chartData){
|
|
|
+ canvaColumn_month=new uCharts({
|
|
|
+ $this:_self,
|
|
|
+ canvasId: canvasId,
|
|
|
+ type: 'column',
|
|
|
+ legend:{show:true},
|
|
|
+ fontSize:11,
|
|
|
+ background:'#FFFFFF',
|
|
|
+ pixelRatio:_self.pixelRatio_month,
|
|
|
+ animation: true,
|
|
|
+ rotate:true,
|
|
|
+ categories: chartData.categories,
|
|
|
+ legend:{
|
|
|
+ show:false,
|
|
|
+ position:'top',
|
|
|
+ margin:10,
|
|
|
+
|
|
|
+ },
|
|
|
+ series: chartData.series,
|
|
|
+ xAxis: {
|
|
|
+ disableGrid:true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ //disabled:true
|
|
|
+ },
|
|
|
+ dataLabel: false,
|
|
|
+ width: _self.cWidth_month*_self.pixelRatio_month,
|
|
|
+ height: _self.cHeight_month*_self.pixelRatio_month,
|
|
|
+ extra: {
|
|
|
+ column: {
|
|
|
+ type:'stack',
|
|
|
+ width: _self.cWidth_month*_self.pixelRatio_month*0.5/chartData.categories.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ touchColumn_month(e){
|
|
|
+ canvaColumn_month.showToolTip(e, {
|
|
|
+ format: function (item, category) {
|
|
|
+ return item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 年产量
|
|
|
+ getServerData_year(date){
|
|
|
+ this.$p_api.coalmine_one_trend({
|
|
|
+ type:"year",
|
|
|
+ date: date,
|
|
|
+ mine:this.mine,
|
|
|
+ org_num:this.org_num
|
|
|
+ }).then((res)=>{
|
|
|
+
|
|
|
+ // console.log(res.data.data)
|
|
|
+
|
|
|
+ let ColumnStack_year={
|
|
|
+ categories:[],
|
|
|
+ series:[
|
|
|
+ {
|
|
|
+ "name": "早班",
|
|
|
+ "data": []
|
|
|
+ }, {
|
|
|
+ "name": "中班",
|
|
|
+ "data": []
|
|
|
+ }, {
|
|
|
+ "name": "晚班",
|
|
|
+ "data": []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ // console.log(item.date,index)
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.date;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_year.categories[index] = sevm
|
|
|
+ })
|
|
|
+
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n1;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_year.series[0].data[index] = sevm
|
|
|
+ })
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n2;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_year.series[1].data[index] = sevm
|
|
|
+ })
|
|
|
+ res.data.data.map(function(item,index){
|
|
|
+ //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
|
|
|
+ var sevm = {};
|
|
|
+ //给每一项中的参数初始化并赋值
|
|
|
+ sevm = item.n3;
|
|
|
+ //将项放进新的数组
|
|
|
+ ColumnStack_year.series[2].data[index] = sevm
|
|
|
+ })
|
|
|
+
|
|
|
+ _self.showColumnStack_year("canvasColumnStack_year",ColumnStack_year);
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ showColumnStack_year(canvasId,chartData){
|
|
|
+ canvaColumn_year=new uCharts({
|
|
|
+ $this:_self,
|
|
|
+ canvasId: canvasId,
|
|
|
+ type: 'column',
|
|
|
+ legend:{show:true},
|
|
|
+ fontSize:11,
|
|
|
+ background:'#FFFFFF',
|
|
|
+ pixelRatio:_self.pixelRatio,
|
|
|
+ animation: true,
|
|
|
+ categories: chartData.categories,
|
|
|
+ legend:{
|
|
|
+ position:'top',
|
|
|
+ margin:10,
|
|
|
+
|
|
|
+ },
|
|
|
+ series: chartData.series,
|
|
|
+ xAxis: {
|
|
|
+ disableGrid:true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ //disabled:true
|
|
|
+ },
|
|
|
+ dataLabel: false,
|
|
|
+ width: _self.cWidth*_self.pixelRatio,
|
|
|
+ height: _self.cHeight*_self.pixelRatio,
|
|
|
+ extra: {
|
|
|
+ column: {
|
|
|
+ type:'stack',
|
|
|
+ width: _self.cWidth*_self.pixelRatio*0.5/chartData.categories.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ touchColumn_year(e){
|
|
|
+ canvaColumn_year.showToolTip(e, {
|
|
|
+ format: function (item, category) {
|
|
|
+ return item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+ .content{
|
|
|
+ width: 700rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 3rpx 29rpx 0rpx rgba(59, 74, 116, 0.14);
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .time{
|
|
|
+ line-height: 94rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title{
|
|
|
+ line-height: 96rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #232627;
|
|
|
+
|
|
|
+ border-bottom: 2rpx solid #f3f3f3;
|
|
|
+ }
|
|
|
+ .inner{
|
|
|
+ min-height: 200rpx;
|
|
|
+ .inner_content{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title_box{
|
|
|
+ height: 96rpx;
|
|
|
+ border-bottom: 2rpx solid #f3f3f3;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .box{
|
|
|
+ margin-left: 22rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ border: 1rpx solid #BDC3C7;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ // 文本
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #232627;
|
|
|
+ line-height: 50rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ .icon{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|