<template>
  <div class="vsummary">
    <div class="xiangmuxuanze">
      <span>项目选择：</span>
       <Treeselect  :appId.sync="appId" request="1,3"   style="display: inline-block;position: relative;top: 10px;"/>
    </div>
    <div class="timeDiv">
      <div>
        <span>时间范围：</span>
        <a-button type="default" @click="lastWeekHandle">过去一周</a-button>
        <a-range-picker
          :disabled-date="disabledDate"
          format="YYYY-MM-DD"
          style="width: 250px;"
          @change="dateChange"
          v-model="dateRange"
        />
        <span v-show="daysFlag">共{{totalSelect}}天</span>
      </div>
      <div>
        <span>消耗：</span>
        <a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />

        <span>视频ID：</span>
        <a-input class="myinput" v-model="videoID" style="width:250px" />
      </div>

      <a-button type="primary" @click="searchRes">查询</a-button>
    </div>

    <div style="display:flex;margin-bottom:15px" class="btndiv">
      <a-button type="primary" @click="customColumns">自定义列</a-button>
    </div>

    <a-modal v-model="visible" title="自定义列" on-ok="handleOk" width="65%">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
      </template>
      <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
      <div class="zhuti">
        <div class="addlist">
          <p>可添加的列</p>
          <div class="selectionList">
            <!--  v-for="(item,index) in addColumns" :key="index" -->
            <selectComponent :showCol="listNum" @getshowlist="getshowlist" :fixedCol='columnsFixd' />
          </div>
        </div>
        <div class="listNum">
          <p>已选{{listNum.length}}列</p>
          <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
          <ul class="selectlist">
            <li v-for="(item,index) in listNum" :key="index">
              <span v-if=" index <6">
                <a-icon type="lock" />
                <span class="listText">{{item.title}}</span>
              </span>
              <span v-else-if=" index >=6">
                <a-icon type="menu" style="color:#ccc" />
                <span class="listText">{{item.title}}</span>
                <a-icon
                  type="close"
                  @click="deleteCol(item,index)"
                  id="closeStyle"
                  style="fontSize:12px;"
                />
              </span>
            </li>
          </ul>
        </div>
      </div>
    </a-modal>

    <a-table
      size="middle"
      :columns="columns"
      :dataSource="data"
      bordered
      id="outTable"
      :pagination="ipagination"
      :scroll="{ x: scrollX }"
      :loading="loading"
      tableLayout="auto"
      ref="vSummaryTable"
      style="word-break: break-all;"
      :width='tableWidth'
      @change="sort"
    >
     
      <span slot="operation" slot-scope="text, record">
        <a href="javascript:;" @click="opendetail(text, record)" style="margin-right:5px">查看明细</a>
        |
        <a href="javascript:;" @click.stop="showRelevantPeople(record)" style="margin-left:5px">查看相关人员</a>
      </span>

      <div slot="videoU" slot-scope="test,records">
       <img  :src="records.coverUrl"  alt="" style="width:140px" @click="openVideo(records.url)"  @load="loadShow">
      </div>
      <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
      <span
        slot="play25FeedBreakRate"
        slot-scope="play25FeedBreakRate"
      >{{ play25FeedBreakRate | toPercentage }}</span>
      <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
      <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
      <span
        slot="downloadStartRate"
        slot-scope="downloadStartRate"
      >{{ downloadStartRate | toPercentage }}</span>
      <span
        slot="downloadFinishRate"
        slot-scope="downloadFinishRate"
      >{{ downloadFinishRate | toPercentage }}</span>
      <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
      <span
        slot="activeRegisterRate"
        slot-scope="activeRegisterRate"
      >{{ activeRegisterRate | toPercentage }}</span>
      <span
        slot="gameAddictionRate"
        slot-scope="gameAddictionRate"
      >{{ gameAddictionRate | toPercentage }}</span>
      <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
       <span slot="statDatetime" slot-scope="">{{ timedata[0]+'~'+timedata[1]}}</span>

      <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
      <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
      <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
      <span slot="cpc" slot-scope="cpm">{{ cpm | tofixed }}</span>
      <span slot="cpm" slot-scope="cpm">{{ cpm | tofixed }}</span>
      <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
      <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
      <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | tofixed }}</span>
      <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
      <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
      <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
      <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</span>
      <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{ gameAddictionCost | tofixed }}</span>
      <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{ downloadFinishCost | tofixed }}</span>
      <span slot="downloadStartCost" slot-scope="downloadStartCost">{{ downloadStartCost | tofixed }}</span>
      <span slot="installFinishCost" slot-scope="installFinishCost">{{ installFinishCost | tofixed }}</span>
      <span slot="convertCost" slot-scope="convertCost">{{ convertCost | tofixed }}</span>
      
    </a-table>
     <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered='true'>
        <p>编导：{{relevantPeopleData.planName || '暂无数据'}}</p>
        <p>剪辑：{{relevantPeopleData.clipName || '暂无数据'}}</p>
        <p>拍摄：{{relevantPeopleData.shotName || '暂无数据'}}</p>
      </a-modal>
    <!-- 明细表 -->

    <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
      <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
      <a-table
        :columns="detailConsum"
        :data-source="detailData"
        bordered
        tableLayout="auto"
        :pagination="false"
        style="word-break: break-all;"
      >
        <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
      </a-table>
    </a-modal>

    <!-- 视频详情 -->
    <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width='50%'>
        <video
          @click.stop
          class="video"
          :src="videoUrl"
          controls="controls"
          style="height:600px;width:100%"
        >您的浏览器不支持 video 标签。</video>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/ipagination'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import selectComponent from './selectComponent'
import Treeselect from '../components/Treeselect'
const columnsFixd = [
  {
    title: '时间',
    dataIndex: 'statDatetime',
    align: 'center',
    width: 120,
    fixed: 'left',
    scopedSlots: { customRender: 'statDatetime' }
  },
  {
    title: '视频',
    dataIndex: 'videoU',
    align: 'center',
    width: 150,
    fixed: 'left',
    key: 'videoU',
    scopedSlots: { customRender: 'videoU' }
  },
  {
    title: '视频ID',
    dataIndex: 'signature',
    align: 'center',
    width: 100,
    fixed: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width: 100,
    fixed: 'left'
  },
//   {
//     title: '视频链接',
//     dataIndex: 'url',
//     align: 'center',
//     width: 150,
//     fixed: 'left'
//   },
  
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
    width: 180,
    fixed: 'left'
  }
]
let variableCol = [
  {
    title: '上传时间',
    dataIndex: 'materialUploadTime',
    scopedSlots: { customRender: 'materialUploadTime' },
    align: 'center',
    sorter: () => {}
  },
  {
    title: '消耗',
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    align: 'center',
    sorter: (a, b) => a.cost - b.cost
  },
  {
    title: '点击数',
    dataIndex: 'clickMaterial',
    align: 'center',
    scopedSlots: { customRender: 'clickMaterial' },
    sorter: (a, b) => a.clickMaterial - b.clickMaterial
  },
  {
    title: '点击率',
    dataIndex: 'ctr',
    align: 'center',
    scopedSlots: { customRender: 'ctr' },
    sorter: (a, b) => a.ctr - b.ctr
  },

  {
    title: '展示数',
    dataIndex: 'showMaterial',
    align: 'center',
    scopedSlots: { customRender: 'showMaterial' },
    sorter: (a, b) => a.showMaterial - b.showMaterial
  },
  {
    title: '25%进度播放率',
   
    dataIndex: 'play25FeedBreakRate',
    align: 'center',
    scopedSlots: { customRender: 'play25FeedBreakRate' },
    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
  },
  {
    title: '播完率',
    dataIndex: 'playOverRate',
    align: 'center',
    
    tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动，次日稳定',
    scopedSlots: { customRender: 'playOverRate' },

    sorter: (a, b) => a.playOverRate - b.playOverRate
  },
  {
    title: '转化数',
    dataIndex: 'convertMaterial',
    align: 'center',
    scopedSlots: { customRender: 'convertMaterial' },
    sorter: (a, b) => a.convertMaterial - b.convertMaterial
  },
  {
    title: '转化率',
    dataIndex: 'convertRate',
    align: 'center',
    scopedSlots: { customRender: 'convertRate' },
    sorter: (a, b) => a.convertRate - b.convertRate
  }
]
let detailConsum = [
  {
    title: '客户',
    dataIndex: 'advertiserName',
    align: 'center',

    customRender: (value, row, index) => {
      const obj = {
        children: value,
        attrs: {}
      }
      if (index === 0) {
        obj.attrs.rowSpan = 7
      } else {
        obj.attrs.rowSpan = 0
      }
      return obj
    }
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width:150,
    customRender: (value, row, index) => {
      const obj = {
        children: value,
        attrs: {}
      }
      if (index == 0) {
        obj.attrs.rowSpan = 7
      }else {
        obj.attrs.rowSpan = 0
      }
      return obj
    }
  },
  {
    title: '时间',
    dataIndex: 'statDatetime',
    align: 'center',
    width: 120
  },
  {
    title: '消耗',
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    align: 'center'
  },
  {
    title: '环比',
    dataIndex: 'huanbi',
    scopedSlots: { customRender: 'huanbi' },
    align: 'center'
  }
]
let show = 0
export default {
  data() {
    return {
      relevantPeopleVisible:false,
      relevantPeopleData:{},
        roleCode: localStorage.getItem('roleCode'),
       //下拉选择框的数据
      projectArr:[],
      selectValue:'',
       //gudinglie
      columnsFixd:columnsFixd,

      //设置表格的列宽
      tableWidth:'',
       //是否打开视频
      Videovisible:false,
      videoUrl:'',
      columnsFixd,
      //明细的表头
      detailConsum,
      //明细里的数据
      detailData: [],

      consumeValue: 0,
      //视频ID
      videoID: '',
      columns: [...columnsFixd, ...variableCol],
      data: [],
      totalSelect: 0,
      daysFlag: false,
      dateRange: [],
      dataElse: [],
      loading: false,
      visible: false,
      //自定义列的搜索框
      searchInput: '',
      //弹出框中现实的选中列数
      scrollX: 0,
      listNum: [],

      value: this.text,
      editable: false,

      //详细信息的开关
      visibleDetail: false,

      //时间选择 字符串类型
      timedata: [],

      //记录点开的视频的md5
      signature:'',
      appId:[]
    }
  },
     watch:{
      'ipagination.current':function(n,o){
          console.log(n,o)
          this.HttpPost()
      }
  },
  components: {
    selectComponent,
    Treeselect
    
  },
  props: {
    text: String
  },
  mixins: [JeecgListMixin],
  methods: {
     // 查看相关人员
    showRelevantPeople(record){
      this.relevantPeopleVisible=true;
      console.log(record)
      getAction('/ctop/materialAscription/getDetail',{
        code:record.signature
      }).then(res=>{
        console.log(res);
        this.relevantPeopleData=[];
        if(res.result&&res.success){
          this.relevantPeopleData=res.result
        }
        
      })
    },
      sort(pagination, filters, sorter, { currentDataSource }){
          console.log(pagination, filters, sorter)
          if(sorter.order == 'ascend'){
              this.HttpPost(sorter.columnKey+'+')
          }else if(sorter.order == 'descend'){
              this.HttpPost(sorter.columnKey+'-')
          }

      },
    moment,
    loadShow(){
        show++
        if(this.data.length>0){
            if(show == (this.data.length*2)){
                this.data = [...this.data]
            }
        }
    },
    //select切换---项目
    selectChange(key){
        this.selectValue=key;
    },
     //打开视频
    openVideo(val){
        this.Videovisible=true;
        this.videoUrl=val
    },
    videoOk(){
        this.Videovisible=false
    },
    disabledDate(current) {
      // console.log(current)

      return current && current > moment().subtract(1, 'day')
    },
    //过去一周按钮事件
    lastWeekHandle() {
      this.loading = true
      let lastStart = 
        moment()
          .subtract(7, 'days')
      let lastEnd =   moment()
          .subtract(1, 'days')
      

      this.dateRange=[lastStart,lastEnd]
      
      this.totalSelect = 7
      this.daysFlag = true
      this.timedata=[moment(this.dateRange[0]).format('YYYY-MM-DD'),moment(this.dateRange[1]).format('YYYY-MM-DD')]
      
         
        this.HttpPost()

    },

    consumeOnChange() {},
    //tableshuju请求
    HttpPost(sort){
      this.date = []
      this.loading = true
      show = 0
      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListWeek', {
        startDate: this.timedata[0],
        endDate: this.timedata[1],
        cost: this.consumeValue,
        signature: this.videoID,
         pageNo:this.ipagination.current,
        pageSize:this.ipagination.pageSize,
        // projectIds:this.appId
        accountIds:this.appId,
        sort:sort?sort:''
      }).then(res => {
        let resArr = []
        this.loading = false
        if (res.success) {
          let result = res.result
          this.data = result.list.map((item,index)=>{
              return {
                  ...item,
                  key:index
              }
          })
          this.ipagination.total = result.total
        }
      })
    },
    //查询按钮
    searchRes() {
      
      
        this.HttpPost()
    },

    //导出报表
    exportExcel() {
      // var params = {}
      // params.projectId = this.projectId
      // params.disCount = this.discount
      // params.statDate = this.statDate.format('YYYY-MM-DD')
      var name = this.data.filter(item => {
        return item.signature == this.signature
      })[0].projectName
      downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListDetailExportExcel', {
        startDate: this.timedata[0],
        endDate: this.timedata[1],
        signature: this.signature
      }).then(res => {
        let blob = new Blob([res], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) //创建下载的链接
        downloadElement.href = href
        downloadElement.download = name + '-' +this.timedata[0] + '-' + this.timedata[1] +'.xlsx'   //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
      })
    },

    //日期选择回调
    dateChange(data, dataString) {
      console.log(data, dataString)
      if(data.length){
          this.timedata = dataString
          this.dateRange[0] = data[0]
          this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
          this.daysFlag = true
          if (this.totalSelect > 7) {
            this.$message.error('时间跨度太长啦，选小一点好嘛？')
            this.daysFlag = false
            this.dateRange = []
          }
      }else{
        this.daysFlag=false
        this.dateRange=[]
      }
      
    },

    //弹出框打开，自定义列
    customColumns() {
      this.visible = true
       this.listNum = [...this.columns]
    },
    tableHandle(){
      // this.listNum = [...this.columns]
      console.log(this.listNum.length,this.columns)
      this.scrollX=0;
      if(this.listNum.length >= 12|| this.columns.length>=12){
          this.tableWidth=120;
          this.scrollX=this.columns.length*140
          console.log(this.scrollX)
      }else{
        this.scrollX = 0
      }
    },

    //弹出框确定
    handleOk(e) {
      this.loading = false
      
      this.visible = false
      this.tableHandle()
      if(this.listNum.length>=10){

        let newlist=this.listNum.slice(columnsFixd.length)
        console.log(newlist)
        this.columns = [...columnsFixd,...newlist]
      }else{
        this.columns = [...this.listNum]
      }


      if (this.listNum.length == 6) {
        this.columns.map((item, index) => {
          item.width = 300
        })
      } else {
        this.columns.map((item, index) => {
          if (index == 1||index==3) {
            item.width = 150
          } else if (index >= 2 && index < 6 || index == 0) {
            item.width = 100
          }
        })
        // console.log(2)
      }
    },
    //弹出框取消按钮
    handleCancel(e) {
      this.visible = false
    },
    //弹出框里的搜索框
    onSearch(value) {
      console.log(value)
    },

    //清空全部按钮的事件
    clearAllList() {
      this.listNum = [...columnsFixd]

      console.log(this.$refs.vSummaryTable)
    },

    //li展示里的关闭按钮 删除当前被选中的这一个列
    deleteCol(item, index) {
      this.listNum = this.listNum.filter((item1, num) => {
        return num != index
      })
    },

    //表格里的操作 打开明细

    showModal() {
      this.visibleDetail = true
    },
    

    //从自定义列拿选择的项
    getshowlist(val) {
      console.log(val)
      if (val.length) {
        console.log(val);
        this.listNum = [...this.listNum,...val]
        
      } else {
        var arr
        arr = this.listNum.filter((item, index) => {
          return item.dataIndex == val.dataIndex
        })
      }
      if (arr.length > 0) {
        
        var index 
         this.listNum.map((item,ind) => {
          if(item.dataIndex == val.dataIndex){
              index=ind
          }
          
        })
        console.log(index)
        this.listNum.splice(index, 1)
      } else {
        this.listNum.push(val)
      }
    },

    //点击查看明细按钮的事件
    opendetail(text, record) {
      console.log(text, record)
      this.visibleDetail = true
      this.detailData = []

      this.signature=record.signature
      console.log(this.signature)
      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
        startDate: this.timedata[0],
        endDate: this.timedata[1],
        signature: record.signature,
        accountIds:this.appId
      }).then(res => {
        let resArr = []

        console.log(res)
        if (res.success) {
          let result = res.result
          this.detailData.push({ ...result, key: 1 })
          result.map((item, index) => {
            item.key = index
          })
          this.detailData = result
        }
      })
    }
  },
  activated() {
    console.log('activated')
    // this.getParticipateList()
    this.statDate = moment().subtract(1, 'day')
    moment().format('YYYY-MM-DD_HH:mm')



    postAction('/toutiao/videoReportDaily/getColumnJson', {
      columnType:3,
    }).then((res)=>{
      // console.log(res)
      if(res.success){
      if(res.result){
      // console.log(JSON.parse(res.result))
      let columns=JSON.parse(res.result)
      if(columns.length){
        if(columns.length>=columnsFixd.length){
            columns.map((item,index)=>{
             if(index>columnsFixd.length-1){
                 item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
             }})
             columns=columns.slice(columnsFixd.length);
            this.columns=[...columnsFixd,...columns]
            this.tableHandle()
        }
           
        
        // console.log(this.columns)
      }
      }
      }

    })
    this.tableHandle();
  },
  deactivated() {
      let arr = JSON.stringify(this.columns)
      // console.log(arr)
    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
      json: arr,
      columnType: 3
    }).then(res => {
      // console.log(res)
    })
  },

  filters: {
    toPercentage(val) {
      return (val * 100).toFixed(2) + '%'
      // return val
    },
    toshowTime(val) {
      // console.log(val, this.timedata)
      // return this.timedata[0] + '~' + this.timedata[1]
      return val
    },
    tofixed(val){
      return Number(val).toFixed(2)
    }
  },
  mounted() {
    // this.lastWeekHandle();
    let lastStart = 
        moment()
          .subtract(7, 'days')
    let lastEnd =   moment()
          .subtract(1, 'days')
      

    this.dateRange=[lastStart,lastEnd]
    this.lastWeekHandle()
  },
}
</script>
<style lang="less">
// .ant-table .ant-table-fixed-left .ant-table-thead {
//   height: 108px !important ;
// }
.ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title{
       
      // display:block;
        white-space:normal;
       word-break: break-all;
}
</style>
<style lang="less" scoped>
.vsummary {
  width: 100%;
  height: 100%;
}
.xiangmuxuanze{
  margin-bottom: 20px;;
}
.timeDiv {
  display: flex;
  justify-content: space-between;
}
span {
  margin-left: 5px;
}
.myinput {
  width: 40%;
}

.addlist {
  float: left;
  width: 70%;
  border: 1px solid #eee;
}
.listNum {
  float: right;
  width: 28%;
  border: 1px solid #eee;
  position: relative;
}
.zhuti {
  margin-top: 15px;
  overflow: hidden;

  p {
    height: 40px;
    line-height: 20px;
    padding: 10px 15px;

    background: rgb(249, 250, 253);
    border-bottom: 1px solid #eee;
  }
  #btn {
    position: absolute;
    right: 0;
    top: 5px;
  }
  .selectlist {
    width:100%;
    list-style: none;
    margin: 0;
    height: 450px;
    padding: 0 15px 10px;
    overflow: auto;
    
    li {
      width: 100%;
      padding: 5px 8px;
      margin: 6px 0;
      border-radius: 10px;
      background: rgb(248, 248, 248);
      height: 32px;
      position: relative;
      span {
        width: 80%;
        height: 100%;
        display: inline-block;
        margin: 0 10px;
        // overflow:hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
      }
      .listText{
        position: absolute;
        top: 2;
        left: 10;
        width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

      }
      #closeStyle {
        position: absolute;
        top: 9px;
        right: 7px;
      }
    }
  }
}

.addlist {
  float: left;
  width: 70%;
  border: 1px solid #eee;
  .selectionList {
    padding: 10px 15px;
    height: 450px;
    overflow: auto;
    .leibie {
      .leiName {
        font-size: 26px;
        text-align: left;
      }
    }
    .jutixiang {
      display: inline-block;
      width: 32%;
      box-sizing: border-box;
      padding: 10px 3px;
    }
  }
}
#mybtn {
  margin: 0 10px 15px 0;
}
</style>