From f5aac2d548cb730a88681dafa8b71fd373b6bcab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sun, 25 Aug 2024 03:51:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=8A=B6=E6=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AppFooter.vue       | 41 ++++++++++++++----
 components/AppHeader.vue       |  8 ++--
 components/Banner.vue          |  4 +-
 components/Breadcrumb.vue      |  2 +-
 components/ProductShopInfo.vue | 32 +++++++-------
 pages/index.vue                | 77 ++++++++++++++++++++++++++--------
 pages/product/[name].vue       |  7 ++--
 7 files changed, 120 insertions(+), 51 deletions(-)

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index ab5fe7b..75188a6 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -1,25 +1,26 @@
 <template>
-  <div class="h-[100px]"></div>
+  <div class="sm:h-[100px] h-[50px]"></div>
   <div class="text-center bg-white text-red-7 py-10" style="display: none">
     本网站为小象CMS演示站，提供的电视剧和电影资源均系收集于各大视频网站<br />
     若本站收录的节目无意侵犯了贵司版权,请给我们留言,我们会及时逐步删除和规避程序自动搜索采集到的不提供分享的版权影视。<br />
     本站仅供测试和学习交流。请大家支持正版。
   </div>
   <footer>
-    <div class="w-full bg-gray-900 flex flex-col justify-between">
-      <div class="sub-menu w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2">
+    <div class="w-full flex flex-col sm:bg-black justify-between">
+      <!-- PC版 -->
+      <div class="sub-menu w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2 hidden-sm-and-down">
 
         <!-- 底部菜单 -->
-          <div class="left flex justify-between gap-3xl w-8/12">
+          <div class="left flex flex-col sm:flex-row sm:flex-wrap justify-between gap-3xl sm:w-8/12 flex-wrap w-full">
             <template v-for="item in subMenu">
               <div class="sub-menu-item text-left pr-10">
                 <div class="pb-4">
-                  <text class="text-gray-500 hover:text-gray-400 font-bold text-[16px]">{{ item.title }}</text>
+                  <text class="text-gray-400 hover:text-gray-300 font-bold text-[16px]">{{ item.title }}</text>
                 </div>
                 <template v-if="item.children">
                   <div class="sub-menu-children flex flex-col gap-xs">
                     <template v-for="sub in item.children">
-                      <a :href="sub.path" class="text-gray-500 hover:text-gray-400">{{ sub.title }}</a>
+                      <a :href="sub.path" class="text-gray-400 hover:text-gray-300">{{ sub.title }}</a>
                     </template>
                   </div>
                 </template>
@@ -33,11 +34,29 @@
           </div>
         </div>
 
+      <div class="mx-3 sm:hidden p-5 bg-white rounded-xl">
+        <el-collapse v-model="activeNames" accordion>
+          <template v-for="(item,index) in subMenu">
+            <el-collapse-item :title="item.title" :name="index">
+              <template v-if="item.children">
+                <template v-for="sub in item.children">
+                  <a :href="sub.path" class="block cursor-pointer text-gray-600 hover:text-gray-900">{{ sub.title }}</a>
+                </template>
+              </template>
+            </el-collapse-item>
+          </template>
+        </el-collapse>
+      </div>
+
+      <div class="sm:hidden p-4 mt-3">
+        <el-button type="primary" class="w-full" size="large">联系我们</el-button>
+      </div>
+
       <!-- 版权信息 -->
-      <div class="w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2">
-        <div class="text-gray-500 gap-xl flex">
+      <div class="w-full md:w-3/4 w-full m-auto flex justify-between sm:py-10 pt-6 pb-6 text-center p-2">
+        <div class="text-gray-400 gap-xl flex flex-col sm:flex-row m-auto">
           <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
-          <a class="text-gray-500 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>
+          <a class="text-gray-400 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>
         </div>
       </div>
     </div>
@@ -49,6 +68,7 @@
 // 请求数据
 import {useConfigInfo} from "#imports";
 import {useSubMenu, useWebsite} from "~/composables/configState";
+import Breadcrumb from "~/components/Breadcrumb.vue";
 
 const config = useConfigInfo();
 const website = useWebsite();
@@ -56,6 +76,9 @@ const subMenu = useSubMenu();
 console.log('---------config---------',config.value)
 console.log('---------website---------',website.value)
 console.log('---------subMenu---------',subMenu.value)
+
+const activeNames = ref(['1'])
+
 </script>
 
 <style lang="scss">
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index ec53388..973a96a 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -2,13 +2,13 @@
   <header class="header bg-black fixed z-10 w-full">
     <div class="flex between md:w-3/4 m-auto px-2">
       <div class="header__left flex">
-        <div class="logo mt-1 w-[170px] max-h-[60px] flex items-center" @click="reload">
+        <div class="logo mt-1 w-[170px] max-h-[60px] py-2 flex items-center" @click="reload">
           <nuxt-link v-if="config?.siteLogo" to="/">
             <el-image
               :src="config.siteLogo"
               shape="square"
               fit="fill"
-              class="h-[35px]"
+              class="h-[20px] sm:h-[30px]"
               :alt="config.siteName"
               :title="config.siteName"
             />
@@ -17,7 +17,7 @@
             <text>{{ config?.siteName || '网宿软件' }}</text>
           </nuxt-link>
         </div>
-        <nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down">
+        <nav class="hidden-sm-and-down">
           <el-menu
             :default-active="currentIndex"
             mode="horizontal"
@@ -85,7 +85,7 @@
     </div>
   </header>
 
-  <!--  <div class="header__height__placeholder"></div>-->
+    <div class="header__height__placeholder"></div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/Banner.vue b/components/Banner.vue
index 68a6550..49fac73 100644
--- a/components/Banner.vue
+++ b/components/Banner.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="banner m-auto pt-[60px] relative">
+  <div class="banner m-auto sm:pt-[60px] pt-[47px] relative">
     <template v-if="data">
-      <el-image :src="data.design?.photo || config.subpageBanner"></el-image>
+      <el-image :src="data.design?.photo || config.subpageBanner" class="sm:h-auto"></el-image>
       <div class="banner-bar absolute top-0 w-full mt-[60px]">
         <div class="banner-text py-12 md:w-3/4 m-auto opacity-90 flex flex-col justify-center">
           <div class="keywords my-4 text-5xl">{{ data.design?.name }}</div>
diff --git a/components/Breadcrumb.vue b/components/Breadcrumb.vue
index 701dd1d..919833e 100644
--- a/components/Breadcrumb.vue
+++ b/components/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-breadcrumb v-if="data" class="py-4" :separator-icon="ArrowRight">
+  <el-breadcrumb v-if="data" class="sm:py-4 sm:px-0 px-3 py-2" :separator-icon="ArrowRight">
     <el-breadcrumb-item :to="{ path: '/' }"><el-icon><ElIconHouse /></el-icon></el-breadcrumb-item>
     <el-breadcrumb-item v-if="data.parentName" :to="{ path: data.parentStatus == 0 ? data.parentPath : ''}">{{ data.parentName }}</el-breadcrumb-item>
     <el-breadcrumb-item v-if="data.categoryName" :to="{ path: data.categoryPath }">{{ data.categoryName }}</el-breadcrumb-item>
diff --git a/components/ProductShopInfo.vue b/components/ProductShopInfo.vue
index 4e66680..d0b03a1 100644
--- a/components/ProductShopInfo.vue
+++ b/components/ProductShopInfo.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="bg-white p-3 mt-3 flex items-center justify-between rounded-xl">
-    <div class="left flex gap-xs items-center">
-      <el-avatar shape="square" :src="data?.image" :size="55" />
-      <div class="shop-name flex flex-col">
-        <div class="shop-name cursor-pointer">
-          <div class="flex items-center">
-            <text class="text-xl">{{ data?.merchantName }}</text>
-            <el-tag type="success" size="small" class="ml-2">官网</el-tag>
+  <div class="shopinfo px-3 sm:px-0">
+    <div class="bg-white p-3 mt-3 flex items-center justify-between rounded-xl">
+      <div class="left flex gap-xs items-center">
+        <el-avatar shape="square" :src="data?.image" :size="55" />
+        <div class="shop-name flex flex-col">
+          <div class="shop-name cursor-pointer">
+            <div class="flex items-center">
+              <text class="text-xl">{{ data?.merchantName }}</text>
+              <el-tag type="success" size="small" class="ml-2">官方</el-tag>
+            </div>
           </div>
+          <el-rate
+              v-model="rate"
+              show-score
+              text-color="#ff9900"
+              score-template="{value}">
+          </el-rate>
         </div>
-        <el-rate
-            v-model="rate"
-            show-score
-            text-color="#ff9900"
-            score-template="{value}">
-        </el-rate>
       </div>
+      <el-button>进入店铺</el-button>
     </div>
-    <el-button>进入店铺</el-button>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/pages/index.vue b/pages/index.vue
index af8e907..cac567f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="banner" v-if="banner">
-    <el-carousel :interval="5000" arrow="always" :height="banner?.height ? `${banner?.height}px` : 'px'">
-      <el-carousel-item>
-        <video :autoplay="true" loop="" muted="" id="video" class="video"><source src="https://www.algig.cn/upload/media/2022/07/07/5ebe65d7280e4e0c947f4207646d75c4.mp4" type="video/mp4"></video>
-      </el-carousel-item>
+  <div class="banner sm:pt-[60px] pt-[46px]" v-if="banner">
+    <el-carousel :interval="5000" arrow="always" :height="screenWidth <= 768 ? `170px` : `${screenHeight - 200}px`">
+<!--      <el-carousel-item class="hidden-sm-and-down">-->
+<!--        <video :autoplay="true" loop="" muted="" id="video" class="video"><source src="https://www.algig.cn/upload/media/2022/07/07/5ebe65d7280e4e0c947f4207646d75c4.mp4" type="video/mp4"></video>-->
+<!--      </el-carousel-item>-->
       <el-carousel-item v-for="item in banner.data" :key="item.uid">
         <nuxt-link v-if="item.path" :to="item.path">
           <el-image :src="item.url" style="width: 100%" fit="cover"/>
@@ -80,17 +80,59 @@
         </ul>
       </el-col>
     </el-row>
-    <el-card class="bg-white flex items-center mt-20">
-      <div slot="header">
-        <el-icon>
-          <ElIconLink/>
-        </el-icon>
-        <span>友情链接</span>
-      </div>
-      <div class="flex gap-xl p-2">
-        <a v-for="item in links" :href="item.url" target="_blank">{{ item.name }}</a>
-      </div>
-    </el-card>
+    <div class="flex flex-col gap-2xl">
+      <el-card shadow="hover">
+        <template #header>
+          <div class="flex items-center gap-xs">
+            <el-icon>
+              <ElIconLink/>
+            </el-icon>
+            <span>热门推荐</span>
+          </div>
+        </template>
+        <div class="flex flex-wrap p-2">
+          <div v-for="(item,index) in links" class="flex items-center">
+            <a :href="item.url" target="_blank">{{ item.name }}</a>
+            <el-divider v-if="index + 1 != links.length" direction="vertical" />
+          </div>
+        </div>
+      </el-card>
+
+      <el-card shadow="hover">
+        <template #header>
+          <div class="flex items-center gap-xs">
+            <el-icon>
+              <ElIconLink/>
+            </el-icon>
+            <span>推荐文章</span>
+          </div>
+        </template>
+        <div class="flex flex-wrap p-2">
+          <div v-for="(item,index) in links" class="flex items-center">
+            <a :href="item.url" target="_blank">{{ item.name }}</a>
+            <el-divider v-if="index + 1 != links.length" direction="vertical" />
+          </div>
+        </div>
+      </el-card>
+
+      <el-card shadow="hover">
+        <template #header>
+          <div class="flex items-center gap-xs">
+            <el-icon>
+              <ElIconLink/>
+            </el-icon>
+            <span>友情链接</span>
+          </div>
+        </template>
+        <div class="flex flex-wrap p-2">
+          <div v-for="(item,index) in links" class="flex items-center">
+            <a :href="item.url" target="_blank">{{ item.name }}</a>
+            <el-divider v-if="index + 1 != links.length" direction="vertical" />
+          </div>
+        </div>
+      </el-card>
+    </div>
+
   </div>
 </template>
 
@@ -103,6 +145,8 @@ import {useServerRequest} from "~/composables/useServerRequest";
 const banner = ref<any>();
 const links = ref<any>();
 const movieList = ref<any>();
+const screenWidth = window.innerWidth;
+const screenHeight = window.innerHeight;
 
 // 获取数据
 const reload = async () => {
@@ -114,7 +158,6 @@ const reload = async () => {
   banner.value = slide.value?.data;
   links.value = link.value?.data;
 }
-
 reload();
 </script>
 
diff --git a/pages/product/[name].vue b/pages/product/[name].vue
index 9478041..6011b85 100644
--- a/pages/product/[name].vue
+++ b/pages/product/[name].vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col w-full md:w-3/4 m-auto pt-[70px]">
+  <div class="flex flex-col w-full md:w-3/4 m-auto md:pt-[70px] pt-[60px]">
 
     <Breadcrumb :data="form" />
 
     <ProductShopInfo :data="goods?.merchant" />
 
-    <div class="bg-white p-4 mt-4 flex gap-xl rounded-xl">
+    <div class="bg-white p-4 mt-4 flex gap-xl rounded-xl" v-if="goods">
       <div class="goods-image flex gap-xl">
         <div class="gap-xs flex flex-col">
           <el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" />
@@ -14,7 +14,7 @@
       </div>
       <div class="goods-info flex flex-col gap-xs">
         <div class="goods-name text-2xl">{{ goods.goodsName }}</div>
-        <div class="goods-price text-2xl red">￥{{ goods.salePrice * goods.num }}</div>
+        <div class="goods-price text-2xl red">￥{{ goods?.salePrice * goods?.num }}</div>
         <div class="text-green-7">购买得积分</div>
         <div class="text-gray-4">配送：无需配送</div>
         <div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
@@ -104,6 +104,7 @@ if(nav.value?.data){
 // TODO 获取商品详情
 const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + productName)
 goods.value = info.value?.data;
+goods.value.num = 1;
 
 
 const handleClick = (tab, event) => {