@extends('layouts.frontend-member')
@section('title', __('message.markets'))
@section('content')


    <uni-app class="uni-app--showtabbar uni-app--maxwidth"><uni-page data-page="pages/market/market"><uni-page-head
                uni-page-head-type="default">
                <div class="uni-page-head"
                    style="
          background-color: rgb(16, 32, 48);
          color: white;
          transition-duration: 0ms;
          transition-timing-function: linear;
        ">
                    <div class="uni-page-head-hd">
                        <div class="uni-page-head-btn" style="display: none">
                            <i class="uni-btn-icon" style="color: white; font-size: 27px"></i>
                        </div>
                        <div class="uni-page-head-ft"></div>
                    </div>
                    <div class="uni-page-head-bd">
                        <div class="uni-page-head__title" style="font-size: 16px; opacity: 1">
                            <!---->
                            {{__('message.markets')}}
                        </div>
                    </div>
                    <!---->
                    <div class="uni-page-head-ft"></div>
                </div>
                <div class="uni-placeholder"></div>
            </uni-page-head>
            <uni-page-refresh>
                <div class="uni-page-refresh" style="margin-top: 44px">
                    <div class="uni-page-refresh-inner">
                        <svg fill="#2BD009" width="24" height="24" viewBox="0 0 24 24"
                            class="uni-page-refresh__icon">
                            <path
                                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z">
                            </path>
                            <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg><svg width="24" height="24" viewBox="25 25 50 50" class="uni-page-refresh__spinner">
                            <circle stroke="#2BD009" cx="50" cy="50" r="20" fill="none" stroke-width="4"
                                stroke-miterlimit="10" class="uni-page-refresh__path"></circle>
                        </svg>
                    </div>
                </div>
            </uni-page-refresh><uni-page-wrapper>
                <uni-page-body><uni-view data-v-14164d9c="" class=""><uni-view
                            data-v-14164d9c="" class="plr10"><uni-view data-v-14164d9c=""
                                class="flex alcenter ft12 blue3 ptb10"><uni-view data-v-14164d9c="" class="flex alcenter"
                                    style="flex: 1.5 1 0%"><uni-view data-v-14164d9c="" class="flex alcenter"><uni-text
                                            data-v-14164d9c="" class="pr5"><span>{{__('message.name')}}</span></uni-text><uni-view
                                            data-v-14164d9c=""><uni-image data-v-14164d9c="" class="wt8 h10">
                                                <div
                                                    style="
                          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTVDNDY3N0E3QTgxMUU5QTlBRUU4NDczODk0QzA0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTVDNDY3OEE3QTgxMUU5QTlBRUU4NDczODk0QzA0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5NUM0Njc1QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5NUM0Njc2QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7SNDwQAAANpJREFUeNpi+v//PwM63rz7oAk2cSYGNLBlz6EIIHUKSIejyzGCdCApNANSB4GYA4i/A7Gdj4vdGQzFQIUyQOo0EEsgGfYciE2AGp6BOExQhVxAahOaQhCQBIlD5RkYgZ5hBNKrgTiYATdYBcQRLEBCH4ifAPFEBvxAF8WDhAATAwmAJMUsQJ8aAOkEItQuAHnwIhDLEAiNtSB1YA9Cw/EIEBtiUXgeiG2AEfONUAy+AGJToMInKB6ECvgD8Q+oEIj2hynECA2gxCkglQjEIOsSoXwEICU9AwQYAJ5CiorCy+x0AAAAAElFTkSuQmCC');
                          background-position: 0% 0%;
                          background-size: 100% 100%;
                          background-repeat: no-repeat;
                        ">
                                                </div>
                                                <!----><img
                                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTVDNDY3N0E3QTgxMUU5QTlBRUU4NDczODk0QzA0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTVDNDY3OEE3QTgxMUU5QTlBRUU4NDczODk0QzA0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5NUM0Njc1QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5NUM0Njc2QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7SNDwQAAANpJREFUeNpi+v//PwM63rz7oAk2cSYGNLBlz6EIIHUKSIejyzGCdCApNANSB4GYA4i/A7Gdj4vdGQzFQIUyQOo0EEsgGfYciE2AGp6BOExQhVxAahOaQhCQBIlD5RkYgZ5hBNKrgTiYATdYBcQRLEBCH4ifAPFEBvxAF8WDhAATAwmAJMUsQJ8aAOkEItQuAHnwIhDLEAiNtSB1YA9Cw/EIEBtiUXgeiG2AEfONUAy+AGJToMInKB6ECvgD8Q+oEIj2hynECA2gxCkglQjEIOsSoXwEICU9AwQYAJ5CiorCy+x0AAAAAElFTkSuQmCC"
                                                    draggable="false" />
                                            </uni-image></uni-view></uni-view></uni-view><uni-view data-v-14164d9c=""
                                    class="flex1 flex alcenter"><uni-view data-v-14164d9c="" class="flex alcenter"><uni-text
                                            data-v-14164d9c="" class="pr5"><span>{{__('message.last price')}}</span></uni-text><uni-view
                                            data-v-14164d9c=""><uni-image data-v-14164d9c="" class="wt8 h10">
                                                <div
                                                    style="
                          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTVDNDY3N0E3QTgxMUU5QTlBRUU4NDczODk0QzA0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTVDNDY3OEE3QTgxMUU5QTlBRUU4NDczODk0QzA0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5NUM0Njc1QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5NUM0Njc2QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7SNDwQAAANpJREFUeNpi+v//PwM63rz7oAk2cSYGNLBlz6EIIHUKSIejyzGCdCApNANSB4GYA4i/A7Gdj4vdGQzFQIUyQOo0EEsgGfYciE2AGp6BOExQhVxAahOaQhCQBIlD5RkYgZ5hBNKrgTiYATdYBcQRLEBCH4ifAPFEBvxAF8WDhAATAwmAJMUsQJ8aAOkEItQuAHnwIhDLEAiNtSB1YA9Cw/EIEBtiUXgeiG2AEfONUAy+AGJToMInKB6ECvgD8Q+oEIj2hynECA2gxCkglQjEIOsSoXwEICU9AwQYAJ5CiorCy+x0AAAAAElFTkSuQmCC');
                          background-position: 0% 0%;
                          background-size: 100% 100%;
                          background-repeat: no-repeat;
                        ">
                                                </div>
                                                <!----><img
                                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTVDNDY3N0E3QTgxMUU5QTlBRUU4NDczODk0QzA0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTVDNDY3OEE3QTgxMUU5QTlBRUU4NDczODk0QzA0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5NUM0Njc1QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5NUM0Njc2QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7SNDwQAAANpJREFUeNpi+v//PwM63rz7oAk2cSYGNLBlz6EIIHUKSIejyzGCdCApNANSB4GYA4i/A7Gdj4vdGQzFQIUyQOo0EEsgGfYciE2AGp6BOExQhVxAahOaQhCQBIlD5RkYgZ5hBNKrgTiYATdYBcQRLEBCH4ifAPFEBvxAF8WDhAATAwmAJMUsQJ8aAOkEItQuAHnwIhDLEAiNtSB1YA9Cw/EIEBtiUXgeiG2AEfONUAy+AGJToMInKB6ECvgD8Q+oEIj2hynECA2gxCkglQjEIOsSoXwEICU9AwQYAJ5CiorCy+x0AAAAAElFTkSuQmCC"
                                                    draggable="false" />
                                            </uni-image></uni-view></uni-view></uni-view><uni-view data-v-14164d9c=""
                                    class="wt70 flex alcenter jsend"><uni-view data-v-14164d9c=""
                                        class="flex alcenter"><uni-text data-v-14164d9c=""
                                            class="pr5"><span>{{__('message.updowns')}}</span></uni-text><uni-view
                                            data-v-14164d9c=""><uni-image data-v-14164d9c="" class="wt8 h10">
                                                <div
                                                    style="
                          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTVDNDY3N0E3QTgxMUU5QTlBRUU4NDczODk0QzA0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTVDNDY3OEE3QTgxMUU5QTlBRUU4NDczODk0QzA0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5NUM0Njc1QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5NUM0Njc2QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7SNDwQAAANpJREFUeNpi+v//PwM63rz7oAk2cSYGNLBlz6EIIHUKSIejyzGCdCApNANSB4GYA4i/A7Gdj4vdGQzFQIUyQOo0EEsgGfYciE2AGp6BOExQhVxAahOaQhCQBIlD5RkYgZ5hBNKrgTiYATdYBcQRLEBCH4ifAPFEBvxAF8WDhAATAwmAJMUsQJ8aAOkEItQuAHnwIhDLEAiNtSB1YA9Cw/EIEBtiUXgeiG2AEfONUAy+AGJToMInKB6ECvgD8Q+oEIj2hynECA2gxCkglQjEIOsSoXwEICU9AwQYAJ5CiorCy+x0AAAAAElFTkSuQmCC');
                          background-position: 0% 0%;
                          background-size: 100% 100%;
                          background-repeat: no-repeat;
                        ">
                                                </div>
                                                <!----><img
                                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTVDNDY3N0E3QTgxMUU5QTlBRUU4NDczODk0QzA0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTVDNDY3OEE3QTgxMUU5QTlBRUU4NDczODk0QzA0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5NUM0Njc1QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5NUM0Njc2QTdBODExRTlBOUFFRTg0NzM4OTRDMDQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7SNDwQAAANpJREFUeNpi+v//PwM63rz7oAk2cSYGNLBlz6EIIHUKSIejyzGCdCApNANSB4GYA4i/A7Gdj4vdGQzFQIUyQOo0EEsgGfYciE2AGp6BOExQhVxAahOaQhCQBIlD5RkYgZ5hBNKrgTiYATdYBcQRLEBCH4ifAPFEBvxAF8WDhAATAwmAJMUsQJ8aAOkEItQuAHnwIhDLEAiNtSB1YA9Cw/EIEBtiUXgeiG2AEfONUAy+AGJToMInKB6ECvgD8Q+oEIj2hynECA2gxCkglQjEIOsSoXwEICU9AwQYAJ5CiorCy+x0AAAAAElFTkSuQmCC"
                                                    draggable="false" />
                                            </uni-image>
                                        </uni-view>
                                    </uni-view>
                                </uni-view>
                            </uni-view>
                <!--content trade-->
                  @foreach ($products as $product)

                  <a href="{{ route('member.product-trade', $product) }}" data-v-1f8cb1ee="" class="no-underline flex alcenter ft12 ptb10 blue4 plr10 bdb_blue3"><uni-view data-v-1f8cb1ee=""
                  style="height: 1.8rem; width: 1.8rem;"><uni-image data-v-1f8cb1ee="" class="mauto"
                    style="height: 1.8rem; width: 1.8rem; padding: 0.2rem;" >
                    <div
                      style="background-image: url('{{ asset($product->image?? 'images/no_image.png') }}'); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;">
                    </div>
                  </uni-image>
                </uni-view>
                <uni-view data-v-1f8cb1ee="" style="flex: 1.5 1 0%;">
                  <uni-view data-v-1f8cb1ee="">
                  <uni-text data-v-1f8cb1ee=""
                      class="gray_e ft14 bold ft16">
                      <span>{{ $product->name?? '' }}</span>
                  </uni-text>/USDT</uni-view></uni-view>
                  <uni-text
                  data-v-1f8cb1ee="" class="flex1 bold gray_e ft16">
                  {{-- <span  id="price-{{ $product->id }}"> --}}
                    {{-- {{ number_format($product->current_price, 6) }} --}}
                  {{-- </span> --}}
                    <span id="price_show{{ $product->id }}"></span>
                </uni-text>
                <!-- percentage  -->
                                <uni-text data-v-1f8cb1ee="" class="flex1 tr flex jsend">
                  <span>
                {{-- @if ($rate > 0)
                <uni-text data-v-1f8cb1ee=""
                      class="radius2 ptb5 white wt70 block tc bgGreen"><span>+{{ number_format($rate, 2) }}%</span>
                </uni-text>
                @else --}}
                {{-- <uni-text data-v-1f8cb1ee=""
                      class="radius2 ptb5 white wt70 block tc bgRed"><span>-{{ number_format($rate, 2) }}%</span>
                </uni-text>
                @endif --}}
                    {{-- Fetc Apis --}}
                    <script>
                        async function fetchCryptoData() {
                          try {
                          const response = await fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms={{ strtoupper($product->name?? '') }}&tsyms=usd`)
                         
                          .then(response => response.json())
                          .then(data => {
                          const crypto = data.RAW.{{ strtoupper($product->name) }}.USD;
                          // const price = data.RAW.BTC.USD;
                          const change = crypto.CHANGEPCT24HOUR.toFixed(2);
                          const changeElement = document.querySelector('#rise_down_change{{ $product->id }}');
                  
                              // document.getElementById('name_show{{ $product->id }}').innerHTML = `
                              //           <strong>${crypto.FROMSYMBOL}</strong>
                              //       `;
                              document.getElementById('price_show{{ $product->id }}').innerHTML = `
                                        <div> ${crypto.PRICE.toFixed(4)}</div>
                                    `;
                                    console.log(changeElement.innerHTML);
                    
                                    changeElement.innerText = ` ${change}%`;
                                    if (change >= 0) {
                                          changeElement.classList.add('bgGreen');
                                      } else {
                                          changeElement.classList.add('bgRed');
                                      }
                                    
                      
                              })
                         
                             
                          } catch (error) {
                              console.error('Error fetching data:', error);
                              // document.getElementById('crypto-loaing').innerHTML = 'Please try again loading...';
                              // document.getElementById('crypto-loaing').innerHTML = 'Error fetching data. Please try again later.';
                          
                          }
                          // if (!response.ok) {
                          //     throw new Error(
                          //       "Network response was not ok " + response.statusText
                          //     );
                          // }
                      }
                  
                      // Set interval to fetch new data every 10 seconds (10000 milliseconds)
                      setInterval(fetchCryptoData, 1000);
                      // load function
                     document.addEventListener("DOMContentLoaded", fetchCryptoData);
      
                  </script>
                <button data-v-1f8cb1ee="" style="border: none;"
                class="radius2 ptb5 white wt70 block tc pointer" id="rise_down_change{{ $product->id }}"><span style="color: #3c3d3e96;">กำลังโหลด...</span>
                </button>

                </span>
                </uni-text>
                  </a>
                  @endforeach

              <!--content trade-->

                        </uni-view>
                    </uni-view>
                </uni-page-body>
            </uni-page-wrapper>
        </uni-page>

        <!--Tab navbar-->
        @include('fronts.member.inc.nav')
        <!---->
    </uni-app>



@endsection
@push('styles')
@endpush

@push('scripts')
    <script>
        $('.product-link').click(function() {
            location.href = $(this).data('link');
        });
    </script>
@endpush