<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>
