新增首页轮播图（推荐菜品）

order-app/src/pages/index/index.vue

@@ -1,49 +1,56 @@
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
-	<u-button type="success">成功按钮</u-button>
-  </view>
+	<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height" :list="swiperList"></u-swiper>
+	<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">热门推荐</u-divider>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      title: 'Hello',
-    }
-  },
-  onLoad() {},
-  methods: {},
-}
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	//轮播图高度
+	const height = ref('400')
+	//是否显示面板指示点
+	const indicatorDots = ref(true)
+	//是否自动播放
+	const autoplay = ref(true)
+	//自动切换时间间隔
+	const interval = ref(2000)
+	//滑动动画时长
+	const duration = ref(500)
+	//定义轮播图数据
+	const swiperList = ref([{
+		image: '/static/swiper_1.png'
+	}, {
+		image: '/static/swiper_2.png'
+	}, {
+		image: '/static/swiper_3.png'
+	}])
 </script>
 
 <style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
+	.logo {
+		height: 200rpx;
+		width: 200rpx;
+		margin-top: 200rpx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50rpx;
+	}
 
-.text-area {
-  display: flex;
-  justify-content: center;
-}
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-</style>
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+	}
+</style>