| | |
| | | <template> |
| | | <div class="profile-box"> |
| | | <img class="profile" :src="require(`@/assets/image/6Profile.png`)" alt="" /> |
| | | |
| | | <!-- src/assets/image/6Profile.png --> |
| | | <div class="pb-120 assetsCenter"> |
| | | <div class="flex justify-between px-52 pt-31 box-border"> |
| | | <div |
| | | class="flex-1 items-center text-center textColor1" |
| | | v-for="(item, index) in typeList" |
| | | :key="'type' + index" |
| | | @click="onTabs(index)" |
| | | > |
| | | <div class="font-32 text-center lh-53">{{ item.type }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="flex mx-52 mt-17"> |
| | | <span |
| | | class="flex-1 border-b-color" |
| | | :class="{ active_color: tab === 0 }" |
| | | ></span> |
| | | <span |
| | | class="flex-1 border-b-color" |
| | | :class="{ active_color: tab === 1 }" |
| | | ></span> |
| | | <span |
| | | class="flex-1 border-b-color" |
| | | :class="{ active_color: tab === 2 }" |
| | | ></span> |
| | | <span |
| | | class="flex-1 border-b-color" |
| | | :class="{ active_color: tab === 3 }" |
| | | ></span> |
| | | </div> |
| | | <over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view> |
| | | <as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets> |
| | | <contract |
| | | v-if="tab === 2" |
| | | :funds="funds" |
| | | :index="index" |
| | | :key="tab" |
| | | ></contract> |
| | | <financial |
| | | v-if="tab === 3" |
| | | :funds="funds" |
| | | :index="index" |
| | | :key="tab" |
| | | ></financial> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import ExTabs from "./"; |
| | | import AsSets from "@/components/assetsCenter/assets"; |
| | | import OverView from "@/components/assetsCenter/overview"; |
| | | import Contract from "@/components/assetsCenter/contract"; |
| | | import Financial from "@/components/assetsCenter/financial"; |
| | | import Axios from "@/API/assets"; |
| | | export default { |
| | | name: "ListQuotation", |
| | | name: "assets-index", |
| | | components: { |
| | | AsSets, |
| | | OverView, |
| | | Contract, |
| | | Financial, |
| | | }, |
| | | data() { |
| | | return { |
| | | fixDate, |
| | | HOST_URL, |
| | | active: 0, |
| | | type: "left", //left 从左往右 right 从有王座 |
| | | sortVal: 0, |
| | | list: [], |
| | | timer: null, |
| | | tab: 0, |
| | | index: 0, // 每个组件的二级tab |
| | | funds: {}, |
| | | typeList: [ |
| | | { |
| | | type: this.$t("总览"), |
| | | }, |
| | | { |
| | | type: this.$t("现货账户"), |
| | | }, |
| | | { |
| | | type: this.$t("合约"), |
| | | }, |
| | | { |
| | | type: this.$t("理财"), |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | methods: { |
| | | onTabs(val) { |
| | | if (this.tab < val) { |
| | | this.type = "right"; |
| | | } else { |
| | | this.type = "left"; |
| | | } |
| | | console.log(val); |
| | | this.tab = val; |
| | | }, |
| | | getAssets() { |
| | | Axios.GetAllAssets().then((res) => { |
| | | const { code, data } = res; |
| | | if (code) { |
| | | //console.log('总资产数据',data) |
| | | this.funds = data; |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getAssets(); |
| | | this.timer = setInterval(() => { |
| | | this.getAssets(); |
| | | }, 5000); |
| | | if (Object.hasOwnProperty.call(this.$route.query, "tab")) { |
| | | this.tab = this.$route.query.tab / 1; |
| | | this.index = this.$route.query.index ? this.$route.query.index * 1 : 0; |
| | | } |
| | | }, |
| | | activated() { |
| | | clearInterval(this.timer); |
| | | this.timer = setInterval(() => { |
| | | this.getAssets(); |
| | | }, 5000); |
| | | this.index = 0; |
| | | }, |
| | | deactivated() { |
| | | clearInterval(this.timer); |
| | | this.timer = null; |
| | | }, |
| | | beforeDestroy() { |
| | | clearInterval(this.timer); |
| | | this.timer = null; |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .profile-box { |
| | | .profile { |
| | | width: 100%; |
| | | // height: 200px; |
| | | } |
| | | .assetsCenter { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | </style> |
| | | .active_color { |
| | | @include themify() { |
| | | border-bottom: 5px solid themed("color_main") !important; |
| | | } |
| | | border-radius: 2.208px; |
| | | } |
| | | .left-enter-active, |
| | | .left-leave-active, |
| | | .right-enter-active, |
| | | .right-leave-active { |
| | | will-change: transform; |
| | | transition: all 500ms; |
| | | } |
| | | .left-leave-active, |
| | | .right-leave-active { |
| | | display: none; |
| | | } |
| | | .left-enter { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | .left-leave { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | .right-enter { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | .right-leave { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | </style> |