|
|
<!-- components/TaxHealthReport/TaxHealthReport.vue -->
|
|
|
<template>
|
|
|
<!-- 弹窗遮罩 -->
|
|
|
<view v-if="show" class="tax-report-modal-mask" @click="handleClose">
|
|
|
<view class="tax-report-modal-content" @click.stop>
|
|
|
<!-- 报告头部 -->
|
|
|
<view class="tax-report-header">
|
|
|
<view class="header-left">
|
|
|
<text class="tax-report-title">{{ title }}</text>
|
|
|
<text class="tax-report-subtitle">企业税务健康度分析报告</text>
|
|
|
</view>
|
|
|
<text class="tax-report-close-btn" @click="handleClose">×</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 报告内容 -->
|
|
|
<scroll-view class="tax-report-body" scroll-y :show-scrollbar="false">
|
|
|
<!-- 企业基本信息 -->
|
|
|
<view class="company-info-section">
|
|
|
<view class="section-header">
|
|
|
<view class="section-title-wrapper">
|
|
|
<text class="section-icon">🏢</text>
|
|
|
<text class="section-title">企业基本信息</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="company-info-grid">
|
|
|
<view class="info-row">
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">企业名称</text>
|
|
|
<text class="info-value">{{ companyInfo.name }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">法定代表人</text>
|
|
|
<text class="info-value">{{ companyInfo.legalRepresentative }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-row">
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">注册资本</text>
|
|
|
<text class="info-value">{{ companyInfo.registeredCapital }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">成立日期</text>
|
|
|
<text class="info-value">{{ companyInfo.establishmentDate }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-row">
|
|
|
<view class="info-item full-width">
|
|
|
<text class="info-label">统一社会信用代码</text>
|
|
|
<text class="info-value credit-code">{{ companyInfo.creditCode }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-row">
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">联系电话</text>
|
|
|
<text class="info-value contact-info">{{ companyInfo.phone }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">邮箱地址</text>
|
|
|
<text class="info-value contact-info">{{ companyInfo.email }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-row">
|
|
|
<view class="info-item full-width">
|
|
|
<text class="info-label">注册地址</text>
|
|
|
<text class="info-value address">{{ companyInfo.address }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 健康度概览 -->
|
|
|
<view class="health-overview">
|
|
|
<view class="health-score">
|
|
|
<view class="score-circle">
|
|
|
<text class="score-value">85</text>
|
|
|
<text class="score-label">健康度</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="health-stats">
|
|
|
<view class="stat-item">
|
|
|
<text class="stat-value">4</text>
|
|
|
<text class="stat-label">检查项目</text>
|
|
|
</view>
|
|
|
<view class="stat-item">
|
|
|
<text class="stat-value">3</text>
|
|
|
<text class="stat-label">低风险</text>
|
|
|
</view>
|
|
|
<view class="stat-item">
|
|
|
<text class="stat-value">1</text>
|
|
|
<text class="stat-label">需关注</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 税务登记与信息核对 -->
|
|
|
<view class="report-section">
|
|
|
<view class="section-header">
|
|
|
<view class="section-title-wrapper">
|
|
|
<text class="section-number">01</text>
|
|
|
<text class="section-title">税务登记与信息核对</text>
|
|
|
</view>
|
|
|
<view class="risk-tag low-risk">低风险</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="section-content">
|
|
|
<view class="chart-container">
|
|
|
<view class="info-match-chart">
|
|
|
<view class="chart-bar">
|
|
|
<view class="bar-fill" :style="{width: '90%'}"></view>
|
|
|
</view>
|
|
|
<text class="chart-label">信息匹配度 90%</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="detail-list">
|
|
|
<view class="detail-item">
|
|
|
<view class="item-header">
|
|
|
<text class="item-icon">📋</text>
|
|
|
<text class="item-title">税务登记信息</text>
|
|
|
</view>
|
|
|
<text class="item-desc">企业名称、地址、法人等信息与营业执照一致</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="detail-item">
|
|
|
<view class="item-header">
|
|
|
<text class="item-icon">🔍</text>
|
|
|
<text class="item-title">税种认定匹配</text>
|
|
|
</view>
|
|
|
<text class="item-desc">增值税纳税人类型与业务规模匹配，建议复核小规模纳税人认定</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 申报数据逻辑 -->
|
|
|
<view class="report-section">
|
|
|
<view class="section-header">
|
|
|
<view class="section-title-wrapper">
|
|
|
<text class="section-number">02</text>
|
|
|
<text class="section-title">申报数据逻辑</text>
|
|
|
</view>
|
|
|
<view class="risk-tag medium-risk">需关注</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="section-content">
|
|
|
<view class="declaration-charts">
|
|
|
<view class="chart-item">
|
|
|
<view class="chart-title">增值税申报</view>
|
|
|
<view class="progress-chart">
|
|
|
<view class="progress-bar">
|
|
|
<view class="progress-fill" :style="{width: '85%'}"></view>
|
|
|
</view>
|
|
|
<text class="progress-text">收入一致性 85%</text>
|
|
|
</view>
|
|
|
<view class="chart-data">
|
|
|
<text class="data-item">• 税负率: 3.2% (行业平均: 3.5%)</text>
|
|
|
<text class="data-item">• 申报差异: 在合理范围内</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="chart-item">
|
|
|
<view class="chart-title">企业所得税申报</view>
|
|
|
<view class="progress-chart">
|
|
|
<view class="progress-bar">
|
|
|
<view class="progress-fill" :style="{width: '78%'}"></view>
|
|
|
</view>
|
|
|
<text class="progress-text">成本合理性 78%</text>
|
|
|
</view>
|
|
|
<view class="chart-data">
|
|
|
<text class="data-item">• 成本费用率: 68%</text>
|
|
|
<text class="data-item">• 制造业合理区间: 60%-80%</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 发票管理风险 -->
|
|
|
<view class="report-section">
|
|
|
<view class="section-header">
|
|
|
<view class="section-title-wrapper">
|
|
|
<text class="section-number">03</text>
|
|
|
<text class="section-title">发票管理风险</text>
|
|
|
</view>
|
|
|
<view class="risk-tag low-risk">低风险</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="section-content">
|
|
|
<view class="risk-distribution">
|
|
|
<view class="risk-item upstream-risk">
|
|
|
<view class="risk-icon">📥</view>
|
|
|
<text class="risk-type">上游发票合规性</text>
|
|
|
<view class="risk-status safe">正常</view>
|
|
|
<text class="risk-desc">供应商状态正常，业务一致</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="risk-item downstream-risk">
|
|
|
<view class="risk-icon">📤</view>
|
|
|
<text class="risk-type">下游开票合规性</text>
|
|
|
<view class="risk-status safe">正常</view>
|
|
|
<text class="risk-desc">开票模式合理，进销匹配</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 特定业务风险点 -->
|
|
|
<view class="report-section">
|
|
|
<view class="section-header">
|
|
|
<view class="section-title-wrapper">
|
|
|
<text class="section-number">04</text>
|
|
|
<text class="section-title">特定业务风险点</text>
|
|
|
</view>
|
|
|
<view class="risk-tag low-risk">低风险</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="section-content">
|
|
|
<view class="risk-points">
|
|
|
<view class="risk-point">
|
|
|
<view class="point-header">
|
|
|
<text class="point-icon">⚖️</text>
|
|
|
<text class="point-title">关联交易定价</text>
|
|
|
</view>
|
|
|
<text class="point-status compliant">符合独立交易原则</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="risk-point">
|
|
|
<view class="point-header">
|
|
|
<text class="point-icon">🎯</text>
|
|
|
<text class="point-title">税收优惠适用</text>
|
|
|
</view>
|
|
|
<text class="point-status compliant">高新技术企业资质有效</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="risk-point">
|
|
|
<view class="point-header">
|
|
|
<text class="point-icon">🏢</text>
|
|
|
<text class="point-title">资产处理合规性</text>
|
|
|
</view>
|
|
|
<text class="point-status compliant">固定资产处置程序完整</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { reactive } from 'vue';
|
|
|
import type { TaxHealthReportProps, TaxHealthReportEmits } from './TaxHealthReport.type';
|
|
|
|
|
|
// 组件Props
|
|
|
defineProps<TaxHealthReportProps>();
|
|
|
|
|
|
// 组件Emits
|
|
|
const emit = defineEmits<TaxHealthReportEmits>();
|
|
|
|
|
|
// 企业基本信息
|
|
|
const companyInfo = reactive({
|
|
|
name: '浙江某某科技有限公司',
|
|
|
legalRepresentative: '张三',
|
|
|
registeredCapital: '1000万元人民币',
|
|
|
establishmentDate: '2018-06-15',
|
|
|
creditCode: '91330100MA2A2B2C2D',
|
|
|
phone: '0571-88888888',
|
|
|
email: 'contact@example.com',
|
|
|
address: '浙江省杭州市西湖区文三路XXX号创业大厦A座1001室'
|
|
|
});
|
|
|
|
|
|
// 事件处理
|
|
|
const handleClose = () => {
|
|
|
emit('update:show', false);
|
|
|
emit('close');
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.tax-report-modal-mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
z-index: 9999;
|
|
|
padding: 40rpx;
|
|
|
}
|
|
|
|
|
|
.tax-report-modal-content {
|
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
|
border-radius: 24rpx;
|
|
|
width: 100%;
|
|
|
height: 90vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
|
|
|
border: 1rpx solid #e2e8f0;
|
|
|
}
|
|
|
|
|
|
/* 头部样式 */
|
|
|
.tax-report-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
padding: 40rpx 32rpx 24rpx;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
.header-left {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.tax-report-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
color: white;
|
|
|
display: block;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.tax-report-subtitle {
|
|
|
font-size: 26rpx;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.tax-report-close-btn {
|
|
|
font-size: 44rpx;
|
|
|
color: white;
|
|
|
padding: 16rpx;
|
|
|
font-weight: 300;
|
|
|
margin-top: -8rpx;
|
|
|
}
|
|
|
|
|
|
/* 主体内容 */
|
|
|
.tax-report-body {
|
|
|
flex: 1;
|
|
|
padding: 32rpx;
|
|
|
max-height: calc(90vh - 120rpx);
|
|
|
}
|
|
|
|
|
|
/* 企业基本信息 */
|
|
|
.company-info-section {
|
|
|
background: white;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 32rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
border: 1rpx solid #f1f5f9;
|
|
|
border-left: 6rpx solid #667eea;
|
|
|
}
|
|
|
|
|
|
.company-info-section .section-header {
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
.section-icon {
|
|
|
font-size: 28rpx;
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
.company-info-grid {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.info-row {
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8rpx;
|
|
|
}
|
|
|
|
|
|
.info-item.full-width {
|
|
|
flex: 2;
|
|
|
}
|
|
|
|
|
|
.info-label {
|
|
|
font-size: 24rpx;
|
|
|
color: #64748b;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.info-value {
|
|
|
font-size: 26rpx;
|
|
|
color: #1e293b;
|
|
|
font-weight: 600;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
.info-value.credit-code {
|
|
|
font-family: 'Courier New', monospace;
|
|
|
background: #f8fafc;
|
|
|
padding: 12rpx 16rpx;
|
|
|
border-radius: 8rpx;
|
|
|
border: 1rpx solid #e2e8f0;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.info-value.contact-info {
|
|
|
color: #667eea;
|
|
|
}
|
|
|
|
|
|
.info-value.address {
|
|
|
line-height: 1.5;
|
|
|
background: #f8fafc;
|
|
|
padding: 16rpx;
|
|
|
border-radius: 8rpx;
|
|
|
border: 1rpx solid #e2e8f0;
|
|
|
}
|
|
|
|
|
|
/* 健康度概览 */
|
|
|
.health-overview {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: white;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 32rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
border: 1rpx solid #f1f5f9;
|
|
|
}
|
|
|
|
|
|
.health-score {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.score-circle {
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
border-radius: 50%;
|
|
|
background: conic-gradient(#10b981 85%, #e2e8f0 0%);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.score-circle::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
border-radius: 50%;
|
|
|
background: white;
|
|
|
}
|
|
|
|
|
|
.score-value {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
color: #10b981;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
.score-label {
|
|
|
font-size: 22rpx;
|
|
|
color: #64748b;
|
|
|
z-index: 1;
|
|
|
margin-top: 4rpx;
|
|
|
}
|
|
|
|
|
|
.health-stats {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.stat-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
color: #1e293b;
|
|
|
min-width: 40rpx;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 24rpx;
|
|
|
color: #64748b;
|
|
|
}
|
|
|
|
|
|
/* 报告区块 */
|
|
|
.report-section {
|
|
|
background: white;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 32rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
border: 1rpx solid #f1f5f9;
|
|
|
}
|
|
|
|
|
|
.section-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
.section-title-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
.section-number {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: bold;
|
|
|
color: #667eea;
|
|
|
background: #f0f4ff;
|
|
|
padding: 8rpx 16rpx;
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1e293b;
|
|
|
}
|
|
|
|
|
|
/* 风险标签 */
|
|
|
.risk-tag {
|
|
|
padding: 8rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.low-risk {
|
|
|
background: #d1fae5;
|
|
|
color: #065f46;
|
|
|
}
|
|
|
|
|
|
.medium-risk {
|
|
|
background: #fef3c7;
|
|
|
color: #92400e;
|
|
|
}
|
|
|
|
|
|
/* 图表容器 */
|
|
|
.chart-container {
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
.info-match-chart {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.chart-bar {
|
|
|
width: 100%;
|
|
|
height: 24rpx;
|
|
|
background: #e2e8f0;
|
|
|
border-radius: 12rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.bar-fill {
|
|
|
height: 100%;
|
|
|
background: linear-gradient(90deg, #10b981, #34d399);
|
|
|
border-radius: 12rpx;
|
|
|
transition: width 0.8s ease;
|
|
|
}
|
|
|
|
|
|
.chart-label {
|
|
|
font-size: 24rpx;
|
|
|
color: #64748b;
|
|
|
}
|
|
|
|
|
|
/* 详情列表 */
|
|
|
.detail-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 24rpx;
|
|
|
}
|
|
|
|
|
|
.detail-item {
|
|
|
background: #f8fafc;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
border-left: 4rpx solid #667eea;
|
|
|
}
|
|
|
|
|
|
.item-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.item-icon {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.item-title {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1e293b;
|
|
|
}
|
|
|
|
|
|
.item-desc {
|
|
|
font-size: 24rpx;
|
|
|
color: #64748b;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
/* 申报图表 */
|
|
|
.declaration-charts {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 32rpx;
|
|
|
}
|
|
|
|
|
|
.chart-item {
|
|
|
background: #f8fafc;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
}
|
|
|
|
|
|
.chart-title {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1e293b;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.progress-chart {
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.progress-bar {
|
|
|
width: 100%;
|
|
|
height: 16rpx;
|
|
|
background: #e2e8f0;
|
|
|
border-radius: 8rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.progress-fill {
|
|
|
height: 100%;
|
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
|
|
border-radius: 8rpx;
|
|
|
transition: width 0.8s ease;
|
|
|
}
|
|
|
|
|
|
.progress-text {
|
|
|
font-size: 22rpx;
|
|
|
color: #64748b;
|
|
|
}
|
|
|
|
|
|
.chart-data {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8rpx;
|
|
|
}
|
|
|
|
|
|
.data-item {
|
|
|
font-size: 22rpx;
|
|
|
color: #64748b;
|
|
|
}
|
|
|
|
|
|
/* 风险分布 */
|
|
|
.risk-distribution {
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.risk-item {
|
|
|
flex: 1;
|
|
|
background: #f8fafc;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
text-align: center;
|
|
|
border: 2rpx solid #e2e8f0;
|
|
|
}
|
|
|
|
|
|
.risk-icon {
|
|
|
font-size: 32rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.risk-type {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1e293b;
|
|
|
display: block;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.risk-status {
|
|
|
padding: 6rpx 16rpx;
|
|
|
border-radius: 12rpx;
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.safe {
|
|
|
background: #d1fae5;
|
|
|
color: #065f46;
|
|
|
}
|
|
|
|
|
|
.risk-desc {
|
|
|
font-size: 22rpx;
|
|
|
color: #64748b;
|
|
|
}
|
|
|
|
|
|
/* 风险点 */
|
|
|
.risk-points {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.risk-point {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
background: #f8fafc;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 20rpx 24rpx;
|
|
|
}
|
|
|
|
|
|
.point-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12rpx;
|
|
|
}
|
|
|
|
|
|
.point-icon {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.point-title {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1e293b;
|
|
|
}
|
|
|
|
|
|
.point-status {
|
|
|
padding: 6rpx 16rpx;
|
|
|
border-radius: 12rpx;
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.compliant {
|
|
|
background: #d1fae5;
|
|
|
color: #065f46;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (min-width: 768px) {
|
|
|
.tax-report-modal-content {
|
|
|
width: 80%;
|
|
|
max-width: 800px;
|
|
|
}
|
|
|
|
|
|
.risk-distribution {
|
|
|
gap: 32rpx;
|
|
|
}
|
|
|
|
|
|
.declaration-charts {
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
|
|
|
.chart-item {
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 移动端适配 */
|
|
|
@media (max-width: 768px) {
|
|
|
.info-row {
|
|
|
flex-direction: column;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.risk-distribution {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
</style> |
