Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
liyeyun
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
cfld-frontend
liyeyun
Commits
90fc2a5b
Commit
90fc2a5b
authored
Dec 14, 2023
by
王玉鑫
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 详情页主图vr
parent
251c9154
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
45 additions
and
5 deletions
+45
-5
ImageList.vue
src/components/common/ImageList.vue
+13
-3
DetailMain.vue
src/components/detail/DetailMain.vue
+17
-1
developZoneDetail.ts
src/types/api/developZoneDetail.ts
+7
-0
industrialParkDetail.ts
src/types/api/industrialParkDetail.ts
+7
-0
filters.ts
src/utils/filters.ts
+1
-1
No files found.
src/components/common/ImageList.vue
View file @
90fc2a5b
...
@@ -9,7 +9,12 @@
...
@@ -9,7 +9,12 @@
@slide-change="handleSlideChange"
@slide-change="handleSlideChange"
>
>
<SwiperSlide
v-for=
"(image, index) of imageList"
:key=
"index"
class=
"text-[0px]"
>
<SwiperSlide
v-for=
"(image, index) of imageList"
:key=
"index"
class=
"text-[0px]"
>
<CommonImage
class=
"h-[434px] w-full"
:src=
"image"
/>
<CommonImage
class=
"h-[434px] w-full"
:class=
"
{ 'cursor-pointer': image?.href }"
:src="image?.url"
@click="handleClick(image?.href)"
/>
</SwiperSlide>
</SwiperSlide>
</Swiper>
</Swiper>
</div>
</div>
...
@@ -26,7 +31,7 @@
...
@@ -26,7 +31,7 @@
<CommonImage
<CommonImage
class=
"h-[92px] w-[130px] cursor-pointer rounded"
class=
"h-[92px] w-[130px] cursor-pointer rounded"
:class=
"
{ 'border border-[#2878ff] p-1': index === currentIndex }"
:class=
"
{ 'border border-[#2878ff] p-1': index === currentIndex }"
:src="image"
:src="image
.url
"
/>
/>
</SwiperSlide>
</SwiperSlide>
</Swiper>
</Swiper>
...
@@ -59,7 +64,7 @@ import type { Swiper as SwiperType } from 'swiper/types';
...
@@ -59,7 +64,7 @@ import type { Swiper as SwiperType } from 'swiper/types';
const
props
=
withDefaults
(
const
props
=
withDefaults
(
defineProps
<
{
defineProps
<
{
images
:
string
[];
images
:
{
url
:
string
;
href
?:
string
}
[];
}
>
(),
}
>
(),
{
{
images
:
()
=>
[],
images
:
()
=>
[],
...
@@ -94,6 +99,11 @@ const setMainSwiper = (swiper: SwiperType) => {
...
@@ -94,6 +99,11 @@ const setMainSwiper = (swiper: SwiperType) => {
const
handleSlideChange
=
(
swiper
:
SwiperType
)
=>
{
const
handleSlideChange
=
(
swiper
:
SwiperType
)
=>
{
currentIndex
.
value
=
swiper
.
activeIndex
;
currentIndex
.
value
=
swiper
.
activeIndex
;
};
};
const
handleClick
=
(
href
?:
string
)
=>
{
if
(
href
)
{
window
.
open
(
href
,
'_blank'
);
}
};
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
...
...
src/components/detail/DetailMain.vue
View file @
90fc2a5b
...
@@ -31,7 +31,7 @@
...
@@ -31,7 +31,7 @@
<!-- main content -->
<!-- main content -->
<div
class=
"flex"
>
<div
class=
"flex"
>
<div
class=
"mt-4"
>
<div
class=
"mt-4"
>
<ImageList
:images=
"
detail.imgUrl
List"
></ImageList>
<ImageList
:images=
"
mainImage
List"
></ImageList>
</div>
</div>
<div
class=
"ml-[30px] mt-4 flex flex-col"
>
<div
class=
"ml-[30px] mt-4 flex flex-col"
>
<div>
<div>
...
@@ -118,6 +118,13 @@ export interface HeaderDetail {
...
@@ -118,6 +118,13 @@ export interface HeaderDetail {
/** 联系电话 */
/** 联系电话 */
contactPhone
:
string
;
contactPhone
:
string
;
id
:
number
;
id
:
number
;
/** vr列表 */
vrUrlList
?:
{
/** vr封面 */
vrCover
:
string
;
/** vr地址 */
vrUrl
:
string
;
}[];
}
}
const
props
=
withDefaults
(
const
props
=
withDefaults
(
...
@@ -216,6 +223,15 @@ const breadcrumbs = computed(() => {
...
@@ -216,6 +223,15 @@ const breadcrumbs = computed(() => {
},
},
];
];
});
});
/** 主图 */
const
mainImageList
=
computed
(()
=>
{
const
{
imgUrlList
,
vrUrlList
=
[]
}
=
props
.
detail
;
return
[
...
vrUrlList
.
map
(({
vrCover
,
vrUrl
})
=>
({
url
:
vrCover
,
href
:
vrUrl
})),
...
imgUrlList
.
map
((
i
)
=>
({
url
:
i
})),
];
});
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
.detail-main
{
.detail-main
{
...
...
src/types/api/developZoneDetail.ts
View file @
90fc2a5b
...
@@ -187,4 +187,11 @@ export interface DevelopZoneDetailResp {
...
@@ -187,4 +187,11 @@ export interface DevelopZoneDetailResp {
}[];
}[];
/** 供电类型 */
/** 供电类型 */
powerSupplyType
:
string
;
powerSupplyType
:
string
;
/** vr列表 */
vrUrlList
:
{
/** vr封面 */
vrCover
:
string
;
/** vr地址 */
vrUrl
:
string
;
}[];
}
}
src/types/api/industrialParkDetail.ts
View file @
90fc2a5b
...
@@ -115,4 +115,11 @@ export interface IndustrialParkDetailResp {
...
@@ -115,4 +115,11 @@ export interface IndustrialParkDetailResp {
seeYaosu
:
boolean
;
seeYaosu
:
boolean
;
/** 产业支持是否有数据 */
/** 产业支持是否有数据 */
seeResource
:
boolean
;
seeResource
:
boolean
;
/** vr列表 */
vrUrlList
:
{
/** vr封面 */
vrCover
:
string
;
/** vr地址 */
vrUrl
:
string
;
}[];
}
}
src/utils/filters.ts
View file @
90fc2a5b
...
@@ -51,6 +51,6 @@ export function formatNumber(v: unknown, n = 2): string {
...
@@ -51,6 +51,6 @@ export function formatNumber(v: unknown, n = 2): string {
if
(
typeof
v
===
'number'
)
{
if
(
typeof
v
===
'number'
)
{
return
v
.
toFixed
(
n
);
return
v
.
toFixed
(
n
);
}
else
{
}
else
{
return
v
!
.
toString
()
;
return
v
?.
toString
()
||
''
;
}
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment