130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="tabs">
|
||
<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
|
||
<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
|
||
价格
|
||
<image
|
||
class="icon"
|
||
mode="widthFix" :src="require(marketType == 'low' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="lists">
|
||
<view class="item" v-for="(item, index) in 10" :key="index">
|
||
<image class="cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
||
<view class="content">
|
||
<view class="title nowrap">易品新境权证<text>*1</text></view>
|
||
<view class="text nowrap">谷风一木3层软抽面巾纸</view>
|
||
<view class="text nowrap">转让方：温文尔雅的小阿玉</view>
|
||
<view class="text nowrap">Hash：djsakljkljfl3213dsaHKLDJS82231csa</view>
|
||
</view>
|
||
<view class="price">￥21000.00/个</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabIndex : 0,
|
||
marketType : 'low',
|
||
marketArray : []
|
||
};
|
||
},
|
||
methods:{
|
||
onTabs(e){
|
||
let index = e.target.dataset.index
|
||
if(index == 0 && index == this.tabIndex) return
|
||
if(index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'low' ? 'high': 'low'
|
||
this.tabIndex = index
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabs{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: white;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
.tabs-item{
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
.icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
vertical-align: middle;
|
||
margin-left: $margin / 3;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
&.show{
|
||
color: $text-price;
|
||
}
|
||
}
|
||
}
|
||
// 列表
|
||
.lists{
|
||
padding: 70rpx $padding $padding;
|
||
.item{
|
||
min-height: 168rpx;
|
||
position: relative;
|
||
background: white;
|
||
border-radius: $radius/2;
|
||
margin-top: $margin;
|
||
padding: $padding;
|
||
.cover{
|
||
position: absolute;
|
||
left: $padding;
|
||
top: $padding;
|
||
width: 168rpx;
|
||
height: 168rpx;
|
||
}
|
||
.content{
|
||
padding-left: calc(168rpx + #{$padding});
|
||
.title{
|
||
position: relative;
|
||
font-size: $title-size-lg;
|
||
color: $text-color;
|
||
font-weight: bold;
|
||
line-height: 52rpx;
|
||
padding-right: 60rpx;
|
||
text{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 60rpx;
|
||
text-align: right;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.text{
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.price{
|
||
margin-top: $margin - 10;
|
||
padding-top: $padding - 10;
|
||
font-size: $title-size-m;
|
||
text-align: right;
|
||
border-top: solid 1rpx $border-color;
|
||
font-weight: bold;
|
||
color: $text-price;
|
||
}
|
||
}
|
||
}
|
||
</style>
|