<template>
  <view class="market_index">
    <view class="market_head" :class="{ market_head1: isUnfold }">
      <view class="market_head_top">
        <view class="closed_price" @tap="collection">
          <view class="closed_price_top">
            <view
              class="closed_price_text colorGreen"
              :class="{ colorRed: data.changePercentage > 0 }"
              >{{ data.closingPrice }}</view
            >
            <u-icon v-if="!isCollection" name="star" size="20"></u-icon>
            <u-icon v-else name="star-fill" size="20" color="#EC7C00"></u-icon>
          </view>
          <view
            class="closed_price_bottom colorGreen"
            :class="{ colorRed: data.changePercentage > 0 }"
            >{{ data.cha.toFixed(2) }} [{{
              data.changePercentage.toFixed(2)
            }}%]</view
          >
        </view>
        <view class="closed_opening">
          <view style="margin-top: 4rpx">
            <text class="head_text">开</text>
            <text class="head_num">{{ data.openingPrice }}</text>
          </view>
          <view style="margin-top: 20rpx">
            <text class="head_text">收</text>
            <text class="head_num">{{ data.closingPrice }}</text>
          </view>
        </view>
        <view class="quantity_quota" @tap="unfold">
          <view style="margin-top: 4rpx">
            <text class="head_text">量</text>
            <text class="head_num">{{ data.volume }}</text>
          </view>
          <view style="margin-top: 20rpx">
            <text class="head_text">额</text>
            <text class="head_num">{{ data.turnover }}</text>
          </view>
        </view>
        <view @tap="unfold">
          <image
            src="../../../static/zhan.png"
            v-if="!isUnfold"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
          />
          <image
            v-else
            src="../../../static/show.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <view class="line"> </view>
    <view style="height: 1100rpx; padding: 0 20rpx; width: 710rpx">
      <l-echart ref="chartK"></l-echart>
    </view>
    <view class="nav_list">
      <text
        v-for="(item, index) in navList"
        :key="index"
        class="nav_list_text"
        :class="{ nav_list_text1: item.is }"
        @tap="selectNav(item.name)"
      >
        {{ item.name }}
      </text>
    </view>
    <view v-if="!showLoad">
      <view v-if="navList[0].is">
        <view>
          <l-echart ref="columnar"></l-echart>
        </view>
      </view>
      <view v-else>
        <view class="private_table_head">
          <view class="private_table_head_left">
            <view class="private_head_name">股票名称</view>
            <view class="private_head_price">价格</view>
            <view class="private_head_gains">涨幅</view>
          </view>
          <view class="private_table_head_right">
            <view>{{ currentBelong }}</view>
            <!-- <image
              src="../static/jiangxu_false.png"
              class="private_screening_icon"
              mode="scaleToFill"
            /> -->
          </view>
        </view>
        <view v-if="list.length > 0">
          <view
            class="private_table_list"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="private_table_list_left">
              <view class="table_list_name">
                <view>{{ item.securityName }}</view>
                <view class="table_list_code">{{ item.securityCode }}</view>
              </view>
              <view
                class="table_list_price"
                :class="{ table_list_price1: item.changePercentage < 0 }"
              >
                {{ item.closingPrice }}
              </view>
              <view
                class="table_list_gains"
                :class="{ table_list_price1: item.changePercentage < 0 }"
              >
                {{ item.changePercentage.toFixed(2) }}
              </view>
            </view>
            <view>{{ item.dongCaiIndustryIndexLevel2 }}</view>
          </view>
        </view>
        <view v-else>
          <u-empty
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            marginTop="50"
          >
          </u-empty>
        </view>
      </view>
      <!-- <view
        class="list_footer"
        v-if="list.length > 10 && !navList[0].is"
        @tap="toTrendDetail"
      >
        <view class="see_more">
          <view>查看更多</view>
          <image
            src="../static/chakangengduo.png"
            class="see_more_icon"
            mode="scaleToFill"
          />
        </view>
      </view> -->
    </view>
    <view v-else class="show_load">
      <u-loading-icon></u-loading-icon>
    </view>
    <u-popup :show="isUnfold" mode="top">
      <view class="market_head" :class="{ market_head1: isUnfold }">
        <view class="market_head_top">
          <view class="closed_price" @tap="collection">
            <view class="closed_price_top">
              <view
                class="closed_price_text colorGreen"
                :class="{ colorRed: data.changePercentage > 0 }"
                >{{ data.closingPrice }}</view
              >
              <u-icon v-if="!isCollection" name="star" size="20"></u-icon>
              <u-icon
                v-else
                name="star-fill"
                size="20"
                color="#EC7C00"
              ></u-icon>
            </view>
            <view
              class="closed_price_bottom colorGreen"
              :class="{ colorRed: data.changePercentage > 0 }"
              >{{ data.cha.toFixed(2) }} [{{
                data.changePercentage.toFixed(2)
              }}%]</view
            >
          </view>
          <view class="closed_opening">
            <view style="margin-top: 4rpx">
              <text class="head_text">开</text>
              <text class="head_num">{{ data.openingPrice }}</text>
            </view>
            <view style="margin-top: 20rpx">
              <text class="head_text">收</text>
              <text class="head_num">{{ data.closingPrice }}</text>
            </view>
          </view>
          <view class="quantity_quota" @tap="unfold">
            <view style="margin-top: 4rpx">
              <text class="head_text">量</text>
              <text class="head_num">{{ data.volume }}</text>
            </view>
            <view style="margin-top: 20rpx">
              <text class="head_text">额</text>
              <text class="head_num">{{ data.turnover }}</text>
            </view>
          </view>
          <view @tap="unfold">
            <image
              src="../../../static/zhan.png"
              v-if="!isUnfold"
              style="width: 32rpx; height: 32rpx"
              mode="scaleToFill"
            />
            <image
              v-else
              src="../../../static/show.png"
              style="width: 32rpx; height: 32rpx"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="market_head_bottom">
          <view class="head_bottom_list">
            <view class="security_code">
              <view class="bottom_list_text"> 证券代码 </view>
              <view class="bottom_list_num">{{ data.securityCode }}</view>
            </view>
            <view class="trade_date">
              <view class="bottom_list_text"> 交易日 </view>
              <view class="bottom_list_num">{{ data.businessDate }}</view>
            </view>
            <view class="opening_high">
              <view class="bottom_list_text"> 最高 </view>
              <view class="bottom_list_num">{{ data.highestPrice }}</view>
            </view>
            <view class="opening_less">
              <view class="bottom_list_text"> 最低 </view>
              <view class="bottom_list_num">{{ data.lowestPrice }}</view>
            </view>
          </view>
          <view class="head_bottom_list">
            <view class="security_code">
              <view class="bottom_list_text"> 涨跌幅 </view>
              <view class="bottom_list_num"
                >{{ data.changePercentage.toFixed(2) }}%</view
              >
            </view>
            <view class="trade_date">
              <view class="bottom_list_text"> 10日涨跌幅 </view>
              <view class="bottom_list_num"
                >{{ data.rangeRiseLosses10.toFixed(2) }}%</view
              >
            </view>
            <view class="opening_high">
              <view class="bottom_list_text"> 20日涨跌幅 </view>
              <view class="bottom_list_num"
                >{{ data.rangeRiseLosses20.toFixed(2) }}%</view
              >
            </view>
            <view class="opening_less">
              <view class="bottom_list_text"> 60日涨跌幅 </view>
              <view class="bottom_list_num"
                >{{ data.rangeRiseLosses60.toFixed(2) }}%</view
              >
            </view>
          </view>
          <view class="head_bottom_list">
            <view class="security_code">
              <view class="bottom_list_text"> 流通 </view>
              <view class="bottom_list_num">{{ data.freeCapitalization }}</view>
            </view>
            <view class="trade_date">
              <view class="bottom_list_text"> 20日区间平均成交量 </view>
              <view class="bottom_list_num">{{ data.averageVolumeDay20 }}</view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 个股所属板块 -->
    <u-picker
      :show="showPrivateBelong"
      :columns="columnsBelong"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelPrivateBelong"
      @confirm="confirmPrivateBelong"
    ></u-picker>
  </view>
</template>

<script>
  import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
  export default {
    data() {
      return {
        showLoad: false,
        // 个股所属板块
        showPrivateBelong: false,
        currentBelong: '所属板块',
        columnsBelong: [['所属板块', '成交量']],
        isCollection: false,
        isUnfold: false,
        navList: [
          {
            name: '涨跌区间',
            is: true,
          },
          {
            name: '涨停个股',
            is: false,
          },
          {
            name: '跌停个股',
            is: false,
          },
        ],
        list: [],
        navId: '',
        date: '',
        marketType: '',
        marketCode: '',
        data: {},
        pagenum: 1,
        last_page: null,
      }
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: options.name,
      })
      this.rendingType(options.name)
      this.queryCollection()
      this.date = options.date
      this.rending()
    },
    onReachBottom() {
      if (this.pagenum < this.last_page) {
        this.getnewGoods()
      }
    },
    mounted() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initEcharts()
        this.columnarInitCharts()
      })
    },
    methods: {
      unfold() {
        this.isUnfold = !this.isUnfold
      },
      rending() {
        this.$api
          .post('/stock/appBigDetail', {
            businessDate: this.date,
            // businessDate: '',
            securityCode: this.marketCode,
            // securityCode: '000001',
            securityType: this.marketType,
            // securityType: 'SH',
          })
          .then(r => {
            if (r) {
              this.data = r.originalIssueStock
              this.data.cha = this.data.closingPrice - this.data.openingPrice
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      rendingType(name) {
        if (name == '上证指数') {
          this.marketType = 'SH'
          this.marketCode = '000001'
        } else if (name == '深证指数') {
          this.marketType = 'SZ'
          this.marketCode = '399006'
        } else if (name == '创业板') {
          this.marketType = '30'
          this.marketCode = '399001'
        } else if (name == '科创板') {
          this.marketType = '688'
          this.marketCode = '000688'
        }
      },
      // 查询是否收藏
      queryCollection() {
        this.$api
          .post('/collect/queryIsCollect', {
            securityCode: this.marketCode,
          })
          .then(r => {
            if (r) {
              r == 1 ? (this.isCollection = true) : (this.isCollection = false)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      getRoseOrFall() {
        this.$api
          .post('/stock/riseLossesDetail', {
            businessDate: this.date,
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            riseOrLosses: this.navId,
            securityCode: this.marketCode,
            securityType: this.marketType,
          })
          .then(r => {
            if (r) {
              this.list = r.list
              this.showLoad = false
              this.last_page = r.totalPage
              // this.data = r
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      getRoseOrFall1() {
        this.$api
          .post('/stock/riseLossesDetail', {
            businessDate: this.date,
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            riseOrLosses: this.navId,
            securityCode: this.marketCode,
            securityType: this.marketType,
          })
          .then(r => {
            if (r) {
              this.list = [...this.list, ...r.list]
              this.showLoad = false
              this.last_page = r.totalPage
              // this.data = r
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      getnewGoods() {
        this.pagenum = this.pagenum + 1
        // 1.展示loading效果
        uni.showLoading({
          title: '数据加载中...',
        })
        // 2.开启节流阀
        this.isLoading = true
        // 3.发起网络请求
        this.getRoseOrFall1()
        // 无论成功与否都会调用该方法
        // 4.隐藏loading效果
        uni.hideLoading()
        // 5.关闭节流阀
        this.isLoading = false
      },
      // 选择导航
      selectNav(name) {
        this.pagenum = 1
        this.showLoad = true
        this.navList.forEach((item, index) => {
          if (item.name == name) {
            item.is = true
            if (this.navList[1].is) {
              this.navId = 1
              this.getRoseOrFall()
            } else if (this.navList[2].is) {
              this.navId = 0
              this.getRoseOrFall()
            } else if (this.navList[0].is) {
              this.$nextTick(() => {
                this.columnarInitCharts()
              })
            }
            // setTimeout(() => {
            //   this.showLoad = false
            // }, 1000)
          } else {
            item.is = false
          }
        })
      },
      // 打开个股所属模块弹出层
      privateBelong() {
        uni.hideTabBar({})
        this.showPrivateBelong = true
      },
      // 取消个股所属模块弹出层
      cancelPrivateBelong() {
        this.showPrivateBelong = false
        uni.showTabBar({})
      },
      // 确认个股所属模块
      confirmPrivateBelong(e) {
        this.currentBelong = e.value[0]
        this.showPrivateBelong = false
        uni.showTabBar({})
      },
      // 前往趋势详情
      toTrendDetail() {
        this.navList.forEach(item => {
          if (item.is) {
            uni.navigateTo({
              url: `/pages/home/market/marketDetail?name=${item.name}`,
            })
          }
        })
      },
      // 是否收藏
      collection() {
        // this.isCollection = !this.isCollection
        if (this.isCollection) {
          this.$api
            .post('/collect/del', {
              securityCode: this.marketCode,
              securityType: this.marketType,
            })
            .then(r => {
              uni.$u.toast('已取消收藏')
              this.isCollection = false
            })
            .catch(fall => {
              uni.$u.toast('已取消收藏')
              this.isCollection = false
              console.log(fall)
            })
        } else {
          this.$api
            .post('/collect/add', {
              securityCode: this.marketCode,
              securityType: this.marketType,
            })
            .then(r => {
              uni.$u.toast('收藏成功')
              this.isCollection = true
            })
            .catch(fall => {
              uni.$u.toast('收藏成功')
              this.isCollection = true
              console.log(fall)
            })
        }
      },
      // k线图初始化
      initEcharts() {
        this.$api
          .post('/stock/kLine', {
            // securityCode: this.id,
            securityCode: this.marketCode,
            securityType: '',
          })
          .then(r => {
            if (r) {
              // this.data = r
              console.log(r)
              this.$refs.chartK.init(echarts, chart => {
                let upColor = '#ec0000'
                let downColor = '#00da3c'
                // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
                let data = splitData(r)
                function splitData(rawData) {
                  let categoryData = []
                  let values = []
                  let volumes = []
                  for (let i = 0; i < rawData.length; i++) {
                    categoryData.push(rawData[i].splice(0, 1)[0])
                    values.push(rawData[i])
                    volumes.push([
                      i,
                      rawData[i][4],
                      rawData[i][0] > rawData[i][1] ? 1 : -1,
                    ])
                  }
                  return {
                    categoryData: categoryData,
                    values: values,
                    volumes: volumes,
                  }
                }

                function calculateMA(dayCount) {
                  let result = []
                  for (let i = 0, len = data.values.length; i < len; i++) {
                    if (i < dayCount) {
                      result.push('-')
                      continue
                    }
                    let sum = 0
                    for (let j = 0; j < dayCount; j++) {
                      sum += data.values[i - j][1]
                    }
                    result.push(sum / dayCount)
                  }
                  return result
                }

                let option = {
                  animation: false,
                  legend: {
                    top: 10,
                    left: 'center',
                    data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'cross',
                    },
                    formatter: function (param) {
                      // let param1 = param[1];
                      if (param[0].data.length < 6) {
                        param = param[1]
                        console.log(param)
                        return [
                          '日期: ' + param.axisValue + '\n',
                          '开盘: ' + param.data[1] + '\n',
                          '关盘: ' + param.data[2] + '\n',
                          '最低: ' + param.data[3] + '\n',
                          '最高: ' + param.data[4] + '\n',
                          '成交额: ' + param.data[5] + '\n',
                        ].join('')
                      } else {
                        param = param[0]
                        console.log(param)
                        return [
                          '日期: ' + param.axisValue + '\n',
                          '开盘: ' + param.data[1] + '\n',
                          '关盘: ' + param.data[2] + '\n',
                          '最低: ' + param.data[3] + '\n',
                          '最高: ' + param.data[4] + '\n',
                          '成交额: ' + param.data[5] + '\n',
                        ].join('')
                      }
                    },
                    borderWidth: 1,
                    borderColor: '#ccc',
                    padding: 10,
                    textStyle: {
                      color: '#000',
                    },
                    position: function (pos, params, el, elRect, size) {
                      const obj = {
                        top: 10,
                      }
                      obj[
                        ['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]
                      ] = 30
                      return obj
                    },
                    // extraCssText: 'width: 170px'
                  },
                  axisPointer: {
                    link: [
                      {
                        xAxisIndex: 'all',
                      },
                    ],
                    label: {
                      backgroundColor: '#777',
                    },
                  },
                  toolbox: {
                    feature: {
                      dataZoom: {
                        yAxisIndex: false,
                      },
                      brush: {
                        type: ['lineX', 'clear'],
                      },
                    },
                  },
                  brush: {
                    xAxisIndex: 'all',
                    brushLink: 'all',
                    outOfBrush: {
                      colorAlpha: 0.1,
                    },
                  },
                  visualMap: {
                    show: false,
                    seriesIndex: 5,
                    dimension: 2,
                    pieces: [
                      {
                        value: 1,
                        color: upColor,
                      },
                      {
                        value: -1,
                        color: downColor,
                      },
                    ],
                  },
                  grid: [
                    {
                      left: '10%',
                      right: '8%',
                      height: '50%',
                    },
                    {
                      left: '10%',
                      right: '8%',
                      top: '63%',
                      height: '16%',
                    },
                  ],
                  xAxis: [
                    {
                      type: 'category',
                      data: data.categoryData,
                      boundaryGap: false,
                      axisLine: { onZero: false },
                      splitLine: { show: false },
                      min: 'dataMin',
                      max: 'dataMax',
                      axisPointer: {
                        z: 100,
                      },
                    },
                    {
                      type: 'category',
                      gridIndex: 1,
                      data: data.categoryData,
                      boundaryGap: false,
                      axisLine: { onZero: false },
                      axisTick: { show: false },
                      splitLine: { show: false },
                      axisLabel: { show: false },
                      min: 'dataMin',
                      max: 'dataMax',
                    },
                  ],
                  yAxis: [
                    {
                      scale: true,
                      splitArea: {
                        show: true,
                      },
                    },
                    {
                      scale: true,
                      gridIndex: 1,
                      splitNumber: 2,
                      axisLabel: { show: false },
                      axisLine: { show: false },
                      axisTick: { show: false },
                      splitLine: { show: false },
                    },
                  ],
                  dataZoom: [
                    {
                      type: 'inside',
                      xAxisIndex: [0, 1],
                      start: 0,
                      end: 100,
                    },
                    {
                      show: true,
                      xAxisIndex: [0, 1],
                      type: 'slider',
                      top: '85%',
                      start: 0,
                      end: 100,
                    },
                  ],
                  series: [
                    {
                      name: '日K',
                      type: 'candlestick',
                      data: data.values,
                      itemStyle: {
                        color: downColor,
                        color0: upColor,
                        borderColor: undefined,
                        borderColor0: undefined,
                      },
                      tooltip: {
                        formatter: function (param) {
                          console.log(param)
                          param = param[0]
                          return [
                            'Date: ' +
                              param.name +
                              '<hr size=1 style="margin: 3px 0">',
                            '开盘: ' + param.data[0] + '<br/>',
                            'Close: ' + param.data[1] + '<br/>',
                            'Lowest: ' + param.data[2] + '<br/>',
                            'Highest: ' + param.data[3] + '<br/>',
                          ].join('')
                        },
                      },
                    },
                    {
                      name: 'MA5',
                      type: 'line',
                      data: calculateMA(5, data),
                      smooth: true,
                      lineStyle: {
                        opacity: 0.5,
                      },
                    },
                    {
                      name: 'MA10',
                      type: 'line',
                      data: calculateMA(10, data),
                      smooth: true,
                      lineStyle: {
                        opacity: 0.5,
                      },
                    },
                    {
                      name: 'MA20',
                      type: 'line',
                      data: calculateMA(20, data),
                      smooth: true,
                      lineStyle: {
                        opacity: 0.5,
                      },
                    },
                    {
                      name: 'MA30',
                      type: 'line',
                      data: calculateMA(30, data),
                      smooth: true,
                      lineStyle: {
                        opacity: 0.5,
                      },
                    },
                    {
                      name: 'Volume',
                      type: 'bar',
                      xAxisIndex: 1,
                      yAxisIndex: 1,
                      itemStyle: {
                        // normal: {
                        //   color: function (param) {
                        //     return downColor;
                        //   },
                        // },
                      },
                      data: data.volumes,
                    },
                  ],
                }
                chart.setOption(option)
              })
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 柱状图初始化
      columnarInitCharts() {
        this.$api
          .post('/stock/riseLossesStatistics', {
            businessDate: this.date,
            securityCode: '',
            securityType: this.marketType,
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.$refs.columnar.init(echarts, chart => {
                let option = {
                  xAxis: {},
                  yAxis: {
                    // type: 'value',
                    type: 'category',
                    data: [
                      '≥10%',
                      '≥7%',
                      '7-5%',
                      '5-3%',
                      '3-0%',
                      '平',
                      '-3至-5%',
                      '-5至-7%',
                      '≤-7%',
                      '≤-10%',
                    ],
                  },
                  series: [
                    {
                      data: r.data,
                      type: 'bar',
                      itemStyle: {
                        normal: {
                          //这里是重点
                          color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            var colorList = [
                              '#D9001B',
                              '#D9001B',
                              '#D9001B',
                              '#D9001B',
                              '#D9001B',
                              '#999999',
                              '#6FBB60',
                              '#6FBB60',
                              '#6FBB60',
                              '#6FBB60',
                            ]
                            return colorList[params.dataIndex]
                          },
                          label: {
                            show: true, //开启显示
                            position: 'right', //在上方显示
                            textStyle: {
                              //数值样式
                              // color: "black",
                              fontSize: 14,
                            },
                          },
                        },
                      },
                    },
                  ],
                  grid: {
                    top: '5%',
                  },
                }
                chart.setOption(option)
              })
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .show_load {
    margin-top: 100rpx;
  }
  .market_head {
    padding: 32rpx 24rpx 0 24rpx;
    height: 100rpx;
    width: 702rpx;
    overflow: hidden;
    .closed_price {
      font-size: 24rpx;
      .closed_price_top {
        display: flex;
        font-size: 40rpx;
      }
    }
    .closed_price_text {
      margin-right: 24rpx;
      font-weight: bold;
    }
    .closed_price_bottom {
      margin-top: 10rpx;
    }
  }
  .market_head1 {
    height: 100%;
  }
  .market_head_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .market_head_bottom {
    padding-bottom: 32rpx;
  }
  .head_bottom_list {
    margin-top: 32rpx;
    display: flex;
    align-items: center;
    .security_code {
      width: 158rpx;
      border-right: 2rpx dashed #c8c8c8;
    }
    .trade_date {
      width: 208rpx;
      border-right: 2rpx dashed #c8c8c8;
      margin-left: 20rpx;
    }
    .opening_high {
      border-right: 2rpx dashed #c8c8c8;
      margin-left: 20rpx;
      width: 160rpx;
    }
    .opening_less {
      margin-left: 20rpx;
    }
    .bottom_list_text {
      font-size: 24rpx;
      color: #999999;
    }
    .bottom_list_num {
      margin-top: 8rpx;
      font-size: 28rpx;
    }
  }
  .closed_opening {
    font-size: 28rpx;
  }
  .quantity_quota {
    font-size: 28rpx;
  }
  .head_text {
    color: #999999;
  }
  .head_num {
    margin-left: 16rpx;
  }
  .line {
    height: 2rpx;
    background-color: #f6f6f6;
    margin-top: 32rpx;
  }
  .nav_list {
    padding: 32rpx 24rpx;
    color: #999999;
    .nav_list_text {
      margin-right: 32rpx;
    }
    .nav_list_text1 {
      font-weight: bold;
      color: #333333;
    }
  }
  .private_table_head {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    background-color: #fff9f3;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    .private_table_head_right {
      display: flex;
      align-items: center;
    }
    .private_table_head_left {
      display: flex;
      align-items: center;
      .private_head_name {
        width: 200rpx;
      }
      .private_head_price {
        width: 150rpx;
        text-align: center;
      }
      .private_head_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
  .private_table_list {
    padding: 24rpx 24rpx;
    border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    .private_table_list_left {
      display: flex;
      align-items: center;
      .table_list_name {
        width: 200rpx;
      }
      .table_list_code {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
      .table_list_price {
        width: 150rpx;
        text-align: center;
        color: #d9001b;
      }
      .table_list_gains {
        width: 150rpx;
        text-align: center;
        color: #d9001b;
      }
      table_list_price1 {
        color: #8fc320;
      }
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
  .list_footer {
    padding: 32rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #ec7c00;
    .see_more {
      display: flex;
      align-items: center;
      .see_more_icon {
        width: 22rpx;
        height: 22rpx;
        margin-left: 10rpx;
      }
    }
  }
  .colorRed {
    color: #d9001b;
  }
  .colorGreen {
    color: #8fc320;
  }
</style>
