B端默认页这样写快捷功能入口(引导式说明&菜单收纳兼顾)

前言

写一个基于countTo(数字滚动组件库)可视化功能入口卡Demo,方便jym复制即用，当然代码也存在很多待优化和提高的地方,纯属就抛砖引玉！代码不一定优雅，贵在原创！

在线Demo演示

本例子用到组件

本demo例子用到了2个前端组件库countTo 具体怎么使用jym可以网上搜索，也可以看我过往写的例子juejin.cn/post/743155… 这里就不赘述了

磨砂玻璃css

    background: linear-gradient(12deg, rgb(247, 255, 255), rgba(241, 230, 236, 0.4));
    backdrop-filter: blur(8px);
    border: 1px solid #FFF;

页面部分

  <!-- page start -->
  <div class="easy-layout-page"> 
    <!-- 内容 start -->
    <h2>{{theme.title}}</h2>
    <p class="hint-p">{{theme.slogan}}</p>
    <div class="flex-row-box" style="margin-top:20px">
      <!-- item start -->
      <div class="count-info" v-for="(i,index) in countArr" :key="index"> 
        <h1>
          <countTo  :startVal='0' :endVal='i.value' :duration='1200'></countTo>
          <i>个</i>
        </h1> 
        <p class="hint-p">{{i.label}}</p>
      </div>
      <!-- item end -->
    </div>
    <div class="flex-row-box" style="padding:10px 0px;"> 
      <!-- card start -->
      <div class="card-bar" v-for="(i,index) in cardArr" :key="index">
        <h1>{{i.value}}</h1>
        <h2 v-html="i.label"></h2>
        <div class="card-btn-bar">  
          <div class="card-row-bar">
            <span v-for="(item,index) in i.btnArr" :key="index">
              <p v-html="item.icon"></p>
              <p>{{item.label}}</p>
            </span>
          </div>
        </div>
      </div>
      <!-- card end -->
    </div>  
    <!-- 内容 end -->
  </div>
  <!-- page end -->

数据结构部分

      theme:{
        title:'数据平台',
        slogan:'数据为基，管控为魂，打造智慧决策新平台'
      },
      countArr:[
        {
          label:'数据源总数',
          value:120, 
        },{
          label:'元数据表数',
          value:1230, 
        },{
          label:'字段总数',
          value:24302, 
        },{
          label:'数据接口数',
          value:168,  
        }
      ], 
       cardArr:[
        {
          value:'Source',
          label:'数据源接入<br/>与同步、权限、清晰管理', 
          btnArr:[
            {
              icon:'',
              label:'数据源管理'
            },
            {
              icon:'',
              label:'数据同步'
            },
            {
              icon:'',
              label:'探源分析'
            } 
          ]
        },{
          value:'Gather',
          label:'元数据采集<br/>与质量监控、版本控制管理', 
          btnArr:[
            {
              icon:'',
              label:'元数据管理'
            },
            {
              icon:'',
              label:'SQL血缘解析'
            },
            {
              icon:'',
              label:'血缘采集关系'
            } 
          ]
        }
      ]

样式代码部分

html,body{padding:0px;margin: 0px;width: 100%;height: 100%;}
body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url('https://gd-hbimg.huaban.com/9da6d4aa63243fb5b7f11c3abf5d32030ed0f1b83d88c1-QB7atA') no-repeat center center;
  background-size: cover;
  padding-top: 40px;
}

// css start ----------------------------------
.easy-layout-page{
  width: 600px;
  height: 100%; 

  $primaryColor:#dd2826;
  $hintColor:#6a8195;

  * {  
    box-sizing: border-box;
    flex-shrink: 0;
  } 

  h1,h2,h3,h4,p{
    margin: 0px; 
    line-height: 1.6;
  }
  h1{
    font-size: 16px;
  }
  .hint-p{
    font-size: 12px;
    color:$hintColor;
  }
  .flex-row-box{
    width: 100%;
    display: flex;
    align-items: center;
    padding:10px 0px;
    .count-info{  
      margin-right: 40px;

      h1{
        font-size: 22px;
        line-height: 22px;
        color:$primaryColor;
        i{
          font-style: normal;
          font-size: 12px;
          color:$hintColor; 
        }
      } 
    }
  }
  
  .card-bar{
    width: 0px;
    height: 160px;
    flex-grow: 1;
    border-radius: 5px;
    background: linear-gradient(12deg, rgb(247, 255, 255),rgba(255,255,255,0.5), rgba(241, 230, 236, 0.4));
    backdrop-filter: blur(8px);
    margin-right: 12px;    
    border: 1px solid #FFF;
    overflow: hidden;
    padding:20px 25px;
    transition: 300ms ease-in-out;
    cursor: pointer;
    h1{
      font-size: 30px;
      line-height: 40px;
      margin-top: 40px;
      color:rgba($primaryColor,0.1);
      transition: 200ms linear;
    }
    h2{
      font-size: 14px;
      line-height: 18px;
      color:#111;
    }
    &:last-child{
      margin-right: 0px;
    }
    &:hover{
      flex-grow: 1.5;
      .card-btn-bar{
        margin-top:0px;
      }
      h1{
        margin-top: -60px;
        margin-bottom: 20px;
      }  
    }
    .card-btn-bar{
      margin-top: 30px;
      transition: 200ms linear;

      .card-row-bar{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:5px 0px;
        margin-top: 10px;
        span{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding:10px;
          border-radius: 3px;
          transition: 200ms linear;
          cursor: pointer;
          &:hover{
            
            p{
              color:$primaryColor
            }
          }
        }
        p{
          font-size: 12px;
          color:#000;
          transition: 200ms linear;
        } 
      }
    }
    
  }
}