<template>
    <div class="pages">
        <div class="left">
            <img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="" @click="navToLogin">
            <div style="margin-left: 20px;">
                <div v-for="(item, index) in historyList" @click="selectTimeBox(item)" :class="{ timeBox: item.id != isSelected, timeBox2: item.id == isSelected}">
                    {{ item.created_at.slice(0,10) + ' ' + item.created_at.slice(11,16) }}
                    <img v-if="item.id == isSelected" class="delete-icon" src="@/assets/images/delete.png" alt="" @click.stop="deleteValuations(item)">
                </div>
            </div>
            
        </div>
        <div v-if="status=='create'" class="right">
            <StepProgressBar style="width: 800px; margin: auto; margin-top: 40px;" :steps="steps" :currentStep="currentStep" />
            <div class="line"></div>
            <div class="form-title-box">
                <div class="title-left"></div>
                <div v-if="currentStep==0" class="title-form">基础信息</div>
                <div v-if="currentStep==1" class="title-form">财务状况</div>
                <div v-if="currentStep==2" class="title-form">非遗等级与技术</div>
                <div v-if="currentStep==3" class="title-form">非遗应用与推广</div>
                <div v-if="currentStep==4" class="title-form">非遗资产衍生商品信息</div>
            </div>
            <NForm
                style="margin:auto; margin-top:30px; width:900px; height: calc(100vh - 500px); overflow-y: auto;"
                ref="modalFormRef"
                label-placement="top"
                label-align="top"
                :label-width="80"
                :model="modalForm"
                :rules="modalRules"
                require-mark-placement = "left"
            >   
                <n-grid v-if="currentStep == 0" :cols="24" :x-gap="24">
                    <n-form-item-gi :span="24" class="form-item" label="资产名称" path="asset_name">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>资产名称</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请填写非遗资产名称，如“蜀绣”
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.asset_name" placeholder="请输入资产名称" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="10" class="form-item" label="所属机构" path="institution">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>所属机构</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请填写评估机构全称,如“XXX有限公司”
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.institution" placeholder="请输入所属机构" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="所属行业" path="industry">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>所属行业</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请根据国民经济行业分类进行选择
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select
                            v-model:value="modalForm.industry"
                            placeholder="请选择所属行业"
                            :options="industryOptions"
                            filterable
                        />
                    </n-form-item-gi>
                </n-grid>
                <n-grid v-if="currentStep == 1" :cols="24" :x-gap="0">
                    <n-form-item-gi :span="10" class="form-item" label="近12个月机构营收/万元" path="annual_revenue">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>近12个月机构营收/万元</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    近12个月的营收额,便于体现在技术研发上的投入比例
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.annual_revenue" placeholder="请输入近12个月机构营收" type="number" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="近12个月机构研发投入/万元" path="rd_investment">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>近12个月机构研发投入/万元</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    近12个月的研发投入费用，便于体现在技术研发上的投入比例
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.rd_investment" placeholder="请输入近12个月机构研发投入"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" label="近三年机构收益/万元" path="three_year_income" style="margin-left: 20px;">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>近三年机构收益/万元</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    填写近3年资产相关的年收益,用以判断资产的商业价值
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.three_year_income[0]" placeholder="第一年" style="width: 220px;"  type="number"/>
                        <NInput v-model:value="modalForm.three_year_income[1]" placeholder="第二年" style="width: 220px; margin-left: 10px;"  type="number"/>
                        <NInput v-model:value="modalForm.three_year_income[2]" placeholder="第三年" style="width: 220px; margin-left: 10px;"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="资产受资助情况" path="funding_status">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>资产受资助情况</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    根据与资产相关项目的受资助情况选择
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select
                            v-model:value="modalForm.funding_status"
                            placeholder="请选择资产受资助情况"
                            :options="fundingOptions"
                        />
                    </n-form-item-gi>
                </n-grid>
                <n-grid v-if="currentStep == 2" :cols="24" :x-gap="0">
                    <n-form-item-gi :span="24" class="form-item" label="非遗传承人等级" path="inheritor_level">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗传承人等级</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    选择该非遗项目所对应的最高传承人等级，并上传相关证书或者证明材料以佐证
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select v-model:value="modalForm.inheritor_level" placeholder="非遗传承人等级" :options="fundingOptions2"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" label="非遗传承人年龄水平及数量" path="inheritor_age_count" style="margin-left: 20px;">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗传承人年龄水平及数量</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请填写该资产的所有受认证传承人年龄段的人数
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.inheritor_age_count[0]" placeholder="请输入≤50岁传承人数量" style="width: 220px;"  type="number"/>
                        <NInput v-model:value="modalForm.inheritor_age_count[1]" placeholder="请输入50-70岁传承人数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                        <NInput v-model:value="modalForm.inheritor_age_count[2]" placeholder="请输入≥70岁传承人数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" class="form-item" label="非遗传承人等级证书" path="inheritor_certificates">
                        <n-upload
                            :action="actionUrl"
                            :default-file-list="modalForm.inheritor_certificates"
                            list-type="image-card"
                            @finish="handleFinish3"
                            @remove="delete3"
                        >   
                            <div>
                                <img style="width: 24px; height: 24px;" src="@/assets/images/upload.png" alt="">
                                <p style="font-size: 12px;">添加图片</p>
                            </div>
                        </n-upload>
                    </n-form-item-gi>
                    <n-form-item-gi :span="10" class="form-item" label="非遗等级" path="heritage_level">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗等级</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请选择该非遗资产的认证等级（如国家级非遗）
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select v-model:value="modalForm.heritage_level" placeholder="非遗等级" :options="heritageOptions" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="非遗资产所用专利的申请号" path="patent_application_no">
                        <NInput v-model:value="modalForm.patent_application_no" placeholder="非遗资产所用专利的申请号" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="20" label="非遗资产历史证明证据及数量" path="historical_evidence" style="margin-left: 20px; width: 800px;">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗资产历史证明证据及数量</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    为考究非遗资产的传承历史，需填写资产所相关的历史证明材料相关信息，请填写不同证据类型的证据数量，例如某纹样有1件唐代实物+3篇研究论文证明其历史传承
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.historical_evidence[0]" placeholder="请输入出土实物样本数量" style="width: 220px;"  type="number"/>
                        <NInput v-model:value="modalForm.historical_evidence[1]" placeholder="请输入古代文献样本数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                        <NInput v-model:value="modalForm.historical_evidence[2]" placeholder="请输入传承人佐证样本数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                        <NInput v-model:value="modalForm.historical_evidence[3]" placeholder="请输入现代研究样本数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" class="form-item" label="非遗资产所用专利的证书" path="patent_certificates">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗资产所用专利的证书</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    上传资产所涉及的专利截图，佐证技术强度
                                </n-tooltip>
                            </div>
                        </template>
                        <n-upload
                            :action="actionUrl"
                            :default-file-list="modalForm.patent_certificates"
                            @finish="handleFinish1"
                            @remove="delete1"
                            list-type="image-card"
                        >   
                            <div>
                                <img style="width: 24px; height: 24px;" src="@/assets/images/upload.png" alt="">
                                <p style="font-size: 12px;">添加图片</p>
                            </div>
                        </n-upload>
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" class="form-item" label="非遗纹样图片" path="pattern_images">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗纹样图片</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    上传资产所涉及的纹样清晰图片，便于判断纹样的精细与美观度
                                </n-tooltip>
                            </div>
                        </template>
                        <n-upload
                            :action="actionUrl"
                            :default-file-list="modalForm.pattern_images"
                            @finish="handleFinish2"
                             @remove="delete2"
                            list-type="image-card"
                        >   
                            <div>
                                <img style="width: 24px; height: 24px;" src="@/assets/images/upload.png" alt="">
                                <p style="font-size: 12px;">添加图片</p>
                            </div>
                        </n-upload>
                    </n-form-item-gi>
                </n-grid>
                <n-grid v-if="currentStep == 3" :cols="24" :x-gap="0">
                    <n-form-item-gi :span="24" class="form-item" label="非遗资产应用成熟度" path="application_maturity">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗资产应用成熟度</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    根据目前资产的实际情况选择当前资产的应用成熟程度
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select
                            v-model:value="modalForm.application_maturity"
                            placeholder="请选择"
                            :options="maturityOptions"
                        />
                    </n-form-item-gi>
                    <n-form-item-gi :span="9" class="form-item" label="非遗资产应用覆盖范围" path="application_coverage">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗资产应用覆盖范围</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    资产目前普及的区域范围
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select
                            v-model:value="modalForm.application_coverage"
                            placeholder="请选择"
                            :options="coverageOptions"
                        />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="非遗资产跨界合作深度" path="cooperation_depth">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>非遗资产跨界合作深度</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    根据资产目前跨界合作项目的情况选择，选项自上而下深度逐渐升高，1.品牌联名（如苗绣与LV手袋合作）2.科技载体（如云锦纹样应用于OLED屏幕）3.国家外交礼品（如景泰蓝作为国礼赠联合国）
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select
                            v-model:value="modalForm.cooperation_depth"
                            placeholder="请选择"
                            :options="depthOptions"
                        />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="近12个月线下相关宣讲活动次数" path="offline_activities">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>近12个月线下相关宣讲活动次数</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    统计以往所进行过的与资产相关的线下传习活动，填写线下传习活动次数
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.offline_activities" placeholder="近12个月线下相关宣讲活动次数"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="22" style="margin-left: 20px;" label="线上相关宣传账号信息" path="online_accounts">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>线上相关宣传账号信息</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    与资产相关的宣传、销售的平台与账户信息

                                </n-tooltip>
                            </div>
                        </template>
                        <n-select
                            style="width: 330px;"
                            v-model:value="modalForm.online_accounts[0]"
                            placeholder="请选择"
                            :options="accountsOptions"
                        />
                        <NInput v-model:value="modalForm.online_accounts[1]" placeholder="请输入账号" style="width: 220px; margin-left: 10px;" />
                        <NInput v-model:value="modalForm.online_accounts[2]" placeholder="请输入点赞数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                        <NInput v-model:value="modalForm.online_accounts[3]" placeholder="请输入评论数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                        <NInput v-model:value="modalForm.online_accounts[4]" placeholder="请输入分享数量" style="width: 220px; margin-left: 10px;"  type="number"/>
                    </n-form-item-gi>
                </n-grid>
                <n-grid v-if="currentStep == 4" :cols="24" :x-gap="0">
                    <n-form-item-gi :span="10" class="form-item" label="该商品近12个月销售量" path="sales_volume">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>该商品近12个月销售量</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    非遗资产代表产品近12个月的总销售数量
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.sales_volume" placeholder="请输入"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="该商品近12个月的链接浏览量" path="link_views">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>该商品近12个月的链接浏览量</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    非遗资产代表产品近12个月的商品链接浏览量
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.link_views" placeholder="请输入"  type="number"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="10" class="form-item" label="该商品的发行量" path="circulation">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>该商品的发行量</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请选择该资产的发行量（单位：份），以便确认该资产的稀缺性
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select v-model:value="modalForm.circulation" placeholder="请选择" :options="circulationOptions"  :consistent-menu-width="false"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" class="form-item" label="该商品最近一次市场活动时间" path="last_market_activity">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>该商品最近一次市场活动时间</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    与资产相关的商品最近一次市场活动（交易、报价、评估）的相距时间
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select v-model:value="modalForm.last_market_activity" placeholder="请选择" :options="activityOptions"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="10" class="form-item" label="月交易额" path="monthly_transaction">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>月交易额</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请选择该资产所衍生商品的月交易额水平
                                </n-tooltip>
                            </div>
                        </template>
                        <n-select v-model:value="modalForm.monthly_transaction" placeholder="请选择" :options="transactionOptions"/>
                    </n-form-item-gi>
                    <n-form-item-gi :span="6" class="form-item" label="该商品近30天价格波动区间" path="price_fluctuation">
                        <template #label>
                            <div class="flex items-center gap-4">
                                <span>该商品近30天价格波动区间</span>
                                <n-tooltip placement="top-start" trigger="hover">
                                    <template #trigger>
                                        <img style="width: 14px; height: 14px;" src="@/assets/images/ps.png" alt="">
                                    </template>
                                    请输入与资产相关的最具代表性商品近30天的最高价与最低价
                                </n-tooltip>
                            </div>
                        </template>
                        <NInput v-model:value="modalForm.price_fluctuation[0]" placeholder="最低价" style="width: 220px;" />
                        <span style="display: inline-block; margin: 0 8px;">-</span>
                        <NInput v-model:value="modalForm.price_fluctuation[1]" placeholder="最高价" style="width: 220px;"/>
                    </n-form-item-gi>
                </n-grid>
            </NForm>
            <div class="submit-box">
                <div v-if="currentStep != 0" class="submit-btn2" style="cursor: pointer;" @click="previousStep" >
                    上一步
                </div>
                <div v-if="currentStep != 4" class="submit-btn">
                    <n-spin style="cursor: pointer;" :show="loading" @click="nextStep">
                        下一步 
                    </n-spin>
                </div>
                <div v-if="currentStep == 4" class="submit-btn">
                    <n-spin :show="loading" @click="nextStep" style="cursor: pointer;">
                        立即评估
                    </n-spin>
                </div>
            </div>
            
        </div>
        <div v-if="status=='success'" class="right" >
            <div class="price-container" :style="{ backgroundImage: `url(${backgroundImg})`}">
                <div>
                   ¥{{ parseInt(selectedObj?.calculation_result?.final_value_ab) }}
                </div>
                <div style="font-size: 20px; color: #303133; line-height: 20px;">
                    最终评估结果
                </div>
                <div style="display: flex; justify-content: center; margin-top: 10px;">
                    <div style="border-radius: 4px; width: 125px; height: 28px; font-size: 14px; color: #303133; font-weight: normal; background: #A3011332; line-height: 28px;">评估可信度=95%</div>
                    <div style="border-radius: 4px; width: 125px; height: 28px; font-size: 14px; color: #303133; font-weight: normal; background: #A3011332; margin-left: 10px; line-height: 28px;">动态质押率=50%</div>
                </div>
            </div>
            <div style="display: flex; margin: auto; margin-top: 24px; width: 1010px;">
                <div 
                    class="score-box" 
                    style="background: linear-gradient( 90deg, #3196FF 0%, #165DFF 100%); color: #303133; font-size: 14px; " 
                    :style="{ backgroundImage: `url(${backgroundImg3})`, backgroundSize: 'contain'}"
                >
                    <div style="font-size: 18px; font-weight: bold;">
                        <img style="width: 18px; height: 18px; transform: translate(-2px,2px);" src="@/assets/images/cost.png" alt="">
                        经济价值评估
                    </div>
                    <div 
                        ref="economy"
                        style="text-align: center; font-size: 30px; font-weight: bold; margin-top: 10px; height: 95px;"  
                        :style="{backgroundImage:`url(${backgroundImg4})`,backgroundSize: '167px 95px',backgroundPosition: 'center 2px',backgroundRepeat:'no-repeat'}"
                    ></div>
                    <div style="margin-top: 20px;">基础价值评估：<span style="font-weight: bold;">优秀</span></div>
                    <div>流量因子评估：<span style="font-weight: bold;">良好</span></div>
                    <div>政策系数评估：<span style="font-weight: bold; color: #165DFF; ">极强</span></div>
                </div>
                <div class="score-box" style="background: #FFDE1144; color: #303133; font-size: 14px;" :style="{ backgroundImage: `url(${backgroundImg2})`}">
                    <div style="font-size: 18px; font-weight: bold;">
                        <img style="width: 18px; height: 18px; transform: translate(0,2px);" src="@/assets/images/cost2.png" alt="">
                        文化价值评估
                    </div>
                    <div 
                        ref="culture"
                        style="text-align: center; font-size: 30px; font-weight: bold; margin-top: 10px; height: 95px;"  
                        :style="{backgroundImage:`url(${backgroundImg5})`,backgroundSize: '167px 95px',backgroundPosition: 'center 2px',backgroundRepeat:'no-repeat'}"
                    ></div>
                    <div style="margin-top: 20px;">活态传承系数评估：<span style="font-weight: bold;">优秀</span></div>
                    <div>纹样基因熵值评估：<span style="font-weight: bold;">优秀</span></div>
                </div>
                <div class="score-box" style="background: #5BD77944; color: #303133; font-size: 14px;" :style="{ backgroundImage: `url(${backgroundImg1})`}">
                    <div style="font-size: 18px; font-weight: bold;">
                        <img style="width: 18px; height: 18px; transform: translate(0,2px);" src="@/assets/images/cost1.png" alt="">
                        文化价值风险控制
                    </div>
                    <div 
                        ref="risk"
                        style="text-align: center; font-size: 30px; font-weight: bold; margin-top: 10px; height: 95px;"  
                        :style="{backgroundImage:`url(${backgroundImg6})`,backgroundSize: '167px 95px',backgroundPosition: 'center 2px',backgroundRepeat:'no-repeat'}"
                    ></div>
                    <div style="text-align: center; color: #909399">综合评估</div>
                    <div style="margin-top: 20px;">风险调整系数：<span style="font-weight: bold; color: #2EAE44; ">低</span></div>
                </div>
            </div>
            <div class="retry" @click="retry" style="background: #F8F8F8; color: #303133; line-height: 40px;">
                <img style="width: 16px; height: 16px; transform: translate(0,2px); margin-right: 6px;" src="@/assets/images/retry.png" alt="">
                重新评估
            </div>
        </div>
        <div v-if="status=='fail'" class="right" style="text-align: center;">
            <img style="width: 100px; height: 100px; margin-top: 30vh;" src="@/assets/images/fail.png" alt="">
            <div style="font-size: 20px;">评估失败</div>
            <div style="font-size: 14px; color: #999999; margin-top: 10px;">很抱歉，您的知识产权和非物质文化遗产的价值评估失败，请重新评估</div>
            <div class="retry" @click="retry"> 
                <img style="width: 16px; height: 16px; transform: translate(0,2px); margin-right: 6px;" src="@/assets/images/retry.png" alt="">
                重新评估
            </div>
        </div>
        <div v-if="status=='pending'" class="right"  style="text-align: center;">
            <img style="width: 100px; height: 100px; margin-top: 30vh;" src="@/assets/images/loading.png" alt="">
            <div style="font-size: 20px;">评估中…</div>
            <div style="font-size: 14px; color: #999999; margin-top: 10px;">您的知识产权和非物质文化遗产的价值正在评估中，请耐心等候</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
import StepProgressBar from './components/StepProgressBar.vue';
import api from '@/api'
import { ref, reactive, onMounted } from 'vue'
import { useMessage, useDialog } from 'naive-ui'
import backgroundImg from '@/assets/images/background.png';
import backgroundImg1 from '@/assets/images/bgc.png';
import backgroundImg2 from '@/assets/images/bgy.png';
import backgroundImg3 from '@/assets/images/bgg.png';
import backgroundImg4 from '@/assets/images/circleg.png';
import backgroundImg5 from '@/assets/images/circley.png';
import backgroundImg6 from '@/assets/images/circlec.png';
const status = ref('create')
const message = useMessage()
const modalFormRef = ref<FormInst | null>(null)
const isSelected = ref<Number | null>(null)
const steps = [
  { title: '基础信息' },
  { title: '财务状况' },
  { title: '非遗等级与技术' },
  { title: '非遗应用与推广' },
  { title: '非遗资产衍生商品信息' }
];
const loading = ref(false)
const actionUrl = 'https://value.cdcee.net/api/v1/upload/image'
const currentStep = ref(0)
const historyList = ref([])
const modalForm = reactive({
    asset_name: '',
    institution: '',
    industry: null,
    annual_revenue: '',
    rd_investment: '',
    three_year_income: [],
    funding_status: null,
    sales_volume:'',
    link_views:'',
    circulation: null,
    last_market_activity: null,
    monthly_transaction: null,
    price_fluctuation: [],
    application_maturity: null,
    application_coverage: null,
    cooperation_depth: null,
    offline_activities: '',
    online_accounts: [],
    inheritor_level: null,
    inheritor_age_count: [],
    inheritor_certificates: [],
    heritage_level: null,
    historical_evidence:[],
    patent_certificates: [],
    pattern_images: [],
    patent_application_no: '',
})
const modalRules = {
    asset_name: [
        {
            required: true,
            message: '请输入资产名称',
            trigger: ['input', 'blur'],
        },
    ],
    institution: [
        {
            required: true,
            message: '请输入所属机构',
            trigger: ['input', 'blur'],
        },
    ],
    industry: [
        {
            required: true,
            message: '请选择所属行业',
            trigger: ['input', 'blur'],
        },
    ],
    annual_revenue: [
        {
            required: true,
            message: '请输入近12个月机构营收',
            trigger: ['input', 'blur'],
        },
    ],
    rd_investment: [
        {
            required: true,
            message: '请输入近12个月机构研发投入',
            trigger: ['input', 'blur'],
        },
    ],
    three_year_income: [
        {
            type: 'array',
            required: true,
            message: '',
            trigger: ['input', 'blur'],
            len: 3,
            fields: [
                {
                    required: true,
                    message: '请输入第一年机构收益',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入第二年机构收益',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入第三年机构收益',
                    trigger: ['input', 'blur']
                }
            ]
        }
    ],
    historical_evidence: [
        {
            type: 'array',
            required: true,
            message: '',
            trigger: ['input', 'blur'],
            len: 4,
            fields: [
                {
                    required: true,
                    message: '请输入出土实物样本数量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入古代文献样本数量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入传承人佐证样本数量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入现代研究样本数量',
                    trigger: ['input', 'blur']
                }
            ]
        }
    ],
    funding_status: [
        {
            required: true,
            message: '请选择资产受资助情况',
            trigger: ['input', 'blur'],
        },
    ],
    inheritor_level : [
        {
            required: true,
            message: '请选择非遗传承人等级',
            trigger: ['input', 'blur'],
        },
    ],
    inheritor_age_count: [
        {
            type: 'array',
            required: true,
            message: '',
            trigger: ['input', 'blur'],
            len: 3,
            fields: [
                {
                    required: true,
                    message: '请输入≤50岁传承人数量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入50-70岁传承人数量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入≥70岁传承人数量',
                    trigger: ['input', 'blur']
                }
            ]
        }
    ],
    heritage_level: [
        {
            required: true,
            message: '请选择非遗等级',
            trigger: ['input', 'blur'],
        },
    ],
    application_maturity:[
        {
            required: true,
            message: '请选择非遗资产应用成熟度',
            trigger: ['input', 'blur'],
        },
    ],
    application_coverage:[
        {
            required: true,
            message: '请选择非遗资产应用覆盖范围',
            trigger: ['input', 'blur'],
        },
    ],
    cooperation_depth: [
        {
            required: true,
            message: '请选择非遗资产跨界合作深度',
            trigger: ['input', 'blur'],
        },
    ],
    offline_activities: [
        {
            required: true,
            message: '请输入近12个月线下相关宣讲活动次数',
            trigger: ['input', 'blur'],
        },
    ],
    online_accounts: [
        {
            type: 'array',
            required: true,
            message: '',
            trigger: ['input', 'blur'],
            len: 5,
            fields: [
                {
                    required: true,
                    message: '请选择线上相关宣传账号信息',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入账号',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入账号点赞量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入账号评论量',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入账号分享量',
                    trigger: ['input', 'blur']
                }
            ]
        }
    ],
    sales_volume: [
        {
            required: true,
            message: '请输入该商品近12个月销售量',
            trigger: ['input', 'blur'],
        },
    ],
    link_views: [
        {
            required: true,
            message: '请输入该商品近12个月的链接浏览量',
            trigger: ['input', 'blur'],
        },
    ],
    circulation: [
        {
            required: true,
            message: '请选择该商品的发行量',
            trigger: ['input', 'blur'],
        },
    ],
    last_market_activity: [
        {
            required: true,
            message: '请选择该商品最近一次市场活动时间',
            trigger: ['input', 'blur'],
        },
    ],
    monthly_transaction: [
        {
            required: true,
            message: '请选择月交易额',
            trigger: ['input', 'blur'],
        },
    ],
    price_fluctuation: [
        {
            type: 'array',
            required: true,
            message: '',
            trigger: ['input', 'blur'],
            len: 2,
            fields: [
                {
                    required: true,
                    message: '请输入最高价',
                    trigger: ['input', 'blur']
                },{
                    required: true,
                    message: '请输入最低价',
                    trigger: ['input', 'blur']
                }
            ]
        }
    ]
}
const industryOptions = ref([])
const fundingOptions = [
    {
        label:'国家级资助',
        value: '0',
    },{
        label:'省级资助',
        value: '1',
    },{
        label:'无资助',
        value: '2',
    },
]
const fundingOptions2 = [
    {
        label:'国家级传承人',
        value: '0',
    },{
        label:'省级传承人',
        value: '1',
    },{
        label:'市级传承人',
        value: '2',
    },
]
const circulationOptions = [
    {
        label:'孤品：全球唯一，不可复制（如特定版权、唯一实物）',
        value: '孤品：全球唯一，不可复制（如特定版权、唯一实物）',
    },{
        label:'限量：总发行份数 ≤100份',
        value: '限量：总发行份数 ≤100份',
    },{
        label:'稀有：总发行份数∈[100, 1000]份，或二级市场流通率 < 5%',
        value: '稀有：总发行份数∈[100, 1000]份，或二级市场流通率 < 5%',
    },{
        label:'流通：总发行份数 >1000份，或二级市场流通率 ≥ 5%',
        value: '流通：总发行份数 >1000份，或二级市场流通率 ≥ 5%',
    },
]
const activityOptions = [
    {
        label:'近一周',
        value: '0',
    },{
        label:'近一月',
        value: '1',
    },{
        label:'近一年',
        value: '2',
    },{
        label:'其他',
        value: '3',
    },
]
const transactionOptions = [
    {
        label:'月交易额<100万元',
        value: '0',
    },{
        label:'月交易额＞100万＜500万',
        value: '1',
    },{
        label:'月交易额≥500万',
        value: '2',
    }
]
const maturityOptions = [
    {
        label:'成熟应用',
        value: '0',
    },{
        label:'推广阶段',
        value: '1',
    },{
        label:'试点阶段',
        value: '2',
    }
]
const depthOptions = [
    {
        label:'无',
        value: '0',
    },{
        label:'品牌联名',
        value: '1',
    },{
        label:'科技载体',
        value: '2',
    },{
        label:'国家外交礼品',
        value: '3',
    },
]
const coverageOptions = [
    {
        label:'全球覆盖',
        value: '0',
    },{
        label:'全国覆盖',
        value: '1',
    },{
        label:'区域覆盖',
        value: '2',
    }
]
const accountsOptions = [
    {
        label:'b站',
        value: '0',
    },{
        label:'抖音',
        value: '1',
    },{
        label:'快手',
        value: '2',
    },{
        label:'其他',
        value: '3',
    }
]
const heritageOptions = [
    {
        label:'国家级非遗',
        value: '0',
    },{
        label:'省级非遗',
        value: '1',
    },{
        label:'纳入《国家文化数字化战略清单》',
        value: '2',
    },{
        label:'无',
        value: '3',
    }
]

const handleFinish1 = (file) =>{
    let url = JSON.parse(file.event.target.response)
    modalForm.patent_certificates.push({url: url.url, id: file.file.batchId})
}
const handleFinish2 = (file) =>{
    let url = JSON.parse(file.event.target.response)
    modalForm.pattern_images.push({url: url.url, id: file.file.batchId})
}
const handleFinish3 = (file) =>{
    console.log(file)
    let url = JSON.parse(file.event.target.response)
    modalForm.inheritor_certificates.push({url: url.url, id: file.file.batchId})
}
const delete1 = (file) => {
    const index = modalForm.patent_certificates.findIndex(item => item.id === file.file.batchId);
    if (index !== -1) {
        modalForm.patent_certificates.splice(index, 1);
    }
}
const delete2 = (file) => {
    const index = modalForm.pattern_images.findIndex(item => item.id === file.file.batchId);
    if (index !== -1) {
        modalForm.pattern_images.splice(index, 1);
    }
}
const delete3 = (file) => {
    const index = modalForm.inheritor_certificates.findIndex(item => item.id === file.file.batchId);
    if (index !== -1) {
        modalForm.inheritor_certificates.splice(index, 1);
    }
    console.log(modalForm.inheritor_certificates)
}
const previousStep = () => {
    console.log(modalForm)
    currentStep.value --
}

import { useRouter } from 'vue-router'
import { unref } from 'vue'

const router = useRouter()

const navToLogin = () => {
    userStore.logout()
}
const nextStep = () => {
    console.log(modalForm)
    if(loading.value){
        return
    }
    modalFormRef.value?.validate((errors) => {
        if (!errors) {
            if(currentStep.value != 4){
                currentStep.value ++
            }
            if(currentStep.value == 4){
                submit()
            }
        }
        else {
            message.error('请完善表单')
        }
    })
}
const submit = () => {
    const data = {
        ...modalForm,
        industry: industryOptions.value.find(item => item.value === modalForm.industry).label,
        funding_status: fundingOptions.find(item => item.value === modalForm.funding_status).label,
        inheritor_level: fundingOptions2.find(item => item.value === modalForm.inheritor_level).label,
        // "inheritor_ages": [60, 42, 35],  # 传承人年龄
        inheritor_certificates: modalForm.inheritor_certificates.map(item => item.url),
        heritage_asset_level: heritageOptions.find(item => item.value === modalForm.heritage_level).label,
        inheritor_ages: [modalForm.inheritor_age_count[0]-0,modalForm.inheritor_age_count[1]-0,modalForm.inheritor_age_count[2]-0],
        historical_evidence: { 
            artifacts: modalForm.historical_evidence[0],
            ancient_literature: modalForm.historical_evidence[1],
            inheritor_testimony: modalForm.historical_evidence[2],
            modern_research: modalForm.historical_evidence[3]
        },
        patent_certificates: modalForm.patent_certificates.map(item => item.url),
        pattern_images: modalForm.pattern_images.map(item => item.url),
        implementation_stage: maturityOptions.find(item => item.value === modalForm.application_maturity).label,
        coverage_area: coverageOptions.find(item => item.value === modalForm.application_coverage).label,
        collaboration_type: depthOptions.find(item => item.value === modalForm.cooperation_depth)?.label,
        scarcity_level: circulationOptions.find(item => item.value === modalForm.circulation).label,
        market_activity_time: activityOptions.find(item => item.value === modalForm.last_market_activity).label,
        price_fluctuation: [modalForm.price_fluctuation[0]-0,modalForm.price_fluctuation[1]-0],
        monthly_transaction_amount: transactionOptions.find(item => item.value === modalForm.monthly_transaction).label,
        platform_accounts: {}
    }
    if (modalForm.online_accounts[0]=='0'){
        data.platform_accounts= {
            bilibili: {
                account: modalForm.online_accounts[1],
                likes: modalForm.online_accounts[2], 
                comments: modalForm.online_accounts[3],
                shares: modalForm.online_accounts[4]
            }
        }
    }else if(modalForm.online_accounts[0]=='1'){
        data.platform_accounts= {
            douyin: {
                account: modalForm.online_accounts[1],
                likes: modalForm.online_accounts[2], 
                comments: modalForm.online_accounts[3],
                shares: modalForm.online_accounts[4]
            } 
        }
    }else if(modalForm.online_accounts[0]=='2'){
        data.platform_accounts= {
            kuaishou: {
                account: modalForm.online_accounts[1],
                likes: modalForm.online_accounts[2], 
                comments: modalForm.online_accounts[3],
                shares: modalForm.online_accounts[4]
            } 
        }
    }else if(modalForm.online_accounts[0]=='3'){
        data.platform_accounts= {
            qita: {
                account: modalForm.online_accounts[1],
                likes: modalForm.online_accounts[2], 
                comments: modalForm.online_accounts[3],
                shares: modalForm.online_accounts[4]
            } 
        }
    }
    data.inheritor_age_count = data.inheritor_ages
    message.success('正在评估中，请前往历史记录查看')
    loading.value = true
    api.valuations(data).then(res=>{
        loading.value = false
        getHistoryList()
        // window.location.reload()
    })
}
const getHistoryList = () => {
    const params = { 
      page: 1, 
      size: 99
    };
    api.getHistoryList(params).then(res=>{
       historyList.value = res.data
    })
}
const selectedObj = ref({
    calculation_result: '',
})

const selectTimeBox = (item) => {
    isSelected.value = item.id
    status.value = item.status
    selectedObj.value = item
    if(item.status == 'success'){
        setTimeout(() => {
          getEcharts(economy.value, 75, '#16CEB9', '#6648FF')  
          getEcharts(culture.value, 50, '#ffdd00', '#ffbb05')  
          getEcharts(risk.value, 5, '#5ad775', '#2fab43')
        }, 0);
    }
}

const retry = () => {
    status.value = 'create'
}
const dialog = useDialog()
const deleteValuations = (item) => {
     dialog.warning({
        title: '确认删除',
        content: '是否确认删除记录？',
        positiveText: '确定',
        negativeText: '取消',
        draggable: true,
        onPositiveClick: () => {
            api.deleteValuations(item).then(()=>{
                message.success('删除成功')
                getHistoryList()
                status.value = 'create'
            })
        },
    })
}
import * as echarts from 'echarts';
import type { ECharts, EChartsOption } from 'echarts';
import { useUserStore } from '@/store'
const userStore = useUserStore()
const economy = ref<HTMLDivElement | null>(null);
const culture = ref<HTMLDivElement | null>(null);
const risk = ref<HTMLDivElement | null>(null);
// 存储ECharts实例
const chartInstance = ref<ECharts | null>(null);

const getEcharts= (item, value, color1, color2)=>{
    console.log(item)
    if (!item) return;
    // 创建实例
    chartInstance.value = echarts.init(item);
    // 定义半圆形进度环配置
    const chartOptions = ref<EChartsOption>({
        title: [{
            text: '综合评估',
            top: '80%',
            textStyle: {
            color: '#909399',
            fontSize: 13,
            fontWeight: 100,
            }
        }, {
            text: value,
            top: '45%',
            textStyle: {
            fontSize: '26',
            color: '#000',
            fontFamily: 'DINAlternate-Bold, DINAlternate',
            fontWeight: 800,
            },
        }],
        polar: {
            radius: ['132%', '165%'],
            center: ['50%', '90%'],
        },
        angleAxis: {
            max: 100,
            show: false,
            startAngle: 180,
            endAngle: 0,
            min: 0,
            type: 'value'
        },
        radiusAxis: {
            type: 'category',
            show: false,
            data: ['']
        },
        series: [{
            name: '进度',
            type: 'bar',
            roundCap: true,
            barWidth: 90,
            data: [{
                value: value,
                itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 1,
                            color: color1,
                        },{
                            offset: 0,
                            color: color2,
                        },
                    ]),
                }
            }],
            coordinateSystem: 'polar',
            }
        ],
    });
    chartInstance.value.setOption(chartOptions.value);
}

onMounted(async () => {
    const params = { 
      page: 1, 
      page_size: 99
    };
    await getHistoryList()
    // 使用await提高可读性
    const res = await api.getIndustryList(params);
    
    // 检查响应数据有效性
    if (!res?.data || !Array.isArray(res.data)) {
      return;
    }
    
    // 复制原始数据并处理，避免直接修改响应数据
    industryOptions.value = await res.data.map((element, index) => {
      // 只处理有名称且索引<=10的元素
      if (element.name) {
        return {
          ...element,  // 保留原始属性
          value: index + '',
          label: element.name
        };
      }
      // 对于不满足条件的元素，返回原始值或进行其他处理
      return element;
    });
  }
);
</script>

<style lang="scss">
.pages {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    width: 100%;
    height: 100vh;
    display: flex;
    background: #F8F8F8;
    .left {
        width: 270px;
        height: 100%;
        background-color: #fff;
    }
    .right {
        flex: 1;
        margin: 40px;
        height: 100%;
        background-color: #fff;
    }
}
.delete-icon{
    float: right;
    transform: translate(0,2px);
    width: 16px; 
    height: 16px;
}
.timeBox {
    margin-top: 10px;
    width: 200px; 
    height: 40px;
    font-weight: 500;
    font-size: 14px;
    color: #303133;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    padding: 10px 12px;
    cursor: pointer;
}
.timeBox2 {
    margin-top: 10px;
    width: 200px; 
    height: 40px;
    font-weight: 500;
    font-size: 14px;
    color: #303133;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    padding: 10px 12px;
    cursor: pointer;
    background-color: #F8F8F8;
}

.line {
    margin: auto;
    margin-top: 40px;
    width: 900px;
    height: 1px;
    background: #EEEEEE;
    border-radius: 4px;
}
.form-item{
    display: inline-block;
    width: 330px;
    margin-left: 20px;
}
.form-title-box{
    margin: auto;
    margin-top: 40px;
    width: 900px;
}
.title-left{
    width: 6px;
    height: 24px;
    background: #A30113;
    border-radius: 4px;
    display: inline-block;
    transform: translate(0,3px);
}
.title-form{
    display: inline-block;
    font-weight: 500;
    font-size: 20px;
    color: #303133;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    margin-left: 8px;
}
.submit-box {
    width: 900px;
    margin: auto;
    margin-top: 60px;
}
.submit-btn{
    display: inline-block;
    margin-left: 20px;
    width: 180px;
    height: 40px;
    background: #A30113;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 40px;
    font-style: normal;
}

.submit-btn2{
    display: inline-block;
    margin-left: 20px;
    width: 180px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    font-style: normal;
    padding-top: 12px;
    border-radius: 4px;
    border: 1px solid #BBBBBB;
}
.retry{
    text-align: center;
    margin: auto;
    margin-top: 40px;
    width: 180px;
    height: 40px;
    background: #A30113;
    border-radius: 4px;
    font-size: 16px;
    line-height: 40px;
    color: #FFFFFF;
}

.price-container {
    margin: auto;
    margin-top: 40px;
    height: 268px;
    width: 1010px;
    padding-top: 79px;
    /* 使用导入的图片作为背景 */
    background-image: url(~@/assets/images/background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 文本样式 */
    color: #B5906B; /* 假设白色文本在背景上更清晰 */
    font-size: 52px;
    font-weight: bold;
    text-align: center;
}
.score-box{
    padding: 30px;
    width: 320px;
    height: 284px;
    border-radius: 8px;
    margin-left: 25px;
    color: #303133;
}


/* 移除number类型输入框的箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

</style>