console
var data = {
"title": "基于销售场景的推荐方案应用",
"ques": [
{
"id": 1,
"info": "请选择项目机构",
"opt":[
{"key": "公立医院","val":3},
{"key": "私立医院","val":3},
{"key": "第三方影像中心","val":13},
{"key": "第三方体检中心","val":14},
{"key": "其他","val":2}
]
},
{
"id": 2,
"info": "请选择项目机构",
"opt":[
{"key": "医学鉴定中心","val":22},
{"key": "其他","val":15}
]
},
{
"id": 3,
"info": "请选择项目科室",
"opt":[
{"key": "影像科","val":4},
{"key": "临床科室","val":6},
{"key": "医务科","val":23},
{"key": "医教科","val":24},
{"key": "其他","val":4}
]
},
{
"id": 4,
"info": "项目性质",
"opt":[
{"key": "旧科室翻新","val":7},
{"key": "旧科室改造","val":7},
{"key": "科室扩建/合并","val": 7 },
{"key": "引进影像专家门诊","val":26},
{"key": "有提升诊断水平需求","val":27},
{"key": "有规培生、学生进修学习需求","val":28},
{"key": "其他","val":5}
]
},
{
"id": 5,
"info": "项目性质",
"opt":[
{"key": "区域质控中心","val":21},
{"key": "新建医技楼","val":29},
{"key": "新增设备","val":30},
{"key": "PACS系统升级","val":31},
{"key": "医院升级、规模增长","val":32},
{"key": "其他","val":12}
]
},
{
"id": 6,
"info": "项目性质",
"opt":[
{"key": "有影像阅片、讨论需求","val":33},
{"key": "有会诊需求","val":34},
{"key": "其他","val":15}
]
},
{
"id": 7,
"info": "本院共有几个院区",
"opt":[
{"key": "只有1个","val":10},
{"key": "1个以上","val":11}
]
},
{
"id": 9,
"info": " 单位性质",
"opt":[
{"key": "医联体发起单位","val":35},
{"key": "医联体参与单位","val":36}
]
},
{
"id": 10,
"info": " 科室人数及规模",
"opt":[
{"key": "1个房间10人以内","val":37},
{"key": "1个房间10人以上","val":38},
{"key": "两个房间","val":43}
]
},
{
"id": 11,
"info": " 是否多院区同一主任",
"opt":[
{"key": "是","val":40},
{"key": "否","val":41}
]
},
{
"id": 12,
"info": " 有加入医联体需求",
"opt":[
{"key": "有","val":9},
{"key": "没有","val":15}
]
},
{
"id": 13,
"info": " 本机构目前是否连锁经营",
"opt":[
{"key": "是","val":43},
{"key": "否","val":44}
]
},
{
"id": 14,
"info": " 本机构目前是否连锁经营",
"opt":[
{"key": "是","val":45},
{"key": "否","val":46}
]
},
{
"id": 21,
"info": "推荐方案：",
"opt":[
{"key":"多功能影像质控中心：通过影像设备组合式布局,互通互联,实现集中诊断,统一质控,远程会诊,远程培训等功能。必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投。"}
]
},
{
"id": 22,
"info": "医用胶片直投系统:",
"opt":[
{"key":"满足多胶片快速查看、电子病历、留档等需求。"}
]
},
{
"id": 23,
"info": "医学影像云平台：",
"opt":[
{"key":"满足影像云存储、电子胶片、远程影像诊断需求。"}
]
},
{
"id": 24,
"info": "Image+云教学平台：",
"opt":[
{"key":"满足教学、进修、研讨、课程、考试等需求。"}
]
},
{
"id": 26,
"info": "影像专家工作室：",
"opt":[
{"key":"满足线上诊室、远程会诊、外院病人协影像看诊、智能阅片等需求。"}
]
},
{
"id": 27,
"info": "一站式精诊学习平台：",
"opt":[
{"key":"可利用学习、分享、在线影像诊断、课程等功能，满足诊断水平提升需求。"}
]
},
{
"id": 28,
"info": "综合性进修教育系统：",
"opt":[
{"key":"满足规培、学习、进修、在线考试等需求。"}
]
},
{
"id": 29,
"info": "多功能智慧影像中心：",
"opt":[
{"key":"满足科室阅片、会诊、教学、研讨需求。"}
]
},
{
"id": 30,
"info": "一体化软阅片终端：",
"opt":[
{"key":"满足健康阅片需求。"}
]
},
{
"id": 31,
"info": "一体化软阅片终端：",
"opt":[
{"key":"满足健康阅片需求。"}
]
},
{
"id": 32,
"info": "一体化软阅片终端：",
"opt":[
{"key":"满足健康阅片需求。"}
]
},
{
"id": 33,
"info": "交互式医学影像软阅片终端：",
"opt":[
{"key":"满足影像阅片需求，营造健康阅片环境。打破空间隔阂，多诊室交互、协同阅片。"}
]
},
{
"id": 34,
"info": "多功能会诊中心：",
"opt":[
{"key":"满足远程会诊，本院少见病研讨，外院病人本院会诊，常见病教学等需求。"}
]
},
{
"id": 35,
"info": "医学影像联盟示范中心：",
"opt":[
{"key":"贴切医联体顶尖影像诊断需求，满足远程影像在线会诊，精准化阅片，教学示范等需求。"}
]
},
{
"id": 36,
"info": "医学影像示教中心：",
"opt":[
{"key":"满足健康阅片，精准诊断，读片研讨，进修教学，远程诊断等需求。"}
]
},
{
"id": 37,
"info": "智慧影像科：",
"opt":[
{"key":"满足小规模影像科智慧阅片需求，营造舒适健康阅片环境。还可开展教学研讨活动。"}
]
},
{
"id": 38,
"info": "智慧影像中心：",
"opt":[
{"key":"满足中等规模影像科阅片会诊需求。在营造舒适健康阅片环境的同时，满足科室早读片、教研学习等需求。"}
]
},
{
"id": 40,
"info": "多院区交互阅片中心：",
"opt":[
{"key":"满足多院区间交互、会诊、教学需求。"}
]
},
{
"id": 41,
"info": "多院区远程会诊中心：",
"opt":[
{"key":"满足多院区间交互、会诊需求。"}
]
},
{
"id": 43,
"info": "多功能阅片会诊中心：",
"opt":[
{"key":"满足多机构联动，远程会诊，智能交互阅片需求。"}
]
},
{
"id": 44,
"info": "综合影像中心：",
"opt":[
{"key":"满足智能交互阅片需求。"}
]
},
{
"id": 45,
"info": "医学影像云平台：:",
"opt":[
{"key":"..."}
]
},
{
"id": 46,
"info": "智能影像云交互中心:",
"opt":[
{"key":"。。。"}
]
},
{
"id": 15,
"info": "需求不明确:",
"opt":[
{"key":"请联系大区经理寻求帮助。"}
]
}
]
}
<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="app" v-cloak>
<div class="head-div">
</div>
<div class="con-div">
<div class="main-div">
<div class="info-div">
<h6>{{title}}</h6>
<h3>{{que.info}}</h3>
</div>
<div>
<button v-if="index > 0" @click="reset()"> <span>重做</span></button>
</div>
<ol>
<li v-bind:class="{res: isResult}" v-for="q in que.opt">
<div><button v-bind:class="{res: isResult}" @click="setVal(q.val)">{{ q.key }}</button></div>
</li>
</ol>
</div>
</div>
<div class="footer-div">
</div>
</div>
</body>
<script src="https://gitee.com/meteis/clod-weath/raw/master/js/vue.min.js"></script>
<script src="https://gitee.com/meteis/clod-weath/raw/master/js/index.js"></script>
</html>
@charset "UTF-8";
html ,body {
height:100%;
}
#app{
height:100%;
}
[v-cloak] {
display: none !important;
}
.head-div {
height: 10%;
background-image: linear-gradient(to bottom , #0bf,#fff);
}
.con-div{
height: 80%;
}
.main-div{
height: 100%;
width:80%;
margin:auto;
box-shadow: 0 2px 12px 0 #0000001a;
border-radius: 5px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.footer-div{
height: 10%;
background-image: linear-gradient(to top , #e43c59,#fff);
}
.info-div{
padding: 18px 20px;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
}
button{
cursor: pointer;
border-color: transparent;
color: #409eff;
background: transparent;
padding-left: 0;
padding-right: 0;
}
li{
margin: 5px auto;
}
.set-div{
margin: 20px;
}
.res{
list-style: none;
cursor: text;
color: #5397f0;
}