初始化代码

2025-12-22 17:13:05 +08:00
parent ed0de08e3a
commit 1f7e9d401b
2947 changed files with 526137 additions and 0 deletions
--- a/uniapp/uni-app/components/banner.vue
+++ b/uniapp/uni-app/components/banner.vue
@@ -0,0 +1,215 @@
+<template>
+	<!-- 轮播图广告 -->
+	<view class='swiper-box' :style='{margin:`0 ${margin}rpx`,borderRadius:`${.3125}rem`}'>
+		<swiper class="swiper-ad" :indicator-dots="false" :autoplay="autoplay" :indicator-color="indicatorColor"
+			:indicator-active-color="indicatorActiveColor" :circular="circular"
+			:previous-margin="list.length>1?previousMargin:0" :next-margin="list.length>1?nextMargin:0"
+			@change="handerChange" :style="{height:`${11.375}rem`,borderRadius:`${.3125}rem`}"
+			easing-function="linear">
+			<swiper-item v-for="(item,index) in list" :key="index">
+				<view class='img-box rel' :style="{borderRadius:`${.3125}rem`}" @tap='changeItem(item,index)'>
+					<image mode="aspectFill" lazy-load :src='item.img || item.cover || item' class="swiper-ad__img"
+						:style="{borderRadius:`${.3125}rem`}" />
+					<view class="abs play-video flex-center" :style="{borderRadius:`${.3125}rem`}"
+						v-if="haveVideo && index == 0"><i class="iconfont icon-bofang"></i>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class='numbers' v-if="list.length>1&&indicatorType=='number'" :style="{textAlign:indicatorStyle}">
+			<view class="number">{{activeIndex+1}}/{{list.length}}</view>
+		</view>
+		<view class='dots' v-if="list.length>1&&indicatorType=='dot'" :style="{textAlign:indicatorStyle}">
+			<view class='dot' v-for="(item,index) in list" :key="index"
+				:style='{backgroundColor:index==activeIndex?indicatorActiveColor:indicatorColor,width:index==activeIndex? `${dotWidth}rpx` :"12rpx"}'>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+	} from 'vuex';
+	export default {
+		name: 'banner',
+		props: {
+			list: {
+				type: Array,
+				default () {
+					return [1, 2, 3]
+				}
+			},
+			height: {
+				type: Number,
+				default () {
+					return 400
+				}
+			},
+			indicatorType: {
+				type: String,
+				default () {
+					return "dot"
+				}
+			},
+			indicatorColor: {
+				type: String,
+				default () {
+					return "#FEFFFE"
+				}
+			},
+			indicatorActiveColor: {
+				type: String,
+				default () {
+					return "#fff"
+				}
+			},
+			indicatorStyle: {
+				type: String,
+				default () {
+					return 'center'
+				}
+			},
+			circular: {
+				type: Boolean,
+				default () {
+					return true
+				}
+			},
+			autoplay: {
+				type: Boolean,
+				default () {
+					return false
+				}
+			},
+			previousMargin: {
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+			nextMargin: {
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+			dotWidth: {
+				type: Number,
+				default () {
+					return 12
+				}
+			},
+			margin: {
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+			borderRadius: {
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+			haveVideo: {
+				type: Boolean,
+				default () {
+					return false
+				}
+			}
+		},
+		created() {
+
+		},
+		data() {
+			return {
+				activeIndex: 0
+			}
+		},
+		computed: mapState({
+			configInfo: state => state.config.configInfo,
+			commonOptions: state => state.user.commonOptions,
+		}),
+		methods: {
+			handerChange: function(e) {
+				this.activeIndex = e.detail.current;
+			},
+			changeItem(item, index) {
+				this.$emit("change", {
+					item,
+					index
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.swiper-box {
+		position: relative;
+		overflow: hidden;
+
+		.img-box {
+			width: 100%;
+			height: 100%;
+
+			.swiper-ad__img {
+				width: 100%;
+				height: 100%;
+				background: #fff;
+			}
+
+			.play-video {
+				width: 100%;
+				height: 100%;
+				top: 0;
+				background: rgba(0, 0, 0, 0.2);
+
+				.iconfont {
+					font-size: 100rpx;
+					color: #fff;
+				}
+			}
+		}
+
+		.dots {
+			position: absolute;
+			z-index: 20rpx;
+			text-align: right;
+			width: 100%;
+			transform: translateY(-48rpx);
+			padding: 0 20rpx;
+
+			.dot {
+				display: inline-block;
+				height: 12rpx;
+				width: 12rpx;
+				background-color: #FEFFFE;
+				border-radius: 6rpx;
+				margin: 0 8rpx;
+
+			}
+		}
+
+
+		.numbers {
+			position: absolute;
+			z-index: 20rpx;
+			text-align: right;
+			width: 100%;
+			transform: translateY(-80rpx);
+			padding: 0 20rpx;
+
+			.number {
+				display: inline-block;
+				width: 90rpx;
+				line-height: 50rpx;
+				background: rgba(0, 0, 0, 0.3);
+				text-align: center;
+				color: #fff;
+				border-radius: 45rpx;
+			}
+		}
+	}
+</style>