archives/src/views/home/index.vue

<template>
    <div class="home-styles-box">
        <iframe src="http://visual.hczcxx.cn/view/1610205487507001345"  v-if="userRoleId == website.role_id"
                        class="iframe"
                        ref="iframe">
        </iframe>
         <iframe src="http://visual.hczcxx.cn/view/1610204839034048514"  v-else
                        class="iframe"
                        ref="iframe">
        </iframe>

        <div class="test-btn-view">
            <el-button type="primary" hc-btn @click="gotoQuery">开发测试时的进入系统入口</el-button>
        </div>
    </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {useAppStore} from "~src/store";
import router from '~src/router/index';
import website from '~src/config/index'

//变量
const useAppState = useAppStore()
const HomeTheme = ref(useAppState.getHomeTheme);
const userRoleId = ref(useAppState.getRoleId);
const isDEV = ref(import.meta.env.DEV)

//监听
watch(() => [
    useAppState.getHomeTheme,
], ([theme]) => {
    HomeTheme.value = theme
})

onMounted(() => {
    isDEV.value = import.meta.env.DEV
    console.log(import.meta.env.DEV)
})

const gotoQuery=()=>{
     router.push({path: '/using/query'});
}

</script>

<style lang="scss" scoped>
@import "../../styles/view/home.scss";
</style>

<style lang="scss">
.home-styles-box {
    position: relative;
    .test-btn-view {
        position: absolute;
        left: 45%;
        bottom: 25px;
    }
}
.home-link a {
    color: inherit;
    text-decoration: none;
}
.iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;

  }
  .head_div{
      width: 100%;
     display: flex;
     height: 80px;
     padding-bottom: 15px;

      background-color:rgb(4, 13, 56);
      .head_div_btn{
          position: absolute;
           right: 30px;
            width: 197px;
            line-height: 42px;
            height: 42px;
            border-color: rgb(255, 255, 255);
            border-width: 2px;
            border-style: solid;
            color: rgb(255, 255, 255);
            border-radius: 29px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            font-style: normal;
            background: rgb(20, 28, 49);
            top:20px
      }
      .right1{
           right: 250px;
      }
  }
  @keyframes tada {
    from {
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        transform: scale3d(1, 1, 1)
    }
}

.runbtn{
     cursor: pointer;

}
.runbtn:hover{
     animation: tada 1s;
     background-color: rgb(15, 64, 245);
}

</style>