mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<view class="interact-bar">
|
|
<view v-if="comments" class="interact-bar-item">
|
|
<image class="pto-img" src="../../static/images/icon/bar-comment.png" size="24"></image>
|
|
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.comments}}</text>
|
|
</view>
|
|
<view v-if="answers" class="interact-bar-item">
|
|
<image class="pto-img" src="../../static/images/icon/answers.png" size="24"></image>
|
|
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.answers}}</text>
|
|
</view>
|
|
<view v-if="praises" class="interact-bar-item">
|
|
<image class="pto-img" src="../../static/images/icon/bar-praise.png" size="24"></image>
|
|
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.praises}}</text>
|
|
</view>
|
|
<view v-if="favorites" class="interact-bar-item">
|
|
<image class="pto-img" src="../../static/images/icon/bar-favorite.png" size="24"></image>
|
|
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.favorites}}</text>
|
|
</view>
|
|
<!-- <view v-if="views" class="interact-bar-item">
|
|
<u-icon name="eye" color="#969696" size="18"></u-icon>
|
|
<text style="font-size: 10px;color: #969696;margin-left: 6upx;">888</text>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default () {
|
|
return {
|
|
answers: 23,
|
|
favorites: 23,
|
|
comments: 18,
|
|
shares: 16,
|
|
praises: 68,
|
|
views: 12,
|
|
}
|
|
}
|
|
},
|
|
align: {
|
|
type: String,
|
|
default: 'right'
|
|
},
|
|
answers: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
comments: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
favorites: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
shares: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
praises: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
views: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.interact-bar {
|
|
height: 60rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.interact-bar-item {
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
margin-right: 60upx;
|
|
.pto-img {
|
|
margin-top: 12upx;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5upx;
|
|
// vertical-align: middle;
|
|
}
|
|
.interact-bar-icon {
|
|
margin: 0 0 0 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.noCollect{
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
</style>
|