1

PC-20250623MANY\Administrator

2025-07-13 f7a99184725f7ea0884cf478f169aad4e5b6583c

1

 src/App.vue

@@ -1,12 +1,20 @@
<template>
  <div id="app" :class="`${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`">
  <div
    id="app"
    :class="`${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"
  >
    <div :class="`header-box`" v-if="hasHeader && title !== $t('hj248')">
      <mt-header :title="title">
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>

        <div v-if="!is_Show">
          <template v-if="iconRight == 'search'">
            <img slot="right" class="search-right" src="./assets/ico/fangdajing.png" alt />
            <img
              slot="right"
              class="search-right"
              src="./assets/ico/fangdajing.png"
              alt
            />
          </template>
          <template v-else>
            <mt-button icon="more" slot="right"></mt-button>
@@ -41,7 +49,7 @@
  components: {
    foot,
    elalert,
    loginPopup,
    loginPopup
  },
  name: "App",
  created() {
@@ -89,7 +97,7 @@
        console.log("slide-right");
        this.transitionName = "slide-right";
      }
    },
    }
  },
  data() {
    return {
@@ -98,7 +106,7 @@
      iconRight: "default",
      transitionName: "",
      is_Show: true,
      is_foot: true,
      is_foot: true
    };
  },
  methods: {
@@ -109,8 +117,8 @@
    },
    dialogClose() {
      this.$store.commit("dialogVisible", false);
    },
  },
    }
  }
};
</script>

@@ -124,10 +132,17 @@
@brown: #ff976a;
@grey: #dddddd;

/deep/ .no_data {
  width: 100%;
  padding-top: 2em;
  img {
    width: 50%;
  }
}
/deep/ .line-one {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
  text-overflow: ellipsis;
}

/deep/ .flex-center {
@@ -159,7 +174,6 @@
  justify-content: flex-end;
  align-items: center;
}


/deep/ .van-list__finished-text {
  line-height: 1.925926rem !important;
@@ -275,7 +289,7 @@

    /deep/.van-skeleton__row,
    .van-skeleton__title {
      background-color: #fff !important;
      // background-color: #fff !important;
    }
  }

@@ -309,7 +323,8 @@
      color: #000;
    }

    /deep/.mint-tab-container {}
    /deep/.mint-tab-container {
    }

    /deep/.mint-tab-item {
      background: #272733;
@@ -334,7 +349,8 @@
  position: relative !important;
}

.topLeft {}
.topLeft {
}

/deep/.el-alert {
  width: 75% !important;

 src/assets/img/cc_jl.png

 src/assets/img/cc_ss.png

 src/assets/img/cz.png

 src/assets/img/descend.png

 src/assets/img/jl.png

 src/assets/img/rise.png

 src/assets/img/tx.png

 src/assets/img/zhaobudao2.png

 src/assets/img/钱袋.png

 src/axios/api.js

@@ -513,6 +513,11 @@
  return get(`/api/news/getNewsList.do?pageNum=1&pageSize=15&type=${type}`, {});
}

// 查询新闻列表
export function getNewsList(options) {
  return get(`/api/news/getNewsList.do`, options);
}

// 查询新闻详情
export function queryNewsDetail(type) {
  return get(`/api/news/getDetail.do?id=${type}`, {});
@@ -592,4 +597,9 @@
// 删除银行卡
export function deleteBankCard(options) {
  return post("/user/bank/delete.do", options);
}
}

// 获取首页数据
export function getHomePageData() {
  return post("/api/stock/getHomePageData.do");
}

 src/axios/api.url.js

@@ -9,9 +9,9 @@
  // baseURL: '/',
  // baseURL: 'https://api.coinbtcs.com/',
  // 0311
   baseURL: "https://stockapi.yanshiz.com/",
  baseURL: "https://stockapi.yanshiz.com/",
  // 本地
 // baseURL: "http://192.168.10.13:8091/",
  // baseURL: "http://192.168.10.20:8091/",
  util: {
    image: "/util/image.html" // 图片上传
  }

 src/components/foot.vue

@@ -37,6 +37,24 @@
        {{ $t("hj61") }}
      </div>
    </div>
    <div :class="touch == 7 ? 'footDemos' : 'footDemo'" @click="goRouter('/tradeNew', 7)">
      <div class="footImgDeft">
        <img v-show="$store.state.select == '/tradeNew'" src="../assets/foot/transaction-act.png" />
        <img v-show="$store.state.select != '/tradeNew'" src="../assets/foot/transaction.png" />
      </div>
      <div :class="$store.state.select == '/tradeNew' ? 'blueFont' : ''">
        {{ $t("hj225") }}
      </div>
    </div>
    <div :class="touch == 8 ? 'footDemos' : 'footDemo'" @click="goRouter('/account', 8)">
      <div class="footImgDeft">
        <img v-show="$store.state.select == '/account'" src="../assets/foot/account-act.png" />
        <img v-show="$store.state.select != '/account'" src="../assets/foot/account.png" />
      </div>
      <div :class="$store.state.select == '/account' ? 'blueFont' : ''">
        {{ $t("Account") }}
      </div>
    </div>
    <div :class="touch == 2 ? 'footDemos' : 'footDemo'" @click="goRouter('/trading-list', 2)">
      <div class="footImgDeft">
        <img v-show="$store.state.select == '/trading-list'"

 src/components/index-component.vue

New file
@@ -0,0 +1,87 @@
<template>
  <div class="index_component" :class="dataObj.chg > 0 ? 'bg-green' : 'bg-red'">
    <div class="item_title line-one">{{ dataObj.name }}</div>
    <div class="item_price">{{ dataObj.last }}</div>
    <div class="item_index flex-between">
      <span>{{ dataObj.chg }}</span>
      <span>{{ dataObj.chgPct }}</span>
    </div>
    <div style="width:100%;flex:1">
      <Echart :ids="ids" :colorType="dataObj.chg / 1" :data="klist"></Echart>
    </div>
  </div>
</template>

<script>
import Echart from "@/page/home/components/echart.vue";
export default {
  name: "IndexComponent",
  props: {
    ids: {
      type: String,
      required: true
    },
    dataObj: {
      type: Object,
      default: () => {
        return {
          name: "",
          last: "",
          chg: "",
          chgPct: "",
          kdata: []
        };
      }
    }
  },
  computed: {
    klist() {
      return this.dataObj.kdata.map(item => {
        return item.c;
      });
    }
  },
  components: {
    Echart
  }
};
</script>

<style lang="less" scoped>
@red: #ee0a24;

.bg-red {
  background-color: rgba(red, 0.1);
  color: @red;
}

.bg-green {
  background-color: rgba(green, 0.1);
  color: green;
}

.index_component {
  width: 100%;
  height: 100%;
  border-radius: 0.1em;
  padding: 0.25em 0;
  display: flex;
  flex-direction: column;

  .item_title {
    padding: 0 0.5em;
    font-size: 0.4em;
  }

  .item_price {
    padding: 0.5em 0.5em;
    font-size: 0.4em;
  }

  .item_index {
    padding: 0 0.5em;
    font-size: 0.3em;
    margin-bottom: 0.2em;
  }
}
</style>

 src/components/nPagination.vue

@@ -1,55 +1,98 @@
<template>
    <div class="n_pagination flex-center">
        <div class="n_pagination_item flex-center prohibited">
            <span>{{ $t('Previous') }}</span>
        </div>
        <div class="n_page_number flex-center">
            <span>1</span>
            <span>/</span>
            <span>300</span>
        </div>
        <div class="n_pagination_item flex-center">
            <span>{{ $t('Next') }}</span>
        </div>
  <div class="n_pagination flex-center">
    <div
      class="n_pagination_item flex-center"
      @click="prev"
      :class="pageNo <= 1 ? 'prohibited' : ''"
    >
      <span>{{ $t("Previous") }}</span>
    </div>
    <div class="n_page_number flex-center">
      <span>{{ pageNo }}</span>
      <span>/</span>
      <span>{{ totalPage }}</span>
    </div>
    <div
      class="n_pagination_item flex-center"
      @click="next"
      :class="pageNo >= totalPage ? 'prohibited' : ''"
    >
      <span>{{ $t("Next") }}</span>
    </div>
  </div>
</template>

<script>
export default {
    name: 'nPagination',
    props: {
        total: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 10
        },
        currentPage: {
            type: Number,
            default: 1
        }
  name: "nPagination",
  props: {
    total: {
      type: Number,
      default: 1
    },
    data() {
        return {
            pageList: [],
            totalPage: 0,
            currentPage: 1
        }
    pageSize: {
      type: Number,
      default: 10
    },
    watch: {
        total() {
            this.init()
        },
        pageSize() {
            this.init()
        },
        currentPage() {

        }
    pageNo: {
      type: Number,
      default: 1
    },
    // 是否跳转到页面顶部
    toTop: {
      type: Boolean,
      default: true
    }
}
  },
  data() {
    return {
      pageList: []
      //   totalPage: 0
    };
  },
  watch: {
    total() {
      this.init();
    },
    pageSize() {
      this.init();
    },
    pageNo() {
      if (this.toTop) {
        // 页码变动时跳转到页面顶部
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      }
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    init() {
      // this.totalPage = Math.ceil(this.total / this.pageSize)
      // console.log("aaaaaaaaaaaaaaaaaaaaa");
      // this.pageList = []
      // for (let i = 1; i <= this.totalPage; i++) {
      //     this.pageList.push(i)
      // }
    },
    next() {
      if (this.pageNo < this.totalPage) {
        this.$emit("update:pageNo", this.pageNo + 1);
      }
    },
    prev() {
      if (this.pageNo > 1) {
        this.$emit("update:pageNo", this.pageNo - 1);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@@ -57,32 +100,33 @@
@green: #c4d600;

.n_pagination {
    width: 100%;
    height: 2em;
    color: #646566;
  width: 100%;
  height: 2em;
  color: #646566;

    .n_page_number {
        width: 3em;
  .n_page_number {
    width: 3em;

        span {
            font-size: .37em;
        }
    span {
      font-size: 0.37em;
    }
  }

    .n_pagination_item {
        border: .01em solid @green2;
        width: 3em;
        height: 1em;
        color: @green;
  .n_pagination_item {
    border: 0.01em solid @green2;
    width: 3em;
    height: 1em;
    color: @green;
    background-color: #fff;

        span {
            font-size: .4em;
        }
    span {
      font-size: 0.4em;
    }
  }

    .prohibited {
        background-color: #f7f8fa;
        color: #c4c5c6;
    }
  .prohibited {
    background-color: #f7f8fa;
    color: #c4c5c6;
  }
}
</style>
</style>

 src/components/pageHead.vue

New file
@@ -0,0 +1,68 @@
<template>
  <div class="page_head">
    <div class="head_content flex-between" :class="fixed ? 'fixed' : ''">
      <div class="head_left flex-start" @click="$router.go(-1)">
        <van-icon name="arrow-left" size=".4em" />
      </div>
      <div class="head_title line-one">{{ title }}</div>
      <div class="head_right flex-end">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pageHead",
  props: {
    title: {
      type: String,
      default: ""
    },
    fixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
.page_head {
  font-size: 10vw;
  height: 1.22em;
  position: relative;
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
  }
  .head_content {
    height: 1.22em;
    padding: 0 0.25em;
    border-bottom: 0.01em solid #f5f5f5;
    & > div {
      min-width: 1em;
    }

    .head_left {
      color: @green;
    }

    .head_title {
      font-size: 0.4em;
      font-weight: 500;
      width: 60%;
      text-align: center;
    }
  }
}
</style>

 src/components/stock-list.vue

New file
@@ -0,0 +1,171 @@
<template>
  <div class="stock_list">
    <van-row class="markets_head">
      <van-col span="12" class="flex-start head_item">{{ $t("Name") }}</van-col>
      <van-col span="4" class="flex-start head_item">{{ $t("Price") }}</van-col>
      <van-col span="8" class="flex-end head_item">{{ $t("Change") }}</van-col>
    </van-row>

    <van-row class="markets_item" v-for="item in stockList" :key="item.id">
      <van-col span="12" class="item_n">
        <div class="flex-start">
          <span class="i_icon">{{ item.stock_type }}</span>
          <span class="i_hint">{{ item.spell }}</span>
        </div>
        <div class="i_name">{{ item.name }}</div>
      </van-col>
      <van-col span="4" class="flex-start item_n">{{ item.nowPrice }}</van-col>
      <van-col span="8" class="item_n">
        <div class="flex-end" style="margin-bottom: .15em;">
          {{ item.hcrate }}
        </div>
        <div class="flex-end">{{ item.hcrateP }}</div>
      </van-col>

      <div class="edit flex-end" v-show="editorShow">
        <span>{{ $t("移除") }}</span>
      </div>
    </van-row>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import nPagination from "@/components/nPagination.vue";
import * as api from "@/axios/api";
export default {
  name: "stock_list",
  components: {
    nPagination
  },
  data() {
    return {
      editorShow: false, // 编辑状态
      pageNum: 1,
      pageSize: 10,
      total: 0,
      stockList: []
    };
  },
  props: {
    propOption: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    propOption: {
      handler(val) {
        this.getStockList();
      }
    },
    pageNum: {
      handler(val) {
        console.log(val);
      }
    }
  },
  mounted() {
    this.getStockList();
  },
  methods: {
    onEdit() {
      this.editorShow = !this.editorShow;
    },
    async getStockList() {
      // 获取数据
      let opt = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        stockPlate: "",
        keyWords: "",
        // stockType: '',
        orderBy: ""
      };

      opt = { ...opt, ...this.propOption };

      let data = await api.getStockByType(opt);
      this.stockList = data.data.list;
      this.total = data.data.total;
    }
  }
};
</script>

<style lang="less" scoped>
@green2: #f0f0f0;
@dark_green: #07c160;
@red: #ee0a24;

.stock_list {
  .markets_head {
    background-color: @green2;
    margin-top: 0.25em;
    height: 1em;
    padding: 0 0.25em;

    .head_item {
      font-size: 0.4em;
      height: 100%;
      font-weight: 600;
    }
  }

  .markets_item {
    // margin-top: .25em;
    // height: 1em;
    padding: 0.5em 0.25em 0.25em;
    border-bottom: #f5f5f5 solid 0.01em;
    position: relative;

    .item_n {
      font-size: 0.4em;
      min-height: 2em;
      font-weight: 500;

      .i_icon {
        border-radius: 0 26em 26em 0;
        background: @dark_green;
        color: #fff;
        padding: 0.1em 0.5em 0.1em 0.4em;
        margin-right: 0.3em;
        font-size: 0.8em;
      }

      .i_name {
        margin-top: 0.3em;
        color: #777777;
        font-size: 0.8em;
      }
    }

    .edit {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.8)
      );
      text-align: end;
      color: @red;
      padding-right: 0.25em;

      span {
        font-size: 0.55em;
      }
    }
  }
}
</style>

 src/components/tabHead.vue

@@ -1,7 +1,10 @@
<template>
  <div class="tab_head">
    <div class="icon" @click="searchShow = true">
      <van-icon name="search" size=".5em" />
    <div class="head_left">
      <div class="icon" @click="searchShow = true" v-if="leftShow">
        <van-icon name="search" size=".5em" />
      </div>
      <slot name="left"></slot>
    </div>
    <div class="head_right">
      <div class="icon" v-if="rightShow" @click="aRouter1">
@@ -13,17 +16,34 @@
      <slot></slot>
    </div>
    <!-- 搜索弹窗 -->
    <van-popup v-model="searchShow" round position="bottom" :style="{ height: '80%' }">
    <van-popup
      v-model="searchShow"
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup_head">
        <van-icon name="arrow-left" size=".5em" @click="searchShow = false" />
        <div class="popup_input">
          <van-field v-model="searchValue" :placeholder="$t('hj37')" left-icon="search" clearable />
          <van-field
            v-model="searchValue"
            :placeholder="$t('hj37')"
            left-icon="search"
            clearable
          />
        </div>
        <van-button type="primary" round @click="submit">{{ $t("Search") }}</van-button>
        <van-button type="primary" round @click="submit">{{
          $t("Search")
        }}</van-button>
      </div>

      <van-list v-model="loading" :finished="finished" :finished-text="$t('hj43')" @load="onLoad"
        v-if="(lists && lists.length > 0) || !finished">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="$t('hj43')"
        @load="onLoad"
        v-if="(lists && lists.length > 0) || !finished"
      >
        <van-cell v-for="item in lists" :key="item.id">
          <div class="search_item">
            <div class="search_item_left">
@@ -57,35 +77,43 @@
  data() {
    return {
      searchShow: false, // 搜索弹窗
      searchValue: '', // 搜索内容
      searchValue: "", // 搜索内容
      lists: [], // 搜索列表
      loading: false, // 是否加载
      finished: true, // 是否加载完成
      pageNum: 1,
      pageSize: 20,
      pageSize: 20
    };
  },
  props: {
    rightShow: { // 是否显示客服和设置图标
    // 是否显示客服和设置图标
    rightShow: {
      type: Boolean,
      default: true
    },
    // 是否显示左侧搜索
    leftShow: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    searchShow() {
      this.searchValue = ''
      this.init()
      this.searchValue = "";
      this.init();
    }
  },
  async mounted() {
    this.init()
    this.init();
    this.getInfoSite();
  },
  methods: {
    aRouter1() { // 跳转客服页面
    aRouter1() {
      // 跳转客服页面
      window.open(this.onlineService);
    },
    async getInfoSite() { // 获取客服地址
    async getInfoSite() {
      // 获取客服地址
      let data = await api.getInfoSite();
      if (data.status === 0) {
        this.onlineService = data.data.onlineService;
@@ -93,23 +121,25 @@
      } else {
        this.$store.commit("elAlertShow", {
          elAlertShow: true,
          elAlertText: data.msg,
          elAlertText: data.msg
        });
      }
    },
    goToTopUp() { // 跳转设置页面
    goToTopUp() {
      // 跳转设置页面
      this.$router.push("/setting");
    },
    onLoad: handleDt.throttle(async function (a, b) { // 搜索列表加载
    onLoad: handleDt.throttle(async function(a, b) {
      // 搜索列表加载
      this.finished = false;
      let opt = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        stockPlate: "",
        keyWords: this.searchValue,
        stockType: '',
        orderBy: "",
      }
        stockType: "",
        orderBy: ""
      };

      let data = await api.getStockByType(opt);
      this.loading = false; // 加载状态结束
@@ -118,23 +148,25 @@
        this.lists = [...this.lists, ...data.data.list];
      }

      if (data.data.list && data.data.list.length <= 0) { // 数据全部加载完成
      if (data.data.list && data.data.list.length <= 0) {
        // 数据全部加载完成
        this.finished = true;

      } else {
        this.pageNum++;
      }
    }, 500),
    init() { // 初始化
    init() {
      // 初始化
      this.pageNum = 1;
      this.lists = [];
      this.finished = true;
    },
    submit() { // 提交搜索
      this.init()
      this.onLoad()
    submit() {
      // 提交搜索
      this.init();
      this.onLoad();
    }
  },
  }
};
</script>

@@ -144,7 +176,7 @@

.tab_head {
  font-size: 10vw;
  padding: .266em;
  padding: 0.266em;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -154,7 +186,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .5em;
    padding-top: 0.5em;

    img {
      width: 65%;
@@ -166,22 +198,22 @@
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    padding: .5em 0;
    padding: 0.5em 0;

    .search_item_left {
      flex: 1;

      .search_item_left_hint {
        margin-top: .3em;
        margin-top: 0.3em;
        color: #969799;
        font-size: .8em;
        font-size: 0.8em;

        span {
          border-radius: 0 26em 26em 0;
          background: @dark_green;
          color: #fff;
          padding: 0 .3em;
          margin-right: .1em;
          padding: 0 0.3em;
          margin-right: 0.1em;
        }
      }
    }
@@ -193,7 +225,7 @@
      color: #969799;

      span {
        margin-right: .5em;
        margin-right: 0.5em;
      }
    }
  }
@@ -202,7 +234,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25em;
    padding: 0.25em;

    /deep/ .van-cell {
      background: none;
@@ -222,11 +254,11 @@
      @inpH: 1em;
      height: @inpH;
      flex: 1;
      border-radius: @inpH/2;
      border-radius: @inpH / 2;
      display: flex;
      align-items: center;
      margin-left: .5em;
      margin-right: .5em
      margin-left: 0.5em;
      margin-right: 0.5em;
    }
  }

@@ -237,7 +269,7 @@
    background: @grey;
    display: flex;
    justify-content: center;
    align-items: center
    align-items: center;
  }

  .head_right {
@@ -247,7 +279,7 @@

  .head_right {
    .icon {
      margin-left: .266em;
      margin-left: 0.266em;
    }
  }
}

 src/locales/cht.json

@@ -590,5 +590,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/de.json

@@ -585,5 +585,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/en.json

@@ -605,5 +605,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/ens.json

@@ -599,5 +599,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/fra.json

@@ -584,5 +584,38 @@
  "Name": "Name",
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous"
  "Previous": "Previous",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/hi.json

@@ -604,5 +604,38 @@
  "Price": "मुल्य",
  "Change": "परिवर्तन",
  "Previous": "पिछला",
  "Next": "सो"
  "Next": "सो",
  "移除": "निकालें",
  "编辑": "संपादक",
  "完成": "संदेश निर्माण",
  "Worth": "लायक",
  "Profit": "लाभ",
  "Cost": "लागत",
  "Current": "चालू कीमत",
  "Account": "हिसाब-किताब",
  "账户变动记录": "खाता परिवर्तन विवरण",
  "持仓收益": "स्थिति लाभ",
  "订单": "आदेश",
  "最低认购金额": "न्यूनतम सदस्यता राशि",
  "交易成功率": "लेनदेन सफलता दर",
  "预期收益": "वापसी की अपेक्षित दर",
  "交易周期": "व्यापारिक चक्र",
  "AI交易订单": "AI ट्रेडिंग ऑर्डर",
  "申购金额": "सदस्यता राशि",
  "实际收益": "वास्तविक प्राप्ति",
  "状态": "स्थिति",
  "提交时间": "प्रस्तुत करने का समय",
  "申购中": "आवेदन में",
  "交易中": "लेनदेन प्रगति पर है",
  "成功": "सफलता",
  "失败": "असफल",
  "输入编码搜索": "खोज करने के लिए कोड नंबर दर्ज करें",
  "大宗交易订单": "ब्लॉक ट्रेडिंग ऑर्डर",
  "待成交": "लंबित सौदा",
  "已取消": "रद्द",
  "总金额": "कुल रकम",
  "待认缴": "लंबित भुगतान",
  "待转股": "लंबित स्टॉक रूपांतरण",
  "已转股": "संक्रांत स्टॉक",
  "未中标": "लेखापरीक्षा पारित नहीं हुई"
}

 src/locales/jp.json

@@ -586,5 +586,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/kor.json

@@ -586,5 +586,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/th.json

@@ -586,5 +586,38 @@
  "Price": "Price",
  "Change": "Change",
  "Previous": "Previous",
  "Next": "Next"
  "Next": "Next",
  "移除": "Remove",
  "编辑": "Editor",
  "完成": "Completed",
  "Worth": "Worth",
  "Profit": "Profit",
  "Cost": "Cost",
  "Current": "Current",
  "Account": "Account",
  "账户变动记录": "Account Change Details",
  "持仓收益": "Position profit",
  "订单": "Orders",
  "最低认购金额": "Minim Subscription Amount",
  "交易成功率": "Transaction Success Rate",
  "预期收益": "Expected Rate Of Return",
  "交易周期": "Trading Cycles",
  "AI交易订单": "AI Trading Orders",
  "申购金额": "Subscription Amount",
  "实际收益": "Actual returns",
  "状态": "Status",
  "提交时间": "Submission Time",
  "申购中": "In Application",
  "交易中": "Transaction in progress",
  "成功": "Success",
  "失败": "Failed",
  "输入编码搜索": "Enter Code No to Search",
  "大宗交易订单": "Block Trading Orders",
  "待成交": "Pending Deal",
  "已取消": "Cancelled",
  "总金额": "Total Amount",
  "待认缴": "Pending payment",
  "待转股": "Pending Stock Conversion",
  "已转股": "Transferred stock",
  "未中标": "Audit not passed"
}

 src/locales/zh.json

@@ -364,7 +364,7 @@
  "hj222": "使用手机号登录",
  "hj223": "还没有账号?去注册!",
  "hj224": "主页",
  "hj225": "贸易",
  "hj225": "交易",
  "hj226": "位置",
  "hj227": "我的",
  "hj228": "暂无充值信息!",
@@ -590,5 +590,38 @@
  "Price": "价格",
  "Change": "变动",
  "Previous": "上一页",
  "Next": "下一页"
  "Next": "下一页",
  "移除": "移除",
  "编辑": "编辑",
  "完成": "完成",
  "Worth": "市值",
  "Profit": "收益",
  "Cost": "成本",
  "Current": "现价",
  "Account": "账户",
  "账户变动记录": "账户变动记录",
  "持仓收益": "持仓收益",
  "订单": "订单",
  "最低认购金额": "最低认购金额",
  "交易成功率": "交易成功率",
  "预期收益": "预期收益",
  "交易周期": "交易周期",
  "AI交易订单": "AI交易订单",
  "申购金额": "申购金额",
  "实际收益": "实际收益",
  "状态": "状态",
  "提交时间": "提交时间",
  "申购中": "申购中",
  "交易中": "交易中",
  "成功": "成功",
  "失败": "失败",
  "输入编码搜索": "输入编码搜索",
  "大宗交易订单": "大宗交易订单",
  "待成交": "待成交",
  "已取消": "已取消",
  "总金额": "总金额",
  "待认缴": "待认缴",
  "待转股": "待转股",
  "已转股": "已转股",
  "未中标": "未中标"
}

 src/main.js

@@ -136,9 +136,15 @@
router.beforeEach((to, from, next) => {
  store.state.select = to.path;
  document.title = to.meta.title;
  console.log(store.state, "store.state", !!store.state.token);
  console.log(
    store.state,
    "store.state",
    !!store.state.token,
    to.meta.requireAuth && !!!store.state.token
  );
  if (to.meta.requireAuth && !!!store.state.token) {
    // next("/login");
    next("/login");
    return;
    //点击管理后台分享的二维码 进入注册页面 会识别未登录 导致进入登录页面
  }
  // if (!to.query.url && from.query.url) {

 src/page/home/components/echart.vue

@@ -4,16 +4,20 @@
  </div>
</template>
<script>
import * as echarts from 'echarts';
import * as echarts from "echarts";
export default {
  props: {
    ids: {
      type: String,
      default: '0',
      default: "0"
    },
    colorType: {
      type: Number,
      default: 0,
      default: 0
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
@@ -21,57 +25,61 @@
      myChart: "",
      value: Math.random() * 1000,
      now: new Date(1997, 9, 3),
      oneDay: 24 * 3600 * 1000,
      oneDay: 24 * 3600 * 1000
    };
  },
  methods: {
    initCharts() {
      let data = []
      for (var i = 0; i < 1000; i++) {
        data.push(this.randomData());
      }
      // let data = [];
      // for (var i = 0; i < 1000; i++) {
      //   data.push(this.randomData());
      // }

      var chartDom = document.getElementById('main' + this.ids);
      var myChart = echarts.init(chartDom, 'dark');
      // console.log("dadadadad",data);

      var chartDom = document.getElementById("main" + this.ids);
      var myChart = echarts.init(chartDom, "dark");
      var option;
      var greenOrRed = "";
      var greenOrReds = "";
      console.log(this.colorType)
      // console.log(this.colorType);
      if (this.colorType > 0) {
        greenOrRed = 'rgba(65,172,117,0.6)'
        greenOrReds = 'rgba(65,172,117,0.05)'
        greenOrRed = "rgba(65,172,117,0.6)";
        greenOrReds = "rgba(65,172,117,0.05)";
      } else {
        greenOrRed = 'rgba(166,10,36,0.6)'
        greenOrReds = 'rgba(166,10,36,0.05)'
        greenOrRed = "rgba(166,10,36,0.6)";
        greenOrReds = "rgba(166,10,36,0.05)";
      }
      option = {
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,

          type: "category",
          boundaryGap: false
        },
        yAxis: {
          show: false,
          type: 'value'
          type: "value",
          scale: true
        },
        tooltip: {
          show: true,
          extraCssText: '100%;height: 1.5385rem;'
          extraCssText: "100%;height: 1.5385rem;"
        },
        backgroundColor: 'rgba(0,0,0,0)',
        backgroundColor: "rgba(0,0,0,0)",
        color: {
          type: 'linear',
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0, color: greenOrRed    // 0% 处的颜色
            }, 
              offset: 0,
              color: greenOrRed // 0% 处的颜色
            },
            {
              offset: 1, color: greenOrReds   // 100% 处的颜色
              offset: 1,
              color: greenOrReds // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
@@ -79,8 +87,8 @@
        series: [
          {
            // data: [820, 932, 901, 934, 1000, 900, 1320, 820, 932, 901, 934, 1000, 900,],
            data,
            type: 'line',
            data: this.data,
            type: "line",
            areaStyle: {}
          }
        ]
@@ -94,7 +102,11 @@
      return {
        name: this.now.toString(),
        value: [
          [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
          [
            this.now.getFullYear(),
            this.now.getMonth() + 1,
            this.now.getDate()
          ].join("/"),
          Math.round(this.value)
        ]
      };
@@ -102,9 +114,9 @@
  },
  mounted() {
    this.initCharts();
    window.onresize = function () {
    window.onresize = function() {
      this.myChart.resize();
    };
  }
}
};
</script>

 src/page/home/components/newsItem.vue

New file
@@ -0,0 +1,90 @@
<template>
  <div class="news_item flex-between-start" @click="toNewsPage(item.id)">
    <div class="news_title">{{ item.title }}</div>
    <img :src="item.imgurl" alt="" />
    <div class="news_time">{{ item.showTime | gettime }}</div>
  </div>
</template>

<script>
export default {
  name: "newsItem",
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  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 d + "-" + mm + "-" + y + " " + h + ":" + m + ":" + c;
    }
  },
  methods: {
    toNewsPage(id) {
      this.$router.push(`/newPage?listid=${id}`);
    }
  }
};
</script>

<style lang="less" scoped>
.news_item {
  width: 100%;
  padding: 0.25em;
  border-bottom: 0.02667em solid #f5f5f5;
  position: relative;

  .news_time {
    position: absolute;
    bottom: 0.8em;
    left: 0.8em;
    font-size: 0.3em;
    color: #999;
  }

  .news_title {
    font-size: 0.4em;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    line-break: anywhere;
    -webkit-box-orient: vertical;
    width: 15.2em;
  }

  img {
    width: 2.8em;
    height: 2em;
    margin-right: 0.25em;
    border-radius: 0.1em;
  }
}
</style>

 src/page/home/homeIndex.vue

@@ -1,7 +1,13 @@
<template>
  <div class="home_index">
    <tab-head>
      <van-popover v-model="languageShow" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end">
      <van-popover
        v-model="languageShow"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="bottom-end"
      >
        <template #reference>
          <div class="multilingual">
            <img src="../../assets/img/language.svg" alt="" />
@@ -12,33 +18,33 @@

    <div class="subheading">
      <div class="subheading_title">
        <img src="../../assets/img/shortcut.png" alt="">
        <span>{{ $t('快捷方式') }}</span>
        <img src="../../assets/img/shortcut.png" alt="" />
        <span>{{ $t("快捷方式") }}</span>
      </div>
      <div class="swiper">
        <div class="swiper-wrapper flex-start">
        <div class="swiper-wrapper flex-between">
          <div class="swiper-slide">
            <div class="nav_item flex-center">
              <img src="../../assets/img/home_1.png" alt="">
              <span>AI {{ $t('量化交易') }}</span>
            <div class="nav_item flex-center" @click="toPage('/aiTrading')">
              <img src="../../assets/img/home_1.png" alt="" />
              <span>AI {{ $t("量化交易") }}</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="nav_item flex-center">
              <img src="../../assets/img/home_2.png" alt="">
              <span>{{ $t('hj621') }}</span>
            <div class="nav_item flex-center" @click="toPage('/blockTrading')">
              <img src="../../assets/img/home_2.png" alt="" />
              <span>{{ $t("hj621") }}</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="nav_item flex-center">
              <img src="../../assets/img/home_3.png" alt="">
            <div class="nav_item flex-center" @click="toPage('/ipo')">
              <img src="../../assets/img/home_3.png" alt="" />
              <span>IPO</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="nav_item flex-center">
              <img src="../../assets/img/home_4.png" alt="">
              <span>{{ $t('理财基金') }}</span>
              <img src="../../assets/img/home_4.png" alt="" />
              <span>{{ $t("理财基金") }}</span>
            </div>
          </div>
        </div>
@@ -47,60 +53,50 @@

    <div class="subheading bg-white">
      <div class="subheading_title">
        <img src="../../assets/img/iconmonstr-chart-5.png" alt="">
        <span>{{ $t('美股指数') }}</span>
        <img src="../../assets/img/iconmonstr-chart-5.png" alt="" />
        <span>{{ $t("美股指数") }}</span>
      </div>
      <div class="flex-between navs">
        <div class="nav_item" v-for="item in 3" :key="item">
          <div class="item_title line-one">Lidwa gejadw LFwafd Djfajf</div>
          <div class="item_price">44,406.36</div>
          <div class="item_index flex-between">
            <span>-422.17</span>
            <span>-0.94%</span>
          </div>
          <div style="width:100%;height:1em">
            <Echart :ids="'a' + item" :colorType="-1"></Echart>
          </div>
        <div class="nav_item" v-for="item in usDataStockBeans" :key="item.id">
          <index-component
            :ids="'a' + item.id"
            :dataObj="item"
          ></index-component>
          <!-- <van-skeleton title :row="3" /> -->
        </div>
      </div>
    </div>

    <div class="subheading bg-white" style="margin-top: .25em;">
    <div class="subheading bg-white" style="margin-top: 0.25em">
      <div class="subheading_title">
        <img src="../../assets/img/iconmonstr-chart-5.png" alt="">
        <span>{{ $t('墨西哥指数') }}</span>
        <img src="../../assets/img/iconmonstr-chart-5.png" alt="" />
        <span>{{ $t("墨西哥指数") }}</span>
      </div>
      <div class="flex-between navs">
        <div class="nav_item" v-for="item in 3" :key="item">
          <div class="item_title line-one">Lidwa gejadw LFwafd Djfajf</div>
          <div class="item_price">44,406.36</div>
          <div class="item_index flex-between">
            <span>-422.17</span>
            <span>-0.94%</span>
          </div>
          <div style="width:100%;height:1em">
            <Echart :ids="'b' + item" :colorType="-1"></Echart>
          </div>
        <div class="nav_item" v-for="item in mxDataStockBeans" :key="item.id">
          <!-- <van-skeleton title :row="3" /> -->
          <index-component
            :ids="'b' + item.id"
            :dataObj="item"
          ></index-component>
        </div>
      </div>
    </div>

    <div class="subheading bg-white" style="margin-top: .25em;">
    <div class="subheading bg-white" style="margin-top: 0.25em">
      <div class="subheading_title">
        <img src="../../assets/img/news.png" alt="">
        <span>{{ $t('hj6') }}</span>
        <img src="../../assets/img/news.png" alt="" />
        <span>{{ $t("hj6") }}</span>
      </div>

      <div class="news_item flex-between-start" v-for="item in 3" :key="item">
        <div class="news_title">Futures lower with Trump tariff deadline in focus - what’s moving markets</div>
        <img src="https://i-invdn-com.investing.com/news/moved_LYNXNPEL51127_L.jpg" alt="">
        <div class="news_time">2022-11-22 09:00:00</div>
      </div>
      <news-item
        :item="item"
        v-for="item in newsList"
        :key="item.id"
      ></news-item>

      <div class="more flex-center">
        <span>{{ $t('更多新闻') }}</span>
      <div class="more flex-center" @click="$router.push('/new-list')">
        <span>{{ $t("更多新闻") }}</span>
        <van-icon name="play" size=".5em" />
      </div>
    </div>
@@ -109,6 +105,8 @@

<script>
import tabHead from "../../components/tabHead.vue";
import NewsItem from "./components/newsItem.vue";
import indexComponent from "../../components/index-component.vue";
import Echart from "./components/echart.vue";
import * as api from "@/axios/api";
export default {
@@ -120,13 +118,13 @@
      actions: [
        {
          text: "English",
          lang: "en",
          lang: "en"
        },
        {
          text: "简体中文",
          lang: "zh-CN",
          lang: "zh-CN"
        },
        { text: "हिंदी", lang: "hi" },
        { text: "हिंदी", lang: "hi" }
        // {
        //   text: "Deutsch",
        //   lang: "de",
@@ -140,27 +138,53 @@
        //   lang: "ja",
        // },
      ],
    }
      newsList: [],
      mxDataStockBeans: [],
      usDataStockBeans: []
    };
  },
  components: {
    tabHead,
    Echart,
    indexComponent,
    NewsItem
  },
  mounted() {
    // this.getNewsList(1);
    this.getData();
  },
  methods: {
    onSelect(e) { // 选择语言
    // 选择语言
    onSelect(e) {
      window.localStorage.setItem("language", e.lang);
      this.$i18n.locale = e.lang;
    },
    async getNewsList(type) { // 获取新闻列表
      if (typeof type == "string") type = 1
    // 获取新闻列表
    async getNewsList(type) {
      if (typeof type == "string") type = 1;
      // let data = await api.queryNewsList(type);
    },
  }
}
    // 获取首页数据
    async getData() {
      let data = await api.getHomePageData();
      this.newsList = data.data.newsList;

      this.mxDataStockBeans = data.data.mxDataStockBeans;
      this.usDataStockBeans = data.data.usDataStockBeans;

      // console.log(
      //   "home",
      //   this.newsList,
      //   this.mxDataStockBeans,
      //   this.usDataStockBeans
      // );
    },
    // 跳转
    toPage(url) {
      if (!url) return;
      this.$router.push(url);
    }
  }
};
</script>

<style lang="less" scoped>
@@ -177,7 +201,7 @@
  .multilingual {
    width: 1em;
    height: 1em;
    margin-left: .25em;
    margin-left: 0.25em;

    img {
      width: 100%;
@@ -186,87 +210,71 @@
  }

  .subheading {
    padding-bottom: .25em;
    padding-bottom: 0.25em;

    .subheading_title {
      display: flex;
      align-items: center;
      padding: .35em .25em .35em .25em;
      padding: 0.35em 0.25em 0.35em 0.25em;

      img {
        width: .5em;
        height: .5em;
        margin-right: .25em;
        width: 0.5em;
        height: 0.5em;
        margin-right: 0.25em;
      }

      span {
        font-size: .5em;
        line-height: .5em;
        font-size: 0.5em;
        line-height: 0.5em;
        font-weight: 600;
      }
    }

    .navs {
      padding: 0 .25em 0 .25em;
      padding: 0 0.25em 0 0.25em;

      .nav_item {
        width: 2.833em;
        height: 3em;
        background-color: rgba(red, .1);
        border-radius: .1em;
        padding: .25em 0;

        .item_title {
          padding: 0 .5em;
          font-size: .4em;
        }

        .item_price {
          padding: .5em .5em;
          color: @red;
          font-size: .4em;
        }

        .item_index {
          padding: 0 .5em;
          color: @red;
          font-size: .3em;
          margin-bottom: .2em;
        }
        // background-color: rgba(red, 0.1);
        border-radius: 0.1em;
        // padding: .25em 0;
      }
    }

    .swiper {
      width: 10em;
      // overflow: hidden;
      overflow-x: auto;
      // width: 10em;
      // overflow-x: auto;
      width: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
      // &::-webkit-scrollbar {
      //   display: none;
      // }

      .swiper-wrapper {
        width: 13.333em;
        // width: 13.333em;
        width: 100%;
        padding: 0 0.25em 0 0.25em;

        .swiper-slide {
          width: 3.333em;
          height: 3em;
          padding: 0 .25em 0 .25em;
          width: 2.1875em;
          height: 2.1em;
          // padding: 0 0.25em 0 0.25em;

          .nav_item {
            background-color: #fff;
            border-radius: .25em;
            border-radius: 0.25em;
            width: 100%;
            height: 100%;
            flex-direction: column;

            img {
              width: 1em;
              margin-bottom: .25em;
              width: 0.75em;
              margin-bottom: 0.25em;
            }

            span {
              font-size: .37em;
              font-size: 0.25em;
              font-weight: 500;
            }
          }
@@ -275,45 +283,12 @@
    }

    .more {
      padding: .5em .5em .2em;
      padding: 0.5em 0.5em 0.2em;
      color: @green;

      span {
        font-size: .5em;
        margin-right: .3em;
      }
    }

    .news_item {
      width: 100%;
      padding: .25em;
      border-bottom: .02667em solid #f5f5f5;
      position: relative;

      .news_time {
        position: absolute;
        bottom: .8em;
        left: .8em;
        font-size: .3em;
        color: #999;
      }

      .news_title {
        font-size: .4em;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        line-break: anywhere;
        -webkit-box-orient: vertical;
        width: 15.2em;
      }

      img {
        width: 2.8em;
        height: 2em;
        margin-right: .25em;
        border-radius: .1em;
        font-size: 0.5em;
        margin-right: 0.3em;
      }
    }
  }

 src/page/home/newList.vue

New file
@@ -0,0 +1,76 @@
<template>
  <div class="new_list">
    <page-head :title="$t('hj6')"></page-head>

    <news-item v-for="item in newsList" :key="item.id" :item="item"></news-item>

    <van-skeleton
      :row="10"
      v-if="newsList.length == 0"
      style="margin-top: 1em;"
    />

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import NewsItem from "./components/newsItem.vue";
import nPagination from "@/components/nPagination.vue";
import * as api from "@/axios/api";

export default {
  name: "newList",
  components: {
    PageHead,
    NewsItem,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      newsList: []
    };
  },
  watch: {
    pageNum() {
      this.newsList = [];
      this.getNewsList();
    }
  },
  created() {
    this.getNewsList();
  },
  methods: {
    // 获取新闻列表
    async getNewsList() {
      let options = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: 1
      };
      let data = await api.getNewsList(options);

      this.newsList = data.data.list;
      this.total = data.data.total;
    }
  }
};
</script>

<style lang="less" scoped>
.new_list {
  font-size: 10vw;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 0.1em;
}
</style>

 src/page/home/newPage.vue

@@ -1,151 +1,159 @@
<template>
  <div :class="` ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"  class="new-page">
    <!-- <div class="head"> -->

      <!-- <view>{{ $t('hj238') }}</view> -->
    <!-- </div> -->
  <!-- <div
    :class="` ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"
    class="new-page"
    v-if="false"
  > -->
  <div class="new-page" v-if="list.title">
    <page-head :title="list.title"></page-head>
    <div class="newsTop">
      <div class="newsTitle">{{list.title}}</div>
      <div class="newDetail-tits">{{ list.showTime| gettime}}</div>
      <div class="newsTitle">{{ list.title }}</div>
      <div class="newDetail-tits">{{ list.showTime | gettime }}</div>
    </div>
    <div class="newsDetail">
      <div>{{list.content}}</div>
      <div>{{ list.content }}</div>
      <div class="newsImg" v-if="list.imgurl">
        <img :src="list.imgurl"/>
        <img :src="list.imgurl" />
      </div>
    </div>
  </div>
  <div v-else class="new-page" style="padding-top:1em">
    <page-head></page-head>
    <van-skeleton title :row="10" />
  </div>
</template>

<script>
import * as api from '@/axios/api'
import PageHead from "@/components/pageHead.vue";
import * as api from "@/axios/api";
export default {
  created () {
  created() {
    if (this.$route.query.listid) {
      this.list_id = this.$route.query.listid
      this.list_id = this.$route.query.listid;
    }
    this.getqueryNewsList(this.$route.query.listid)
    this.getqueryNewsList(this.$route.query.listid);
  },
  data () {
  components: {
    PageHead
  },
  data() {
    return {
      list_id: '',
      list: []
    }
      list_id: "",
      list: {}
    };
  },
  mounted () {

  },
  mounted() {},
  methods: {
    async getqueryNewsList (id) {
      let data = await api.queryNewsDetail(id)
      this.list = data.data
    async getqueryNewsList(id) {
      let data = await api.queryNewsDetail(id);
      this.list = data.data;
    }

  },
  filters: {
    gettime (time) {
    gettime(time) {
      if (!time) {
        return ''
        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()
      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
        mm = "0" + mm;
      }
      if (d < 10) {
        d = '0' + d
        d = "0" + d;
      }
      if (h < 10) {
        h = '0' + h
        h = "0" + h;
      }
      if (m < 10) {
        m = '0' + m
        m = "0" + m;
      }
      if (c < 10) {
        c = '0' + c
        c = "0" + c;
      }
      // 17:35:2922-06-2022
      return d + '-' + mm + '-' + y + ' ' + h + ':' + m + ':' + c
      return d + "-" + mm + "-" + y + " " + h + ":" + m + ":" + c;
    }
  }

}
};
</script>

<style scoped lang="less">
.new-page {
  height: calc(100% - 72px);
  overflow: hidden;
  // height: calc(100% - 72px);
  // overflow: hidden;
  min-height: 100vh;
  .head {
    height: 60px;
    .mint-header {
      height: 60px;
      border-bottom: 1px solid #DDDDDD;
      /deep/ .mintui-back, /deep/ .mint-header-title {
      border-bottom: 1px solid #dddddd;
      /deep/ .mintui-back,
      /deep/ .mint-header-title {
        font-size: 28px;
        font-weight: 900;
      }
    }
  }
}
  .newDetail-tits{
    margin-top: 0.4rem;
    font-size: 0.4rem;
    margin-bottom: 0.4rem;
  }
  .newsTop {
    border-bottom: 0.01rem solid #cdcdcd;
    padding-top: 0.3rem;
    color: #000;
    width: 96%;
    margin-left: 0;
    margin-right: 0;
    margin: 0 auto;
  }
  .newsTitle {
    font-size: 0.55rem;
    font-weight: 500;
  }
  .newsDetail {
    height: calc(100% - 254px);
    overflow-y: auto;
    width: 96%;
    margin-left: 0;
    margin-right: 0;
    margin: 0 auto;
    margin-top: 0.4rem;
    font-size: 0.35rem;
    line-height: 0.6rem;
  }
  /* 隐藏滚动条但能滚动 */
  .newsDetail {
    overflow: auto;
    /* 隐藏滚动条 */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  /* 隐藏滚动条的样式 */
  .newsDetail::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
  }
  .newsDetail::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  .newsDetail::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .newsImg{
    width: 100%;
    margin-top: 0.4rem;
  }
  .newsImg img{
    width: 100%;
    height: 100%;
  }
.newDetail-tits {
  margin-top: 0.4rem;
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
}
.newsTop {
  border-bottom: 0.01rem solid #cdcdcd;
  padding-top: 0.3rem;
  color: #000;
  width: 96%;
  margin-left: 0;
  margin-right: 0;
  margin: 0 auto;
}
.newsTitle {
  font-size: 0.55rem;
  font-weight: 500;
}
.newsDetail {
  height: calc(100% - 254px);
  overflow-y: auto;
  width: 96%;
  margin-left: 0;
  margin-right: 0;
  margin: 0 auto;
  margin-top: 0.4rem;
  font-size: 0.35rem;
  line-height: 0.6rem;
}
/* 隐藏滚动条但能滚动 */
.newsDetail {
  overflow: auto;
  /* 隐藏滚动条 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
/* 隐藏滚动条的样式 */
.newsDetail::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}
.newsDetail::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.newsDetail::-webkit-scrollbar-track {
  background-color: transparent;
}
.newsImg {
  width: 100%;
  margin-top: 0.4rem;
}
.newsImg img {
  width: 100%;
  height: 100%;
}
</style>

 src/page/login/login.vue

@@ -135,7 +135,8 @@
        Notify({ type: "success", message: this.$t("hj36") });

        setTimeout(() => {
          this.$router.push("/home");
          // this.$router.push("/home");
          this.$router.push("/home_index");
        }, 1000);
      } else {
        Notify({ type: "warning", message: data.msg });

 src/page/markets/aiTrading.vue

New file
@@ -0,0 +1,142 @@
<template>
  <div class="ai_trading">
    <page-head :title="`AI ${$t('量化交易')}`">
      <template slot="right">
        <div class="head_right" @click="$router.push('/aiTradingOrder')">
          {{ $t("订单") }}
        </div>
      </template>
    </page-head>

    <div class="trading_card" v-for="i in 5" :key="i">
      <p class="card_label1 flex-start">
        <span class="label_icon">US</span>
        <span>444</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("最低认购金额") }}</span>
        <span>$ 2,000</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("交易成功率") }}</span>
        <span>100%</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("预期收益") }}</span>
        <span>3</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("交易周期") }}</span>
        <span>1天</span>
      </p>

      <p class="card_buy flex-center">
        <van-icon name="add-square" size=".4em" />
        <span>{{ $t("gm") }}</span>
      </p>
    </div>

    <!-- 无数据时显示 -->
    <div class="no_data flex-center">
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";

export default {
  components: {
    PageHead,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 1
    };
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
.ai_trading {
  font-size: 10vw;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 0.3em;

  .trading_card {
    width: 9.5em;
    margin: 0.25em auto 0;
    border-radius: 0.25em;
    background: #fff;
    .card_buy {
      height: 1.33em;
      color: @green;
      box-shadow: 0 -0.05333rem 0.26667rem #0000000d;

      span {
        font-size: 0.45em;
        font-weight: 600;
        margin-left: 0.2em;
      }
    }
    .card_label2,
    .card_label1 {
      margin: 0 auto;
      width: 9em;
      border-bottom: #f5f5f5 solid 0.01em;
    }
    .card_label2 {
      height: 1.1em;
      color: #323233;
      span {
        font-size: 0.4em;
        font-weight: 300;
      }
      & > span:last-child {
        color: #969799;
        font-size: 0.36em;
      }
    }

    .card_label1 {
      color: @green;
      height: 1.33em;

      span {
        font-size: 0.4em;
      }
      .label_icon {
        background: @green;
        color: #fff;
        padding: 0.2em 0.35em;
        border-radius: 0.15em;
        margin-right: 0.3em;
        font-size: 0.3em;
      }
    }
  }

  .head_right {
    color: @green;
    font-size: 0.4em;
  }
}
</style>

 src/page/markets/aiTradingOrder.vue

New file
@@ -0,0 +1,169 @@
<template>
  <div class="ai_trading_order">
    <page-head :title="`${$t('AI交易订单')}`"> </page-head>

    <div class="order_tabs">
      <van-tabs v-model="active" swipe-threshold="1">
        <van-tab :title="$t('hj160')" :name="0"></van-tab>
        <van-tab :title="$t('申购中')" :name="1"></van-tab>
        <van-tab :title="$t('交易中')" :name="2"></van-tab>
        <van-tab :title="$t('成功')" :name="3"></van-tab>
        <van-tab :title="$t('失败')" :name="4"></van-tab>
      </van-tabs>
    </div>

    <div class="trading_card" v-for="i in 5" :key="i">
      <p class="card_label1 flex-start">
        <span class="label_icon">MEX</span>
        <span> Escaneo de Tendencias</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("申购金额") }}</span>
        <span>MX$ 5,000</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("实际收益") }}</span>
        <span>MX$ 50</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("状态") }}</span>
        <span class="zt">交易中</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("提交时间") }}</span>
        <span>11/07/2025 03:08:18 AM</span>
      </p>
    </div>

    <!-- 无数据时显示 -->
    <div class="no_data flex-center">
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";

export default {
  components: {
    PageHead,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 1,
      active: 0
    };
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
.ai_trading_order {
  font-size: 10vw;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 0.3em;
  padding-top: 1.4em;
  position: relative;
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 1.2em;
  }
  /deep/ .van-tab__text--ellipsis {
    overflow: visible;
  }
  /deep/ .van-tab {
    font-size: 0.4em;
  }
  /deep/ .van-tabs__line {
    background-color: @green;
    height: 0.1em;
    width: 1em;
  }

  .order_tabs {
    width: 100%;
    position: fixed;
    top: 1.22em;
    left: 0;
    z-index: 999;
  }

  .trading_card {
    width: 9.5em;
    margin: 0.25em auto 0;
    border-radius: 0.25em;
    background: #fff;
    .card_buy {
      height: 1.33em;
      color: @green;
      box-shadow: 0 -0.05333rem 0.26667rem #0000000d;

      span {
        font-size: 0.45em;
        font-weight: 600;
        margin-left: 0.2em;
      }
    }
    .card_label2,
    .card_label1 {
      margin: 0 auto;
      width: 9em;
      border-bottom: #f5f5f5 solid 0.01em;
    }
    .card_label2 {
      height: 1.1em;
      color: #323233;
      span {
        font-size: 0.4em;
        font-weight: 300;
      }
      & > span:last-child {
        color: #969799;
        font-size: 0.36em;
      }
      span.zt {
        color: @green;
      }
    }

    .card_label1 {
      color: @green;
      height: 1.33em;

      span {
        font-size: 0.4em;
      }
      .label_icon {
        background: @green;
        color: #fff;
        padding: 0.2em 0.35em;
        border-radius: 0.15em;
        margin-right: 0.3em;
        font-size: 0.3em;
      }
    }
  }

  .head_right {
    color: @green;
    font-size: 0.4em;
  }
}
</style>

 src/page/markets/blockTrading.vue

New file
@@ -0,0 +1,199 @@
<template>
  <div class="block_trading">
    <page-head :title="`${$t('hj621')}`">
      <template slot="right">
        <div class="head_right" @click="$router.push('/blockTradingOrder')">
          {{ $t("订单") }}
        </div>
      </template>
    </page-head>

    <div class="popup_head">
      <div class="popup_input">
        <van-field
          v-model="searchValue"
          :placeholder="$t('输入编码搜索')"
          left-icon="search"
          clearable
        />
      </div>
      <van-button type="primary" round @click="submit">{{
        $t("Search")
      }}</van-button>
    </div>

    <!-- <div class="trading_card" v-for="i in 5" :key="i">
      <p class="card_label1 flex-start">
        <span class="label_icon">US</span>
        <span>444</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("最低认购金额") }}</span>
        <span>$ 2,000</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("交易成功率") }}</span>
        <span>100%</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("预期收益") }}</span>
        <span>3</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("交易周期") }}</span>
        <span>1天</span>
      </p>

      <p class="card_buy flex-center">
        <van-icon name="add-square" size=".4em" />
        <span>{{ $t("gm") }}</span>
      </p>
    </div> -->

    <!-- 无数据时显示 -->
    <div class="no_data flex-center">
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";

export default {
  components: {
    PageHead,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 1,
      searchValue: ""
    };
  },
  methods: {
    submit() {
      console.log(this.searchValue);
    }
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
.block_trading {
  font-size: 10vw;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 0.3em;
  padding-top: 1.4em;

  .popup_head {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em;
    background: #fff;
    width: 100%;
    position: fixed;
    top: 1.22em;
    z-index: 999;

    /deep/ .van-cell {
      background: none;
    }

    /deep/ .van-field__left-icon .van-icon,
    .van-field__right-icon .van-icon {
      font-size: 1.5em;
    }

    /deep/ .van-field__control {
      font-size: 1.5em;
    }

    .popup_input {
      background: #f7f8fa;
      @inpH: 0.9em;
      height: @inpH;
      flex: 1;
      border-radius: @inpH / 2;
      display: flex;
      align-items: center;
      margin-right: 0.5em;
    }
  }

  .trading_card {
    width: 9.5em;
    margin: 0.25em auto 0;
    border-radius: 0.25em;
    background: #fff;
    .card_buy {
      height: 1.33em;
      color: @green;
      box-shadow: 0 -0.05333rem 0.26667rem #0000000d;

      span {
        font-size: 0.45em;
        font-weight: 600;
        margin-left: 0.2em;
      }
    }
    .card_label2,
    .card_label1 {
      margin: 0 auto;
      width: 9em;
      border-bottom: #f5f5f5 solid 0.01em;
    }
    .card_label2 {
      height: 1.1em;
      color: #323233;
      span {
        font-size: 0.4em;
        font-weight: 300;
      }
      & > span:last-child {
        color: #969799;
        font-size: 0.36em;
      }
    }

    .card_label1 {
      color: @green;
      height: 1.33em;

      span {
        font-size: 0.4em;
      }
      .label_icon {
        background: @green;
        color: #fff;
        padding: 0.2em 0.35em;
        border-radius: 0.15em;
        margin-right: 0.3em;
        font-size: 0.3em;
      }
    }
  }

  .head_right {
    color: @green;
    font-size: 0.4em;
  }
}
</style>

 src/page/markets/blockTradingOrder.vue

New file
@@ -0,0 +1,205 @@
<template>
  <div class="block_trading_order">
    <page-head :title="`${$t('大宗交易订单')}`"> </page-head>

    <div class="order_tabs">
      <van-tabs v-model="active" swipe-threshold="1">
        <van-tab :title="$t('hj160')" :name="0"></van-tab>
        <van-tab :title="$t('申购中')" :name="1"></van-tab>
        <van-tab :title="$t('待成交')" :name="2"></van-tab>
        <van-tab :title="$t('成功')" :name="3"></van-tab>
        <van-tab :title="$t('失败')" :name="4"></van-tab>
        <van-tab :title="$t('已取消')" :name="5"></van-tab>
      </van-tabs>
    </div>

    <div class="trading_card" v-for="i in 5" :key="i">
      <div class="card_label2 flex-between" style="height:1.8em">
        <div>
          <p class="flex-start gp">
            <span>{{ $t("hj52") }}</span>
          </p>
          <p class="flex-start">
            <span class="label_icon">US</span>
            <span class="label_name line-one">Advance Auto Parts Inc.</span>
          </p>
        </div>

        <div class="flex-end">
          <span class="app">APP</span>
          <van-icon name="arrow" color="#969799" size=".5em" />
        </div>
      </div>

      <p class="card_label2 flex-between">
        <span>{{ $t("sl") }}</span>
        <span>5,000</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("hj81") }}</span>
        <span>$ 44.48</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("总金额") }}</span>
        <span class="zje">MX$ 484,920.96</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("状态") }}</span>
        <span class="zt">交易中</span>
      </p>
      
      <p class="card_label2 flex-between">
        <span>{{ $t("提交时间") }}</span>
        <span>11/07/2025 03:08:18 AM</span>
      </p>
    </div>

    <!-- 无数据时显示 -->
    <div class="no_data flex-center">
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";

export default {
  components: {
    PageHead,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 1,
      active: 0
    };
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
@grey-two: #969799;
@red: #ee0a24;
.block_trading_order {
  font-size: 10vw;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 0.3em;
  padding-top: 1.4em;
  position: relative;
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 1.2em;
  }
  /deep/ .van-tab__text--ellipsis {
    overflow: visible;
  }
  /deep/ .van-tab {
    font-size: 0.4em;
  }
  /deep/ .van-tabs__line {
    background-color: @green;
    height: 0.1em;
    width: 1em;
  }

  .order_tabs {
    width: 100%;
    position: fixed;
    top: 1.22em;
    left: 0;
    z-index: 999;
  }

  .trading_card {
    width: 9.5em;
    margin: 0.25em auto 0;
    border-radius: 0.25em;
    background: #fff;
    .card_buy {
      height: 1.33em;
      color: @green;
      box-shadow: 0 -0.05333rem 0.26667rem #0000000d;

      span {
        font-size: 0.45em;
        font-weight: 600;
        margin-left: 0.2em;
      }
    }
    .card_label2,
    .card_label1 {
      margin: 0 auto;
      width: 9em;
      border-bottom: #f5f5f5 solid 0.01em;
    }
    .card_label2 {
      height: 1.1em;
      color: #323233;
      span {
        font-size: 0.4em;
        font-weight: 300;
      }
      & > span:last-child {
        color: @grey-two;
        font-size: 0.36em;
      }
      .gp {
        margin-bottom: 0.2em;
      }
      .app {
        color: @green;
        font-size: 0.6em;
      }
      .label_name {
        color: @grey-two;
        width: 14em;
      }
      span.zje {
        color: @red;
        font-size: 0.48em;
      }
      span.zt {
        color: @green;
      }
    }

    .card_label1 {
      color: @green;
      height: 1.33em;

      span {
        font-size: 0.4em;
      }
    }

    .label_icon {
      background: @green;
      color: #fff;
      padding: 0.2em 0.35em;
      border-radius: 0.15em;
      margin-right: 0.3em;
      font-size: 0.3em !important;
    }
  }

  .head_right {
    color: @green;
    font-size: 0.4em;
  }
}
</style>

 src/page/markets/ipo.vue

New file
@@ -0,0 +1,148 @@
<template>
  <div class="ipo">
    <page-head title="IPO">
      <template slot="right">
        <div class="head_right" @click="$router.push('/ipoOrder')">
          {{ $t("订单") }}
        </div>
      </template>
    </page-head>

    <!-- <div class="trading_card" v-for="i in 5" :key="i">
      <p class="card_label1 flex-start">
        <span class="label_icon">US</span>
        <span>444</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("最低认购金额") }}</span>
        <span>$ 2,000</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("交易成功率") }}</span>
        <span>100%</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("预期收益") }}</span>
        <span>3</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("交易周期") }}</span>
        <span>1天</span>
      </p>

      <p class="card_buy flex-center">
        <van-icon name="add-square" size=".4em" />
        <span>{{ $t("gm") }}</span>
      </p>
    </div> -->

    <!-- 无数据时显示 -->
    <div class="no_data flex-center">
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";

export default {
  components: {
    PageHead,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 1,
      searchValue: ""
    };
  },
  methods: {
    submit() {
      console.log(this.searchValue);
    }
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
.ipo {
  font-size: 10vw;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 0.3em;

  .trading_card {
    width: 9.5em;
    margin: 0.25em auto 0;
    border-radius: 0.25em;
    background: #fff;
    .card_buy {
      height: 1.33em;
      color: @green;
      box-shadow: 0 -0.05333rem 0.26667rem #0000000d;

      span {
        font-size: 0.45em;
        font-weight: 600;
        margin-left: 0.2em;
      }
    }
    .card_label2,
    .card_label1 {
      margin: 0 auto;
      width: 9em;
      border-bottom: #f5f5f5 solid 0.01em;
    }
    .card_label2 {
      height: 1.1em;
      color: #323233;
      span {
        font-size: 0.4em;
        font-weight: 300;
      }
      & > span:last-child {
        color: #969799;
        font-size: 0.36em;
      }
    }

    .card_label1 {
      color: @green;
      height: 1.33em;

      span {
        font-size: 0.4em;
      }
      .label_icon {
        background: @green;
        color: #fff;
        padding: 0.2em 0.35em;
        border-radius: 0.15em;
        margin-right: 0.3em;
        font-size: 0.3em;
      }
    }
  }

  .head_right {
    color: @green;
    font-size: 0.4em;
  }
}
</style>

 src/page/markets/ipoOrder.vue

New file
@@ -0,0 +1,207 @@
<template>
  <div class="block_trading_order">
    <page-head :title="`IPO ${$t('订单')}`"> </page-head>

    <div class="order_tabs">
      <van-tabs v-model="active" swipe-threshold="1">
        <van-tab :title="$t('hj160')" :name="0"></van-tab>
        <van-tab :title="$t('申购中')" :name="1"></van-tab>
        <van-tab :title="$t('hj70')" :name="2"></van-tab>
        <van-tab :title="$t('待认缴')" :name="3"></van-tab>
        <van-tab :title="$t('待转股')" :name="4"></van-tab>
        <van-tab :title="$t('已转股')" :name="5"></van-tab>
        <van-tab :title="$t('已取消')" :name="6"></van-tab>
        <van-tab :title="$t('未中标')" :name="7"></van-tab>
      </van-tabs>
    </div>

    <div class="trading_card" v-for="i in 5" :key="i">
      <div class="card_label2 flex-between" style="height:1.8em">
        <div>
          <p class="flex-start gp">
            <span>{{ $t("hj52") }}</span>
          </p>
          <p class="flex-start">
            <span class="label_icon">US</span>
            <span class="label_name line-one">Advance Auto Parts Inc.</span>
          </p>
        </div>

        <div class="flex-end">
          <span class="app">APP</span>
          <van-icon name="arrow" color="#969799" size=".5em" />
        </div>
      </div>

      <p class="card_label2 flex-between">
        <span>{{ $t("sl") }}</span>
        <span>5,000</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("hj81") }}</span>
        <span>$ 44.48</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("总金额") }}</span>
        <span class="zje">MX$ 484,920.96</span>
      </p>

      <p class="card_label2 flex-between">
        <span>{{ $t("状态") }}</span>
        <span class="zt">交易中</span>
      </p>
      
      <p class="card_label2 flex-between">
        <span>{{ $t("提交时间") }}</span>
        <span>11/07/2025 03:08:18 AM</span>
      </p>
    </div>

    <!-- 无数据时显示 -->
    <div class="no_data flex-center">
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";

export default {
  components: {
    PageHead,
    nPagination
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 1,
      active: 0
    };
  }
};
</script>

<style lang="less" scoped>
@green: #c4d600;
@grey-two: #969799;
@red: #ee0a24;
.block_trading_order {
  font-size: 10vw;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 0.3em;
  padding-top: 1.4em;
  position: relative;
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 1.2em;
  }
  /deep/ .van-tab__text--ellipsis {
    overflow: visible;
  }
  /deep/ .van-tab {
    font-size: 0.4em;
  }
  /deep/ .van-tabs__line {
    background-color: @green;
    height: 0.1em;
    width: 1em;
  }

  .order_tabs {
    width: 100%;
    position: fixed;
    top: 1.22em;
    left: 0;
    z-index: 999;
  }

  .trading_card {
    width: 9.5em;
    margin: 0.25em auto 0;
    border-radius: 0.25em;
    background: #fff;
    .card_buy {
      height: 1.33em;
      color: @green;
      box-shadow: 0 -0.05333rem 0.26667rem #0000000d;

      span {
        font-size: 0.45em;
        font-weight: 600;
        margin-left: 0.2em;
      }
    }
    .card_label2,
    .card_label1 {
      margin: 0 auto;
      width: 9em;
      border-bottom: #f5f5f5 solid 0.01em;
    }
    .card_label2 {
      height: 1.1em;
      color: #323233;
      span {
        font-size: 0.4em;
        font-weight: 300;
      }
      & > span:last-child {
        color: @grey-two;
        font-size: 0.36em;
      }
      .gp {
        margin-bottom: 0.2em;
      }
      .app {
        color: @green;
        font-size: 0.6em;
      }
      .label_name {
        color: @grey-two;
        width: 14em;
      }
      span.zje {
        color: @red;
        font-size: 0.48em;
      }
      span.zt {
        color: @green;
      }
    }

    .card_label1 {
      color: @green;
      height: 1.33em;

      span {
        font-size: 0.4em;
      }
    }

    .label_icon {
      background: @green;
      color: #fff;
      padding: 0.2em 0.35em;
      border-radius: 0.15em;
      margin-right: 0.3em;
      font-size: 0.3em !important;
    }
  }

  .head_right {
    color: @green;
    font-size: 0.4em;
  }
}
</style>

 src/page/markets/markets.vue

@@ -1,111 +1,104 @@
<template>
    <div class="markets">
        <tab-head :rightShow="false">
            <van-popover v-model="switchShow" trigger="click" :actions="actions" @select="onSelect"
                placement="bottom-end">
                <template #reference>
                    <div class="switch flex-center">
                        <van-icon name="exchange" size=".45em" />
                        <span>{{ switchText }}</span>
                    </div>
                </template>
            </van-popover>
        </tab-head>
  <div class="markets">
    <tab-head :rightShow="false">
      <van-popover
        v-model="switchShow"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="bottom-end"
      >
        <template #reference>
          <div class="switch flex-center">
            <van-icon name="exchange" size=".45em" />
            <span>{{ switchText }}</span>
          </div>
        </template>
      </van-popover>
    </tab-head>

        <div class="tabs flex-between">
            <div class="tab_item flex-center" :class="{ active: item.value == tab }" v-for="item in tabList"
                :key="item.value" @click="tab = item.value">
                <span>{{ item.name }}</span>
            </div>
        </div>

        <div class="markets_echart">
            <div class="markets_echart_title">
                Dow Jones Industrial Average
            </div>
            <div class="markets_echart_price">
                44,406.36
            </div>
            <div class="markets_echart_index flex-between">
                <span>-422.17</span>
                <span>-0.94%</span>
            </div>
            <div class="markets_echart_e">
                <Echart :ids="'markets-echart'" :colorType="-1"></Echart>
            </div>

            <!-- <van-skeleton title :row="3" /> -->
        </div>

        <van-row class="markets_head">
            <van-col span="12" class="flex-start head_item">{{ $t('Name') }}</van-col>
            <van-col span="4" class="flex-start head_item">{{ $t('Price') }}</van-col>
            <van-col span="8" class="flex-end head_item">{{ $t('Change') }}</van-col>
        </van-row>

        <van-row class="markets_item" v-for="item in 10" :key="item">
            <van-col span="12" class="item_n">
                <div class="flex-start">
                    <span class="i_icon">US</span>
                    <span class="i_hint">SS</span>
                </div>
                <div class="i_name">shangshi</div>
            </van-col>
            <van-col span="4" class="flex-start item_n">18</van-col>
            <van-col span="8" class="item_n">
                <div class="flex-end" style="margin-bottom: .15em;">18</div>
                <div class="flex-end">18%</div>
            </van-col>
        </van-row>

        <n-pagination></n-pagination>
    <div class="tabs flex-between">
      <div
        class="tab_item flex-center"
        :class="{ active: item.value == tab }"
        v-for="item in tabList"
        :key="item.value"
        @click="tab = item.value"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>

    <div class="markets_echart">
      <index-component :ids="'markets'"></index-component>
      <!-- <van-skeleton title :row="3" /> -->
    </div>

    <stock-list :propOption="propOption"></stock-list>
  </div>
</template>

<script>
import indexComponent from "@/components/index-component.vue";
import tabHead from "@/components/tabHead.vue";
import nPagination from "@/components/nPagination.vue";
import stockList from "@/components/stock-list.vue";
import Echart from "../home/components/echart.vue";
import * as api from "@/axios/api";
export default {
    name: "markets",
    data() {
        return {
            switchShow: false,
            // 切换
            actions: [
                {
                    text: this.$t('美国'),
                    value: 1,
                    name: '美国'
                },
                {
                    text: this.$t('墨西哥'),
                    value: 2,
                    name: '墨西哥'
                },
            ],
            tabList: [{ name: 'Dow Jones', value: 1 }, { name: 'S&P 500', value: 2 }, { name: 'NASDAQ', value: 3 },],
            tab: 1,
        }
    },
    components: {
        tabHead, Echart, nPagination,
    },
    computed: {
        switchText() {
            return this.$t(this.$store.state.marketsSwitch.name) || this.$t('美国');
        }
    },
    mounted() {
    },
    methods: {
        onSelect(e) { // 选择
            this.$store.commit("MARKET_CHANGE", e)
  name: "markets",
  data() {
    return {
      switchShow: false,
      // 切换
      actions: [
        {
          text: this.$t("美国"),
          value: "US",
          name: "美国"
        },
        {
          text: this.$t("墨西哥"),
          value: "MX",
          name: "墨西哥"
        }
      ],
      tabList: [
        { name: "Dow Jones", value: 1 },
        { name: "S&P 500", value: 2 },
        { name: "NASDAQ", value: 3 }
      ],
      tab: 1,
      pageNum: 1,
      pageSize: 10
    };
  },
  components: {
    tabHead,
    Echart,
    stockList,
    indexComponent
  },
  computed: {
    switchText() { // 切换文字
      return this.$t(this.$store.state.marketsSwitch.name) || this.$t("美国");
    },
    propOption() { // 传递给列表组件的类型值
      return { stockType: this.$store.state.marketsSwitch.value };
    }
}

  },
  created() {
    if (!this.$store.state.marketsSwitch.name) { // 如果没有选过，默认选择第一个
      this.$store.commit("MARKET_CHANGE", this.actions[0]);
    }
  },
  mounted() {},
  methods: {
    // 选择
    onSelect(e) {
      this.$store.commit("MARKET_CHANGE", e);
    }
  }
};
</script>

<style lang="less" scoped>
@@ -117,126 +110,51 @@
@dark_green: #07c160;

.markets {
    font-size: 10vw;
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 1.5rem;
  font-size: 10vw;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 1.5rem;

    .markets_head {
        background-color: @green2;
        margin-top: .25em;
        height: 1em;
        padding: 0 .25em;
  .markets_echart {
    width: 100%;
    height: 3.2em;
    background: rgba(red, 0.1);
    color: @red;
  }

        .head_item {
            font-size: .4em;
            height: 100%;
            font-weight: 600;
        }
  .tabs {
    width: 9.5em;
    height: 1em;
    background-color: @green2;
    border-radius: 0.5em;
    margin: 0.25em auto;
    padding: 0 0.1em;

    .tab_item {
      width: 32%;
      height: 0.8em;
      border-radius: 0.5em;

      span {
        font-size: 0.4em;
      }
    }

    .markets_item {
        margin-top: .25em;
        // height: 1em;
        padding: .25em .25em;
        border-bottom: #f5f5f5 solid .01em;

        .item_n {
            font-size: .4em;
            min-height: 2em;
            font-weight: 500;


            .i_icon {
                border-radius: 0 26em 26em 0;
                background: @dark_green;
                color: #fff;
                padding: .1em .5em .1em .4em;
                margin-right: .3em;
                font-size: .8em;
            }

            .i_name {
                margin-top: .3em;
                color: #777777;
                font-size: .8em;
            }
        }
    .active {
      background-color: @green;
    }
  }

    .markets_echart {
        width: 100%;
        height: 3.2em;
        background: rgba(red, .1);
        color: @red;
        padding-right: .25em;
        padding-top: .3em;
  .switch {
    padding: 0.35em 0.5em;
    background-color: @green;
    color: @white;
    border-radius: 1em;

        .markets_echart_title {
            color: @black;
            padding-left: .625em;
            font-size: .4em;
            margin-bottom: .3em;
        }

        .markets_echart_price {
            padding-left: .625em;
            font-size: .4em;
            margin-bottom: .4em;
        }

        .markets_echart_index {
            padding: 0 .25em;

            span {
                font-size: .3em;
            }
        }

        .markets_echart_e {
            margin-top: .25em;
            width: 86%;
            height: 3.5em;
        }

        &>div:last-child {
            font-size: .37em;
        }
    span {
      font-size: 0.35em;
      margin-left: 0.2em;
    }

    .tabs {
        width: 9.5em;
        height: 1em;
        background-color: @green2;
        border-radius: .5em;
        margin: .25em auto;
        padding: 0 .1em;

        .tab_item {
            width: 32%;
            height: 0.8em;
            border-radius: .5em;

            span {
                font-size: .4em;
            }
        }

        .active {
            background-color: @green;
        }
    }

    .switch {
        padding: .35em .5em;
        background-color: @green;
        color: @white;
        border-radius: 1em;

        span {
            font-size: .35em;
            margin-left: .2em;
        }
    }
  }
}
</style>

 src/page/trading/TradeNew.vue

New file
@@ -0,0 +1,176 @@
<template>
  <div class="trade_new">
    <tab-head></tab-head>

    <van-row class="list_head">
      <van-col span="8" class="flex-start head_item">
        {{ $t("hj313") }}/{{ $t("Worth") }}
      </van-col>
      <van-col span="8" class="flex-start head_item">
        {{ $t("sl") }}/{{ $t("Profit") }}
      </van-col>
      <van-col span="8" class="flex-end head_item">
        {{ $t("Cost") }}/{{ $t("Current") }}
      </van-col>
    </van-row>

    <van-row class="list_item" v-for="item in 10" :key="item">
      <van-col span="8" class="item_n">
        <div class="flex-start">
          <span class="i_icon">US</span>
          <span class="i_hint">WINVU</span>
        </div>
        <div class="i_name">124.1</div>
      </van-col>
      <van-col span="8" class="item_n">
        <p class="flex-start">18</p>
        <p class="flex-start i_name">24.1 (24.1%)</p>
      </van-col>
      <van-col span="8" class="item_n">
        <div class="flex-end" style="margin-bottom: .15em;">
          <span>10</span>
        </div>
        <div class="flex-end">
          <span>12.41</span>
        </div>
      </van-col>
      <van-col span="24" class="flex-start transaction_type">
        <span>AI交易</span>
      </van-col>
      <van-col span="24" class="flex-between item_card">
        <div class="card_label">
          <p>建仓成本</p>
          <p>100</p>
        </div>
        <div class="card_label">
          <p>平仓金额</p>
          <p>90</p>
        </div>
        <div class="card_label">
          <p>预期收益</p>
          <p>-10</p>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import tabHead from "@/components/tabHead.vue";

export default {
  components: {
    tabHead
  }
};
</script>

<style lang="less" scoped>
@green2: #f0f0f0;
@dark_green: #07c160;
@red: #ee0a24;
@brown: #ff976a;

.trade_new {
  width: 100%;
  height: 100%;
  background: #fff;
  font-size: 10vw;

  .list_head {
    background-color: @green2;
    margin-top: 0.25em;
    height: 1em;
    padding: 0 0.25em;

    .head_item {
      font-size: 0.35em;
      height: 100%;
      font-weight: 500;
    }
  }

  .list_item {
    padding: 0.4em 0.25em 0.25em;
    border-bottom: #f5f5f5 solid 0.01em;
    position: relative;

    .item_card {
      background-color: @green2;
      margin-top: 0.2em;
      border-radius: 0.2em;
      padding: 0.25em;

      .card_label {
        width: 33.33%;
        text-align: start;
        color: #999;
        font-size: 0.35em;

        & > p:last-child {
          color: #333;
          margin-top: 0.15em;
        }
      }
    }

    .transaction_type {
      color: #fff;
      padding-top: 0.08em;
      span {
        font-size: 0.3em;
        background: @brown;
        padding: 0.2em 0.3em 0.15em;
        border-radius: 0.2em;
        font-weight: 300;
      }
    }

    p,
    span {
      font-size: 0.9em;
    }

    .item_n {
      font-size: 0.4em;
      min-height: 2em;
      font-weight: 500;

      .i_icon {
        border-radius: 0 26em 26em 0;
        background: @dark_green;
        color: #fff;
        padding: 0.1em 0.5em 0.1em 0.4em;
        margin-right: 0.3em;
        font-size: 0.8em;
      }

      .i_name {
        margin-top: 0.2em;
        // color: #777777;
        font-size: 0.9em;
      }
    }

    .edit {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.8)
      );
      text-align: end;
      color: @red;
      padding-right: 0.25em;

      span {
        font-size: 0.55em;
      }
    }
  }
}
</style>

 src/page/user/account.vue

New file
@@ -0,0 +1,338 @@
<template>
  <div class="account">
    <tab-head :leftShow="false">
      <template slot="left">
        <div class="user flex-start">
          <img src="@/assets/img/img_log_home.png" alt="" />
          <div>
            <p class="real_name">{{ userInfo.realName }}</p>
            <p class="phone">ID:{{ userInfo.phone }}</p>
          </div>
        </div>
      </template>
    </tab-head>

    <div class="wallet">
      <div class="wallet_title flex-start">
        <img src="@/assets/img/钱袋.png" alt="" />
        <span>{{ $t("hj244") }}</span>
      </div>

      <div class="wallet_price flex-between">
        <span>MX$ 16,407,946.28</span>
        <span>MX$ 3,247,918.14</span>
      </div>

      <div class="wallet_price_name flex-between">
        <span>{{ $t("hometips") }}</span>
        <span>{{ $t("hj48") }}</span>
      </div>

      <div class="wallet_record flex-center">
        <span>{{ $t("账户变动记录") }}</span>
        <van-icon name="play" size=".5em" />
      </div>
    </div>

    <div class="account_tabs flex-between">
      <div class="tab flex-center ">
        <img src="@/assets/img/cz.png" alt="" />
        <span>{{ $t("hj172") }}</span>
      </div>
      <div class="tab flex-center ">
        <img src="@/assets/img/tx.png" alt="" />
        <span>{{ $t("subdka") }}</span>
      </div>
      <div class="tab flex-center ">
        <img src="@/assets/img/jl.png" alt="" />
        <span>{{ $t("jl") }}</span>
      </div>
    </div>

    <div class="account_card">
      <div class="held_head flex-between">
        <div class="flex-center head_left">
          <span>{{ $t("hj2") }}</span>
          <img src="@/assets/img/cc_ss.png" alt="" />
        </div>
        <div class="flex-center head_right">
          <span>{{ $t("jl") }}</span>
          <img src="@/assets/img/cc_jl.png" alt="" />
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon">MEX</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          3,010 MXN
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon">MEX</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div class="item_right flex-end" :class="'rise'">
          <img src="@/assets/img/rise.png" alt="" />
          2,010 (201%)
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">US</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          685,059.11 USD
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">US</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div class="item_right flex-end" :class="'descend'">
          <img src="@/assets/img/descend.png" alt="" />
          191,980.42 (38.94%)
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabHead from "@/components/tabHead.vue";
import * as api from "@/axios/api";
export default {
  name: "account",
  components: {
    tabHead
  },
  data() {
    return {
      userInfo: {}
    };
  },
  methods: {
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfodata();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit("dialogVisible", false);
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
      } else {
        this.$store.commit("dialogVisible", true);
      }
    }
  },
  created() {
    this.getUserInfo();
  }
};
</script>

<style lang="less" scoped>
@purple: #3d1152;
@green: #c4d600;
@red: #ee0a24;
@dark_green: #07c160;
.account {
  width: 100%;
  height: 100%;
  background: #fff;
  font-size: 10vw;
  padding-top: 0.2em;
  padding-bottom: 1.4rem;

  .account_card {
    background-color: #f5f5f5;
    border-radius: 0.25em;
    width: 9.5em;
    margin: 0.5em auto 0;

    .held_item {
      padding: 0.42em 0;
      margin: 0 0.25em;

      &:not(:last-child) {
        border-bottom: 0.01em solid #ddd;
      }

      .item_left {
        font-size: 0.4em;
        font-weight: 300;
        color: #777;

        .held_icon {
          background: @green;
        }

        .held_icon2 {
          background: @dark_green;
        }

        .held_icon,
        .held_icon2 {
          border-radius: 0 26em 26em 0;
          color: #fff;
          padding: 0.1em 0.5em 0.1em 0.4em;
          margin-right: 0.3em;
          font-size: 0.8em;
        }
      }

      .item_right {
        font-size: 0.48em;

        img {
          width: 1em;
          margin-right: 0.3em;
        }
      }

      .rise {
        color: @dark_green;
      }

      .descend {
        color: @red;
      }
    }

    .held_head {
      height: 1.333em;
      box-shadow: 0 0.05333rem 0.26667rem #0000000d;
      .head_left,
      .head_right {
        width: 50%;
        height: 100%;
      }
      .head_left {
        color: @green;
        position: relative;

        &::after {
          content: "  ";
          position: absolute;
          right: 0;
          top: 0.45em;
          height: 0.5em;
          width: 0.01em;
          background-color: #ddd;
        }
      }
      .head_right {
        color: @red;
      }
      img {
        width: 0.6em;
        margin-left: 0.1em;
      }
      span {
        font-size: 0.45em;
        font-weight: 600;
      }
    }
  }

  .account_tabs {
    box-shadow: 0 -0.26667rem 0.53333rem #1a00394d;
    width: 100%;
    padding: 0.4em 0.25em 0.5em;
    background-color: #f1f1f1;

    .tab {
      width: 33.33%;
      flex-direction: column;
      position: relative;

      &:not(:last-child)::after {
        content: "  ";
        position: absolute;
        right: 0;
        top: 0.7em;
        height: 1em;
        width: 0.01em;
        background-color: #ddd;
      }

      span {
        font-size: 0.42em;
      }

      img {
        width: 1.6em;
        margin-bottom: 0.3em;
      }
    }
  }

  .wallet {
    width: 9.5em;
    margin: 0.2em auto 0;
    padding-top: 0.25em;
    background-color: @purple;
    border-radius: 0.25em 0.25em 0 0;
    color: #fff;
    .wallet_record {
      color: @green;
      margin-top: 0.5em;
      padding: 0.5em;
      border-top: 0.01em solid rgba(#fff, 0.1);
      span {
        font-size: 0.4em;
      }
    }
    .wallet_price_name {
      padding: 0 0.25em;
      span {
        font-size: 0.3em;
      }
    }
    .wallet_price {
      color: #f7b52b;
      padding: 0 0.25em;
      margin-bottom: 0.25em;
      span {
        font-size: 0.4em;
      }
    }

    .wallet_title {
      padding: 0 0.25em;
      margin-bottom: 0.25em;
      span {
        font-size: 0.5em;
      }
      img {
        width: 0.75em;
      }
    }
  }

  .user {
    img {
      width: 1.2em;
      height: 1.2em;
      border-radius: 50%;
      margin-right: 0.25em;
    }
    .real_name {
      font-size: 0.5em;
    }
    .phone {
      font-size: 0.4em;
      color: #999;
      margin-top: 0.1em;
    }
  }
}
</style>

 src/page/watchlists/watchlists.vue

@@ -1,30 +1,125 @@
<template>
    <div class="watchlists">
        <tab-head></tab-head>

        <div class="swiper">
            <div class="swiper-wrapper flex-start">
                <div class="swiper-slide">
                    <index-component :ids="'watchlists1'"></index-component>
                </div>
                <div class="swiper-slide">
                    <index-component :ids="'watchlists2'"></index-component>
                </div>
                <div class="swiper-slide">
                    <index-component :ids="'watchlists3'"></index-component>
                </div>
            </div>
        </div>

        <div class="division"></div>

        <div class="subheading">
            <div class="subheading_title flex-start">
                <img src="../../assets/img/shortcut.png" alt="">
                <span style="flex:1">{{ $t('hj61') }}</span>
                <span class="edit" @click="onEdit">{{ editorShow ? $t('完成') : $t('编辑') }}</span>
            </div>

            <stock-list ref="stockList"></stock-list>
        </div>
    </div>
</template>

<script>
import tabHead from "@/components/tabHead.vue";
import indexComponent from "@/components/index-component.vue";
import stockList from "@/components/stock-list.vue";
export default {
    name: 'watchlists',
    components: {
        tabHead
        tabHead, indexComponent, stockList
    },
    computed: {
    },
    data() {
        return {
            msg: 'watchlists'
            msg: 'watchlists',
            editorShow: false,
        }
    },
    methods: {
        onEdit() {
            this.$refs.stockList.onEdit()
            this.editorShow = !this.editorShow
        }
    }
}
</script>

<style lang="less" scoped>
@green: #c4d600;

.watchlists {
    font-size: 10vw;
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 1.5rem;

    .subheading {
        padding-bottom: .25em;

        .subheading_title {
            display: flex;
            align-items: center;
            padding: .35em .25em .35em .25em;

            .edit {
                color: @green;
            }

            img {
                width: .5em;
                height: .5em;
                margin-right: .25em;
            }

            span {
                font-size: .5em;
                line-height: .5em;
                font-weight: 500;
            }
        }
    }

    .division {
        width: 100%;
        height: .25em;
        background-color: #f5f5f5;
    }

    .swiper {
        width: 10em;
        overflow-x: auto;
        padding-bottom: .25em;

        &::-webkit-scrollbar {
            display: none;
        }

        .swiper-wrapper {
            width: 14.5em;
            margin-top: .4em;
            padding-left: .25em;

            .swiper-slide {
                margin-right: .25em;
                width: 4.5em;
                height: 3.2em;
                background-color: rgba(red, .1);
                border-radius: .1em;
            }
        }
    }

}
</style>

 src/router/index.js

@@ -94,7 +94,7 @@
  routes: [
    {
      path: "/",
      redirect: "/home"
      redirect: "/home_index"
    },
    // #region 7.2 新增路由-------------------------------------
    // 新首页
@@ -114,10 +114,82 @@
      name: "markets",
      meta: {
        title: i18n.t("hj62"),
        requireAuth: false,
        requireAuth: true,
        index: 0
      },
      component: () => import("@/page/markets/markets.vue")
    },
    // AI量化交易
    {
      path: "/aiTrading",
      name: "aiTrading",
      meta: {
        title: "AI" + i18n.t("量化交易"),
        requireAuth: true,
        show: true,
        index: 1
      },
      component: () => import("@/page/markets/aiTrading.vue")
    },
    // AI交易订单
    {
      path: "/aiTradingOrder",
      name: "aiTradingOrder",
      meta: {
        title: i18n.t("AI交易订单"),
        requireAuth: true,
        show: true,
        index: 2
      },
      component: () => import("@/page/markets/aiTradingOrder.vue")
    },
    // 大宗交易
    {
      path: "/blockTrading",
      name: "blockTrading",
      meta: {
        title: i18n.t("hj621"),
        requireAuth: true,
        show: true,
        index: 1
      },
      component: () => import("@/page/markets/blockTrading.vue")
    },
    // 大宗交易订单
    {
      path: "/blockTradingOrder",
      name: "blockTradingOrder",
      meta: {
        title: i18n.t("大宗交易订单"),
        requireAuth: true,
        show: true,
        index: 2
      },
      component: () => import("@/page/markets/blockTradingOrder.vue")
    },
    // IPO
    {
      path: "/ipo",
      name: "ipo",
      meta: {
        title: "IPO",
        requireAuth: true,
        show: true,
        index: 1
      },
      component: () => import("@/page/markets/ipo.vue")
    },
    // IPO订单
    {
      path: "/ipoOrder",
      name: "ipoOrder",
      meta: {
        title: "IPO" + i18n.t("订单"),
        requireAuth: true,
        show: true,
        index: 2
      },
      component: () => import("@/page/markets/ipoOrder.vue")
    },
    // 自选
    {
@@ -125,10 +197,44 @@
      name: "watchlists",
      meta: {
        title: i18n.t("hj61"),
        requireAuth: false,
        requireAuth: true,
        index: 0
      },
      component: () => import("@/page/watchlists/watchlists.vue")
    },
    // 新交易页面
    {
      path: "/tradeNew",
      name: "tradeNew",
      meta: {
        title: i18n.t("hj225"),
        requireAuth: true,
        index: 0
      },
      component: () => import("@/page/trading/TradeNew.vue")
    },
    // 新交易页面
    {
      path: "/account",
      name: "account",
      meta: {
        title: i18n.t("Account"),
        requireAuth: true,
        index: 0
      },
      component: () => import("@/page/user/account.vue")
    },
    // 新闻列表页面
    {
      path: "/new-list",
      name: "new-list",
      meta: {
        title: i18n.t("hj6"),
        requireAuth: false,
        show: true,
        index: 1
      },
      component: () => import("@/page/home/newList.vue")
    },
    //#endregion
    //#region 旧路由---------------------------------------------
@@ -199,6 +305,7 @@
        // hasHeader: true,
        // is_Show: true,
        is_Show: false,
        show: true,
        index: 2
      },
      component: NewPage