首页轮播修改

src/pages/index/index.vue

@@ -1,16 +1,16 @@
 <template>
 <!--  <uv-navbar placeholder leftIcon="" title="Yeswash洗车"
              :border="false"></uv-navbar>-->
-  <view class="content" :style="containerStyle">
+  <view class="content" >
     <!--    <image class="logo" src="/static/logo.png"/>
         <view class="text-area">
           <text class="title">{{ title }}</text>
         </view>-->
     <view style="width: 100%;" class="swiper-content">
-        <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
+        <swiper :style="state.customStyle" circular :indicator-dots="true" :autoplay="true" :interval="3000"
                 :duration="500">
           <swiper-item v-for="(item,idx) in state.swiperList" :key="idx">
-            <image :src="item" mode="scaleToFill" style="width: 100%;height:170px;" @click="handleBannerClick(idx)"></image>
+            <image :src="item" mode="scaleToFill" :style="state.customStyle" @click="handleBannerClick(idx)"></image>
           </swiper-item>
         </swiper>
 
@@ -36,7 +36,6 @@
       <uv-grid :border="false" :col="4">
         <uv-grid-item v-for="(item,index) in state.menuList" :key="index" @click="handleMenuClick(item)">
           <image :src="item.icon" mode="widthFit" style="width: 48rpx;height: 48rpx"></image>
-          <!--          <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>-->
           <text class="grid-text" style="font-size: 14px;">{{ item.title }}</text>
         </uv-grid-item>
       </uv-grid>
@@ -72,6 +71,7 @@ import WashStation from "@/components/station/index.vue"
 import {get, post} from "@/utils/https";
 import {calcMapDistance} from "@/utils/common"
 import {checkLogin, fetchToken, loadUserInfo, tryLogin} from "@/utils/auth";
+import {rpxToPx} from "@/utils/device";
 
 const title = ref('Hello')
 const isLogin = ref(false)
@@ -97,10 +97,8 @@ const initState = () => ({
     foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
   },
   customStyle: {
-    'margin-top': '40rpx',
-    height: '80rpx',
-    width: '80%',
-    borderRadius: '40rpx',//圆角
+    height: '180px',
+    width: '100%',
   },
   notice: '中秋佳节，全场8折，快来洗车吧！',
   stationList: [],
@@ -113,9 +111,12 @@ const initState = () => ({
 const state = reactive(initState())
 
 onLoad((e: any) => {
-  const bound = uni.getMenuButtonBoundingClientRect();
-  containerStyle.value = {
-    // top: `${bound.bottom + 10}px`,
+  let height = uni.getSystemInfoSync().windowHeight;
+  // const bound = uni.getMenuButtonBoundingClientRect();
+  // width: 100%;height:170px;
+  state.customStyle = {
+    width:'100%',
+    height:`${(height-rpxToPx(60))/4}px`
   };
   /*  if (query) {
       uni.showToast({
@@ -127,6 +128,14 @@ onLoad((e: any) => {
 })
 
 onShow(() => {
+  let height = uni.getSystemInfoSync().windowHeight;
+  // const bound = uni.getMenuButtonBoundingClientRect();
+  // width: 100%;height:170px;
+  state.customStyle= {
+    width:'100%',
+    height:`${(height-rpxToPx(60))/4}px`
+  };
+
   let token = fetchToken();
   if (token) {
     getApp<any>().globalData.token = token;