104 lines
2.1 KiB
Vue
104 lines
2.1 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<up-swiper :list="state.swiperList" indicator indicatorMode="line" circular></up-swiper>
|
|||
|
|
|
|||
|
|
<up-notice-bar bgColor="#fff" :text="state.notice"></up-notice-bar>
|
|||
|
|
|
|||
|
|
<view class="grid grid-icon">
|
|||
|
|
<up-grid :border="false" col="4">
|
|||
|
|
<up-grid-item v-for="(item,index) in state.gridList" :key="index">
|
|||
|
|
<up-icon :customStyle="{color: 'white',paddingLeft:'20rpx'}" :name="item.name" :size="20" />
|
|||
|
|
<text class="grid-text">{{ item.title }}</text>
|
|||
|
|
</up-grid-item>
|
|||
|
|
</up-grid>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<SysLogOp />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<TabBar :current-page="0" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { onMounted, reactive } from 'vue';
|
|||
|
|
import TabBar from '@/pages/component/tabbar.vue'
|
|||
|
|
import SysLogOp from '@/pages/component/sysLogOp.vue'
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
swiperList: [
|
|||
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|||
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|||
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|||
|
|
],
|
|||
|
|
gridList: [
|
|||
|
|
{
|
|||
|
|
name: 'red-packet-fill',
|
|||
|
|
title: '功能1',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'zhifubao-circle-fill',
|
|||
|
|
title: '功能2',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'apple-fill',
|
|||
|
|
title: '功能3',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'twitter-circle-fill',
|
|||
|
|
title: '功能4',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'taobao-circle-fill',
|
|||
|
|
title: '功能5',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'baidu-circle-fill',
|
|||
|
|
title: '测试6',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'facebook-circle-fill',
|
|||
|
|
title: '功能7',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'weibo-circle-fill',
|
|||
|
|
title: '功能8',
|
|||
|
|
url: '/'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
notice: '欢迎使用，Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架。让开发更简单、更通用、更流行！'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.grid {
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-icon {
|
|||
|
|
::v-deep.u-icon__icon {
|
|||
|
|
color: white;
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: $uni-color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
padding: 10rpx 0 40rpx 0rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|