标签：vue ty 处理 100% height width background border 页面

<template>
  <div class="aseet-border"
       :class="theme[themeSelected].value">
    <!-- 头部框格 -->
    <div class="aseet-header">
      <div class="header-left">
        <img src="~@/assets/index/logo.png"
             alt="">
        <span>{{ title }}</span>
      </div>
      <div class="header-right">
        <span class="action"
              style="margin-right: 40px;"
              title="返回"
              @click="() => $router.go(-1)">
          <a-icon type="rollback"></a-icon>
        </span>
        <span class="action"
              :title="fullscreen ? '退出全屏' : '全屏显示'"
              @click="screen">
          <a-icon :type="getFullscreenIcon"></a-icon>
        </span>
        <span class="action"
              title="刷新"
              @click="() => $router.go(0)">
          <a-icon type="reload"></a-icon>
        </span>
        <a-popover :title="null"
                   trigger="hover"
                   overlayClassName="popoverClass">
          <template slot="content">
            <zhong></zhong>
          </template>
          <span class="action">
            <a-icon type="clock-circle"></a-icon>
          </span>
        </a-popover>
      </div>
    </div>
    <div class="aseet-content">
      <!-- 侧边栏标签 -->
      <div class="aseet-tag">
        <ul class="left-toolbar-container">
          <li v-for="(item, index) in tagTypeArray"
              :key="index"
              :class="tagSelect===item.dictValue?'selected':null"
              @click="chosseTagitem(item.dictValue)">{{ item.dictLabel }}
            <a-icon type="radar-chart" />
          </li>
        </ul>
      </div>
      <!-- 局部内容 -->
      <div class="aseet-center"
           ref="assetSide">
        <!-- 局部头 -->
        <div :style="{ height: topHeight }"
             class="aseet-top">
          <!-- 标签内容 -->
          <div class="tag-content">
            <tag-menu @select="handleTagsParam"
                      ref="tagMenu"></tag-menu>
          </div>
          <!-- ip内容 -->
          <div class="ip-content"></div>
        </div>
        <!-- 局部底 -->
        <div class="aseet-bottom"
             ref="bottomSide">
          <!-- 拉动条 -->
          <div v-show="isShow"
               ref="resizer"
               class="ma-resizer-y"
               @mousedown="doResizeY"></div>
          <!-- 底部内容--组件填充 -->
          <div class="bottom-content"
               v-show="isShow"
               ref="content"
               :style="{ height: bottomHeight }">
            <div class="bottom-header">
              <div class="left">
                <span>{{ bottomToolSelect | bottomFilter(bottomToolbars) }}信息展示</span>
              </div>
              <a-icon class="icon-min"
                      @click="clearHight"
                      type="minus" />
            </div>
          </div>
          <!-- 底部标签 -->
          <div class="bottom-tag">
            <ul class="ma-toolbar-container">
              <li v-for="(item, index) in bottomToolbars"
                  :key="index"
                  :class="bottomToolSelect===item.id?'selected':null"
                  @click="chosseBottomTagitem(item)">{{ item.name }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部框格 -->
    <div class="aseet-footer">
      <span class="message">{{ clickMessage }}</span>
      <span class="theme"
            title="点击切换主题"
            @click="changeTheme(themeSelected)">{{ theme[themeSelected].name }}</span>
    </div>
  </div>
</template>

<script>
import VenusScroll from '@/components/pts/Scroll'
import { mapGetters } from 'vuex'
import { getDictArray } from '@/utils/dict'
import TagMenu from './modules/TagMenu.vue'
import Zhong from './modules/zhong.vue'
export default {
  name: 'AssetShow',
  components: {
    VenusScroll,
    TagMenu,
    Zhong
  },
  mounted() {
    const self = this
    window.onresize = () => {
      const assetSide = self.$refs.assetSide.getClientRects()[0].height
      const bottomSide = self.$refs.bottomSide.getClientRects()[0].height
      if (bottomSide === 31) {
        return
      }
      this.topHeight = (assetSide - bottomSide) + 'px'
    }
  },
  data() {
    return {
      /** 初始化页面参数 */
      fullscreen: false,
      theme: [
        {
          id: 1,
          name: '白色主题',
          value: 'white-theme'
        },
        {
          id: 2,
          name: '黑色主题',
          value: 'black-theme'
        }
      ],
      clickMessage: '欢迎进入资产管理首页！', // 页尾提示
      title: '资产管理', // 标题
      bottomHeight: '300px',
      topHeight: 'calc(100% - 30px)',
      /** 数据 */
      tagTypeArray: [], // 左侧标签类型数据
      bottomToolbars: [
        {
          id: 1,
          name: '端口'
        },
        {
          id: 2,
          name: '漏洞'
        },
        {
          id: 3,
          name: '客户端'
        }
      ],
      /* 参数控制 start */
      themeSelected: 1, // 主题index值
      bottomToolSelect: 0, // bottomToolbars---id
      isShow: false, // 拉动条填充
      tagSelect: '1', // 标签类型值dictValue
      tagIds: []// 资产标签值[ids]
    }
  },
  watch: {
  },
  filters: {
    dictFilter(data, map) {
      return map[data] && map[data].text || ''
    },
    bottomFilter(data, bottomToolbars) {
      if (bottomToolbars[data - 1]) {
        return bottomToolbars[data - 1].name
      }
      return ''
    }
  },
  computed: {
    ...mapGetters(['scrollInfo', 'backTop', 'backToView']),
    getFullscreenIcon: function () {
      return this.fullscreen ? 'fullscreen-exit' : 'fullscreen'
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleTagsParam(value) { // 资产标签选中参数回调
      this.tagIds = value
    },
    changeTheme(index) { // 主题改动
      if (index === this.theme.length - 1) {
        this.themeSelected = 0
      } else {
        this.themeSelected = this.themeSelected + 1
      }
    },
    chosseTagitem(value) { // 侧边tag选中
      this.tagSelect = value
    },
    chosseBottomTagitem(item) { // 底部tag选中方法
      this.bottomToolSelect = item.id
      this.isShow = true
      this.refreshHight()
    },
    init() { // 初始化页面
      // 默认选中第一个tag
      this.chosseTagitem(this.tagSelect)
      getDictArray('t_penetration_tag_type').then(data => {
        this.tagTypeArray = data
      })
    },
    refreshHight() { // 重置拉动条高度
      const assetSide = this.$refs.assetSide.getClientRects()[0].height
      let bottomSide = this.$refs.bottomSide.getClientRects()[0].height
      if (bottomSide === 31) {
        bottomSide = 330
      }
      this.topHeight = (assetSide - bottomSide) + 'px'
    },
    clearHight() { // 清除拉动条
      this.topHeight = 'calc(100% - 30px)'
      this.bottomHeight = '300px'
      this.isShow = false
      this.bottomToolSelect = 0
    },
    doResizeY() { // 拉动条处理
      const box = this.$refs.content.getClientRects()[0]
      const assetSide = this.$refs.assetSide.getClientRects()[0].height
      document.onmousemove = e => {
        if (e.clientY > 150) {
          var move = box.height - (e.clientY - box.y)
          if (move > 30) {
            this.bottomHeight = move + 'px'
            this.topHeight = (assetSide - move - 30) + 'px'
          }
        }
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        this.$refs.resizer.releaseCapture && this.$refs.resizer.releaseCapture()
      }
    },
    screen() {
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}

</script>
<style lang="less" scoped>
@import 'index';
</style>
<style lang="less">
.popoverClass {
  .ant-popover-inner {
    background: #3c3f41;
    border: 0;
  }
  .ant-popover-arrow {
    border-color: #3c3f41 !important;
    background: #3c3f41 !important;
  }
}
</style>

less

@import 'theme.less';
@ty-border:var(--ty-border);/* 边框颜色 */
@selected-background: var(--selected-background);/* 选中时背景颜色 */
@hover-background:  var(--hover-background);/* 悬浮时背景颜色 */
@tag-color:var(--tag-color);/* 标签字体颜色 */
@ip-content-backgrund:var(--ip-content-backgrund);/* 资产页面背景 */
@ty-color: var(--ty-color);/* 全局框内颜色 */
.aseet-border{
  width: 100%;
  min-width: 1200px;
  height:100vh;
  min-height:800px;
  color: @tag-color;
  .aseet-header{
    height: 33px;
    width: 100%;
    background: @ty-color;
    border-bottom: 1px solid @ty-border;
    position: relative;
    .header-left{
      width: 50%;
      height: 100%;
      position: absolute;
      left: 0;
      img{
        position: absolute;
        width: 20px;
        left: 3px;
        top: 7px;
      }
      span{
        line-height: 33px;
        left: 25px;
        position: absolute;
      }
    }
    .header-right{
      width: 50%;
      height: 100%;
      position: absolute;
      right: 0;
      .action{
        cursor: pointer;
        transition: all 0.3s;
        width: 30px;
        height: 30px;
        line-height: 33px;
        margin-right: 6px;
        display: inline-block;
        float: right;
        text-align: center;
        font-size: 16px;
        &:hover {
          opacity: 0.6;
        }
      }
    }
    
  }
  .aseet-content{
    height: calc(100% - 33px - 30px);
    width: 100%;
    background: @ty-color;
    position: relative;
    .aseet-tag{
      height: 100%;
      width: 22px;
      position: absolute;
      left: 0px;
      .left-toolbar-container{
        padding: 0;
        background: @ty-color;
        border-right: 1px solid @ty-border;
        width: 100%;
        height: 100%;
        li {
          padding-top: 10px;
          font-size: 12px;
          font-family: 'Consolas', '微软雅黑';
          width: 22px;
          height: 100px;
          cursor: pointer;
          letter-spacing: 2px;
          text-align: center;
          &:hover{
            background: @hover-background;
          }
        }
        .selected{
          background: @selected-background;
          &:hover{
            background: @selected-background;
          }
        }
      }
    }
    .aseet-center{
      height: 100%;
      width: calc(100% - 22px);
      border-right:1px solid @ty-border;
      position: absolute;
      right: 0;
      .aseet-top{
        width: 100%;
        position: absolute;
        top: 0;
        .tag-content{
          position: absolute;
          left: 0;
          width: 272px;
          height: 100%;
          border-right:1px solid @ty-border;
        }
        .ip-content{
          position: absolute;
          right: 0;
          width: calc(100% - 272px);
          height: 100%;
          background: @ip-content-backgrund;
        }
      }
      .aseet-bottom{
        width: 100%;
        border-top: 1px solid @ty-border;
        position: absolute;
        bottom: 0;
        .ma-resizer-y {
          position: absolute;
          width: 100%;
          height: 10px;
          margin-top: -5px;
          background: none;
          cursor: n-resize;
        }
        .bottom-content{
          width: 100%;
          .bottom-header{
            height: 25px;
            border-bottom: 1px solid @ty-border;
            .left{
              width: 50%;
              float: left;
              height: 100%;
              line-height: 25px;
              span{
                color: @tag-color;
                margin-left: 10px;
              }
            }
            .icon-min{
              float: right;
              margin-right: 10px;
              line-height:25px;
            }
          }
        }
        .bottom-tag{
          height: 30px;
          width: 100%;
          border-top: 1px solid @ty-border;
          position: relative;
          .ma-toolbar-container{
            padding: 0;
            background: @ty-color;
            border-right: 1px solid @ty-border;
            width: 100%;
            height: 100%;
            li {
              width: 100px;
              height: 29px;
              line-height: 29px;
              list-style: none;
              float: left;
              cursor: pointer;
              letter-spacing: 2px;
              text-align: center;
              &:hover{
                background: @hover-background;
              }
            }
            .selected{
              background: @selected-background;
              &:hover{
                background: @selected-background;
              }
            }
          }
        }
      }
    }
  }
  .aseet-footer{
    border-top: 1px solid @ty-border;
    height: 30px;
    width: 100%;
    background: @ty-color;
    position: absolute;
    bottom: 0;
    .message{
      line-height: 30px;
      margin-left: 20px;
    }
    .theme{
      right: 30px;
      line-height: 30px;
      position: absolute;
      cursor: pointer;
    }
  }
}

动态主题

/* 白色主题 */
.white-theme {
  --ty-color:#f2f2f2;/* 全局框内颜色 */
  --ty-border:#cdcdcd;/* 边框颜色 */
  --selected-background: #bdbdbd;/* 选中时背景颜色 */
  --hover-background: #d9d9d9;/* 悬浮时背景颜色 */
  --tag-color:#000;/* 标签字体颜色 */
  --ip-content-backgrund:#b6b6b6;/* 资产页面背景 */
}

/* 黑色主题 */
.black-theme {
  --ty-color:#3c3f41;/* 全局框内颜色 */
  --ty-border:#323232;/* 边框颜色 */
  --selected-background: #303030;/* 选中时背景颜色 */
  --hover-background: #5c5656;/* 悬浮时背景颜色 */
  --tag-color:#bbbbbb;/* 标签字体颜色 */
  --ip-content-backgrund:#282828;/* 资产页面背景 */
}

标签：vue,ty,处理,100%,height,width,background,border,页面
来源： https://www.cnblogs.com/ff2ting/p/15702786.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。