From 5fd15d69fff73181c7ce3e5ba10871fdce0bc77a Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Wed, 13 Mar 2024 12:43:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=89=8B=E6=9C=BA=E7=89=88?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Banner/index.vue | 212 +++++++++++++++++++-------------
 src/components/Header/index.vue |  29 +++--
 src/views/index/index.vue       |  18 ++-
 3 files changed, 164 insertions(+), 95 deletions(-)

diff --git a/src/components/Banner/index.vue b/src/components/Banner/index.vue
index 4f3e06e..247e3a2 100644
--- a/src/components/Banner/index.vue
+++ b/src/components/Banner/index.vue
@@ -1,42 +1,66 @@
 <template>
-  <a-carousel :after-change="onChange" arrows autoplay :dots="false">
-    <template #prevArrow>
-      <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
-        <LeftCircleOutlined />
-      </div>
-    </template>
-    <template #nextArrow>
-      <div class="custom-slick-arrow" style="right: 10px">
-        <RightCircleOutlined />
-      </div>
-    </template>
-    <template v-if="form.images">
-      <template v-for="(item,index) in JSON.parse(form.images)" :key="index">
-        <div class="ad-item">
-          <a-image :preview="false" :src="item.url" width="100vw" />
-<!--          <a-space class="ad-text" :size="10" direction="vertical">-->
-<!--            <div class="title">{{ form.name }}</div>-->
-<!--            <div class="desc">{{ form.comments }}</div>-->
-<!--            <div class="btn"><a-button size="large" style="padding: 0 30px" @click="openNew(`${form.path}`)">了解更多</a-button></div>-->
-<!--          </a-space>-->
-        </div>
+  <div
+      class="banner"
+      :class="screenWidth > 567 ? 'hidden-sm-and-down' : 'hidden-sm-and-up'"
+      :style="bodyStyle"
+  >
+    <a-carousel
+        :after-change="onChange"
+        arrows
+        autoplay
+        :dots="false"
+        :dotsClass="dotsClass"
+    >
+<!--      <template #prevArrow>-->
+<!--        <div class="custom-slick-arrow" style="left: 20px; z-index: 1">-->
+<!--          <LeftCircleOutlined />-->
+<!--        </div>-->
+<!--      </template>-->
+<!--      <template #nextArrow>-->
+<!--        <div class="custom-slick-arrow" style="right: 40px">-->
+<!--          <RightCircleOutlined />-->
+<!--        </div>-->
+<!--      </template>-->
+      <template v-if="form.images">
+        <template v-for="(item, index) in JSON.parse(form.images)" :key="index">
+          <div class="ad-item">
+            <a-image :preview="false" :src="item.url" width="100vw" />
+            <a-space class="ad-text" :size="10" direction="vertical">
+              <div class="title">{{ form.name }}</div>
+              <div class="desc">{{ form.comments }}</div>
+              <div class="btn"
+              ><a-button
+                  size="large"
+                  style="padding: 0 30px"
+                  @click="openNew(`${form.path}`)"
+              >了解更多</a-button
+              ></div
+              >
+            </a-space>
+          </div>
+        </template>
       </template>
-    </template>
-  </a-carousel>
+    </a-carousel>
+  </div>
 </template>
 <script setup lang="ts">
-import {getAd} from "@/api/cms/ad";
-import useFormData from "@/utils/use-form-data";
-import {Ad} from "@/api/cms/ad/model";
-import {ref} from "vue";
-import {openNew} from "@/utils/common";
-import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
-
+import { getAd } from '@/api/cms/ad';
+import useFormData from '@/utils/use-form-data';
+import { Ad } from '@/api/cms/ad/model';
+import { ref } from 'vue';
+import { openNew } from '@/utils/common';
+import {
+  LeftCircleOutlined,
+  RightCircleOutlined
+} from '@ant-design/icons-vue';
+import { useThemeStore } from '@/store/modules/theme';
+import { storeToRefs } from 'pinia';
+const themeStore = useThemeStore();
+const { screenWidth } = storeToRefs(themeStore);
 const visible = ref<boolean>(false);
-const ads = ref<Ad[]>([]);
 
 // 表单数据
-const { form,assignFields } = useFormData<Ad>({
+const { form, assignFields } = useFormData<Ad>({
   adId: undefined,
   name: '',
   adType: '图片广告',
@@ -49,71 +73,91 @@ const { form,assignFields } = useFormData<Ad>({
   comments: '',
   sortNumber: 100
 });
+
+// 幻灯片样式
+const bodyStyle = {
+  width: '100%'
+};
+
+const dotsClass = 'dots';
+
 const onChange = () => {
-  visible.value = !visible.value
-}
+  visible.value = !visible.value;
+};
 
 const reload = () => {
-  getAd(254).then(data => {
-    assignFields(data)
-  })
-}
+  getAd(254).then((data) => {
+    assignFields(data);
+  });
+};
 
 reload();
 </script>
 <style scoped lang="less">
-:deep(.slick-slide) {
-  height: 420px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-:deep(.slick-arrow.custom-slick-arrow) {
-  width: 38px;
-  height: 38px;
-  font-size: 38px;
-  color: #fff;
-  background-color: rgba(31, 45, 61, 0.11);
-  transition: ease all 0.3s;
-  opacity: 0.3;
-  z-index: 1;
-  top: 180px;
-}
-:deep(.slick-arrow.custom-slick-arrow:before) {
-  display: none;
+.hidden-sm-and-down {
+  :deep(.slick-slide) {
+    overflow: hidden;
+  }
+  :deep(.slick-arrow.custom-slick-arrow) {
+    font-size: 38px;
+  }
 }
-:deep(.slick-arrow.custom-slick-arrow:hover) {
-  color: #fff;
-  opacity: 0.5;
+.hidden-sm-and-up {
+  :deep(.slick-arrow.custom-slick-arrow) {
+    top: 50px;
+    font-size: 24px;
+  }
 }
+.banner {
+  :deep(.slick-arrow.custom-slick-arrow) {
+    color: #fff;
+    background-color: rgba(31, 45, 61, 0.11);
+    transition: ease all 0.3s;
+    opacity: 0.3;
+    z-index: 1;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:before) {
+    display: none;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:hover) {
+    color: #fff;
+    opacity: 0.5;
+  }
 
-:deep(.slick-slide h3) {
-  color: #fff;
-}
+  :deep(.slick-slide h3) {
+    color: #fff;
+  }
 
-.ad-item{
-  position: relative;
-}
-.ad-text{
-  top: 100px;
-  left: 0;
-  position: absolute;
-  width: 1100px;
-  margin: 0 20vw;
-  z-index: 999;
-  .title{
-    font-size: 50px;
-    text-align: center;
-    color: #ffffff;
-    font-weight: bold;
+  .ad-item {
+    position: relative;
   }
-  .desc{
-    color: #ffffff;
-    text-align: center;
+  .ad-text {
+    display: none;
+    top: 100px;
+    left: 0;
+    position: absolute;
+    width: 1100px;
+    margin: 0 20vw;
+    z-index: 999;
+    .title {
+      font-size: 50px;
+      text-align: center;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .desc {
+      color: #ffffff;
+      text-align: center;
+    }
+    .btn {
+      text-align: center;
+      margin-top: 30px;
+    }
   }
-  .btn{
-    text-align: center;
-    margin-top: 30px;
+  .slick-dots {
+    background-color: #ff0000;
+    font-size: 800px;
+    width: 1000px;
   }
 }
 </style>
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 0402d1c..6ea5b52 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="header" v-if="siteInfo">
+  <div class="header" v-if="siteInfo"
+       :class="screenWidth > 567 ? 'hidden-sm-and-down' : 'hidden-sm-and-up'"
+       :style="{position: screenWidth > 567 ? 'relative' : '' }"
+  >
     <div class="logo-bar" style="display: none;">
       <div class="logo">
         <a-image :preview="false" :src="siteInfo.websiteLogo" :width="500" />
@@ -36,12 +39,15 @@
           </template>
         </div>
       </div>
-      <div v-else>
-        <PicRightOutlined class="menu-icon" @click="openDrawer" />
+      <div class="menu-icon" v-else>
+        <PicRightOutlined @click="openDrawer" />
         <a-drawer
             v-model:visible="visible"
+            :width="220"
             class="custom-class"
-            :placement="`left`"
+            :placement="`right`"
+            :closable="false"
+            :bodyStyle="{ padding: '0' }"
         >
           <div class="sub-menu">
             <template v-for="(item,index) in menus" :key="index">
@@ -99,11 +105,16 @@ const onMove = () => {
 
 </script>
 <style scoped lang="less">
+.hidden-sm-and-up {
+  width: 100%;
+  .tel {
+    display: none;
+  }
+}
 .header{
-  position: relative;
   .menu{
     position: absolute;
-    bottom: 0;
+    bottom: 6px;
     width: 100%;
     height: 50px;
     background: url("https://file.wsdns.cn/20240302/ee0c7d3632c94f2ab31173f82a37874a.png");
@@ -130,13 +141,17 @@ const onMove = () => {
   }
 }
 .menu-icon{
-  position: absolute; left: 20px; top: 20px;
+  position: absolute;
+  right: 20px;
+  top: 30px;
+  z-index: 999;
   color: #ffffff;
   font-size: 22px;
 }
 .sub-menu{
   display: flex;
   flex-direction: column;
+  padding-left: 20px;
   .item{
     display: block;
     height: 40px;
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 78c5d21..ad8dd73 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -173,17 +173,16 @@
             <p class="ele-text-secondary"><span style="padding-right: 20px">Please send the full paper(word+pdf) to Submission System :</span><a-button type="primary" danger style="border-radius: 20px; background: linear-gradient(to right, #E10000, rgba(225,0,0,0.4)); border: none">Submission System</a-button></p>
           </div>
         </a-card>
-        <a-card :bordered="false" hoverable :head-style="{ backgroundColor: '#e0f0fd', color: '#0096FF', fontSize: '24px'}" :body-style="{backgroundColor: '#f4fafe'}" :style="{ boxShadow: '2px 0px 10px #ccc', marginBottom: '20px'}">
+        <a-card :bordered="false" hoverable :head-style="{ backgroundColor: '#e0f0fd', color: '#0096FF', fontSize: '24px'}" :body-style="{backgroundColor: '#f4fafe', padding: screenWidth > 567 ? '24px' : '16px 8px'}" :style="{ boxShadow: '2px 0px 10px #ccc', marginBottom: '20px'}">
           <template #title>
             <div class="flex" style="display: flex">
               <div class="title">-HOSTED BY-</div>
               <div class="title" style="margin-left: 280px">-Technical Sponsor-</div>
             </div>
           </template>
-
-          <div class="ele-cell" v-if="siteInfo">
+          <div  class="ele-cell" :class="screenWidth > 567 ? 'hidden-sm-and-down' : 'hidden-sm-and-up'" v-if="siteInfo">
             <div class="ele-cell-content" v-for="(item,index) in siteInfo.links" :key="index">
-              <a-image :src="item.icon" :width="160" :preview="false"></a-image>
+              <a-image :src="item.icon" :width="screenWidth > 567 ? 160 : 52" :preview="false"></a-image>
             </div>
           </div>
           <!--          <a-image src="https://oss.wsdns.cn/20240303/bfe52a6864d44535beb6bf9ca6dbb263.jpg" :preview="false" />-->
@@ -199,6 +198,12 @@
   import {storeToRefs} from "pinia";
   import {useTenantStore} from "@/store/modules/tenant";
 
+  import {useThemeStore} from "@/store/modules/theme";
+
+
+  const themeStore = useThemeStore();
+  const { screenWidth, styleResponsive } = storeToRefs(themeStore);
+
   const tenantStore = useTenantStore();
   const { siteInfo } = storeToRefs(tenantStore);
 </script>
@@ -221,4 +226,9 @@
     line-height: .7;
   }
 }
+.hidden-sm-and-up{
+  .ele-cell{
+
+  }
+}
 </style>