调整轮播图的样式 调整首页的跳转

ghsApp/src/components/app-swiper.vue

@@ -1,13 +1,18 @@
 <template>
-	<div class="swiper-wrap" :style="{'width': widthFn,'height': heightFn}">
-		<swiper :indicator-dots="!tagShow" :autoplay="autoplay" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#3387ff" @change="bannerChange">
+<view class="bigBox">
+  	<div class="swiper-wrap" :style="{'width': widthFn,'height': heightFn}">
+		<swiper :indicator-dots="tagShow" :autoplay="autoplay" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#3387ff" @change="bannerChange">
 			<swiper-item v-for="(item, index) in list" :key="index" @tap.stop="detail">
 				<img :src="item.img" class="tui-slide-image" mode="scaleToFill" />
         <view class="info">2312</view>
 			</swiper-item>
 		</swiper>
-		<app-tag v-if="tagShow" class="swiper-tag" type="translucent" shape="circleLeft" size="small">{{index + 1}}/{{list.length}}</app-tag>
+		<!-- <app-tag v-if="tagShow" class="swiper-tag" type="translucent" shape="circleLeft" size="small">{{index + 1}}/{{list.length}}</app-tag> -->
 	</div>
+  <view class="swiper_dots">
+      <text v-for="(item, index) in list" :key="index" :class="{'active': index === currentIndex}"></text>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -57,7 +62,7 @@ export default {
 	},
 	data() {
 		return {
-			index: 0
+			currentIndex: 0
 		}
 	},
 	computed: {
@@ -78,7 +83,7 @@ export default {
 	},
 	methods: {
 		bannerChange: function(e) {
-			this.index = e.detail.current
+			this.currentIndex = e.detail.current
 		},
 		detail(data) {
 			this.$emit('detail', data)
@@ -135,6 +140,32 @@ export default {
 	}
 
 	/* #endif */
+  
+}
+.bigBox{
+  height: 450upx;
+  position: relative;
+  .swiper_dots{
+    position: absolute;
+    bottom: 10upx;
+    left: 50%;
+    z-index: 2021;
+    transform: translateX(-50%);
+    // height: 16upx;
+    // width: 100upx;
+    // background-color: red !important;
+    &>text{
+      display: inline-block;
+      height: 12upx;
+      width: 12upx;
+      background: #CCCCCC;
+      border-radius: 6upx;
+      margin-left: 14upx;
+    }
+    &>.active{
+      width: 26upx;
+      background: #3387FF;
+    }
+  }
 }
-
 </style>

ghsApp/src/pagesClient/official/index.vue

@@ -144,7 +144,7 @@ export default {
 }
 .main{
   margin: 100upx 0;
-  padding-bottom: 70upx;
+  padding-bottom: 30upx;
   &>.banner_box{
     width: 100vw;
     height: 750upx;