修改首页样式

This commit is contained in:
wangyilin 2024-09-23 17:17:13 +08:00
parent 6505b31854
commit 7f4bfc710f
3 changed files with 76 additions and 17 deletions

View File

@ -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%;
}
}
}
}

View File

@ -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>

View File

@ -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'
}