Skip to content

V
vue-composition-api
Commit d12187db by Licx
Options

css报错修改

parent 68c4e055
Showing with 798 additions and 723 deletions
src/views/outseeQualityControl.vue
......@@ -6,788 +6,863 @@
* @Description:
-->
<template>
<!-- 查看质控 -->
<div class="outseeQualityControl">
<div class="outseeQualityControl_box">
<div class="outseeQualityControl_box_btn">
<el-button class="outseeQualityControl_box_btn_button" size="mini" type="primary" @click="getSynchronous">同步数据</el-button>
<!-- 查看质控 -->
<div class="outseeQualityControl">
<div class="outseeQualityControl_box">
<div class="outseeQualityControl_box_btn">
<el-button
class="outseeQualityControl_box_btn_button"
size="mini"
type="primary"
@click="getSynchronous"
>同步数据</el-button
>
</div>
<div class="outseeQualityControl_box_header">
<div class="outseeQualityControl_box_header_text"></div>
</div>
<div class="outseeQualityControl_box_Content">
<div class="outseeQualityControl_box_Content_left">
<medical-record-homepage
:medicalrecord="medicalrecord"
:clicktitle="clicktitle"
>
</medical-record-homepage>
</div>
<div class="outseeQualityControl_box_Content_right">
<div class="outseeQualityControl_box_Content_right_top">
<!--非编码问题 -->
<div
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left'
: 'outseeQualityControl_box_Content_right_top_left11'
]"
@click="leftcode"
>
<div class="outseeQualityControl_box_Content_right_top_left_div1">
<img
src="../assets/img/fbm.png"
alt=""
v-show="isleftcodeShow"
/>
<img
src="../assets/img/bm.png"
alt=""
v-show="!isleftcodeShow"
/>
</div>
<div class="outseeQualityControl_box_Content_right_top_left_div2">
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
: 'outseeQualityControl_box_Content_right_top_left_div2_span11'
]"
>{{ fruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
: 'outseeQualityControl_box_Content_right_top_left_div2_span22'
]"
>非编码问题</span
>
</div>
</div>
<div class="outseeQualityControl_box_header">
<div class="outseeQualityControl_box_header_text"></div>
<!-- 编码问题 -->
<div
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right'
: 'outseeQualityControl_box_Content_right_top_right11'
]"
@click="rightcode"
>
<div
class="outseeQualityControl_box_Content_right_top_right_div1"
>
<img
src="../assets/img/fbm.png"
alt=""
v-show="!isleftcodeShow"
/>
<img
src="../assets/img/bm.png"
alt=""
v-show="isleftcodeShow"
/>
</div>
<div
class="outseeQualityControl_box_Content_right_top_right_div2"
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
: 'outseeQualityControl_box_Content_right_top_right_div2_span11'
]"
>{{ ruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
: 'outseeQualityControl_box_Content_right_top_right_div2_span22'
]"
>编码问题</span
>
</div>
</div>
<div class="outseeQualityControl_box_Content">
<div class="outseeQualityControl_box_Content_left">
<medical-record-homepage :medicalrecord="medicalrecord" :clicktitle="clicktitle"> </medical-record-homepage>
</div>
<div class="outseeQualityControl_box_Content_right">
<div class="outseeQualityControl_box_Content_right_top">
<!--非编码问题 -->
<div
:class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_left' : 'outseeQualityControl_box_Content_right_top_left11']"
@click="leftcode"
</div>
<div class="outseeQualityControl_box_Content_right_center">
<div
class="outseeQualityControl_box_Content_right_center_line"
v-show="isleftcodeShow"
></div>
<div
class="outseeQualityControl_box_Content_right_center_line2"
v-show="!isleftcodeShow"
></div>
</div>
<div class="outseeQualityControl_box_Content_right_bottom">
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
<div
class="outseeQualityControl_box_Content_right_bottom_tree"
v-show="isleftcodeShow"
>
<el-tree
:data="departmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div
class="leftbox"
:class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']"
>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span
:class="[
data.ruleName == '非编码问题' ? 'spans' : ''
]"
>{{ data.ruleName }}</span
>
<div class="outseeQualityControl_box_Content_right_top_left_div1">
<img src="../assets/img/fbm.png" alt="" v-show="isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="!isleftcodeShow" />
</div>
<div class="outseeQualityControl_box_Content_right_top_left_div2">
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
: 'outseeQualityControl_box_Content_right_top_left_div2_span11',
]"
>{{ fruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
: 'outseeQualityControl_box_Content_right_top_left_div2_span22',
]"
>非编码问题</span
>
</div>
</div>
<!-- 编码问题 -->
<div
:class="[
isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_right' : 'outseeQualityControl_box_Content_right_top_right11',
]"
@click="rightcode"
>
<div class="outseeQualityControl_box_Content_right_top_right_div1">
<img src="../assets/img/fbm.png" alt="" v-show="!isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="isleftcodeShow" />
</div>
<div class="outseeQualityControl_box_Content_right_top_right_div2">
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
: 'outseeQualityControl_box_Content_right_top_right_div2_span11',
]"
>{{ ruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
: 'outseeQualityControl_box_Content_right_top_right_div2_span22',
]"
>编码问题</span
>
</div>
</div>
</div>
<div class="outseeQualityControl_box_Content_right_center">
<div class="outseeQualityControl_box_Content_right_center_line" v-show="isleftcodeShow"></div>
<div class="outseeQualityControl_box_Content_right_center_line2" v-show="!isleftcodeShow"></div>
</el-tooltip>
</div>
<div class="outseeQualityControl_box_Content_right_bottom">
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="isleftcodeShow">
<el-tree
:data="departmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']">
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span :class="[data.ruleName == '非编码问题' ? 'spans' : '']">{{ data.ruleName }}</span>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
</div>
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="!isleftcodeShow">
<el-tree
:data="rightdepartmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
v-show="!isnodataShow"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']">
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span :class="[data.ruleName == '编码问题' ? 'spans' : '']">{{ data.ruleName }}</span>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata" v-show="isnodataShow">
<img class="outseeQualityControl_box_Content_right_bottom_tree_nodata_img" src="../assets/img/mininodata.png" alt="" />
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata_text">暂无数据</div>
</div>
</div>
</span>
</template>
</el-tree>
</div>
<div
class="outseeQualityControl_box_Content_right_bottom_tree"
v-show="!isleftcodeShow"
>
<el-tree
:data="rightdepartmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
v-show="!isnodataShow"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div
class="leftbox"
:class="[data.ruleName != '编码问题' ? 'leftboxs' : '']"
>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span
:class="[data.ruleName == '编码问题' ? 'spans' : '']"
>{{ data.ruleName }}</span
>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
<div
class="outseeQualityControl_box_Content_right_bottom_tree_nodata"
v-show="isnodataShow"
>
<img
class="outseeQualityControl_box_Content_right_bottom_tree_nodata_img"
src="../assets/img/mininodata.png"
alt=""
/>
<div
class="outseeQualityControl_box_Content_right_bottom_tree_nodata_text"
>
暂无数据
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import http from "../utils/http";
import medicalRecordHomepage from "../components/medicalRecordHomepage/index.vue";
import $ from "jquery";
import { setItem, getItem } from "../utils/auth";
import { Message, Loading } from "element-ui";
import http from '../utils/http'
import medicalRecordHomepage from '../components/medicalRecordHomepage/index.vue'
import $ from 'jquery'
import { setItem, getItem } from '../utils/auth'
import { Message, Loading } from 'element-ui'
export default {
components: {
medicalRecordHomepage,
components: {
medicalRecordHomepage
},
name: 'outseeQualityControl',
data() {
return {
medicalrecord: null,
ScoringDetails: null,
caseHistoryScoreData: null,
departmentTree: [], //非编码问题数据
rightdepartmentTree: [], //编码问题数据
isleftcodeShow: true, //非编码问题数据是否显示
defaultProps: {
children: 'rulesLists',
label: 'ruleName'
},
clicktitle: '',
fruleCount: '', //非编码问题数据条数
ruleCount: '', //编码问题数据条数
isnodataShow: false, //编码是否有数据,
inhtml: '',
splithtml: '', //
splithtml2: '', //单位电话
splithtml3: '', //病房
keys: [], //获取所有的问卷key
values: [], //
loadingOption1: {
// 加载loading
fullscreen: true,
text: '正在加载...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)'
}
}
},
mounted() {
if (this.$route.query.id) {
this.getScoringDetails(this.$route.query.id)
this.getHomePage(this.$route.query.id)
setItem('outpid', this.$route.query.id)
}
},
methods: {
//同步数据
getSynchronous(id) {
http
.post(`/medical/get/Synchronization?id=${this.$route.query.id}`)
.then((data) => {
Message.success(data.message)
})
.catch((error) => {
Message.error(error)
})
},
name: "outseeQualityControl",
data() {
return {
medicalrecord: null,
ScoringDetails: null,
caseHistoryScoreData: null,
departmentTree: [], //非编码问题数据
rightdepartmentTree: [], //编码问题数据
isleftcodeShow: true, //非编码问题数据是否显示
defaultProps: {
children: "rulesLists",
label: "ruleName",
},
clicktitle: "",
fruleCount: "", //非编码问题数据条数
ruleCount: "", //编码问题数据条数
isnodataShow: false, //编码是否有数据,
inhtml: "",
splithtml: "", //
splithtml2: "", //单位电话
splithtml3: "", //病房
keys: [], //获取所有的问卷key
values: [], //
loadingOption1: {
// 加载loading
fullscreen: true,
text: "正在加载...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
},
};
//获取到点击的值
handleNodeClick(data) {
let arr = document.getElementsByClassName(data.columnName)
let dom = $('#medicalRecord').find('#clickColor')
if (dom.length != 0) {
dom.removeAttr('id')
}
arr[0].setAttribute('id', 'clickColor')
this.scrollTop()
},
mounted() {
if (this.$route.query.id) {
this.getScoringDetails(this.$route.query.id);
this.getHomePage(this.$route.query.id);
setItem("outpid", this.$route.query.id);
}
scrollTop() {
if ($('#clickColor').position()) {
$('.outseeQualityControl_box_Content_left').animate(
{
scrollTop:
$('#clickColor').offset().top -
$('.outseeQualityControl_box_Content_left').offset().top +
$('.outseeQualityControl_box_Content_left').scrollTop() -
300
},
500
)
}
},
methods: {
//同步数据
getSynchronous(id) {
http.post(`/medical/get/Synchronization?id=${this.$route.query.id}`)
.then((data) => {
Message.success(data.message);
})
.catch((error) => {
Message.error(error);
});
},
//获取到点击的值
handleNodeClick(data) {
let arr = document.getElementsByClassName(data.columnName);
let dom = $("#medicalRecord").find("#clickColor");
if (dom.length != 0) {
dom.removeAttr("id");
}
arr[0].setAttribute("id", "clickColor");
this.scrollTop();
},
scrollTop() {
if ($("#clickColor").position()) {
$(".outseeQualityControl_box_Content_left").animate(
{
scrollTop:
$("#clickColor").offset().top -
$(".outseeQualityControl_box_Content_left").offset().top +
$(".outseeQualityControl_box_Content_left").scrollTop() -
300,
},
500
);
}
},
//获取患者基本信息树形数据
getScoringDetails(id) {
var loadingInstance1 = Loading.service(this.loadingOption1);
http.post(`/medical/get/GetCaseHisRule?id=${id}`, {})
.then((data) => {
this.departmentTree = data[0].rulesLists;
this.rightdepartmentTree = data[1].rulesLists;
this.fruleCount = data[0].ruleCount;
this.ruleCount = data[1].ruleCount;
if (this.fruleCount == 0 || this.ruleCount == 0) {
this.isnodataShow = true;
}
loadingInstance1.close();
})
.catch((error) => {
loadingInstance1.close();
});
},
// 获取病案首页数据
getHomePage(id) {
http.post(`/medical/Get/HomeHisPage?id=${id}`, {})
.then((data) => {
this.medicalrecord = data;
this.keys = Object.keys(data);
})
.catch((error) => {});
},
//点击非编码问题
leftcode() {
this.isleftcodeShow = true;
},
//点击编码问题
rightcode() {
this.isleftcodeShow = false;
},
//获取患者基本信息树形数据
getScoringDetails(id) {
var loadingInstance1 = Loading.service(this.loadingOption1)
http
.post(`/medical/get/GetCaseHisRule?id=${id}`, {})
.then((data) => {
this.departmentTree = data[0].rulesLists
this.rightdepartmentTree = data[1].rulesLists
this.fruleCount = data[0].ruleCount
this.ruleCount = data[1].ruleCount
if (this.fruleCount == 0 || this.ruleCount == 0) {
this.isnodataShow = true
}
loadingInstance1.close()
})
.catch((error) => {
loadingInstance1.close()
})
},
};
// 获取病案首页数据
getHomePage(id) {
http
.post(`/medical/Get/HomeHisPage?id=${id}`, {})
.then((data) => {
this.medicalrecord = data
this.keys = Object.keys(data)
})
.catch((error) => {})
},
//点击非编码问题
leftcode() {
this.isleftcodeShow = true
},
//点击编码问题
rightcode() {
this.isleftcodeShow = false
}
}
}
</script>
<style lang="scss">
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#app {
height: 100%;
width: 100%;
height: 100%;
width: 100%;
}
.outseeQualityControl {
height: 100%;
width: 100%;
background-color: white;
// overflow: hidden;
// position: relative;
#clickColor {
background-color: #f3bf18;
height: 100%;
width: 100%;
background-color: white;
// overflow: hidden;
// position: relative;
#clickColor {
background-color: #f3bf18;
}
&_box {
background-color: #f3fafd;
padding: 2%;
height: 92%;
&_btn {
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
&_button {
background-color: #2cabe3;
color: #fff;
}
}
&_box {
background-color: #f3fafd;
padding: 2%;
&_header {
height: 25px;
margin-bottom: 20px;
background: url('../assets/img/dataMaintenance/title.png') no-repeat;
background-size: 100% 100%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&_text {
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
margin-left: 15px;
}
}
&_Content {
display: flex;
// flex-direction: row;
height: calc(100% - 100px);
// width: 100%;
justify-content: space-between;
// align-items: center;
// align-content: center;
// flex-wrap: nowrap;
// margin-top: 20px;
&_left {
width: 60%;
background-color: #ffffff;
height: 92%;
padding: 2% 4%;
overflow: auto;
overflow-x: hidden;
}
&_right {
width: 32%;
flex: 1;
margin-left: 1%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
&_btn {
width: 100%;
height: 40px;
&_top {
background: #ffffff;
border-radius: 8px;
height: 16%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
// padding: 3% 10%;
&_left {
flex: 1;
height: 100%;
border-radius: 8px;
background-image: url('../assets/img/BG.png');
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
&_button {
background-color: #2cabe3;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
}
&_header {
height: 25px;
margin-bottom: 20px;
background: url("../assets/img/dataMaintenance/title.png") no-repeat;
background-size: 100% 100%;
width: 100%;
.leftblue {
color: #2cabe3;
}
}
&_left11 {
flex: 1;
height: 100%;
border-radius: 8px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&_text {
font-size: 13px;
font-family: PingFang SC;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 63px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
color: #ffffff;
margin-left: 15px;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
}
&_Content {
.leftblue {
color: #2cabe3;
}
}
&_right {
height: 100%;
flex: 1;
border-radius: 8px;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: white;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: white;
font-size: 16px;
font-weight: 500;
}
}
}
&_right11 {
flex: 1;
height: 100%;
border-radius: 8px;
background-image: url('../assets/img/BG.png');
background-repeat: no-repeat;
background-position: center;
display: flex;
// flex-direction: row;
height: calc(100% - 100px);
// width: 100%;
justify-content: space-between;
// align-items: center;
// align-content: center;
// flex-wrap: nowrap;
// margin-top: 20px;
&_left {
width: 60%;
background-color: #ffffff;
height: 92%;
padding: 2% 4%;
overflow: auto;
overflow-x: hidden;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_right {
width: 32%;
flex: 1;
margin-left: 1%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
&_top {
background: #ffffff;
border-radius: 8px;
height: 16%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
// padding: 3% 10%;
&_left {
flex: 1;
height: 100%;
border-radius: 8px;
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
}
}
&_left11 {
flex: 1;
height: 100%;
border-radius: 8px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 63px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
&_center {
width: 100%;
height: 2%;
background-color: #ffff;
display: flex;
&_line {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
}
&_line2 {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
margin-left: 50%;
}
}
&_right {
height: 100%;
flex: 1;
border-radius: 8px;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: white;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: white;
font-size: 16px;
font-weight: 500;
}
}
}
&_bottom {
background: #ffffff;
border-radius: 8px;
height: 100%;
width: 100%;
// padding: 0 5% 5% 5%;
&_right11 {
flex: 1;
height: 100%;
border-radius: 8px;
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
}
}
&_title {
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #6a707e;
line-height: 40px;
&_center {
width: 100%;
height: 2%;
background-color: #ffff;
display: flex;
height: 10%;
&_line {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
}
// @include flexLayout;
&_line2 {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
margin-left: 50%;
}
}
justify-content: left;
}
&_bottom {
background: #ffffff;
border-radius: 8px;
height: 100%;
width: 100%;
// padding: 0 5% 5% 5%;
&_tree {
height: 100%;
overflow-x: hidden;
.is-leaf {
visibility: hidden;
}
&_title {
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #6a707e;
line-height: 40px;
.leftboxs {
border-bottom: 1px dashed #dddddd;
}
height: 10%;
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
white-space: pre-wrap;
text-overflow: ellipsis;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
overflow: hidden;
width: 92%;
white-space: nowrap;
text-overflow: ellipsis;
}
.spans {
color: #2cabe3;
font-weight: 500;
}
}
// @include flexLayout;
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
color: #ff3333;
line-height: 22px;
justify-content: left;
}
width: 50%;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 5%;
span {
color: rgba(106, 112, 126, 1);
}
}
.el-tree {
width: 98%;
height: 85px;
&_tree {
.is-leaf {
visibility: hidden;
}
height: 100%;
overflow-x: hidden;
.leftboxs {
border-bottom: 1px dashed #dddddd;
}
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
white-space: pre-wrap;
text-overflow: ellipsis;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
overflow: hidden;
width: 92%;
white-space: nowrap;
text-overflow: ellipsis;
}
.spans {
color: #2cabe3;
font-weight: 500;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
color: #ff3333;
line-height: 22px;
width: 50%;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 5%;
span {
color: rgba(106, 112, 126, 1);
}
}
.el-tree {
width: 98%;
height: 85px;
.el-tree-node__content {
height: 85px;
}
.el-tree-node.is-current > .el-tree-node__content {
height: 85px;
/* background: #5fc3f0; */
.custom-tree-node {
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
}
}
}
.el-tree-node {
white-space: initial;
}
&_nodata {
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_img {
width: 80px;
height: 80px;
}
&_text {
color: #abafb3;
font-family: PingFang SC;
font-size: 14px;
}
}
.el-tree-node__content {
height: 85px;
}
.el-tree-node.is-current > .el-tree-node__content {
height: 85px;
/* background: #5fc3f0; */
.custom-tree-node {
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
}
}
}
}
}
.custom-tree-node {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
height: 100%;
}
.el-tree-node {
white-space: initial;
}
.el-tree > .el-tree-node {
//父级加下滑线
// border-bottom: 1px dashed #dddddd;
}
&_nodata {
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
//修改三角icon样式
.el-icon-caret-right {
font-size: 18px;
color: #e4e4e4;
}
&_img {
width: 80px;
height: 80px;
}
.el-tree-node__content .el-tree-node__label {
//子集字体小一号
font-size: 14;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
&_text {
color: #abafb3;
font-family: PingFang SC;
font-size: 14px;
}
}
}
}
}
}
}
.el-tree-node__children .el-tree-node__label {
//子集字体小一号
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
.custom-tree-node {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
height: 100%;
}
.el-tree > .el-tree-node {
//父级加下滑线
// border-bottom: 1px dashed #dddddd;
}
//修改三角icon样式
.el-icon-caret-right {
font-size: 18px;
color: #e4e4e4;
}
.el-tree-node__content .el-tree-node__label {
//子集字体小一号
font-size: 14;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
.el-tree-node__children .el-tree-node__label {
//子集字体小一号
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
}
</style>
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment