maochaoying
2 years ago
8 changed files with 160 additions and 61 deletions
-
43package-lock.json
-
4package.json
-
66src/App.vue
-
17src/api/index.js
-
1src/assets/scss/globalVar.scss
-
33src/components/Count.vue
-
41src/style.scss
-
16yarn.lock
@ -1,9 +1,63 @@ |
|||
<script setup> |
|||
import Count from 'cpns/Count' |
|||
</script> |
|||
|
|||
<template> |
|||
<Count /> |
|||
<swiper |
|||
virtual |
|||
:direction="'vertical'" |
|||
:slidesPerView="1" |
|||
:spaceBetween="0" |
|||
:mousewheel="true" |
|||
:pagination="{ |
|||
clickable: true, |
|||
}" |
|||
:keyboard="{ |
|||
enabled: true, |
|||
onlyInViewport: false, |
|||
pageUpDown: true, |
|||
}" |
|||
@swiper="onSwiper" |
|||
@slideChange="onSlideChange" |
|||
:modules="modules" |
|||
class="mySwiper" |
|||
> |
|||
<swiper-slide>Slide 1</swiper-slide> |
|||
<swiper-slide>Slide 2</swiper-slide> |
|||
<swiper-slide>Slide 3</swiper-slide> |
|||
<swiper-slide>Slide 4</swiper-slide> |
|||
<swiper-slide>Slide 5</swiper-slide> |
|||
<swiper-slide>Slide 6</swiper-slide> |
|||
<swiper-slide>Slide 7</swiper-slide> |
|||
<swiper-slide>Slide 8</swiper-slide> |
|||
<swiper-slide>Slide 9</swiper-slide> |
|||
</swiper> |
|||
</template> |
|||
<script> |
|||
// Import Swiper Vue.js components |
|||
import { Swiper, SwiperSlide } from 'swiper/vue' |
|||
|
|||
// Import Swiper styles |
|||
import 'swiper/css' |
|||
import 'swiper/css/pagination' |
|||
import './style.scss' |
|||
|
|||
<style scoped></style> |
|||
// import required modules |
|||
import { Mousewheel, Pagination, Virtual } from 'swiper' |
|||
|
|||
export default { |
|||
components: { |
|||
Swiper, |
|||
SwiperSlide, |
|||
}, |
|||
setup() { |
|||
const onSwiper = swiper => { |
|||
console.log(swiper) |
|||
} |
|||
const onSlideChange = () => { |
|||
console.log('slide change') |
|||
} |
|||
return { |
|||
onSwiper, |
|||
onSlideChange, |
|||
modules: [Mousewheel, Pagination, Virtual], |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
@ -1,17 +0,0 @@ |
|||
import request from '@/service' |
|||
|
|||
export const get15DaysWeatherByArea = data => { |
|||
return request({ |
|||
url: '/api/common/weather/get15DaysWeatherByArea', |
|||
method: 'GET', |
|||
data, |
|||
interceptors: { |
|||
requestInterceptors(res) { |
|||
return res |
|||
}, |
|||
responseInterceptors(result) { |
|||
return result |
|||
}, |
|||
}, |
|||
}) |
|||
} |
|||
@ -1 +0,0 @@ |
|||
$bg-color: #1989fa; |
|||
@ -1,33 +0,0 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<span>当前数值{{ countComputed }}</span> |
|||
<br /> |
|||
<span>双倍数值{{ doubleCount }}</span> |
|||
<br /> |
|||
<button type="primary" size="default" @click="countStore.countAdd"> |
|||
+1 |
|||
</button> |
|||
<button type="primary" size="default" @click="countStore.countReduce"> |
|||
-1 |
|||
</button> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { computed, onMounted } from 'vue' |
|||
import { get15DaysWeatherByArea } from '@/api' |
|||
import { useCountStore } from '@/store' |
|||
import { storeToRefs } from 'pinia' |
|||
const countStore = useCountStore() |
|||
// 通过计算属性 |
|||
const countComputed = computed(() => countStore.count) |
|||
// 通过 storeToRefs api 结构 |
|||
const { doubleCount } = storeToRefs(countStore) |
|||
onMounted(() => { |
|||
get15DaysWeatherByArea() |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.bg { |
|||
background: $bg-color; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,41 @@ |
|||
#app { |
|||
height: 100%; |
|||
} |
|||
html, |
|||
body { |
|||
position: relative; |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
background: #eee; |
|||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; |
|||
font-size: 14px; |
|||
color: #000; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.swiper { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.swiper-slide { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
background: #fff; |
|||
/* Center slide text vertically */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.swiper-slide { |
|||
img { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue