后台可设置轮播图切换时间

Author: eeg1412

admin/src/components/ConfigSiteSettingsForm.vue

@@ -67,7 +67,18 @@
         :min="1"
         :max="100"
         :step="1"
-      ></el-input-number>
+      ></el-input-number
+      ><span class="pl10">条内容</span>
+    </el-form-item>
+    <el-form-item label="轮播图切换时间" prop="siteTopSlideTime">
+      <!-- 数字 1000-10000 -->
+      <el-input-number
+        v-model="siteSettingsForm.siteTopSlideTime"
+        controls-position="right"
+        :min="100"
+        :step="100"
+      ></el-input-number
+      ><span class="pl10">毫秒</span>
     </el-form-item>
     <el-form-item label="所在时区" prop="siteTimeZone">
       <el-select v-model="siteSettingsForm.siteTimeZone">
@@ -132,6 +143,8 @@ export default {
       siteUrl: '',
       // 每页显示
       sitePageSize: 10,
+      // 顶部幻灯片切换时间
+      siteTopSlideTime: 8000,
       // 你所在时区
       siteTimeZone: '',
       // 页面底部信息
@@ -162,6 +175,9 @@ export default {
       sitePageSize: [
         { required: true, message: '请输入每页显示', trigger: 'blur' },
       ],
+      siteTopSlideTime: [
+        { required: true, message: '请输入轮播图切换时间', trigger: 'blur' },
+      ],
       siteTimeZone: [
         { required: true, message: '请选择你所在时区', trigger: 'blur' },
       ],

blog/components/Banner.vue

@@ -6,7 +6,7 @@
       :loop="true"
       :mousewheel="true"
       :autoplay="{
-        delay: 8000,
+        delay: siteTopSlideTime,
         disableOnInteraction: false,
       }"
       :pagination="{
@@ -42,6 +42,12 @@
 </template>
 <script setup>
 import { getBannerListApi } from '@/api/banner'
+import { useOptionStore } from '@/store/options'
+
+const optionStore = useOptionStore()
+const { options } = storeToRefs(optionStore)
+
+const siteTopSlideTime = computed(() => options.value.siteTopSlideTime || 8000)
 const router = useRouter()
 const [bannerListDataResponse] = await Promise.all([getBannerListApi()])
 const { data: bannerListData } = bannerListDataResponse
@@ -90,7 +96,7 @@ const openLink = (item, midClick) => {
   background: rgba(0, 0, 0, 0.4);
   /* 垂直居中 */
   line-height: 24px;
-  padding: 0 40px 0 9px;
+  padding: 0 9px 0 9px;
   box-sizing: border-box;
   color: #ffffff;
   z-index: 2;

server/config/globalConfig.js

@@ -48,6 +48,8 @@ const initGlobalConfig = async () => {
     siteUrl: '',
     // 每页显示
     sitePageSize: 10,
+    // 顶部幻灯片切换时间
+    siteTopSlideTime: 8000,
     // 你所在时区
     siteTimeZone: '',
     // 页面底部信息