|
|
@@ -1,6 +1,7 @@
|
|
|
<script setup lang="ts">
|
|
|
import CpmdHeader from '@/components/CpmdHeader.vue';
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
+import { format } from 'date-fns/format';
|
|
|
|
|
|
import { menuStatusStore } from '@/stores'
|
|
|
const menuStatus = menuStatusStore();
|
|
|
@@ -20,6 +21,153 @@ const flag_text = ref<number>(1)
|
|
|
//定时器标志
|
|
|
const flag_time = ref<any>()
|
|
|
|
|
|
+//
|
|
|
+const centerDialogVisible = ref<boolean>(false)
|
|
|
+const moreList = ref<any>([
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ title: '标准情商测试',
|
|
|
+ poster: 'qs',// 展示图
|
|
|
+ qrCode: 'qsCode',
|
|
|
+ isProfession: true,
|
|
|
+ isRecommend: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '测测你的睡眠质量吧！',
|
|
|
+ poster: 'sm',// 展示图
|
|
|
+ qrCode: 'smCode',
|
|
|
+ isProfession: false,
|
|
|
+ isRecommend: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ title: '看一下自己“神经”是否正常？',
|
|
|
+ poster: 'sj',// 展示图
|
|
|
+ qrCode: 'sjCode',
|
|
|
+ isProfession: true,
|
|
|
+ isRecommend: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ title: '你让异性心动指数有多高？',
|
|
|
+ poster: 'xd',// 展示图
|
|
|
+ qrCode: 'xdCode',
|
|
|
+ isProfession: false,
|
|
|
+ isRecommend: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5',
|
|
|
+ title: '你是否正在逐渐老化？',
|
|
|
+ poster: 'lh',// 展示图
|
|
|
+ qrCode: 'lhCode',
|
|
|
+ isProfession: false,
|
|
|
+ isRecommend: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '6',
|
|
|
+ title: 'MBTI16型人格测试',
|
|
|
+ poster: 'mb',// 展示图
|
|
|
+ qrCode: 'mbCode',
|
|
|
+ isProfession: true,
|
|
|
+ isRecommend: true
|
|
|
+ }, {
|
|
|
+ id: '7',
|
|
|
+ title: '在婚姻里，你有安全感吗？',
|
|
|
+ poster: 'aq',// 展示图
|
|
|
+ qrCode: 'aqCode',
|
|
|
+ isProfession: false,
|
|
|
+ isRecommend: true
|
|
|
+ }, {
|
|
|
+ id: '8',
|
|
|
+ title: '你的家庭关系健康吗？',
|
|
|
+ poster: 'jk',// 展示图
|
|
|
+ qrCode: 'jkCode',
|
|
|
+ isProfession: true,
|
|
|
+ isRecommend: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '9',
|
|
|
+ title: '职业心理年龄测试',
|
|
|
+ poster: 'zy',// 展示图
|
|
|
+ qrCode: 'zyCode',
|
|
|
+ isProfession: false,
|
|
|
+ isRecommend: true
|
|
|
+ }, {
|
|
|
+ id: '10',
|
|
|
+ title: '工作倦怠测试',
|
|
|
+ poster: 'jd',// 展示图
|
|
|
+ qrCode: 'jdCode',
|
|
|
+ isProfession: true,
|
|
|
+ isRecommend: true
|
|
|
+ }]
|
|
|
+)
|
|
|
+// vue3+vite 实现动态加载图片
|
|
|
+const requireImg = (name: string) => {
|
|
|
+ return new URL(`../assets/moreTest/${name}.png`, import.meta.url).href
|
|
|
+}
|
|
|
+//保存二维码的变量
|
|
|
+const scaleObj = ref<any>({
|
|
|
+ title: '你的家庭关系健康吗？',
|
|
|
+ qrCode: 'jkCode',
|
|
|
+})
|
|
|
+//打开二维码
|
|
|
+const openCode = (item: any) => {
|
|
|
+ scaleObj.value = item;
|
|
|
+ centerDialogVisible.value = true
|
|
|
+
|
|
|
+}
|
|
|
+//得到图片，进行canvas下载
|
|
|
+const downImgByCanvas = () => {
|
|
|
+ let id = "img";
|
|
|
+ const canvas = document.createElement('canvas')
|
|
|
+ const ctx: any = canvas.getContext('2d')
|
|
|
+ //得到原始的宽高
|
|
|
+ let sourceImage: any = document.getElementById(id);
|
|
|
+ canvas.width = sourceImage.naturalWidth;
|
|
|
+ canvas.height = sourceImage.naturalHeight;
|
|
|
+ //保存图片到canvas
|
|
|
+ ctx.drawImage(sourceImage, 0, 0);
|
|
|
+ downJpgByCanvas(canvas);
|
|
|
+}
|
|
|
+//得到图片的url,然后下载
|
|
|
+const downImgByUrl = () => {
|
|
|
+ let img: any = document.getElementById('img');
|
|
|
+ downJpgByUrl(img.src);
|
|
|
+}
|
|
|
+//下载图片:通过canvas
|
|
|
+const downJpgByCanvas = (canvas: any) => {
|
|
|
+ var oA = document.createElement("a");
|
|
|
+ let time = timeFormat();
|
|
|
+ oA.download = "img_" + time + '.jpg';// 设置下载的文件名，默认是'下载'
|
|
|
+ oA.href = canvas.toDataURL("image/jpeg");
|
|
|
+ document.body.appendChild(oA);
|
|
|
+ oA.click();
|
|
|
+ oA.remove(); // 下载之后把创建的元素删除
|
|
|
+}
|
|
|
+const downJpgByUrl = (url: string) => {
|
|
|
+ let time = timeFormat();
|
|
|
+ var a = document.createElement('a'); // 创建一个a节点插入的document
|
|
|
+ var event = new MouseEvent('click') // 模拟鼠标click点击事件
|
|
|
+ a.download = "img_" + time + '.jpg'; // 设置a节点的download属性值
|
|
|
+ a.href = url; // 将图片的src赋值给a节点的href
|
|
|
+ a.dispatchEvent(event)
|
|
|
+ a.remove(); // 下载之后把创建的元素删除
|
|
|
+}
|
|
|
+
|
|
|
+//格式化时间
|
|
|
+const timeFormat = () => {
|
|
|
+ var time = new Date();
|
|
|
+
|
|
|
+ return format(time, "yyyy年MM月dd日 HH时mm分ss秒");
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// //补0
|
|
|
+// const add0 = (m: number) => {
|
|
|
+// return m < 10 ? '0' + m : m
|
|
|
+// }
|
|
|
+
|
|
|
//刚进入页面就将高度设置为页面需要的
|
|
|
onMounted(() => {
|
|
|
|
|
|
@@ -48,54 +196,70 @@ onUnmounted(() => {
|
|
|
</div>
|
|
|
<div class="kply">
|
|
|
<div class="kply_inner">
|
|
|
- <div style="padding:20px 40px">
|
|
|
- <div class="kepu_title">
|
|
|
- <div class="kepu_title_des">
|
|
|
- 失眠抑郁问题科普
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img src="../assets/kepu/title_right.png" />
|
|
|
+ <div style="padding:10px 0px;width: 100%;display: flex;flex-wrap: wrap;">
|
|
|
+ <div v-for="item in moreList" :key="item.id" class="out">
|
|
|
+ <img class="poster" :src="requireImg(item.poster)">
|
|
|
+ <div class="des">
|
|
|
+ <div>
|
|
|
+ <div class="scale_title">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div v-show="item.isProfession"> <img style="width: 80px;"
|
|
|
+ :src="requireImg('isProfession')">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div v-show="item.isRecommend"> <img style="width: 80px;" :src="requireImg('isM')">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cyc"><span class="cyc_te" @click="openCode(item)">测一测</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="kply_inner_duan1">
|
|
|
- 对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
|
|
|
- 所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
|
|
|
- 像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
|
|
|
- </div>
|
|
|
- <div class="kply_inner_duan1">
|
|
|
- 睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
|
|
|
- 阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
|
|
|
- 眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
|
|
|
- </div>
|
|
|
-
|
|
|
- <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
|
|
|
-
|
|
|
- <div class="kply_inner_duan1">
|
|
|
- 对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
|
|
|
- 所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
|
|
|
- 像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
|
|
|
- </div>
|
|
|
- <div class="kply_inner_duan1">
|
|
|
- 睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
|
|
|
- 阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
|
|
|
- 眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="code_dig">
|
|
|
+ <el-dialog v-model="centerDialogVisible" :title="scaleObj.title" width="500" align-center>
|
|
|
+ <template #footer>
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <img id="img" :src="requireImg(scaleObj.qrCode)">
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <!-- <el-button @click="centerDialogVisible = false">关闭</el-button>
|
|
|
+ <el-button type="primary">
|
|
|
+ 下载
|
|
|
+ </el-button> -->
|
|
|
+ <div style="display: flex;justify-content: end;">
|
|
|
+ <div class="close_code" @click="centerDialogVisible = false">关闭</div>
|
|
|
+ <div class="down_code" @click="downImgByCanvas">下载</div>
|
|
|
</div>
|
|
|
|
|
|
- <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg2.png" />
|
|
|
+ <!-- <div>
|
|
|
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
</template>
|
|
|
+<style>
|
|
|
+.code_dig>>>.el-dialog {
|
|
|
+ border-radius: 20px !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
+:deep(.el-dialog) {
|
|
|
+ border-radius: 20px !important;
|
|
|
+}
|
|
|
+
|
|
|
.home_header_out {
|
|
|
+ flex: 1;
|
|
|
// position: relative;
|
|
|
padding-bottom: 60px;
|
|
|
width: 100%;
|
|
|
@@ -105,7 +269,7 @@ onUnmounted(() => {
|
|
|
background-size: contain;
|
|
|
background-color: #FAFAFA; //估计是需要动态
|
|
|
|
|
|
- //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
|
|
|
+
|
|
|
.home_header_inner {
|
|
|
min-height: 1;
|
|
|
left: 0;
|
|
|
@@ -122,47 +286,64 @@ onUnmounted(() => {
|
|
|
.kply {
|
|
|
width: 100%;
|
|
|
margin-top: 40px;
|
|
|
- // background-color: #FAFAFA;
|
|
|
|
|
|
.kply_inner {
|
|
|
-
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
margin: auto;
|
|
|
width: 1200px;
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 40px;
|
|
|
- // height: 1000px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- // margin-bottom: 60px;
|
|
|
- .kepu_title {
|
|
|
+ .out {
|
|
|
+ margin-top: 40px;
|
|
|
|
|
|
+ width: 50%;
|
|
|
+ // background-color: antiquewhite;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .kepu_title_des {
|
|
|
- width: 406px;
|
|
|
- font-family: Alibaba PuHuiTi 2.0;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 30px;
|
|
|
- color: #48D68E;
|
|
|
- }
|
|
|
|
|
|
- img {
|
|
|
- width: 480px;
|
|
|
+ .poster {
|
|
|
+ width: 150px;
|
|
|
+ padding-left: 40px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .kply_inner_duan1 {
|
|
|
- margin-top: 0px;
|
|
|
- font-family: Alibaba PuHuiTi 2.0;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 18px;
|
|
|
- color: #333333;
|
|
|
- line-height: 30px;
|
|
|
- letter-spacing: 4px;
|
|
|
+ .des {
|
|
|
+ padding-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ // background-color: aqua;
|
|
|
+
|
|
|
+ .scale_title {
|
|
|
+ letter-spacing: 3px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cyc {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .cyc_te {
|
|
|
+ margin-right: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ // width: 100px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 3px solid #48D68E;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #000000;
|
|
|
+
|
|
|
+ padding: 8px 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ // display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
}
|
|
|
@@ -171,143 +352,21 @@ onUnmounted(() => {
|
|
|
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-.home_mid {
|
|
|
- // background-color: blanchedalmond;
|
|
|
- width: 1200px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- margin-top: 40px;
|
|
|
- // position: relative;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .kepu_title {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- font-size: 50px;
|
|
|
- color: #111111;
|
|
|
- line-height: 95px;
|
|
|
-
|
|
|
- // width: 100%;
|
|
|
- // left: 0;
|
|
|
- // right: 0;
|
|
|
- // margin: auto
|
|
|
- }
|
|
|
-
|
|
|
- .kepu_title_sub {
|
|
|
- margin-top: 30px;
|
|
|
- text-align: center;
|
|
|
- font-size: 28px;
|
|
|
- color: #48D68E;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
-
|
|
|
- .man1_group {
|
|
|
- margin-top: 60px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .man1 {
|
|
|
- position: relative;
|
|
|
- width: 327px;
|
|
|
- // height: 100%;
|
|
|
-
|
|
|
- // height: 100%
|
|
|
- .man1_img {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- /* bottom: 0px; */
|
|
|
- /* height: auto; */
|
|
|
- width: 100%;
|
|
|
- left: 100px
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .des {
|
|
|
- border: #48D68E solid 5px;
|
|
|
- border-radius: 40px;
|
|
|
- padding: 20px;
|
|
|
- letter-spacing: 6px;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .des_inner {
|
|
|
- border: 1px dashed #48D68E;
|
|
|
- border-radius: 40px;
|
|
|
- padding-bottom: 40px;
|
|
|
- padding-top: 30px;
|
|
|
- padding-left: 100px;
|
|
|
- padding-right: 20px;
|
|
|
- letter-spacing: 6px;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 24px;
|
|
|
- color: #333333;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .man2_group {
|
|
|
- margin-top: 60px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .man2 {
|
|
|
- position: relative;
|
|
|
- width: 327px;
|
|
|
- // height: 100%;
|
|
|
-
|
|
|
- // height: 100%
|
|
|
- .man2_img {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- /* bottom: 0px; */
|
|
|
- /* height: auto; */
|
|
|
- width: 100%;
|
|
|
- left: -100px
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .des2 {
|
|
|
- border: #48D68E solid 5px;
|
|
|
- border-radius: 40px;
|
|
|
- padding: 20px;
|
|
|
- letter-spacing: 6px;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .des2_inner {
|
|
|
- border: 1px dashed #48D68E;
|
|
|
- border-radius: 40px;
|
|
|
- padding-bottom: 40px;
|
|
|
- padding-top: 30px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 100px;
|
|
|
- letter-spacing: 6px;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 24px;
|
|
|
- color: #333333;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .get_more {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 300px;
|
|
|
- margin-top: 60px;
|
|
|
- margin-bottom: 60px;
|
|
|
- }
|
|
|
- }
|
|
|
+.close_code {
|
|
|
+ border: 1px solid #cccaca;
|
|
|
+ padding: 4px 12px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-// .home_footer_out {
|
|
|
-// width: 100%;
|
|
|
-// background-color: #000000;
|
|
|
-// }</style>
|
|
|
+.down_code {
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #48D68E;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #000000;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+</style>
|
