重新初始化

.gitignore

@@ -1,9 +0,0 @@
-node_modules
-*.log*
-.nuxt
-.nitro
-.cache
-.output
-.env
-dist
-.history

components/Footer.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="footer">
-    <div class="footer-link">
-      <div class="center1200 link-content">
-        <div class="company">
-          <img src="./../public/images/footer-logo.png" />
-          <p>飞信云科技有限公司</p>
-          <p>公司地址：武汉市北辰光谷里A8栋2002</p>
-          <p>联系电话：027-63492056</p>
-          <p>公司邮箱：pengde@flysms.cn</p>
-        </div>
-        <div class="link-val">
-          <div class="link-val-item" v-for="item in 3">
-            <p class="link-val-label">产品介绍</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-            <p>通知短信</p>
-          </div>
-        </div>
-        <div class="code-box">
-          <p class="code-title">关注飞信云</p>
-          <p class="code-hint">飞信云公众号</p>
-          <div class="code-val"></div>
-        </div>
-      </div>
-    </div>
-    <div class="footer-copyright">
-      <div class="center1200 copyright-content">
-        <div class="copyright-left">
-          <span>Feixinyun.飞信云</span>
-          <span>©️ 2021 ALL RIGHTS RESERVED. 保留所有权利</span>
-        </div>
-        <div class="copyright-right">
-          <p>鄂 ICP 备 16035411 号 -1</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.footer {
-  width: 100%;
-  .footer-link {
-    background-color: #2e3444;
-    padding: var(--size-59) 0 var(--size-49);
-    .link-content {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: flex-start;
-      .company {
-        flex-shrink: 0;
-        width: 380px;
-        p {
-          opacity: 0.7;
-          font-size: var(--size-14);
-          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-          font-weight: 400;
-          text-align: left;
-          color: #ffffff;
-          padding-top: 22px;
-        }
-      }
-      .link-val {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-        .link-val-item {
-          flex: 1;
-          padding-right: 10px;
-          p {
-            opacity: 0.7;
-            font-size: var(--size-14);
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: 400;
-            text-align: left;
-            color: #ffffff;
-            padding-top: 16px;
-          }
-          .link-val-label {
-            opacity: 0.9;
-            font-size: 16px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: bold;
-            color: #ffffff;
-            padding: 0 0 10px;
-          }
-        }
-      }
-      .code-box {
-        flex-shrink: 0;
-        width: 171px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .code-title {
-          opacity: 0.9;
-          text-align: center;
-          font-size: var(--size-16);
-          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-          font-weight: bold;
-          color: #ffffff;
-        }
-        .code-hint {
-          text-align: center;
-          padding: 15px 0;
-          opacity: 0.7;
-          font-size: 14px;
-          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-          font-weight: 400;
-          color: #ffffff;
-        }
-        .code-val {
-          width: 171px;
-          height: 171px;
-          background: #ffffff;
-          padding: 15px;
-        }
-      }
-    }
-  }
-  .footer-copyright {
-    width: 100%;
-    background: #222735;
-    .copyright-content {
-      height: 102px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 14px;
-      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-      font-weight: 400;
-      text-align: left;
-      color: #666666;
-      line-height: 48px;
-      .copyright-left {
-      }
-      .copyright-right {
-      }
-    }
-  }
-}
-</style>

components/Header.vue

@@ -1,124 +0,0 @@
-<template>
-  <div :class="['header', navBg ? 'navBg' : '']">
-    <div class="header-logo">
-      <img class="header-logo-img" src="./../public/images/header-logo.png" alt="" />
-    </div>
-    <div class="header-nav">
-      <div class="nav-item">
-        <NuxtLink :to="{ path: '/' }">首页</NuxtLink>
-      </div>
-      <div class="nav-item">
-        <NuxtLink :to="{ path: '/products/666' }">产品介绍</NuxtLink>
-      </div>
-      <div class="nav-item">
-        <NuxtLink :to="{ path: 'solution' }">行业解决案例</NuxtLink>
-      </div>
-      <div class="nav-item">
-        <NuxtLink :to="{ path: 'developer' }">开发者工具</NuxtLink>
-      </div>
-      <div class="nav-item">
-        <NuxtLink :to="{ path: '/AboutUs' }">关于我们</NuxtLink>
-      </div>
-    </div>
-    <div class="header-right">
-      <div class="manage-btn">
-        <img src="./../public/images/manage-icon.png" />
-        <span>管理中心</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, onBeforeMount, onBeforeUnmount } from "vue";
-
-const navBg = ref(false);
-
-const handleScroll = () => {
-  let num = window.scrollY;
-  if (num > 50 && !navBg.value) {
-    navBg.value = true;
-  } else if (num <= 50 && navBg.value) {
-    navBg.value = false;
-  }
-};
-
-onBeforeMount(() => {
-  window.addEventListener("scroll", handleScroll);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", handleScroll);
-});
-</script>
-<style lang="scss" scoped>
-.navBg {
-  background-color: #fff;
-}
-.header {
-  width: 100%;
-  height: var(--nav-height);
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: var(--header-z-index);
-  padding: 0 var(--size-60);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  .header-logo {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .header-logo-img {
-      width: 110px;
-      height: 38px;
-      object-fit: contain;
-    }
-  }
-  .header-nav {
-    flex: 1;
-    padding: 0 var(--size-100);
-    display: flex;
-    align-items: stretch;
-    .nav-item {
-      display: flex;
-      align-items: center;
-      padding-right: 50px;
-      cursor: pointer;
-      font-size: 16px;
-      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-      font-weight: 400;
-      text-align: left;
-      color: #1a1a1a;
-      line-height: 54px;
-    }
-  }
-  .header-right {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .manage-btn {
-      width: 147px;
-      height: 35px;
-      background: #006efe;
-      border-radius: 18px;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-      font-weight: 400;
-      text-align: left;
-      color: #ffffff;
-      line-height: 54px;
-      span {
-        padding-left: 9px;
-      }
-    }
-  }
-}
-</style>

layouts/default.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="basic-content">
-    <Header />
-    <slot />
-    <Footer />
-  </div>
-</template>

nuxt.config.ts

@@ -1,35 +0,0 @@
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-    css: [
-        '@/static/css/root.scss',
-        // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件）
-        //   'bulma',
-        // 项目里要使用的 SCSS 文件
-        '@/static/css/common.scss',
-        'animate.css'
-    ],
-    plugins: [
-        { src: '@/public/js/wow.js', ssr: true }
-    ],
-
-    modules: ["nuxtjs-naive-ui"],
-    vite: {
-        plugins: [
-            AutoImport({
-                imports: [
-                    {
-                        'naive-ui': [
-                            'NCarousel',
-                        ]
-                    }
-                ]
-            }),
-            Components({
-                resolvers: [NaiveUiResolver()]
-            })
-        ]
-    }
-})

package.json

@@ -1,18 +0,0 @@
-{
-    "name": "feixinyun",
-    "scripts": {
-        "dev": "nuxt dev"
-    },
-    "dependencies": {
-        "animate.css": "^4.1.1",
-        "nuxt": "^3.11.2",
-        "nuxtjs-naive-ui": "^1.0.2"
-    },
-    "devDependencies": {
-        "naive-ui": "^2.38.2",
-        "sass": "^1.77.2",
-        "unplugin-auto-import": "^0.17.6",
-        "unplugin-vue-components": "^0.27.0",
-        "wowjs": "^1.1.3"
-    }
-}

pages/AboutUs.vue

@@ -1,734 +0,0 @@
-<template>
-  <div class="banner">
-    <div class="banner-content">
-      <p class="banner-title">关于飞信云</p>
-      <p class="banner-text">
-        飞信云短信群发平台是基于中国三大运营商直接提供的短信端口与互联网连接实现与客户指定号码进行短信批量发送和自定义发送的平台。致力于短信应用技术的开发产品销售和系统集成，为广大客户提供全方位的短信应用解决方案。
-      </p>
-      <div class="banner-type">
-        <div class="type-item">
-          <p class="type-statistics">
-            <span class="statistics-val">1</span><span class="statistics-tag">w+</span>
-          </p>
-          <p class="type-name">用户数量</p>
-        </div>
-        <div class="type-item">
-          <p class="type-statistics">
-            <span class="statistics-val">1200</span
-            ><span class="statistics-tag">条/秒</span>
-          </p>
-          <p class="type-name">通道流速</p>
-        </div>
-        <div class="type-item">
-          <p class="type-statistics">
-            <span class="statistics-val">50</span><span class="statistics-tag">+</span>
-          </p>
-          <p class="type-name">用户数量</p>
-        </div>
-        <div class="type-item">
-          <p class="type-statistics">
-            <span class="statistics-val"><5</span><span class="statistics-tag">s</span>
-          </p>
-          <p class="type-name">直连网关通道</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="AboutUs bg">
-    <div class="center1440 AboutUs-content">
-      <div class="AboutUs-left">
-        <img src="../static/icon/icon_17.png" />
-      </div>
-      <div class="AboutUs-right">
-        <p class="headline">关于我们</p>
-        <p class="subhead">
-          我们的愿景是向客户提供业界领先的网络电信增值业务经营服务，目前用户数量已突破1w+，合作伙伴100+，如今已建立起良好的口碑，我们提供以下供客户选择：
-        </p>
-        <div class="type-box">
-          <div class="type-list">
-            <div
-              :class="[
-                'type-item one-row',
-                activeAboutUs === index ? 'active-type-item' : '',
-              ]"
-              v-for="(item, index) in AboutUsList"
-              @click.stop="activeAboutUs = index"
-            >
-              {{ item.label }}
-            </div>
-          </div>
-        </div>
-
-        <div class="type-content">
-          <div class="type-content-item" v-for="s in AboutUsList[activeAboutUs].children">
-            <img :src="s.icon" />
-            <p class="type-content-name one-row">{{ s.name }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="promise">
-    <div class="center1440">
-      <p class="headline">服务承诺</p>
-      <p class="subhead">好的售后服务也是客户信赖的原因</p>
-      <div class="promise-content">
-        <div class="promise-content-item" v-for="item in 4">
-          <img class="icon" src="../static/icon/icon_24.png" />
-          <p class="title">准时到达</p>
-          <p class="value">
-            <span class="tag">一</span>
-            <span class="text">安全的三网合一通道，可覆盖移动、电信、联通</span>
-          </p>
-          <p class="value">
-            <span class="tag">一</span>
-            <span class="text">106全号段</span>
-          </p>
-          <p class="value">
-            <span class="tag">一</span>
-            <span class="text">多条备用通道支持</span>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- 资质与证书 -->
-  <div class="certificate">
-    <div class="center1440">
-      <p class="headline">资质和证书</p>
-      <div class="certificate-content">
-        <n-carousel
-          class="certificate-carousel"
-          autoplay
-          :interval="5000"
-          :show-dots="false"
-          :slides-per-view="4"
-          :space-between="64"
-          draggable
-        >
-          <div class="carousel-item" v-for="item in certificateList" :key="item">
-            <img class="carousel-img" :src="item.img" />
-            <p class="carousel-label">{{ item.label }}</p>
-          </div>
-        </n-carousel>
-      </div>
-    </div>
-  </div>
-  <!-- 联系飞信云 -->
-  <div class="affiliation">
-    <div class="center1440">
-      <p class="headline">联系飞信云</p>
-      <p class="subhead">欢迎通过以下方式联系我们</p>
-    </div>
-
-    <div class="affiliation-content">
-      <div class="affiliation-left">
-        <img src="./../public/images/map.png" />
-      </div>
-      <div class="affiliation-right bg">
-        <p class="right-item">
-          <img class="right-icon" src="./../static/icon/icon_19.png" />
-          <span class="right-text">公司官网：www.51skyton.com/</span>
-        </p>
-        <p class="right-item">
-          <img class="right-icon" src="./../static/icon/icon_20.png" />
-          <span class="right-text">公司邮箱：pengde@flysms.cn</span>
-        </p>
-        <p class="right-item">
-          <img class="right-icon" src="./../static/icon/icon_21.png" />
-          <span class="right-text">联系热线：027 - 63492056</span>
-        </p>
-        <p class="right-item">
-          <img class="right-icon" src="./../static/icon/icon_22.png" />
-          <span class="right-text">公司地址：武汉市北辰光谷里A8栋2002</span>
-        </p>
-        <div class="right-btn">
-          <img class="icon" src="./../static/icon/icon_23.png" />
-          <span class="text">导航去这里</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {} from "vue";
-
-// 关于我们
-import icon_18 from "./../static/icon/icon_18.png";
-const activeAboutUs = ref(0);
-const AboutUsList = [
-  {
-    label: "云通讯产品",
-    children: [
-      {
-        icon: icon_18,
-        name: "通知短信",
-      },
-      {
-        icon: icon_18,
-        name: "验证码短信",
-      },
-      {
-        icon: icon_18,
-        name: "会员营销短信",
-      },
-      {
-        icon: icon_18,
-        name: "图片视频短信",
-      },
-      {
-        icon: icon_18,
-        name: "5G短信",
-      },
-      {
-        icon: icon_18,
-        name: "语音短信",
-      },
-      {
-        icon: icon_18,
-        name: "国际短信",
-      },
-    ],
-  },
-  {
-    label: "物联网",
-    children: [
-      {
-        icon: icon_18,
-        name: "通知短信",
-      },
-      {
-        icon: icon_18,
-        name: "验证码短信",
-      },
-      {
-        icon: icon_18,
-        name: "会员营销短信",
-      },
-      {
-        icon: icon_18,
-        name: "图片视频短信",
-      },
-      {
-        icon: icon_18,
-        name: "5G短信",
-      },
-      {
-        icon: icon_18,
-        name: "语音短信",
-      },
-      {
-        icon: icon_18,
-        name: "国际短信",
-      },
-    ],
-  },
-  {
-    label: "号码检测",
-    children: [
-      {
-        icon: icon_18,
-        name: "通知短信",
-      },
-      {
-        icon: icon_18,
-        name: "验证码短信",
-      },
-      {
-        icon: icon_18,
-        name: "会员营销短信",
-      },
-      {
-        icon: icon_18,
-        name: "图片视频短信",
-      },
-      {
-        icon: icon_18,
-        name: "5G短信",
-      },
-      {
-        icon: icon_18,
-        name: "语音短信",
-      },
-      {
-        icon: icon_18,
-        name: "国际短信",
-      },
-    ],
-  },
-  {
-    label: "实名认证",
-    children: [
-      {
-        icon: icon_18,
-        name: "通知短信",
-      },
-      {
-        icon: icon_18,
-        name: "验证码短信",
-      },
-      {
-        icon: icon_18,
-        name: "会员营销短信",
-      },
-      {
-        icon: icon_18,
-        name: "图片视频短信",
-      },
-      {
-        icon: icon_18,
-        name: "5G短信",
-      },
-      {
-        icon: icon_18,
-        name: "语音短信",
-      },
-      {
-        icon: icon_18,
-        name: "国际短信",
-      },
-    ],
-  },
-  {
-    label: "业务风控",
-    children: [
-      {
-        icon: icon_18,
-        name: "通知短信",
-      },
-      {
-        icon: icon_18,
-        name: "验证码短信",
-      },
-      {
-        icon: icon_18,
-        name: "会员营销短信",
-      },
-      {
-        icon: icon_18,
-        name: "图片视频短信",
-      },
-      {
-        icon: icon_18,
-        name: "5G短信",
-      },
-      {
-        icon: icon_18,
-        name: "语音短信",
-      },
-      {
-        icon: icon_18,
-        name: "国际短信",
-      },
-    ],
-  },
-  {
-    label: "IDC",
-    children: [
-      {
-        icon: icon_18,
-        name: "通知短信",
-      },
-      {
-        icon: icon_18,
-        name: "验证码短信",
-      },
-      {
-        icon: icon_18,
-        name: "会员营销短信",
-      },
-      {
-        icon: icon_18,
-        name: "图片视频短信",
-      },
-      {
-        icon: icon_18,
-        name: "5G短信",
-      },
-      {
-        icon: icon_18,
-        name: "语音短信",
-      },
-      {
-        icon: icon_18,
-        name: "国际短信",
-      },
-    ],
-  },
-];
-
-// 资质与证书
-import certificate_01 from "./../public/images/certificate_01.png";
-import certificate_02 from "./../public/images/certificate_02.png";
-import certificate_03 from "./../public/images/certificate_03.png";
-import certificate_04 from "./../public/images/certificate_04.png";
-
-const certificateList = ref([
-  {
-    label: "隐私信息管理体系认证证书",
-    img: certificate_01,
-  },
-  {
-    label: "质量管理体系认证证书",
-    img: certificate_02,
-  },
-  {
-    label: "中华人民共和国电信网码号资源使用证书",
-    img: certificate_03,
-  },
-  {
-    label: "中华人民共和国增值电信业务经营许可证",
-    img: certificate_04,
-  },
-]);
-</script>
-
-<style scoped lang="scss">
-.banner {
-  width: 100%;
-  min-height: 560px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/bg_02.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-  .banner-content {
-    width: 1284px;
-    margin: 0 auto;
-    padding: var(--size-68);
-    .banner-title {
-      font-size: var(--size-48);
-      color: var(--color-01);
-    }
-    .banner-text {
-      padding-top: var(--size-30);
-      font-size: var(--size-20);
-      color: var(--color-02);
-      line-height: var(--size-37);
-    }
-    .banner-type {
-      display: flex;
-      align-items: stretch;
-      padding-top: var(--size-52);
-      .type-item {
-        padding-right: var(--size-53);
-        .type-statistics {
-          color: var(--color-01);
-          font-weight: var(--weight-600);
-          .statistics-val {
-            font-size: var(--size-50);
-            font-family: var(--family-02);
-          }
-          .statistics-tag {
-            font-family: var(--family-01);
-            font-size: var(--size-24);
-          }
-        }
-        .type-name {
-          font-size: var(--size-16);
-          color: var(--color-02);
-          padding-top: var(--size-12);
-          //   line-height: 37px;
-        }
-      }
-    }
-  }
-}
-
-.AboutUs {
-  width: 100%;
-  min-height: 791px;
-  background-image: url("../public/images/bg_04.png");
-  display: flex;
-  align-items: center;
-  padding: var(--size-122) 0;
-  .AboutUs-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .AboutUs-left {
-      flex-shrink: 0;
-      width: 531px;
-      height: 547px;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    .AboutUs-right {
-      padding-left: var(--size-100);
-      flex: 1;
-      .headline {
-        font-size: var(--size-48);
-        padding-bottom: var(--size-30);
-      }
-      .subhead {
-        font-size: var(--size-20);
-        color: var(--color-02);
-        line-height: 1.3;
-      }
-      .type-box {
-        width: 100%;
-        .type-list {
-          width: 100%;
-          display: flex;
-          padding-top: var(--size-62);
-          .type-item {
-            flex: 1;
-            flex-shrink: 0;
-            margin-right: var(--size-6);
-            height: var(--size-40);
-            line-height: var(--size-40);
-            background: var(--color-06);
-            border-radius: var(--size-4);
-            font-size: var(--size-18);
-            padding: 0 var(--size-10);
-            text-align: center;
-            cursor: pointer;
-            &:last-child {
-              margin-right: 0;
-            }
-          }
-          .active-type-item {
-            background-color: var(--color-04);
-            color: #fff;
-          }
-        }
-      }
-
-      .type-content {
-        padding-top: 46px;
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        .type-content-item {
-          flex-shrink: 0;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          padding: 0 10px;
-          img {
-            width: 42px;
-            height: 42px;
-            object-fit: contain;
-          }
-          .type-content-name {
-            font-size: var(--size-16);
-            text-align: center;
-            color: var(--color-02);
-            padding-top: var(--size-14);
-          }
-        }
-      }
-    }
-  }
-}
-
-.promise {
-  width: 100%;
-  min-height: 791px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/home_bg_02.png");
-  p {
-    text-align: center;
-  }
-  .headline {
-    font-size: var(--size-34);
-    font-family: var(--family-01);
-    font-weight: var(--weight-700);
-    color: var(--color-01);
-    padding-top: var(--size-93);
-  }
-  .subhead {
-    padding-top: var(--size-17);
-    font-size: var(--size-18);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    color: var(--color-03);
-  }
-  .promise-content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding-top: var(--size-60);
-    border-bottom: 2px solid var(--color-04);
-    .promise-content-item {
-      min-height: 384px;
-      flex: 1;
-      flex-shrink: 0;
-      background-color: #fff;
-      box-shadow: var(--shadow-01);
-      border-radius: 8px;
-      padding: var(--size-52);
-      display: flex;
-      flex-direction: column;
-      //   transform: scale(1.1);
-      transition: flex 0.2s;
-      cursor: pointer;
-      &:hover {
-        flex: 1.2;
-      }
-      p {
-        text-align: left;
-      }
-      .icon {
-        width: 95px;
-        height: 75px;
-        object-fit: contain;
-      }
-      .title {
-        font-size: 24px;
-        padding-top: var(--size-25);
-        line-height: 1;
-      }
-      .value {
-        font-size: 16px;
-        color: #666666;
-        display: flex;
-        padding-top: var(--size-15);
-        line-height: 1.2;
-        &:first-child{
-            padding-top: var(--size-30);
-        }
-        .tag {
-          flex-shrink: 0;
-          font-weight: var(--weight-700);
-          padding-right: 7px;
-        }
-      }
-    }
-  }
-}
-
-.certificate {
-  width: 100%;
-  min-height: 744px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/home_bg_04.png");
-  .headline {
-    text-align: center;
-    font-size: var(--size-48);
-    padding: var(--size-90) 0 var(--size-40);
-  }
-  .certificate-content {
-    width: 100%;
-    .certificate-carousel {
-      width: 100%;
-      .carousel-item {
-        .carousel-img {
-          width: 100%;
-          height: 420px;
-          object-fit: contain;
-        }
-        .carousel-label {
-          font-size: var(--size-18);
-          text-align: center;
-          padding: 0 var(--size-20);
-        }
-      }
-    }
-  }
-}
-
-.affiliation {
-  .headline {
-    font-size: var(--size-48);
-    text-align: center;
-    padding-top: var(--size-92);
-  }
-  .subhead {
-    font-size: var(--size-18);
-    text-align: center;
-    color: var(--color-03);
-    padding-top: var(--size-21);
-  }
-  .affiliation-content {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    padding-top: var(--size-41);
-    .affiliation-left {
-      flex-shrink: 0;
-      width: 50%;
-      height: 420px;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    .affiliation-right {
-      flex-shrink: 0;
-      width: 50%;
-      height: 420px;
-      background-image: url("../public/images/bg_05.png");
-      padding: 0 var(--size-100);
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-      position: relative;
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translate(-80%, -50%);
-        width: 0;
-        height: 0;
-        border: var(--size-35) solid;
-        border-left-width: 0;
-        border-color: transparent var(--color-07) transparent transparent;
-      }
-      .right-item {
-        display: flex;
-        align-items: center;
-        padding-bottom: var(--size-20);
-        .right-icon {
-          width: var(--size-30);
-          height: var(--size-30);
-          object-fit: contain;
-        }
-        .right-text {
-          padding-left: var(--size-10);
-          font-size: var(--size-24);
-          color: #ffffff;
-        }
-      }
-      .right-btn {
-        width: 228px;
-        height: 60px;
-        border-radius: 6px;
-        background-color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        .icon {
-          width: 25px;
-          height: 27px;
-          object-fit: contain;
-        }
-        .text {
-          padding-left: var(--size-8);
-          font-size: var(--size-24);
-          color: var(--color-07);
-        }
-      }
-    }
-  }
-}
-</style>

pages/developer.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="">developer</div>
-</template>
-
-<script setup>
-import {} from 'vue'
-</script>
-
-<style scoped></style>

pages/index.vue

@@ -1,603 +0,0 @@
-<template>
-  <div class="banner-box">
-    <div class="center1200">
-      <p class="banner-title animate__animated animate__bounce">互联网基础设施服务提供商</p>
-      <p class="banner-explain">向客户提供业界领先的网络电信增值业务经营服务。</p>
-      <div class="center-btn">了解详情</div>
-    </div>
-  </div>
-  <div class="product-presentation">
-    <div class="center1200">
-      <p class="title slideInUp">产品介绍</p>
-      <p class="explain">我们专注短信领域，赋能未来</p>
-      <div class="classify-label">
-        <div
-          :class="[
-            'classify-item',
-            activeClassify === index ? 'active-classify-item' : '',
-          ]"
-          v-for="(item, index) in classifyList"
-          :key="`classify_${index}`"
-          @click.stop="onSelectClassify(index)"
-        >
-          <img class="classify-icon" :src="item.icon" />
-          <p class="classify-name">{{ item.label }}</p>
-        </div>
-      </div>
-      <div class="classify-content">
-        <div class="content-left">
-          <template v-if="sublevelList && sublevelList.length > 0">
-            <div class="subleve-label">
-              <div class="subleve-item one-row" v-for="(sv, svIndex) in sublevelList">
-                <img class="subleve-icon" :src="sv.icon" />
-                <span
-                  :class="[
-                    'subleve-name one-row',
-                    activeSublevel === svIndex ? 'active-subleve-item' : '',
-                  ]"
-                  @click.stop="activeSublevel = svIndex"
-                >
-                  {{ sv.label }}
-                </span>
-              </div>
-            </div>
-            <div class="subleve-explain">
-              {{ sublevelList[activeSublevel].explain }}
-            </div>
-
-            <div class="btn-01">了解详情</div>
-          </template>
-          <!-- <div></div> -->
-        </div>
-        <div class="content-right">
-          <img
-            class="model-img"
-            v-if="sublevelList[activeSublevel].img"
-            :src="sublevelList[activeSublevel].img"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- 平台优势 -->
-  <div class="advantage">
-    <div class="center1200">
-      <p class="title slideInUp">平台优势</p>
-      <p class="explain">为什么选择飞信云</p>
-
-      <div class="advantage-content">
-        <div class="advantage-item" v-for="(item, index) in advantageList">
-          <img class="advantage-icon" :src="item.icon" />
-          <p class="advantage-name">{{ item.label }}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- 合作案例 -->
-  <div class="cooperation-case">
-    <div class="center1200">
-      <p class="title slideInUp">平台优势</p>
-      <div class="case-content">
-        <div class="case-item" v-for="(item, index) in caseList">
-          <img class="case-icon" :src="item.icon" />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- 联系我们 -->
-  <div class="contact-us">
-    <div class="center1200">
-      <p class="contact-us-title">联系我们，即刻申请免费测试账号</p>
-      <p class="contact-us-hint">为您的企业提供更稳定高效的信息服务！</p>
-      <div class="contact-us-btn">联系我们<span>></span></div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, reactive } from "vue";
-
-// 产品介绍 Begin ---------------------
-import icon_01 from "./../static/icon/icon_01.png";
-import icon_02 from "./../static/icon/icon_02.png";
-import icon_03 from "./../static/icon/icon_03.png";
-import icon_04 from "./../static/icon/icon_04.png";
-import icon_05 from "./../static/icon/icon_05.png";
-import icon_06 from "./../static/icon/icon_06.png";
-import icon_07 from "./../static/icon/icon_07.png";
-import icon_08 from "./../static/icon/icon_08.png";
-const activeClassify = ref(0);
-const activeSublevel = ref(0);
-const sublevelList = ref<any>([]);
-
-const classifyList = ref([
-  {
-    label: "云通讯产品",
-    icon: icon_01,
-    children: [
-      {
-        label: "通知短信",
-        icon: icon_08,
-        img: icon_07,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-      {
-        label: "短信验证码",
-        icon: icon_08,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-      {
-        label: "会员营销短信",
-        icon: icon_08,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-      {
-        label: "图片/视频短信",
-        icon: icon_08,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-      {
-        label: "5G短信",
-        icon: icon_08,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-      {
-        label: "语音短信",
-        icon: icon_08,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-      {
-        label: "国际短信",
-        icon: icon_08,
-        explain:
-          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
-        link: "#",
-      },
-    ],
-  },
-  {
-    label: "物联网",
-    icon: icon_02,
-  },
-  {
-    label: "号码检测",
-    icon: icon_03,
-  },
-  {
-    label: "实名认证",
-    icon: icon_04,
-  },
-  {
-    label: "业务风控",
-    icon: icon_05,
-  },
-  {
-    label: "IDC",
-    icon: icon_06,
-  },
-]);
-
-// 选择一级分类
-const onSelectClassify = (e) => {
-  activeClassify.value = e;
-  sublevelList.value = classifyList.value[activeClassify.value].children;
-  activeSublevel.value = 0;
-};
-
-onSelectClassify(0);
-
-// 产品介绍 End ---------------------
-
-// 平台优势
-
-const activeAdvantage = ref(0);
-
-const advantageList = ref([
-  {
-    label: "云通讯产品",
-    icon: icon_01,
-  },
-  {
-    label: "多流量套餐",
-    icon: icon_02,
-  },
-  {
-    label: "检测高效,覆盖面广",
-    icon: icon_03,
-  },
-  {
-    label: "认证准确，数据可视化",
-    icon: icon_04,
-  },
-  {
-    label: "安全防控，算法精确",
-    icon: icon_05,
-  },
-  {
-    label: "专业化运维",
-    icon: icon_06,
-  },
-]);
-
-// 合作案例
-import logo_01 from "./../static/icon/logo_01.png";
-import logo_02 from "./../static/icon/logo_02.png";
-import logo_03 from "./../static/icon/logo_03.png";
-import logo_04 from "./../static/icon/logo_04.png";
-import logo_05 from "./../static/icon/logo_05.png";
-import logo_06 from "./../static/icon/logo_06.png";
-import logo_07 from "./../static/icon/logo_07.png";
-import logo_08 from "./../static/icon/logo_08.png";
-import logo_09 from "./../static/icon/logo_09.png";
-import logo_10 from "./../static/icon/logo_10.png";
-import logo_11 from "./../static/icon/logo_11.png";
-import logo_12 from "./../static/icon/logo_12.png";
-const caseList = ref([
-  {
-    icon: logo_01,
-  },
-  {
-    icon: logo_02,
-  },
-  {
-    icon: logo_03,
-  },
-  {
-    icon: logo_04,
-  },
-  {
-    icon: logo_05,
-  },
-  {
-    icon: logo_06,
-  },
-  {
-    icon: logo_07,
-  },
-  {
-    icon: logo_08,
-  },
-  {
-    icon: logo_09,
-  },
-  {
-    icon: logo_10,
-  },
-  {
-    icon: logo_11,
-  },
-  {
-    icon: logo_12,
-  },
-]);
-</script>
-<style lang="scss" scoped>
-@import "./../static/css/tool.scss";
-.banner-box {
-  width: 100%;
-  min-height: 750px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/home_bg_01.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-  .banner-title {
-    font-size: var(--size-48);
-    color: var(--color-01);
-  }
-  .banner-explain {
-    font-size: var(--size-24);
-    color: var(--color-02);
-    padding: var(--size-26) 0 var(--size-48);
-  }
-}
-
-.product-presentation {
-  width: 100%;
-  background-image: url("../public/images/home_bg_02.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  padding-top: var(--size-95);
-  .title {
-    font-size: var(--size-34);
-    font-family: var(--family-01);
-    font-weight: var(--weight-700);
-    color: var(--color-01);
-    line-height: var(--size-48);
-    text-align: center;
-  }
-  .explain {
-    font-size: var(--size-18);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    text-align: center;
-    color: var(--color-03);
-    line-height: var(--size-48);
-  }
-  .classify-label {
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    padding-top: var(--size-31);
-    align-items: stretch;
-    .classify-item {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      .classify-icon {
-        width: var(--size-60);
-        height: var(--size-60);
-        object-fit: contain;
-      }
-      .classify-name {
-        font-size: var(--size-20);
-        line-height: var(--size-48);
-        font-family: var(--family-01);
-        font-weight: var(--weight-400);
-        color: var(--color-02);
-        position: relative;
-        transition: all 0.2s;
-        &::after {
-          transition: all 0.6s;
-          content: "";
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 0;
-          height: var(--size-2);
-          background-color: transparent;
-        }
-      }
-    }
-    .active-classify-item {
-      .classify-name {
-        color: var(--color-04);
-        font-weight: var(--weight-600);
-        &::after {
-          width: auto;
-          background-color: var(--color-04);
-        }
-      }
-    }
-  }
-  .classify-content {
-    width: 100%;
-    padding-top: var(--size-52);
-    display: flex;
-    align-items: stretch;
-    .content-left {
-      width: 1px;
-      flex: 1;
-      // padding-right: var(--size-100);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      .subleve-label {
-        width: 100%;
-        display: flex;
-        align-items: stretch;
-        flex-wrap: wrap;
-        .subleve-item {
-          width: 25%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          cursor: pointer;
-          font-size: var(--color-18);
-          font-family: var(--family-01);
-          font-weight: var(--weight-400);
-          line-height: var(--size-48);
-          color: var(--color-01);
-          .subleve-icon {
-            width: var(--size-28);
-            height: var(--size-25);
-            object-fit: cover;
-          }
-          .subleve-name {
-            text-align: left;
-            padding: 0 var(--size-20) 0 var(--size-6);
-          }
-        }
-        .active-subleve-item {
-          color: var(--color-04);
-          font-weight: var(--weight-700);
-        }
-      }
-      .subleve-explain {
-        font-size: var(--size-16);
-        font-family: var(--family-01);
-        font-weight: var(--weight-400);
-        color: var(--color-01);
-        // line-height: var(--size-32);
-        padding: var(--size-55) 0;
-      }
-    }
-    .content-right {
-      transform: translateX(81px);
-      flex-shrink: 0;
-      width: var(--size-487);
-      height: var(--size-627);
-      .model-img {
-        width: var(--size-487);
-        height: var(--size-627);
-        object-fit: cover;
-      }
-    }
-  }
-}
-
-.advantage {
-  width: 100%;
-  background-image: url("../public/images/home_bg_03.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  padding-top: var(--size-95);
-  .title {
-    font-size: var(--size-34);
-    font-family: var(--family-01);
-    font-weight: var(--weight-700);
-    color: var(--color-01);
-    text-align: center;
-  }
-  .explain {
-    font-size: var(--size-18);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    text-align: center;
-    color: var(--color-03);
-    padding: var(--size-17) 0 var(--size-20);
-  }
-
-  .advantage-content {
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding: var(--size-59) 0 var(--size-50);
-    .advantage-item {
-      flex-shrink: 0;
-      // width: 362px;
-
-      width: calc((100% - var(--size-122)) / 3);
-      height: 221px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      background-color: #fff;
-      box-shadow: var(--shadow-01);
-      margin-right: calc(var(--size-122) / 2);
-      margin-bottom: var(--size-39);
-      border-radius: 8px;
-      cursor: pointer;
-      transition: all 0.3s;
-      &:hover {
-        background-color: var(--color-04);
-        .advantage-name {
-          color: #fff;
-        }
-      }
-      &:nth-child(3n) {
-        margin-right: 0;
-      }
-      .advantage-icon {
-        width: var(--size-86);
-        height: var(--size-76);
-        object-fit: contain;
-      }
-      .advantage-name {
-        padding-top: var(--size-17);
-        font-size: var(--size-24);
-        font-family: var(--family-01);
-        font-weight: var(--color-01);
-      }
-    }
-  }
-}
-
-.cooperation-case {
-  width: 100%;
-  background-image: url("../public/images/home_bg_04.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  padding-top: var(--size-95);
-  .title {
-    font-size: var(--size-34);
-    font-family: var(--family-01);
-    font-weight: var(--weight-700);
-    color: var(--color-01);
-    text-align: center;
-  }
-  .case-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: var(--size-40) 0 var(--size-60);
-    .case-item {
-      width: calc((100% - var(--size-96)) / 4);
-      height: 133px;
-      margin-right: calc(var(--size-96) / 3);
-      margin-bottom: calc(var(--size-96) / 3);
-      background-color: #fff;
-      box-shadow: var(--shadow-01);
-      padding: var(--size-15) var(--size-20);
-      border-radius: 8px;
-      cursor: pointer;
-      &:nth-child(4n) {
-        margin-right: 0;
-      }
-      .case-icon {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-  }
-}
-
-.contact-us {
-  width: 100%;
-  min-height: 317px;
-  background-image: url("../public/images/home_bg_05.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .contact-us-title {
-    font-size: var(--size-36);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    color: #ffffff;
-    line-height: 48px;
-  }
-  .contact-us-hint {
-    font-size: var(--size-18);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    color: #ffffff;
-    padding: var(--size-29) 0 var(--size-46);
-  }
-  .contact-us-btn {
-    width: 227px;
-    height: 61px;
-    background: #ffffff;
-    border-radius: 6px;
-    background-color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    font-size: var(--size-24);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400); 
-    color: #08b3e9; 
-    span{
-      padding-left: var(--size-18);
-    }
-  }
-}
-</style>

pages/products.vue

@@ -1,249 +0,0 @@
-<template>
-  <div class="products">
-    <div class="products-content">
-      <p class="headline">通知短信</p>
-      <p class="explain">
-        提供通知类短信服务，三网合一的高质量短信通道，适用于服务通知，物流通知，订单通知，注册及消费信息确认等。
-      </p>
-    </div>
-  </div>
-  <!-- 产品优势 -->
-  <div class="advantage">
-    <div class="advantage-content center1200">
-      <p class="conmon-headline">产品优势</p>
-      <div class="advantage-box">
-        <n-carousel
-          class="advantage-carousel"
-          autoplay
-          :interval="5000"
-          :show-dots="false"
-          :slides-per-view="3"
-          :space-between="20"
-          draggable
-        >
-          <div class="carousel-item" v-for="item in advantageList" :key="item">
-            <div class="advantage-left">
-              <p class="name">{{ item.label }}</p>
-              <p class="value-item" v-for="s in item.explain">
-                <span class="val-tag">一</span>
-                <span class="val-text">{{ s }}</span>
-              </p>
-            </div>
-            <div class="advantage-right">
-              <img :src="item.icon" />
-            </div>
-          </div>
-        </n-carousel>
-      </div>
-    </div>
-  </div>
-
-  <div class="scenario">
-    <div class="center1200">
-      <p class="conmon-headline">行业应用场景</p>
-      <div class="scenario-box">
-        <div class="scenario-item" v-for="item in scenarioList">
-          <img class="icon" :src="item.icon" />
-          <p class="name">{{ item.label }}</p>
-          <a href="#">下载模板</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// 产品优势
-import icon_09 from "../static/icon/icon_09.png";
-import icon_10 from "../static/icon/icon_10.png";
-import icon_11 from "../static/icon/icon_11.png";
-const advantageList = ref([
-  {
-    label: "5G必达",
-    icon: icon_09,
-    explain: ["三网合一", "高质量通道", "服务请求秒级相应"],
-  },
-  {
-    label: "99.99%到达率",
-    icon: icon_10,
-    explain: ["支持大容量，高并发", "平台模板免审核", "运营商直联通道"],
-  },
-  {
-    label: "稳定保障",
-    icon: icon_11,
-    explain: ["主短信通道+多条备份短信通道", "平台实时监控，智能切换"],
-  },
-  {
-    label: "稳定保障",
-    icon: icon_11,
-    explain: ["主短信通道+多条备份短信通道", "平台实时监控，智能切换"],
-  },
-]);
-
-// 行业应用场景
-import icon_12 from "../static/icon/icon_12.png";
-import icon_13 from "../static/icon/icon_13.png";
-import icon_14 from "../static/icon/icon_14.png";
-import icon_15 from "../static/icon/icon_15.png";
-import icon_16 from "../static/icon/icon_16.png";
-const scenarioList = ref([
-  {
-    label: "用户注册",
-    icon: icon_12,
-    link: "#",
-  },
-  {
-    label: "找回密码",
-    icon: icon_13,
-    link: "#",
-  },
-  {
-    label: "物流短信",
-    icon: icon_14,
-    link: "#",
-  },
-  {
-    label: "消息通知",
-    icon: icon_15,
-    link: "#",
-  },
-  {
-    label: "生日祝福",
-    icon: icon_16,
-    link: "#",
-  },
-]);
-</script>
-
-<style lang="scss" scoped>
-.conmon-headline {
-  text-align: center;
-  font-size: var(--size-48);
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  color: var(--color-01);
-  padding: var(--size-90) 0 var(--size-50);
-}
-.products {
-  width: 100%;
-  min-height: 560px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/bg_01.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-  .products-content {
-    width: 1284px;
-    margin: 0 auto;
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    .headline {
-      font-size: var(--size-48);
-      color: var(--color-01);
-    }
-    .explain {
-      padding-top: var(--size-36);
-      font-size: var(--size-24);
-      color: var(--color-02);
-    }
-  }
-}
-
-.advantage {
-  .advantage-box {
-    width: 100%;
-    padding-bottom: 88px;
-    .advantage-carousel {
-      width: 100%;
-      height: 187px !important;
-      .carousel-item {
-        width: 100%;
-        height: 187px;
-        border-radius: 8px;
-        background-color: #f3f5f9;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .advantage-left {
-          flex: 1;
-          padding: 25px;
-          .name {
-            font-size: 24px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: 400;
-            color: #1a1a1a;
-            padding-bottom: 18px;
-          }
-          .value-item {
-            width: 100%;
-            display: flex;
-            font-size: 16px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: 400;
-            color: #666666;
-            padding-bottom: 10px;
-            line-height: 1.3;
-            .val-tag {
-              flex-shrink: 0;
-              padding-right: 10px;
-            }
-            .val-text {
-            }
-          }
-        }
-        .advantage-right {
-          flex-shrink: 0;
-          width: 122px;
-          height: 111px;
-        }
-      }
-    }
-    // .advantage-item {
-    //   width: calc((100% - 40px) / 3);
-    //   height: 187px;
-    //   background-color: #f3f5f9;
-    // }
-  }
-}
-
-.scenario {
-  width: 100%;
-  min-height: 539px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/home_bg_04.png");
-  .scenario-box {
-    width: 100%;
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    .scenario-item {
-      border-radius: var(--size-8);
-      width: calc((100% -  var(--size-216)) / 5);
-      height: var(--size-221);
-      background-color: #fff;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      box-shadow: var(--shadow-01);
-      .icon {
-        width: var(--size-70);
-        height: var(--size-70);
-        object-fit: contain;
-      }
-      .name {
-        font-size:  var(--size-24);
-        font-family: var(--family-01);
-        font-weight: var(--weight-400);
-        text-align: center;
-        color: #1a1a1a;
-        padding: var(--size-27) 0 var(--size-11);
-      }
-    }
-  }
-}
-</style>

pages/products/[type].vue

@@ -1,257 +0,0 @@
-<template>
-  <div class="products">
-    <div class="products-content">
-      <p class="headline">通知短信</p>
-      <p class="explain">
-        提供通知类短信服务，三网合一的高质量短信通道，适用于服务通知，物流通知，订单通知，注册及消费信息确认等。
-      </p>
-    </div>
-  </div>
-  <!-- 产品优势 -->
-  <div class="advantage">
-    <div class="advantage-content center1200">
-      <p class="conmon-headline">产品优势</p>
-      <div class="advantage-box">
-        <n-carousel
-          class="advantage-carousel"
-          autoplay
-          :interval="5000"
-          :show-dots="false"
-          :slides-per-view="3"
-          :space-between="20"
-          draggable
-        >
-          <div class="carousel-item" v-for="item in advantageList" :key="item">
-            <div class="advantage-left">
-              <p class="name">{{ item.label }}</p>
-              <p class="value-item" v-for="s in item.explain">
-                <span class="val-tag">一</span>
-                <span class="val-text">{{ s }}</span>
-              </p>
-            </div>
-            <div class="advantage-right">
-              <img :src="item.icon" />
-            </div>
-          </div>
-        </n-carousel>
-      </div>
-    </div>
-  </div>
-
-  <div class="scenario">
-    <div class="center1200">
-      <p class="conmon-headline">行业应用场景</p>
-      <div class="scenario-box">
-        <div class="scenario-item" v-for="item in scenarioList">
-          <img class="icon" :src="item.icon" />
-          <p class="name">{{ item.label }}</p>
-          <a href="#">下载模板</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const route = useRoute();
-console.log('route', 1)
-console.log('route', route)
-
-
-
-
-
-// 产品优势
-import icon_09 from "../static/icon/icon_09.png";
-import icon_10 from "../static/icon/icon_10.png";
-import icon_11 from "../static/icon/icon_11.png";
-const advantageList = ref([
-  {
-    label: "5G必达",
-    icon: icon_09,
-    explain: ["三网合一", "高质量通道", "服务请求秒级相应"],
-  },
-  {
-    label: "99.99%到达率",
-    icon: icon_10,
-    explain: ["支持大容量，高并发", "平台模板免审核", "运营商直联通道"],
-  },
-  {
-    label: "稳定保障",
-    icon: icon_11,
-    explain: ["主短信通道+多条备份短信通道", "平台实时监控，智能切换"],
-  },
-  {
-    label: "稳定保障",
-    icon: icon_11,
-    explain: ["主短信通道+多条备份短信通道", "平台实时监控，智能切换"],
-  },
-]);
-
-// 行业应用场景
-import icon_12 from "../static/icon/icon_12.png";
-import icon_13 from "../static/icon/icon_13.png";
-import icon_14 from "../static/icon/icon_14.png";
-import icon_15 from "../static/icon/icon_15.png";
-import icon_16 from "../static/icon/icon_16.png";
-const scenarioList = ref([
-  {
-    label: "用户注册",
-    icon: icon_12,
-    link: "#",
-  },
-  {
-    label: "找回密码",
-    icon: icon_13,
-    link: "#",
-  },
-  {
-    label: "物流短信",
-    icon: icon_14,
-    link: "#",
-  },
-  {
-    label: "消息通知",
-    icon: icon_15,
-    link: "#",
-  },
-  {
-    label: "生日祝福",
-    icon: icon_16,
-    link: "#",
-  },
-]);
-</script>
-
-<style lang="scss" scoped>
-.conmon-headline {
-  text-align: center;
-  font-size: var(--size-48);
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  color: var(--color-01);
-  padding: var(--size-90) 0 var(--size-50);
-}
-.products {
-  width: 100%;
-  min-height: 560px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/bg_01.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-  .products-content {
-    width: 1284px;
-    margin: 0 auto;
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    .headline {
-      font-size: var(--size-48);
-      color: var(--color-01);
-    }
-    .explain {
-      padding-top: var(--size-36);
-      font-size: var(--size-24);
-      color: var(--color-02);
-    }
-  }
-}
-
-.advantage {
-  .advantage-box {
-    width: 100%;
-    padding-bottom: 88px;
-    .advantage-carousel {
-      width: 100%;
-      height: 187px !important;
-      .carousel-item {
-        width: 100%;
-        height: 187px;
-        border-radius: 8px;
-        background-color: #f3f5f9;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .advantage-left {
-          flex: 1;
-          padding: 25px;
-          .name {
-            font-size: 24px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: 400;
-            color: #1a1a1a;
-            padding-bottom: 18px;
-          }
-          .value-item {
-            width: 100%;
-            display: flex;
-            font-size: 16px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: 400;
-            color: #666666;
-            padding-bottom: 10px;
-            line-height: 1.3;
-            .val-tag {
-              flex-shrink: 0;
-              padding-right: 10px;
-            }
-            .val-text {
-            }
-          }
-        }
-        .advantage-right {
-          flex-shrink: 0;
-          width: 122px;
-          height: 111px;
-        }
-      }
-    }
-    // .advantage-item {
-    //   width: calc((100% - 40px) / 3);
-    //   height: 187px;
-    //   background-color: #f3f5f9;
-    // }
-  }
-}
-
-.scenario {
-  width: 100%;
-  min-height: 539px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/home_bg_04.png");
-  .scenario-box {
-    width: 100%;
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    .scenario-item {
-      border-radius: var(--size-8);
-      width: calc((100% - var(--size-216)) / 5);
-      height: var(--size-221);
-      background-color: #fff;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      box-shadow: var(--shadow-01);
-      .icon {
-        width: var(--size-70);
-        height: var(--size-70);
-        object-fit: contain;
-      }
-      .name {
-        font-size: var(--size-24);
-        font-family: var(--family-01);
-        font-weight: var(--weight-400);
-        text-align: center;
-        color: #1a1a1a;
-        padding: var(--size-27) 0 var(--size-11);
-      }
-    }
-  }
-}
-</style>

pages/solution.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="solution-banner"></div>
-
-  <div class="solution-scene">
-    <div class="center1440">
-      <p class="headline">行业痛点场景</p>
-      <div class="scene-content">
-        <div
-          class="scene-item"
-          :style="{ 'background-image': `url(${item.bgImg})` }"
-          v-for="item in sceneList"
-        >
-          <div class="scene-masking">
-            <img class="masking-icon masking-img" :src="item.icon" />
-            <img class="active-masking-img masking-icon" :src="item.activeIcon" />
-            <p class="masking-label">{{ item.label }}</p>
-            <p class="masking-value">{{ item.value }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-
-import sceneBg_01 from "./../public/images/scene-bg-01.png";
-import sceneIocon_01 from "./../public/images/scene_icon_01.png";
-import sceneIocon_02 from "./../public/images/scene_icon_02.png";
-import sceneIocon_03 from "./../public/images/scene_icon_03.png";
-import sceneIocon_04 from "./../public/images/scene_icon_04.png";
-import ActiovceneIocon_01 from "./../public/images/scene_01.png";
-import ActiovceneIocon_02 from "./../public/images/scene_02.png";
-import ActiovceneIocon_03 from "./../public/images/scene_03.png";
-import ActiovceneIocon_04 from "./../public/images/scene_04.png";
-
-const sceneList = ref([
-  {
-    icon: sceneIocon_01,
-    activeIcon: ActiovceneIocon_01,
-    bgImg: sceneBg_01,
-    label: "互联网行业",
-    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
-  },
-  {
-    icon: sceneIocon_02,
-    activeIcon: ActiovceneIocon_02,
-    bgImg: sceneBg_01,
-    label: "金融行业",
-    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
-  },
-  {
-    icon: sceneIocon_03,
-    activeIcon: ActiovceneIocon_03,
-    bgImg: sceneBg_01,
-    label: "电商行业",
-    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
-  },
-  {
-    icon: sceneIocon_04,
-    activeIcon: ActiovceneIocon_04,
-    bgImg: sceneBg_01,
-    label: "物流行业",
-    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
-  },
-]);
-</script>
-<style lang="scss" scoped>
-.solution-banner {
-  width: 100%;
-  min-height: 560px;
-  font-family: var(--family-01);
-  font-weight: var(--weight-400);
-  background-image: url("../public/images/solution-banner.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-}
-
-.solution-scene {
-  width: 100%;
-  .headline {
-    text-align: center;
-    font-size: 48px;
-    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-    font-weight: 400;
-    color: #1a1a1a;
-    padding: var(--size-90) 0 var(--size-50);
-  }
-  .scene-content {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding-bottom: 88px;
-    .scene-item {
-      width: 360px;
-      height: 513px;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
-      position: relative;
-      .scene-masking {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        padding: 0 40px;
-        cursor: pointer;
-        .masking-icon {
-          width: 105px;
-          height: 105px;
-        }
-        .active-masking-img {
-          display: none;
-        }
-        .masking-label {
-          font-size: 24px;
-          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-          font-weight: 400;
-          text-align: left;
-          color: #ffffff;
-          padding-top: 28px;
-        }
-        .masking-value {
-          display: none;
-          padding-top: 18px;
-          font-size: 16px;
-          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-          font-weight: 400;
-          text-align: center;
-          color: #e6e6e6;
-        }
-        &:hover {
-          background-color: var(--color-05);
-          .masking-img {
-            display: none;
-          }
-          .active-masking-img {
-            display: inline-block;
-          }
-          .masking-value {
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

public/js/wow.js

@@ -1,5 +0,0 @@
-import Vue from 'vue';
-import { WOW } from 'wowjs'
-
-window.WOW = WOW;  //因为服务端没有window，而wowjs里面是有window的，所以这里必须手动创建一个
-Vue.prototype.$wow = new WOW()

qqq

@@ -1,33 +0,0 @@
-module.exports = {
-    css: [
-        '@/static/css/root.scss',
-        // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件）
-        //   'bulma',
-        // 项目里要使用的 SCSS 文件
-        '@/static/css/common.scss',
-        'animate.css'
-    ],
-    plugins: [
-        { src: '@/public/js/wow.js', ssr: true }
-    ],
-    modules: [],
-    // build: {
-    //     transpile:
-    //         process.env.NODE_ENV === 'production'
-    //             ? [
-    //                 'naive-ui',
-    //                 'vueuc',
-    //                 '@css-render/vue3-ssr',
-    //                 '@juggle/resize-observer'
-    //             ]
-    //             : ['@juggle/resize-observer']
-    // },
-    // vite: {
-    //     optimizeDeps: {
-    //         include:
-    //             process.env.NODE_ENV === 'development'
-    //                 ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
-    //                 : []
-    //     }
-    // },
-}

static/css/common.scss

@@ -1,79 +0,0 @@
-@import "~/static/css/tool.scss";
-* {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-a {
-    text-decoration: none;
-    /* 去除默认的下划线 */
-    color: inherit;
-    /* 去除默认的颜色和点击后变化的颜色 */
-}
-
-@include responseTo("tv") {
-    html,
-    body {
-        min-width: 1500px;
-        color: var(--color-01);
-        font-weight: var(--weight-400);
-        font-family: var(--family-01);
-    }
-    .center1200 {
-        width: 1200px !important;
-        margin: 0 auto !important;
-    }
-    .center1440 {
-        width: 1440px !important;
-        margin: 0 auto !important;
-    }
-}
-img {
-    line-height: 1;
-}
-
-.one-row {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.bg {
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-}
-
-.center-btn {
-    width: auto;
-    min-width: 174px;
-    min-height: 50px;
-    background: linear-gradient(-45deg, #2cbac0 0%, #006efe 100%), #006efe;
-    border-radius: 4px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 18px;
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    color: #ffffff;
-}
-
-.btn-01 {
-    width: 1px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: nowrap;
-    min-width: 174px;
-    min-height: 50px;
-    padding: 0 var(--size-20);
-    background: #ffffff;
-    border: 1px solid var(--color-04);
-    border-radius: var(--size-4);
-    font-size: var(--size-18);
-    font-family: var(--family-01);
-    font-weight: var(--weight-400);
-    color: var(--color-04);
-}

static/css/root.scss

@@ -1,242 +0,0 @@
-@import "~/static/css/tool.scss";
-:root {
-    --nav-height:80px;
-
-    --header-z-index:9;
-
-    --shadow-01:0 0 var(--size-15) var(--size-6) rgba(89, 187, 228, 0.25);
-    --shadow-02:0 0 var(--size-15) var(--size-6) rgba(89, 187, 228, 0.25);
-
-    --color-01:#1a1a1a;
-    --color-02:#666666;
-    --color-03:#808080;
-    --color-04:#006EFE;
-    --color-05:rgba(0, 110, 254,0.5);
-    --color-06: #e6e6e6;
-    --color-07:#11b5e8;
-
-    --family-01:Microsoft YaHei;
-    --family-02:FZYaoTi, FZYaoTi-Regular; 
-    // --family-02:Microsoft YaHei;
-
-    --weight-300:300;
-    --weight-400:400;
-    --weight-500:500;
-    --weight-600:600;
-    --weight-700:700;
-    --weight-800:800;
-    --weight-900:400;
-
-    @include responseTo("phone") {
-        --size-1: 0.1333vw;
-        // --size-2: 0.2667vw;
-        // --size-3: 0.4vw;
-        // --size-4: 0.5333vw;
-        // --size-5: 0.6667vw;
-        // --size-6: 0.8vw;
-        // --size-7: 0.9333vw;
-        // --size-8: 1.0667vw;
-        // --size-9: 1.2vw;
-        // --size-10: 1.3333vw;
-        // --size-11: 1.4667vw;
-        // --size-12: 1.6vw;
-        // --size-13: 1.7333vw;
-        // --size-14: 1.8667vw;
-        // --size-15: 2vw;
-        // --size-16: 2.1333vw;
-        // --size-17: 2.2667vw;
-        // --size-18: 2.4vw;
-        // --size-19: 2.5333vw;
-        // --size-20: 2.6667vw;
-        // --size-21: 2.8vw;
-        // --size-22: 2.9333vw;
-        // --size-23: 3.0667vw;
-        // --size-24: 3.2vw;
-        // --size-25: 3.3333vw;
-        // --size-26: 3.4667vw;
-        // --size-27: 3.6vw;
-        // --size-28: 3.7333vw;
-        // --size-29: 3.8667vw;
-        // --size-30: 4vw;
-        // --size-31: 4.1333vw;
-        // --size-32: 4.2667vw;
-        // --size-33: 4.4vw;
-        // --size-34: 4.533vw;
-        // --size-35: 4.6667vw;
-        // --size-36: 4.8vw;
-        // --size-37: 4.9333vw;
-        // --size-38: 5.0667vw;
-        // --size-39: 5.2vw;
-        // --size-40: 5.3333vw;
-        // --size-41: 5.46vw;
-        // --size-42: 5.6vw;
-        // --size-43: 5.7333vw;
-        // --size-44: 5.8667vw;
-        // --size-45: 6vw;
-        // --size-46: 6.1333vw;
-        // --size-47: 6.2667;
-        // --size-48: 6.4vw;
-        // --size-49: 6.5333vw;
-        // --size-50: 6.6667vw;
-        // --size-51: 6.8vw;
-        // --size-52: 6.93vw;
-        // --size-53: 7.0667vw;
-        // --size-54: 7.6vw;
-        // --size-55: 7.33vw;
-        // --size-56: 7.4667vw;
-        // --size-57: 7.6vw;
-        // --size-58: 7.7333vw;
-        // --size-59: 7, 8667vw;
-        // --size-60: 8vw;
-        // --size-61: 8.1333vw;
-        // --size-62: 8.2667vw;
-        // --size-63: 8.4vw;
-        // --size-64: 8.5333vw;
-        // --size-65: 8.6667vw;
-        // --size-66: 8.8vw;
-        // --size-67: 8.9333vw;
-        // --size-68: 9.0667vw;
-        // --size-69: 9.2vw;
-        // --size-70: 9.3333vw;
-        // --size-80: 10.6667vw;
-        // --size-81: 10.8vw;
-        // --size-82: 10.9333vw;
-        // --size-83: 11.0667vw;
-        // --size-84: 11.2vw;
-        // --size-85: 11.3333vw;
-        // --size-86: 11.4667vw;
-        // --size-87: 11.6vw;
-        // --size-88: 11.7333vw;
-        // --size-89: 11.8667vw;
-        // --size-90: 13vw;
-        // --size-91: 12.1333vw;
-        // --size-92: 12.2667vw;
-        // --size-93: 12.4vw;
-        // --size-94: 13.5333vw;
-        // --size-95: 12.6667vw;
-        // --size-96: 12.8vw;
-        // --size-97: 12.9333vw;
-        // --size-98: 13.0667vw;
-        // --size-99: 13.2vw;
-        // --size-100: 13.3333vw;
-        // --size-112: 14.9333vw;
-        // --size-116: 15.4667vw;
-        // --size-148: 19.7333vw;
-        // --size-185: 24.6667vw;
-        // --size-225: 30vw;
-        // --size-500: 66.6667vw;
-        // --size-568: 75.7333vw;
-        // --size-600: 80vw;
-        // --size-690: 92vw;
-        // --size-750: 100vw;
-    }
-    @include responseTo("tv") {
-        --size-1: 1px;
-        --size-2: 2px;
-        --size-3: 3px;
-        --size-4: 4px;
-        --size-5: 5px;
-        --size-6: 6px;
-        --size-7: 7px;
-        --size-8: 8px;
-        --size-9: 9px;
-        --size-10: 10px;
-        --size-11: 11px;
-        --size-12: 12px;
-        --size-13: 13px;
-        --size-14: 14px;
-        --size-15: 15px;
-        --size-16: 16px;
-        --size-17: 17px;
-        --size-18: 18px;
-        --size-19: 19px;
-        --size-20: 20px;
-        --size-21: 21px;
-        --size-22: 22px;
-        --size-23: 23px;
-        --size-24: 24px;
-        --size-25: 25px;
-        --size-26: 26px;
-        --size-27: 27px;
-        --size-28: 28px;
-        --size-29: 29px;
-        --size-30: 30px;
-        --size-31: 31px;
-        --size-32: 32px;
-        --size-33: 33px;
-        --size-34: 34px;
-        --size-35: 35px;
-        --size-36: 36px;
-        --size-37: 37px;
-        --size-38: 38px;
-        --size-39: 39px;
-        --size-40: 40px;
-        --size-41: 41px;
-        --size-42: 42px;
-        --size-43: 43px;
-        --size-44: 44px;
-        --size-45: 45px;
-        --size-46: 46px;
-        --size-47: 47px;
-        --size-48: 48px;
-        --size-49: 49px;
-        --size-50: 50px;
-        --size-51: 51px;
-        --size-52: 52px;
-        --size-53: 53px;
-        --size-54: 54px;
-        --size-55: 55px;
-        --size-56: 56px;
-        --size-57: 57px;
-        --size-58: 58px;
-        --size-59: 59px;
-        --size-60: 60px;
-        --size-61: 61px;
-        --size-62: 62px;
-        --size-63: 63px;
-        --size-64: 64px;
-        --size-65: 65px;
-        --size-66: 66px;
-        --size-67: 67px;
-        --size-68: 68px;
-        --size-69: 69px;
-        --size-70: 70px;
-        --size-71: 71px;
-        --size-72: 72px;
-        --size-73: 73px;
-        --size-74: 74px;
-        --size-75: 75px;
-        --size-76: 76px;
-        --size-77: 77px;
-        --size-78: 78px;
-        --size-79: 79px;
-        --size-80: 80px;
-        --size-81: 81px;
-        --size-82: 82px;
-        --size-83: 83px;
-        --size-84: 84px;
-        --size-85: 85px;
-        --size-86: 86px;
-        --size-87: 87px;
-        --size-88: 88px;
-        --size-89: 89px;
-        --size-90: 90px;
-        --size-91: 91px;
-        --size-92: 92px;
-        --size-93: 93px;
-        --size-94: 94px;
-        --size-95: 95px;
-        --size-96: 96px;
-        --size-97: 97px;
-        --size-98: 98px;
-        --size-99: 99px;
-        --size-100: 100px;
-        --size-112: 112px;
-        --size-122: 122px;
-        --size-216: 216px;
-        --size-221: 221px;
-
-        --size-487:487px;
-        --size-627:627px; 
-    }
-}

static/css/tool.scss

@@ -1,25 +0,0 @@
-$breakpoints: (
-    "phone": (
-        0px,
-        1200px
-    ),
-    // "pad": (
-    //     751px,
-    //     991px
-    // ),
-    "tv": 1200px,
-    
-);
-
-@mixin responseTo($breakname) {
-    $bp: map-get($breakpoints, $breakname);
-    @if type-of($bp) == "list" {
-        @media (min-width: nth($bp,1)) and (max-width: nth($bp,2)) {
-            @content;
-        }
-    } @else {
-        @media (min-width: $bp) {
-            @content;
-        }
-    }
-}