常用tab标签配色

标签样式

.red{
        padding: 3px 6px;
        background: #fccac3;
        font-weight: 400;
        color: #f53137;
        border-radius: 3px;
        }

配色说明

请在本页面最底部查看

组件代码

这里及下面可忽略。

<template>

    <view class="pageBox">

        <view class="box" v-for="item in List" @click="tya(item.url)">
            <view class="title">
                {{item.title}}
            </view>
            <view class="content">
                <span v-if="stat">{{stat}}：{{item.status}}</span>
                <br v-if="stat">
                {{desc}}{{item.desc}}
            </view>
            <view class="bottom">
                <view class="tab" v-show="tab" @click.stop="taburl(item.taburl)">
                    {{item.tab}} 
                </view>
                <view class="tab2" v-show="zw" @click.stop="zwurl(item.zwurl)">
                    {{zw}} 
                </view>
                <view class="num" v-show="lll">
                    {{lll}}:{{item.num}}
                </view>
                <view v-show="xiangqing" class="caoan" @click.stop="caoan(item.path)">
                    {{xiangqing}}
                </view>
            </view>

        </view>

    </view>

</template>

<script>
    export default{
        name:"hklist",
        props: {
            //列表
            List: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            tab: {
                type: Boolean,
                default: false
            },
            //详情文字
            xiangqing: {
                type: String,
                default: ""
            },//状态文字
            stat: {
                type: String,
                default: ""
            },
            zw: {
                type: String,
                default: ""
            },
            //简介文字
            desc: {
                type: String,
                default: ""
            },//浏览文字
            lll: {
                type: String,
                default: ""
            },

        },
        data(){
            return{

            }
        },
        methods:{
            tya(e){
                uni.navigateTo({
                    url:e
                })
            },

            caoan(e){
                uni.navigateTo({
                    url:e
                })
            },
            taburl(e){
                uni.navigateTo({
                    url:e
                })
            },
            zwurl(e){
                if(e){
                    uni.navigateTo({
                        url:e
                    })
                }else{
                    this.$emit("zwchange")
                }
            },
        }
    }
</script>

<style lang="less">
    .pageBox{
        padding:10px;
        .box{
            border-radius: 10px;
            background-color: #fff;
            padding: 10px;
            margin-bottom: 10px;
            box-shadow: 0 0px 6px 0 #dfe3e8;
            .title{
                font-weight: 600;
                margin: 10px 0px;
                font-size: 18px;
            }
            .content{
                color: #686b73;
                font-size: 14px;
            }
            .bottom{
                display: flex;
                font-size: 14px;
                margin: 10px 0px 0px 0px;
                justify-content: space-between;
                .tab{
                    background: #ebf3fe;
                    color: #1492ff;
                    border-radius: 3px;
                    padding: 3px 6px;
                }.tab2{
                    background: #fef5eb;
                    color: #faa851;
                    border-radius: 3px;
                    padding: 3px 6px;
                }
                .num{
                    color: #686b73;
                    padding: 3px 6px;
                }
                .caoan{
                    padding: 3px 6px;
                    background: #fccac3;
                    font-weight: 400;
                    color: #f53137;
                    border-radius: 3px;
                }
            }
        }
    }
</style>

使用方法

引入组件

import hklist from "@/components/list/list.vue"

注册组件

         components:{
             hklist
         },

使用组件

<hklist :List="List1" lll="时间" desc="简介:" :tab="true"></hklist>

组件介绍

List：数据源
tab：蓝色标签（按钮）
xiangqing：详情文字
stat：状态前面的文字
zw ：黄色按钮，不可和lll一起用
desc：简介前面的文字
lll：浏览量前面的文字
@zwchange :自定义方法（黄色按钮）

数据源示例

<hklist  zw="满意度评价" :List="List1" stat="交办状态" desc="提出者:" xiangqing="办复信息" :tab="true"></hklist>

    id:1,
    title:'您好',
    desc:'李跃勇',
    tab:'查看信息',
    status:'交办',
    num:'',
    taburl:'',//标签跳转路径
    url:'',//大盒子跳转路径
    path:'',//红色按钮跳转路径
    zwurl:''//黄色按钮跳转路径

配色说明