<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>量表详情</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 800px;
}
.begin_test_content {
padding-bottom: 60px;
}
.title_bg {
width: 100%;
height: 545px;
background: url("https://test.jue-ming.com:8849/api/show?filePath=./images/desc_page_bg.png") no-repeat center;
background-size: cover;
position: relative;
overflow: hidden;
}
.logo_content {
width: 219px;
height: 64px;
margin: 38px 0 0 20px;
}
.logo_content img {
width: 100%;
height: 100%;
}
.logo_img {
width: 100%;
height: 100%;
}
.begin_test_content_title {
font-size: 50px;
font-family: sucaijishikufangti-Regular, sucaijishikufangti;
font-weight: 400;
color: #ffffff;
text-align: center;
text-shadow: 0px 3px 6px rgba(65, 65, 65, 0.49);
}
.begin_test_content_h {
width: 80%;
margin: 0 auto;
height: 100px;
}
.test_style {
width: 201px;
height: 201px;
margin: 10px auto 18px;
border-radius: 60px;
overflow: hidden;
}
.test_style_img {
width: 100%;
height: 100%;
vertical-align: middle;
}
.begin_test_content {
width: 100%;
}
.btn_center {
width: 700px;
margin: 0 auto;
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-350px);
}
.w_h_15 {
width: 15px;
height: 15px;
display: block;
margin-right: 10px;
}
.btn_area {
width: 84%;
display: flex;
justify-content: center;
align-items: center;
margin: 57px auto 0;
}
.u-reset-button {
display: flex;
justify-content: center;
align-items: center;
width: 265px;
line-height: 76px;
background: linear-gradient(180deg, #ffffff 0%, #87dfff 100%);
border-radius: 50px 50px 50px 50px;
opacity: 1;
font-size: 30px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #1b90b2;
}
.u-reset-button text {
margin-left: 20px;
}
.rowAround {
border-radius: 10px 10px;
}
.test_detail {
width: 100%;
background: url("https://test.jue-ming.com:8849/api/show?filePath=./images/report_bg.png") no-repeat top;
background-size: 100% auto;
border-radius: 50px 50px 0px 0px;
opacity: 1;
overflow: hidden;
margin-top: -120px;
position: relative;
z-index: 2;
}
.tongji {
display: flex;
justify-content: space-around;
margin-top: 37px;
}
.tongji .disRowcCenter {
display: block;
width: 219px;
height: 67px;
background: linear-gradient(180deg, #fbffef 0%, #eefeff 100%);
padding: 14px 0;
border-radius: 36px 36px 36px 36px;
opacity: 1;
text-align: center;
}
.quota_name {
font-size: 22px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #242424;
}
.quota_data {
font-size: 26px;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #1b90b2;
}
.introduce {
width: 709px;
margin: 30px auto 0;
}
.introduce_title {
font-size: 32px;
color: #ffffff;
line-height: 64px;
display: flex;
align-items: center;
margin-left: 10px;
}
.introduce_title img {
width: 30px;
height: 30px;
}
.introduce_title span {
font-size: 30px;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #1b90b2;
margin-left: 10px;
}
.introduce_content {
box-sizing: border-box;
min-height: 160px;
background: #ffffff;
border-radius: 36px 36px 36px 36px;
opacity: 1;
padding: 30px 16px 50px;
font-size: 26px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #575757;
line-height: 48px;
letter-spacing: 3px;
position: relative;
}
.literature {
width: 709px;
margin: 30px auto 0;
}
.literature_title {
font-size: 30px;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #1b90b2;
margin-left: 6px;
line-height: 64px;
}
.literature_content {
box-sizing: border-box;
min-height: 160px;
background: #ffffff;
border-radius: 36px 36px 36px 36px;
opacity: 1;
padding: 30px 16px 50px;
font-size: 26px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #575757;
line-height: 48px;
letter-spacing: 3px;
position: relative;
}
.literature_item {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.more_test {
width: 709px;
margin: 0 auto;
overflow: hidden;
}
.more_txt {
margin-top: 100px;
float: left;
}
.more_txt p {
font-size: 26px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(65, 65, 65, 0.49);
}
.more_txt h2 {
font-size: 30px;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #04919B;
}
.qr_code {
width: 221px;
height: auto;
float: right;
}
</style>
<script src="./js/vue@2"></script>
</head>
<body>
<div id="app" class="begin_test_content minHeight100" style="position: relative;">
<div class="title_bg">
<div class="logo_content">
<img class="logo_img" src="https://test.jue-ming.com:8849/api/show?filePath=./images/camera_logo.png" />
</div>
<div class="test_style">
<img :src="`https://test.jue-ming.com:8849/api/show?filePath=${beginTestContent.imageUrl}`"
class="test_style_img" />
</div>
<div class="begin_test_content_title">
{{ beginTestContent.name }}
</div>
</div>
<div class="test_detail">
<div class="tongji">
<div class="disRowcCenter">
<div class="quota_name">测评次数</div>
<div class="quota_data"> {{ beginTestContent.testNum }}次 </div>
</div>
<div class="disRowcCenter">
<!-- <image :src="bao2" mode="" class="w_h_15"></image> -->
<div class="quota_name">预计用时</div>
<div class="quota_data">
{{ beginTestContent.estimatedTime }}分钟
</div>
</div>
<div class="disRowcCenter">
<div class="quota_name">题数</div>
<div class="quota_data"> {{ beginTestContent.titleNum }}题 </div>
</div>
</div>
<div class="introduce">
<div class="introduce_title">
<img
src="https://test.jue-ming.com:8849/api/show?filePath=./images/icon_edit_20230608.png" /><span>量表介绍</span>
</div>
<div class="introduce_content">
{{ beginTestContent.description }}
</div>
</div>
<div class="literature" v-if="beginTestContent.reference != null">
<div class="literature_title"> 参考文献 </div>
<div class="literature_content">
<div class="literature_item" v-for="(item,index) in replaceTxt(beginTestContent.reference)"
:key="index">
<span style="margin-right:14px">[{{index+1}}]</span>
<span>{{ item }}</span>
</div>
</div>
</div>
<div class="more_test">
<div class="more_txt">
<p>更多测评请在微信搜索</p>
<h2>心灵照相机</h2>
</div>
<img class="qr_code" :src="`data:image/png;base64,${qrCodeImg}`" alt="">
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
beginTestContent: scaleDetail,
qrCodeImg:base64img
}
},
created() {
},
computed: {
},
mounted() { },
methods: {
dealLongTxt(str, num) {
if (str.length > num) {
return `${str.slice(0, num)}...`;
} else {
return str;
}
},
replaceTxt(str) {
return str.split("//");
}
}
})
</script>
</body>
</html>