new-hjb-pc/hjb_pc/pages/homeIndex/downloadCenter.vue

<script setup>
import { onMounted, reactive, ref, toRefs, watch, onUnmounted } from 'vue'
import { useCounterStore } from '@/stores/nav'
onMounted(() => useCounterStore().increment(9))
const config = useRuntimeConfig();
const isDialog = ref(false)
</script>

<template>
  <div class="downloadCenter">
    <div class="doload">
      <div class="title">产品下载</div>
      <div class="app-info">
        <div class="img"><img src="/images/image70.png" alt="" /></div>
        <div class="app-info-txt">
          <div class="app-title">花机宝网络科技主要经营：</div>
          <p>
            一、聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易平台，助力电商用户高效运营
          </p>
          <p>二、提供线上外卖配送聚合服务，打通全域电商平台物流同城配送，实现一键操作和管理。</p>
          <p>
            三、
            提供电商运营管理聚合软件，多门店管理、门店产品一键复制、门店产品一键批量设置折扣价格、多平台消息聚合、多门店评价管理、多门店诊断等服务。
          </p>
          <div style="display: flex;width: 100%;justify-content: space-between;">
            <div class="doload-app">
              <a  :href="`${config.public.apiAdminUrl}/hjb.msi`" download>下载APP</a>
            </div>

            <div class="doload-app" @click="()=> isDialog=true">
              <a :href="`${config.public.apiAdminUrl}/%E8%8A%B1%E6%9C%BA%E5%AE%9D.zip`" download>花机宝百宝箱</a>
            </div>
            <el-dialog v-model="isDialog" custom-class="dialog">
              <div class="my-tit">温馨提示</div>
              <div class="my-con">
                <pre>
      您好：
      感谢您下载本软件。
      现邀请您关注我们的微信公众号。
      您将获取到此软件的安装使用教程。
      如有疑问也可在微信公众号中回复问题，将会有人工客服为您解答。
      <span style="color: red;font-weight: bolder;" >软件下载中，请在浏览器右上角查看下载进度</span>
    </pre>
                <div class="my-code">
                  <div class="img-box">
                    <img src="/images/花机宝公众号.jpg" alt="">
                  </div>
                </div>
                <div class="my-foot" >
                  <span @click="()=>isDialog=false" >好的，我知道了</span>
                </div>

              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .dialog {
  width: 3.125rem;
  border-radius: 0 !important;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0 !important;

    .my-tit {
      text-align: center;
      font-size: .1302rem;
      color: rgb(255, 163, 42);
      line-height: 1.5;
      border-bottom: .0104rem solid #eeecec;
      padding-bottom: .0521rem;
    }

    .my-con {
      pre {
        line-height: 2;
      }

    }

    .my-code {
      height: 1.0417rem;
      display: flex;
      margin-bottom: .1042rem;
      .img-box {
        margin: auto;
        width: 1.0417rem;
        height: 1.0417rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .my-foot{
      color: #409eff;
      border-top: .0104rem solid #eeecec;
      text-align: center;
      span{
        cursor: pointer;
        line-height: 3;
      }
    }
  }
}

.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.0417rem;
        height: 0.3125rem;
        color: #fff;
        font-size: .1042rem;
        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;

        a {
          display: block; width: 100%;height: 100%;
          color: #fff;
        }
      }

      .doload-app:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>