apt

src/pages/shells/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="zbox body-container" :class="{'enClass': selectType === 'en-us'}">
+    <el-row type="flex" class="header-container" justify="space-between" align="middle">
+      <el-col :span="3">
+        <el-button type="primary" icon="el-icon-s-home" class="button-home" @click="$router.push('/index/home')">主页</el-button>
+      </el-col>
+      <el-col :span="12">
+        <el-row type="flex" justify="end" align="middle">
+          <div class="state-item">自动模式</div>
+          <div class="state-item">执行中</div>
+          <div class="relative elec-qty-wrap">
+            <div class="absolute elec-qty elec-qty_s" style="width: 100%"></div>
+            <div class="absolute zbox elec-qty_border"></div>
+            <div class="elec-txt">100%</div>
+          </div>
+          <i class="el-icon-user-solid icon-user" :style="{'color': isUsed ? '#00ff29' : '#737f92'}" @click="loginModalHandle"></i>
+          <i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
+        </el-row>
+      </el-col>
+    </el-row>
+    <div class="error-tips" ref="scrollContainer" @click="$router.push('/index/warning')">
+      <div class="zbox scroll-text" ref="scrollText">
+        <i class="el-icon-warning icon-warning"></i>
+        <div class="error-tips-t">错误提示：1.障碍物告警 2.定位丢失</div>
+      </div>
+    </div>
+    <el-row type="flex" class="relative main-conatiner">
+      <div class="absolute hud_left"></div>
+      <div class="absolute hud_left hud_right"></div>
+      <router-view></router-view>
+    </el-row>
+    <div class="task-tips">
+      <div class="task-tips-t">A->B->C->D</div>
+    </div>
+    <login-modal v-if="loginVisible" ref="loginModal" @refreshUser="refreshUser"/>
+    <config-modal v-if="configVisible" ref="configModal"/>
+  </div>
+</template>
+
+<script>
+import LoginModal from './login-modal.vue'
+import ConfigModal from './config-modal.vue'
+export default {
+  components: {
+    LoginModal,
+    ConfigModal
+  },
+  data () {
+    return {
+      loginVisible: false,
+      isUsed: false,
+      configVisible: false
+    }
+  },
+  created () {
+    if (this.$i18n.locale === 'zh-cn') {
+      this.selectType = 'zh-cn'
+    } else if (this.$i18n.locale === 'en-us') {
+      this.selectType = 'en-us'
+    }
+  },
+  mounted () {
+    this.checkTextOverflow()
+    window.addEventListener('resize', this.checkTextOverflow)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.checkTextOverflow)
+  },
+  methods: {
+    // 滚动区域
+    checkTextOverflow () {
+      const container = this.$refs.scrollContainer
+      const text = this.$refs.scrollText
+      if (!container || !text) return
+      const containerWidth = container.offsetWidth
+      const textWidth = text.scrollWidth
+      if (textWidth > containerWidth) {
+        // 如果文字超出容器宽度，启动滚动动画
+        const duration = (textWidth / containerWidth) * 10
+        text.style.animation = `scrollText ${duration}s linear infinite`
+      } else {
+        // 如果文字没有超出容器宽度，停止滚动动画
+        text.style.animation = 'none'
+      }
+    },
+    // 管理员登录
+    loginModalHandle () {
+      this.loginVisible = true
+      this.$nextTick(() => {
+        this.$refs.loginModal.init()
+      })
+    },
+    // 切换登录状态
+    refreshUser (flag) {
+      this.isUsed = flag
+    },
+    // 配置
+    configModalHandle () {
+      this.configVisible = true
+      this.$nextTick(() => {
+        this.$refs.configModal.init()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.header-container
+  _wh(100%, .48rem)
+  padding 0 2%
+  background top center / 100% 84px url(../../images/new/header_bg_1.png) no-repeat
+.button-home
+  padding .06rem .1rem
+  background linear-gradient(0deg, #E64F29, rgba(230, 79, 41, 0.5))
+  border-color rgba(230, 79, 41, 0.7)
+.state-item
+  _wh(.72rem, .3rem)
+  _font(.14rem,.3rem,#fff,,center)
+  font-family 'Adobe Heiti Std'
+  margin-right .04rem
+  background center / 100% 100% url(../../images/new/state-item_bg.png) no-repeat
+.elec-qty-wrap
+  _wh(.5rem, .28rem)
+  margin-right .04rem
+  z-index 151
+.elec-qty
+  z-index 152
+  _wh(0, 100%)
+  background-color green
+  background left top url(../../images/new/elec.png) no-repeat
+  background-size cover
+.elec-qty_s
+  background-image url(../../images/new/elec.png)
+.elec-qty_border
+  z-index 152
+  background center / 100% 100% url(../../images/new/elec_bg.png) no-repeat
+.elec-txt
+  position relative
+  z-index 153
+  _font(.15rem, .28rem, #fff,,center)
+  font-family 'Adobe Heiti Std'
+.icon-user
+  font-size .24rem
+  margin-right .04rem
+.icon-tools
+  font-size .24rem
+  color #fff
+  cursor pointer
+.error-tips
+  width 100%
+  height .3rem
+  line-height .3rem
+  overflow hidden
+  white-space nowrap
+  background-color rgba(253, 246, 236, .4)
+.scroll-text
+  display inline-block
+  text-align center
+  animation none
+.icon-warning
+  font-size .18rem
+  color #e6a23c
+.error-tips-t
+  display inline-block
+  font-size .16rem
+  color #e6a23c
+.task-tips
+  width 100%
+  height .4rem
+  line-height .4rem
+  padding 0 2%
+  background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
+.task-tips-t
+  _font(.2rem, .4rem, #fff, ,center)
+.hud_left
+  position absolute
+  left 0
+  top 0
+  _wh(2%, 100%)
+  background center / 100% auto url(../../images/new/hud_left.png) no-repeat
+.hud_right
+  left auto
+  right 0
+  background-image url(../../images/new/hud_right.png)
+</style>