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