Browse Source

top tab

master
maochaoying 2 years ago
parent
commit
c766cfa808
  1. 13
      src/components/CaseCard.vue
  2. 3
      src/components/CaseShow.vue
  3. 4
      src/components/Summarize.vue
  4. 14
      src/components/Swiper.vue
  5. 17
      src/components/Top.vue
  6. 20
      src/mock/index.js
  7. 2
      src/pages/index.vue

13
src/components/CaseCard.vue

@ -98,26 +98,29 @@ const getImg = id => {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
padding: 20px 0;
.icon {
width: auto;
height: 20px;
margin-bottom: 11px;
}
.title {
font-size: 8px;
font-size: 16px;
transform: scale(0.5);
line-height: 8px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #262626;
margin-bottom: 9px;
margin-bottom: 4px;
}
.btn {
border: 1px solid #262626;
padding: 3px 6px;
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 6px;
font-size: 12px;
transform: scale(0.5);
font-family: Alibaba PuHuiTi;
font-weight: 300;
color: #262626;

3
src/components/CaseShow.vue

@ -26,6 +26,7 @@ const getData = () => {
<style lang="scss" scoped>
.case_show_container {
margin-top: 330px;
margin-top: 360px;
padding-bottom: 7px;
}
</style>

4
src/components/Summarize.vue

@ -84,12 +84,12 @@ const props = defineProps({
}
.desc {
transform: scale(0.5);
width: 200%;
width: 170%;
font-size: 21px;
font-family: Source Han Sans CN;
font-weight: 300;
color: #959595;
line-height: 26px;
line-height: 30px;
text-align: center;
}
.mb {

14
src/components/Swiper.vue

@ -3,7 +3,6 @@
<swiper
:slidesPerView="1"
:spaceBetween="0"
:loop="true"
:pagination="{
clickable: true,
}"
@ -11,6 +10,7 @@
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide><img :src="B1" class="banner" alt="" /></swiper-slide>
<swiper-slide><img :src="B2" class="banner" alt="" /></swiper-slide>
@ -21,7 +21,7 @@
<div class="summar_wrap">
<Summarize :page="page" />
</div>
<div class="top_wrap"><Top /></div>
<div class="top_wrap"><Top :isFirstSwiper="isFirstSwiper" /></div>
</div>
</template>
@ -39,9 +39,19 @@ import { Pagination, Navigation } from 'swiper'
const modules = [Pagination, Navigation]
import { ref } from 'vue'
const sw = ref(null)
const isFirstSwiper = ref(true)
const onSwiper = swiper => {
sw.value = swiper
}
const onSlideChange = swiper => {
const { isBeginning } = swiper
console.log(isBeginning)
if (isBeginning) {
isFirstSwiper.value = true
} else {
isFirstSwiper.value = false
}
}
const preSwiper = () => {
sw.value?.slidePrev(500, false)
}

17
src/components/Top.vue

@ -1,9 +1,13 @@
<template>
<div :class="istop ? 'top_container' : 'top_container container_bg'">
<img class="logo" :src="istop ? Logo : Logo1" alt="" />
<div
:class="
istop && isFirstSwiper ? 'top_container' : 'top_container container_bg'
"
>
<img class="logo" :src="istop && isFirstSwiper ? Logo : Logo1" alt="" />
<img
class="fold_icon"
:src="istop ? Icon : Icon1"
:src="istop && isFirstSwiper ? Icon : Icon1"
alt=""
v-if="!drawer"
@click="openDrawer"
@ -39,6 +43,11 @@ import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const drawer = ref(false)
const props = defineProps({
isFirstSwiper: {
type: Boolean,
},
})
const openDrawer = () => {
drawer.value = true
@ -157,7 +166,7 @@ const scrollToTop = () => {
}
}
.container_bg {
background: #fff;
background: rgba(255, 255, 255, 0.9);
transition-property: all;
transition-duration: 0.7s;
animation-fill-mode: forwards;

20
src/mock/index.js

@ -79,52 +79,52 @@ export const hardList = [
{
id: 1,
title: '国网照明巡检摄像头',
pic: Y1,
picUrl: Y1,
},
{
id: 2,
title: '娱乐打禅休闲一体化座舱',
pic: Y2,
picUrl: Y2,
},
{
id: 3,
title: '暖手宝',
pic: Y3,
picUrl: Y3,
},
{
id: 4,
title: '微型光度计',
pic: Y4,
picUrl: Y4,
},
{
id: 5,
title: '动车底部巡检',
pic: Y5,
picUrl: Y5,
},
{
id: 6,
title: '全自动AI缠绕打包机器人',
pic: Y6,
picUrl: Y6,
},
{
id: 7,
title: '智慧医美视频拍照系统',
pic: Y7,
picUrl: Y7,
},
{
id: 8,
title: '智能多通道全自动免疫荧光分析仪',
pic: Y8,
picUrl: Y8,
},
{
id: 9,
title: '室内空调调节机',
pic: Y9,
picUrl: Y9,
},
{
id: 10,
title: '水处理设备',
pic: Y10,
picUrl: Y10,
},
]

2
src/pages/index.vue

@ -35,11 +35,13 @@ import { ref } from 'vue'
const isDrag = ref(false)
const handlePress = e => {
e.preventDefault()
//
isDrag.value = true
}
const handleRelease = e => {
//
e.preventDefault()
isDrag.value = false
}
</script>

Loading…
Cancel
Save