123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <template>
- <view class="usdt-box" :rise-fall="stocksColor">
- <view :class="['usdt-item' ,$setColor(item.change)]" v-for="(item , index ) in usdtList"
- :key="`usdt_${index}`" @click.stop="getPicture(item)">
- <text class="item-title">{{ item.currency_name }}{{ item.legal_name ? `/${item.legal_name}` : '' }}</text>
- <text class="item-nums color">{{ $numIntercepting(item.now_price , 2) }}</text>
- <text class="item-ratio color">{{ item.change }}%</text>
- <text class="item-result"><text class="iconfont">≈</text><text class="iconfont2"></text>{{ $numIntercepting(item.volume , 2) }}</text>
- </view>
- </view>
- </template>
- <script>
- import {
- mapGetters
- } from 'vuex'
- export default {
- name: "usdtModules",
- data() {
- return {
-
- };
- },
- computed: {
- ...mapGetters([
- 'stocksColor',
- 'usdtList'
- ]),
- },
- methods:{
- getPicture(val){
- // this.$setStorageSync('Picture' , val)
- this.$store.commit('websocket/set_currency_val' , val)
- uni.switchTab({
- url: '/pages/contract/index'
- });
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .usdt-box {
- width: 100%;
- min-height: 218rpx;
- background-color: $modules-box-bg;
- padding: 30rpx $pages-padding 20rpx;
- display: flex;
- .usdt-item {
- width: 33%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- .item-title {
- font-size: 22rpx;
- line-height: 30rpx;
- color: #1a1a1a;
- letter-spacing: 0.44rpx;
- }
- .item-nums {
- font-size: 34rpx;
- line-height: 53rpx;
- padding-top: 11rpx;
- letter-spacing: 0.76rpx;
- }
- .item-ratio {
- font-size: 22rpx;
- line-height: 33rpx;
- padding-top: 7rpx;
- letter-spacing: 0.44rpx;
- }
- .item-result {
- font-size: 20rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- line-height: 33rpx;
- color: #808080;
- display: flex;
- align-items: center;
- .iconfont,.iconfont2{
- font-size: 18rpx;
- }
- }
- }
- .err-item {
- .item-nums {
- color: #FF0000;
- }
- .item-ratio {
- color: #BE1B1B;
- }
- }
- }
- </style>
|