<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>症状</title>
<style>
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.title {
font-size: 0.42rem;
height: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}
.myIndentNav_div {
overflow: hidden;
position: fixed;
top:0;
left: 0;
right: 0;
width: 100%;
z-index: 9999;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.myIndentNav {
width: 100%;
overflow-x: auto;
height: 0.85rem;
line-height: 0.95rem;
float: left;
white-space: nowrap;
overflow-y: hidden;
display: flex;
}
.myIndentNav::-webkit-scrollbar {
display: none;
}
.myIndentNav li {
padding: 0 0.16rem;
float: left;
color: #0a0a0a;
position: relative;
font-size: 0.28rem;
position: relative;
color: #999999;
}
.myIndentNav .active {
color: #0089ff;
font-weight: 500;
}
.myIndentNav .active::after {
content: "";
width: 20px;
height: 3px;
background: #0089ff;
border-radius: 2px 2px 2px 2px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.myIndentNav .active span {
width: 0.12rem;
height: 0.04rem;
display: block;
position: absolute;
left: 50%;
bottom: 0.02rem;
transform: translateX(-50%);
border-radius: 0.04rem;
}
.myIndentNav div {
display: none;
height: 0.16rem;
min-width: 0.16rem;
border-radius: 0.08rem;
text-align: center;
line-height: 0.16rem;
font-size: 0.12rem;
color: white;
position: absolute;
top: 0.05rem;
right: 0.02rem;
padding: 0 0.04rem;
box-sizing: border-box;
}
#app {
height: 100vh;
background: #ffffff;
}
.content {
padding: 1.2rem 0.1rem 0.4rem;
}
.content .item {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
}
.content .item .but {
width: 1.9rem;
height: 0.5rem;
padding: 0.1rem 0.16rem;
text-align: center;
font-size: 0.32rem;
background: #f4f4f4;
border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
border-radius: 0.3rem;
margin-right: 0.2rem;
margin-bottom: 0.26rem;
}
.content .item .but:nth-of-type(3) {
margin-right: 0;
}
.tab-active {
background: #f2f8ff;
border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
opacity: 1;
border: 1px solid #0089ff;
color: #0089ff;
}
.no-table {
border: 1px solid #cee5f9;
color: #333333;
background: none;
}
.data {
font-size: 0.28rem;
}
.son-title-son {
display: flex;
justify-content: space-between;
padding: 0.32rem 0.24rem 0 0;
background: #ffffff;
border-radius: 0.08rem;
}
.common-label {
color: #333333;
}
.left-line {
position: relative;
}
.left-line::before {
content: "";
display: inline-block;
position: absolute;
top: 0.08rem;
width: 0.08rem;
height: 0.3rem;
background-color: #0089ff;
border-top-right-radius: 0.08rem;
border-bottom-right-radius: 0.08rem;
}
.son-title-text {
padding-left: 0.24rem;
font-size: 0.3rem;
}
.text {
padding: 0.32rem 0.24rem 0.24rem 0.16rem;
background: #f4f4f4;
margin: 0.2rem;
border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}
.text-inner {
margin-bottom: 0.16rem;
font-size: 0.26rem;
}
.text-inner span:nth-of-type(1) {
color: #999999;
}
.red{
color: red;
}
.origin{
color: #FF931D;
}
</style>
</head>
<body>
<div id="app">
<div class="myIndentNav_div">
<ul class="myIndentNav">
<li
v-for="(item,index) in stateList"
:key="index"
@click="clickCurrent(item,index)"
:class="currentIndex == index?'active':''"
data-id="all"
>
{{item.name}}
</li>
</ul>
</div>
<div class="content">
<div class="item" v-if="currentIndex == 0">
<div
class="but"
v-for="(item,index) in tabl1"
@click="clickTable(item,'a')"
:key="index"
:class="item.select?'tab-active':''"
>
{{item.name}}
</div>
</div>
<div class="item" v-if="currentIndex == 1">
<div
class="but"
v-for="(item,index) in tabl2"
@click="clickTable(item,'b')"
:key="index"
:class="item.select?'tab-active':''"
>
{{item.name}}
</div>
</div>
<div class="item" v-if="currentIndex == 2">
<div
class="but"
v-for="(item,index) in tabl3"
@click="clickTable(item,'c')"
:key="index"
:class="item.select?'tab-active':''"
>
{{item.name}}
</div>
</div>
<div class="item" v-if="currentIndex == 3">
<div
class="but"
v-for="(item,index) in tabl4"
@click="clickTable(item,'d')"
:key="index"
:class="item.select?'tab-active':''"
>
{{item.name}}
</div>
</div>
<div class="item" v-if="currentIndex == 4">
<div
class="but"
v-for="(item,index) in tabl5"
@click="clickTable(item,'e')"
:key="index"
:class="item.select?'tab-active':''"
>
{{item.name}}
</div>
</div>
<div class="item" v-if="currentIndex == 5">
<div
class="but"
v-for="(item,index) in tabl6"
@click="clickTable(item,'f')"
:key="index"
:class="item.select?'tab-active':''"
>
{{item.name}}
</div>
</div>
</div>
<div class="data" v-if="TotalNum">
<div class="tip-content">
<div class="son-title-son">
<div class="common-label left-line">
<span class="son-title-text">Tips</span>
</div>
</div>
<div class="text">
<div class="text-inner">
<span>结果：</span>
<span :class="computedContent == '警示'?'origin':computedContent =='立即医治'?'red':''">{{computedContent}}</span>
</div>
<div class="text-inner" v-if="this.TotalNum<=0.5">
<span>建议：</span>
<span >{{contentdSuggestion}}</span>
</div>
</div>
</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script></script>
<script>
var app = new Vue({
el: "#app",
data: {
timer: null,
currentIndex: 0,
currentTab: null,
stateList: [
{
id: 0,
name: "疼痛",
},
{
id: 1,
name: "全身症状",
},
{
id: 2,
name: "胃肠道症状",
},
{
id: 3,
name: "心律失常",
},
{
id: 4,
name: "低血压和休克",
},
{
id: 5,
name: "心力衰竭",
},
],
TotalNum: null,
tabl1: [
{
id: 1,
name: "心前区疼痛",
weight: '0.026680043',
select: false,
},
{
id: 2,
name: "心绞痛",
weight: '0.08004013',
select: false,
},
],
tabl2: [
{
id: 1,
name: "心动过速",
weight: 0.006610623,
select: false,
},
{
id: 2,
name: "发热",
weight: 0.01983187,
select: false,
},
],
tabl3: [
{
id: 1,
name: "恶心、呕吐",
weight: 0.027403703,
select: false,
},
{
id: 2,
name: "上腹胀痛",
weight: 0.013701851,
select: false,
},
],
tabl4: [
{
id: 1,
name: "乏力",
weight: 0.007390595,
select: false,
},
{
id: 2,
name: "头昏",
weight: 0.036386877,
select: false,
},
{
id: 3,
name: "昏厥",
weight: 0.126829961,
select: false,
},
{
id: 4,
name: "心跳加速",
weight: 0.014794363,
select: false,
},
{
id: 5,
name: "血压升高",
weight: 0.029495679,
select: false,
},
],
tabl5: [
{
id: 1,
name: "尿量减少",
weight: 0.012349873,
select: false,
},
{
id: 2,
name: "大汗淋漓",
weight: 0.008814217,
select: false,
},
{
id: 3,
name: "面色苍白",
weight: 0.037049619,
select: false,
},
{
id: 4,
name: "烦躁不安",
weight: 0.02472176,
select: false,
},
{
id: 5,
name: "神志迟钝",
weight: 0.129662865,
select: false,
},
],
tabl6: [
{
id: 1,
name: "呼吸困难",
weight: 0.094599309,
select: false,
},
{
id: 2,
name: "发绀",
weight: 0.206031486,
select: false,
},
{
id: 3,
name: "静脉怒张",
weight: 0.066891813,
select: false,
},
{
id: 4,
name: "水肿",
weight: 0.030713361,
select: false,
},
],
choosedList: [],
num:0
},
created() {
this.resize();
},
mounted() {
let that = this;
window.addEventListener("resize", function () {
this.timer = setTimeout(that.resize(), 300);
});
},
computed:{
computedContent(){
let con = null
if(this.TotalNum<=0.1){
con = "轻微波动"
}else if(this.TotalNum>=0.1&&this.TotalNum<=0.2){
con = "引起注意"
}else if(this.TotalNum>=0.2&&this.TotalNum<=0.5){
con = "警示"
}else if(this.TotalNum>=0.5&&this.TotalNum<=1){
con = "立即医治"
}
return con
},
contentdSuggestion(){
let con = null
if(this.TotalNum<=0.1){
con = "对症吃药"
}else if(this.TotalNum>=0.1&&this.TotalNum<=0.2){
con = "观察期"
}else if(this.TotalNum>=0.2&&this.TotalNum<=0.5){
con = "建议就医"
}
return con
}
},
methods: {
clickTable(item, type) {
this.currentTab = item.id;
item.select = !item.select;
let arr = [...this.tabl1,...this.tabl2,...this.tabl3,...this.tabl4,...this.tabl5,...this.tabl6]
this.getTotal(arr,item)
},
getTotal(arr,V){
this.TotalNum = 0;
arr.forEach(item=>{
if(item.select){
this.TotalNum += Number(item.weight)
}
})
},
clickCurrent(item, index) {
this.currentIndex = index;
},
resize() {
let root = document.documentElement;
let width = root.getBoundingClientRect().width;
console.log(width);
if (
/Android|webOS|iPhone|iPod|BlackBerry|WindowsCE/i.test(
navigator.userAgent
)
) {
if (width > 750) {
width = 750;
}
root.style.fontSize = width / 7.5 + "px";
console.log(width, root.style.fontSize);
} else {
if (width > 1920) {
width = 1920;
}
root.style.fontSize = width / 19.2 + "px";
console.log(width, root.style.fontSize);
}
},
},
});
</script>
</body>
</html>
