|
|
@@ -1,1089 +1,34 @@
|
|
|
+<!--
|
|
|
+ * @Author: qfkong kongqf@yusys.com.cn
|
|
|
+ * @Date: 2024-04-08 14:14:36
|
|
|
+ * @LastEditors: zhanglin3
|
|
|
+ * @LastEditTime: 2024-08-08 14:55:55
|
|
|
+ * @Description: 首页入口容器
|
|
|
+-->
|
|
|
<template>
|
|
|
- <div class="Home">
|
|
|
- <div class="top-wrapper">
|
|
|
- <img class="picture" src="@xdjf/idd/assets/images/首页/业务办理图.png" />
|
|
|
- <div class="greeting float-item">
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">{{ greetingTitle }}</p>
|
|
|
- <span class="content">欢迎使用智能尽调平台</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="float-item" :class="{ active: activeName === taskSts.todo }" @click="itemClick(taskSts.todo)">
|
|
|
- <span class="image">
|
|
|
- <img v-if="activeName === taskSts.todo" src="@xdjf/idd/assets/images/首页/待办.png" />
|
|
|
- <img v-else src="@xdjf/idd/assets/images/首页/待办默认.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">待办尽调</p>
|
|
|
- <span class="content">{{ todoCount }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="float-item" :class="{ active: activeName === taskSts.done }" @click="itemClick(taskSts.done)">
|
|
|
- <span class="image">
|
|
|
- <img v-if="activeName === taskSts.done" src="@xdjf/idd/assets/images/首页/已办.png" />
|
|
|
- <img v-else src="@xdjf/idd/assets/images/首页/已办默认.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">已办尽调</p>
|
|
|
- <span class="content">{{ doneCount }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="float-item"
|
|
|
- :class="{ active: activeName === taskSts.completed }"
|
|
|
- @click="itemClick(taskSts.completed)"
|
|
|
- >
|
|
|
- <span class="image">
|
|
|
- <img v-if="activeName === taskSts.completed" src="@xdjf/idd/assets/images/首页/完结.png" />
|
|
|
- <img v-else src="@xdjf/idd/assets/images/首页/完结默认.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">完结尽调</p>
|
|
|
- <span class="content">{{ complateCount }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="middle-wrapper">
|
|
|
- <div class="info-wrapper">
|
|
|
- <div class="warp">
|
|
|
- <img class="avatar" src="@xdjf/idd/assets/images/首页/数据展示/头像.png" />
|
|
|
- <span class="role">客户经理</span>
|
|
|
- <span class="username"><OverflowTooltipTitle :title="String(userName || '')" /></span>
|
|
|
- <span class="organization"><OverflowTooltipTitle :title="String(org.name || '')" /></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="data-wrapper">
|
|
|
- <div class="wrap">
|
|
|
- <div class="data-item my-rank">
|
|
|
- <span class="label">我的排名</span>
|
|
|
- <span class="desc">排名数</span>
|
|
|
- <span class="bg-img"><span class="rank">3</span></span>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="top">
|
|
|
- <span class="label">当月放款金额(元)</span>
|
|
|
- <span class="value">239,837</span>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <div class="area-chart"><img src="@xdjf/idd/assets/images/首页/数据展示/走势图.png" /></div>
|
|
|
- <div class="doughnut-chart">
|
|
|
- <span class="chat-img">
|
|
|
- <span class="rate">30%</span>
|
|
|
- </span>
|
|
|
- <!-- <DoughnutChart name="30" /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="top">
|
|
|
- <span class="label">当月放款笔数(笔)</span>
|
|
|
- <span class="value">5342</span>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <div class="area-chart"><img src="@xdjf/idd/assets/images/首页/数据展示/走势图1.png" /></div>
|
|
|
- <div class="doughnut-chart">
|
|
|
- <span class="chat-img">
|
|
|
- <span class="rate">20%</span>
|
|
|
- </span>
|
|
|
- <!-- <DoughnutChart name="20" /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottom-wrapper">
|
|
|
- <div class="left-wrapper">
|
|
|
- <div class="title">
|
|
|
- <i class="line"></i>
|
|
|
- <span class="text">信贷助手</span>
|
|
|
- <span class="operate">
|
|
|
- 更多
|
|
|
- <i class="iconfont el-icon-arrow-right"></i>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/客诉讼处理专员.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">客诉讼处理专员</p>
|
|
|
- <span class="content">及时、有效解决问题</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/产品推广达人.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">产品推广达人</p>
|
|
|
- <span class="content">精准推荐产品</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/业务办理能手.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">业务办理能手</p>
|
|
|
- <span class="content">智能处理、高效办理</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/风险识别专家.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">风险识别专家</p>
|
|
|
- <span class="content">智能定位风险</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/行业研究专家.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">行业研究专家</p>
|
|
|
- <span class="content">行业信息快速推荐</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/拓客高手.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">拓客高手</p>
|
|
|
- <span class="content">精准拓客、智能助手</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/证书达人.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">证书达人</p>
|
|
|
- <span class="content">学习帮手</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/大师妙笔.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">大师妙笔</p>
|
|
|
- <span class="content">AI智能优化文案</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/资深投资顾问.png" />
|
|
|
- </span>
|
|
|
- <div class="wrap">
|
|
|
- <p class="title">资深投资顾问</p>
|
|
|
- <span class="content">精准服务 助力财富增长</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right-wrapper">
|
|
|
- <div class="title">
|
|
|
- <i class="line"></i>
|
|
|
- <span class="text">快捷入口</span>
|
|
|
- <span class="operate"> 自定义 </span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/对公作业系统.png" />
|
|
|
- </span>
|
|
|
- <p class="title">对公作业系统</p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/评级系统.png" />
|
|
|
- </span>
|
|
|
- <p class="title">评级系统</p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/押品系统.png" />
|
|
|
- </span>
|
|
|
- <p class="title">押品系统</p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/智能贷后系统.png" />
|
|
|
- </span>
|
|
|
- <p class="title">智能贷后系统</p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/反欺诈系统.png" />
|
|
|
- </span>
|
|
|
- <p class="title">反欺诈系统</p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="image">
|
|
|
- <img src="@xdjf/idd/assets/images/首页/贷款计算器.png" />
|
|
|
- </span>
|
|
|
- <p class="title">贷款计算器</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="home-container">
|
|
|
+ <component :is="currentRole" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getTaskCountByStatus } from '@xdjf/idd/api/idd/index.js';
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
-import { lookup } from '@yufp/xy-utils';
|
|
|
-import { CHAT_URL } from '@xdjf/idd/config/constants.js';
|
|
|
-import OverflowTooltipTitle from '@xdjf/idd/components/OverflowTooltipTitle/index.vue';
|
|
|
-import DoughnutChart from './charts/DoughnutChart.vue';
|
|
|
-
|
|
|
-const taskSts = {
|
|
|
- todo: '待办',
|
|
|
- done: '已办',
|
|
|
- completed: '已完结',
|
|
|
-};
|
|
|
-
|
|
|
+import DefaultHome from '@/views/aiTagging/taggingResults/index.vue';
|
|
|
export default {
|
|
|
name: 'Home',
|
|
|
- components: { OverflowTooltipTitle, DoughnutChart },
|
|
|
+ components: {
|
|
|
+ DefaultHome
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- // 任务状态map
|
|
|
- taskSts: taskSts,
|
|
|
- activeName: taskSts.todo,
|
|
|
- // 待办个数
|
|
|
- todoCount: 0,
|
|
|
- // 已办个数
|
|
|
- doneCount: 0,
|
|
|
- // 已完结个数
|
|
|
- complateCount: 0,
|
|
|
- // 小宇问答地址
|
|
|
- chatUrl: CHAT_URL,
|
|
|
- dragstartClientX: 0,
|
|
|
- dragstartClientY: 0,
|
|
|
- // 小宇图片
|
|
|
- xiaoyu: {
|
|
|
- width: 87,
|
|
|
- height: 134,
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
- },
|
|
|
- // 问答框
|
|
|
- chat: {
|
|
|
- show: false,
|
|
|
- height: 0,
|
|
|
- rate: 1.5 / 2,
|
|
|
- minHeight: 400,
|
|
|
- maxHeight: 600,
|
|
|
- },
|
|
|
- // 欢迎语
|
|
|
- box: {
|
|
|
- width: 258,
|
|
|
- height: 104,
|
|
|
- },
|
|
|
- // 关闭按钮高度
|
|
|
- closeIconHeight: 28,
|
|
|
- // 间隙
|
|
|
- gap: 20,
|
|
|
- // 拖拽对象
|
|
|
- draggie: null,
|
|
|
+ // 当前视图组件
|
|
|
+ currentRole: 'DefaultHome'
|
|
|
};
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userName', 'org', 'selectedRoles', 'visitedViews']),
|
|
|
- // 问候语
|
|
|
- greetingTitle() {
|
|
|
- const now = new Date();
|
|
|
- const hour = now.getHours();
|
|
|
- let msg = '';
|
|
|
- if (hour >= 0 && hour <= 10) {
|
|
|
- msg = '早上好! ';
|
|
|
- } else if (hour > 10 && hour <= 14) {
|
|
|
- msg = '中午好! ';
|
|
|
- } else if (hour > 14 && hour <= 18) {
|
|
|
- msg = '下午好! ';
|
|
|
- } else if (hour > 18 && hour <= 24) {
|
|
|
- msg = '晚上好! ';
|
|
|
- }
|
|
|
- return msg;
|
|
|
- },
|
|
|
- // 问答框宽度
|
|
|
- chatWidth() {
|
|
|
- let width = this.chat.height * this.chat.rate;
|
|
|
- if (String(width).includes('.')) {
|
|
|
- width = width.toFixed(0);
|
|
|
- }
|
|
|
- return Number(width);
|
|
|
- },
|
|
|
- // 问答容器样式
|
|
|
- chatIframeContainerStryle() {
|
|
|
- let top = Math.abs(this.xiaoyu.height - this.chat.height - this.gap);
|
|
|
- const chatTotalHeight = this.chat.height + this.gap + this.closeIconHeight / 2;
|
|
|
- const height = this.draggie.element.offsetTop + this.xiaoyu.height;
|
|
|
- if (height < chatTotalHeight) {
|
|
|
- top = top - (chatTotalHeight - height);
|
|
|
- }
|
|
|
-
|
|
|
- let left = this.chatWidth;
|
|
|
- if (this.chatWidth > this.draggie.element.offsetLeft) {
|
|
|
- left = -80;
|
|
|
- }
|
|
|
-
|
|
|
- const style = {
|
|
|
- top: `calc(${-top}px)`,
|
|
|
- left: `calc(0px - ${left}px)`,
|
|
|
- height: `${this.chat.height}px`,
|
|
|
- width: `${this.chatWidth}px`,
|
|
|
- };
|
|
|
- return style;
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.taskStatus = lookup.find('TASK_STATUS', false);
|
|
|
- const { activeTaskStatus } = this.$store.state.iddTask;
|
|
|
- if (activeTaskStatus === null || activeTaskStatus === undefined) {
|
|
|
- this.$store.dispatch('iddTask/setActiveTaskStatus', 0);
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.$store.state.app.sidebar.opened) {
|
|
|
- this.$store.commit('app/TOGGLE_SIDEBAR');
|
|
|
- this.$store.commit('app/SET_MENU_SHOW_STAT', 2);
|
|
|
- }
|
|
|
- // this.getTaskCountByStatus();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async getTaskCountByStatus() {
|
|
|
- try {
|
|
|
- const { code, data } = await getTaskCountByStatus();
|
|
|
- if (code === '0' && data) {
|
|
|
- if (Array.isArray(data)) {
|
|
|
- data.forEach((item) => {
|
|
|
- if (item.taskSts === '0') {
|
|
|
- this.todoCount = item.count;
|
|
|
- } else if (item.taskSts === '1') {
|
|
|
- this.doneCount = item.count;
|
|
|
- } else if (item.taskSts === '2') {
|
|
|
- this.complateCount = item.count;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- } catch (err) {}
|
|
|
- },
|
|
|
- itemClick(status) {
|
|
|
- // return false;
|
|
|
- const toTagView = this.visitedViews.find((item) => item.title === '尽调任务');
|
|
|
- if (toTagView) {
|
|
|
- this.$router.push(toTagView.fullPath);
|
|
|
- } else {
|
|
|
- this.$router.push({
|
|
|
- path: '/@xdjf/intelligent-due-diligence/views/dueDiligenceTask/index',
|
|
|
- });
|
|
|
- }
|
|
|
- const sts = Object.entries(this.taskStatus).find((item) => item[1] === status);
|
|
|
- const value = sts[0] ? Number(sts[0]) : null;
|
|
|
- if (typeof value === 'number') {
|
|
|
- this.$store.dispatch('iddTask/setActiveTaskStatus', value);
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-$min-height: calc(100vh - 108px);
|
|
|
-$top-min-height: 140px;
|
|
|
-$middle-min-height: 200px;
|
|
|
-$bottom-min-height: 350px;
|
|
|
-$base-gap: 16px;
|
|
|
-
|
|
|
-.Home {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100% !important;
|
|
|
- height: 100% !important;
|
|
|
- min-height: $min-height;
|
|
|
- padding: 30px 20px;
|
|
|
- overflow: auto;
|
|
|
- background: #f5f5f5 !important;
|
|
|
- background-color: #f5f5f5 !important;
|
|
|
- box-shadow: none !important;
|
|
|
-
|
|
|
- .top-wrapper,
|
|
|
- .middle-wrapper,
|
|
|
- .bottom-wrapper {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 0 1px #eee;
|
|
|
- }
|
|
|
-
|
|
|
- .top-wrapper {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- //height: calc((100% - $base-gap * 2) * 0.2);
|
|
|
- min-height: $top-min-height;
|
|
|
- padding: 30px 20px;
|
|
|
- background-image: linear-gradient(172deg, rgb(206 235 255 / 40%) 1%, rgb(255 255 255 / 64%) 69%);
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .picture {
|
|
|
- position: absolute;
|
|
|
- top: -20px;
|
|
|
- left: 28px;
|
|
|
- width: 168px;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
-
|
|
|
- .float-item {
|
|
|
- $image-width: 48px;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- width: calc((100% - ($base-gap * 3)) / 5);
|
|
|
- height: 80px;
|
|
|
- margin-left: $base-gap;
|
|
|
- cursor: pointer;
|
|
|
- background: #fff;
|
|
|
- border: 1px solid rgb(235 237 240 / 100%);
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .image {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 20px;
|
|
|
- width: $image-width;
|
|
|
- height: $image-width;
|
|
|
- border-radius: 9.6px;
|
|
|
- transform: translateY(-50%);
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .wrap {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: $base-gap * 2 + $image-width;
|
|
|
- width: calc(100% - 80px);
|
|
|
- height: 48px;
|
|
|
- color: #333;
|
|
|
- transform: translateY(-50%);
|
|
|
-
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- margin-top: 2px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .float-item.greeting {
|
|
|
- box-sizing: border-box;
|
|
|
- width: calc(((100% - ($base-gap * 3)) / 5) * 2);
|
|
|
- margin-left: 0;
|
|
|
- cursor: auto;
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
-
|
|
|
- .wrap {
|
|
|
- left: 210px;
|
|
|
- width: 160px;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 20px;
|
|
|
- color: #296ee6;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #296ee6;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .float-item.active {
|
|
|
- border: 1.5px solid rgb(41 110 230 / 100%);
|
|
|
-
|
|
|
- .image {
|
|
|
- background-image: linear-gradient(134deg, #ddeafc 0%, #fefff7 100%) !important;
|
|
|
- border: 1.2px solid rgb(118 147 226 / 20%) !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .middle-wrapper {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- height: calc((100% - $base-gap * 2) * 0.3);
|
|
|
- min-height: $middle-min-height;
|
|
|
- padding: 20px;
|
|
|
- margin-top: 16px;
|
|
|
-
|
|
|
- .info-wrapper,
|
|
|
- .data-wrapper {
|
|
|
- min-height: 160px;
|
|
|
- }
|
|
|
-
|
|
|
- .info-wrapper {
|
|
|
- $rank-height: 60px;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .warp {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- height: 146px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-
|
|
|
- .avatar {
|
|
|
- position: absolute;
|
|
|
- top: 12px;
|
|
|
- left: 50%;
|
|
|
- width: $rank-height;
|
|
|
- height: $rank-height;
|
|
|
- text-align: center;
|
|
|
- border-radius: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
-
|
|
|
- .role {
|
|
|
- position: absolute;
|
|
|
- top: $rank-height;
|
|
|
- left: 50%;
|
|
|
- width: 60px;
|
|
|
- height: 20px;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
- color: #9f5a11;
|
|
|
- text-align: center;
|
|
|
- background-image: linear-gradient(106deg, #fef2dd 0%, #f9c881 100%);
|
|
|
- border-radius: 2px;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
-
|
|
|
- .username,
|
|
|
- .organization {
|
|
|
- .OverflowTooltipTitle {
|
|
|
- height: inherit;
|
|
|
- line-height: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .username {
|
|
|
- position: absolute;
|
|
|
- top: calc($rank-height + $base-gap + 10px);
|
|
|
- left: 50%;
|
|
|
- max-width: 120px;
|
|
|
- height: 32px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 32px;
|
|
|
- color: #141d1d;
|
|
|
- text-align: center;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
-
|
|
|
- .organization {
|
|
|
- position: absolute;
|
|
|
- bottom: 6px;
|
|
|
- left: 50%;
|
|
|
- max-width: 250px;
|
|
|
- height: 16px;
|
|
|
- padding: 0 20px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
- color: #141d1d;
|
|
|
- text-align: center;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .data-wrapper {
|
|
|
- position: relative;
|
|
|
- flex: 3;
|
|
|
-
|
|
|
- .wrap {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-
|
|
|
- .data-item.my-rank {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .label {
|
|
|
- position: absolute;
|
|
|
- top: 22px;
|
|
|
- left: 24px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #141d1d;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- position: absolute;
|
|
|
- bottom: 34px;
|
|
|
- left: 24px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #4f4f4f;
|
|
|
- }
|
|
|
-
|
|
|
- span.bg-img {
|
|
|
- position: absolute;
|
|
|
- top: 40px;
|
|
|
- right: 40px;
|
|
|
- width: 66px;
|
|
|
- height: 92px;
|
|
|
- background-image: url('@xdjf/idd/assets/images/首页/数据展示/排名.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .rank {
|
|
|
- position: absolute;
|
|
|
- top: 14px;
|
|
|
- left: 50%;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .data-item {
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 1;
|
|
|
- width: calc((100% - $base-gap) / 3);
|
|
|
- min-width: calc((100% - $base-gap) / 3);
|
|
|
- max-width: calc((100% - $base-gap) / 3);
|
|
|
- height: 156px;
|
|
|
- max-height: 200px;
|
|
|
- padding: 12px $base-gap;
|
|
|
- margin-top: 22px;
|
|
|
- background-color: #f7faff;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .top {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
-
|
|
|
- .label {
|
|
|
- float: left;
|
|
|
- font-size: 14px;
|
|
|
- color: #141d1d;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- float: right;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 600;
|
|
|
- color: #141d1d;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- height: calc(100% - 40px);
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .area-chart {
|
|
|
- float: left;
|
|
|
- width: 50%;
|
|
|
- min-width: 155px;
|
|
|
- height: 100% !important;
|
|
|
- min-height: 78px;
|
|
|
-
|
|
|
- img {
|
|
|
- position: relative;
|
|
|
- top: 12px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .doughnut-chart {
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- width: 50%;
|
|
|
- max-width: calc(100% - 155px);
|
|
|
- height: 100%;
|
|
|
- min-height: 80px;
|
|
|
-
|
|
|
- .chat-img {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- background-image: url('@xdjf/idd/assets/images/首页/数据展示/同比.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-
|
|
|
- .rate {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-wrapper {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: calc((100% - $base-gap * 2) * 0.5);
|
|
|
- min-height: $bottom-min-height;
|
|
|
- padding-bottom: $base-gap;
|
|
|
- margin-top: 16px;
|
|
|
- background-color: transparent !important;
|
|
|
-
|
|
|
- .left-wrapper {
|
|
|
- $width: calc(100% * (2 / 3) - $base-gap);
|
|
|
-
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 2;
|
|
|
- width: $width;
|
|
|
- min-width: $width;
|
|
|
- max-width: $width;
|
|
|
- height: 100%;
|
|
|
- padding: 16px;
|
|
|
- margin-right: $base-gap;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
-
|
|
|
- .line {
|
|
|
- position: relative;
|
|
|
- top: 2px;
|
|
|
- display: inline-block;
|
|
|
- width: 4px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 8px;
|
|
|
- background-color: #1f66fe;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .operate {
|
|
|
- float: right;
|
|
|
- font-size: 14px;
|
|
|
- color: #78797e;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- height: calc(100% - 24px - $base-gap);
|
|
|
- margin-top: $base-gap;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .item {
|
|
|
- $width: calc((100% - 10px * 2) / 3);
|
|
|
- $image-width: 50px;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 1;
|
|
|
- width: $width;
|
|
|
- min-width: $width;
|
|
|
- max-width: $width;
|
|
|
- height: 80px;
|
|
|
- cursor: pointer;
|
|
|
- background-color: #f5f8fe;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #ccc;
|
|
|
- }
|
|
|
-
|
|
|
- .image {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: $base-gap;
|
|
|
- width: $image-width;
|
|
|
- height: $image-width;
|
|
|
- background-color: #797979;
|
|
|
- border-radius: 8px;
|
|
|
- transform: translateY(-50%);
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .wrap {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: calc($base-gap + $image-width + 10px);
|
|
|
- box-sizing: border-box;
|
|
|
- width: calc(100% - $base-gap - $image-width - $base-gap);
|
|
|
- height: $image-width;
|
|
|
- transform: translateY(-50%);
|
|
|
-
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- color: #909090;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-wrapper {
|
|
|
- $width: calc(100% * (1 / 3));
|
|
|
-
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 1;
|
|
|
- width: $width;
|
|
|
- min-width: $width;
|
|
|
- max-width: $width;
|
|
|
- height: 100%;
|
|
|
- padding: 16px;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
-
|
|
|
- .line {
|
|
|
- position: relative;
|
|
|
- top: 2px;
|
|
|
- display: inline-block;
|
|
|
- width: 4px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 8px;
|
|
|
- background-color: #1f66fe;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .operate {
|
|
|
- float: right;
|
|
|
- font-size: 14px;
|
|
|
- color: #78797e;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- height: calc(100% - 24px - $base-gap);
|
|
|
- margin-top: $base-gap;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .item {
|
|
|
- $width: calc((100% - 10px) / 2);
|
|
|
- $image-width: 50px;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 1;
|
|
|
- width: $width;
|
|
|
- min-width: $width;
|
|
|
- max-width: $width;
|
|
|
- height: 80px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .image {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
- width: $image-width;
|
|
|
- height: $image-width;
|
|
|
- border-radius: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- width: 100px;
|
|
|
- height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .xiaoyu {
|
|
|
- // 小宇宽高
|
|
|
- $xy-width: 87px;
|
|
|
- $xy-height: 134px;
|
|
|
- // 欢迎语宽高
|
|
|
- $box-width: 258px;
|
|
|
- $box-height: 104px;
|
|
|
- // 问答框宽高
|
|
|
- $iframe-width: 400px;
|
|
|
- $iframe-height: 600px;
|
|
|
- // 间隙
|
|
|
- $gap: 20px;
|
|
|
- // z轴值
|
|
|
- $z-index: 10001;
|
|
|
-
|
|
|
- position: fixed;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: $z-index;
|
|
|
- display: inline-block;
|
|
|
- width: $xy-width;
|
|
|
- height: $xy-height;
|
|
|
- cursor: pointer;
|
|
|
- background-image: url('@xdjf/idd/assets/images/首页/小宇.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- span.box {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span.box {
|
|
|
- position: absolute;
|
|
|
- top: calc(0px - ($xy-height - $box-height) - $gap);
|
|
|
- left: calc(0px - $box-width + 10px);
|
|
|
- z-index: 200;
|
|
|
- display: none;
|
|
|
- width: $box-width;
|
|
|
- height: $box-height;
|
|
|
- background-image: url('@xdjf/idd/assets/images/首页/对话框.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- background-size: calc(100% + $gap * 2) calc(100% + $gap * 2);
|
|
|
-
|
|
|
- .value1 {
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 70px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .value2 {
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- left: 70px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chat-iframe-container {
|
|
|
- position: absolute;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 0 15px #ccc;
|
|
|
-
|
|
|
- .chat-iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .close-icon {
|
|
|
- $icon-size: 28px;
|
|
|
-
|
|
|
- position: absolute;
|
|
|
- top: calc(0px - ($icon-size / 2));
|
|
|
- right: calc(0px - ($icon-size / 2));
|
|
|
- z-index: calc($z-index + 1);
|
|
|
- font-size: $icon-size;
|
|
|
- color: #333;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
+.home-container {
|
|
|
+ background: transparent!important;
|
|
|
+ box-shadow: none!important;
|
|
|
}
|
|
|
</style>
|