修改首页样式
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