<div class="policyorder">
    <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
        <el-tab-pane label="全部" name="first">
            <div class= "Line" style="width: 96%;border-top: 2px solid #eee;"></div>
            <div class= "Line" style="border-top: 2px solid rgba(18, 142, 233, 1);margin-left: 0.5%;width: 3%;"></div>
                    <div class="policycontent">
                <div class="orderlable">
                    <div class="orderdate"><b>{{BeginTime}}</b></div>
                    <div class="ordernu">订单号:&nbsp;&nbsp;{{pid}}</div>
                    <div class="server_status">
                        <img src="/imgs/policy/服务.png" alt="">&nbsp;
                        <b>{{label}}</b>
                    </div>
                    <div class="push">
                        <div class="push_img">
                            <img src="/imgs/policy/推送@2x.png">
                        </div>
                        <div class="Subscribe">政策订阅</div>
                        <div class="period">周期:</div>
                        <div class="year">{{period}}</div>
                        <div class="money">￥<b>{{money}}</b></div>
                        <div class="remaining">剩余<b
                                style="color: rgba(18,142,233,1);font-family: PingFang SC;font-size: 20px;">{{Remain}}</b>天
                        </div>
                    </div>
                </div>
            </div>
        </el-tab-pane>

        <el-tab-pane label="待支付" name="second">
                <div style="width: 96%;border-top: 2px solid #eee;"></div>
                <div class= "Line" style="width: 6%;border-top: 2px solid rgba(18, 142, 233, 1);margin-left: 4.8%;width: 3%;"></div>
                <!-- <div class="policycontent" v-for="(item,key) in recommendationsArr"> -->
                        <div class="policycontent">
                    <div class="orderlable">
                        <div class="orderdate"><b>{{BeginTime}}</b></div>
                        <div class="ordernu">订单号:&nbsp;&nbsp;{{pid}}</div>
                        <div class="server_status">
                            <img src="/imgs/policy/服务.png" alt="">&nbsp;
                            <b>待支付</b>
                        </div>
                        <div class="push">
                            <div class="push_img">
                                <img src="/imgs/policy/推送@2x.png">
                            </div>
                            <div class="Subscribe">政策订阅</div>
                            <div class="period">周期:</div>
                            <div class="year">{{period}}</div>
                            <div class="money">￥<b>{{money}}</b></div>
                            <div class="remaining">剩余<b
                                    style="color: rgba(18,142,233,1);font-family: PingFang SC;font-size: 20px;">{{Remain}}</b>天
                            </div>
                        </div>
                    </div>
                </div>  
        </el-tab-pane>
        <el-tab-pane label="服务中" name="third">
                <div style="width: 96%;border-top: 2px solid #eee;"></div>
                <div class= "Line" style="border-top: 2px solid rgba(18, 142, 233, 1);margin-left:9.7%;width: 3%;"></div>
                <!-- <div class="policycontent" v-for="(item,key) in recommendationsArr"> -->
                        <div class="policycontent">
                    <div class="orderlable">
                        <div class="orderdate"><b>{{BeginTime}}</b></div>
                        <div class="ordernu">订单号:&nbsp;&nbsp;{{pid}}</div>
                        <div class="server_status">
                            <img src="/imgs/policy/服务.png" alt="">&nbsp;
                            <b>服务中</b>
                        </div>
                        <div class="push">
                            <div class="push_img">
                                <img src="/imgs/policy/推送@2x.png">
                            </div>
                            <div class="Subscribe">政策订阅</div>
                            <div class="period">周期:</div>
                            <div class="year">{{period}}</div>
                            <div class="money">￥<b>{{money}}</b></div>
                            <div class="remaining">剩余<b
                                    style="color: rgba(18,142,233,1);font-family: PingFang SC;font-size: 20px;">{{Remain}}</b>天
                            </div>
                        </div>
                    </div>
                </div>    
        </el-tab-pane>
        <el-tab-pane label="已服务" name="fourth">
                <div style="width: 96%;border-top: 2px solid #eee;"></div>
                <div class= "Line" style="border-top: 2px solid rgba(18, 142, 233, 1);margin-left: 14.6%;width: 3%;"></div>
                <!-- <div class="policycontent" v-for="(item,key) in recommendationsArr"> -->
                        <div class="policycontent">
                    <div class="orderlable">
                        <div class="orderdate"><b>{{BeginTime}}</b></div>
                        <div class="ordernu">订单号:&nbsp;&nbsp;{{pid}}</div>
                        <div class="server_status">
                            <img src="/imgs/policy/服务.png" alt="">&nbsp;
                            <b>已服务</b>
                        </div>
                        <div class="push">
                            <div class="push_img">
                                <img src="/imgs/policy/推送@2x.png">
                            </div>
                            <div class="Subscribe">政策订阅</div>
                            <div class="period">周期:</div>
                            <div class="year">{{period}}</div>
                            <div class="money">￥<b>{{money}}</b></div>
                            <div class="remaining">剩余<b
                                    style="color: rgba(18,142,233,1);font-family: PingFang SC;font-size: 20px;">{{Remain}}</b>天
                            </div>
                        </div>
                    </div>
                </div>
    
        </el-tab-pane>
        <el-tab-pane label="已失效" name="fifth">
                <div style="width: 96%;border-top: 2px solid #eee;"></div>
                <div class= "Line" style="border-top: 2px solid rgba(18, 142, 233, 1);margin-left: 19.6%;width: 3%;"></div>
                <!-- <div class="policycontent" v-for="(item,key) in recommendationsArr"> -->
                        <div class="policycontent">
                    <div class="orderlable">
                        <div class="orderdate"><b>{{BeginTime}}</b></div>
                        <div class="ordernu">订单号:&nbsp;&nbsp;{{pid}}</div>
                        <div class="server_status">
                            <img src="/imgs/policy/服务.png" alt="">&nbsp;
                            <b>已失效</b>
                        </div>
                        <div class="push">
                            <div class="push_img">
                                <img src="/imgs/policy/推送@2x.png">
                            </div>
                            <div class="Subscribe">政策订阅</div>
                            <div class="period">周期:</div>
                            <div class="year">{{period}}</div>
                            <div class="money">￥<b>{{money}}</b></div>
                            <div class="remaining">剩余<b
                                    style="color: rgba(18,142,233,1);font-family: PingFang SC;font-size: 20px;">{{Remain}}</b>天
                            </div>
                        </div>
                    </div>
                </div>
        </el-tab-pane>
    </el-tabs>
</div>