修改新版样式--并增加更多测试

src/views/PopularizationScience.vue

@@ -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')">
+                                        &nbsp;&nbsp;
+                                    </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">
-                        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
-                        所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
-                        像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
-                    </div>
-                    <div class="kply_inner_duan1">
-                        &nbsp; &nbsp; &nbsp;睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
-                        阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
-                        眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
-                    </div>
-
-                    <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
-
-                    <div class="kply_inner_duan1">
-                        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
-                        所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
-                        像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
-                    </div>
-                    <div class="kply_inner_duan1">
-                        &nbsp; &nbsp; &nbsp; 睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
-                        阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
-                        眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+                </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>