门户权限的接口

src/api/modules/home/index.js

@@ -55,7 +55,9 @@ export default {
         return httpApi({
             url: '/api/blade-control/annualBudget/yearList',
             method: 'get',
-            params: {}
+            params: {
+                type: 1
+            }
         }, false);
     },
     //门户-年度各项费用统计
@@ -90,4 +92,35 @@ export default {
             params: {}
         }, false);
     },
+
+    //门户-各项目支出占比
+    async portalProjectCostRatio(date) {
+        return httpApi({
+            url: '/api/blade-control/annualBudget/portalProjectCostRatio',
+            method: 'get',
+            params: {
+                date
+            }
+        }, false);
+    },
+    //门户-各项目收入占比
+    async portalProjectIncomeRatio(date) {
+        return httpApi({
+            url: '/api/blade-control/annualBudget/portalProjectIncomeRatio',
+            method: 'get',
+            params: {
+                date
+            }
+        }, false);
+    },
+    //门户-项目服务阶段进程
+    async portalProjectProcess(projectId) {
+        return httpApi({
+            url: '/api/blade-control/annualBudget/portalProjectProcess',
+            method: 'get',
+            params: {
+                projectId
+            }
+        }, false);
+    },
 }

src/components/dropdown/index.vue

@@ -6,7 +6,8 @@
         </div>
         <template #dropdown>
             <el-dropdown-menu>
-                <el-dropdown-item v-for="item in itemData" @click="dropdownItemClick(item)">{{item.name}}</el-dropdown-item>
+                <el-dropdown-item v-for="item in years" @click="dropdownItemClick(item)">{{item}}</el-dropdown-item>
+                <el-dropdown-item @click="dropdownItemClick('汇总所有')" v-if="isAll">汇总所有</el-dropdown-item>
             </el-dropdown-menu>
         </template>
     </el-dropdown>
@@ -24,28 +25,38 @@ const props = defineProps({
     datas: {
         type: Array,
         default: () => ([])
-    }
+    },
+    all: {
+        type: Boolean,
+        default: false
+    },
 })
 
 const curKey = ref(props.cur)
-const itemData = ref(props.datas)
+const years = ref(props.datas)
+const isAll = ref(props.all)
 
 //监听
 watch(() => [
     props.cur,
-], ([cur]) => {
+    props.all,
+], ([cur, all]) => {
     curKey.value = cur
+    isAll.value = all
 })
 
 //深度监听
 watch(() => [
     props.datas,
 ], ([datas]) => {
-    itemData.value = datas
+    years.value = datas
 }, {deep: true})
 
+//事件
+const emit = defineEmits(['change'])
 
 const dropdownItemClick = (item) => {
-    curKey.value = item.name
+    curKey.value = item
+    emit('change', item)
 }
 </script>

src/components/echarts/ProgressChart.vue

@@ -4,6 +4,7 @@
             <div class="title" v-if="left_title">{{left_title}}</div>
             <div class="progress">
                 <el-progress :text-inside="true" :stroke-width="32" :percentage="left_ratio" />
+                <span class="progress-zero" v-if="left_ratio <= 0">0%</span>
             </div>
         </div>
         <div class="hac-title-box">
@@ -13,6 +14,7 @@
             <div class="title" v-if="right_title">{{right_title}}</div>
             <div class="progress">
                 <el-progress :text-inside="true" :stroke-width="32" :percentage="right_ratio" :format="format"/>
+                <span class="progress-zero" v-if="right_ratio <= 0">0%</span>
             </div>
         </div>
     </div>
@@ -93,8 +95,18 @@ const format = () => (right_text.value)
         }
         .progress {
             position: relative;
+            .progress-zero {
+                position: absolute;
+                top: 7px;
+            }
         }
     }
+    .hac-left-progress .progress .progress-zero {
+        right: 8px;
+    }
+    .hac-right-progress .progress .progress-zero {
+        left: 8px;
+    }
     .hac-left-progress .title {
         right: 0;
         color: #0066FF;

src/components/echarts/SimpleChart.vue

@@ -47,7 +47,7 @@ const setOptions = () => {
         legend: {
             type: 'scroll',
             orient: 'vertical',
-            left: '-7',
+            left: '-5',
         },
         series: [
             {

src/views/home/index/admin.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-scrollbar class="hc-main-scrollbar">
+    <el-scrollbar class="hc-main-scrollbar hc-home-main">
         <div class="hc-main-row">
             <el-row :gutter="14">
                 <el-col :span="4">
@@ -58,7 +58,7 @@
                     <div class="hac-card-title text-black">年度各项费用统计</div>
                 </template>
                 <template #extra>
-                    <HcDropdown :cur="planTime" :datas="itemData"/>
+                    <HcDropdown :cur="planYear1" :datas="yearData" :all="yearData.length > 0" @change="planYear1Change" v-if="yearData.length > 0"/>
                 </template>
                 <div class="hac-card-item-body mb-2">
                     <el-row :gutter="14">
@@ -68,7 +68,7 @@
                                     <div class="item-sub-content">
                                         <div class="title">总合同</div>
                                         <div class="num-box">
-                                            <span class="num">1200</span>
+                                            <span class="num">{{annualCostData.yearContractMoney ?? 0}}</span>
                                             <span class="text">万</span>
                                         </div>
                                     </div>
@@ -84,7 +84,7 @@
                                     <div class="item-sub-content">
                                         <div class="title">总收入</div>
                                         <div class="num-box">
-                                            <span class="num">560</span>
+                                            <span class="num">{{annualCostData.yearReturned ?? 0}}</span>
                                             <span class="text">万</span>
                                         </div>
                                     </div>
@@ -100,7 +100,7 @@
                                     <div class="item-sub-content">
                                         <div class="title">总实际支出</div>
                                         <div class="num-box">
-                                            <span class="num">90</span>
+                                            <span class="num">{{annualCostData.yearStaffDisburse ?? 0}}</span>
                                             <span class="text">万</span>
                                         </div>
                                     </div>
@@ -116,7 +116,7 @@
                                     <div class="item-sub-content">
                                         <div class="title">总计划支出</div>
                                         <div class="num-box">
-                                            <span class="num">125</span>
+                                            <span class="num">{{annualCostData.totalBudget ?? 0}}</span>
                                             <span class="text">万</span>
                                         </div>
                                     </div>
@@ -132,13 +132,14 @@
 
             <HcCardItem ui="hac-card-item mt-4">
                 <template #header>
-                    <div class="hac-card-title text-black">本年度各项目支出对比</div>
+                    <div class="hac-card-title text-black">年度各项目支出对比</div>
                 </template>
                 <template #extra>
-                    <HcDropdown :cur="planTime" :datas="itemData"/>
+                    <HcDropdown :cur="planYear2" :datas="yearData" @change="planYear2Change" v-if="yearData.length > 0"/>
                 </template>
                 <div class="hc-row-echarts-box" style="height: 260px">
-                    <BarLabelRotation isMonth :datas="expendDatas"/>
+                    <BarLabelRotation isMonth :datas="expendDatas" v-if="expendDatas.length > 0"/>
+                    <HcNoData v-else/>
                 </div>
             </HcCardItem>
 
@@ -149,7 +150,7 @@
                             <div class="hac-card-title text-black">当月各部门计划安排比重</div>
                         </template>
                         <template #extra>
-                            <HcDropdown :cur="planTime" :datas="itemData"/>
+                            <el-date-picker type="month" v-model="planTime" format="YYYY-MM" value-format="YYYY-MM" style="width: 130px;" @change="planTimeChange"/>
                         </template>
                         <div class="hac-card-item-body" style="height: 410px">
                             <HcTable ui="no-border" :isIndex="false" :column="tableColumn" :datas="tableData"/>
@@ -162,7 +163,7 @@
                             <template #header>
                                 <div class="hac-card-icon-title">
                                     <HcIcon name="alarm-warning" ui="text-orange text-xl"/>
-                                    <el-badge :value="12">
+                                    <el-badge :value="tableData1.length">
                                         <span class="ml-2 mr-3 text-black">影响回款的风险计划</span>
                                     </el-badge>
                                 </div>
@@ -170,7 +171,7 @@
                             <div class="hac-card-item-body" style="height: 160px">
                                 <HcTable ui="no-border" :isIndex="false" :column="tableColumn1" :datas="tableData1">
                                     <template #action="{row,index}">
-                                        <el-button plain size="small" type="primary">查看</el-button>
+                                        <el-button plain size="small" type="primary" @click="rowViewClick(row)">查看</el-button>
                                     </template>
                                 </HcTable>
                             </div>
@@ -184,10 +185,11 @@
                                         <div class="hac-card-title text-black">各项目支出占比统计</div>
                                     </template>
                                     <template #extra>
-                                        <HcDropdown :cur="planTime" :datas="itemData"/>
+                                        <HcDropdown :cur="planYear3" :datas="yearData" @change="planYear3Change" v-if="yearData.length > 0"/>
                                     </template>
                                     <div class="hac-card-item-body" style="height: 160px">
-                                        <BorderRadius :datas="expendStatisticsDatas"/>
+                                        <BorderRadius :datas="expendStatisticsDatas" v-if="expendStatisticsDatas.length > 0"/>
+                                        <HcStatus class="border-radius-status" v-else/>
                                     </div>
                                 </HcCardItem>
                             </el-col>
@@ -197,10 +199,11 @@
                                         <div class="hac-card-title text-black">各项目收入占比统计</div>
                                     </template>
                                     <template #extra>
-                                        <HcDropdown :cur="planTime" :datas="itemData"/>
+                                        <HcDropdown :cur="planYear4" :datas="yearData" @change="planYear4Change" v-if="yearData.length > 0"/>
                                     </template>
                                     <div class="hac-card-item-body" style="height: 160px">
-                                        <SimpleChart :datas="incomeStatisticsDatas"/>
+                                        <SimpleChart :datas="incomeStatisticsDatas" v-if="incomeStatisticsDatas.length > 0"/>
+                                        <HcStatus class="simple-chart-status" v-else/>
                                     </div>
                                 </HcCardItem>
                             </el-col>
@@ -214,17 +217,21 @@
                     <div class="hac-card-title text-black">项目服务阶段进程</div>
                 </template>
                 <template #extra>
-                    <el-select v-model="value" size="small">
-                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+                    <el-select v-model="portalProjectId" @change="portalProjectIdChange" v-if="projectData.length > 0">
+                        <el-option v-for="items in projectData" :label="items.projectName" :value="items.projectId"/>
                     </el-select>
                 </template>
                 <div class="hc-row-echarts-box pt-5 mb-1">
-                    <ProgressChart leftTitle="计划执行进度" rightTitle="已支出成本" title="商机商机商机商机商机" leftRatio="100" rightRatio="70" rightText="36222.36"/>
-                    <ProgressChart title="商机" leftRatio="40" rightRatio="50" rightText="95231"/>
-                    <ProgressChart title="商机商机" leftRatio="55" rightRatio="35" rightText="16895"/>
-                    <ProgressChart title="商机商机商机" leftRatio="40" rightRatio="28.6" rightText="6352"/>
-                    <ProgressChart title="商机商机商机商机" leftRatio="30" rightRatio="15" rightText="1200"/>
-                    <ProgressChart title="商机商机商机商机商机" leftRatio="20" rightRatio="8" rightText="300"/>
+                    <template v-for="(item, index) in projectProcessData" v-if="projectProcessData.length > 0">
+                        <ProgressChart :leftTitle="index===0?'计划执行进度':''"
+                                       :rightTitle="index===0?'已支出成本':''"
+                                       :title="item.processName"
+                                       :leftRatio="item.processProgressBar"
+                                       :rightRatio="item.processCostProgressBar"
+                                       :rightText="item.processCostCount"
+                        />
+                    </template>
+                    <HcStatus class="project-process-status" v-else/>
                 </div>
             </HcCardItem>
         </div>
@@ -243,27 +250,43 @@ import BorderRadius from "~com/echarts/BorderRadius.vue";
 import SimpleChart from "~com/echarts/SimpleChart.vue";
 import ProgressChart from "~com/echarts/ProgressChart.vue";
 import mainApi from "~api/home/index";
+import {getProjectList} from "~api/other";
 
 //时间类
 import dayjs from "dayjs"
 import 'dayjs/locale/zh-cn'
-import {getObjValue} from "js-fast-way";
+import {getArrValue, getObjValue} from "js-fast-way";
 dayjs.locale('zh-cn')
 
-//获取当前年月
-onMounted(() => {
-    planTime.value = dayjs().format('YYYY-MM')
+//年份
+const planYear = dayjs().format('YYYY') + '年';
+const planDate = dayjs().format('YYYY-MM');
+
+//页面首次渲染完成时
+onMounted(async () => {
+    await getYearList()
+    getYearDataApi()
 })
 
 //缓存页面被激活时
 onActivated(() => {
-    getApi()
+    getPlanAnnualTarget()
+    getYearDataApi()
+    getTableData1()
+    getTableData()
+    getProjectData()
 })
 
-const getApi = () => {
-    getPlanAnnualTarget()
+const getYearDataApi = () => {
+    if (yearData.value.length > 0) {
+        getPortalAnnualCost()
+        getExpendDatas()
+        getExpendStatisticsData()
+        getIncomeStatisticsData()
+    }
 }
 
+
 //项目类型
 const planAnnualTarget = ref({})
 const getPlanAnnualTarget = async () => {
@@ -276,94 +299,217 @@ const getPlanAnnualTarget = async () => {
     }
 }
 
+//获取年度列表
+const yearData = ref([]);
+const getYearList = async () => {
+    const {error, code, data} = await mainApi.yearList()
+    //判断状态
+    if (!error && code === 200) {
+        const arr = getArrValue(data)
+        //判断当前年份是否在列表中
+        if (arr.indexOf(planYear) > -1) {
+            planYear1.value = planYear
+        } else {
+            planYear1.value = arr[0]
+        }
+        yearData.value = arr
+    } else {
+        yearData.value = []
+        planYear1.value = ''
+        annualCostData.value = {
+            yearContractMoney: 0,
+            yearReturned: 0,
+            yearStaffDisburse: 0,
+            totalBudget: 0
+        }
+    }
+}
 
-//选择日期时间
-const planTime = ref('汇总所有')
-const itemData = ref([{name: '2023年02月'}, {name: '2023年03月'}, {name: '2023年04月'}, {name: '汇总所有'}])
+//年度各项费用统计
+const planYear1 = ref(planYear)
+const planYear1Change = (val) => {
+    planYear1.value = val
+    getPortalAnnualCost()
+}
 
+//获取数据
+const annualCostData = ref({
+    yearContractMoney: 0, yearReturned: 0, yearStaffDisburse: 0, totalBudget: 0
+})
+const getPortalAnnualCost = async () => {
+    const {error, code, data} = await mainApi.portalAnnualCost({
+        year: planYear1.value
+    })
+    //判断状态
+    if (!error && code === 200) {
+        annualCostData.value = getObjValue(data)
+    } else {
+        annualCostData.value = {
+            yearContractMoney: 0,
+            yearReturned: 0,
+            yearStaffDisburse: 0,
+            totalBudget: 0
+        }
+    }
+}
+
+
+//年度各项目支出对比
+const planYear2 = ref(planYear)
+const planYear2Change = (val) => {
+    planYear2.value = val
+    getExpendDatas()
+}
+//年度各项目支出对比
+const expendDatas = ref([])
+const getExpendDatas = async () => {
+    expendDatas.value = []
+    const {error, code, data} = await mainApi.portalAnnualProjectCost({
+        year: planYear2.value
+    })
+    //判断状态
+    if (!error && code === 200) {
+        expendDatas.value = getArrValue(data)
+    } else {
+        expendDatas.value = []
+    }
+}
+
+//当月各部门计划安排比重
+const planTime = ref(planDate)
+const planTimeChange = () => {
+    getTableData()
+}
 const tableColumn = [
-    {key: 'name', name: '项目名称'},
-    {key: 'put1', name: '实施投入', align: 'center'},
-    {key: 'put2', name: '研发投入', align: 'center'},
-    {key: 'put3', name: '维护投入', align: 'center'}
+    {key: 'projectName', name: '项目名称'},
+    {key: 'businessRatio', name: '实施投入', align: 'center'},
+    {key: 'devRatio', name: '研发投入', align: 'center'},
+    {key: 'maintainRatio', name: '维护投入', align: 'center'}
 ]
-const tableData = ref([
-    {name: '名称1', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称2', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称3', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称4', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称5', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称6', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称7', put1: '26%', put2: '26%', put3: '26%'},
-    {name: '名称8', put1: '26%', put2: '26%', put3: '26%'},
-])
+const tableData = ref([])
+const getTableData = async () => {
+    tableData.value = []
+    const {error, code, data} = await mainApi.portalDeptMonthPlanRatio({
+        date: planTime.value
+    })
+    //判断状态
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data)
+    } else {
+        tableData.value = []
+    }
+}
+
 
+//影响回款的风险计划
 const tableColumn1 = [
-    {key: 'name', name: '项目名称'},
-    {key: 'section', name: '风险部门', align: 'center'},
-    {key: 'time', name: '原计划完成时间', align: 'center'},
-    {key: 'delay', name: '延期计划条数', align: 'center'},
+    {key: 'projectName', name: '项目名称'},
+    {key: 'costTypeValue', name: '风险部门', align: 'center'},
+    {key: 'timeOutPlanTotal', name: '延期计划条数', align: 'center'},
     {key: 'action', name: '操作', align: 'center'},
 ]
-const tableData1 = ref([
-    {name: '名称1', section: '研发部', time: '2023-04-28', delay: '26'},
-    {name: '名称2', section: '研发部', time: '2023-04-28', delay: '26'},
-    {name: '名称3', section: '业务部', time: '2023-04-28', delay: '26'},
-    {name: '名称4', section: '业务部', time: '2023-04-28', delay: '26'},
-    {name: '名称5', section: '业务部', time: '2023-04-28', delay: '26'},
-])
+const tableData1 = ref([])
+const getTableData1 = async () => {
+    tableData1.value = []
+    const {error, code, data} = await mainApi.portalRiskPlan()
+    //判断状态
+    if (!error && code === 200) {
+        tableData1.value = getArrValue(data)
+    } else {
+        tableData1.value = []
+    }
+}
+//查看
+const rowViewClick = (row) => {
 
-const value = ref('')
-const options = [
-    {
-        value: 'Option1',
-        label: '奉建路',
-    },
-    {
-        value: 'Option2',
-        label: '西环线',
-    },
-    {
-        value: 'Option3',
-        label: '陈油路',
-    },
-]
+}
 
-//年度各项目支出对比
-const expendDatas = ref([
-    {
-        name: '奉建路',
-        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
-    },
-    {
-        name: '西环线',
-        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
-    },
-    {
-        name: '陈油路',
-        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
-    },
-    {
-        name: '宝贝路',
-        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
-    },
-])
 
 //各项目支出占比统计
-const expendStatisticsDatas = ref([
-    { value: 1048, name: '奉建路' },
-    { value: 735, name: '西环线' },
-    { value: 580, name: '陈油路' },
-    { value: 484, name: '宝北路' }
-])
+const planYear3 = ref(planYear)
+const planYear3Change = (val) => {
+    planYear3.value = val
+    getExpendStatisticsData()
+}
+const expendStatisticsDatas = ref([])
+const getExpendStatisticsData = async () => {
+    expendStatisticsDatas.value = []
+    const {error, code, data} = await mainApi.portalProjectCostRatio(planYear3.value)
+    //判断状态
+    if (!error && code === 200) {
+        const arr = getArrValue(data)
+        arr.forEach(item => {
+            item.name = item.projectName
+            item.value = item.projectCost
+        })
+        expendStatisticsDatas.value = arr
+    } else {
+        expendStatisticsDatas.value = []
+    }
+}
+
 
 //各项目收入占比统计
+const planYear4 = ref(planYear)
+const planYear4Change = (val) => {
+    planYear4.value = val
+    getIncomeStatisticsData()
+}
 const incomeStatisticsDatas = ref([
     { value: 1048, name: '奉建路' },
     { value: 735, name: '西环线' },
     { value: 580, name: '陈油路' },
     { value: 484, name: '宝北路' }
 ])
+const getIncomeStatisticsData = async () => {
+    incomeStatisticsDatas.value = []
+    const {error, code, data} = await mainApi.portalProjectIncomeRatio(planYear4.value)
+    //判断状态
+    if (!error && code === 200) {
+        const arr = getArrValue(data)
+        arr.forEach(item => {
+            item.name = item.projectName
+            item.value = item.projectIncome
+        })
+        incomeStatisticsDatas.value = arr
+    } else {
+        incomeStatisticsDatas.value = []
+    }
+}
+
+//获取项目数据
+const portalProjectId = ref('')
+const projectData = ref([])
+const getProjectData = async () => {
+    const {error, code, data} = await getProjectList()
+    //判断状态
+    if (!error && code === 200) {
+        const arr = getArrValue(data)
+        portalProjectId.value = arr.length > 0 ? arr[0].projectId : ''
+        projectData.value = arr
+        getPortalProjectProcess().then()
+    } else {
+        portalProjectId.value = ''
+        projectData.value = []
+        projectProcessData.value = []
+    }
+}
+const portalProjectIdChange = () => {
+    getPortalProjectProcess()
+}
+
+//获取数据
+const projectProcessData = ref([])
+const getPortalProjectProcess = async () => {
+    projectProcessData.value = []
+    const {error, code, data} = await mainApi.portalProjectProcess(portalProjectId.value)
+    //判断状态
+    if (!error && code === 200) {
+        projectProcessData.value = getArrValue(data)
+    } else {
+        projectProcessData.value = []
+    }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -375,4 +521,32 @@ const incomeStatisticsDatas = ref([
 .hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__inner {
     border-radius: 3px;
 }
+.hc-home-main .hc-row-echarts-box .hc-no-data-box .no-data-c {
+    position: relative;
+    width: 200px;
+    top: -15px;
+}
+.hc-home-main .hac-card-col-item .hac-card-item {
+    .border-radius-status, .simple-chart-status {
+        .page-status {
+            top: -10px;
+            .page-status-img {
+                width: 160px;
+            }
+            .page-status-text {
+                font-size: 14px;
+                margin-top: -10px;
+            }
+        }
+    }
+}
+.hc-home-main .hac-card-item .hc-row-echarts-box .project-process-status {
+    .page-status {
+        top: -15px;
+        margin-bottom: 14px;
+        .page-status-text {
+            font-size: 16px;
+        }
+    }
+}
 </style>

src/views/home/index/index.vue

@@ -73,12 +73,13 @@
                             <div class="hac-card-title">通知</div>
                         </template>
                         <div class="hac-card-item-table">
-                            <el-scrollbar>
+                            <el-scrollbar v-if="userInformData.length > 0">
                                 <div v-for="item in userInformData" class="hac-home-notice-item">
                                     <div class="line-clamp-2 title">{{item.informDetails}}</div>
                                     <div class="time">{{item.informDate}}</div>
                                 </div>
                             </el-scrollbar>
+                            <HcNoData v-else/>
                         </div>
                     </HcCardItem>
                 </el-col>
@@ -139,7 +140,8 @@
                 </template>
                 <div class="hac-card-item-body">
                     <div class="hc-row-echarts-box">
-                        <BarLabelRotation isMonth :datas="planDatas" :legend="{show:false,   }"/>
+                        <BarLabelRotation isMonth :datas="planDatas" :legend="{show:false,   }" v-if="planDatas.length > 0"/>
+                        <HcStatus class="hc-home-bar-label-rotation-status" v-else/>
                     </div>
                 </div>
             </HcCardItem>
@@ -275,3 +277,18 @@ const getMonthOfYearPlanOverview = async () => {
 <style lang="scss" scoped>
 @import "~src/styles/home/index.scss";
 </style>
+
+<style lang="scss">
+.hc-home-bar-label-rotation-status.hc-page-status-box {
+    .page-status {
+        top: -10px;
+        margin-bottom: 14px;
+        .page-status-img {
+            width: 290px;
+        }
+        .page-status-text {
+            font-size: 16px;
+        }
+    }
+}
+</style>