109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="tabs">
|
|
<u-tabs
|
|
:list="list1"
|
|
@click="click"
|
|
lineColor="#34CE98"
|
|
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
|
|
/>
|
|
</view>
|
|
<view class="topic">
|
|
<oct-topic
|
|
:lists="topicArr"
|
|
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list1: [{
|
|
name: '慢病护理',
|
|
}, {
|
|
name: '减肥塑性',
|
|
}, {
|
|
name: '心理健康'
|
|
}, {
|
|
name: '女性健康'
|
|
}, {
|
|
name: '健康养生'
|
|
}, {
|
|
name: '其他'
|
|
}],
|
|
topicArr: [{
|
|
id: 1,
|
|
title: '坚持做瑜伽可以减肥吗',
|
|
read: '100',
|
|
praise: '100',
|
|
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg'
|
|
},{
|
|
id: 2,
|
|
title: '有没有减肥秘诀/减肥偏方/减肥窍门',
|
|
read: '100',
|
|
praise: '100',
|
|
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg'
|
|
},{
|
|
id: 3,
|
|
title: '只需2招迅速变出小蛮腰',
|
|
read: '100',
|
|
praise: '100',
|
|
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg'
|
|
},{
|
|
id: 3,
|
|
title: '有效方便的减肥方法有哪些',
|
|
read: '100',
|
|
praise: '100',
|
|
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg'
|
|
}]
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.new-item {
|
|
position: relative;
|
|
margin-top: $margin - 10;
|
|
background: #f5fdfa;
|
|
border-radius: $radius;
|
|
padding: $padding ($padding * 2 + 200rpx) $padding $padding;
|
|
.new-cover {
|
|
position: absolute;
|
|
right: $padding;
|
|
top: $padding;
|
|
width: 200rpx;
|
|
height: 150rpx;
|
|
border-radius: $radius;
|
|
}
|
|
.new-title {
|
|
font-size: $title-size;
|
|
line-height: 45rpx;
|
|
min-height: 100rpx;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
color: $text-color;
|
|
}
|
|
.new-tool {
|
|
color: $text-gray;
|
|
font-size: $title-size-sm;
|
|
line-height: 40rpx;
|
|
text {
|
|
margin-right: $margin/2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic {
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|