场景swipe预置文字提示,场景图标尺寸修改

hanbaoshan

2020-09-10 cd5739152e5f536ba666a9b8a5568d30b2092287

场景swipe预置文字提示,场景图标尺寸修改

 src/pages/cameraAccess/components/LinkageRule.vue

@@ -1,17 +1,13 @@
<template>
  <div class="s-linkage-rules">
    <div class="top">
    <!-- <div class="top">
      <p style="text-align:left;margin-bottom: 14px;">
        <b style="font-size: 14px;line-height: 18px;">已选算法</b>
        <b style="font-size: 14px;line-height: 18px;">场景</b>
      </p>

      <div class="clearfix" style="min-width:1570px;">
        <div class="slide-scene">
          <span class="task-tip" v-if="tableRuleList.length == 0 ">暂无算法，请在独立规则中选择算法</span>
          <slide-scene :sceneData="tableRuleList"></slide-scene>
        </div>
        <!-- <slide-scene :sceneData="Camera.rules"></slide-scene> -->
        <!-- 系统信息 -->
        <div class="top-right">
          <sysinfo
            v-if="showSysInfo"
@@ -21,8 +17,29 @@
          />
        </div>
      </div>
    </div> -->
    <div class="top" >
      <p class="task-css">
        <b style="font-size: 14px; line-height: 18px;">场景</b>
      </p>
      <div class="clearfix">
        <slide-scene :sceneData="tableRuleList"></slide-scene>
        <div class="top-right">
          <sysinfo
            v-if="showSysInfo"
            style="margin-top: -10px;"
            :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
            :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
          />
          <!-- <sysinfo
            :showRealPoll="cameraType === 'camera'"
            :ShowLocalVedio="cameraType === 'dataStack'"
            v-if="showSysInfo"
            style="margin-top:-10px"
          /> -->
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="devide"></div>
      <div class="bottom-right">
@@ -277,7 +294,7 @@
.s-linkage-rules {
  width: 100%;
  //height: 100%;
  padding: 13px 0 20px;
  //padding: 13px 0 20px;
  position: relative;
  .devide{
    height: 10px;
@@ -287,20 +304,17 @@
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    top: 0;
    .swiper-box {
      height: 100%;
      float: left;
      width: 48%;
      width: 46%;
      margin-top: -10px;
      position: relative;
    }
    .swiper-container {
      position: initial;
      min-width: 472px;
      width: 80%;

      // height: 124px;
      width: 86%;
    }
    .swiper-slide {
      position: relative;
@@ -339,10 +353,6 @@
          backdrop-filter: blur(1px) brightness(100%);
          display: none;
        }

        // @media screen and(max-width: 1280px) {
        //   max-width: 110px;
        // }
        @media screen and(max-width: 1440px) {
          max-width: 110px;
        }
@@ -389,6 +399,12 @@
      .card-box{
        width: 54%!important;
      }
      .eCharts-box{
        width: 45%;
        canvas{
          width: 98%!important;
        } 
      }
    }
    .task-css {
      text-align: left;
@@ -398,7 +414,7 @@

  .bottom {
    width: 100%;
    
    margin-bottom: 20px;
    .bottom-side {
      height: 100%;
      width: 250px;
@@ -552,13 +568,7 @@
  .add-btn:hover {
    color: #2249b4;
  }
  .task-tip {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #cccccc;
    margin-top: 10%;
    margin-left: 38%;
  }
  
}
</style>
<style lang="scss" scoped>

 src/pages/cameraAccess/components/SeparateRules.vue

@@ -534,8 +534,6 @@
      position: initial;
      min-width: 472px;
      width: 86%;

      // height: 124px;
    }
    .swiper-slide {
      position: relative;
@@ -574,10 +572,6 @@
          backdrop-filter: blur(1px) brightness(100%);
          display: none;
        }

        // @media screen and(max-width: 1280px) {
        //   max-width: 110px;
        // }
        @media screen and(max-width: 1440px) {
          max-width: 110px;
        }
@@ -798,13 +792,6 @@
    color: #3d68e1;
    margin-left: 10px;
    font-size: 14px;
  }
  .task-tip {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #cccccc;
    margin-top: 10%;
    margin-left: 38%;
  }

  .marker {

 src/pages/cameraAccess/components/scene/SlideScene.vue

@@ -1,7 +1,7 @@
<template>

  <div class="swiper-box">

    <p class="task-tip" v-if="sceneData.length == 0 ">暂无场景，请开始创建</p>

    <swiper ref="sceneSwiper" v-if="sceneData.length>=1" :options="swiperOption" class="swiper-box-container">

      <!-- <span class="task-tip" v-show="Camera.rules.length == 0 ">暂无场景,请开始创建</span> -->

      <swiper-slide v-for="item in sceneData" :key="item.id+'s'">

        <div class="wrap-box" >

          <div class="inner">

@@ -143,6 +143,12 @@
  fill: currentColor;

  overflow: hidden;

}

.task-tip{

  font-family: PingFangSC-Regular;

  font-size: 12px;

  color: #cccccc;

  margin-top: 10%;

}

.wrap-box {

  width: 100%;

  display: inline-block;

@@ -222,7 +228,7 @@
            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 96%;

            width: 76%;

          }

        }

      }