113 lines
2.8 KiB
Vue
113 lines
2.8 KiB
Vue
|
<template name="basics">
|
||
|
|
<view>
|
||
|
|
<scroll-view scroll-y class="page">
|
||
|
|
<view class="response"
|
||
|
|
style="height: 250upx;line-height: 400upx;font-size: 32rpx;font-weight: bold;text-align: center;">
|
||
|
|
敬请期待更多类别</view>
|
||
|
|
<view class="nav-list">
|
||
|
|
<navigator hover-class="none" :url="'/pages/tool/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
|
||
|
|
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
|
||
|
|
<view class="mt30 grid text-center bg-white" style="flex-direction: column; align-items: center;">
|
||
|
|
<view class=" flex justify-center align-center" style="width: 100upx;height: 100upx;">
|
||
|
|
<image class="grid-svg" style="width: 100%;height: 100%;" :src="item.cuIcon" mode="">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
<view style="font-weight: bold;margin-top: 16rpx;">{{item.title}}</view>
|
||
|
|
<view style="font-size: 24rpx;color: #b1b1b1;">{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
<view class="cu-tabbar-height"></view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "basics",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
elements: [{
|
||
|
|
title: '资源库',
|
||
|
|
name: 'resource',
|
||
|
|
color: 'cyan',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/zyk.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '手机壁纸',
|
||
|
|
name: 'wallpaper',
|
||
|
|
color: 'purple',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/sjbz.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '电脑壁纸',
|
||
|
|
name: 'computer',
|
||
|
|
color: 'pink',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/dnbz.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '精美头像',
|
||
|
|
name: 'avatar',
|
||
|
|
color: 'brown',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/jmtx.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '视频资源',
|
||
|
|
name: 'video',
|
||
|
|
color: 'blue',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/sp.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '水印去除',
|
||
|
|
name: 'shuiyin',
|
||
|
|
color: 'red',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/sycc.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '手机软件',
|
||
|
|
name: 'phone',
|
||
|
|
color: 'orange',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/sjrj.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '电脑软件 ',
|
||
|
|
name: 'software',
|
||
|
|
color: 'mauve',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/dnrj.png'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '积分兑换',
|
||
|
|
name: 'exchange',
|
||
|
|
color: 'green',
|
||
|
|
cuIcon: 'https://img.yidaima.cn/jfdh.png'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
console.log("success")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.page {
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
page {
|
||
|
|
background-color: #F5F5F5;;
|
||
|
|
}
|
||
|
|
.nav-li {
|
||
|
|
/* padding: 30upx; */
|
||
|
|
border-radius: 24upx;
|
||
|
|
width: 30%;
|
||
|
|
margin: 0 1% 20upx;
|
||
|
|
/* background-image: url(https://i.imgtg.com/2022/12/15/Dsef6.jpg); */
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
position: relative;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
</style>
|