123

package.json

@@ -9,9 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "amfe-flexible": "^2.2.1",
     "animate.css": "^4.1.1",
+    "autoprefixer": "^10.4.14",
     "axios": "^1.3.4",
     "pinia": "^2.0.32",
+    "postcss": "^8.4.21",
+    "postcss-pxtorem": "^6.0.0",
     "swiper": "^9.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13"

src/assets/scss/globalVar.scss

@@ -1,5 +1,6 @@
 $theme_color: #283fe7;
 $default_color: #ffffff;
 $point_default: #646a73;
+$common_bg: #fafafa;
 
 $header_height: 90px;

src/components/TopNav/index.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="header_container">
-    <img :src="Logo" alt="logo" />
-    <ul class="flex_center">
+  <div
+    :class="
+      activeIndex == 0 ? 'header_container' : 'header_container not_first'
+    "
+  >
+    <img :src="activeIndex == 0 ? Logo1 : Logo" alt="logo" />
+    <ul :class="activeIndex == 0 ? 'flex_center' : 'flex_center font_change'">
       <li><router-link to="/index">首页</router-link></li>
       <li><router-link to="/case">工业设计</router-link></li>
       <li><router-link to="/soft-hardware">软硬件研发</router-link></li>
@@ -14,7 +18,13 @@
 </template>
 
 <script setup>
-import Logo from '@/assets/img/banner/logo1.png'
+import Logo1 from '@/assets/img/banner/logo1.png'
+import Logo from '@/assets/img/banner/logo.png'
+import { useSwiperStore } from '@/store'
+import { onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+const swiperStore = useSwiperStore()
+const { activeIndex } = storeToRefs(swiperStore)
 </script>
 
 <style scoped lang="scss">
@@ -51,4 +61,14 @@ import Logo from '@/assets/img/banner/logo1.png'
     }
   }
 }
+.font_change {
+  li {
+    a {
+      color: $point_default;
+    }
+  }
+}
+.not_first {
+  background: #fff;
+}
 </style>

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import 'amfe-flexible'
 import '@/assets/reset.css'
 import 'animate.css'
 import './style.scss'

src/store/modules/swiper.js

@@ -5,6 +5,7 @@ export const useSwiperStore = defineStore({
   state: () => {
     return {
       swiper: null,
+      activeIndex: 0,
     }
   },
   // actions
@@ -15,5 +16,8 @@ export const useSwiperStore = defineStore({
     slideTo(index) {
       this.swiper.slideTo(index, 500, false)
     },
+    updateActiveIndex(index) {
+      this.activeIndex = index
+    },
   },
 })

src/style.scss

@@ -8,6 +8,14 @@ body {
   box-sizing: border-box;
 }
 
+@font-face {
+  font-family: 'ZonaPro';
+  src: url(./assets/fonts/ZonaPro-ExtraBold.otf);
+}
+@font-face {
+  font-family: 'SourceHanSans';
+  src: url(./assets/fonts/SourceHanSansCN-Normal.otf);
+}
 /*去除a标签下划线*/
 a {
   text-decoration: none;
@@ -82,7 +90,7 @@ body {
   .swiper-pagination {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
+    align-items: center;
     margin-right: 40px;
     .swiper-pagination-bullet {
       width: 6px;

src/views/Index/components/Cooperation/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="cooperation_container">
+    <div class="empty"></div>
+    <div class="contract_title">
+      <p class="line"></p>
+      <p class="title">合作<span class="blue_font">客户</span></p>
+      <p class="detail">互联网公司 生产制造公司 智能硬件公司</p>
+      <img class="img" :src="Back" alt="back" />
+    </div>
+    <div class="contract">
+      <img class="real_img" :src="Contract" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Back from '@/assets/img/hezuo/biaotiback.png'
+import Contract from '@/assets/img/hezuo/all.png'
+</script>
+
+<style scoped lang="scss">
+.cooperation_container {
+  width: 100%;
+  height: 100%;
+  background: $common_bg;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .empty {
+    min-height: 90px;
+  }
+  .contract_title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-family: 'SourceHanSans';
+    background-size: 100% 100%;
+    padding: 89px;
+    box-sizing: border-box;
+    position: relative;
+    white-space: nowrap;
+    transform-style: preserve-3d;
+    .line {
+      width: 39px;
+      height: 5px;
+      background: #283fe7;
+      border-radius: 3px;
+      margin-bottom: 12px;
+    }
+    .img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%) translateZ(-1px);
+      width: 543px;
+      height: 61px;
+    }
+    .title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #000000;
+      margin-bottom: 21px;
+      .blue_font {
+        color: $theme_color;
+      }
+    }
+    .detail {
+      font-size: 18px;
+      font-weight: 300;
+      color: #646a73;
+    }
+  }
+  .contract {
+    flex: 1;
+    padding: 62px 149px;
+    box-sizing: border-box;
+    display: flex;
+    background: url(../../../../assets/img/hezuo/back.png);
+    background-size: 100% 100%;
+    object-fit: contain;
+    align-items: center;
+    justify-content: center;
+    .real_img {
+      width: auto;
+      height: 400px;
+    }
+  }
+}
+</style>

src/views/Index/components/HeaderSwiper/SlideOne/index.vue

@@ -1,8 +1,16 @@
 <template>
   <div class="slide_one title_slide">
     <div class="main_content">
-      <img :src="Design" alt="Design" class="design_banner" />
-      <img :src="Title" alt="Title" class="title_banner" />
+      <img
+        :src="Design"
+        alt="Design"
+        class="design_banner animate__animated animate__fadeInDown"
+      />
+      <img
+        :src="Title"
+        alt="Title"
+        class="title_banner animate__animated animate__zoomIn"
+      />
       <img :src="Blue" alt="Blue" class="blue" />
     </div>
     <div class="bottom_statement">

src/views/Index/components/HeaderSwiper/SlideThree/index.vue

@@ -1,8 +1,16 @@
 <template>
   <div class="slide_three title_slide">
     <div class="main_content">
-      <img :src="Design" alt="Design" class="design_banner" />
-      <img :src="Title" alt="Title" class="title_banner" />
+      <img
+        :src="Design"
+        alt="Design"
+        class="design_banner animate__animated animate__fadeInDown"
+      />
+      <img
+        :src="Title"
+        alt="Title"
+        class="title_banner animate__animated animate__zoomIn"
+      />
       <img :src="Blue" alt="Blue" class="blue" />
     </div>
     <div class="bottom_statement">

src/views/Index/components/HeaderSwiper/SlideTwo/index.vue

@@ -1,8 +1,16 @@
 <template>
   <div class="slide_two title_slide">
     <div class="main_content">
-      <img :src="Design" alt="Design" class="design_banner" />
-      <img :src="Title" alt="Title" class="title_banner" />
+      <img
+        :src="Design"
+        alt="Design"
+        class="design_banner animate__animated animate__fadeInDown"
+      />
+      <img
+        :src="Title"
+        alt="Title"
+        class="title_banner animate__animated animate__zoomIn"
+      />
       <img :src="Blue" alt="Blue" class="blue" />
     </div>
     <div class="bottom_statement">

src/views/Index/components/HeaderSwiper/index.vue

@@ -5,6 +5,10 @@
       :modules="modules"
       :virtual="true"
       :spaceBetween="0"
+      :autoplay="{
+        delay: 5000,
+        disableOnInteraction: false,
+      }"
       :loop="true"
       @slideChange="onSlideChange"
       :keyboard="{
@@ -45,10 +49,6 @@
   </div>
 </template>
 <script>
-//  :autoplay="{
-//       delay: 5000,
-//       disableOnInteraction: false,
-//     }"
 import { useSwiperStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'

src/views/Index/components/Service/Card/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :class="getClassName()">
+    <div class="alpha">
+      <p class="title">{{ title }}</p>
+      <p class="en">{{ title_en }}</p>
+      <div class="btn">立即探索</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  i: String,
+  title_en: String,
+})
+const getClassName = () => {
+  console.log(props)
+  if (props.i == '1') {
+    return 'card_container bg1'
+  }
+  if (props.i == '2') {
+    return 'card_container bg2'
+  }
+  if (props.i == '3') {
+    return 'card_container bg3'
+  }
+  if (props.i == '4') {
+    return 'card_container bg4'
+  }
+  if (props.i == '5') {
+    return 'card_container bg5'
+  }
+  if (props.i == '6') {
+    return 'card_container bg6'
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.card_container {
+  width: 452px;
+  height: 212px;
+  .alpha {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 18px;
+    font-family: 'SourceHanSans';
+    font-weight: 400;
+    color: #ffffff;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.69);
+    .title {
+      margin-bottom: 14px;
+    }
+    .en {
+      font-size: 18px;
+      font-family: 'ZonaPro';
+      font-weight: normal;
+      color: #ffffff;
+    }
+    .btn {
+      display: none;
+      border: 1px solid #fafafa;
+      border-radius: 14px;
+      padding: 6px 14px;
+      margin-top: 21px;
+      cursor: pointer;
+    }
+  }
+}
+.bg1 {
+  background: url(../../../../../assets/img/tech/gongyesheji1.png);
+}
+.bg2 {
+  background: url(../../../../../assets/img/tech/jiegousheji.png);
+}
+.bg3 {
+  background: url(../../../../../assets/img/tech/ruanjiansheji.png);
+}
+.bg4 {
+  background: url(../../../../../assets/img/tech/yingjiansheji.png);
+}
+.bg5 {
+  background: url(../../../../../assets/img/tech/yangjizhizuo.png);
+}
+.bg6 {
+  background: url(../../../../../assets/img/tech/chanpinliangchan.png);
+}
+
+.alpha:hover {
+  background: #283fe7;
+  opacity: 0.8;
+  .btn {
+    display: block;
+  }
+}
+</style>

src/views/Index/components/Service/index.vue

@@ -1,5 +1,103 @@
-<template>business service</template>
+<template>
+  <div class="service_container">
+    <div class="content">
+      <div class="main">
+        <h1 class="big_title">
+          一站式 <span class="blue_font">产品研发/设计服务</span>
+        </h1>
+        <p class="article">
+          产品梦工厂一家公司全部帮您搞定，减少供应商数<br />量就能防止供应商
+          <span class="blue_font">扯皮/推诿</span>帮您省心省力还能帮<br />
+          您 &nbsp; &nbsp;<span class="blue_font">节省30%</span>&nbsp;
+          &nbsp;的项目投入。
+        </p>
+      </div>
+    </div>
+    <div class="card_wrapper">
+      <Card title="工业设计" title_en="industrial design" i="1" />
+      <Card title="结构设计" title_en="Structural Design" i="2" />
+      <Card title="软件研发" title_en="Software development" i="3" />
+      <Card title="硬件研发" title_en="Hardware R&D" i="4" />
+      <Card title="样机制作" title_en="Prototype production" i="5" />
+      <Card title="产品量产" title_en="volume production" i="6" />
+    </div>
+    <div class="bottom_container">Save 30%</div>
+  </div>
+</template>
 
-<script setup></script>
+<script setup>
+import Card from './Card'
+</script>
 
-<style></style>
+<style scoped lang="scss">
+.service_container {
+  width: 100%;
+  min-width: 1800px;
+  height: 100%;
+  background: $common_bg;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-content: center;
+    position: relative;
+    .main {
+      position: absolute;
+      left: 182px;
+      top: 280px;
+      font-size: 30px;
+      font-weight: bold;
+      color: #000000;
+      font-family: 'SourceHanSans';
+      .big_title {
+        transform-style: preserve-3d;
+      }
+      .big_title::before {
+        content: 'ONE STOP SERVICE';
+        position: absolute;
+        font-size: 34px;
+        font-family: 'ZonaPro';
+        transform: translateZ(-1px);
+        font-weight: 800;
+        color: #f1f1f1;
+        left: 0;
+        top: -20px;
+        white-space: nowrap;
+      }
+      .article {
+        margin-top: 34px;
+        font-size: 20px;
+        font-weight: 300;
+        color: #808080;
+        line-height: 32px;
+      }
+      .blue_font {
+        color: $theme_color;
+      }
+    }
+  }
+  .card_wrapper {
+    position: absolute;
+    bottom: 55px;
+    right: 181px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-row-gap: 17px;
+    grid-column-gap: 19px;
+  }
+  .bottom_container {
+    padding: 79px 177px;
+    background: $theme_color;
+    font-size: 92px;
+    font-family: 'ZonaPro';
+    font-weight: 800;
+    color: #f1f1f1;
+    white-space: nowrap;
+  }
+}
+</style>

src/views/Index/index.vue

@@ -24,7 +24,7 @@
       <Service />
     </swiper-slide>
     <swiper-slide :key="2" :virtualIndex="2">
-      <CaseSummary />
+      <Cooperation />
     </swiper-slide>
     <swiper-slide :key="3" :virtualIndex="3">
       <CasePictureList />
@@ -71,7 +71,7 @@ import SoftHardwareSummary from '@/views/Index/components/SoftHardwareSummary'
 import CorporateCulture from '@/views/Index/components/CorporateCulture'
 import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
 import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
-
+import Cooperation from '@/views/Index/components/Cooperation'
 // Import Swiper styles
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -83,6 +83,7 @@ export default {
     ContactUs,
     VideoPlayer,
     CorporateCulture,
+    Cooperation,
     CaseDetails,
     HeaderSwiper,
     Service,
@@ -99,6 +100,9 @@ export default {
     }
     const onSlideChange = swiper => {
       const { activeIndex } = swiper
+      const swiperStore = useSwiperStore()
+      swiperStore.initSwiper(swiper)
+      swiperStore.updateActiveIndex(activeIndex)
     }
     return {
       onSwiper,

vite.config.js

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
+import autoprefixer from 'autoprefixer'
+import postCssPxToRem from 'postcss-pxtorem'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +13,9 @@ export default defineConfig({
     },
     extensions: ['.js', '.json', '.vue'],
   },
+  server: {
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
   //配置sass
   css: {
@@ -20,5 +25,24 @@ export default defineConfig({
           '@import "./src/assets/scss/globalVar.scss";@import "./src/assets/scss/globalMixin.scss";',
       },
     },
+    postcss: {
+      plugins: [
+        autoprefixer({
+          overrideBrowserslist: [
+            'Android 4.1',
+            'iOS 7.1',
+            'Chrome > 31',
+            'ff > 31',
+            'ie >= 8',
+          ],
+        }),
+        postCssPxToRem({
+          // 自适应，px>rem转换
+          rootValue: 192, // 75表示750设计稿，37.5表示375设计稿
+          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
+          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
+        }),
+      ],
+    },
   },
 })

yarn.lock

@@ -7,116 +7,6 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz"
   integrity sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==
 
-"@esbuild/android-arm64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz#cf91e86df127aa3d141744edafcba0abdc577d23"
-  integrity sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==
-
-"@esbuild/android-arm@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.16.17.tgz#025b6246d3f68b7bbaa97069144fb5fb70f2fff2"
-  integrity sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==
-
-"@esbuild/android-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.16.17.tgz#c820e0fef982f99a85c4b8bfdd582835f04cd96e"
-  integrity sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==
-
-"@esbuild/darwin-arm64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz#edef4487af6b21afabba7be5132c26d22379b220"
-  integrity sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==
-
-"@esbuild/darwin-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz#42829168730071c41ef0d028d8319eea0e2904b4"
-  integrity sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==
-
-"@esbuild/freebsd-arm64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz#1f4af488bfc7e9ced04207034d398e793b570a27"
-  integrity sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==
-
-"@esbuild/freebsd-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz#636306f19e9bc981e06aa1d777302dad8fddaf72"
-  integrity sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==
-
-"@esbuild/linux-arm64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz#a003f7ff237c501e095d4f3a09e58fc7b25a4aca"
-  integrity sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==
-
-"@esbuild/linux-arm@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz#b591e6a59d9c4fe0eeadd4874b157ab78cf5f196"
-  integrity sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==
-
-"@esbuild/linux-ia32@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz#24333a11027ef46a18f57019450a5188918e2a54"
-  integrity sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==
-
-"@esbuild/linux-loong64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz#d5ad459d41ed42bbd4d005256b31882ec52227d8"
-  integrity sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==
-
-"@esbuild/linux-mips64el@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz#4e5967a665c38360b0a8205594377d4dcf9c3726"
-  integrity sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==
-
-"@esbuild/linux-ppc64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz#206443a02eb568f9fdf0b438fbd47d26e735afc8"
-  integrity sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==
-
-"@esbuild/linux-riscv64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz#c351e433d009bf256e798ad048152c8d76da2fc9"
-  integrity sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==
-
-"@esbuild/linux-s390x@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz#661f271e5d59615b84b6801d1c2123ad13d9bd87"
-  integrity sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==
-
-"@esbuild/linux-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz#e4ba18e8b149a89c982351443a377c723762b85f"
-  integrity sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==
-
-"@esbuild/netbsd-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz#7d4f4041e30c5c07dd24ffa295c73f06038ec775"
-  integrity sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==
-
-"@esbuild/openbsd-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz#970fa7f8470681f3e6b1db0cc421a4af8060ec35"
-  integrity sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==
-
-"@esbuild/sunos-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz#abc60e7c4abf8b89fb7a4fe69a1484132238022c"
-  integrity sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==
-
-"@esbuild/win32-arm64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz#7b0ff9e8c3265537a7a7b1fd9a24e7bd39fcd87a"
-  integrity sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==
-
-"@esbuild/win32-ia32@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz#e90fe5267d71a7b7567afdc403dfd198c292eb09"
-  integrity sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==
-
-"@esbuild/win32-x64@0.16.17":
-  version "0.16.17"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz"
-  integrity sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==
-
 "@vitejs/plugin-vue@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz"
@@ -140,7 +30,7 @@
     "@vue/compiler-core" "3.2.47"
     "@vue/shared" "3.2.47"
 
-"@vue/compiler-sfc@3.2.47", "@vue/compiler-sfc@^3.2.45":
+"@vue/compiler-sfc@^3.2.45", "@vue/compiler-sfc@3.2.47":
   version "3.2.47"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz"
   integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
@@ -217,9 +107,14 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+amfe-flexible@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz"
+  integrity sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw==
+
 animate.css@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz"
   integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
 
 anymatch@~3.1.2:
@@ -235,6 +130,18 @@ asynckit@^0.4.0:
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+autoprefixer@^10.4.14:
+  version "10.4.14"
+  resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.14.tgz"
+  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
+  dependencies:
+    browserslist "^4.21.5"
+    caniuse-lite "^1.0.30001464"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 axios@^1.3.4:
   version "1.3.4"
   resolved "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz"
@@ -256,6 +163,21 @@ braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+browserslist@^4.21.5, "browserslist@>= 4.21.0":
+  version "4.21.5"
+  resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.5.tgz"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+  dependencies:
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
+
+caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
+  version "1.0.30001472"
+  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001472.tgz"
+  integrity sha512-xWC/0+hHHQgj3/vrKYY0AAzeIUgr7L9wlELIcAvZdDUHlhL/kNxMdnQLOSOQfP8R51ZzPhmHdyMkI0MMpmxCfg==
+
 "chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
@@ -288,6 +210,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+electron-to-chromium@^1.4.284:
+  version "1.4.342"
+  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.342.tgz"
+  integrity sha512-dTei3VResi5bINDENswBxhL+N0Mw5YnfWyTqO75KGsVldurEkhC9+CelJVAse8jycWyP8pv3VSj4BSyP8wTWJA==
+
 esbuild@^0.16.14:
   version "0.16.17"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz"
@@ -316,6 +243,11 @@ esbuild@^0.16.14:
     "@esbuild/win32-ia32" "0.16.17"
     "@esbuild/win32-x64" "0.16.17"
 
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
 estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
@@ -342,10 +274,10 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -426,11 +358,21 @@ nanoid@^3.3.4:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+node-releases@^2.0.8:
+  version "2.0.10"
+  resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.10.tgz"
+  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
@@ -454,9 +396,19 @@ pinia@^2.0.32:
     "@vue/devtools-api" "^6.5.0"
     vue-demi "*"
 
-postcss@^8.1.10, postcss@^8.4.21:
+postcss-pxtorem@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz"
+  integrity sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==
+
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.0.0, postcss@^8.1.0, postcss@^8.1.10, postcss@^8.4.21:
   version "8.4.21"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.21.tgz"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
   dependencies:
     nanoid "^3.3.4"
@@ -491,7 +443,7 @@ rollup@^3.10.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-sass@^1.58.3:
+sass@*, sass@^1.58.3:
   version "1.58.3"
   resolved "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz"
   integrity sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==
@@ -500,7 +452,7 @@ sass@^1.58.3:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -539,7 +491,15 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-vite@^4.0.4:
+update-browserslist-db@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+vite@^4.0.0, vite@^4.0.4:
   version "4.1.4"
   resolved "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz"
   integrity sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==
@@ -563,7 +523,7 @@ vue-router@^4.0.13:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
-vue@^3.2.45:
+"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.2.45, vue@3.2.47:
   version "3.2.47"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz"
   integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==