init 初始化网站头部和轮播图

.env

@@ -1,9 +1,9 @@
 # 后台接口地址(仅开发/预览环境生效)
-NUXT_PROXY_API=http://localhost/site/site_api/public/api.php/
+NUXT_PROXY_API=http://localhost/Aerwen/aerwen_u/aerwen_u_api/public/api.php/
 # NUXT_PROXY_API=http://lbie.dev.org/api.php/
 
 # 后台图片地址(仅开发/预览环境生效)
-NUXT_PROXY_UPLOADS=http://localhost/site/site_api/public/uploads/
+NUXT_PROXY_UPLOADS=http://localhost/Aerwen/aerwen_u/aerwen_u_api/public/uploads/
 # NUXT_PROXY_UPLOADS=http://lbie.dev.org/uploads/
 
 # 后台接口地址

assets/css/Carousel/index.scss

@@ -3,7 +3,7 @@
 }
 
 .Carousel-container{
-  margin-top: 85px;
+  margin-top: 135px;
   .carousel-box{
     .carousel-items{
       color: var(--swipercolor);

assets/css/Carousel/media.scss

@@ -7,10 +7,15 @@
 
 @media screen and (max-width: 480px) {
   .Carousel-container{
+    margin-top: 105px !important;
     height: 40vw!important;
   }
   .carousel-items{
-    height: 40vw!important;
+    height: 55vw!important;
+  }
+
+  .swiper-slide img {
+    width: 95vw !important;
   }
 }
 /*880px*/

assets/css/Header/icon.scss

@@ -3,7 +3,7 @@
   .HeaderIcon-container {
     height: 100%;
     width: 100%;
-    max-width: 280px;
+    max-width: 75px;
     margin-top: 0;
     display: flex;
     justify-content: center;

assets/css/Header/index.scss

@@ -1,52 +1,63 @@
-
 [v-cloak] {
   display: none !important;
 }
-.search-show{
+
-  height: 70px!important;
+.search-show {
-}
+  height: 85px !important;
-.search-input-show{
-  height: 38px!important;
-  border:1px solid #ccc!important;
 }
 
-.dNone{
+.search-input-show {
-  display: none!important;
+  height: 38px !important;
+  border: 1px solid #ccc !important;
 }
-.search-have{
+
-  border-bottom: 0!important;
+.dNone {
+  display: none !important;
+}
+
+.search-have {
+  border-bottom: 0 !important;
   border-radius: 20px 20px 0 0 !important;
 }
-.search-btn{
+
+.search-btn {
   position: relative;
-    top: 26px;
+  top: 27px;
-  right: -10px;
+  right: 1px;
   cursor: pointer;
-       color: #757575;
+  color: #fff;
-     outline:none;
+  background-color: #3F3F3F;
+  outline: none;
   text-decoration: none;
+  padding: 11px 30px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
+
 //Header.scss
-.Header{
+.Header {
   width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
+  // align-items: center;
   flex-direction: column;
   position: fixed;
   top: 0;
-  z-index: 99999;
+  z-index: 999;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 250);
+  transition: all .3s ease 0s;
+  box-shadow: 1px 1px 20px 0px #e7e7e7;
 
   // background: rgba($color: #000000, $alpha: .2);
-  .Header-container{
+  .Header-container {
     display: flex;
-    justify-content: space-evenly;
+    // justify-content: space-evenly;
     align-items: center;
-    height:var(--headerheight);
+    height: var(--headerheight);
     font-size: 14px;
   }
-  .search-box{
+
+  .search-box {
     height: 0;
     width: 100%;
     transition: 0.4s;
@@ -56,30 +67,33 @@
     left: 0;
     text-align: center;
     overflow: hidden;
-    .search-hide-box{
+
+    .search-hide-box {
       width: 70%;
-      background: rgb(250, 250, 250)!important;
+      background: rgb(250, 250, 250) !important;
       margin: 0 auto;
       display: block;
       overflow: auto;
-      border-radius:   0 0  20px 20px ;
+      border-radius: 0 0 20px 20px;
       text-align: left;
       max-height: 500px;
-      .search-hide-items{
+
+      .search-hide-items {
         padding: 15px 21px;
         cursor: pointer;
         transition: 0.4s;
         color: #757575;
         font-weight: 550;
-        &:hover{
+
+        &:hover {
           background: rgb(230, 230, 230);
         }
       }
     }
-    .search-box-input{
+
-      background:none;
+    .search-box-input {
-      outline:none;
+      background: none;
-      border-radius: 20px;
+      outline: none;
       width: 50%;
       padding: 0 20px;
       height: 0;
@@ -88,7 +102,9 @@
       color: #757575;
       font-weight: 550;
       border: none;
-      background: rgb(250, 250, 250)!important;
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+      // background: rgb(250, 250, 250)!important;
 
       //&:focus{
       //  width: 70%;
@@ -97,7 +113,7 @@
   }
 }
 
-.phone-box{
+.phone-box {
   display: none;
   height: 50px;
 }

assets/css/Header/media.scss

@@ -10,7 +10,12 @@
   .HeaderIcon-box{
   }
 
+  .HeaderIcon{
+    padding-left: 0 !important;
+  }
+
   .HeaderSearch-Icon {
+    margin-left: 3vw !important;
     display:block !important;
   }
 }
@@ -32,6 +37,8 @@
   //}
 
   .HeaderSearch {
+    position: absolute;
+    right: 20px !important;
     display: flex !important;
   }
 

assets/css/Header/nav.scss

@@ -9,11 +9,19 @@ a {
   display: none !important;
 }
 
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+  background-color: #ffffff !important;
+}
+
+
 //HeaderNav.scss
 .HeaderNav {
+  height: 100%;
 
   //margin-right: 10%;
   .HeaderNav-container {
+    height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -30,8 +38,15 @@ a {
       // padding: 60px 30px !important;
     }
 
+
+    .HeaderNav-box {
+      height: 100%;
+      border: none;
+    }
+
+
     .HeaderNav-navItems {
-      padding: 0 25px;
+      padding: 0 35px;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -42,22 +57,30 @@ a {
       color: black;
       position: relative;
       transition: 0.4s;
+
+      &:hover,
+      :focus {
+        background-color: #ffffff !important;
+      }
+
       &::before {
         content: '';
         width: 0;
         height: 3px;
         background: var(--rootColor);
         position: absolute;
-         bottom: -10px;
+        bottom: -28px;
         text-align: center;
         margin: 15px 0 auto;
         transition: 0.3s;
       }
-      &:hover{
+
+      &:hover {
         &::before {
-          width: 70%;
+          width: 100%;
         }
       }
+
       .HeaderNav-navItems-child-box {
         background: #ffffff;
         position: absolute;
@@ -66,14 +89,15 @@ a {
         border-radius: 5px;
         z-index: 9999999999999999;
         min-width: 190px;
+
         .HeaderNav-navItems-child-items {
           padding: 10px 40px;
           word-break: keep-all;
 
           &:hover {
-
             a {
-              color: var(--rootColor) !important;
+              transition: .2s;
+              color: #ade8dd !important;
             }
           }
         }

assets/css/Header/search.scss

@@ -3,8 +3,10 @@
 }
 
 a {
-  text-decoration: none; /* 去除默认的下划线 */
+  text-decoration: none;
-  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
+  /* 去除默认的下划线 */
+  outline: none;
+  /* 去除旧版浏览器的点击后的外虚线框 */
 
 }
 
@@ -41,7 +43,7 @@ a {
       }
 
       .app-nav-second-items {
-        div{
+        div {
           padding: 5px 0 5px 20px;
           cursor: pointer;
           margin-top: 30px;
@@ -54,6 +56,7 @@ a {
 
 //HeaderSearch.scss
 .HeaderSearch {
+
   // margin-right: 14%;
   .HeaderSearch-container {
     .HeaderSearch-box {
@@ -62,7 +65,9 @@ a {
       align-items: center;
 
       .HeaderSearch-Icon {
+        margin-left: 1vw;
         cursor: pointer;
+        outline: none;
       }
 
       .HeaderSearch-button {

assets/css/root/root.scss

@@ -1,6 +1,6 @@
 :root {
-  --rootColor: #b01e28;
+  --rootColor: black;
-  --headerheight:105px
+  --headerheight: 80px
 }
 
 // body {
@@ -8,7 +8,8 @@
 //   font-family: Inter;
 // }
 
-html,body{
+html,
+body {
   padding: 0;
   margin: 0;
   font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif;
@@ -18,13 +19,22 @@ textarea {
   -webkit-appearance: none;
 }
 
-input, button, textarea, checkbox, select, radio, form {
+input,
+button,
+textarea,
+checkbox,
+select,
+radio,
+form {
   vertical-align: top;
 }
 
 .font {
   font-weight: bold;
-  text-transform: uppercase
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .dNone {
@@ -114,7 +124,7 @@ input, button, textarea, checkbox, select, radio, form {
   color: var(--rootColor)
 }
 
-.ible-btn:link, .ible-btn:visited {
+.ible-btn:link,
+.ible-btn:visited {
   text-decoration: none;
 }
-

components/Carousel/index.vue

@@ -9,9 +9,9 @@
       loop：循环
       swiperStyle：自定义样式
      -->
-    <div style="padding-top: 20px;">
+    <div>
 
-      <swiper id="swiper" ref="swi perRef" :initialSlide="0" :modules="modules" :navigation="{ clickable: true }"
+      <swiper id="swiper" ref="swi perRef" :initialSlide="0" :modules="modules" 
         :pagination="{ clickable: true }" :autoplay="{ delay: 10000 }" :loop="true" :style="swiperStyle"
         class="carousel-box">{{ banner_list }}
         <swiper-slide v-for="item in banner_list">
@@ -59,7 +59,6 @@ const params = reactive({
 const getBannerListFun = async () => {
   useFetch('/api/banner/getBanner', { params: { banner_location: 1, locale: locale.value } }).then(res => {
     banner_list.value = JSON.parse(res.data.value).data
-    console.log(banner_list.value, '@@@@banner_list');
   })
     .catch((err) => {
       banner_list.value = [{
@@ -75,19 +74,17 @@ setTimeout(() => {
     await getBannerListFun()
   })()
 })
-// 获取海报
-
 
 
 /**整体轮播图样式*/
 let styleContainer = reactive({
-  height: '33vw',
+  height: '20vw',
 })
 const modules = ref([Pagination, Navigation, Autoplay])
 const swiperStyle = conversionStyleVal(reactive({
   /**轮播图样式*/
   color: '',          //设置字体颜色
-  height: '33vw',                        //设置高度
+  height: '20vw',                        //设置高度
   width: '100%',                       //设置高度
   margin: '0',             //设置margin 按照上 右 下 左 或 上下 左右 设置
   padding: '0',                 //设置padding 按照上 右 下 左 或 上下 左右 设置
@@ -126,7 +123,7 @@ const swiperStyle = conversionStyleVal(reactive({
     width: '8px',                       //设置高度
     margin: '0 10px',             //设置margin 按照上 右 下 左 或 上下 左右 设置
     padding: '0',                 //设置padding 按照上 右 下 左 或 上下 左右 设置
-    background: '#a72027'           //设置背景颜色
+    background: '#fff'           //设置背景颜色
   }
 }), 'swiper')
 

components/Header/HeaderNav.vue

@@ -2,27 +2,62 @@
   <div class="HeaderNav" :style="[props.HeaderNav]">
     <div class="HeaderNav-container">
 
+      <!-- <el-menu class="HeaderNav-box" mode="horizontal" @select="handleSelect" :ellipsis="false"
+        active-text-color="black" active-color="black" text-color="black" :popper-offset="-16">
+        <el-menu-item v-for="(item, index) in props.navList" :key="item.name" :index="item.name"
+          class="HeaderNav-navItems">
+          <nuxt-link v-if="item.children.length === 0" :to="getHref(item.href)" class="font">{{ item.name }}</nuxt-link>
+        </el-menu-item>
+        <el-sub-menu v-for="(item, index) in props.navList" :key="item.name" :index="item.name">
+          <template #title>
+            <div class="HeaderNav-navItems">{{ item.name }}</div>
+          </template>
+          <el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name"
+            class="HeaderNav-navItems">
+            {{ _item.name }}
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu> -->
+
+
+
       <nuxt-link :to="getHerf(item.href)"
         :class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
         v-for="item in props.navList" v-cloak :key="item.name">
         <span v-if="item.children.length === 0" class="font">{{ item.name }}</span>
-        <span v-else @mouseenter.self="enterNavEnter" class="font">{{ item.name }}</span>
+        <span v-else @mouseenter.self="enterNavEnter" class="font" >{{ item.name }}</span>
         <div class="HeaderNav-navItems-child-box dNone" @mouseleave.capture="enterNavLeave"
           v-if="item.children.length >= 1">
-          <div v-for="_item in item.children" class="HeaderNav-navItems-child-items ">
+          <div v-for="_item in item.children" class="HeaderNav-navItems-child-items">
-            <nuxt-link :to="getHerf(_item['href'])" class="font f1" @mouseenter="enterNavEnter">
+            <nuxt-link :to="getHerf(_item['href'])" class="font">
               {{ _item.name }}
+              <!-- <div v-if="_item.children">
+                <div v-if="_item.children.length >= 1" @mouseenter="enterNavEnter">&nbsp;&nbsp;></div>
+
+                <div class="HeaderNav-navItems-child-box dNone" style="margin-left: 210px;margin-top: 20px;"@mouseleave.capture="enterNavLeave">
+                  <nuxt-link :to="getHerf(_item['href'])" class="font " @mouseenter="enterNavEnter">
+                    {{ _item.name }}
+                    <div v-if="_item.children">
+                      <div v-if="_item.children.length >= 1">&nbsp;&nbsp;></div>
+                    </div>
+                  </nuxt-link>
+                </div>
+              </div> -->
             </nuxt-link>
           </div>
-
         </div>
-
       </nuxt-link>
     </div>
   </div>
 </template>
 
 <script setup>
+
+const activeIndex = ref('1')
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+
 const props = defineProps({
   HeaderNav: Object,
   navList: Array
@@ -36,17 +71,18 @@ const enterNavEnter = e => {
   let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
   ele &&
     ele.classList.remove('dNone')
-  clearInterval(navTimer)
+  // clearInterval(navTimer)
-  navTimer = setTimeout(() => {
+  // navTimer = setTimeout(() => {
-    ele &&
+  //   ele &&
-      ele.classList.add('dNone')
+  //     ele.classList.add('dNone')
-  }, 1000)
+  // }, 1000)
 }
 const enterNavLeave = e => {
   let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
   ele &&
     ele.classList.add('dNone')
 }
+
 </script>
 
 <style scoped src="~/assets/css/Header/nav.scss" lang="scss"></style>

components/Header/HeaderSearch.vue

@@ -1,8 +1,21 @@
 <template>
-<div class="HeaderSearch"  :style="[props.HeaderSearch]">
+  <div class="HeaderSearch" :style="[props.HeaderSearch]">
     <div class="HeaderSearch-container">
       <div class="HeaderSearch-box">
         <img src="/img/icon/searchIcon.png" @click="showSearchBox" class="HeaderSearch-Icon" alt="">
+        <div>
+          <el-dropdown>
+            <el-avatar class="HeaderSearch-Icon" :size="45"
+              src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item>退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+
         <div class="HeaderSearch-button" @click="toggleAppNavShow">
           <div></div>
           <div></div>
@@ -10,50 +23,53 @@
         </div>
       </div>
     </div>
-  <div class="app-nav animate__animated animate__fadeIn" v-show="appNavShow"  :style="props.appNav" @click="closeAppNavShow($event)">
+    <div class="app-nav animate__animated animate__fadeIn" v-show="appNavShow" :style="props.appNav"
+      @click="closeAppNavShow($event)">
       <div class="app-box" @click="closeAppNavShow($event)">
-      <nuxt-link :to="getHerf(item.href)" class="app-nav-items" v-for="item in props.navList" :key="item.name" @click="appNavItemEvent(item,$event.target)">
+        <nuxt-link :to="getHerf(item.href)" class="app-nav-items" v-for="item in props.navList" :key="item.name"
-        <div  @click="appNavItemEvent(item,$event.target.parentElement)" >{{item.name}}</div>
+          @click="appNavItemEvent(item, $event.target)">
-        <nuxt-link :to="getHerf(_item['href'])" class="app-nav-second-items animate__animated animate__fadeIn dNone" v-for="_item in item.children" :key="_item.name" >
+          <div @click="appNavItemEvent(item, $event.target.parentElement)">{{ item.name }}</div>
-          <div >{{_item.name}}</div>
+          <nuxt-link :to="getHerf(_item['href'])" class="app-nav-second-items animate__animated animate__fadeIn dNone"
+            v-for="_item in item.children" :key="_item.name">
+            <div>{{ _item.name }}</div>
           </nuxt-link>
         </nuxt-link>
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script setup>
 const appNavShow = ref(false)
 const log = console.log
 const props = defineProps({
-  HeaderSearch:Object,
+  HeaderSearch: Object,
-  appNav:Object,
+  appNav: Object,
-  navList:Array
+  navList: Array
 })
 
 const emit = defineEmits(['showSearchBox'])
-const appNavItemEvent = function  (item,e){
+const appNavItemEvent = function (item, e) {
-  if(item.children.length!==0){
+  if (item.children.length !== 0) {
     let tag = e
     tag.classList.toggle('active');
-    [...tag.children].filter(item=>item.nodeName==='A').map(item=>{
+    [...tag.children].filter(item => item.nodeName === 'A').map(item => {
       item.classList.toggle('dNone')
     })
   }
 }
 
-const toggleAppNavShow = function (){
+const toggleAppNavShow = function () {
   appNavShow.value = !appNavShow.value
 }
-const closeAppNavShow = function (e){
+const closeAppNavShow = function (e) {
   let tag = e.target
-  if(tag.className === 'app-nav animate__animated animate__fadeIn' || tag.className==='app-box'){
+  if (tag.className === 'app-nav animate__animated animate__fadeIn' || tag.className === 'app-box') {
     appNavShow.value = false
     document.body.style.overflowY = 'auto'
   }
 }
-const showSearchBox = function (){
+const showSearchBox = function () {
   emit('showSearchBox')
 }
 

components/Header/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="Header ">
     <div class="Header-container" :style="[HeaderStyleOption]">
+
       <HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
       <HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
       <HeaderSearch v-if="_lazy_with_fix_" :HeaderSearch="HeaderStyleOption.HeaderSearch"
@@ -8,7 +9,7 @@
     </div>
     <div class="search-box " @mouseleave="showSearchHideBox([])">
       <!-- @input="searchEvent" -->
-      <input type="text" class="search-box-input " v-model='inputval'  @keydown="keyDownEvent">
+      <input type="text" class="search-box-input " v-model='inputval' @keydown="keyDownEvent" placeholder="请输入关键字回车">
       <nuxt-link @click="showSearchBox()" class="search-btn" :to="url + $('search-box-input')[0].value">搜索</nuxt-link>
       <div class="search-hide-box ">
         <div class="search-hide-items" v-for="item in searchRes">
@@ -39,14 +40,16 @@ const HeaderStyleOption = reactive({
 
   /**导航样式*/
   HeaderNav: {
-    'padding-left': '25vw'
+    'padding-left': '2vw'
   },
   /**icon样式*/
-  HeaderIcon: {},
+  HeaderIcon: {
+    'padding-left': '20vw'
+  },
   /**搜索样式*/
   HeaderSearch: {
     position: ' absolute',
-    right: '20px',
+    right: '240px',
   },
   /**手机菜单栏样式*/
   appNav: {
@@ -69,19 +72,25 @@ let navList = ref([
     alias: 'home'
   },
   {
-    name: t('common.header.products'),
+    name: "Unity工程",
     // href: '/product/product_list/0-1',
     children: [],
     alias: 'products'
   },
   {
-    name: t('common.header.about'),
+    name: "模型",
     children: [],
     href: '/about',
     alias: 'about'
   },
   {
-    name: t('common.header.news'),
+    name: "动画",
+    children: [],
+    href: '/about',
+    alias: 'about'
+  },
+  {
+    name: "软件下载",
     children: [],
     href: '/news/1-1',
     alias: 'news'
@@ -154,11 +163,29 @@ useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }
   let data = JSON.parse(res.data.value).data || []
   res = []
   for (let item of data) {
+    if (item.children == 0) {
       let obj = {}
       obj.name = item.product_type_name
       obj.href = '/product/product_list/' + item['product_type_id'] + '-1'
+      obj.children = []
       res.push(obj)
     }
+    else {
+      let obj = {}
+      obj.name = item.product_type_name
+      obj.href = '/product/product_list/' + item['product_type_id'] + '-1'
+      let childrens = [];
+      for (let _item of item.children) {
+        let child = {}
+        child.name = _item.product_type_name
+        child.href = '/product/product_list/' + _item['product_type_id'] + '-1'
+        childrens.push(child)
+      }
+      obj.children = childrens
+      res.push(obj)
+    }
+  }
+  console.log(res, "数据");
   /**新增全系列跳转**/
   res.unshift({
     href: '/product/product_list/0-1',

components/InfiniteRotation/index.scss

@@ -6,9 +6,10 @@
     transition-timing-function: linear !important;
   }
 }
-.isOpenMargin{
+
-  .swiper-slide{
+.isOpenMargin {
-    width: fit-content!important;
+  .swiper-slide {
+    width: fit-content !important;
   }
 }
 
@@ -45,7 +46,15 @@
   }
 }
 
-.swiper-slide{
+.swiper-slide {
   display: flex;
   justify-content: center;
 }
+
+.swiper-slide img {
+  width: 60vw !important;
+  border-radius: 15px;
+  overflow: hidden;
+  object-fit: cover !important;
+  cursor: pointer;
+}

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "site_nuxt",
+  "name": "aerwen_u_nuxt",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

pages/index.vue

@@ -11,6 +11,8 @@
 
   <div class="Home-main">
     <div class="main">
+
+      <!-- 公司简介 -->
       <section>
         <div class="acard">
           <div class="container">
@@ -261,7 +263,6 @@
     </div>
 
   </div>
-  <PopupSidebar></PopupSidebar>
   <PopupMessageUs></PopupMessageUs>
   <Final></Final>
 </template>