1

admin

2026-01-27 f66eee1d038afc05f1a727db256ba5c6818f6fb4

 src/views/quotes/List.vue

@@ -13,7 +13,7 @@
      </header>
      <section class="quotes-tab-container">
        <van-tabs v-model:active="tabActive" shrink @click-tab="onClickTab">
          <van-tab v-for="(item, index) in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
          <van-tab v-for="item in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
            <component @changeLetMego="handleChangeLetMego" :index="item.tabIndex" :tabActive="tabActive"
              :is="components.get(item.type)" :key="item.tabIndex" ref="tabRefs" />
          </van-tab>
@@ -60,7 +60,7 @@

const router = useRouter()
const route = useRoute()
const tabActive = ref(0)
const tabActive = ref(1)
const TITLE = import.meta.env.VITE_APP__TITLE
const showSave = ref(false)
const searchSrc = new URL(`../../assets/theme/${thStore.theme}/image/search.png`, import.meta.url)
@@ -124,18 +124,18 @@
)
const listTab = ref([
  {
    title: 'ETF',
    type: 'Etf',
    urlMatch: 'etf',
    symbolType: 'indices',
    tabIndex: 8
  },
  {
    title: t('加密货币'),
    type: 'Cryptos',
    urlMatch: 'crypto',
    symbolType: 'cryptos',
    tabIndex: 1
  },
  {
    title: 'ETF',
    type: 'Etf',
    urlMatch: 'etf',
    symbolType: 'indices',
    tabIndex: 8
  },
  // {
  //   title: t('印度股'),
@@ -144,20 +144,20 @@
  //   symbolType: 'INDIA-stocks',
  //   tabIndex: 0
  // },
  {
    title: t('UsStocks'),
    type: 'UsStock',
    urlMatch: 'stock',
    symbolType: 'US-stocks',
    tabIndex: 3
  },
  {
    title: t('港股'),
    type: 'HkStock',
    urlMatch: 'HK-stocks',
    symbolType: 'HK-stocks',
    tabIndex: 4
  },
  // {
  //   title: t('UsStocks'),
  //   type: 'UsStock',
  //   urlMatch: 'stock',
  //   symbolType: 'US-stocks',
  //   tabIndex: 3
  // },
  // {
  //   title: t('港股'),
  //   type: 'HkStock',
  //   urlMatch: 'HK-stocks',
  //   symbolType: 'HK-stocks',
  //   tabIndex: 4
  // },
  // {
  //   title: t('台股'),
  //   type: 'TWStock',
@@ -378,13 +378,17 @@

  .header {
    display: flex;
    height: 34px;
    padding: 0 12px;
    height: 56px;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    background: $main_background;
    border-bottom: 1px solid rgba(118, 128, 143, 0.1);

    .flex-l {
      flex: 1;
      display: inline-flex;
      align-items: center;

      .icon {
        display: inline-block;
@@ -401,9 +405,10 @@

    .title {
      font-weight: 700;
      font-size: 20px;
      line-height: 28px;
      font-size: 24px;
      line-height: 32px;
      color: $mainTextColor;
      letter-spacing: -0.5px;
    }

    .icon-group {
@@ -411,11 +416,20 @@

      .icon {
        display: flex;
        width: 28px;
        height: 28px;
        margin-left: 16px;
        width: 40px;
        height: 40px;
        margin-left: 12px;
        justify-content: center;
        align-items: center;
        background: rgba(146, 209, 255, 0.08);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(146, 209, 255, 0.12);
          transform: scale(1.05);
        }
      }
    }

@@ -423,26 +437,55 @@
  }

  .quotes-tab-container {
    margin-top: 18px;
    margin-top: 0;
    background: $main_background;
    
    :deep(.van-tabs__nav) {
      padding: 0 20px;
      background: $main_background;
    }
    
    :deep(.van-tab) {
      font-size: 15px;
      font-weight: 500;
      padding: 16px 20px;
      color: $text_color1;
      transition: all 0.2s ease;
    }
    
    :deep(.van-tab.van-tab--active) {
      font-weight: 700;
      color: $text_color;
    }
    
    :deep(.van-tabs__line) {
      background: $color_main;
      height: 3px;
      border-radius: 2px;
      width: 24px !important;
      bottom: 7px;
    }
  }


}

.addBox {
  border-radius: 10px;
  width: 300px;
  height: 100px;
  font-size: 12px;
  background: $fina-border;
  border-radius: 16px;
  width: 320px;
  min-height: 100px;
  font-size: 13px;
  background: $main_background;
  position: fixed;
  bottom: 70px;
  left: 50%;
  margin-left: -150px;
  margin-left: -160px;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(118, 128, 143, 0.1);

  .add {
    padding: 16px;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    position: relative;
@@ -450,20 +493,29 @@

    .closeAdd {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 10px;
      height: 10px;
      right: 12px;
      top: 12px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s ease;
      
      &:hover {
        opacity: 1;
      }
    }

    .angle {
      position: absolute;
      bottom: -37px;
      bottom: -12px;
      width: 0;
      height: 0;
      left: 131px;
      border: 20px solid transparent;
      border-top: 24px solid $fina-border;
      left: 50%;
      transform: translateX(-50%);
      border: 12px solid transparent;
      border-top: 12px solid $main_background;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
  }
}