From cf0d36bbe155ecdfd8bca429666405e830d0dc7a Mon Sep 17 00:00:00 2001
From: XIGUASSR <623844246@qq.com>
Date: Sat, 12 Nov 2022 04:22:49 +0800
Subject: [PATCH] 最新

---
 src/page/list/trading-list.vue | 1550 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 1,351 insertions(+), 199 deletions(-)

diff --git a/src/page/list/trading-list.vue b/src/page/list/trading-list.vue
index 65e2561..41ec556 100644
--- a/src/page/list/trading-list.vue
+++ b/src/page/list/trading-list.vue
@@ -11,24 +11,21 @@
                   <img src="../../assets/img/searchs.png" alt />
                 </div>
                 <div class="search_input">
-                  <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" />
+                  <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" ref="search" id="sousuo"
+                    onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcode" @input="gpinput" />
                 </div>
               </div>
             </div>
           </div>
           <div class="tab_class">
             <div class="scroll_tab">
-              <div
-                class="tab_items"
-                v-for="(item, index) in tabsClassArr"
-                :key="index"
-                @click="handleTabsItem(item, index)"
-              >
+              <div class="tab_items" v-for="(item, index) in tabsClassArr" :key="index" :class="index == 0 ? 'mrt' : ''"
+                @click="handleTabsItem(item, index)">
                 <span :class="tabsItemIndex === index ? 'active' : ''">{{ item.name }}</span>
               </div>
             </div>
           </div>
-          <div class="kai_mess">
+          <div class="kai_mess" v-show="isToken == ''" @click="$router.push('/login')">
             <div class="left_identity_img">
               <img src="../../assets/img/shenfen2.png" alt />
             </div>
@@ -47,67 +44,209 @@
               <span>{{ '最新价' }}</span>
             </div>
             <div class="item_title applies">
-              <span>{{ '涨跌幅' }}</span>
+              <span v-show="tabsItemIndex != 3">{{ '涨跌幅' }}</span>
+              <span v-show="tabsItemIndex == 3" style="width: 100%;text-align: center;">{{ '申购类型' }}</span>
             </div>
           </div>
-          <div class="list">
-            <div class="list_items">
-              <div class="item" v-for="(item, index) in listArr" :key="index">
-                <div class="left_title">
-                  <div class="tp">
-                    <span class="collection" @click="handleCollectionClick(item)">
-                      <span class="shu"></span>
-                    </span>
-                    <span class="title_color">{{ item.name }}</span>
-                  </div>
-                  <div class="bt">
-                    <span>{{ item.referred }}</span>
+          <div class="list" :class="isToken == '' ? 'listHeight' : 'listHeights'">
+            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
+              :immediate-check="false">
+              <div class="van-clearfix">
+                <div class="list_items">
+                  <div class="item" v-for="(item, index) in listArr" :key="index"
+                    @click="handleGoToKlineDetail(item, index)">
+                    <div v-if="(tabsItemIndex == 3 && item.zt == 0) || tabsItemIndex != 3">
+                      <div class="left_title">
+                        <div class="tp">
+                          <span class="collection" @click.stop="options(item)">
+                            <span v-show="tabsItemIndex != 3" class="shu"
+                              :class="item.isOption == '1' ? 'shublue' : ''"></span>
+                            <span v-show="tabsItemIndex == 3" class="shu hongse"></span>
+                          </span>
+                          <span class="title_color">
+                            {{ tabsItemIndex == 3 ? item.name : tabsItemIndex ==
+                                2 ? item.name : tabsItemIndex == 0 ? item.name : item.indexName
+                            }}
+                          </span>
+                        </div>
+                        <div class="bt">
+                          <span>
+                            {{ tabsItemIndex == 3 ? item.stockType + item.code : tabsItemIndex == 2 ? item.gid :
+                                tabsItemIndex
+                                  ==
+                                  0 ? item.gid : item.indexCode
+                            }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="center_price">
+                        <div class="tp">
+                          <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2"
+                            :class="item.hcrate > 0 ? 'green' : 'red'">
+                            {{ item.nowPrice
+                            }}
+                          </span>
+                          <span class="price_color" v-else>
+                            {{ tabsItemIndex == 3 ? Number(item.price).toFixed(2) :
+                                item.currentPoint
+                            }}
+                          </span>
+                        </div>
+                        <div class="bt">
+                          <span v-if="tabsItemIndex == 3 || tabsItemIndex == 1">{{ tabsItemIndex == 3 ? 'Max:' +
+                              Number(item.orderNumber) : '手续费:' + Number(item.transFee)
+                          }}</span>
+                          <span v-else>{{ item.today_min }}</span>
+                        </div>
+                      </div>
+                      <div class="right_bs">
+                        <div class="tp">
+                          <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2"
+                            :class="item.hcrate > 0 ? 'green' : 'red'">{{ item.hcrate }}</span>
+                          <span class="price_color" v-if="tabsItemIndex == 1"
+                            :class="item.floatRate > 0 ? 'green' : 'red'">
+                            {{
+                                item.floatRate + '%'
+                            }}
+                          </span>
+                          <!-- <span class="price_color" v-if="tabsItemIndex == 3"
+                          :class="((item.nowPrice - item.lastClose) / item.lastClose * 100).toFixed(2) > 0 ? 'green' : 'red'">
+                          {{
+                              item.lastClose == "" ? 0.00 : ((Number(item.nowPrice) - Number(item.lastClose)) /
+                                Number(item.lastClose) * 100).toFixed(2) + '%'
+                          }}
+                        </span> -->
+                          <div v-if="tabsItemIndex == 3" :class="item.type == 1 ? 'xgsgType' : 'xgsgTypeRed'">
+                            <!-- {{item.orderNumber}} -->
+                            {{ item.type == 1 ? '新股申购' : '线下配售' }}
+                          </div>
+                        </div>
+                        <div class="bt">
+                          <div v-if="tabsItemIndex != 1 && tabsItemIndex != 3">{{ item.preclose_px }}</div>
+                          <!-- class="codeIcon"  item.stock_type.toUpperCase()-->
+                        </div>
+                      </div>
+
+                    </div>
                   </div>
                 </div>
-                <div class="center_price">
-                  <div class="tp">
-                    <span class="price_color">{{ item.price }}</span>
-                  </div>
-                  <div class="bt">
-                    <span>{{ item.time }}</span>
-                  </div>
+              </div>
+            </van-list>
+          </div>
+        </div>
+        <div class="bottom_content" v-if="tabsIndex === 0">
+          <!-- 搜索框 -->
+          <div class="search">
+            <div class="search_content">
+              <div class="left_search">
+                <div class="search_img">
+                  <img src="../../assets/img/searchs.png" alt />
                 </div>
-                <div class="right_bs">
-                  <div class="tp">
-                    <span class="price_color">{{ item.applies + '%' }}</span>
-                  </div>
-                  <div class="bt"></div>
+                <div class="search_input">
+                  <input type="text" class="searchs" placeholder="输入品种名称/代码搜索"
+                    onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcodes" @input="gpinputs" />
                 </div>
               </div>
             </div>
+          </div>
+          <div class="list_title">
+            <div class="item_title varieties">
+              <span>{{ '品种' }}</span>
+            </div>
+            <div class="item_title latest_price">
+              <span>{{ '最新价' }}</span>
+            </div>
+            <div class="item_title applies">
+              <span>{{ '涨跌幅' }}</span>
+            </div>
+          </div>
+
+          <div class="list zxlist">
+            <van-list v-model="loadings" :finished="finisheds" finished-text="没有更多了" @load="onLoads"
+              :immediate-check="false">
+              <div class="van-clearfix">
+                <div class="list_items">
+                  <div class="item" v-for="(item, index) in listArrs" :key="item.indexCode">
+                    <div class="left_title">
+                      <div class="tp">
+                        <span class="collection" @click="optionszx(item)">
+                          <span class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></span>
+                        </span>
+                        <span class="title_color">{{ item.stockName }}</span>
+                      </div>
+                      <div class="bt">
+                        <span>{{ item.stockCode }}</span>
+                      </div>
+                    </div>
+                    <div class="center_price">
+                      <div class="tp">
+                        <span class="price_color">{{ item.nowPrice }}</span>
+                      </div>
+                      <div class="bt">
+                        <span>{{ item.addTime }}</span>
+                      </div>
+                    </div>
+                    <div class="right_bs">
+                      <div class="tp">
+                        <span class="price_color" :class="item.hcrate > 0 ? 'green' : 'red'">{{ item.hcrate }}</span>
+                      </div>
+                      <div class="bt">
+                        <!-- <div>{{ item.stock_type.toUpperCase() }}</div> -->
+                        <!-- class="codeIcon" -->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </van-list>
           </div>
         </div>
       </div>
     </div>
     <div class="shai" v-if="dialogFlag" @click="openDialog()"></div>
-    <div class="top_title" @click="openDialog()" ref="topTitle">
+    <div class="top_title" ref="topTitle">
       <div>
         <div class="tabs_title">
-          <div
-            class="tb"
-            v-for="(item, index) in tabsArr"
-            :key="index"
-            @click="handleTabsClick(item, index)"
-          >
+          <div class="tb" v-for="(item, index) in tabsArr" :key="index" @click="handleTabsClick(item, index)">
             <span :class="index === tabsIndex ? 'active' : ''">{{ item }}</span>
           </div>
         </div>
-        <div class="right_money">
+        <div class="right_money" @click="openDialog()">
           <div class="content_money" v-if="tabsIndex === 1">
             <div class="top_price">
               <div class="left">
                 <span>{{ '余额' }}</span>
               </div>
               <div class="right">
-                <span>{{ '¥ 49,656.79' }}</span>
+                <span v-if="$store.state.userInfo.userAmt == undefined">¥0.00</span>
+                <span v-if="$store.state.userInfo && tabsItemIndex == 1" style="white-space: nowarp;">
+                  {{ '¥' + $store.state.userInfo.userIndexAmt
+                  }}
+                </span>
+                <span v-if="$store.state.userInfo.userAmt != undefined && tabsItemIndex == 0"
+                  style="white-space: nowarp;">
+                  {{ '¥ ' + $store.state.userInfo.userAmt
+                  }}
+                </span>
+                <span v-if="$store.state.userInfo.userAmt != undefined && tabsItemIndex == 2"
+                  style="white-space: nowarp;">
+                  {{ '¥ ' + $store.state.userInfo.userAmt
+                  }}
+                </span>
+                <span v-if="$store.state.userInfo.userAmt != undefined && tabsItemIndex == 3"
+                  style="white-space: nowarp;">
+                  {{ '¥ ' + $store.state.userInfo.userAmt
+                  }}
+                </span>
+                <!-- <span v-if="$store.state.userInfo && tabsItemIndex == 3" style="white-space: nowarp;">
+                  {{
+                      '¥' + $store.state.userInfo.userFuturesAmt
+                  }}
+                </span> -->
               </div>
               <div class="sanjiao">
-                <img src="../../assets/img/xiala.png" alt />
+                <img :class="dialogFlag ? 'xuanz' : ''" style="transition: all 0.5s;" src="../../assets/img/xiala.png"
+                  alt />
               </div>
             </div>
             <div class="bottom_balance">
@@ -118,171 +257,884 @@
           </div>
         </div>
       </div>
+      <div class="cards">
+        <div class="card_item">
+          <div class="tops_title">
+            <div>
+              <span>{{ '总资产' }}</span>
+            </div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
+                class="account">
+                ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
+                    $store.state.userInfo.userIndexAmt).toFixed(2)
+                }}
+              </p>
+              <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
+                class="account">
+                ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
+                    $store.state.userInfo.userFuturesAmt).toFixed(2)
+                }}
+              </p>
+              <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
+                class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
+              <!-- <p
+                v-else-if="this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
+                class="account"
+              >
+                ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
+                $store.state.userInfo.userIndexAmt + $store.state.userInfo.userFuturesAmt).toFixed(2)
+                }}
+              </p> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="card_item">
+          <div class="tops_title">
+            <div>
+              <span>{{ '强平线' }}</span>
+            </div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <span v-show="tabsItemIndex == 1">
+                {{ $store.state.hide ? '****' :
+                    Number(($store.state.userInfo.enableIndexAmt +
+                      $store.state.userInfo.allIndexFreezAmt) * indexSettingInfo.forceSellPercent).toFixed(2)
+                }}
+              </span>
+              <span v-show="tabsItemIndex == 0 || tabsItemIndex == 3">
+                {{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt
+                    +
+                    $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2)
+                }}
+              </span>
+              <span v-show="tabsItemIndex == 2">
+                {{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt
+                    +
+                    $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2)
+                }}
+              </span>
+              <!-- <span v-show="tabsItemIndex == 3">
+                {{ $store.state.hide ? '****' :
+                    Number(($store.state.userInfo.enableFuturesAmt +
+                      $store.state.userInfo.allFuturesFreezAmt) * futuresSettingInfo.forceSellPercent).toFixed(2)
+                }}
+              </span> -->
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div>
+              <span>
+                {{ tabsItemIndex == 1 ? '指数' : tabsItemIndex == 0 ? '股票' : tabsItemIndex == 2 ? '股票' :
+                    tabsItemIndex ==
+                      3 ? '股票' : ''
+                }}
+              </span>
+              <span>{{ '资产' }}</span>
+            </div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
+              <span v-show="tabsItemIndex == 0 || tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
+              <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
+              <!-- <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.userFuturesAmt }}</span> -->
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div>
+              <span>{{ '可用资金' }}</span>
+            </div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.enableIndexAmt }}</span>
+              <span v-show="tabsItemIndex == 0 || tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.enableAmt }}</span>
+              <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.enableAmt }}</span>
+              <!-- <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.enableFuturesAmt }}</span> -->
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div>
+              <span>{{ '冻结保证金' }}</span>
+            </div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexFreezAmt }}</span>
+              <span v-show="tabsItemIndex == 0 || tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.allFreezAmt
+              }}</span>
+              <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.allFreezAmt }}</span>
+              <!-- <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.allFuturesFreezAmt }}</span> -->
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div>
+              <span>{{ '持仓总盈亏' }}</span>
+            </div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <span
+                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span>
+              <span
+                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 0 || tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.allProfitAndLose
+                }}</span>
+              <span
+                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span>
+              <!-- <span
+                :class="$store.state.userInfo.allFuturesProfitAndLose > 0 ? 'red' : $store.state.userInfo.allFuturesProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 3">{{ '¥' +Number($store.state.userInfo.allFuturesProfitAndLose).toFixed(2)}}</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <!-- 新股弹窗 -->
+    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '35%' }" @close="popClose">
+      <div class="setting_content">
+        <div class="old_password">
+          <div class="left_titles">
+            <span>{{ '申购数量:' }}</span>
+          </div>
+          <div class="right_password_input">
+            <input type="number" v-model="sgNum" />
+          </div>
+        </div>
+        <div class="btn_setting" @click="changeSg()">
+          <span>{{ '立即申购' }}</span>
+        </div>
+        <div class="shijian">
+          <div class="xgsj">
+
+            <div class="sjtlt">申购时间: </div>
+            <div class="xgTime" v-if="this.sgsj">{{ this.sgsj | getTimeYear }}</div>
+          </div>
+          <div class="xgsj">
+            <div class="sjtlt">认缴时间: </div>
+            <div class="xgTime" v-if="this.rjsj">{{ this.rjsj | getTimeYear }}</div>
+          </div>
+        </div>
+        <!-- <div class="old_password">
+          <div class="left_titles">
+            <span>{{ '新密码:' }}</span>
+          </div>
+          <div class="right_password_input">
+            <input type="password" v-model="newPassword" />
+          </div>
+        </div>
+        <div class="old_password">
+          <div class="left_titles">
+            <span>{{ '确认新密码:' }}</span>
+          </div>
+          <div class="right_password_input">
+            <input type="password" v-model="cirNewPassword" />
+          </div>
+        </div> -->
+
+      </div>
+    </van-popup>
+
+
   </div>
 </template>
 
 <script>
+//Toast 
+import { Toast } from 'vant';
+import * as api from "@/axios/api";
 export default {
   name: "trading",
+  components: {
+  },
   data() {
     return {
       tabsIndex: 1,
       tabsArr: ["自选", "市场"],
       tabClassActive: 1,
       dialogFlag: false,
+      pageNum: 1,
+      pageNums: 1,
+      stockPlate: "",
+      alertShow: false,
+      isToken: "",
+      elType: "warning",
+      indexSettingInfo: {},
+      futuresSettingInfo: {},
+      settingInfo: {},
+      loading: false,
+      loadings: false,
+      finished: false,
+      finisheds: false,
+      settingDialog: false,
+      sgNum: 1,
+      sgCode: '',
+      gpcode: "",
+      gpcodes: "",
+      texts: "",
+      sgsj: "",
+      rjsj: "",
+      orderNumber: "",
+      elAlertShow: false,
+      elAlertText: "",
       tabsClassArr: [
         {
-          name: "热门",
-          type: 1
-        },
-        {
-          name: "外汇",
-          type: 2
-        },
-        {
-          name: "商品",
-          type: 3
-        },
-        {
-          name: "股票",
-          type: 4
+          name: "沪深京",
+          type: 0
         },
         {
           name: "指数",
-          type: 5
+          type: 1
         },
+
         {
-          name: "加密",
-          type: 6
+          name: "科创",
+          type: 2
+        },
+        // {
+        //   name: "期货",
+        //   type: 3
+        // }
+        {
+          name: "新股",
+          type: 3
         }
       ],
       tabsItemIndex: 0,
-      listArr: [
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: true
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: true
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: true
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: true
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: true
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        },
-        {
-          name: "香港50指数",
-          referred: "HK50",
-          price: 16445.5,
-          time: "02:59:58",
-          applies: 5.93,
-          collection: false
-        }
-      ]
+      listArr: [],
+      listArrs: []
     };
   },
+
+  created() {
+    if (this.$route.query.type == 1) {
+      //选中sousuo输入框
+      this.$nextTick(() => {
+        this.$refs.search.focus();
+      });
+    }
+    if(this.$route.query.listid){
+      this.tabsItemIndex = Number(this.$route.query.listid)
+    }
+  },
+
+  mounted() {
+    this.loading = true;
+    this.getStock();
+    this.isToken = window.localStorage.getItem("USERTOKEN");
+    this.getUserInfo();
+    this.getIndexSettingInfo();
+    this.getSettingInfo();
+    this.getFuturesSetting();
+  },
   methods: {
+    onLoad() {
+      this.pageNum++;
+      // 异步更新数据
+      // setTimeout 仅做示例,真实场景中一般为 ajax 请求
+      switch (this.tabsItemIndex) {
+        case 1:
+          this.loading = true;
+          this.getListMarket();
+          break;
+        case 0:
+          this.stockPlate = "";
+          this.loading = true;
+          this.getStock();
+          break;
+        case 2:
+          this.stockPlate = "科创";
+          this.loading = true;
+          this.getStocks();
+          break;
+        case 3:
+          this.loading = true;
+          this.getFutures();
+          break;
+      }
+
+      // 加载状态结束
+      // this.loading = false;
+
+      // 数据全部加载完成
+      // if (this.list.length >= 40) {
+      //   this.finished = true;
+      // }
+    },
+    gpinput() {
+
+      this.pageNum = 1;
+      this.listArr = [];
+      this.loading = true;
+      this.finished = false;
+      switch (this.tabsItemIndex) {
+        case 1:
+          this.getListMarket();
+          break;
+        case 0:
+          this.stockPlate = "";
+
+          this.getStock();
+          break;
+        case 2:
+          this.stockPlate = "科创";
+
+          this.getStocks();
+          break;
+        case 3:
+          this.getFutures();
+          break;
+      }
+    },
+    gpinputs() {
+      this.pageNums = 1;
+      this.listArrs = [];
+      this.loadings = true;
+      this.finisheds = false;
+      this.getMyList();
+    },
+    onLoads() {
+      this.pageNums++;
+      this.loadings = true;
+      this.getMyList();
+    },
+    closeAlert() {
+      this.alertShow = false;
+    },
+    async getUserInfo() {
+      // 获取用户信息
+      //   let showcookie = this.getCookie('USER_TOKEN');
+      let data = await api.getUserInfo();
+      if (data.status === 0) {
+        // this.getProductSetting()
+        this.$store.state.userInfo = data.data;
+      } else {
+        this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': data.msg });
+      }
+      this.$store.state.user = this.user;
+    },
+    async getIndexSettingInfo() {
+      // 网站设置信息 指数
+      let data = await api.getIndexSetting();
+      if (data.status === 0) {
+        // 成功
+        this.indexSettingInfo = data.data;
+      } else {
+        this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': data.msg });
+      }
+    },
+    async getFuturesSetting() {
+      // 网站设置信息 期货
+      let data = await api.getFuturesSetting();
+      if (data.status === 0) {
+        // 成功
+        this.futuresSettingInfo = data.data;
+      } else {
+        this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': data.msg });
+      }
+    },
+    async getSettingInfo() {
+      let data = await api.getSetting();
+      if (data.status === 0) {
+        // 成功
+        this.settingInfo = data.data;
+      } else {
+        ` this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});`
+      }
+    },
+    async getListMarket() {
+      let val = {
+        pageNum: this.pageNum,
+        pageSize: 15
+      };
+      // 获取指数列表
+      let result = await api.getListMarket(val);
+      this.loading = false;
+      if (result.status === 0) {
+        if (this.tabsItemIndex == 1) {
+          this.listArr = result.data;
+          this.finished = true;
+        }
+      } else {
+        this.texts = result.msg;
+        this.alertShow = true;
+      }
+    },
+    async getStock() {
+      //沪深
+      let opt = {
+        pageNum: this.pageNum,
+        pageSize: 15,
+        stockPlate: this.stockPlate,
+        keyWords: this.gpcode
+      };
+      let data = await api.getStock(opt);
+      this.loading = false;
+      if (data.status === 0) {
+        if (data.data.list.length < 15) {
+          this.finished = true;
+        }
+        if (this.tabsItemIndex == 0) {
+          if (this.gpcode) {
+            this.listArr = data.data.list;
+          } else {
+            data.data.list.forEach(element => {
+              this.listArr.push(element);
+            });
+          }
+
+        }
+      } else {
+        this.texts = data.msg;
+        this.alertShow = true;
+      }
+    },
+    async getStocks() {
+      //科创
+      let opt = {
+        pageNum: this.pageNum,
+        pageSize: 15,
+        stockPlate: this.stockPlate,
+        keyWords: this.gpcode
+      };
+      let data = await api.getStock(opt);
+      this.loading = false;
+      if (data.status === 0) {
+        if (data.data.list.length < 15) {
+          this.finished = true;
+        }
+        if (this.tabsItemIndex == 2) {
+          if (this.gpcode) {
+            this.listArr = data.data.list;
+          } else {
+            data.data.list.forEach(element => {
+              this.listArr.push(element);
+            });
+          }
+        }
+      } else {
+        this.texts = data.msg;
+        this.alertShow = true;
+      }
+    },
+    popClose() {
+      this.sgCode = '';
+      this.sgsj = '';
+      this.rjsj = '';
+      this.orderNumber = '';
+    },
+    async changeSg() {
+      if (!this.sgNum) {
+        Toast('数量不能为空');
+        return;
+      };
+      //this.sgNum必须是数字并且不能小于1
+      if (this.sgNum < 1) {
+        Toast('数量不能小于1');
+        return;
+      }
+      if (this.sgNum > this.orderNumber) {
+        Toast('数量不能大于' + this.orderNumber);
+        return;
+      }
+
+      let opt = {
+        newCode: this.sgCode,
+        applyNums: this.sgNum,
+        phone: this.$store.state.userInfo.phone,
+      };
+      let data = await api.getNewAdd(opt);
+      if (data.status === 0) {
+        this.sgShow = false;
+        this.sgCode = '';
+        this.sgsj = '';
+        this.rjsj = '';
+        this.orderNumber = '';
+        Toast('申购成功');
+        this.$router.push({ path: '/warehouse?index=3' });
+      } else {
+        Toast(data.msg);
+      }
+
+    },
+    handleGoToKlineDetail(item) {
+
+      var codes = "";
+      var names = "";
+      var stock_type = "";
+      var soks = "";
+      var if_zhishu = '0';
+      switch (this.tabsItemIndex) {
+        case 0:
+          codes = item.code;
+          names = item.name;
+          stock_type = item.stock_type;
+          soks = this.filterSH(item.stock_type);
+          if_zhishu = '0';
+          break;
+        case 1:
+          codes = item.indexGid;
+          names = item.indexName;
+          stock_type = 'sh';
+          if_zhishu = item.indexCode;
+          soks = 0;
+          break;
+        case 2:
+          codes = item.code;
+          names = item.name;
+          stock_type = item.stock_type;
+          soks = this.filterSH(item.stock_type);
+          if_zhishu = '0';
+          break;
+        case 3:
+          this.sgCode = item.code;
+          this.sgsj = item.subscribeTime;
+          this.rjsj = item.subscriptionTime;
+          this.orderNumber = item.orderNumber;
+          this.settingDialog = true;
+          return;
+          codes = item.futuresGid;
+          names = item.futuresName;
+          soks = 0;
+          stock_type = 'qh';
+          if_zhishu = item.indexGid;
+          break;
+        default:
+          break;
+      }
+
+      this.$router.push({
+        path: "/kline",
+        query: {
+          name: names,
+          stockplate: item.stock_plate,
+          code: codes,
+          type: stock_type,
+          sok: soks,
+          if_zhishu: if_zhishu,
+        }
+      });
+    },
+    filterSH(val) {
+      if (val === "sh") {
+        return 1;
+      } else if (val === "bj" || val === "sz") {
+        return 0;
+      }
+    },
+
+    async getFutures() {
+      // 获取期货列表
+      let opt = {
+
+
+      };
+      let data = await api.getNewGu(opt);
+      this.loading = false;
+      if (data.status === 0) {
+        if (this.tabsItemIndex == 3) {
+          this.listArr = data.data.list;
+        }
+        this.finished = true;
+      } else {
+        this.texts = data.msg;
+        this.alertShow = true;
+      }
+    },
+    // async getFutures() {
+    //   // 获取期货列表
+    //   let opt = {
+    //     homeShow: 1,
+    //     pageNum: this.pageNum,
+    //     pageSize: 15
+    //   };
+    //   let data = await api.getListFutures(opt);
+    //   this.loading = false;
+    //   if (data.data.length < 15) {
+    //     this.finished = true;
+    //   }
+    //   if (data.status === 0) {
+    //     if (this.tabsItemIndex == 3) {
+    //       data.data.forEach(element => {
+    //         this.listArr.push(element);
+    //       });
+    //     }
+    //   } else {
+    //     this.texts = data.msg;
+    //     this.alertShow = true;
+    //   }
+    // },
+    async getMyList() {
+      this.loadings = true;
+      //获取自选列表
+      let opt = {
+        pageNum: this.pageNums,
+        pageSize: 15,
+        keyWords: this.gpcodes
+      };
+      let data = await api.getMyList(opt);
+      this.loadings = false;
+      if (data.status == 0) {
+        data.data.list.forEach(element => {
+          this.listArrs.push(element);
+        });
+      }
+      if (data.data.list.length < 15) {
+        this.finisheds = true;
+      }
+    },
     handleTabsClick(item, index) {
-      this.tabsIndex = index;
+      if (index == 0) {
+        if (this.dialogFlag) {
+          this.$refs["topTitle"].style.height = "1.2821rem";
+          setTimeout(() => {
+            this.dialogFlag = false;
+
+            this.listArrs = [];
+            this.pageNums = 1;
+            this.finisheds = false;
+            this.tabsIndex = index;
+            this.getMyList();
+          }, 800);
+        } else {
+          this.listArrs = [];
+          this.pageNums = 1;
+          this.finisheds = false;
+          this.tabsIndex = index;
+          this.getMyList();
+        }
+      } else {
+        this.tabsIndex = index;
+      }
     },
     handleTabsItem(item, index) {
       this.tabsItemIndex = index;
+      this.pageNum = 1;
+      this.finished = false;
+      this.loading = true;
+      switch (item.type) {
+        case 1:
+          this.listArr = [];
+          this.getListMarket();
+          break;
+        case 0:
+          this.stockPlate = "";
+          this.listArr = [];
+          this.getStock();
+          break;
+        case 2:
+          this.stockPlate = "科创";
+          this.listArr = [];
+          this.getStocks();
+          break;
+        case 3:
+          this.listArr = [];
+          this.getFutures();
+          break;
+      }
+    },
+    async options(val) {
+      var codes = "";
+      switch (this.tabsItemIndex) {
+        case 0:
+          codes = val.code;
+          break;
+        case 1:
+          codes = val.indexGid;
+          break;
+        case 2:
+          codes = val.code;
+          break;
+        case 3:
+          codes = val.futuresGid;
+          break;
+        default:
+          break;
+      }
+      if (val.isOption == "1") {
+        let data = await api.delOption({ code: codes });
+        if (data.status === 0) {
+          switch (this.tabsItemIndex) {
+            case 1:
+              this.pageNum = 1;
+              this.listArr = [];
+              this.loading = true;
+              this.finished = false;
+              this.getListMarket();
+              break;
+            case 0:
+              this.stockPlate = "";
+              this.pageNum = 1;
+              this.loading = true;
+              this.listArr = [];
+              this.finished = false;
+              this.getStock();
+              break;
+            case 2:
+              this.stockPlate = "科创";
+              this.pageNum = 1;
+              this.loading = true;
+              this.listArr = [];
+              this.finished = false;
+              this.getStocks();
+              break;
+            case 3:
+              this.listArr = [];
+              this.loading = true;
+              this.pageNum = 1;
+              this.finished = false;
+              this.getFutures();
+              break;
+          }
+          this.refreshList();
+        } else {
+          console.log(data.msg);
+        }
+      } else {
+        let data = await api.addOption({ code: codes });
+        if (data.status === 0) {
+          switch (this.tabsItemIndex) {
+            case 1:
+              this.listArr = [];
+              this.pageNum = 1;
+              this.finished = false;
+              this.getListMarket();
+              break;
+            case 0:
+              this.stockPlate = "";
+              this.pageNum = 1;
+              this.finished = false;
+              this.listArr = [];
+              this.getStock();
+              break;
+            case 2:
+              this.stockPlate = "科创";
+              this.pageNum = 1;
+              this.finished = false;
+              this.listArr = [];
+              this.getStocks();
+              break;
+            case 3:
+              this.listArr = [];
+              this.pageNum = 1;
+              this.finished = false;
+              this.getFutures();
+              break;
+          }
+        } else {
+          console.log(data.msg);
+        }
+      }
+    },
+    async optionszx(val) {
+      let data = await api.delOption({ code: val.stockGid });
+      if (data.status === 0) {
+        this.listArrs = [];
+        this.pageNums = 1;
+        this.finisheds = false;
+        this.getMyList();
+      } else {
+        console.log(data.msg);
+      }
+    },
+    async refreshList() {
+      // 刷新指数
+      if (this.loading) {
+        return;
+      }
+      let opt = {
+        pageNum: 1,
+        pageSize: this.currentNum
+      };
+      let data = await api.getListMarket(opt);
+      this.list = data.data;
     },
     handleCollectionClick(item) {
       item.collection = !item.collection;
     },
     openDialog() {
-        if (!this.dialogFlag) {
-            this.$refs['topTitle'].style.height = '7rem'
-        }else {
-            this.$refs['topTitle'].style.height = '1.2821rem'
-        }
+      if (!this.dialogFlag) {
+        this.$refs["topTitle"].style.height = "6.9rem";
+      } else {
+        this.$refs["topTitle"].style.height = "1.2821rem";
+      }
       this.dialogFlag = !this.dialogFlag;
+    }
+  },
+  filters: {
+    gettime(time) {
+      if (!time) {
+        return "";
+      }
+      var nd = new Date(time);
+      var y = nd.getFullYear();
+      var mm = nd.getMonth() + 1;
+      var d = nd.getDate();
+      var h = nd.getHours();
+      var m = nd.getMinutes();
+      var c = nd.getSeconds();
+      if (mm < 10) {
+        mm = "0" + mm;
+      }
+      if (d < 10) {
+        d = "0" + d;
+      }
+      if (h < 10) {
+        h = "0" + h;
+      }
+      if (m < 10) {
+        m = "0" + m;
+      }
+      if (c < 10) {
+        c = "0" + c;
+      }
+      //17:35:2922-06-2022
+      return h + ":" + m + ":" + c;
+    },
+    getTimeYear(time) {
+      if (!time) {
+        return "";
+      }
+      var nd = new Date(time);
+      var y = nd.getFullYear();
+      var mm = nd.getMonth() + 1;
+      var d = nd.getDate();
+      var h = nd.getHours();
+      var m = nd.getMinutes();
+      var c = nd.getSeconds();
+      if (mm < 10) {
+        mm = "0" + mm;
+      }
+      if (d < 10) {
+        d = "0" + d;
+      }
+      if (h < 10) {
+        h = "0" + h;
+      }
+      if (m < 10) {
+        m = "0" + m;
+      }
+      if (c < 10) {
+        c = "0" + c;
+      }
+      //17:35:2922-06-2022
+      return y + '-' + mm + '-' + d + ' ' + h + ":" + m + ":" + c;
     }
   }
 };
@@ -293,15 +1145,18 @@
   width: 100%;
   height: calc(100% - 1.3rem);
   background: #fff;
-  > .content {
+
+  >.content {
     width: 100%;
     height: 100%;
   }
 }
+
 .tabs {
   width: 100%;
   height: 100%;
   position: relative;
+
   .search {
     width: 100%;
     height: 1rem;
@@ -309,29 +1164,35 @@
     align-items: center;
     justify-content: center;
     padding: 0 0.3rem;
+    position: relative;
+
     .search_content {
       width: 100%;
       height: 90%;
       display: flex;
       align-items: center;
     }
+
     .left_search {
       width: 100%;
       height: 100%;
       background: #f6f6f6;
       border-radius: 0.15rem;
       display: flex;
+
       .search_img {
         width: 1rem;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
+
         img {
           width: 0.5rem;
           height: 0.5rem;
         }
       }
+
       .search_input {
         width: 100%;
         overflow: hidden;
@@ -339,12 +1200,14 @@
         display: flex;
       }
     }
+
     .right_search_class {
       width: 13%;
       height: 100%;
       display: flex;
       justify-content: flex-end;
       align-items: center;
+
       img {
         width: 0.6rem;
         height: 0.6rem;
@@ -352,6 +1215,7 @@
     }
   }
 }
+
 .top_title {
   width: 100%;
   height: 1.2821rem;
@@ -359,20 +1223,25 @@
   position: fixed;
   background: #fff;
   top: 0;
-  z-index: 9999999;
-  transition: all 1s;
+  z-index: 2000;
+  transition: all 0.5s;
+  overflow: hidden;
+  border-radius: 0 0 0.2rem 0.2rem;
+
   >div {
     width: 100%;
     height: 1.2821rem;
     display: flex;
     align-items: center;
-  justify-content: space-between;
+    justify-content: space-between;
   }
+
   .tabs_title {
-    width: 23%;
+    width: 26%;
     height: 100%;
     display: flex;
   }
+
   .tb {
     width: 50%;
     height: 100%;
@@ -381,17 +1250,20 @@
     align-items: center;
     font-size: 0.4103rem;
   }
+
   .active {
     font-size: 0.5003rem;
     font-weight: 800;
   }
 }
+
 .bottom_content {
   width: 100%;
   height: calc(100% - 1.2821rem);
   position: relative;
   top: 7%;
 }
+
 .scroll_tab {
   width: 100%;
   height: 1rem;
@@ -400,13 +1272,14 @@
   display: -webkit-box;
   white-space: nowrap;
 
-  > div {
+  >div {
     display: inline-block;
     width: 15%;
     height: 100%;
     display: flex;
     font-size: 0.4rem;
     align-items: center;
+
     span {
       display: inline-block;
       min-width: 40%;
@@ -415,6 +1288,7 @@
       line-height: 1.1538rem;
     }
   }
+
   span.active {
     color: rgb(2, 99, 226);
     border-bottom: 0.07rem solid rgb(2, 99, 226);
@@ -422,9 +1296,11 @@
     transition: all 0.5s;
   }
 }
+
 .scroll_tab::-webkit-scrollbar {
   display: none;
 }
+
 .kai_mess {
   width: 100%;
   height: 1.2821rem;
@@ -432,6 +1308,7 @@
   display: flex;
   justify-content: space-between;
   position: absolute;
+
   .left_identity_img {
     width: 0.9744rem;
     height: 100%;
@@ -439,11 +1316,13 @@
     justify-content: center;
     align-items: center;
     margin-left: 0.2rem;
+
     img {
       width: 0.6rem;
       height: 0.6rem;
     }
   }
+
   .text {
     width: 80%;
     height: 100%;
@@ -454,105 +1333,136 @@
     font-size: 0.35rem;
     padding-left: 0.35rem;
   }
+
   .right_go {
     width: 10%;
     display: flex;
     align-items: center;
     justify-content: center;
+
     img {
       width: 0.6rem;
       height: 0.6rem;
     }
   }
 }
+
 .list::-webkit-scrollbar {
   display: none;
 }
+
 .list {
   width: 100%;
-  height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
+
   overflow-x: auto;
   padding-bottom: 1.2821rem;
   padding: 0 0.3rem;
+
   .list_items {
+    margin-top: -0.5rem;
     width: 100%;
-    > div {
+
+    >div {
       width: 100%;
       height: 1.0256rem;
       display: flex;
       margin: 0.5rem 0;
-      > div {
-        > div {
-          display: flex;
-          align-items: center;
-        }
-        .tp {
-          width: 100%;
-          height: 70%;
-        }
-        .bt {
-          width: 100%;
-          height: 30%;
+
+      >div {
+        width: 100%;
+        height: 1.0256rem;
+        display: flex;
+
+        >div {
+          >div {
+            display: flex;
+            align-items: center;
+          }
+
+          .tp {
+            width: 100%;
+            height: 70%;
+          }
+
+          .bt {
+            width: 100%;
+            height: 30%;
+          }
         }
       }
     }
+
     .left_title {
       width: 45%;
       height: 100%;
     }
+
     .center_price {
       width: 35%;
       height: 100%;
     }
+
     .right_bs {
       width: 20%;
       height: 100%;
     }
   }
 }
+
 .list_title {
   width: 100%;
   height: 1rem;
-  margin-top: 1.29rem;
+  margin-top: 0.29rem;
   padding: 0 0.3rem;
   color: #a1a2a4;
   display: flex;
-  > div {
+
+  >div {
     display: flex;
     align-items: center;
   }
+
   .varieties {
     width: 45%;
   }
+
   .latest_price {
     width: 35%;
   }
+
   .applies {
     width: 20%;
   }
 }
+
 .price_color {
-  color: rgb(39, 171, 99);
+  //color: rgb(39, 171, 99);
   font-size: 0.4rem;
   font-weight: 600;
 }
+
 .title_color {
   color: rgb(2, 2, 2);
   font-size: 0.4rem;
   font-weight: 600;
 }
+
 .tab_items {
   font-size: 0.2rem;
 }
+
 .tab_class {
   padding: 0 0.3rem;
 }
+
 .searchs::placeholder {
   color: #8e8f92;
 }
+
 .searchs {
   width: 100%;
 }
+
 .collection {
   display: inline-block;
   width: 0.1rem;
@@ -561,28 +1471,32 @@
   align-items: center;
   justify-content: center;
   margin-right: 0.1rem;
+
   .shu {
     width: 60%;
     height: 100%;
     background: #919191;
   }
 }
+
 .right_money {
   width: 44%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
   .content_money {
     width: 80%;
     height: 80%;
   }
+
   .top_price {
     width: 100%;
     height: 70%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+
     .left {
       width: 0.8rem;
       height: 0.4103rem;
@@ -593,24 +1507,32 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: 0.3rem;
+
       span {
         display: inline-block;
         transform: scale(0.8);
         font-weight: 600;
       }
     }
+
     .right {
-      width: calc(100% - 1.2rem);
+      width: auto;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: flex-end;
+      white-space: nowrap;
+      margin-left: 0.1rem;
+      margin-right: 0.1rem;
+      min-width: 1.9rem;
+
       span {
         font-weight: 600;
+        text-align: right;
       }
     }
   }
+
   .bottom_balance {
     width: 100%;
     height: 30%;
@@ -620,20 +1542,23 @@
     color: #acaeaf;
     transform: scale(0.9);
     margin-left: 0.2rem;
-    padding-right: 0.48rem;
+    padding-right: 0.68rem;
   }
 }
+
 .sanjiao {
   width: 0.4rem;
   height: 0.4rem;
   display: flex;
   align-items: center;
   justify-content: center;
+
   img {
     width: 0.4rem;
     height: 0.4rem;
   }
 }
+
 .dialog {
   position: absolute;
   width: 100%;
@@ -643,9 +1568,11 @@
   z-index: 9;
   transition: all 0.5s;
 }
+
 .dialog.open {
   top: 7%;
 }
+
 .shai {
   position: absolute;
   width: 100%;
@@ -655,7 +1582,232 @@
   z-index: 10;
   transition: all 0.5s;
 }
+
 .shai.open {
   top: 4%;
 }
+
+.cards {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card_item {
+  width: 48%;
+  height: 1.5385rem;
+  background: #f6f6f7;
+  border-radius: 0.2rem;
+  margin-top: 0.2rem;
+
+  .tops_title {
+    width: 100%;
+    height: 40%;
+    display: flex;
+    align-items: flex-end;
+    padding-left: 0.5rem;
+  }
+
+  .bottom_price {
+    width: 100%;
+    height: 60%;
+    display: flex;
+    align-items: center;
+    padding-left: 0.5rem;
+
+    span {
+      font-weight: 600;
+    }
+  }
+}
+
+.shublue {
+  background: #0263e2 !important;
+}
+
+.xuanz {
+  //旋转
+  transform: rotate(180deg);
+  transition: all 0.5s;
+}
+
+.red {
+  color: #ff0000;
+}
+
+.green {
+  color: #27ab63;
+}
+
+.mrt {
+  margin-right: 0.35rem;
+}
+
+.codeIcon {
+  width: 0.6rem;
+  height: 0.6rem;
+  background-color: #0263e2;
+  color: #fff;
+
+  border-radius: 0.05rem;
+  margin-left: 0.1rem;
+  //缩放
+  transform: scale(0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.listHeight {
+  height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
+}
+
+.listHeights {
+  height: calc(100% - 1rem - 1.1538rem - 1.3333rem);
+}
+
+.zxlist {
+  height: calc(100% - 1rem - 1rem);
+  padding-bottom: 0.2rem;
+}
+
+/deep/.van-list__loading {
+  margin-top: 0.2rem;
+}
+
+.hongse {
+
+  background-color: #4d73b1 !important;
+}
+
+.xgsgType {
+  position: relative;
+  top: 30%;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 85%;
+  height: 80%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.1rem;
+  background-color: rgba(102, 204, 153, 0.1);
+  border: 0.04rem solid #5CE398;
+  color: #5CE398;
+}
+
+.xgsgTypeRed {
+  position: relative;
+  top: 30%;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 85%;
+  height: 80%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.1rem;
+  background-color: rgba(223, 59, 59, 0.062);
+  border: 0.04rem solid rgb(231, 61, 61);
+  color: rgb(231, 61, 61);
+}
+
+.setting_content {
+  width: 100%;
+  height: 5rem;
+  padding: 0.3rem;
+
+  .old_password {
+    width: 100%;
+    height: 1.6rem;
+    background: rgb(243, 243, 243);
+    border-radius: 0.15rem;
+    display: flex;
+    margin-top: 0.8rem;
+
+    .left_titles {
+      margin-left: 0.2rem;
+      width: 25%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 0.2rem;
+      font-size: 0.3975rem;
+
+      // justify-content: flex-end;
+      span {
+        font-weight: 600;
+        letter-spacing: 0.04rem;
+      }
+    }
+
+    .right_password_input {
+      width: 75%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      input {
+        width: 100%;
+        height: 100%;
+        padding-left: 0.2rem;
+        border-radius: 0 0.2rem 0.2rem 0;
+        font-size: 0.3975rem;
+        font-weight: 600;
+        //文字间距
+        letter-spacing: 0.04rem;
+      }
+    }
+  }
+
+  .btn_setting {
+    width: 100%;
+    height: 1.3rem;
+    border-radius: 0.15rem;
+    background: #2d6ae9;
+    color: #fff;
+    font-size: 0.4615rem;
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      font-weight: 600;
+    }
+  }
+}
+
+.shijian {
+  width: 100%;
+  height: 1.6rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.xgsj {
+  font-size: 0.3875rem;
+  font-weight: 600;
+  display: flex;
+  height: 50%;
+  align-items: center;
+
+}
+
+.sjtlt {
+  width: 25%;
+  margin-left: 0.4rem;
+}
+
+.xgTime() {
+  width: 75%;
+}
+
+/deep/.van-popup {
+  border-radius: 0.2rem 0.2rem 0 0;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.3