163 lines
3.2 KiB
Plaintext
163 lines
3.2 KiB
Plaintext
<template>
|
|
<AdminLayout :currentPage="currentPage">
|
|
<view class="design-container">
|
|
<view class="module-header">
|
|
<text class="module-title">模板库</text>
|
|
<text class="module-desc">从丰富的模板中快速创建页面</text>
|
|
</view>
|
|
<view class="templates-grid">
|
|
<view v-for="template in templateLibrary" :key="template.id" class="template-card">
|
|
<view class="template-header">
|
|
<text class="template-name">{{ template.name }}</text>
|
|
</view>
|
|
<view class="template-body">
|
|
<text class="template-desc">{{ template.description }}</text>
|
|
<button class="btn-use" @click="handleUseTemplate(template.id)">使用模板</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
|
|
|
const currentPage = ref<string>('design-templates')
|
|
|
|
const templateLibrary = ref<any[]>([
|
|
{
|
|
id: 1,
|
|
name: '首页模板A',
|
|
description: '经典电商首页布局'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '首页模板B',
|
|
description: '简约风格的商城页面'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '活动模板',
|
|
description: '活动促销页面布局'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '商品模板',
|
|
description: '商品展示页面布局'
|
|
}
|
|
])
|
|
|
|
const handleUseTemplate = (templateId: number) => {
|
|
console.log('使用模板', templateId)
|
|
uni.showToast({
|
|
title: '使用模板成功',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/uni.scss';
|
|
|
|
.design-container {
|
|
min-height: 100vh;
|
|
background: $background-secondary;
|
|
padding: $space-lg;
|
|
}
|
|
|
|
.module-header {
|
|
margin-bottom: $space-xl;
|
|
}
|
|
|
|
.module-title {
|
|
font-size: $font-size-lg;
|
|
font-weight: bold;
|
|
color: $text-primary;
|
|
display: block;
|
|
margin-bottom: $space-sm;
|
|
}
|
|
|
|
.module-desc {
|
|
font-size: $font-size-sm;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.templates-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: $space-lg;
|
|
margin-bottom: $space-lg;
|
|
}
|
|
|
|
.template-card {
|
|
background: white;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow-sm;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: $shadow-md;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
.template-header {
|
|
padding: $space-lg;
|
|
background: $background-tertiary;
|
|
text-align: center;
|
|
}
|
|
|
|
.template-body {
|
|
padding: $space-lg;
|
|
}
|
|
|
|
.template-name {
|
|
font-size: $font-size-md;
|
|
font-weight: bold;
|
|
color: $text-primary;
|
|
display: block;
|
|
margin-bottom: $space-sm;
|
|
}
|
|
|
|
.template-desc {
|
|
color: $text-secondary;
|
|
font-size: $font-size-sm;
|
|
line-height: 1.5;
|
|
display: block;
|
|
margin-bottom: $space-lg;
|
|
}
|
|
|
|
.btn-use {
|
|
background: $primary-color;
|
|
color: white;
|
|
padding: $space-sm $space-lg;
|
|
border-radius: $radius-sm;
|
|
border: none;
|
|
margin-top: $space-lg;
|
|
font-size: $font-size-sm;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.design-container {
|
|
padding: $space-md;
|
|
}
|
|
|
|
.templates-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.templates-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|