164 lines
3.3 KiB
Plaintext
164 lines
3.3 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 {
|
|
|
|
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>
|
|
|
|
|
|
|