104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="row" v-for="(item, index) in menuList" :key="index">
|
|
<view class="header">
|
|
<text class="t">{{ item.label }}</text>
|
|
</view>
|
|
<view class="menu-wrap">
|
|
<view class="item" v-for="(val, i) in item.menus" :key="i" @click="go.to(val.pageId)">
|
|
<image :src="`/static/applocation/${val.icon}.png`" mode="aspectFit" class="icon"></image>
|
|
<view class="info">
|
|
<view class="title">
|
|
<text class="t">{{ val.label }}</text>
|
|
</view>
|
|
<view class="intro">
|
|
<text class="t">{{ val.intro }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import go from '@/commons/utils/go.js';
|
|
|
|
const menuList = ref([
|
|
{
|
|
label: '营销',
|
|
menus: [
|
|
{
|
|
icon: 'xszk',
|
|
pageId: 'PAGES_LIMIT_DISCOUNT',
|
|
label: '限时折扣',
|
|
intro: '批量设置商品折扣'
|
|
},
|
|
{
|
|
icon: 'czdhm',
|
|
pageId: 'LIMIT_DISCOUNT',
|
|
label: '充值兑换码',
|
|
intro: '兑换码直充余额，可当作礼品赠送'
|
|
}
|
|
]
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.container {
|
|
padding: 28upx;
|
|
.row {
|
|
.header {
|
|
padding-bottom: 28upx;
|
|
.t {
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.menu-wrap {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto;
|
|
grid-column-gap: 28upx;
|
|
grid-row-gap: 28upx;
|
|
.item {
|
|
display: flex;
|
|
background-color: #fff;
|
|
padding: 20upx;
|
|
border-radius: 20upx;
|
|
.icon {
|
|
$size: 80upx;
|
|
width: $size;
|
|
height: $size;
|
|
flex-shrink: 0;
|
|
}
|
|
.info {
|
|
display: flex;
|
|
padding-left: 20upx;
|
|
flex-direction: column;
|
|
.title {
|
|
.t {
|
|
font-size: 28upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.intro {
|
|
.t {
|
|
font-size: 28upx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|