<template>
  <div class="yc-content" ref="searchBar">
    <!-- 头部 -->
    <header :class="{ 'head-scroll': isScroll }">
      <div class="header-con">
        <ul class="nav">
          <li>
            <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">
             <!-- <img style="width:114px;height:35px;" src="../../../public/images/logo_white_sm.png" alt=""> -->
          </li>
          <li v-for="(item,index) in ycList" :key="item.id">
            <a :href=" item.src " target="_blank">{{ item.name}}</a>
          </li>
        </ul>
        <div class="register-login-btn">
          <div class="register-btn" @click="toRegister">注 册</div>
          <div class="login-btn" @click="toLogin">登 录</div>
        </div>
      </div>
    </header>
    <section class="banner">
<!--      <el-carousel height="561px" :autoplay="false" arrow="never">-->
<!--        <el-carousel-item v-for="item in 4" :key="item">-->
<!--          <img style="width:100%;" src="../../assets/image/website/banner.png" alt="">-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
    </section>

    <!-- 主体 -->
    <section style="margin-bottom: 100px;">
      <div class="advantage" :class="{ 'mgB100': isAdHover }">
        <p class="advantage-title">核心优势</p>
        <div class="advantage-con" :class="{ 'mgT20' : isAdHover }">
          <div class="pre-advantage" @mouseover="adHover(1)" @mouseleave="adLeave(1)" :class="{ 'noBorder': indexAddom === 1 }" style="z-index: 4">
            <dl class="dl-con" :class="{ 'noDlCon': indexAddom === 1 }">
              <dt class="dl-con-ad1"></dt>
              <dd>技术优势</dd>
            </dl>
            <div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 1 }">
              <p class="ad-details-title">
                技术优势
              </p >
              <p class="ad-details">
                数字化、智能化云仓系统支持商品一键导入，快速编辑上架；订单批量发货、流程简洁，实时同步物流状态； 结算流水实时同步，资金链及时回笼
              </p>
            </div>
          </div>
          <div class="pre-advantage" @mouseover="adHover(2)" @mouseleave="adLeave(2)" :class="{ 'noBorder': indexAddom === 2 }" style="z-index: 3">
            <dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 2 }">
              <dt class="dl-con-ad2"></dt>
              <dd>成本优势</dd>
            </dl>
            <div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 2 }">
              <p class="ad-details-title">
                成本优势
              </p >
              <p class="ad-details">
                云仓支持线上快速提交资料，入驻、审核简便；对接数万B端商家，流量大、出单快；接口一键导入批量发货，节省人力物力成本；多维度分析，助力数字营销和运营营销和运营
              </p>
            </div>
          </div>
          <div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }" style="z-index: 2">
            <dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 3 }">
              <dt class="dl-con-ad3"></dt>
              <dd>响应式</dd>
            </dl>
            <div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 3 }">
              <p class="ad-details-title">
                响应式
              </p >
              <p class="ad-details">
                一键导入商品<br/>
                一键轻松上架<br/>
                一键自动结算<br/>
                一键批量发货<br/>
                一键对接商家<br/>
                一键库存同步<br/>
                一键售后响应<br/>
                一键财务管理
              </p>
            </div>
          </div>
          <div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }" style="z-index: 1">
            <dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 4 }">
              <dt class="dl-con-ad4"></dt>
              <dd>解决方案</dd>
            </dl>
            <div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 4 }">
              <p class="ad-details-title">
                解决方案
              </p >
              <p class="ad-details">
                商品对接供应链B端数万商家，多条渠道同时出单；对多网店的商品和订单等日常事务同时管理，提高整体效率；供应商的KPI考核，把控采购风险，提高采购效益
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 入驻流程 -->
    <section style="padding-bottom: 90px;background-color: #f9f9fa;">
      <p class="process-title">入驻流程和材料</p>
      <div class="process-con">
        <div class="process-steps">
          <div class="pro-step">
            <dl>
              <dt class="step-one"></dt>
              <dd>第一步：注册账号</dd>
            </dl>
            <span>无需等待</span>
            <p>进入云仓官网，注册账号</p>
            <p>注册完成后，填写相关信息</p>
          </div>
          <div class="pro-step">
            <dl>
              <dt class="step-two"></dt>
              <dd>第二步：填写信息</dd>
            </dl>
            <span>约20分钟</span>
            <p>确认在线协议填写公司主体信息</p>
            <p>填写店铺信息提交相关资质</p>
          </div>
          <div class="pro-step">
            <dl>
              <dt class="step-three"></dt>
              <dd>第三步：等待审核</dd>
            </dl>
            <span>约1-3个工作日</span>
            <p>云仓工作人员会在1-3个工作日内</p>
            <p>反馈审核结果，商家可通过登录查询审核进度</p>
          </div>
          <div class="pro-step">
            <dl>
              <dt class="step-four"></dt>
              <dd>第四步：发布商品</dd>
            </dl>
            <span>无需等待</span>
            <p>审核通过，商家登录后台</p>
            <p>商家发布商品并上架</p>
          </div>
        </div>
        <div class="process-mater">
          <div class="pro-ma">
            <p class="set-in-ma m-bg">入驻必备材料</p>
            <div class="optional">
              <ul>
                <li>营业执照电子版</li>
                <li>法人证件电子版</li>
              </ul>
            </div>

          </div>
          <div class="pro-ma">
            <p class="set-in-ma n-m-bg">入驻选填材料</p>
            <div class="optional">
              <ul >
                <li>品牌LOGO</li>
                <li>其它行业资质</li>
              </ul>
              <ul>
                <li>品牌授权（代理品需提供）</li>
                <li>店铺LOGO</li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </section>
    <!-- 入驻品牌 -->
    <section class="brand">
      <p class="brands-title">这些品牌都已入驻</p>
      <p class="brands-tip">我们已与各行业领域的优秀品牌达成合作</p>
      <div>
        <p class="brand-type">
          <span class="clothes" :class="{ 'light-word' : isLight === 0 }" @click="brandTypeChange(0)">服饰</span>
          <span class="electrical" :class="{ 'light-word' : isLight === 1 }" @click="brandTypeChange(1)">电器</span>
          <span class="food" :class="{ 'light-word' : isLight === 2 }" @click="brandTypeChange(2)">食品</span>
          <span class="maternal" :class="{ 'light-word' : isLight === 3 }" @click="brandTypeChange(3)">母婴</span>
        </p>
        <div class="brand-carousel">
          <el-carousel ref="cardShow" @change="brandCarChange()" :autoplay="false" arrow="never" indicator-position="none" type="card" class="card-show" height="400px" style="margin: 20px auto;">
            <el-carousel-item name="1" class="pre-el-carousel-item">
              <img src="../../assets/image/website/clothesImgs.png" alt="">
            </el-carousel-item>
            <el-carousel-item name="2" class="pre-el-carousel-item">
              <img src="../../assets/image/website/electricalImgs.png" alt="">
            </el-carousel-item>
            <el-carousel-item name="3" class="pre-el-carousel-item">
              <img src="../../assets/image/website/foodImgs.png" alt="">
            </el-carousel-item>
            <el-carousel-item name="4" class="pre-el-carousel-item">
              <img src="../../assets/image/website/maternalImgs.png" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </section>
    <!-- 底部 -->
    <footer>
      <div class="contact">
        <p>如果你想要更多的<span>了解</span>，请联系我们</p>
        <p>4000-188-199</p>
      </div>
      <div class="about-con">
        <div class="about-list">
          <ul>
            <li>企业简介</li>
            <li>发展历程</li>
            <li>荣誉资质</li>
            <li>团队介绍</li>
            <li>新闻动态</li>
          </ul>
          <p class="about-gs">
            {{settitle.bottomCopyright}}       {{settitle.recordNum}}
          </p>
        </div>
        <div class="about-us">
          <p class="us-title">联系我们</p>
          <p>联系电话：{{settitle.contactTel}}</p>
          <p>公司地址:{{settitle.companyAddress}}</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
  import store from '@/store';
  import { indexInfo, newsList, companyCounsel ,webSite,getdomain,getallCloudList} from '@/api/webSite'
  export default {
    name: "newyuncang",
    data() {
      return {
        menurl:{},
        settitle:{},
        channel_id:0,
        isScroll: false,
        isAdHover: false,
        isHasBorder: false,
        indexAddom: false,
        isLight: 0,
        ycList: [
          { name: '首页',id:0,src: '/' },
          { name: '开放平台',id:1,src: 'http://open.jxhh.com/doc/api.html' },
          { name: '云仓',id:2,src: 'http://scm.jxhh.com' },
          { name: '关于我们',id:3,src: 'http://www.stbz.net' },
        ],
        gwToken: ''
      }
    },
    mounted() {
      this.getIndexInfo()
      window.addEventListener('scroll',this.handleScroll,true);
    },
    destroyed() {
      window.removeEventListener('scroll',this.handleScroll);
    },

    methods: {
      // 获取渠道id
      getIndexInfo() {
        let op = 'open'
        let ssa = window.location.host
        const data = {
          // domain: 'newsys.jxhh.com',
          domain: ssa,
          // field: op
        }
        indexInfo(data).then(res => {
          if (res.code == 1) {
            this.channel_id = res.data.channel_id
            this.getWebSite()
            this.getDomain()
            this.getAllcloud()
          }
        })
      },
      // 获取通用设置
      getWebSite() {
        let params = {
          channel_ids: this.channel_id
        }
        webSite(params).then(res => {
          if (res.code==1) {
            if(res.data.universal_lst&&res.data.universal_lst!='null'){
              this.settitle = res.data.universal_lst
            }else{
              this.settitle = {
                bottomCopyright: "Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved.",
                businessHours: 1,
                companyAddress: "北京市丰台区诺德中心一期四号楼21层",
                contactTel: "4000-188-199",
                custServiceQrcode: "http://excel.jxhh.com/public/upload/1629540531.png",
                hotlineTel1: "010-5335 9558",
                hotlineTel2: "400-188-199",
                onlineTimeEnd: "18:00",
                onlineTimeStart: "09:00",
                recordNum: "京ICP备19033223号-1",
                topLogo: "http://excel.jxhh.com/public/upload/1629540557.png",

              }
            }

          }
        })
      },
      //获取所有域名
      getDomain(){
        let data = {
          channel_ids:this.channel_id
        }
        getdomain(data).then(res=>{
            if(res.code==1){
              this.menurl = res.data
              if(this.menurl&&this.menurl!='null'){
                this.ycList = [
                  { name: '首页',id:0,src: '/' },
                  { name: '开放平台',id:1,src: '' },
                  { name: '云仓',id:2,src: '' },
                  { name: '关于我们',id:3,src: '' }
                ]
                this.menurl.forEach((item,index)=>{
                  if(item.label=='open'){
                    this.ycList[1].src = item.value
                  }
                  if(item.label=='cloud'){
                    this.ycList[2].src = item.value
                  }
                  if(item.label=='official'){
                    this.ycList[3].src = item.value
                  }
                })
              }else{
                this.ycList = [
                  { name: '首页',id:0,src: '/' },
                  { name: '开放平台',id:1,src: 'http://open.jxhh.com' },
                  { name: '云仓',id:2,src: 'http://scm.jxhh.com' },
                  { name: '关于我们',id:3,src: 'http://www.stbz.net' }
                ]
              }

            }
        })
      },
      getAllcloud(){
        let data = {
          new_channel_id:this.channel_id
        }
        getallCloudList(data).then(res=>{

        })
      },
      // 监听浏览器滚动
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.isScroll = scrollTop > 100 ? true : false;
      },
      // 品牌类型切换
      brandTypeChange(index) {
        this.$refs.cardShow.setActiveItem(index);
        this.isLight = index;
      },
      // 点击轮播图，切换，高点 品牌类别
      brandCarChange() {
        this.isLight = this.$refs.cardShow.activeIndex;
      },
      // 划过效果
      adHover(index) {
        this.isAdHover = true;
        this.indexAddom = index;
      },
      adLeave(index) {
        this.isAdHover = false;
        this.indexAddom = -1;
      },
      // 去注册
      toRegister() {
        store.dispatch('LogOut').then(() => {
          var ssa = window.location.host;
          window.location.href = 'http://sso.jxhh.com/login?redirect=http://' + window.location.host + '/platformlogin'
        })
      },
      // 去登录
      toLogin() {
        window.location.href = 'http://sso.jxhh.com/login?redirect=http://' + window.location.host + '/platformlogin'
        //http://sso.jxhh.com/logout?redirect=http://' + ssa + '/login
      }

    } // methods end
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  header,section,footer,ul,li,p,dl,dt,dd {
    margin: 0;
    padding: 0;
  }
  ul,li {
    list-style: none;
  }

  .yc-content {
    width: 100%;
    height: 100%;
    min-width: 960px;
  }
  /* 公用 */

  /* header */
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .head-scroll {
    background-color : #070D41;
  }

  .header-con {
    width: 80%;
    margin: 0 auto;
    height: 100px;
    color: #fff;
    display: flex;
    flex-direction : row;
    justify-content : space-between;
    align-items : center;
  }

  .nav,.register-login-btn {
    display: flex;
    flex-direction : row;
    justify-content : start;
    align-items: center;
  }
  .nav {

  }
  .register-login-btn {

  }
  .nav > li{
    padding: 10px 25px;
    cursor: pointer;
    font-size: 18px;
  }

  .register-btn,.login-btn {
    padding: 5px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  .register-btn {
    border: 1px solid #fff;

  }
  .login-btn {
    border: 1px solid #1D8EFE;
    background: #1D8EFE;
    margin-left: 20px;
  }
  /* banner图 */
  .banner {
    width: 100%;
    height: 562px;
    position : relative;
    background : url("../../assets/image/website/banner.png") no-repeat center center;
    background-size: cover;

  }

  .advantage {
    margin-bottom: 0;
    transition : all 0.5s;
  }

  .advantage-title,.process-title,.brands-title {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    color: #333333;
    padding: 90px 0;
  }

  .advantage-con {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction : row;
    justify-content : center;
    align-items : center;
    position: relative;
    transition: 0.5s;
  }
  .pre-advantage {
    width: 268px;
    height: 190px;
    border: 1px solid #DCDCDC;
    margin: 0 20px;
    position: relative;
    background: #FFFFFF;
    z-index: 0;
    border-radius: 2px;
  }
  .dl-con {
    width: 100%;
    height: 100%;
    text-align : center;
    background: #FFFFFF;
    z-index: 0; /* 这个值要保证和 当前容器dom 一致 */
    border: none;
    overflow : hidden;
  }

  .dl-con > dt{
    width: 85px;
    height: 88px;
    margin: 25px auto;
  }
  .dl-con > dd {
    font-size: 18px;
    color: #232323;
    margin: 0 auto;
  }
  .dl-con > .dl-con-ad1 {
    background : url("../../assets/image/website/ad1.png") no-repeat center center;
    background-size : cover;
  }
  .dl-con > .dl-con-ad2 {
    background : url("../../assets/image/website/ad2.png") no-repeat center center;
    background-size : cover;
  }
  .dl-con > .dl-con-ad3 {
    background : url("../../assets/image/website/ad3.png") no-repeat center center;
    background-size : cover;
  }
  .dl-con > .dl-con-ad4 {
    background : url("../../assets/image/website/ad4.png") no-repeat center center;
    background-size : cover;
  }

  .pre-advantage-details {
    width: 270px;
    height: 410px;
    position: absolute;
    top: -110px;
    left: -1px;
    z-index: 199;
    background :#fff url("../../assets/image/website/adfooter.png") no-repeat bottom center;
    box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26);
    overflow : hidden;
    display: none;
  }

  .ad-details-title {
    width: 100%;
    height: 76px;
    line-height : 76px;
    text-align : center;
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    background: linear-gradient(118deg, #0157FF 0%, #538DFF 100%);
    overflow :hidden;
  }

  .ad-details {
    padding: 30px;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    text-align : justify;
    text-align-last : center;
    -ms-text-align-last : center;
    -moz-text-align-last : center;
  }

  /* hover 时候的效果 class */
  .mgT20 {
    margin-top: 80px;
  }

  .noBorder {
    border: 0;
  }

  .noDlCon {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  .up-ad-details {
    display: block;
    z-index: 199;
  }

  .mgB100 {
    margin-bottom: 150px;
  }


 /* 入驻流程 */
  .process-steps,.process-mater {
    display: flex;
    flex-direction : row;
    justify-content : center;
    align-items : center;
  }

  .pro-step {
    width: 275px;
    height: 315px;
    background: #fff;
    margin: 0 20px;
  }
  .pro-ma{
    width: 590px;
    height: 190px;
    background : #fff;
    margin: 35px 20px 0;
    background : #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
  }

  .pro-ma:hover,.pro-step:hover{
    box-shadow :0 2px 10px 0 rgba(0,0,0,0.05);
  }

  .step-one,.step-two,.step-three,.step-four {
    width: 58px;
    height: 58px;
    text-align: center;
    margin: 30px auto;
  }

  .step-one {
    background : url("../../assets/image/website/step1.png") no-repeat center center;
  }
  .step-two {
    background : url("../../assets/image/website/step2.png") no-repeat center center;
  }
  .step-three {
    background : url("../../assets/image/website/step3.png") no-repeat center center;
  }
  .step-four {
    background : url("../../assets/image/website/step4.png") no-repeat center center;
  }
  .pro-step > dl > dd {
    height: 20px;
    font-size: 20px;
    font-weight: 400;
    margin: 0 auto;
    text-align: center;
  }
  .pro-step > span {
    display: block;
    width: 100px;
    height: 25px;
    font-size: 14px;
    color: #666;
    background: #F0F0F5;
    border-radius: 13px;
    line-height : 25px;
    margin: 18px auto;
    text-align : center;
  }

  .pro-step > p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height : 28px;
    text-align : center;
    padding: 0 20px;
  }

  .set-in-ma {
    height: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
    text-indent: 30px;
    margin: 35px 0 15px 68px;
  }
  .m-bg {
    background : url("../../assets/image/website/setIn1.png") no-repeat 0 center;
  }
  .n-m-bg {
    background : url("../../assets/image/website/setIn2.png") no-repeat 0 center;
  }

  .optional{
    display : flex;
    justify-content : start;
    flex-direction : row;
  }
  .optional > ul:nth-child(1){
    margin: 0 50px 0 72px;
  }

  .optional > ul > li {
    margin: 15px 0;
    text-indent: 20px;
    background : url("../../assets/image/website/arrow.png") no-repeat 0 center;
  }

  .pro-step:hover,.pro-ma:hover {
    //box-shadow: 0 2px 12px 0 #ccc;
  }

  /* 入驻品牌 */
  .brand {
    padding: 0 0 90px;
    background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%);
  }
  .brands-title {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    color: #333333;
    padding: 90px 0 0;
  }

  .brands-tip {
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    opacity: 0.82;
    padding : 35px 0 20px;

  }
  .brand-type {
    display: flex;
    flex-direction : row;
    justify-content : space-around;
    align-items : center;
    width: 40%;
    margin: 60px auto 12px;
  }

  .clothes, .electrical, .food, .maternal {
    height: 30px;
    line-height : 30px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    text-indent: 40px;
  }

  .light-word {
    color: #1966FF;
  }

  .clothes {
    background : url("../../assets/image/website/clothes.png") no-repeat 0 center;
  }
  .electrical {
    background : url("../../assets/image/website/electrical.png") no-repeat 0 center;
  }
  .food {
    background : url("../../assets/image/website/food.png") no-repeat 0 center;
  }
  .maternal {
    background : url("../../assets/image/website/maternal.png") no-repeat 0 center;
  }

  .clothes:hover, .electrical:hover, .food:hover, .maternal:hover {
    color: #1966FF;
  }

  .brand-carousel {
    width:70%;
    min-width: 600px;
    max-width: 1920px;
    display : flex;
    justify-content : center;
    flex-direction : row;
    margin: 0 auto;
  }

  .card-show {
    width: 100%;
  }

  /deep/ .el-carousel__container {
    padding: 20px;
  }

  /deep/.pre-el-carousel-item > img {
    object-fit:cover;
    width:100%;
    height: 100%;
    //border: 1px solid #ccc;
  }

  /deep/.is-active {
   border: 1px solid #e9e9e9;
    background : #fff;
    overflow : hidden;
    box-shadow: 0 25px 28px 10px rgba(152, 150, 150, 0.1);
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #fff;
    transform : scaleY(1.8);
  }
  //
  .el-carousel__item:nth-child(2n+1) {
    background: #fff;
  }

/* footer 联系我们 */
  .contact {
    height: 243px;
    background : url("../../assets/image/website/footer-bg.png") no-repeat center 0;
    background-size: 100% 100%;
    display: flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
  }

  .contact > p {
    letter-spacing: 2px;
    text-align : center;
    font-size: 26px;
    font-weight: 400;
    color: #FFFFFF;
    line-height : 46px;
  }

  .contact > p > span {
    color: #1966FF;
  }

  .about-con {
    height: 200px;
    color: #fff;
    background: #242A37;
    display: flex;
    flex-direction : row;
    justify-content : center;
    align-items : center;
    font-size: 14px;
  }

  .about-list,.about-us {
    //margin: 52px;
  }

  .about-list {
    height: 110px;
    display: flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    border-right: 1px solid #50555f;
    padding-right: 80px;
  }

  .about-list > ul {
    height: 66px;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    flex-direction : row;
    justify-content : space-around;
  }

  .about-list > ul > li {
    height: 30px;
    padding: 0 40px;
    line-height : 30px;
    border-right: 1px solid #50555f;
    cursor: pointer;
  }

  .about-list > ul > li:last-child {
    border : none;
  }

  .about-gs {
    font-size: 14px;
    font-weight: 400;
    color: #959BA8;
  }

  .about-us {
    margin-left: 80px;
  }

  .about-us > p {
    letter-spacing: 1px;
    font-weight: 400;
    color: #959BA8;
    line-height: 26px;
  }

  .about-us .us-title {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40px;
  }

</style>
