wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor API requests and update component structure

Browse Source
This commit is contained in:
wangqiao
2025-08-20 22:58:08 +08:00
parent 1ef219878c
commit 2fe36051f8
8 changed files with 123 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
pages/home/components/MainContent.vue
View File

@ -1,53 +1,74 @@
`<template>
`
<template>
<div class="main-content">
<div class="flex">
<div class="h-424px w-957px">
<el-carousel height="424px" indicator-position="none">
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
<el-image :src="item.content" class="w-100%" :class="{ 'cursor-pointer': item.url }" fit="cover" @click="handleClick(item.url)" />
<el-image
:src="item.content"
class="w-100%"
:class="{ 'cursor-pointer': item.url }"
fit="cover"
@click="handleClick(item.url)"
/>
</el-carousel-item>
</el-carousel>
</div>
<LoginForm />
</div>
<div class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px">
<img src="~/assets/images/voice.png" alt="" srcset="" class="mr-10px h-15px w-16px" />
<Vue3Marquee :duration="10" direction="normal" pause-on-hover>· 经典来袭，SolidWorks装配经典案例之气动发动机 </Vue3Marquee>
<div
class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px"
>
<img
src="~/assets/images/voice.png"
alt=""
srcset=""
class="mr-10px h-15px w-16px"
/>
<Vue3Marquee :duration="10" direction="normal" pause-on-hover
>· 经典来袭，SolidWorks装配经典案例之气动发动机
</Vue3Marquee>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import LoginForm from './LoginForm.vue'
import { Vue3Marquee } from 'vue3-marquee'
import { reactive, ref } from "vue";
import LoginForm from "./LoginForm.vue";
import { Vue3Marquee } from "vue3-marquee";
import { getSettingPage } from '~/api/home/index'
import type { PageResultIndexSettingRespVO } from '~/api/home/type'
import { getSettingPage } from "~/api/home/index";
import type { PageResultIndexSettingRespVO } from "~/api/home/type";
const pageReq = reactive({
type: 1,
status: 0,
})
const pageReq = reactive({
type: 1,
status: 0,
});
const bannerList = ref<PageResultIndexSettingRespVO[]>([])
const getBanner = async () => {
const res = await getSettingPage(pageReq)
if (res.code === 0) {
bannerList.value = res.data
}
}
getBanner()
const handleClick = (url: string) => {
if (url) {
navigateTo(url)
}
const { data: bannerList } = useAsyncData("get-setting-Page", async () => {
const res = await getSettingPage(pageReq);
return res.data;
});
// const bannerList = ref<PageResultIndexSettingRespVO[]>([])
// const getBanner = async () => {
// const res = await getSettingPage(pageReq)
// if (res.code === 0) {
// bannerList.value = res.data
// }
// }
// getBanner()
const handleClick = (url: string) => {
if (url) {
navigateTo(url);
}
};
</script>
<style scoped lang="scss">
.main-content {
flex: 1;
}
.main-content {
flex: 1;
}
</style>