hjb_pc/pages/homeIndex/bannerIndex.vue

<template>
  <div class="banner">
    <div class="left">
      <div class="title-one">鲜花电商下单方<span>117405</span>家</div>
      <div class="title-tow">实名认证花店<span>316261</span>家</div>
      <div class="btn">
        <button>立即下单</button>
        <button>开始接单</button>
      </div>
    </div>
    <div class="right"><img src="../../assets/images/image19.png" alt="" /></div>
  </div>
  <div class="content">
    <ul>
      <li>
        <div class="sum">30W+</div>
        <div class="title">注册会员</div>
      </li>
      <li>
        <div class="sum">1200+</div>
        <div class="title">覆盖全国市/区/县</div>
      </li>
      <li>
        <div class="sum">8000W+</div>
        <div class="title">积累服务订单</div>
      </li>
      <li>
        <div class="sum">1S</div>
        <div class="title">最快接单只需</div>
      </li>
      <li>
        <div class="sum">30000+</div>
        <div class="title">日购订单</div>
      </li>
    </ul>
  </div>
  <div class="orders-box">
    <div class="orders">
      <div class="edition">
        <div class="title">
          <div class="title-one">最新已成交订单</div>
          <div class="title-two">汇聚抖音小店、抖音团购、天猫、京东、美团、饿了么等各大电商平台海量订单、实时分发</div>
          <div class="title-therr">超过28W+花店在线接单</div>
          <div class="time-out">
            {{ `${time.year}-${time.month}-${time.day}` }}<span>{{ time.hours }}</span
            ><span>{{ time.minutes }}</span
            ><span>{{ time.seconds }}</span
            ><span class="content-day">今日已成交<i>1999</i>条</span>
          </div>
        </div>
        <div class="commodity-box">
          <div class="commodity">
            <div class="left">
              <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
              <div class="botton-txt">接单耗时3分钟</div>
            </div>
            <div class="right">
              <div class="essential-address">江西省 萍乡市 安源区</div>
              <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
              <div class="time">配送时间：2023-12-26 13:10</div>
              <div class="price">
                <div class="left-price"><span>￥</span>110</div>
                <div class="icon">
                  <el-icon><Right /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="commodity">
            <div class="left">
              <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
              <div class="botton-txt">接单耗时3分钟</div>
            </div>
            <div class="right">
              <div class="essential-address">江西省 萍乡市 安源区</div>
              <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
              <div class="time">配送时间：2023-12-26 13:10</div>
              <div class="price">
                <div class="left-price"><span>￥</span>110</div>
                <div class="icon">
                  <el-icon><Right /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="commodity">
            <div class="left">
              <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
              <div class="botton-txt">接单耗时3分钟</div>
            </div>
            <div class="right">
              <div class="essential-address">江西省 萍乡市 安源区</div>
              <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
              <div class="time">配送时间：2023-12-26 13:10</div>
              <div class="price">
                <div class="left-price"><span>￥</span>110</div>
                <div class="icon">
                  <el-icon><Right /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="commodity">
            <div class="left">
              <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
              <div class="botton-txt">接单耗时3分钟</div>
            </div>
            <div class="right">
              <div class="essential-address">江西省 萍乡市 安源区</div>
              <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
              <div class="time">配送时间：2023-12-26 13:10</div>
              <div class="price">
                <div class="left-price"><span>￥</span>110</div>
                <div class="icon">
                  <el-icon><Right /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="commodity">
            <div class="left">
              <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
              <div class="botton-txt">接单耗时3分钟</div>
            </div>
            <div class="right">
              <div class="essential-address">江西省 萍乡市 安源区</div>
              <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
              <div class="time">配送时间：2023-12-26 13:10</div>
              <div class="price">
                <div class="left-price"><span>￥</span>110</div>
                <div class="icon">
                  <el-icon><Right /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="commodity">
            <div class="left">
              <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
              <div class="botton-txt">接单耗时3分钟</div>
            </div>
            <div class="right">
              <div class="essential-address">江西省 萍乡市 安源区</div>
              <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
              <div class="time">配送时间：2023-12-26 13:10</div>
              <div class="price">
                <div class="left-price"><span>￥</span>110</div>
                <div class="icon">
                  <el-icon><Right /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="doload">
    <div class="title">产品下载</div>
    <div class="app-info">
      <div class="img"><img src="../../assets/images/image70.png" alt="" /></div>
      <div class="app-info-txt">
        <div class="app-title">花机宝网络科技主要经营：</div>
        <p>
          一、聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易平台，助力电商用户高效运营
        </p>
        <p>二、提供线上外卖配送聚合服务，打通全域电商平台物流同城配送，实现一键操作和管理。</p>
        <p>
          三、
          提供电商运营管理聚合软件，多门店管理、门店产品一键复制、门店产品一键批量设置折扣价格、多平台消息聚合、多门店评价管理、多门店诊断等服务。
        </p>
        <div class="doload-app">下载APP</div>
      </div>
    </div>
  </div>
  <div class="serve-box">
    <div class="serve">
      <div class="title">功能强大、安全、稳定的服务应用</div>
      <div class="title-two">多年技术沉淀，20+项服务共筑服务矩阵</div>
      <div class="serve-box">
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <div class="title">微花店</div>
          <div class="txt">
            为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益
          </div>
        </div>
      </div>
      <div class="more-services">查看更多服务</div>
    </div>
  </div>
  <div class="concerning-box">
    <div class="concerning">
      <div class="title">关于我们</div>
      <div class="title-one">
        花机宝网路科技，是一家为电商平台提供“SaaS”的网路科技公司。公司基于技术创新和应用，推动“技术性”降本
      </div>
      <div class="title-one">
        发展“互联网+”，通过TCO“全生命周期”在智能时代的深度应用，实现电商行业的“降本增效”、“精益运营”。
      </div>
      <div class="bjc-round">
        <div class="round">
          <div class="left">
            <div class="title">花机宝网络科技主要经营：</div>
            <p><span>使命：</span>助力每一位中国人轻松实现电商梦想</p>
            <p><span>愿景：</span>为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的机会</p>
            <p><span>核心价值观： </span>源于创新、诚信经营、成就伙伴、合作共赢</p>
            <p>
              <span>战略目标：</span><br />
              1、以科技进步、应用于技术创新为电商行业带来真正快乐。<br />
              2、把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br />
              3、以产品带动服务，以服务开拓市场，有选择的发展新业务。
            </p>
          </div>
          <div class="right"><img src="../../assets/images/Group9855.png" alt="" /></div>
        </div>
      </div>
    </div>
  </div>
  <div class="information-box">
    <div class="information">
      <div class="title">行业动态 产业资讯</div>
      <div class="title-one">汇集主流媒体报道、行业大咖采访、花店经营攻略等鲜花行业一手资讯</div>
      <div class="footet-content">
        <div class="left">
          <div class="top">
            <div class="left-top-bgc"><img src="../../assets/images/image63.png" alt="" /></div>
            <div class="left-top-txt">
              <div class="title">这家藏在西安老巷的“不正经”花店，到。。。大大大大大大。。</div>
              <p>直到上世纪80年代中期，中国才开始出现真正意义上的花店。而随着后来新型营销方式突起、高端花卉品牌…</p>
            </div>
          </div>
          <div class="bottom">
            <div class="left-top-bgc"><img src="../../assets/images/image63.png" alt="" /></div>
            <div class="left-top-txt">
              <div class="title">这家藏在西安老巷的“不正经”花店，到。。。大大大大大大。。</div>
              <p>直到上世纪80年代中期，中国才开始出现真正意义上的花店。而随着后来新型营销方式突起、高端花卉品牌…</p>
            </div>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/images/image63.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { Right } from '@element-plus/icons-vue'
import { linkNavigateTo } from '~/utils/util'
const time: any = ref({})
const getDatTime = () => {
  const currentDate = new Date()

  const year = currentDate.getFullYear()
  const month = currentDate.getMonth() + 1 // 月份从0开始，需要加1
  const day = currentDate.getDate()
  const hours = currentDate.getHours()
  const minutes = currentDate.getMinutes()
  const seconds = currentDate.getSeconds()
  time.value.year = year
  time.value.month = month
  time.value.day = day
  time.value.hours = hours
  time.value.minutes = minutes
  time.value.seconds = seconds
  // console.log(time.value);
}
setInterval(() => {
  getDatTime()
}, 1000)
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 3.0208rem;
  display: flex;
  .left {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title-one {
      font-weight: 700;
      font-size: 0.1667rem;
      span {
        font-size: 0.2188rem;
        color: #ff4e8d;
      }
    }
    .title-tow {
      font-weight: 700;
      font-size: 0.1667rem;
      span {
        font-size: 0.2188rem;
        color: #ff4e8d;
      }
    }
    .btn {
      width: 100%;
      margin-top: 0.1563rem;
      display: flex;
      justify-content: center;
      button {
        width: 0.6354rem;
        height: 0.2083rem;
        margin: 0.0521rem;
        background-color: transparent;
        color: #252b3a;
        border: 1px solid #252b3a;
        font-size: 0.0833rem;
        // border-color: #252B3A;
      }
    }
  }
  .right {
    width: 70%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  width: 100%;
  background: linear-gradient(90deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
  height: 0.5208rem;
  ul {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    li {
      width: 1.25rem;
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .sum {
        font-size: 0.125rem;
        font-weight: 700;
      }
      .title {
        font-size: 0.0729rem;
      }
    }
  }
}
.orders {
  // margin-top: .4167rem;
  padding: 0.4167rem 0;
  width: 100%;
  background-color: #fff;
  // height: 500px;
  background: url('../../assets/images/Group9849.png') no-repeat;
  .edition {
    width: 6.25rem;
    margin: 0 auto;
    .title {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title-one {
        font-size: 0.1667rem;
        color: #252b3a;
      }
      .title-two {
        margin-top: 0.0833rem;
        line-height: 0.1146rem;
        font-size: 0.0833rem;
        color: #575d6c;
      }
      .title-therr {
        line-height: 0.1146rem;
        font-size: 0.0833rem;
        color: #575d6c;
      }
      .time-out {
        margin-top: 0.2344rem;
        font-size: 0.0833rem;
        color: #252b3a;
        span {
          color: #fff;
          display: inline-block;
          width: 0.1563rem;
          height: 0.1458rem;
          border-radius: 0.026rem;
          background-color: #ff518f;
          text-align: center;
          line-height: 0.1458rem;
          margin: 0 0.0313rem;
        }
        .content-day {
          width: auto;
          background: none;
          color: #000;
          i {
            font-size: 0.1146rem;
            color: #ff518f;
            font-style: normal;
            padding: 0 0.0156rem;
          }
        }
      }
    }
  }
}
.commodity-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.1563rem;
  background-color: #fff;
}
.commodity {
  box-shadow: 1px 1px 9px 6px rgb(0 0 0 / 4%);
  padding: 0.1042rem;
  width: 2.0469rem;
  height: 1.1198rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0.0521rem 0.0521rem 0.0521rem;
  margin-left: 0;
  transition: transform 0.3s ease; /* 过渡效果，持续时间为0.3秒，缓动函数为ease */

  .left {
    width: 0.75rem;
    height: 0.875rem;
    .image {
      width: 100%;
      height: 0.7396rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .botton-txt {
      height: 0.1302rem;
      width: 100%;
      background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
      color: #ff4e8d;
      text-align: center;
      line-height: 0.1302rem;
      font-size: 0.0625rem;
    }
  }
  .right {
    flex: 1;
    margin-left: 0.1042rem;
    height: 100%;
    .essential-address {
      font-size: 0.0833rem;
    }
    .detailed-address {
      margin-top: 0.0521rem;
      color: #555555;
      font-size: 0.0729rem;
    }
    .time {
      height: 0.1823rem;
      margin-top: 0.1563rem;
      color: #252b3a;
      font-size: 0.0677rem;
      border-bottom: 1px solid #e4e4e4;
    }
    .price {
      margin-top: 0.0625rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-price {
        font-size: 0.125rem;
        color: #ff4e8d;
        span {
          font-size: 0.0729rem;
        }
      }
      .icon {
        font-size: 0.1042rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
    }
  }
}
.commodity:nth-child(3n) {
  margin-right: 0;
}
.commodity:hover {
  transform: translateY(-5px);
}
.doload {
  width: 100%;
  height: 3.8021rem;
  background: url('../../assets/images/image20.png') no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    color: #252b3a;
    font-size: 0.1667rem;
    font-weight: 600;
  }
  .app-info {
    display: flex;
    .img {
      width: 2.3646rem;
      height: 2.3646rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .app-info-txt {
      width: 3.3333rem;
      padding: 0 0.5208rem;
      padding-top: 0.4167rem;
      .app-title {
        height: 0.3125rem;
        color: #252b3a;
        font-weight: 600;
        font-size: 0.1354rem;
      }
      p {
        color: #575d6c;
        font-size: 0.0729rem;
        margin: 0.1042rem 0;
      }
      .doload-app {
        margin-top: 0.1563rem;
        width: 1.3542rem;
        height: 0.3125rem;
        color: #fff;
        font-size: 0.125rem;
        background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
        cursor: pointer;
        text-align: center;
        line-height: 0.3125rem;
        transition: transform 0.3s ease;
        border-radius: 0.026rem;
      }
      .doload-app:hover {
        transform: scale(1.1);
      }
    }
  }
}
.serve {
  width: 100%;
  background-color: #fff;
  padding-top: 0.4167rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('../../assets/images/Group9849.png') no-repeat;
  background-position: bottom center;
  .title {
    width: 100%;
    font-weight: 700;
    text-align: center;
    font-size: 0.1667rem;
    color: #252b3a;
  }
  .title-two {
    width: 100%;
    text-align: center;
    font-size: 0.0833rem;
    color: #575d6c;
    margin-top: 0.0938rem;
  }
  .serve-box {
    padding-top: 0.2604rem;
    width: 6.25rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 1.375rem;
      height: 1.9271rem;
      background: url('../../assets/images/Group9591.png') no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 1px 1px 9px 6px rgb(0 0 0 / 4%);
      transition: transform 0.3s ease;
      .icon {
        margin-top: 0.4167rem;
        width: 0.2344rem;
        height: 0.2344rem;
      }
      .title {
        font-weight: 600;
        color: #575d6c;
        font-size: 0.0729rem;
      }
      .txt {
        margin-top: 0.1042rem;
        width: 0.9375rem;
        text-align: center;
        line-height: 0.1146rem;
        font-size: 0.0677rem;
      }
    }
    .item:nth-last-child(-n + 4) {
      margin-top: 0.1042rem;
    }
    .item:hover {
      transform: translateY(-5px);
    }
  }
  .more-services {
    width: 1.3021rem;
    height: 0.2604rem;
    color: #fff;
    font-size: 0.0833rem;
    line-height: 0.2604rem;
    text-align: center;
    border-radius: 0.026rem;
    margin: 0.1563rem 0;
    background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
    transition: transform 0.3s ease;
  }
  .more-services:hover {
    transform: scale(1.1);
  }
}
.serve-box {
  background-color: #fff;
}
.concerning-box {
  width: 100%;
  background-color: #fff;
  padding-top: 0.2604rem;
  .concerning {
    width: 6.9427rem;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    margin: 0 auto;
    .title {
      font-size: 0.1667rem;
      color: #252b3a;
      font-weight: 600;
      padding: 0.0521rem 0;
    }
    .title-one {
      color: #575d6c;
      font-size: 0.0833rem;
      margin: 5px 0;
    }
    .bjc-round {
      width: 100%;
      height: 3.8854rem;
      // background-color: #ecf0fd;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.1563rem;
      .round {
        width: 6.9427rem;
        height: 6.9427rem;
        border-radius: 50%;
        background-color: #ecf0fd;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0.4167rem;
        .left {
          flex: 1;
          height: 3.6458rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          .title {
            color: #252b3a;
            font-size: 0.1354rem;
            margin-top: 0.5729rem;
          }
          .title::after {
            content: 'SQLUTION';
            display: block;
            color: #575d6c;
            font-size: 0.0729rem;
            margin-top: 0.026rem;
            margin-bottom: 0.4688rem;
          }
          p {
            width: 1.6094rem;
            color: #575d6c;
            font-size: 0.0729rem;
            margin: 0.0521rem 0;
            span {
              color: #252b3a;
              font-weight: 600;
            }
          }
        }
      }
      .right {
        width: 3.6458rem;
        height: 3.6458rem;
        img {
          width: 100%;
        }
      }
    }
  }
}
.information-box {
  padding-top: 0.4167rem;
  width: 100%;
  background-color: #fff;
  padding-bottom: .9375rem;
  .information {
    width: 6.25rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      color: #252b3a;
      font-size: 0.1667rem;
      font-weight: 600;
    }
    .title-one {
      color: #575d6c;
      font-size: 0.0833rem;
      margin-top: 0.0781rem;
    }
    .footet-content {
      width: 100%;
      height: 2.6771rem;
      display: flex;
      margin-top: 0.3906rem;
      .right {
        width: 2.0625rem;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          // transform: rotate(-90deg);
        }
      }
      .left {
        flex: 1;
        margin-right: 0.1042rem;
        .top {
          width: 100%;
          height: 50%;
          display: flex;
          .left-top-bgc {
            width: 50%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .left-top-txt {
            width: 50%;
            height: 100%;
            border: 1px dotted #aaa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: left;
            padding: 0.3177rem 0.1563rem 0.3542rem 0.2604rem;
            .title {
              width: 1.7031rem;
              color: #252b3a;
              font-size: 0.0833rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            p {
              margin-top: 0.1563rem;
              width: 1.7031rem;
              font-size: .0729rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .bottom {
          width: 100%;
          height: 50%;
          width: 100%;
          height: 50%;
          display: flex;
          .left-top-bgc {
            width: 50%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .left-top-txt {
            width: 50%;
            height: 100%;
            border: 1px dotted #aaa;
            // border-style: dashed 4px 8px 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: left;
            padding: 0.3177rem 0.1563rem 0.3542rem 0.2604rem;
            order: -1;
            .title {
              width: 1.7031rem;
              color: #252b3a;
              font-size: 0.0833rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            p {
              margin-top: 0.1563rem;
              width: 1.7031rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: .0729rem;
            }
          }
        }
      }
    }
  }
}
</style>