修改首页样式
This commit is contained in:
		
							parent
							
								
									6505b31854
								
							
						
					
					
						commit
						7f4bfc710f
					
				| 
						 | 
					@ -4,6 +4,7 @@
 | 
				
			||||||
  display: flex;
 | 
					  display: flex;
 | 
				
			||||||
  padding: 20px 0 0 50px;
 | 
					  padding: 20px 0 0 50px;
 | 
				
			||||||
  overflow: hidden;
 | 
					  overflow: hidden;
 | 
				
			||||||
 | 
					  height: 70rpx;
 | 
				
			||||||
  .swiperDemoIndex{
 | 
					  .swiperDemoIndex{
 | 
				
			||||||
    width: 15px;
 | 
					    width: 15px;
 | 
				
			||||||
    height: 45px;
 | 
					    height: 45px;
 | 
				
			||||||
| 
						 | 
					@ -13,4 +14,31 @@
 | 
				
			||||||
    margin-right: 15px;
 | 
					    margin-right: 15px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					.subModule {
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  align-items: center;
 | 
				
			||||||
 | 
					  flex-wrap: wrap;
 | 
				
			||||||
 | 
					  margin-right: -3px;
 | 
				
			||||||
 | 
					  margin-left: -1px;
 | 
				
			||||||
 | 
					  .subModuleItem {
 | 
				
			||||||
 | 
					    width: 33%;
 | 
				
			||||||
 | 
					    height: 180rpx;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
 | 
					    align-items: center;
 | 
				
			||||||
 | 
					    justify-content: center;
 | 
				
			||||||
 | 
					    padding-bottom: 10rpx;
 | 
				
			||||||
 | 
					    border: 1px solid #ccc;
 | 
				
			||||||
 | 
					    border-left: 0;
 | 
				
			||||||
 | 
					    margin-top: -1px;
 | 
				
			||||||
 | 
					    .subModuleIndex {
 | 
				
			||||||
 | 
					      width: 65rpx;
 | 
				
			||||||
 | 
					      height: 65rpx;
 | 
				
			||||||
 | 
					      image {
 | 
				
			||||||
 | 
					        width: 100%;
 | 
				
			||||||
 | 
					        height: 100%;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,41 +3,65 @@
 | 
				
			||||||
    <view class="swiperDemo">
 | 
					    <view class="swiperDemo">
 | 
				
			||||||
      <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
 | 
					      <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
 | 
				
			||||||
        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 180px">
 | 
					        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 180px">
 | 
				
			||||||
<!--          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false"/>-->
 | 
					        <image src="@/assets/images/01.png" alt="" style="height: 100%; width: 100%" draggable="false"/>
 | 
				
			||||||
       <image src="@/assets/images/01.png" alt="" style="height: 100%; width: 100%" draggable="false"/>
 | 
					 | 
				
			||||||
        </nut-swiper-item>
 | 
					        </nut-swiper-item>
 | 
				
			||||||
      </nut-swiper>
 | 
					      </nut-swiper>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
 | 
					 | 
				
			||||||
    <view class="swiperDemoItem">
 | 
					    <view class="swiperDemoItem">
 | 
				
			||||||
      <view class="swiperDemoIndex"> </view>
 | 
					      <view class="swiperDemoIndex"> </view>
 | 
				
			||||||
      <view>请选择</view>
 | 
					      <view>请选择</view>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
    <view class="margin-top">
 | 
					  <!--九宫格-->
 | 
				
			||||||
      <nut-grid :column-num="3">
 | 
					    <view>
 | 
				
			||||||
        <nut-grid-item
 | 
					      <view class="subModule" >
 | 
				
			||||||
            text="我的项目"
 | 
					        <view class="subModuleItem"  v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.id)">
 | 
				
			||||||
            @click="Taro.navigateTo({url: '/subPages/pages/myProject/myProject'})">
 | 
					          <view class="subModuleIndex">
 | 
				
			||||||
        </nut-grid-item>
 | 
					            <image :src="item.icon"></image>
 | 
				
			||||||
        <nut-grid-item
 | 
					          </view>
 | 
				
			||||||
            text="警保风采"
 | 
					          <view style=" font-size: 12px;color: #414141;margin-top: 9px">{{item.name}}</view>
 | 
				
			||||||
            @click="Taro.navigateTo({url: '/pages/index/dataEntry/personnelInformationEntry/personnelInformationEntry'})">
 | 
					        </view>
 | 
				
			||||||
        </nut-grid-item>
 | 
					      </view>
 | 
				
			||||||
        <nut-grid-item text=".....">
 | 
					 | 
				
			||||||
        </nut-grid-item>
 | 
					 | 
				
			||||||
      </nut-grid>
 | 
					 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
  </view>
 | 
					  </view>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script setup lang="ts">
 | 
					<script setup lang="ts">
 | 
				
			||||||
import {ref} from 'vue'
 | 
					import {ref} from 'vue'
 | 
				
			||||||
import Taro from "@tarojs/taro";
 | 
					import Taro from "@tarojs/taro";
 | 
				
			||||||
 | 
					import  icon from '@/assets/images/project.png'
 | 
				
			||||||
import  './index.scss'
 | 
					import  './index.scss'
 | 
				
			||||||
const list = ref([
 | 
					const list = ref([
 | 
				
			||||||
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
 | 
					  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
 | 
				
			||||||
])
 | 
					])
 | 
				
			||||||
const swiperRef = ref()
 | 
					const swiperRef = ref() //轮播图
 | 
				
			||||||
 | 
					const subModuleList = ref([
 | 
				
			||||||
 | 
					  {
 | 
				
			||||||
 | 
					    id:0,
 | 
				
			||||||
 | 
					    icon:icon,
 | 
				
			||||||
 | 
					    name:'我的项目'
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  {
 | 
				
			||||||
 | 
					    id:1,
 | 
				
			||||||
 | 
					    icon:icon,
 | 
				
			||||||
 | 
					    name:'警保风采'
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  {
 | 
				
			||||||
 | 
					    id:2,
 | 
				
			||||||
 | 
					    icon:icon,
 | 
				
			||||||
 | 
					    name:'待定'
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					])
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const subNavigation = async (id:number)=>{
 | 
				
			||||||
 | 
					     switch (id) {
 | 
				
			||||||
 | 
					       case 0:
 | 
				
			||||||
 | 
					       await Taro.navigateTo({url: '/subPages/pages/myProject/myProject'})
 | 
				
			||||||
 | 
					       break;
 | 
				
			||||||
 | 
					       case 1:
 | 
				
			||||||
 | 
					         console.log("123132")
 | 
				
			||||||
 | 
					         // Taro.navigateTo({url: '/pages/index/dataEntry/personnelInformationEntry/personnelInformationEntry'})
 | 
				
			||||||
 | 
					       break;
 | 
				
			||||||
 | 
					     }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -76,3 +76,10 @@ interface BaseEnum<T, E = Record<string, any>> {
 | 
				
			||||||
  label: string;
 | 
					  label: string;
 | 
				
			||||||
  extData: E;
 | 
					  extData: E;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 interface IconFontProps {
 | 
				
			||||||
 | 
					  fontClass?: string,
 | 
				
			||||||
 | 
					  size?: number,
 | 
				
			||||||
 | 
					  type?: 'class' | 'svg'
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue