<template>
    <div id="category">
        <!--头部-->
        <!-- <Header/> -->
        <div class="header-title">
            <span class="header-title-return-back" @click="returnClick"><van-icon name="arrow-left" /></span>
            <span class="header-title-name-bold">年报信息</span>
        </div>

        <div class="manage-body">
            <van-collapse v-model="activeNames">
                <van-collapse-item class="fw-bold" title="" name="1">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>基本信息
                        </div>
                    </template>
                    <van-cell-group>
                        <van-cell title="企业名称" :value="baseInfo.companyName" />
                        <van-cell title="企业联系电话" :value="baseInfo.contactNo" />
                        <van-cell title="邮政编码" :value="baseInfo.postCode" />
                        <van-cell title="企业经营状态" :value="baseInfo.status" />
                        <van-cell title="从业人数" :value="baseInfo.employeeCount" />
                        <van-cell title="电子邮箱" :value="baseInfo.emailAddress" />
                        <van-cell title="是否有投资信息或购买其他公司股权" :value="baseInfo.hasNewStockOrByStock" />
                        <van-cell title="是否有网站或网店" :value="baseInfo.hasWebsite" />
                        <van-cell title="统一社会信用代码" :value="baseInfo.creditCode" />
                        <van-cell title="企业通讯地址" :value="baseInfo.address" />
                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="2">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>股东出资
                        </div>
                    </template>
                    <van-cell-group v-for="(item, index) in czList" :key="index">
                        <van-cell>
                            <div class="">
                                <div class="wt-84-per hg-14-rem"><span
                                        style="padding: 4px;border-radius: 5px;background-color: #2372EB;margin-right: 5px;"><van-icon
                                            size="16px" color="#fff" name="newspaper-o" /></span><span
                                        class="fs-16 fw-bold">{{ item.name }}</span></div>
                            </div>
                        </van-cell>
                        <div class="czListItem">
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldCapi }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">实缴出资额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.realCapi }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴时间</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldDate ? item.shouldDate : '无' }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">实缴时间</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.realDate ? item.realDate : '无' }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资方式</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldType ? item.shouldType : '无' }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">实缴出资方式</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.realType ? item.realType : "无" }}</span>
                                </template>
                            </van-cell>
                        </div>

                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="3" :is-link="dytzList.length > 0 ? true : false">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>对外投资
                        </div>
                    </template>
                    <template #value v-if="dytzList.length == 0">
                        <div class="fw-bold fs-16">暂无内容 </div>
                    </template>
                    <van-cell-group v-for="(item, index) in dytzList" :key="index">
                        <van-cell>
                            <div class="">
                                <div class="wt-84-per hg-14-rem"><span
                                        style="padding: 4px;border-radius: 5px;background-color: #2372EB;margin-right: 5px;"><van-icon
                                            size="16px" color="#fff" name="newspaper-o" /></span><span
                                        class="fs-16 fw-bold">{{ item.name }}</span></div>
                            </div>
                        </van-cell>
                        <div class="czListItem">
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">持股比例</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shareholdingRatio }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldCapi }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资币种</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldCapiUnit ? item.shouldCapiUnit : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资额数值</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldCapiValue ? item.shouldCapiValue : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                        </div>


                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="4" :is-link="wzList.length > 0 ? true : false">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>网站/网店信息
                        </div>
                    </template>
                    <template #value v-if="wzList.length == 0">
                        <div class="fw-bold fs-16">暂无内容 </div>
                    </template>
                    <van-cell-group v-for="(item, index) in wzList" :key="index">
                        <van-cell>
                            <div class="">
                                <div class="wt-84-per hg-14-rem"><span
                                        style="padding: 4px;border-radius: 5px;background-color: #2372EB;margin-right: 5px;"><van-icon
                                            size="16px" color="#fff" name="newspaper-o" /></span><span
                                        class="fs-16 fw-bold">{{ item.name }}</span></div>
                            </div>
                        </van-cell>
                        <div class="czListItem">
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">网址</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.website }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">类型</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.type }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资币种</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldCapiUnit ? item.shouldCapiUnit : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">认缴出资额数值</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.shouldCapiValue ? item.shouldCapiValue : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                        </div>


                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="5">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>企业资产状况信息
                        </div>
                    </template>
                    <van-cell-group>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">资产总额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ zcqkInfo.totalAssets ? zcqkInfo.totalAssets : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">所有者权益合计</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{
                                        zcqkInfo.totalOwnersEquity ? zcqkInfo.totalOwnersEquity : '无' }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">营业总收入</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{
                                        zcqkInfo.grossTradingIncome ? zcqkInfo.grossTradingIncome : '无' }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">主营业务收入</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{
                                        zcqkInfo.mainBusinessIncome ? zcqkInfo.mainBusinessIncome : '无' }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">利润总额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ zcqkInfo.totalProfit ? zcqkInfo.totalProfit : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">净利润</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ zcqkInfo.netProfit ? zcqkInfo.netProfit : '无'
                                    }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">负债总额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{
                                        zcqkInfo.totalLiabilities ? zcqkInfo.totalLiabilities : '无' }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">纳税总额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{
                                        zcqkInfo.totalTaxAmount ? zcqkInfo.totalTaxAmount : '无' }}</span>
                                </template>
                            </van-cell>
                        </div>
                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="6" :is-link="dydbList.length > 0 ? true : false">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>对外提供保证担保信息
                        </div>
                    </template>
                    <template #value v-if="dydbList.length == 0">
                        <div class="fw-bold fs-16">暂无内容 </div>
                    </template>
                    <van-cell-group v-for="(item, index) in dydbList" :key="index">
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">债权人</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.creditor }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray"> 主债权数额</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.creditorAmount }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray"> 债务人</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.debtor }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray"> 主债权种类</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.creditorCategory }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">保证担保的范围</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.assuranceScope }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">履行债务的期限</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.fulfillObligation }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray"> 保证的期间</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.assuranceDurn }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray"> 保证的方式</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.assuranceType }}</span>
                                </template>
                            </van-cell>
                        </div>
                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="7" :is-link="gqbgList.length > 0 ? true : false">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>股权变更信息
                        </div>
                    </template>
                    <template #value v-if="gqbgList.length == 0">
                        <div class="fw-bold fs-16">暂无内容 </div>
                    </template>
                    <van-cell-group v-for="(item, index) in gqbgList" :key="index">
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray">股东</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.name }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray"> 股权变更日期</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.changeDate }}</span>
                                </template>
                            </van-cell>
                        </div>
                        <div class="czListItem">
                            <van-cell style="width: 50%">
                                <template #title>
                                    <span class="custom-title cl-gray"> 变更前股权比例</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.before }}</span>
                                </template>
                            </van-cell>
                            <van-cell style="width: 50%;">
                                <template #title>
                                    <span class="custom-title cl-gray">变更后股权比例</span>
                                </template>
                                <template #label>
                                    <span class="custom-title cl-black">{{ item.after }}</span>
                                </template>
                            </van-cell>
                        </div>
                    </van-cell-group>
                </van-collapse-item>
                <van-collapse-item title="" name="8" style="padding-bottom: 50px;">
                    <template #title>
                        <div class="fw-bold fs-16">
                            <div class="title-icon"></div>社保信息
                        </div>
                    </template>
                    <van-cell-group>
                        <van-cell style="width: 50%;float: left;">
                            <template #title>
                                <span class="custom-title cl-gray">城镇职工基本养老保险</span>
                            </template>
                            <template #label>
                                <span class="custom-title cl-black">{{ shebInfo.ylIns }}人</span>
                            </template>
                        </van-cell>
                        <van-cell style="width: 50%;">
                            <template #title>
                                <span class="custom-title cl-gray">失业保险</span>
                            </template>
                            <template #label>
                                <span class="custom-title cl-black">{{ shebInfo.syeIns }}人</span>
                            </template>
                        </van-cell>
                        <van-cell style="width: 50%;float: left;">
                            <template #title>
                                <span class="custom-title cl-gray">职工基本医疗保险</span>
                            </template>
                            <template #label>
                                <span class="custom-title cl-black">{{ shebInfo.medicalInsurance }}人</span>
                            </template>
                        </van-cell>
                        <van-cell style="width: 50%;">
                            <template #title>
                                <span class="custom-title cl-gray">工伤保险</span>
                            </template>
                            <template #label>
                                <span class="custom-title cl-black">{{ shebInfo.gsIns }}人</span>
                            </template>
                        </van-cell>
                        <van-cell style="width: 50%;float: left;">
                            <template #title>
                                <span class="custom-title cl-gray">生育保险</span>
                            </template>
                            <template #label>
                                <span class="custom-title cl-black">{{ shebInfo.syuIns }}人</span>
                            </template>
                        </van-cell>
                        <van-cell>
                            <div class="">
                                <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">单位缴纳基数</span></div>
                            </div>
                        </van-cell>
                        <van-cell title="单位参加城镇职工基本养老保险缴纳费基数" :label="shebInfo.companyYl" />
                        <van-cell title="单位参加失业保险缴费基数" :label="shebInfo.companySye" />
                        <van-cell title="单位参加职工基本医疗保险缴费基数" :label="shebInfo.companyMedical" />
                        <van-cell title="单位参加工伤保险缴费基数" :label="shebInfo.companyGs" />
                        <van-cell title="单位生育保险缴费基数" :label="shebInfo.companySyu" />
                        <van-cell>
                            <div class="">
                                <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">单位缴纳金额</span></div>
                            </div>
                        </van-cell>
                        <van-cell title="单位参加城镇职工基本养老保险本期实际缴费金额" :label="shebInfo.actYl" />
                        <van-cell title="单位参加失业保险本期实际缴费金额" :label="shebInfo.actSye" />
                        <van-cell title="单位参加职工基本医疗保险本期实际缴费金额" :label="shebInfo.actMedical" />
                        <van-cell title="单位参加工伤保险本期实际缴费金额" :label="shebInfo.actGs" />
                        <van-cell title="单位参加生育保险本期实际缴费金额" :label="shebInfo.actSyu" />
                        <van-cell>
                            <div class="">
                                <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">单位累计欠缴金额</span></div>
                            </div>
                        </van-cell>
                        <van-cell title="单位参加城镇职工基本养老保险累计欠缴金额" :label="shebInfo.oweYl" />
                        <van-cell title="单位参加失业保险累计欠缴金额" :label="shebInfo.oweSye" />
                        <van-cell title="单位参加职工基本医疗保险累计欠缴金额" :label="shebInfo.oweMedical" />
                        <van-cell title="单位参加工伤保险累计欠缴金额" :label="shebInfo.oweGs" />
                        <van-cell title="单位参加生育保险累计欠缴金额" :label="shebInfo.oweSyu" />
                    </van-cell-group>
                </van-collapse-item>
            </van-collapse>
        </div>

    </div>
</template>
  
<script>
// 2. 引入滚动组件
import BScroll from 'better-scroll'
import { Button, Col, Row, Icon, Field, Collapse, CollapseItem } from 'vant';

// 3. 引入接口
import {
    getTAnnualBasicinfo, queryTAnnualPartner, queryTAnnualInvestinfo,
    queryTAnnualWebsite, getTAnnualAssets, queryTAnnualProvideassurance, queryTAnnualStockchange, getTAnnualSocialsecurity
} from "@/service/api/customerDashboard";


export default {
    name: "AnnualReportInfo",
    data() {
        return {
            // 是否显示正在加载
            showLoading: true,
            // 左侧列表数组
            categories: [],
            // 右侧列表数组
            categoriesDetail: [],
            activeNames: ['1'],
            baseId: '',
            baseInfo: {
                companyName: '',
                contactNo: '',
                postCode: '',
                status: '',
                employeeCount: '',
                emailAddress: '',
                hasNewStockOrByStock: '',
                hasWebsite: '',
                creditCode: '',
                address: ''
            },
            czList: [],
            dytzList: [],
            wzList: [],
            zcqkInfo: {
                totalAssets: '',
                totalOwnersEquity: '',
                grossTradingIncome: '',
                mainBusinessIncome: '',
                totalProfit: '',
                netProfit: '',
                totalLiabilities: '',
                totalTaxAmount: '',
            },
            dydbList: [],
            gqbgList: [],
            shebInfo: {
                ylIns: '',
                syeIns: '',
                medicalInsurance: '',
                gsIns: '',
                syuIns: '',
                companyYl: '',
                companySye: '',
                companyMedical: '',
                companyGs: '',
                companySyu: '',
                actYl: '',
                actSye: '',
                actMedical: '',
                actGs: '',
                actSyu: '',
                oweYl: '',
                oweSye: '',
                oweMedical: '',
                oweGs: '',
                oweSyu: ''
            }
        }
    },
    components: {
        VanButton: Button,
        VanRow: Row,
        VanCol: Col,
        VanIcon: Icon,
        VanField: Field,
        VanCollapse: Collapse,
        VanCollapseItem: CollapseItem,
    },
    computed: {
        // ...mapState(["shopCart", "userInfo"])
    },
    created() {
        // this.initData();
        this.baseId = this.$route.query.id
        this.initGetTAnnualBasicinfo()
        this.initTAnnualPartner()
        this.initTAnnualInvestinfo()
        this.initTAnnualWebsite()
        this.initTAnnualAssets()
        this.initTAnnualProvideassurance()
        this.initTAnnualStockchange()
        this.initTAnnualSocialsecurity()
    },
    methods: {
        async initGetTAnnualBasicinfo() {
            let result = await getTAnnualBasicinfo({ id: this.baseId });
            this.baseInfo = result
        },
        async initTAnnualPartner() {
            let result = await queryTAnnualPartner({ annualReportId: this.baseId, });
            this.czList = result.records

        },
        async initTAnnualInvestinfo() {
            let result = await queryTAnnualInvestinfo({ annualReportId: this.baseId });
            this.dytzList = result.records

        },
        async initTAnnualWebsite() {
            let result = await queryTAnnualWebsite({ annualReportId: this.baseId });
            this.wzList = result.records

        },
        async initTAnnualAssets() {
            let result = await getTAnnualAssets({ id: this.baseId });
            this.zcqkInfo = result ? result : ''

        },
        async initTAnnualProvideassurance() {
            let result = await queryTAnnualProvideassurance({ id: this.baseId, });
            this.dydbList = result.records

        },
        async initTAnnualStockchange() {
            let result = await queryTAnnualStockchange({ id: this.baseId, });
            this.gqbgList = result.records

        },
        async initTAnnualSocialsecurity() {
            let result = await getTAnnualSocialsecurity({ id: this.baseId, });
            this.shebInfo = result

        },
        returnClick() {
            this.$router.go(-1)
        },

    },
}
</script>
  
<style lang="less" scoped>
.header-title {
    height: 46px;
    width: 100%;
    background-color: #fff;
    text-align: center;
}

.header-title-name {
    font-weight: bold;
    line-height: 46px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

.header-title-return {
    position: absolute;
    top: 13px;
    left: 20px;
    font-size: 15px;
}

.manage-body {
    margin-top: 10px;
    background-color: #fff;
    padding: 0px 10px 0px 10px;
}

/deep/ .van-collapse-item__content {
    padding: 0;
    font-weight: bold;
}

.icon-mg {
    margin-left: 3px;
}

.firm-icon-body {
    background-color: #2372EB;
    border-radius: 5px;
}

.firm-icon {
    line-height: 2.5rem;
    margin-left: 0.5rem;
}

.title-icon {
    float: left;
    margin-top: 2px;
    height: 20px;
    width: 4px;
    background-color: #2372EB;
    margin-right: 5px;
}

.czListItem {
    display: flex;
    justify-content: space-between;
}</style>../../service/api/index