pqs-9100_client/frontend/src/views/home/tabs/model.vue

<!-- 模式切换页面 -->
<template>
    <div class="main_container box">
        <el-carousel :interval="5000" type="card" style="width: 60%; margin-left: 20%; height: 70%">
            <el-carousel-item
                class="mode"
                :class="{ modeBG: index != 0 }"
                v-for="(item, index) in modeList"
                :key="index"
            >
                <div class="mode_top">
                    <div class="mode_name">
                        {{ item.name }}
                    </div>
                </div>

                <div class="mode_img">
                    <img :src="item.img" />
                </div>
                <div class="test_button">
                    <el-button size="large" type="primary" @click="handelOpen(item)">
                        {{ item.activated ? '进入检测' : '待激活' }}
                    </el-button>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- versionRegisterDialog -->
    <VersionDialog ref="versionRegisterRef"></VersionDialog>
</template>
<script lang="ts" setup>
import { useAuthStore } from '@/stores/modules/auth'
import { useAppSceneStore, useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { getCurrentScene } from '@/api/user/login'
import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
import { useTabsStore } from '@/stores/modules/tabs'
import VersionDialog from '@/views/system/versionRegister/index.vue'
import { ref, onMounted } from 'vue'

const authStore = useAuthStore()
const modeStore = useModeStore() // 使用模式 store
const AppSceneStore = useAppSceneStore()
const activateInfo = authStore.activateInfo
const isActivateOpen = import.meta.env.VITE_ACTIVATE_OPEN
const tabsStore = useTabsStore()
const versionRegisterRef = ref<InstanceType<typeof VersionDialog> | null>(null)
const modeList = [
    {
        name: '模拟式模块',
        code: '模拟式',
        subName: '未启用模拟式检测计划',
        img: new URL('/src/assets/images/dashboard/1.svg', import.meta.url).href,
        activated: isActivateOpen === 'true' ? activateInfo.simulate.permanently === 1 : true
    },
    {
        name: '数字式模块',
        code: '数字式',
        subName: '启用数字检测计划',
        img: new URL('/src/assets/images/dashboard/2.svg', import.meta.url).href,
        activated: isActivateOpen === 'true' ? activateInfo.digital.permanently === 1 : true
    },
    {
        name: '比对式模块',
        code: '比对式',
        subName: '启用比对式检测计划',
        img: new URL('/src/assets/images/dashboard/3.svg', import.meta.url).href,
        activated: isActivateOpen === 'true' ? activateInfo.contrast.permanently === 1 : true
    }
]
const handelOpen = async (item: any) => {
    if (!item.activated) {
        // 打开版本激活弹窗
        versionRegisterRef.value?.openDialog()
        return
    }
    modeStore.setCurrentMode(item.code) // 将模式code存入 store
    const { data: scene } = await getCurrentScene() // 获取当前场景
    AppSceneStore.setCurrentMode(scene + '') //0：省级平台，1：设备出厂，2：研发自测
    await authStore.setShowMenu()
    await tabsStore.closeMultipleTab()
    await initDynamicRouter()
    return
}
onMounted(() => {})
</script>
<style lang="scss" scoped>
.box {
    background: #ededed;
    // background-image: url("/src/assets/images/dashboard/DT.jpg");
    // /* 背景图垂直、水平均居中 */
    // // background-position: center center;
    // /* 背景图不平铺 */
    // background-repeat: no-repeat;
    // /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    // background-attachment: fixed;
    // /* 让背景图基于容器大小伸缩 */
    // background-size: cover;
}

.main_container {
    width: 100%;
    // height: calc(100vh - 165px);
    height: 100%;
    // overflow-y: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    .mode {
        height: 99.5% !important;
        border: 1px solid #eee;
        border-radius: 6px;
        background: linear-gradient(
            180deg,
            rgba(0, 153, 255, 1) 0%,
            rgba(0, 153, 255, 1) 0%,
            rgba(0, 102, 255, 1) 65%,
            rgba(0, 51, 255, 1) 100%,
            rgba(0, 51, 255, 1) 100%
        );

        position: absolute;

        //   padding: 40px 0;
        .mode_top {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #008aff;
            border-radius: 6px 6px 0 0;

            .mode_name {
                width: 100%;
                height: 40px;
                font-family: '微软雅黑 Bold', '微软雅黑', '微软雅黑', sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 20px;
                color: #ffffff;
                text-align: center;
                line-height: 40px;
                padding-left: 10px;
                // margin-top: 20px;

                .mode_subName {
                    font-family: '微软雅黑', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 12px;
                    color: #ffffff;
                    line-height: 40px;
                    text-align: center;
                    padding: 5px 0 0 10px;
                    // margin-top: 10px;
                }
            }

            .test_button {
                display: flex;
                text-align: center;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 5px;
            }
        }

        .mode_img {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            // padding: 30px 0 50px;
            margin-top: 100px;
            // margin-bottom: 100px;

            img:nth-child(1) {
                width: 60%;
                height: auto;
                display: block;
            }

            img:nth-child(2) {
                width: 70%;
                height: auto;
                display: block;
            }

            img:nth-child(3) {
                width: 60%;
                height: auto;
                display: block;
            }
        }

        .mode_test {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;

            .test_button:hover {
                background: rgba(0, 0, 0, 0.2);
            }
        }
    }

    .test_button {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #fff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }

    .mode:nth-child(3n + 3) {
        background: linear-gradient(
            180deg,
            rgba(0, 153, 255, 1) 0%,
            rgba(0, 153, 255, 1) 0%,
            rgba(0, 102, 255, 1) 39%,
            rgba(102, 51, 204, 1) 100%,
            rgba(102, 51, 204, 1) 100%
        );
    }

    .mode_off {
        .mode_name,
        .mode_subName,
        .test_button {
            color: #fff !important;
        }

        .test_button:hover {
            // background: rgba(0, 0, 0, 0.2) !important;
            cursor: pointer;
        }
    }
}

:deep(.el-sub-menu__title) {
    border-bottom: 0 !important;
    outline: none !important;
}

// .modeBG {
//   &::before {
//     content: "";
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     background-color: #70707080;
//     ;
//   }

// }
:deep(.el-carousel__container) {
    height: 100%;
}

:deep(.el-carousel__item) {
    position: relative;
}
</style>