|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <scroll-view scroll-x="true" :scroll-with-animation="true" class="navbar">
|
|
|
+ <view class="navbar-item" :class="{ current: tabCurrentIndex === index }" v-for="(item, index) in typelist" @click="tabClick(index)">{{ item.name }}</view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="list-title flex">
|
|
|
+ <view class="title-left">交易對</view>
|
|
|
+ <view class="title-center">最新價格</view>
|
|
|
+ <view class="title-right">24h漲跌</view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="swiper-box" scroll-y="true" :style="{ height: maxheight }">
|
|
|
+ <view class="list-main flex" v-for="(item, index) in list">
|
|
|
+ <view class="main-left">{{ item.jyd }}</view>
|
|
|
+ <view class="main-center" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.price == 0 ? '--.--' : item.price }}</view>
|
|
|
+ <view class="main-right">
|
|
|
+ <view class="btn" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.zd }}%</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ onReady(res) {
|
|
|
+ var _this = this;
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: resu => {
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
+ query.select('.swiper-box').boundingClientRect();
|
|
|
+ query.exec(function(res) {
|
|
|
+ _this.maxheight = resu.windowHeight - res[0].top + 'px';
|
|
|
+ console.log('打印页面的剩余高度', _this.maxheight);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: res => {
|
|
|
+ console.log('打印页面的剩余高度', res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ typelist: [{ name: 'USDT市场' }, { name: 'LP市场' }, { name: 'BNB市场' }, { name: 'TP市场' }],
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ maxheight: '',
|
|
|
+ list: [
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'ETH/USDT', price: '0.8431', zd: -1.2 },
|
|
|
+ { jyd: 'EOS/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'DOGE/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BCH/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0', zd: 0 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
|
|
|
+ { jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ onShow() {},
|
|
|
+ methods: {
|
|
|
+ tabClick(opt) {
|
|
|
+ this.tabCurrentIndex = opt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page,
|
|
|
+.content {
|
|
|
+ height: auto;
|
|
|
+ min-height: 100%;
|
|
|
+ background: #f6f6f6;
|
|
|
+}
|
|
|
+.navbar {
|
|
|
+ padding-top: 34rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ height: 100rpx;
|
|
|
+ .navbar-item {
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #777988;
|
|
|
+ margin-left: 115rpx;
|
|
|
+ padding-bottom: 14rpx;
|
|
|
+ line-height: 1;
|
|
|
+ &.current {
|
|
|
+ border-bottom: 3px solid #f7d359;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.list {
|
|
|
+ background: #ffffff;
|
|
|
+ border-top-left-radius: 26rpx;
|
|
|
+ border-top-right-radius: 26rpx;
|
|
|
+ padding: 40rpx 15rpx 0;
|
|
|
+ .list-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #525c6e;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ .title-left {
|
|
|
+ text-align: left;
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+ .title-center {
|
|
|
+ text-align: center;
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+ .title-right {
|
|
|
+ text-align: right;
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-main {
|
|
|
+ padding: 12rpx 0;
|
|
|
+ .main-left {
|
|
|
+ text-align: left;
|
|
|
+ width: 33%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #525c6e;
|
|
|
+ }
|
|
|
+ .main-center {
|
|
|
+ text-align: center;
|
|
|
+ width: 33%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #e15560;
|
|
|
+ &.down {
|
|
|
+ color: #5ec886;
|
|
|
+ }
|
|
|
+ &.ping {
|
|
|
+ color: #525c6e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-right {
|
|
|
+ text-align: right;
|
|
|
+ width: 33%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .btn {
|
|
|
+ width: 122rpx;
|
|
|
+ height: 63rpx;
|
|
|
+ background: #e15562;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 63rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ &.down {
|
|
|
+ background: #5ec886;
|
|
|
+ }
|
|
|
+ &.ping {
|
|
|
+ background: #f6f6f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
