| | |
| | | </div> |
| | | <!-- 公告 --> |
| | | <van-skeleton title :row="1" :loading="loading" /> |
| | | <div class="announcement" v-if="!loading&&close"> |
| | | <div class="announcement" v-if="!loading && close"> |
| | | <div class="an_content" @click="$router.push('/newGg')"> |
| | | <div class="an_left_icon"> |
| | | <img :src="Announcement" alt /> |
| | | </div> |
| | | <div class="an_right_message " > |
| | | <div class="an_right_message "> |
| | | <div class="animate"> |
| | | {{ artList.artTitle }} |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <!-- 排行入门 --> |
| | | <van-skeleton title :row="2" :loading="loading" /> |
| | | |
| | | <div class="navs" v-if="!loading&&close"> |
| | | <div class="navs" v-if="!loading && close"> |
| | | |
| | | <div class="navs_content"> |
| | | <div class="chacha" @click="close=false"> |
| | | <div class="chacha" @click="close = false"> |
| | | <div> |
| | | <img :src="clear" /> |
| | | </div> |
| | |
| | | <div class="focus_on" v-if="!loading"> |
| | | <div class="fo_content"> |
| | | <div class="top_title"> |
| | | {{ '最多关注' }} |
| | | {{ $t('hj5') }} |
| | | </div> |
| | | <div class="fo_banner"> |
| | | <van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange"> |
| | |
| | | </div> |
| | | </van-swipe-item> --> |
| | | <van-swipe-item v-for="(item, index) in proData" :key="index"> |
| | | <div class="item_cont" :class="idx!=2?'item_conts':''" v-for="(item2, idx) in proData[currentIndex]" :key="idx"> |
| | | <div class="item_cont" :class="idx != 2 ? 'item_conts' : ''" |
| | | v-for="(item2, idx) in proData[currentIndex]" :key="idx" @click="goDetail(item2)"> |
| | | <div class="top_fo"> |
| | | <div class="title"> |
| | | {{ item2.indexName }} |
| | | {{ item2.name }} |
| | | </div> |
| | | <div class="numbers"> |
| | | {{ item2.currentPoint }} |
| | | {{ item2.price }} |
| | | </div> |
| | | <div class="percentage" :class="item2.floatRate > 0 ? 'gree' : 'redd'"> |
| | | <span style="font-weight: 500;">{{ item2.floatRate > 0 ? `+${item2.floatRate}%` : |
| | | `${item2.floatRate}%` |
| | | <div class="percentage" :class="item2.range > 0 ? 'gree' : 'redd'"> |
| | | <span style="font-weight: 500;">{{ item2.range > 0 ? `${item2.range}` : |
| | | `${item2.range}` |
| | | }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="bottom_fo"> |
| | | <div class="title"> |
| | | <span class="numberid" style="margin-right: 0.12rem;">{{ item2.indexCode }}</span> |
| | | <span class="numberid" style="margin-right: 0.12rem;">{{ item2.symbol }}</span> |
| | | <!-- <div v-for="(items, indexs) in Number(item2.pnum.slice(0, 1))" |
| | | style="width: 0.4rem;height: 0.4rem;display: flex;"> |
| | | <img v-if="indexs < 3" :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" /> |
| | | </div> --> |
| | | |
| | | <img v-for="items in item2.random" :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" /> |
| | | </div> |
| | | <div class="numbers" :class="item2.floatPoint > 0 ? 'gree' : 'redd'"> |
| | | <span class="point">{{ item2.floatPoint > 0 ? `+${item2.floatPoint}%` : `${item2.floatPoint}%` |
| | | <img :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" /> |
| | | <span class="point" style="height: 0.4rem;">{{ item2.pnum |
| | | }}</span> |
| | | </div> |
| | | <div class="percentage"> |
| | | <!-- <span class="aikesi">100X</span> --> |
| | | <el-tag key="100X" |
| | | style="width: 80%;text-align: center;height: 0.45rem!important;line-height: 0.45rem!important;"> |
| | | {{ getNum1(item2.random) + 'X' }} |
| | | {{ getNum1(Number(item2.pnum.slice(0, 1))) + 'X' }} |
| | | </el-tag> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="news-tab"> |
| | | <mt-navbar v-model="news"> |
| | | <mt-tab-item id="tab_0"> |
| | | <span class="tab-name">新闻</span> |
| | | <span class="tab-name">{{ $t('hj6') }}</span> |
| | | </mt-tab-item> |
| | | <mt-tab-item id="tab_1"> |
| | | <span class="tab-name">经济</span> |
| | | <span class="tab-name">{{ $t('hj7') }}</span> |
| | | </mt-tab-item> |
| | | <mt-tab-item id="tab_2"> |
| | | <span class="tab-name">7×24</span> |
| | |
| | | </div> |
| | | </div> |
| | | </mt-tab-container-item> |
| | | <mt-tab-container-item id="tab_1" > |
| | | <mt-tab-container-item id="tab_1"> |
| | | <div class="news-content"> |
| | | <div class="item-out" v-for="(item, inde) in newsContent4" :key="inde" @click="$router.push({ |
| | | path: '/newPage', query: { |
| | | listid: item.id |
| | | } |
| | | })" > |
| | | })"> |
| | | <div class="item-times">{{ item.addTime | gettime }}</div> |
| | | <div class="titContent" style="-webkit-box-orient: vertical;">{{ item.title }}</div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- tab --> |
| | | |
| | | <GoToLogin v-show="isGoTo" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import AllList from "@/page/list/list-all"; |
| | | import HomeList from "./components/home-list"; |
| | | import Echart from "./components/echart.vue"; |
| | | import { |
| | | Toast |
| | | } from "mint-ui"; |
| | | import * as api from "@/axios/api"; |
| | | import Logo from "@/assets/img/icon_home_logo.png"; |
| | | import Searchs from "@/assets/home/search.png"; |
| | |
| | | import banner3 from "@/assets/img/b3.png"; |
| | | // import indexData from "./data.json"; |
| | | import GoToLogin from '@/page/home/components/GoLogin.vue'; |
| | | |
| | | export default { |
| | | components: { |
| | | HomeList, |
| | | AllList, |
| | | GoToLogin, |
| | | Echart |
| | | Echart, |
| | | }, |
| | | props: {}, |
| | | data() { |
| | |
| | | Huo, |
| | | is_login: false, |
| | | loading: true, |
| | | close:true, |
| | | close: true, |
| | | proData: [], // 分割好的数据 |
| | | currentIndex: 0, |
| | | bannerImgsArr: [{ |
| | |
| | | announcementMess: "20202/10 - 交易时间安排", |
| | | navsArr: [{ |
| | | img: Tops, |
| | | title: "行情" |
| | | title: this.$t('hj1'), |
| | | }, |
| | | { |
| | | img: Rumen, |
| | | title: "持仓" |
| | | title: this.$t('hj2'), |
| | | }, |
| | | { |
| | | img: Xuexi, |
| | | title: "新股" |
| | | title: this.$t('hj3'), |
| | | }, |
| | | { |
| | | img: Guanyu, |
| | | title: "我的" |
| | | } |
| | | ], |
| | | artList:[], |
| | | title: this.$t('hj4'), |
| | | }], |
| | | artList: [], |
| | | news: "tab_0", |
| | | newsContent1: [], |
| | | newsContent2: [], |
| | |
| | | newsContent4: [], |
| | | onlineService: "", |
| | | isGoTo: false, |
| | | bannerList:[] |
| | | bannerList: [], |
| | | userInfo: [], |
| | | }; |
| | | }, |
| | | methods: { |
| | | |
| | | async getUserInfo() { |
| | | // 获取用户信息 |
| | | let data = await api.getUserInfo(); |
| | | if (data.status === 0) { |
| | | // 判断是否登录 |
| | | this.$store.state.userInfo = data.data; |
| | | this.userInfo = data.data; |
| | | } else { |
| | | } |
| | | }, |
| | | getHuo() { |
| | | //123随机 |
| | | var num = Math.floor(Math.random() * 3 + 1); |
| | | return num; |
| | | |
| | | |
| | | }, |
| | | //构造随机数列表 50 100 200 |
| | | getNum1(num) { |
| | | |
| | | if (num == 1) { |
| | | return 50; |
| | | } else if (num == 2) { |
| | | return 100; |
| | | } else if (num == 3) { |
| | | } else if (num >= 3) { |
| | | return 200; |
| | | } |
| | | }, |
| | | goJy(index){ |
| | | goDetail(item) { |
| | | if (this.userInfo.length == 0) { |
| | | this.$store.commit('dialogVisible', true); |
| | | return; |
| | | } |
| | | this.$router.push({ |
| | | path: "/kline", |
| | | query: { |
| | | name: item.name, |
| | | stockplate: item.stock_plate, |
| | | code: item.symbol.substring(2, item.symbol.length), |
| | | type: item.market, |
| | | sok: this.filterSH(item.market), |
| | | if_zhishu: '0', |
| | | } |
| | | }); |
| | | }, |
| | | filterSH(val) { |
| | | if (val === "sh") { |
| | | return 1; |
| | | } else if (val === "bj" || val === "sz") { |
| | | return 0; |
| | | } |
| | | }, |
| | | goJy(index) { |
| | | if (this.userInfo.length == 0) { |
| | | this.$store.commit('dialogVisible', true); |
| | | return; |
| | | } |
| | | switch (index) { |
| | | case 0: |
| | | this.$router.push('/list'); |
| | | this.$router.push('/trading-list'); |
| | | break; |
| | | case 1: |
| | | this.$router.push('/orderlist'); |
| | | case 1: |
| | | this.$router.push('/warehouse'); |
| | | break; |
| | | case 2: |
| | | //this.$router.push(); |
| | | case 2: |
| | | this.$router.push({ path: '/trading-list', query: { listid: 3 } }); |
| | | break; |
| | | case 3: |
| | | case 3: |
| | | this.$router.push('/user'); |
| | | break; |
| | | |
| | | |
| | | default: |
| | | break; |
| | | } |
| | | if (navigator.vibrate) { |
| | | // 支持 |
| | | navigator.vibrate([55]); |
| | | } |
| | | }, |
| | | async getBanner () { |
| | | async getBanner() { |
| | | // 获取显示的banner |
| | | let result = await api.getBannerByPlat({ platType: 'm' }) |
| | | if (result.status === 0) { |
| | | this.bannerList = result.data |
| | | } else { |
| | | Toast(result.msg) |
| | | this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': result.msg }); |
| | | } |
| | | }, |
| | | goOnline() { |
| | | window.location.href = this.onlineService; |
| | | |
| | | }, |
| | | async getArtList(){ |
| | | async getArtList() { |
| | | let data = await api.getArtList(); |
| | | if(data.status == 0){ |
| | | if (data.status == 0) { |
| | | this.artList = data.data.list[0]; |
| | | } |
| | | }, |
| | |
| | | if (data.status === 0) { |
| | | this.onlineService = data.data.onlineService |
| | | } else { |
| | | Toast(data.msg) |
| | | this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': data.msg }); |
| | | } |
| | | }, |
| | | async getStock() { |
| | | let data = await api.getIndexMarket(); |
| | | for (var i = 0; i < data.data.length; i += 3) { |
| | | this.proData.push(data.data.slice(i, i + 3)); |
| | | for (var i = 0; i < data.data.result.data.length; i += 3) { |
| | | this.proData.push(data.data.result.data.slice(i, i + 3)); |
| | | } |
| | | |
| | | }, |
| | |
| | | |
| | | }, |
| | | handleSearchClick() { |
| | | this.loading = !this.loading; |
| | | //this.loading = !this.loading; |
| | | this.$router.push({ path: "/trading-list", query: { type: 1 } }); |
| | | } |
| | | }, |
| | | filters: { |
| | |
| | | this.ProcessData(); |
| | | }, |
| | | mounted() { |
| | | this.getUserInfo(); |
| | | this.getInfoSite(); |
| | | this.getNewsList(1); |
| | | this.getNewsList(2); |
| | |
| | | this.getArtList(); |
| | | this.getBanner() |
| | | |
| | | |
| | | |
| | | setInterval(() => { |
| | | if(window.localStorage.getItem('USERTOKEN')){ |
| | | if (window.localStorage.getItem('USERTOKEN')) { |
| | | this.isGoTo = false; |
| | | }else{ |
| | | } else { |
| | | this.isGoTo = !this.isGoTo |
| | | } |
| | | }, 10000); |
| | |
| | | align-items: center; |
| | | |
| | | .an_left_icon { |
| | | width: 5%; |
| | | width: 4%; |
| | | height: 70%; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | |
| | | .an_right_message { |
| | | width: 90%; |
| | | width: 93%; |
| | | height: 100%; |
| | | line-height: 0.559rem; |
| | | align-items: center; |
| | | align-content: center; |
| | | font-size: 0.29rem; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | overflow: hidden; |
| | | // text-overflow:ellipsis; |
| | | } |
| | | } |
| | |
| | | /deep/.van-swipe__indicator--active { |
| | | width: 0.35rem !important; |
| | | border-radius: 0.23rem; |
| | | background-color: #aec7ec!important; |
| | | background-color: #aec7ec !important; |
| | | } |
| | | |
| | | .fo_banner { |
| | |
| | | |
| | | .numberid { |
| | | font-size: 0.28rem; |
| | | display: flex; |
| | | |
| | | line-height: 0.5rem; |
| | | } |
| | | |
| | | .numbers { |
| | |
| | | |
| | | .point { |
| | | font-size: 0.28rem; |
| | | |
| | | height: 0.5rem; |
| | | line-height: 0.5rem; |
| | | } |
| | | |
| | | .percentage { |
| | |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | text-align: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .percentage span { |
| | | height: 0.5rem; |
| | | line-height: 0.5rem; |
| | | } |
| | | } |
| | | |
| | |
| | | border: 0.0513rem solid #41AC75; |
| | | color: #41AC75; |
| | | } |
| | | |
| | | .animate { |
| | | |
| | | padding-left: 20px; |
| | | padding-left: 20px; |
| | | |
| | | font-size: 12px; |
| | | font-size: 0.29rem; |
| | | |
| | | color: #000; |
| | | color: #000; |
| | | |
| | | display: inline-block; |
| | | display: inline-block; |
| | | |
| | | white-space: nowrap; |
| | | white-space: nowrap; |
| | | |
| | | animation: 10s wordsLoop linear infinite normal; |
| | | animation: 10s wordsLoop linear infinite normal; |
| | | |
| | | } |
| | | |
| | |
| | | |
| | | @keyframes wordsLoop { |
| | | |
| | | 0% { |
| | | 0% { |
| | | |
| | | transform: translateX(100%); |
| | | |
| | | -webkit-transform: translateX(100%); |
| | | |
| | | } |
| | | } |
| | | |
| | | 100% { |
| | | 100% { |
| | | |
| | | transform: translateX(-100%); |
| | | |
| | | -webkit-transform: translateX(-100%); |
| | | |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | |
| | | |
| | | @-webkit-keyframes wordsLoop { |
| | | |
| | | 0% { |
| | | 0% { |
| | | |
| | | transform: translateX(100%); |
| | | |
| | | -webkit-transform: translateX(100%); |
| | | |
| | | } |
| | | } |
| | | |
| | | 100% { |
| | | 100% { |
| | | |
| | | transform: translateX(-100%); |
| | | |
| | | -webkit-transform: translateX(-100%); |
| | | |
| | | } |
| | | } |
| | | |
| | | } |
| | | </style> |