93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<template>
|
|
<view style="position: relative">
|
|
<swiper
|
|
class="swiper"
|
|
:circular="false"
|
|
:indicator-dots="list.length > 1 ? true : false"
|
|
:autoplay="false"
|
|
:interval="2000"
|
|
:duration="500"
|
|
indicator-active-color="#2E53CC"
|
|
@change="change"
|
|
:current="current"
|
|
>
|
|
<swiper-item v-for="(item, index) in list" :key="index">
|
|
<view class="image-box">
|
|
<image :src="`${url}/static/img/${item.imgUrl}`"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- <view class="left" v-if="current > 0" @click="sub">
|
|
<up-icon name="arrow-left" color="#2E53CC" :size="'12px'"></up-icon>
|
|
</view>
|
|
<view class="right" v-if="current < list.length - 1" @click="add">
|
|
<up-icon
|
|
name="arrow-right"
|
|
color="#2E53CC"
|
|
:size="'12px'"
|
|
></up-icon> </view
|
|
> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { url } from "@/utils/data";
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
list: any;
|
|
}>(),
|
|
{
|
|
list: [
|
|
{
|
|
imgUrl: 'b-a1-1.1.1.png'
|
|
}
|
|
// {
|
|
// imgUrl: "b-a1.png",
|
|
// },
|
|
// {
|
|
// imgUrl: "b-a2.png",
|
|
// },
|
|
// {
|
|
// imgUrl: "b-a3.png",
|
|
// },
|
|
],
|
|
}
|
|
);
|
|
|
|
const current = ref(0);
|
|
|
|
const change = (e: any) => {
|
|
current.value = e.detail.current;
|
|
};
|
|
|
|
// const add = () => {
|
|
// current.value++
|
|
// };
|
|
|
|
// const sub = () => {
|
|
// current.value--;
|
|
// };
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.swiper {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
.image-box {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
image {
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
}
|
|
.title {
|
|
font-size: 40rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: $u-primary;
|
|
margin-top: 90rpx;
|
|
}
|
|
}
|
|
</style>
|