| | |
| | | <template> |
| | | <div class="login-container"> |
| | | <div class="bg" /> |
| | | <div class="login-container-center"> |
| | | <el-carousel |
| | | :autoplay="true" |
| | | indicator-position="outside" |
| | | height="580px" |
| | | :interval="3000" |
| | | style="width: 500px;margin-left: 20px" |
| | | > |
| | | <el-carousel-item> |
| | | <img src="@/assets/images/img1.png" style="margin-top: -30px"> |
| | | <div class="itemLabel"> |
| | | <p class="title" :style="{color:$store.state.settings.theme}">智慧物联</p> |
| | | <p class="content">生产现场数据实时采集、 传递、多维度可视化呈现</p> |
| | | </div> |
| | | </el-carousel-item> |
| | | <el-carousel-item> |
| | | <img src="@/assets/images/img2.png" style="margin-top: -30px"> |
| | | <div class="itemLabel"> |
| | | <p class="title" :style="{color:$store.state.settings.theme}">精益思维</p> |
| | | <p class="content">运用精益思想和IT系统技 术打造工厂制造协同平台</p> |
| | | </div> |
| | | </el-carousel-item> |
| | | <el-carousel-item> |
| | | <img src="@/assets/images/img3.png" style="margin-top: -30px"> |
| | | <div class="itemLabel"> |
| | | <p class="title" :style="{color:$store.state.settings.theme}">行业组件</p> |
| | | <p class="content">基于制造模型快速灵活地 配置客户专属的应用场景</p> |
| | | </div> |
| | | </el-carousel-item> |
| | | <!-- <el-carousel-item v-for="item in carouselArr" :key="item.title">--> |
| | | <!-- <div :style="{ width:'200px',height:'300px' ,margin:'95px 0px 35px 155px'}">--> |
| | | <!-- <img :src="item.url" alt="" style="width: 200px;height: 300px">--> |
| | | <!-- </div>--> |
| | | <!-- <div class="itemLabel">--> |
| | | <!-- <div class="title">{{ item.title }}</div>--> |
| | | <!-- <div class="content">{{ item.content }}</div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-carousel-item>--> |
| | | </el-carousel> |
| | | |
| | | <el-form |
| | | ref="loginForm" |
| | |
| | | <el-button |
| | | :loading="loading" |
| | | type="primary" |
| | | style="width:100%;margin-top:30px;letter-spacing: 10px;height: 40px;" |
| | | style="width:100%;margin-top:30px;letter-spacing: 10px;height: 40px; |
| | | background: #6e67fe !important;" |
| | | @click.native.prevent="handleLogin" |
| | | >登录 |
| | | </el-button> |
| | |
| | | min-height: 100%; |
| | | width: 100%; |
| | | //background-color: $bg; |
| | | background-color: #6e67fe; |
| | | overflow: hidden; |
| | | background: url("../../assets/images/login_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | opacity: 1; |
| | | //background: url("../../assets/images/login_bg.png") no-repeat; |
| | | //background: url("../../assets/images/bg3.webp") no-repeat; |
| | | //background-size: 100% 100%; |
| | | //opacity: 1; |
| | | |
| | | .bg{ |
| | | background: url("../../assets/images/bg3.webp") no-repeat; |
| | | background-size: 100% 100%; |
| | | width: 60vw; |
| | | height: 100vh; |
| | | //margin-top: 10vh; |
| | | |
| | | } |
| | | |
| | | .login-container-center { |
| | | width: 1000px; |
| | | //width: 1000px; |
| | | width: 546px; |
| | | height: 600px; |
| | | background-color: #fff; |
| | | border-radius: 10px; |
| | | z-index: 0.5; |
| | | //使盒子居中 |
| | | position: absolute; |
| | | left: 50%; |
| | | top: 50%; |
| | | transform: translate(-50%, -50%); |
| | | right: 5vw; |
| | | top: calc(50vh - 300px); |
| | | //left: 50%; |
| | | //top: 50%; |
| | | //transform: translate(-50%, -50%); |
| | | |
| | | //transform: scale(0.9); |
| | | .itemLabel { |
| | | display: flex; |
| | | justify-content: center; |