|
|
@@ -1,7 +1,91 @@
|
|
|
<template>
|
|
|
- <div class="mod-home">
|
|
|
- <h3 v-if="orgName">{{orgName}}, 欢迎您！</h3>
|
|
|
- <h3 v-else>木之云数字化平台，欢迎您！</h3>
|
|
|
+ <div class="home-main" id="my-home-main" :style="`transform: scale(${toScale}) !important;`">
|
|
|
+ <div class="top">
|
|
|
+ <div class="top-name">XXXX数字看板</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="show" class="full-screen" @click="fullScreen">
|
|
|
+ <svg t="1732355752742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4253" width="200" height="200"><path d="M368.896 192H224a32 32 0 0 0-32 32v137.888a32 32 0 0 0 64 0V256h112.896a32 32 0 0 0 0-64zM784.864 192H640a32 32 0 1 0 0 64h112.864v105.888a32 32 0 1 0 64 0V224a32 32 0 0 0-32-32zM368.896 777.92H256V672a32 32 0 1 0-64 0v137.92a32 32 0 0 0 32 32h144.896a32 32 0 1 0 0-64zM784.864 640a32 32 0 0 0-32 32v105.92H640a32 32 0 1 0 0 64h144.864a32 32 0 0 0 32-32V672a32 32 0 0 0-32-32z" fill="#273CFF" p-id="4254"></path><path d="M912 48h-800c-35.296 0-64 28.704-64 64v800c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-800c0-35.296-28.704-64-64-64z m-800 864v-800h800l0.064 800H112z" fill="#273CFF" p-id="4255"></path></svg>
|
|
|
+ </div>
|
|
|
+ <div class="main-center">
|
|
|
+ <div class="center-1">
|
|
|
+ <div class="item-title">
|
|
|
+ <div class="item-title-name">企业荣誉</div>
|
|
|
+ </div>
|
|
|
+ <div class="msg-1">
|
|
|
+ <div v-for="i in 5" class="msg-item">
|
|
|
+ <div class="msg-title">国家高新<br>技术企业</div>
|
|
|
+ <div class="msg-center">我司于XXXX年被认定为国家高新技术企业，体现了我们在科技创新和自主研发方面的卓越能力。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-title">
|
|
|
+ <div class="item-title-name">企业资质</div>
|
|
|
+ </div>
|
|
|
+ <div class="msg-2">
|
|
|
+ <div v-for="i in 4" class="msg-item">
|
|
|
+ <img src="" />
|
|
|
+ <div class="img-name">荣誉证书</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-2">
|
|
|
+ <div class="main-nav">
|
|
|
+ <div class="nav-item acitve">企业首页</div>
|
|
|
+ <div class="nav-item">业务看板</div>
|
|
|
+ <div class="nav-item">生产看板</div>
|
|
|
+ <div class="nav-item">质量看板</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-title titel-1">
|
|
|
+ <div class="item-title-name">公司信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="msg-4">
|
|
|
+ <div class="img-b">
|
|
|
+ <img src="" />
|
|
|
+ <div class="img-b1" />
|
|
|
+ </div>
|
|
|
+ <div class="msg-des">
|
|
|
+ 美的集团股份有限公司于2000年04月07日在佛山市顺德区市场监督管理局登记成立。法定代表人方洪波，公司经营范围包括生产经营家用电器、电机及其零部件；从事家用电器等。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="msg-5">
|
|
|
+ <div class="msg-5-1">
|
|
|
+ <video class="video" autoplay muted>
|
|
|
+ <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <div class="msg-5-2">
|
|
|
+ <video class="video" autoplay muted>
|
|
|
+ <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <div class="msg-5-3">
|
|
|
+ <video class="video" autoplay muted>
|
|
|
+ <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <div class="msg-5-4">
|
|
|
+ <video class="video" autoplay muted>
|
|
|
+ <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-3">
|
|
|
+ <div class="item-title">
|
|
|
+ <div class="item-title-name">企业风采</div>
|
|
|
+ </div>
|
|
|
+ <div class="msg-3">
|
|
|
+ <img src />
|
|
|
+ <div class="msg-des">
|
|
|
+ <p>为增强团队凝聚力，提升员工之间的沟通与协作，特举办年度团建活动。通过丰富多彩的活动，增进同事间的了解与信任，共同开启新的奋斗篇章。</p>
|
|
|
+ <p>活动的第一项内容是破冰游戏，虽然一开始大家有些拘谨但随着游戏的进行，大家逐渐放下了心防，露出了笑容。通过这些轻松有趣的活动，我认识了平时工作中没太多交集的同事感觉彼此之间的距离一下子拉近了。</p>
|
|
|
+ </div>
|
|
|
+ <img src />
|
|
|
+ <div class="msg-des">
|
|
|
+ <p>接下来的团队挑战赛更是让我印象深刻。我们被随机分成了不同的组，面对各种挑战，大家齐心协力，发挥各自的优势解决一个又一个难题。在比赛中，我深切感受到团队合作的重要性。每个人的参与和贡献都是不可或缺的，正是这种紧密的合作让我们取得了优异的成绩。在欢呼和掌声中，我体会到了团队成功的喜悦与骄傲。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -10,25 +94,372 @@ import {getOrgName} from '@/api/org'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
- orgName: ''
|
|
|
+ orgName: '',
|
|
|
+ toScale: 1.0,
|
|
|
+ show: true
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.init()
|
|
|
},
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let screen = document.getElementById('my-home-main')
|
|
|
+ if (screen.requestFullscreen) {
|
|
|
+ document.addEventListener('fullscreenchange', () => {
|
|
|
+ if (this.getFullscreenElement() == null) {
|
|
|
+ this.setScale()
|
|
|
+ this.show = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.setScale()
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ },
|
|
|
methods: {
|
|
|
async init () {
|
|
|
await getOrgName().then(({data}) => {
|
|
|
this.orgName = data.data
|
|
|
})
|
|
|
+ },
|
|
|
+ getFullscreenElement () {
|
|
|
+ return (
|
|
|
+ document['fullscreenElement'] ||
|
|
|
+ document['mozFullScreenElement'] ||
|
|
|
+ document['msFullScreenElement'] ||
|
|
|
+ document['webkitFullscreenElement'] || null
|
|
|
+ )
|
|
|
+ },
|
|
|
+ setScale () {
|
|
|
+ const elements = document.getElementsByClassName('my-home')
|
|
|
+ const toWidth = elements[0].offsetWidth
|
|
|
+ this.toScale = toWidth / 1920
|
|
|
+ elements[0].style.height = (1080 * this.toScale) + 'px'
|
|
|
+ },
|
|
|
+ fullScreen () {
|
|
|
+ const element = document.getElementsByClassName('my-home')
|
|
|
+ element[0].requestFullscreen()
|
|
|
+ const toWidth = window.innerWidth
|
|
|
+ this.toScale = toWidth / 1920
|
|
|
+ this.show = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .mod-home {
|
|
|
- line-height: 1.5;
|
|
|
+<style scoped lang="scss">
|
|
|
+ @font-face {
|
|
|
+ font-family: 'YouSheBiaoTiHei';
|
|
|
+ src: url('../../assets/home/YouSheBiaoTiHei-2.ttf') format('truetype'); /* 最后优先级 */
|
|
|
+ }
|
|
|
+ .home-main{
|
|
|
+ background: url(../../assets/home/bg.jpg) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 1080px !important;
|
|
|
+ width: 1920px !important;
|
|
|
+ overflow: auto;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ position: relative;
|
|
|
+ transform-origin: left top;
|
|
|
+ .top{
|
|
|
+ height: 104px;
|
|
|
+ width: 1920px;
|
|
|
+ background: url(../../assets/home/top.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ padding-top:12px;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ .top-name{
|
|
|
+ font-size: 39px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 51px;
|
|
|
+ letter-spacing: 11px;
|
|
|
+ text-shadow: 0px 2px 9px #001E8D;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-center{
|
|
|
+ display: flex;
|
|
|
+ width: 1920px;
|
|
|
+ .center-1{
|
|
|
+ width: 541px;
|
|
|
+ min-width: 541px;
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 8px;
|
|
|
+ padding-top: 63px;
|
|
|
+ }
|
|
|
+ .center-2{
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 88px;
|
|
|
+ }
|
|
|
+ .center-3{
|
|
|
+ width: 541px;
|
|
|
+ min-width: 541px;
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 8px;
|
|
|
+ padding-top: 63px;
|
|
|
+ }
|
|
|
+ .flex-1{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .item-title{
|
|
|
+ height: 48px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ background: url(../../assets/home/title.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ align-items: center;
|
|
|
+ .item-title-name{
|
|
|
+ font-size: 24px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 31px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-shadow: 0px 1px 5px rgba(0,15,108,0.66);
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ padding-left: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .titel-1{
|
|
|
+ width: 830px;
|
|
|
+ background: url(../../assets/home/title1.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .msg-1{
|
|
|
+ width: 500px;
|
|
|
+ height: 458px;
|
|
|
+ background: url(../../assets/home/bg_1.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-top:5px;
|
|
|
+ padding-top:20px;
|
|
|
+ padding-left: 11px;
|
|
|
+ padding-right: 17px;
|
|
|
+ padding-bottom: 18px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .msg-item{
|
|
|
+ display: flex;
|
|
|
+ background: url(../../assets/home/messge.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 69px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ align-items: center;
|
|
|
+ .msg-title{
|
|
|
+ width: 127px;
|
|
|
+ min-width: 127px;
|
|
|
+ height: 69px;
|
|
|
+ background: url(../../assets/home/mes_title.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .msg-center{
|
|
|
+ padding-left: 10px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-2{
|
|
|
+ display: flex;
|
|
|
+ width: 500px;
|
|
|
+ height: 429px;
|
|
|
+ background: url(../../assets/home/bg_2.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 0px 14px;
|
|
|
+ padding-top: 23px;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .msg-item{
|
|
|
+ margin-left: 6px;
|
|
|
+ width: 227px;
|
|
|
+ padding-bottom: 11px;
|
|
|
+ img{
|
|
|
+ width: 227px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ .img-name{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 25px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ padding-top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-3{
|
|
|
+ width: 500px;
|
|
|
+ height: 951px;
|
|
|
+ background: url(../../assets/home/bg_3.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 24px 12px;
|
|
|
+ padding-right: 16px;
|
|
|
+ img{
|
|
|
+ width: 472px;
|
|
|
+ height: 276px;
|
|
|
+ background: #D8D8D8;
|
|
|
+ border: 1px solid #327FFF;
|
|
|
+ }
|
|
|
+ .msg-des{
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 22px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-nav{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 11px;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ .nav-item{
|
|
|
+ width: 182px;
|
|
|
+ height: 57px;
|
|
|
+ background: url(../../assets/home/menu.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content:center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 23px;
|
|
|
+ text-shadow: 0px 0px 7px rgba(255,177,30,0.8);
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+ .acitve{
|
|
|
+ background: url(../../assets/home/active.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-4{
|
|
|
+ width: 830px;
|
|
|
+ height: 373px;
|
|
|
+ background: url(../../assets/home/bg_2.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 15px 12px;
|
|
|
+ padding-bottom: 0px;
|
|
|
+ .img-b{
|
|
|
+ width: 806px;
|
|
|
+ height: 285px;
|
|
|
+ position: relative;
|
|
|
+ .img-b1{
|
|
|
+ width: 806px;
|
|
|
+ height: 285px;
|
|
|
+ background: url(../../assets/home/img_bg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-des{
|
|
|
+ padding-top: 10px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-5{
|
|
|
+ display: flex;
|
|
|
+ width: 830px;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .video{
|
|
|
+ width: 391px;
|
|
|
+ height: 190px;
|
|
|
+ }
|
|
|
+ .msg-5-1{
|
|
|
+ width: 410px;
|
|
|
+ height: 230px;
|
|
|
+ background: url(../../assets/home/sp_1.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 11px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 34px;
|
|
|
+ }
|
|
|
+ .msg-5-2{
|
|
|
+ width: 410px;
|
|
|
+ height: 230px;
|
|
|
+ background: url(../../assets/home/sp_2.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 11px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 34px;
|
|
|
+ }
|
|
|
+ .msg-5-3{
|
|
|
+ width: 410px;
|
|
|
+ height: 230px;
|
|
|
+ background: url(../../assets/home/sp_3.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 11px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 34px;
|
|
|
+ }
|
|
|
+ .msg-5-4{
|
|
|
+ width: 410px;
|
|
|
+ height: 230px;
|
|
|
+ background: url(../../assets/home/sp_4.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 11px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .full-screen{
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ svg{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
chenying
