| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:24 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-06 11:07:43 |
| | | * @LastEditTime: 2024-11-08 11:50:42 |
| | | * @FilePath: \bigScreen\src\views\sub\index.vue |
| | | * @Description: |
| | | * |
| | |
| | | --> |
| | | <template> |
| | | <div> |
| | | <div class="main-header"> |
| | | <!-- <div class="title">ssssssss</div> --> |
| | | </div> |
| | | |
| | | <div class="main-container"> |
| | | <div class="w100 h100"> |
| | | <router-view ref="target-name"></router-view> |
| | | </div> |
| | | |
| | | <!-- <div class="out"> |
| | | <el-button @click="goHome">退回</el-button> |
| | | </div> --> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | let router = useRouter() |
| | | import { useRouterStore } from 'store/router' |
| | | const store = useRouterStore() |
| | | |
| | | const goHome = () => { |
| | | store.setLoadSub(false) |
| | | router.push('/layout') |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | $bg-blue: rgba(24, 33, 92, 0.9); |
| | | |
| | | .out { |
| | | position: fixed; |
| | | top: 50%; |
| | | left: 50%; |
| | | pointer-events: all; |
| | | } |
| | | |
| | | .wrapper { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | #MainContent { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: 99; |
| | | } |
| | | |
| | | .main-content { |
| | | height: 1080px; |
| | | background: url(/images/header.png) no-repeat center / 100% 100%, |
| | | url(/images/pro-bg.png) no-repeat center / 100% 100%; |
| | | |
| | | pointer-events: none; |
| | | |
| | | .main-header { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 40px; |
| | | pointer-events: auto; |
| | | |
| | | .title { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | margin: auto; |
| | | width: 640px; |
| | | height: 40px; |
| | | font-size: 24px; |
| | | font-family: YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | color: #eff8fc; |
| | | line-height: 40px; |
| | | text-align: center; |
| | | letter-spacing: 8px; |
| | | font-weight: bolder; |
| | | background: linear-gradient(to bottom, |
| | | #e2eaf0 0%, |
| | | #aed1f1 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | // opacity: 0.89; |
| | | // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66); |
| | | |
| | | // background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%); |
| | | // -webkit-background-clip: text; |
| | | // -webkit-text-fill-color: transparent; |
| | | } |
| | | |
| | | |
| | | .login-out { |
| | | position: absolute; |
| | | top: 10px; |
| | | right: 40px; |
| | | height: 36px; |
| | | color: #fff; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | cursor: pointer; |
| | | |
| | | .img { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | |
| | | span { |
| | | font-size: 13px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main-container { |
| | | position: absolute; |
| | | top: 40px; |
| | | left: 40px; |
| | | right: 40px; |
| | | bottom: 40px; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | <style scoped lang="scss"></style> |